/* ortner.nu — shared tokens and base styles */

:root{
  --page:#EDEBE6;
  --ink:#1C1E22;
  --mute:#6A6E76;
  --rule:#D5D2CB;
  --accent:#C77B2A;
}
@media (prefers-color-scheme: dark){
  :root{
    --page:#0E1013;
    --ink:#E6E8EB;
    --mute:#8A9099;
    --rule:#262A30;
    --accent:#E0973A;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page);
  color:var(--ink);
  font-family:"Barlow Semi Condensed","Helvetica Neue",Arial,sans-serif;
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:620px;margin:0 auto;padding:72px 24px 96px}

a{color:inherit}
@media (hover:hover){a:hover{color:var(--accent)}}

h1{font-size:38px;font-weight:600;letter-spacing:-0.01em;line-height:1.05;margin:0 0 14px}
h2{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:none;color:var(--mute);margin:0 0 4px}
p{margin:0 0 16px;max-width:52ch}
.lede{color:var(--mute)}

.work{margin:56px 0 0;padding:0;list-style:none}
.work li{border-top:1px solid var(--rule);padding:22px 0}
.work li:last-child{border-bottom:1px solid var(--rule)}
.work a{text-decoration:none;display:block}
.work .name{font-size:24px;font-weight:600;line-height:1.2}
.work .what{color:var(--mute);margin-top:4px;max-width:48ch}
.work .meta{color:var(--mute);font-size:15px;margin-top:8px}

footer{margin-top:64px;color:var(--mute);font-size:16px}
footer a{text-decoration:underline}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:480px){
  .wrap{padding:48px 20px 64px}
  h1{font-size:30px}
}

/* prototype card — live, non-interactive preview of the app */
.work li.app{padding:26px 0 24px}
.app .preview{
  position:relative;
  height:500px;overflow:hidden;
  border:1px solid var(--rule);border-radius:14px;
  margin:0 0 20px;
  background:var(--page);
  transition:border-color .16s ease;
}
.app .preview iframe{
  position:absolute;top:0;left:50%;
  width:660px;height:770px;border:0;
  transform:translateX(-50%) scale(.70);
  transform-origin:top center;
  pointer-events:none;
}
.app .cta{
  margin-top:14px;font-weight:600;
  color:var(--accent);
}
@media (hover:hover){.work li.app a:hover .preview{border-color:var(--accent)}}
@media (max-width:560px){
  .app .preview{height:356px}
  .app .preview iframe{transform:translateX(-50%) scale(.50)}
}
@media (max-width:400px){
  .app .preview{height:299px}
  .app .preview iframe{transform:translateX(-50%) scale(.42)}
}