/* Schibsted Grotesk, self-hosted (SIL Open Font License, see fonts/OFL.txt) */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-600-normal.woff2) format("woff2")}

/* Layout: fixed left sidebar (identity, nav, contact) + one reading column. Work appears in the first screen.
   One typeface. Neutrals carry the page; one clay-red accent sampled from the SN logo marks state and selection only.
   Deliberately a single light theme: the owner asked for white. */
:root{
  --bg:#FFFFFF;
  --side:#FAFAFA;
  --surface:#F4F4F5;
  --line:#E6E6E8;
  --ink:#131314;
  --ink-2:#5C5C62;
  --ink-3:#8D8D93;
  --accent:#D9583E;
  --accent-ink:#B4432B;
  --dark:#101011;
  --dark-2:#1B1B1D;
  --dark-line:#2B2B2F;
  --font:"Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  --side-w:248px;
  --gx:clamp(16px,5vw,72px);      /* page side margin */
  --page-top:clamp(40px,7vh,72px); /* every page's header sits at the same height */
  --page-bottom:88px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.small{font-size:13px;line-height:1.5;color:var(--ink-2)}
.tab{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);transition:grid-template-columns .45s var(--ease)}
/* sidebar: 24px padding all round. Closed, it folds into a floating dock (see below); the logo never moves */
.side{position:sticky;top:env(safe-area-inset-top,0px);height:100vh;height:100dvh;background:var(--side);border-right:1px solid var(--line);padding:24px;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:24px;z-index:30}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:32px}
.logo{display:block;width:32px;height:32px;flex:none}
.logo img{width:32px;height:32px;border-radius:50%;display:block}
.side-tg{width:32px;height:32px;flex:none;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:var(--ink-2);cursor:pointer}
.side-tg:hover{background:var(--surface);color:var(--ink)}
.side-tg svg{width:18px;height:18px}
.side-body{flex:1;min-width:200px}
.who b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.who span{display:block;font-size:13px;line-height:1.5;color:var(--ink-2)}
.nav{list-style:none;margin:32px 0 0;padding:0;position:relative}
.nav>li>a{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0 9px 14px;text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2);transition:color .2s}
.nav>li>a:hover{color:var(--ink)}
.nav>li>a.on{color:var(--ink)}
.nav>li>a .ct{font-size:12px;color:var(--ink-3);font-weight:400}
.ind{position:absolute;left:0;top:0;width:2px;height:20px;background:var(--accent);border-radius:2px;transition:transform .35s var(--ease),opacity .2s;opacity:0}
.subw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
html.case-open .subw{grid-template-rows:1fr}
.sub{list-style:none;margin:0;padding:0 0 0 26px;overflow:hidden;min-height:0}
.sub li{opacity:0;transition:opacity .3s var(--ease)}
html.case-open .sub li{opacity:1;transition-delay:.12s}
.sub button{width:100%;display:flex;gap:10px;align-items:baseline;text-align:left;background:none;border:0;border-left:1px solid var(--line);padding:5px 0 5px 12px;cursor:pointer;font-size:13px;color:var(--ink-2)}
.sub li:first-child button{margin-top:2px}.sub li:last-child button{margin-bottom:10px}
.sub button span{font-size:11px;color:var(--ink-3)}
.sub button:hover{color:var(--ink)}
.sub button.on{color:var(--ink);font-weight:500;border-left-color:var(--accent)}
.side-foot{display:flex;flex-direction:column;gap:16px;min-width:200px}
.side-foot .avail{font-size:13px;color:var(--ink-2);line-height:1.5}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border-radius:999px;padding:10px 16px;font-size:14px;font-weight:500;line-height:1.2;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer}
.btn.line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.line:hover{border-color:var(--ink)}
.side-links{display:flex;gap:16px;font-size:13px}
.side-links a{color:var(--ink-2)}
/* closed: the sidebar folds away and leaves a floating dock in the top-left corner.
   The dock is drawn so the logo stays exactly where it was (24,24): dock box 16,16 to 100,64 (8 padding, hairline drawn as a shadow ring), so the logo lands on 24,24.
   Everything else keeps clear of it with one rule: 32px from the dock's edge.
     content top  = 16 + 48 + 32 = 96   (--page-top while closed)
     case "back"  = 16 + 84 + 32 = 132  (x)                                   */
html.side-off .shell{grid-template-columns:0 minmax(0,1fr)}
html.side-off .side{padding-inline:0;border-right-color:transparent}
html.side-off .side-top{position:fixed;top:16px;left:16px;z-index:40;padding:8px;gap:4px;height:48px;background:var(--bg);border-radius:999px;box-shadow:0 0 0 1px var(--line),0 8px 24px -12px rgba(0,0,0,.18);animation:dockIn .35s var(--ease) both}
@keyframes dockIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
html.side-off .side-body,html.side-off .side-foot{visibility:hidden;opacity:0}
.side-body,.side-foot{transition:opacity .25s var(--ease) .15s}
html.side-off .side-body,html.side-off .side-foot{transition:opacity .12s,visibility 0s .12s}
@media (min-width:901px){
  html.side-off{--page-top:96px}
  html.side-off .cm.tl{opacity:0}                       /* the dock sits on that crop mark */
  html.side-off .case{left:0}
  /* back button clears the dock only when the column is close enough to reach it */
  html.side-off .case-bar{padding-left:max(0px,calc(132px - var(--gx) - max(0px,(100vw - 1040px - 2 * var(--gx)) / 2)))}
  html.side-off .case-bar>*{min-height:32px}
}

main{min-width:0}
.wrap{max-width:calc(1200px + 2 * var(--gx));padding-inline:var(--gx);margin-inline:auto}

/* ---------- intro ---------- */
/* ---------- hero: a print on the easel. The statement develops word by word while the page holds. ---------- */
.hero{position:relative;background:var(--bg)}
.hero-pin{position:relative;min-height:min(100vh,920px);display:flex}
.easel{position:absolute;inset:24px;pointer-events:none}
.cm{position:absolute;width:16px;height:16px;border:0 solid var(--ink-3)}
.cm.tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.cm.tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.cm.bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.cm.br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.hero-in{display:flex;flex-direction:column;justify-content:space-between;gap:48px;width:100%;padding-block:var(--page-top) 48px}
.margin{display:flex;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:.02em;color:var(--ink-3)}
.margin a{color:inherit;text-decoration:none}.margin a:hover{color:var(--ink)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:44px 64px;align-items:end}
.name{font-size:clamp(56px,7.4vw,104px);line-height:.9;letter-spacing:-.045em;font-weight:600}
.roles{margin:0;padding-bottom:8px;font-size:15px}
.roles dt{font-size:12px;letter-spacing:.02em;color:var(--ink-3);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:8px}
.roles dd{margin:0;line-height:1.75;font-weight:500}
.lead{grid-column:1/-1;margin:0;font-size:clamp(28px,3.2vw,44px);line-height:1.2;letter-spacing:-.025em;font-weight:500;max-width:22em}
.lead .wd{will-change:opacity,filter}
.readbar{display:flex;align-items:center;gap:14px}
.readbar .track{width:140px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.readbar .track i{display:block;height:100%;width:0;background:var(--accent)}
html:not(.pin) .readbar{visibility:hidden}

/* ---------- stacking: each section is a sheet; the next one is laid down over it ---------- */
main{background:#E4E4E7}
.leaf{position:relative;background:var(--bg)}
.leaf::after{content:"";position:absolute;inset:0;background:var(--veil,#fff);opacity:var(--dim,0);pointer-events:none;border-radius:inherit}
/* every section is one full screen. Long content scrolls inside it; then the next screen is laid over it */
html.stack .leaf{position:sticky;top:0;height:100vh;overflow:clip;transform-origin:50% 0}
html.stack .hero-pin{height:100vh;min-height:0}
.leaf-run{pointer-events:none}

/* ---------- work ---------- */
/* ---------- page header: the same on every page, so it lands in the same place each time a page is laid down ---------- */
.page-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:36px}
/* pinned header: stays at the top of its page while the content scrolls underneath */
html.stack .page-head{position:relative;z-index:3;padding-top:var(--page-top);margin-top:calc(-1 * var(--page-top));background:var(--hbg,var(--bg))}
html.stack .page-head::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(var(--hbg,var(--bg)),transparent);opacity:var(--hfade,0);pointer-events:none;margin-top:1px}
.about .page-head{--hbg:var(--surface)}.dark .page-head{--hbg:var(--dark)}
.page-head h2{font-size:15px;font-weight:600;letter-spacing:0}
.page-head span{font-size:13px;color:var(--ink-2)}
.dark .page-head{border-bottom-color:var(--dark-line)}.dark .page-head h2{color:#EDEDEF}.dark .page-head span{color:#9A9AA1}

/* ---------- work: equal cards. Every text line is fixed, so cards match whatever the copy length ---------- */
.work{padding-block:var(--page-top) var(--page-bottom)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 28px;align-items:stretch}
.card{display:flex;flex-direction:column;min-width:0}
.card.pre{opacity:0;transform:translateY(18px)}
.card.in{transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.proj{display:flex;flex-direction:column;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit;width:100%}
.shot{position:relative;border-radius:6px;overflow:hidden;background:var(--surface);aspect-ratio:2/1;  /* Figma file cover: 1920 × 960 */max-width:100%;width:100%;margin-bottom:18px}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .7s var(--ease)}
.proj:hover .shot img,.proj:focus-visible .shot img{transform:scale(1.02)}
.shot.ph{display:grid;place-items:center;color:var(--ink-3);font-size:13px}
.ttl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-width:0}
.ttl h3{font-size:20px;letter-spacing:-.015em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ttl span{flex:none;font-size:13px;color:var(--ink-3)}
.proj:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.card p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em}
.card .disc{display:block;margin-top:10px;font-size:13px;line-height:1.5;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acts{display:flex;gap:8px;margin-top:auto;padding-top:18px}
.btn-s{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:500;line-height:1.2;text-decoration:none;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:#fff;white-space:nowrap}
.btn-s.line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-s.line:hover{border-color:var(--ink)}
.card.pending h3,.card.pending p{color:var(--ink-3)}
.btn-s[aria-disabled="true"]{background:var(--surface);border-color:var(--line);color:var(--ink-3);pointer-events:none}

/* ---------- about ---------- */
.about{background:var(--surface);padding-block:var(--page-top) var(--page-bottom)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,72px)}
.sec-title{font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink-3);margin-bottom:16px}
.bio{display:flex;flex-direction:column;gap:18px;font-size:18px;line-height:1.6;max-width:36em}
.bio p:first-child{font-size:22px;line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.bio p{color:var(--ink-2)}
.cv{list-style:none;margin:0;padding:0}
.cv li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding-block:14px;border-top:1px solid var(--line)}
.cv li:last-child{border-bottom:1px solid var(--line)}
.cv b{font-weight:500}
.cv .small{grid-column:1}
.cv .yr{grid-row:1;grid-column:2;font-size:13px;color:var(--ink-3)}
.kit{margin-top:32px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;font-size:14px}
.kit dt{color:var(--ink-3)}.kit dd{margin:0}

/* ---------- about: a portrait, the path from image to interface, and how I work. The full CV stays in the PDF. ---------- */
.about2{display:grid;grid-template-columns:minmax(0,0.78fr) minmax(0,2fr);gap:clamp(32px,4vw,64px);align-items:start}
.portrait{margin:0}
.portrait-ph{aspect-ratio:4/5;max-width:100%;border-radius:6px;background:linear-gradient(160deg,#D9D9DD,#BDBDC3);display:grid;place-items:center;color:var(--ink-2);font-size:13px}
.portrait figcaption{margin-top:10px;font-size:12px;color:var(--ink-3)}
.about-main{display:flex;flex-direction:column;gap:40px;min-width:0}
.about-lead{font-size:clamp(20px,1.9vw,26px);line-height:1.4;letter-spacing:-.015em;max-width:30em}
.path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative}
.path::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:linear-gradient(90deg,var(--line) 0%,var(--ink-3) 70%,var(--accent) 100%)}
.path li{position:relative;padding-top:22px;display:flex;flex-direction:column;gap:3px;min-width:0}
.path li::before{content:"";position:absolute;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--surface);border:1px solid var(--ink-3)}
.path li.here::before{background:var(--accent);border-color:var(--accent)}
.path .when{font-size:12px;color:var(--ink-3)}
.path li.here .when{color:var(--accent-ink)}
.path b{font-weight:500;font-size:15px}
.path .what{font-size:13px;line-height:1.45;color:var(--ink-2)}
.how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.how li{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:1px solid var(--line)}
.how b{font-weight:500;font-size:15px}
.how span{font-size:14px;line-height:1.5;color:var(--ink-2)}
.about-acts{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- darkroom ---------- */
.dark{background:var(--dark);color:#EDEDEF;padding-block:var(--page-top) 32px}
.dark .small{color:#9A9AA1}
.dark-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:40px}
.dark-title{margin:0;font-size:clamp(28px,3vw,40px);line-height:1.15;font-weight:600;letter-spacing:-.02em}
.dark-head p{color:#A6A6AD;font-size:16px;max-width:38ch}
.dark-head a{color:#EDEDEF}
.sheet{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:18px 14px;background:var(--dark-2);border-radius:4px}
.frame{margin:0;display:flex;flex-direction:column;gap:8px}
.rb{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.04em;color:#76767D}
.rb .sel{color:var(--accent)}
.pic{position:relative;aspect-ratio:2/3;max-width:100%}
.ph-img{position:absolute;inset:0;border-radius:2px}
.p1{background:radial-gradient(120% 80% at 30% 25%,#6B6B72,#26262B)}
.p2{background:linear-gradient(160deg,#77685C 0%,#2B2725 62%)}
.p3{background:radial-gradient(90% 70% at 65% 60%,#56606C,#1C1F24)}
.p4{background:linear-gradient(200deg,#66705E,#24271F)}
.p5{background:radial-gradient(100% 90% at 40% 80%,#75625F,#28211F)}
.ph-img span{position:absolute;left:8px;bottom:8px;font-size:10px;color:rgba(255,255,255,.45)}
.mark{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);overflow:visible;pointer-events:none;transform:rotate(-1.4deg)}
.mark path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* develop: frames start as blank paper and come up once, like prints in the tray */
html.m-on .sheet:not(.up) .ph-img{filter:brightness(2.8) contrast(.2) grayscale(1)}
html.m-on .sheet:not(.up) .mark path{stroke-dashoffset:1}
html.m-on .ph-img{transition:filter 2.4s cubic-bezier(.3,.1,.2,1)}
html.m-on .frame:nth-child(2) .ph-img{transition-delay:.3s}
html.m-on .frame:nth-child(3) .ph-img{transition-delay:.6s}
html.m-on .frame:nth-child(4) .ph-img{transition-delay:.9s}
html.m-on .frame:nth-child(5) .ph-img{transition-delay:1.2s}
.mark path{stroke-dasharray:1;stroke-dashoffset:0}
html.m-on .mark path{transition:stroke-dashoffset .9s cubic-bezier(.6,0,.3,1) 3.1s}
.ph-img{filter:grayscale(1)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-top:clamp(64px,8vw,104px);padding-top:28px;border-top:1px solid var(--dark-line)}
.contact h2{font-size:15px;font-weight:600;letter-spacing:0;margin-bottom:10px;color:#9A9AA1}
.mail{font-size:clamp(24px,2.6vw,34px);font-weight:500;letter-spacing:-.02em;background:none;border:0;padding:0;cursor:pointer;color:#EDEDEF;text-align:left;user-select:all}
.mail:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px}
.copied{display:block;font-size:13px;color:#9A9AA1;min-height:20px;margin-top:4px}
.contact .acts{display:flex;gap:10px;flex-wrap:wrap}
.dark .btn{background:#EDEDEF;color:var(--dark);border-color:#EDEDEF}
.dark .btn.line{background:transparent;color:#EDEDEF;border-color:var(--dark-line)}
.dark .btn.line:hover{border-color:#EDEDEF}
.foot{display:flex;justify-content:space-between;gap:12px;margin-top:56px;font-size:12px;color:#76767D}

/* ---------- case study ---------- */
.case{position:fixed;top:0;bottom:0;left:var(--side-w);right:0;z-index:20;background:var(--bg);overflow:auto;overscroll-behavior:contain;transition:left .45s var(--ease)}
.case-in{max-width:calc(1040px + 2 * var(--gx));margin-inline:auto;padding-inline:var(--gx);padding-block:0 96px}
.case-bar .rt{display:flex;align-items:center;gap:16px}
.case-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:24px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.back{background:none;border:0;padding:0;cursor:pointer;font-size:14px;font-weight:500;display:inline-flex;gap:8px;align-items:center}
.back:hover span{text-decoration:underline}
.case-head{padding-top:56px}
.case-head .small{margin-bottom:14px}
.case-head h1{font-size:clamp(44px,6vw,76px);line-height:1;letter-spacing:-.035em}
.case-head .lede{margin-top:18px;font-size:clamp(19px,1.8vw,23px);line-height:1.45;color:var(--ink-2);max-width:34em}
.case-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:40px 0 0;padding-block:20px;border-block:1px solid var(--line)}
.case-facts dt{font-size:13px;color:var(--ink-3);margin-bottom:4px}
.case-facts dd{margin:0;font-size:15px}
.hero-shot{margin-top:40px;border-radius:6px;overflow:hidden;background:var(--surface);aspect-ratio:2/1;max-width:100%}
.hero-shot img{width:100%;height:100%;object-fit:cover}
.cap{margin-top:10px;font-size:13px;color:var(--ink-3)}
.blk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:24px 48px;margin-top:80px}
.blk h2{font-size:15px;font-weight:600;letter-spacing:0;padding-top:4px}
.blk .body{display:flex;flex-direction:column;gap:16px;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:38em}
.blk .body strong{color:var(--ink);font-weight:500}
.pull{font-size:clamp(22px,2.2vw,28px);line-height:1.35;letter-spacing:-.015em;color:var(--ink);padding-left:20px;border-left:2px solid var(--accent)}
.tbl-wrap{overflow-x:auto}
.model{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
.model th{text-align:left;font-weight:500;font-size:13px;color:var(--ink-3);padding:0 12px 10px 0;border-bottom:1px solid var(--line)}
.model td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.model td:first-child{color:var(--ink);font-weight:500;white-space:nowrap}
.model .depth{font-size:12px;color:var(--ink-3)}
.flows{list-style:none;margin:0;padding:0;counter-reset:f}
.flows li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding-block:14px;border-top:1px solid var(--line)}
.flows li:last-child{border-bottom:1px solid var(--line)}
.flows b{color:var(--ink);font-weight:500}
.flows .ctx{font-size:13px;color:var(--ink-3)}
.inplace{margin:28px 0 0}.inplace img{border-radius:6px}.inplace figcaption{margin-top:10px;font-size:13px;color:var(--ink-3)}
.screens{margin-top:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:28px;background:var(--surface);border-radius:6px}
.screens figure{margin:0}
.screens img{border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 40px -16px rgba(0,0,0,.25)}
.screens figcaption{margin-top:12px;font-size:12px;color:var(--ink-3)}
.wide{grid-column:1/-1}
.todo{font-size:15px;color:var(--ink-3);padding:16px 18px;border:1px dashed var(--line);border-radius:6px}
.next{margin-top:96px;width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;border-top:1px solid var(--ink);padding:22px 0 0;cursor:pointer;text-align:left}
.next .small{display:block;margin-bottom:6px}
.next strong{font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;font-weight:600}
.next i{font-style:normal;font-size:28px;color:var(--accent);transition:transform .35s var(--ease)}
.next:hover i{transform:translateX(6px)}
.fly{position:fixed;z-index:40;pointer-events:none;border-radius:6px;overflow:hidden;will-change:transform}
.fly img{width:100%;height:100%;object-fit:cover}

html.no-motion *{transition:none!important;animation:none!important;scroll-behavior:auto!important}


/* ---------- gallery: two rooms, Photography and Collage ----------
   Static (phones, motion off): dark sections, headline on top, the wall scrolls sideways by swipe.
   Stacked: each room is one screen. Scroll first develops the headline (and, in room 1, turns the lights down),
   then the headline docks at the top, the wall slides in, and further scroll walks the wall sideways 1:1. */
.gal{--lg:1;--lt:1;background:color-mix(in oklab,#FFFFFF,var(--dark) calc(var(--lg)*100%));color:color-mix(in oklab,#131314,#EDEDEF calc(var(--lt)*100%));padding-block:var(--page-top) 48px;overflow:hidden}
.g-title{padding-inline:var(--gx);max-width:calc(1000px + 2 * var(--gx))}
.g-kick{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,#8D8D93,#76767D calc(var(--lt)*100%));margin-bottom:20px}
.g-head{font-size:clamp(40px,5.6vw,84px);line-height:1.02;letter-spacing:-.04em;font-weight:600;margin:0}
.g-head .wd{display:inline-block}
.g-sub{margin-top:24px;font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:color-mix(in oklab,#5C5C62,#A6A6AD calc(var(--lt)*100%));max-width:34em}
.g-lines span{display:block}.g-lines span+span{margin-top:6px}
.g-sub a{color:inherit;text-decoration-color:var(--accent)}
.g-win{margin-top:48px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-inline:var(--gx)}
.g-win::-webkit-scrollbar{display:none}
.g-rail{--gh:min(52vh,460px);list-style:none;margin:0;padding:0;display:flex;gap:24px;align-items:flex-end;width:max-content}
.g-pic{flex:none;scroll-snap-align:start}
.g-pic img,.g-ph{height:var(--gh);width:auto;max-width:none;border-radius:4px;display:block}
.g-ph{background:var(--dark-2);display:grid;place-items:center}.g-ph span{font-size:12px;color:#5E5E66}
.g-pic>span{display:block;margin-top:10px;font-size:13px;color:#76767D;white-space:nowrap}
.g-wall{flex:none;width:232px;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 32px 20px;border-left:1px solid var(--dark-line)}
.g-wall b{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.015em}
.g-wall span{font-size:13px;color:#76767D;margin-top:4px}
.g-wall p{font-size:15px;line-height:1.5;color:#A6A6AD;margin-top:12px}
.g-end{flex:none;width:220px;align-self:center;padding-left:24px;font-size:15px;font-weight:500;line-height:1.5}
.g-end a{color:#EDEDEF;text-decoration:none}.g-end a:hover{text-decoration:underline}
.g-foot{display:flex;align-items:center;gap:16px;margin-top:28px;padding-inline:var(--gx);font-size:13px;color:#A6A6AD}
.g-track{position:relative;width:160px;height:1px;background:var(--dark-line)}.g-track i{position:absolute;left:0;top:0;height:1px;width:0;background:#EDEDEF}
.g-hint{color:#76767D}
html:not(.stack) .g-hint::after{content:" (swipe)"}
html.stack .gal{padding:0}
html.stack .gal .leaf-in{position:absolute;inset:0}
html.stack .g-title{position:absolute;left:0;top:0;transform-origin:var(--gx) 0;will-change:transform}
html.stack .g-win{position:absolute;left:0;right:0;top:0;margin:0;overflow:visible;padding:0}
html.stack .g-rail{--gh:var(--gh-s,460px);padding-inline:var(--gx);will-change:transform}
html.stack .g-foot{position:absolute;left:0;margin:0}
/* contact gets its own quiet dark page at the end */
#contact.dark{padding-block:var(--page-top) 32px}
#contact .contact{margin-top:clamp(48px,14vh,160px);border-top:0;padding-top:0}
.ct-lead{font-size:clamp(20px,2vw,26px);line-height:1.4;letter-spacing:-.015em;color:#A6A6AD;max-width:24em;margin-bottom:24px}
#contact .foot{margin-top:clamp(64px,16vh,180px);padding-top:16px;border-top:1px solid var(--dark-line)}

/* sidebar follows the lights: --g goes 0 → 1 as you enter the gallery */
.side{--side:color-mix(in oklab,#FAFAFA,#101011 calc(var(--g,0)*100%));--bg:color-mix(in srgb,#FFFFFF,#101011 calc(var(--g,0)*100%));--surface:color-mix(in srgb,#F4F4F5,#1B1B1D calc(var(--g,0)*100%));--line:color-mix(in srgb,#E6E6E8,#2B2B2F calc(var(--g,0)*100%));--ink:color-mix(in srgb,#131314,#EDEDEF calc(var(--gt,0)*100%));--ink-2:color-mix(in srgb,#5C5C62,#A6A6AD calc(var(--gt,0)*100%));--ink-3:color-mix(in srgb,#8D8D93,#76767D calc(var(--gt,0)*100%));color:var(--ink)}
.side .btn{color:var(--bg);background:var(--ink);border-color:var(--ink)}
.side .btn.line{background:transparent;color:var(--ink);border-color:var(--line)}


/* "see all" — the whole room as an in-site gallery page, plus a lightbox */
.g-all{margin-left:auto;background:none;border:1px solid var(--dark-line);color:#EDEDEF;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500;cursor:pointer}
.g-all:hover{border-color:#EDEDEF}
html.stack .g-foot{right:0;padding-right:var(--gx)}
.g-end button{background:none;border:0;padding:0;color:#EDEDEF;font-size:15px;font-weight:500;line-height:1.5;text-align:left;cursor:pointer}.g-end button:hover{text-decoration:underline}
.gview{position:fixed;top:0;bottom:0;left:var(--side-w);right:0;z-index:20;background:var(--dark);color:#EDEDEF;overflow:auto;overscroll-behavior:contain;transition:left .45s var(--ease)}
html.side-off .gview{left:0}
.gv-in{max-width:calc(1200px + 2 * var(--gx));margin-inline:auto;padding:0 var(--gx) 96px}
.gv-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0 16px;background:var(--dark);border-bottom:1px solid var(--dark-line)}
.gv-bar .back{color:#EDEDEF}
.gv-meta{display:flex;gap:12px;align-items:baseline;font-size:13px;color:#76767D}.gv-meta b{font-size:15px;color:#EDEDEF}
html.side-off .gv-bar{padding-left:max(0px,calc(132px - var(--gx) - max(0px,(100vw - 1200px - 2 * var(--gx)) / 2)))}
/* a plain photo grid: three columns, images flow into place at their own ratio, nothing cropped */
.gv-m{columns:3;column-gap:16px;padding-top:32px}
.gv-m button{display:block;width:100%;margin:0 0 16px;padding:0;border:0;background:none;cursor:zoom-in;break-inside:avoid;border-radius:4px;overflow:hidden}
.gv-m button:disabled{cursor:default}
.gv-m img{display:block;width:100%;height:auto;transition:opacity .2s}.gv-m button:hover img{opacity:.85}
.gv-m .g-ph{width:100%;height:auto;border-radius:4px}
.lb[hidden],.gview[hidden]{display:none!important}
.lb{position:fixed;inset:0;z-index:60;background:rgba(10,10,11,.97);display:grid;place-items:center;color:#EDEDEF}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.lb img{max-width:calc(100vw - 160px);max-height:calc(100vh - 140px);width:auto;height:auto;border-radius:2px}
.lb figcaption{font-size:13px;color:#A6A6AD}
.lb button{position:absolute;background:none;border:1px solid var(--dark-line);color:#EDEDEF;width:44px;height:44px;border-radius:50%;font-size:18px;cursor:pointer}
.lb button:hover{border-color:#EDEDEF}.lb-x{top:24px;right:24px}.lb-p{left:24px;top:50%}.lb-n{right:24px;top:50%}
@media (max-width:900px){.gview{left:0}.gv-m{columns:2;column-gap:12px}.gv-m button{margin-bottom:12px}.lb img{max-width:calc(100vw - 32px)}.lb-p,.lb-n{top:auto;bottom:24px}}


/* ---------- About (Figma: 03 About, final) — card 248 · 72 · record; record = statement, then Experience | side column 248 ---------- */
.ab{display:grid;grid-template-columns:248px minmax(0,1fr);gap:72px;align-items:start}
.ab-card{display:flex;flex-direction:column;gap:24px}
.ab-ph{margin:0;display:flex;flex-direction:column;gap:8px}
.ab-ph-img{width:120px;height:160px;border-radius:4px;background:var(--line);display:grid;place-items:center}.ab-ph-img span{font-size:11px;color:var(--ink-3)}
.ab-ph figcaption{font-size:11px;color:var(--ink-3)}
.ab-id b{display:block;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.015em}.ab-id span{display:block;font-size:15px;line-height:1.5;color:var(--ink-2);margin-top:2px}
.ab-facts{margin:0}.ab-facts div{padding-block:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}.ab-facts div:last-child{border-bottom:1px solid var(--line)}
.ab-facts dt,.ab-lab{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);line-height:1.4}
.ab-facts dd{margin:0;font-size:15px;line-height:1.5}
.ab-acts{display:none;flex-direction:column;gap:8px}.ab-acts>div{display:flex;gap:8px}.ab-acts>div .btn{flex:1}
html.side-off .ab-acts{display:flex}
.ab-rec{display:flex;flex-direction:column;gap:56px;min-width:0}
.ab-st{display:flex;flex-direction:column;gap:24px}
.ab-lead{font-size:24px;font-weight:500;line-height:1.4;letter-spacing:-.015em}
.ab-nums{display:flex;flex-wrap:wrap;gap:8px 40px;font-size:15px;color:var(--ink-2)}.ab-nums b{color:var(--ink);font-weight:600;margin-right:4px}
.ab-two{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:48px;align-items:start}
.ab-lab{margin:0;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ab-exp{list-style:none;margin:0;padding:0}
.ab-exp li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:24px;padding-block:16px;border-bottom:1px solid var(--line)}
.ab-when{font-size:13px;line-height:1.5;color:var(--ink-3)}
.ab-exp b{display:block;font-size:15px;font-weight:600;line-height:1.5}.ab-exp span{display:block;font-size:13px;line-height:1.5;color:var(--ink-2)}.ab-exp .n{color:var(--ink-3)}
.ab-side{display:flex;flex-direction:column;gap:40px}
.ab-grp{display:flex;flex-direction:column;gap:16px;padding-top:16px}
.ab-grp b{display:block;font-size:15px;font-weight:600;line-height:1.5}.ab-grp span{display:block;font-size:13px;line-height:1.6;color:var(--ink-2)}
@media (max-width:1180px) and (min-width:901px){.ab-two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.ab,.ab-two{grid-template-columns:minmax(0,1fr);gap:40px}.ab-acts{display:flex}}

/* ---------- small screens ---------- */
@media (max-width:1180px) and (min-width:901px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .side-tg{display:none}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:32px}.roles{order:2}.lead{order:3}
  .easel{inset:12px}
  html.side-off .shell{grid-template-columns:minmax(0,1fr)}
  .side-body{display:flex;align-items:center;min-width:0}.side-body .nav{display:none}
  .side-foot{min-width:0}
  html.side-off .side-body,html.side-off .side-foot{visibility:visible;opacity:1}
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{height:auto;flex-direction:row;align-items:center;padding:10px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .side .nav,.side-foot .avail,.side-links{display:none}
  .ident img{width:32px;height:32px}.ident span{display:none}
  .side-foot .btn{padding:7px 12px;font-size:13px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .id-row{gap:16px}
  .about-grid,.dark-head,.contact,.about2{grid-template-columns:minmax(0,1fr)}
  .path{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.path::before{display:none}.how{grid-template-columns:minmax(0,1fr)}
  .portrait{max-width:260px}
  .sheet{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sheet .frame:nth-child(n+4){display:none}
  .case{left:0}
  .case-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blk{grid-template-columns:minmax(0,1fr);margin-top:56px}
  .screens{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px}
}

/* ---------- theme additions ---------- */
b,strong{font-weight:600}
.g-open{display:block;padding:0;border:0;background:none;cursor:zoom-in;position:relative;border-radius:4px}
.g-open:focus-visible{outline-offset:4px}
.g-set{position:absolute;right:10px;bottom:10px;padding:4px 10px;border-radius:999px;background:rgba(16,16,17,.72);color:#EDEDEF;font-size:12px;font-weight:500;font-style:normal;backdrop-filter:blur(6px)}
.lb button[hidden]{display:none}
#c-fig[hidden]{display:none}
.wp-block-image img,.blk img{height:auto}
/* case-study blocks (rendered from the editor) */
.case-body>*+*{margin-top:0}
.blk .body ul:not(.flows),.blk .body ol{padding-left:1.2em;margin:0}
.callout{padding:16px 18px;border-radius:6px;background:var(--surface);font-size:16px;color:var(--ink)}
.imgrow{display:flex;gap:16px;margin-top:28px}.imgrow figure{margin:0;flex:1 1 0;min-width:0}.imgrow figcaption,.fig figcaption{margin-top:10px;font-size:13px;color:var(--ink-3)}
.fig{margin:28px 0 0}.fig img{border-radius:6px;width:100%}
.fig.full{margin-inline:calc(-1 * var(--gx))}.fig.full img{border-radius:0}
.case video{width:100%;border-radius:6px;display:block}
@media (max-width:900px){.imgrow{flex-direction:column}}
.ab-two.one{grid-template-columns:minmax(0,1fr)}
.ab-ph-img.has-img{background:none}.ab-ph-img.has-img img{width:120px;height:160px;object-fit:cover;border-radius:4px;display:block}
.ab-link{display:block;color:inherit;text-decoration:none}.ab-link:hover b{text-decoration:underline;text-underline-offset:3px}
.ab-grp .n{color:var(--ink-3)}
.logo img{width:32px;height:32px;border-radius:50%;display:block;object-fit:cover}
/* v1.0.1 · blocks from the SN Portfolio plugin. .blk.c: text sits in the right column, wide/full items span the case. */
.case-body>.blk{margin-top:80px}
@media (max-width:900px){.case-body>.blk{margin-top:56px}}
.blk.c{row-gap:16px}
.blk.c>h2{grid-column:1;grid-row:1}
.blk.c>.body{display:contents}
.blk.c>.body>*{grid-column:2;max-width:38em;margin:0;font-size:18px;line-height:1.6;color:var(--ink-2)}
.blk.c>.body>.wide,.blk.c>.body>.imgrow.wide,.blk.c>.body>.screens{grid-column:1/-1;max-width:none}
.blk.c>.body>.fig,.blk.c>.body>.imgrow,.blk.c>.body>.screens{margin-top:12px}
.blk.c>.body>.fig.full{margin-inline:calc(-1 * var(--gx))}
.blk.c>.body strong{color:var(--ink);font-weight:500}
.blk.c>.body>h3,.blk.c>.body>h4{font-size:18px;font-weight:600;color:var(--ink);margin-top:16px}
.blk.c>.body>.pull{font-size:clamp(22px,2.2vw,28px);line-height:1.35;color:var(--ink)}
.blk.c>.body>.callout{font-size:16px;color:var(--ink)}
.blk.c>.body>ul:not(.flows),.blk.c>.body>ol{padding-left:1.2em}
.blk.c>.body>.flows{max-width:38em}
.wp-block-table{margin:0;overflow-x:auto}
.wp-block-table table{width:100%;border-collapse:collapse;font-size:15px;min-width:460px;table-layout:auto}
.case .wp-block-table thead,.case .wp-block-table tfoot{border:0}
.case .wp-block-table th,.case .wp-block-table td{border:0;border-bottom:1px solid var(--line)}
.wp-block-table th{text-align:left;font-weight:500;font-size:13px;color:var(--ink-3);padding:0 12px 10px 0;border-bottom:1px solid var(--line)}
.wp-block-table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.wp-block-table td:first-child{color:var(--ink);font-weight:500}
.wp-block-table figcaption{margin-top:10px;font-size:13px;color:var(--ink-3)}
.screens.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.screens.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.case-facts.in-body{margin:0;border-block:1px solid var(--line)}
.blk.c>.body>.case-facts.in-body{max-width:none}
@media (max-width:900px){.blk.c>h2,.blk.c>.body>*{grid-column:1/-1}.blk.c>h2{grid-row:auto}.screens.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Motion switch: bottom right, quiet; readable on light and dark pages */
.mt{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border:1px solid rgba(0,0,0,.08);border-radius:999px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink-2);font-size:12px;font-weight:500;line-height:1;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.08);opacity:.4;transition:opacity .25s,color .2s,background .2s}
.mt:hover,.mt:focus-visible{opacity:1;color:var(--ink);background:#fff}
@media (hover:none){.mt{opacity:.7}}
.mt i{width:22px;height:13px;border-radius:99px;background:#CFCFD4;position:relative;flex:none;transition:background .2s}
.mt i:after{content:"";position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:#fff;transition:transform .2s}
.mt[aria-pressed=true] i{background:var(--ink)}
.mt[aria-pressed=true] i:after{transform:translateX(9px)}
.mt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:900px){.mt{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:6px 10px 6px 8px}}
@media print{.mt{display:none}}