/* Instead placeholder page. Values from 02-design-system/tokens/tokens.css (palette locked 2026-10-29). */
@font-face{font-family:'Schibsted Grotesk';src:url('fonts/SchibstedGrotesk-Variable.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --graphite:#262829;--paper:#F4F5F2;--seafoam:#C2D7CD;--seafoam-deep:#5E7F74;--orange:#F26A44;--blue:#244BB2;
  --text-muted:#4A4F51;--hairline:#C7CCC7;
  --font:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --inset:8px;--radius:12px;--gutter:clamp(20px,4vw,56px);
  --ease-enter:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* One screen, no scroll: the photo takes whatever height the compact band leaves */
body{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100svh;overflow:hidden;background:var(--paper);color:var(--graphite);font-family:var(--font);font-weight:400;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
::selection{background:var(--seafoam);color:var(--graphite)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Lockup (from logo/web/instead-lockup.css): mark 1.43 x cap height, gap 0.46 x mark. One-color graphite mark over the photo (Derek, 2026-11-05) */
.lockup{--m:34px;--cap:calc(var(--m) / 1.43);--gap:calc(var(--m) * .46);display:inline-flex;align-items:center;gap:var(--gap);line-height:0;color:inherit;text-decoration:none}
.lockup .mk{width:var(--m);height:var(--m);flex:none}
.lockup .wm{width:calc(var(--cap) * 4.7785);height:calc(var(--cap) * 1.0286);flex:none;overflow:visible}

/* Hero: the photograph fills the screen above the band. The crop comes mostly from the empty wall above him */
.hero{position:relative;margin:var(--inset) var(--inset) 0;border-radius:var(--radius);overflow:hidden;min-height:0;background:#C9C8C3;isolation:isolate}
.hero-media,.hero-media img{position:absolute;inset:0;width:100%;height:100%}
.hero-media img{object-fit:cover;object-position:68% 62%;animation:settle 1600ms var(--ease-enter) both}
.hero-inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--gutter) - var(--inset)) var(--gutter) clamp(32px,6vh,80px)}
.hero-copy{max-width:min(46%,620px);animation:enter 900ms var(--ease-enter) 150ms both}

/* Eyebrow: the mock hero's "Now on iPhone and Mac" style. Sentence case, never all caps (2026-11-05) */
.status{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:400;color:var(--graphite);margin-bottom:clamp(14px,2.4vh,28px)}
/* Status marker: a small orange progress ring (orange = in progress), turning slowly. Calm on purpose,
   so it reads as "in progress", not as a page still loading. Reduced motion: a still ring at ~80% */
.ring{width:16px;height:16px;flex:none;animation:spin 2.4s linear infinite}
.ring circle{fill:none;stroke-width:2}
.ring .track{stroke:var(--graphite);opacity:.16}
.ring .arc{stroke:var(--orange);stroke-linecap:round;stroke-dasharray:30 100}
@keyframes spin{to{transform:rotate(360deg)}}
h1{font-weight:400;font-size:clamp(48px,min(7vw,11vh),96px);line-height:.96;letter-spacing:-.035em;text-wrap:balance}

/* Compact band on paper under the photo: one row on desktop */
.intro{display:flex;align-items:center;justify-content:space-between;gap:16px 48px;padding:clamp(18px,2.6vh,28px) calc(var(--gutter) + var(--inset))}
.lede{font-size:clamp(17px,1.35vw,21px);line-height:1.35;max-width:46ch;text-wrap:pretty}
.aside{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;font-size:14px;color:var(--text-muted);text-align:right}
.contact a{color:var(--graphite);font-weight:500;text-decoration:none;border-bottom:1px solid var(--hairline);transition:border-color 150ms}
.contact a:hover{border-color:var(--graphite)}

@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}

/* Portrait screens: the vertical photo, headline over the open table; band stacks */
@media (orientation:portrait){
  .hero-media img{object-position:50% 25%}
  .hero-inner{padding:16px 16px 22px}
  .lockup{--m:30px}
  .hero-copy{max-width:none}
  h1{font-size:clamp(40px,min(12vw,7svh),84px)}
  .intro{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 24px 18px}
  .lede{font-size:clamp(16px,4.2vw,19px)}
  .aside{align-items:flex-start;text-align:left;font-size:13px}
}
/* 404 page */
body.nf{display:block;height:auto;overflow:auto}
.nf-main{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--gutter) - var(--inset) + 8px) calc(var(--gutter) + var(--inset)) clamp(40px,8vh,96px)}
.nf h1{font-size:clamp(40px,6vw,80px);max-width:12ch}
.nf .lede{margin-top:20px}
.home{color:var(--graphite);text-decoration:none;border-bottom:1px solid var(--hairline)}
.home:hover{border-color:var(--graphite)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ring{transform:rotate(-90deg)}
  .ring .arc{stroke-dasharray:80 100}
}