/* ============================================================
   MOHAMED TALAAT — ARCHITECT · DESIGNER · MAKER
   Design system stylesheet
   ------------------------------------------------------------
   01 Tokens
   02 Reset & base
   03 Typography
   04 Layout & grid
   05 Drafting-line graphic language
   06 Scale spine (signature element)
   07 Navigation & mobile menu
   08 Buttons & links
   09 Image placeholder system
   10 Project cards & index
   11 Home sections
   12 Project template
   13 Methods / Methodology
   14 Making / Models / Characters
   15 Profile / CV
   16 Contact & forms
   17 Footer
   18 Lightbox, cursor, loader, transitions
   19 Motion, reveal, accessibility
   20 Responsive
   21 Print
   ============================================================ */

/* ---------- 01 TOKENS ---------- */
:root{
  /* Colour */
  --ivory:        #F2F0EB;
  --limestone:    #E6E0D6;
  --charcoal:     #171717;
  --graphite:     #343434;
  --bronze:       #9A7552;
  --terracotta:   #9A5D46;
  --concrete:     #B5B1A9;

  --ink:          var(--charcoal);
  --ink-soft:     #4A4844;
  --ink-faint:    #8C8880;
  --rule:         rgba(23,23,23,.14);
  --rule-soft:    rgba(23,23,23,.08);
  --bg:           var(--ivory);
  --bg-alt:       var(--limestone);

  /* Type */
  --sans: "Instrument Sans", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:"Instrument Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-hero-name:   clamp(3.5rem, 8.4vw, 6.875rem);   /* 56 → 110 */
  --fs-hero-state:  clamp(2.25rem, 4.6vw, 4.5rem);    /* 36 → 72  */
  --fs-page-title:  clamp(3.25rem, 6.2vw, 5.5rem);    /* 52 → 88  */
  --fs-project:     clamp(3.25rem, 7vw, 6rem);        /* 52 → 96  */
  --fs-section:     clamp(1.75rem, 2.8vw, 3rem);      /* 28 → 48  */
  --fs-lead:        clamp(1.25rem, 1.9vw, 1.75rem);
  --fs-body:        clamp(1.0625rem, 1.05vw, 1.25rem);/* 17 → 20  */
  --fs-meta:        .8125rem;                          /* 13 */
  --fs-caption:     .75rem;                            /* 12 */
  --fs-label:       .6875rem;                          /* 11 */

  --lh-tight: 1.02;
  --lh-snug:  1.16;
  --lh-body:  1.62;

  --measure: 42rem;      /* ~672px, within the 650–760 band */
  --measure-wide: 47rem;

  /* Space */
  --gutter: clamp(1.25rem, 3.2vw, 3.25rem);
  --col-gap: clamp(1rem, 1.6vw, 1.75rem);
  --sec-y: clamp(5rem, 11vw, 11.5rem);
  --sec-y-sm: clamp(3.25rem, 6vw, 6rem);
  --maxw: 1680px;

  /* Motion */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,0,.35,1);
  --t-fast: .28s;
  --t-mid: .55s;
  --t-slow: 1.05s;

  --nav-h: 76px;
}

/* Dark surface context */
.is-dark{
  --ink: var(--ivory);
  --ink-soft: #C9C5BD;
  --ink-faint: #8A857C;
  --rule: rgba(242,240,235,.18);
  --rule-soft: rgba(242,240,235,.10);
  --bg: var(--charcoal);
  --bg-alt: var(--graphite);
  background: var(--charcoal);
  color: var(--ivory);
}

/* ---------- 02 RESET & BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* very low-opacity paper grain */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
main{ position:relative; z-index:2; }
::selection{ background:var(--bronze); color:var(--ivory); }

/* ---------- 03 TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,h6{ margin:0; font-weight:500; letter-spacing:-.02em; line-height:var(--lh-snug); }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
.measure{ max-width:var(--measure); }
.measure-wide{ max-width:var(--measure-wide); }

.serif{ font-family:var(--serif); font-weight:400; letter-spacing:-.012em; }
.mono{ font-family:var(--mono); }

.t-hero-name{
  font-size:var(--fs-hero-name); line-height:var(--lh-tight);
  font-weight:500; letter-spacing:-.035em; text-transform:uppercase;
}
.t-hero-statement{
  font-family:var(--serif); font-weight:400;
  font-size:var(--fs-hero-state); line-height:1.06; letter-spacing:-.02em;
}
.t-page-title{
  font-size:var(--fs-page-title); line-height:1.0; font-weight:500; letter-spacing:-.034em;
}
.t-project-title{
  font-size:var(--fs-project); line-height:.98; font-weight:500; letter-spacing:-.036em;
}
.t-section{
  font-size:var(--fs-section); line-height:1.12; font-weight:500; letter-spacing:-.026em;
}
.t-lead{ font-size:var(--fs-lead); line-height:1.42; letter-spacing:-.014em; color:var(--ink-soft); }
.t-serif-statement{
  font-family:var(--serif); font-size:clamp(1.6rem,3.1vw,2.75rem);
  line-height:1.2; letter-spacing:-.016em; font-weight:400;
}
.t-meta{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.02em; line-height:1.5; }
.t-caption{ font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.03em; color:var(--ink-faint); }

.eyebrow{
  font-family:var(--mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ink-faint);
}
.eyebrow--bronze{ color:var(--bronze); }
.ar{ font-family:"Instrument Serif", "Noto Naskh Arabic", serif; direction:rtl; unicode-bidi:isolate; }

/* ---------- 04 LAYOUT & GRID ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:1180px; }
.section{ padding-block:var(--sec-y); position:relative; }
.section--sm{ padding-block:var(--sec-y-sm); }
.section--tight{ padding-block:clamp(2.5rem,4vw,4rem); }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--col-gap); }
.surface-alt{ background:var(--limestone); }
.surface-dark{ background:var(--charcoal); color:var(--ivory); }
.stack-sm > * + *{ margin-top:.75rem; }
.stack > * + *{ margin-top:1.5rem; }
.stack-lg > * + *{ margin-top:clamp(2rem,3.5vw,3.5rem); }

/* Section header: number + rule + title (numbers encode real sequence) */
.sec-head{
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:var(--col-gap); align-items:start;
  padding-top:1.5rem; border-top:1px solid var(--rule);
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.sec-head__title{ max-width:22ch; }
.sec-head__aside{ max-width:34rem; }

/* ---------- 05 DRAFTING-LINE GRAPHIC LANGUAGE ---------- */
.datum{ height:1px; background:var(--rule); border:0; margin:0; width:100%; }
.datum--bronze{ background:var(--bronze); opacity:.55; }
.tick{ display:inline-block; width:1px; height:.7em; background:currentColor; opacity:.4; vertical-align:middle; }
.coord{
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
}
/* corner cropping marks */
.crop{ position:relative; }
.crop::before,.crop::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border-color:var(--bronze); opacity:.7;
}
.crop::before{ top:-1px; left:-1px; border-top:1px solid; border-left:1px solid; }
.crop::after{ bottom:-1px; right:-1px; border-bottom:1px solid; border-right:1px solid; }
/* vertical guide rail down the page edge */
.rail{
  position:fixed; top:0; bottom:0; width:1px; background:var(--rule-soft);
  z-index:1; pointer-events:none;
}
.rail--l{ left:calc(var(--gutter) / 2); }
.rail--r{ right:calc(var(--gutter) / 2); }

/* ---------- 06 SCALE SPINE (signature) ---------- */
.scale-spine{
  display:flex; align-items:center; gap:0; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.18em; text-transform:uppercase;
}
.scale-spine__item{
  position:relative; color:var(--ink-faint);
  padding:.45rem 0; transition:color var(--t-fast) var(--e-out);
  white-space:nowrap;
}
.scale-spine__item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--bronze); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-mid) var(--e-out);
}
.scale-spine__item.is-active{ color:var(--ink); }
.scale-spine__item.is-active::after{ transform:scaleX(1); }
.scale-spine__sep{ color:var(--ink-faint); opacity:.45; padding-inline:.7rem; user-select:none; }
.scale-spine--lg{ font-size:var(--fs-caption); letter-spacing:.22em; }

/* Interactive homepage scale */
.scale-board{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.scale-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.scale-list__btn{
  width:100%; background:none; border:0; border-bottom:1px solid var(--rule);
  padding:clamp(1rem,1.8vw,1.6rem) 0; text-align:left; cursor:pointer;
  display:flex; align-items:baseline; gap:1.25rem;
  transition:padding-left var(--t-mid) var(--e-out), color var(--t-fast) var(--e-out);
  color:var(--ink-faint);
}
.scale-list__btn:hover,.scale-list__btn:focus-visible,.scale-list__btn.is-active{ color:var(--ink); padding-left:1rem; }
.scale-list__btn .num{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; color:var(--bronze); }
.scale-list__btn .name{ font-size:clamp(1.5rem,2.6vw,2.4rem); font-weight:500; letter-spacing:-.03em; line-height:1; }
.scale-panel{ display:none; }
.scale-panel.is-active{ display:block; animation:fade-up var(--t-mid) var(--e-out) both; }
.scale-panel__list{ list-style:none; margin:1.5rem 0 0; padding:0; }
.scale-panel__list li{ padding:.55rem 0; border-bottom:1px solid var(--rule-soft); font-size:1rem; }
.scale-panel__list li span{ font-family:var(--mono); font-size:var(--fs-label); color:var(--ink-faint); margin-right:.9rem; }

/* ---------- 07 NAVIGATION ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:1.4rem var(--gutter);
  color:var(--ivory);
  transition:background var(--t-mid) var(--e-out), padding var(--t-mid) var(--e-out),
             color var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.nav--onlight{ color:var(--charcoal); }
.nav.is-solid{
  padding:.7rem var(--gutter);
  background:rgba(242,240,235,.92);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  color:var(--charcoal);
  box-shadow:0 1px 0 rgba(23,23,23,.12);
}
.nav.is-solid.nav--dark{
  background:rgba(23,23,23,.94); color:var(--ivory);
  box-shadow:0 1px 0 rgba(242,240,235,.14);
}
.nav__brand{ display:flex; align-items:center; gap:.85rem; }
.nav__mark{ width:26px; height:26px; flex:none; }
.nav__mark path,.nav__mark line{ stroke:currentColor; }
.nav__name{
  font-family:var(--sans); font-weight:500; font-size:.9375rem;
  letter-spacing:.13em; text-transform:uppercase;
}
.nav__links{ display:flex; align-items:center; gap:clamp(1.25rem,2.4vw,2.5rem); }
.nav__link{
  position:relative; font-size:.875rem; letter-spacing:.055em; text-transform:uppercase;
  padding-block:.35rem;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform var(--t-fast) var(--e-out);
}
.nav__link:hover::after,.nav__link:focus-visible::after{ transform:scaleX(1); transform-origin:left; }
.nav__link[aria-current="page"]{ color:var(--bronze); }
.nav__link[aria-current="page"]::after{ transform:scaleX(1); background:var(--bronze); }

/* burger */
.nav__burger{
  display:none; background:none; border:0; cursor:pointer; padding:.5rem; margin-right:-.5rem;
}
.nav__burger span{ display:block; width:26px; height:1px; background:currentColor; transition:transform var(--t-fast) var(--e-out), opacity var(--t-fast); }
.nav__burger span + span{ margin-top:7px; }
body.menu-open .nav__burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ opacity:0; }
body.menu-open .nav__burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* mobile full-screen menu */
.menu{
  position:fixed; inset:0; z-index:55; background:var(--ivory); color:var(--charcoal);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(var(--nav-h) + 2rem) var(--gutter) 2.5rem;
  opacity:0; visibility:hidden; transform:translateY(-1.5%);
  transition:opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out), visibility var(--t-mid);
}
body.menu-open .menu{ opacity:1; visibility:visible; transform:none; }
body.menu-open{ overflow:hidden; }
.menu__list{ list-style:none; margin:0; padding:0; }
.menu__list li{ border-bottom:1px solid var(--rule); }
.menu__list a{
  display:flex; align-items:baseline; gap:1rem; padding:clamp(.7rem,2.2vw,1.15rem) 0;
  font-size:clamp(2.25rem,11vw,3.75rem); font-weight:500; letter-spacing:-.035em; line-height:1;
}
.menu__list a .num{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; color:var(--bronze); }
.menu__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; }
.menu__mark{ width:44px; height:44px; }
.menu__mark path,.menu__mark line{ stroke:var(--charcoal); }

/* ---------- 08 BUTTONS & LINKS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  padding:.95rem 1.5rem; border:1px solid currentColor; border-radius:0;
  font-size:.875rem; letter-spacing:.055em; text-transform:uppercase; font-weight:500;
  background:none; cursor:pointer; position:relative; overflow:hidden;
  transition:color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--charcoal);
  transform:scaleY(0); transform-origin:bottom; transition:transform var(--t-mid) var(--e-out);
}
.btn > *{ position:relative; z-index:1; }
.btn:hover,.btn:focus-visible{ color:var(--ivory); border-color:var(--charcoal); }
.btn:hover::before,.btn:focus-visible::before{ transform:scaleY(1); }
.btn .arrow{ transition:transform var(--t-fast) var(--e-out); }
.btn:hover .arrow{ transform:translateX(4px); }

.btn--solid{ background:var(--charcoal); color:var(--ivory); border-color:var(--charcoal); }
.btn--solid::before{ background:var(--bronze); }
.btn--solid:hover,.btn--solid:focus-visible{ color:var(--ivory); border-color:var(--bronze); }
.btn--onDark{ color:var(--ivory); border-color:rgba(242,240,235,.42); }
.btn--onDark::before{ background:var(--ivory); }
.btn--onDark:hover,.btn--onDark:focus-visible{ color:var(--charcoal); border-color:var(--ivory); }
.btn--sm{ padding:.65rem 1.05rem; font-size:.75rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

.link{
  display:inline-flex; align-items:center; gap:.6rem; position:relative;
  font-size:.875rem; letter-spacing:.055em; text-transform:uppercase; font-weight:500;
  padding-bottom:.35rem;
}
.link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--bronze); transform-origin:left; transition:transform var(--t-mid) var(--e-out);
}
.link:hover::after,.link:focus-visible::after{ transform:scaleX(.32); }
.link .arrow{ transition:transform var(--t-fast) var(--e-out); }
.link:hover .arrow{ transform:translateX(5px); }

/* ---------- 09 IMAGE PLACEHOLDER SYSTEM ---------- */
.frame{
  position:relative; overflow:hidden; background:var(--limestone);
  isolation:isolate;
}
.frame::after{ /* drafting hairline */
  content:""; position:absolute; inset:0; border:1px solid var(--rule-soft); pointer-events:none; z-index:3;
}
.frame img,.frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.frame[data-ratio="16:9"]{ aspect-ratio:16/9; }
.frame[data-ratio="3:2"]{ aspect-ratio:3/2; }
.frame[data-ratio="4:3"]{ aspect-ratio:4/3; }
.frame[data-ratio="1:1"]{ aspect-ratio:1/1; }
.frame[data-ratio="4:5"]{ aspect-ratio:4/5; }
.frame[data-ratio="3:4"]{ aspect-ratio:3/4; }
.frame[data-ratio="2:3"]{ aspect-ratio:2/3; }
.frame[data-ratio="21:9"]{ aspect-ratio:21/9; }
.frame[data-ratio="full"]{ aspect-ratio:auto; height:100%; }

/* Placeholder chrome — removed automatically once an <img> is present */
.frame.has-image .ph{ display:none; }
.ph{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  background:
    linear-gradient(180deg, rgba(230,224,214,1), rgba(222,215,203,1));
  color:var(--ink-faint); text-align:center; padding:1.25rem;
}
.ph::before{ /* diagonal drafting cross */
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(to right, var(--rule-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-soft) 1px, transparent 1px);
  background-size:44px 44px;
}
.ph__label{
  position:relative; font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.2em; text-transform:uppercase; color:var(--graphite);
}
.ph__ratio{ position:relative; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.14em; color:var(--bronze); }
.ph__mark{ position:absolute; top:.7rem; left:.8rem; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.12em; color:var(--concrete); }
.is-dark .ph,.surface-dark .ph{ background:linear-gradient(180deg,#232323,#1D1D1D); color:#7C776E; }
.is-dark .ph__label,.surface-dark .ph__label{ color:#B5B1A9; }

.figure{ margin:0; }
.figure figcaption{
  display:flex; gap:.9rem; margin-top:.8rem;
  font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.03em; color:var(--ink-faint);
}
.figure figcaption .idx{ color:var(--bronze); flex:none; }

/* zoomable media (slow cinematic movement) */
.frame--zoom img,.frame--zoom .ph{ transition:transform 1.6s var(--e-out); }
a:hover .frame--zoom img,a:hover .frame--zoom .ph,
.card:hover .frame--zoom img,.card:hover .frame--zoom .ph{ transform:scale(1.035); }

/* ---------- 10 PROJECT CARDS & INDEX ---------- */
.card{ display:block; position:relative; }
.card__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-bottom:.7rem; margin-bottom:1rem; border-bottom:1px solid var(--rule);
  position:relative;
}
.card__head::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--bronze); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-slow) var(--e-out);
}
.card:hover .card__head::after{ transform:scaleX(1); }
.card__num{
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.14em; color:var(--bronze);
  transition:transform var(--t-mid) var(--e-out);
}
.card:hover .card__num{ transform:translateX(4px); }
.card__cat{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.card__title{ font-size:clamp(1.4rem,2.1vw,2.1rem); font-weight:500; letter-spacing:-.028em; line-height:1.08; margin-top:1rem; }
.card__statement{ color:var(--ink-soft); font-size:1rem; margin-top:.6rem; max-width:44ch; }
.card__reveal{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height var(--t-mid) var(--e-out), opacity var(--t-mid) var(--e-out), margin-top var(--t-mid) var(--e-out);
}
.card:hover .card__reveal,.card:focus-within .card__reveal{ max-height:9rem; opacity:1; margin-top:.6rem; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; }

/* editorial rhythm — deliberately unequal placements */
.work-seq{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--col-gap) var(--col-gap); row-gap:clamp(4rem,9vw,9rem); }
.pl-full   { grid-column:1 / -1; }
.pl-left   { grid-column:1 / span 7; }
.pl-right  { grid-column:6 / -1; }
.pl-rightN { grid-column:8 / -1; }
.pl-leftN  { grid-column:1 / span 5; }
.pl-half-a { grid-column:1 / span 6; }
.pl-half-b { grid-column:7 / -1; }
.pl-center { grid-column:3 / span 8; }
.pl-inset  { grid-column:2 / span 6; }
.pl-offset { grid-column:7 / span 5; align-self:end; }

/* index table */
.index-table{ width:100%; border-collapse:collapse; }
.index-table th{
  text-align:left; font-family:var(--mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
  padding:.7rem .75rem .7rem 0; border-bottom:1px solid var(--rule);
}
.index-table td{ padding:1.15rem .75rem 1.15rem 0; border-bottom:1px solid var(--rule-soft); vertical-align:baseline; }
.index-table tr{ transition:background var(--t-fast) var(--e-out); }
.index-table tbody tr:hover{ background:rgba(154,117,82,.06); }
.index-table .c-num{ font-family:var(--mono); font-size:var(--fs-caption); color:var(--bronze); width:4.5rem; }
.index-table .c-name{ font-size:1.125rem; font-weight:500; letter-spacing:-.018em; }
.index-table .c-name .sub{ display:block; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase; margin-top:.25rem; }
.index-table .c-meta{ font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.05em; color:var(--ink-soft); text-transform:uppercase; }
.index-table .c-view{ text-align:right; }
.index-table .c-view span{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.index-table tbody tr:hover .c-view span{ color:var(--bronze); }

/* floating hover preview */
.float-preview{
  position:fixed; z-index:40; width:270px; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.96);
  transition:opacity .25s var(--e-out), transform .35s var(--e-out);
}
.float-preview.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* filters */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; align-items:center; }
.filters__label{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-right:.4rem; }
.chip{
  background:none; border:0; cursor:pointer; padding:.35rem 0;
  font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); position:relative; transition:color var(--t-fast);
}
.chip::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--bronze); transform:scaleX(0); transform-origin:left; transition:transform var(--t-fast) var(--e-out); }
.chip:hover{ color:var(--ink); }
.chip.is-on{ color:var(--ink); }
.chip.is-on::after{ transform:scaleX(1); }
.view-toggle{ display:flex; gap:1.2rem; }
[hidden]{ display:none !important; }
.is-filtered-out{ display:none !important; }
.filter-empty{ padding:4rem 0; border-top:1px solid var(--rule); }

/* ---------- 11 HOME ---------- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; color:var(--ivory); overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; background:var(--graphite); }
.hero__slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s var(--e-io); }
.hero__slide.is-on{ opacity:1; }
.hero__slide .frame{ width:100%; height:100%; background:var(--graphite); }
.hero__slide .frame::after{ border:0; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(23,23,23,.62) 0%, rgba(23,23,23,.30) 34%, rgba(23,23,23,.55) 72%, rgba(23,23,23,.86) 100%);
}
.hero__inner{ position:relative; z-index:2; padding-bottom:clamp(1.5rem,3vw,2.5rem); padding-top:calc(var(--nav-h) + 3rem); }
.hero__eyebrow{ color:rgba(242,240,235,.72); }
.hero__name{ margin-top:.8rem; }
.hero__sig{ margin-top:1rem; font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.26em; text-transform:uppercase; color:var(--bronze); }
.hero__statement{ margin-top:clamp(1.75rem,4vw,3rem); max-width:19ch; }
.hero__secondary{ margin-top:1.4rem; max-width:52ch; color:rgba(242,240,235,.78); font-size:1.0625rem; }
.hero__actions{ margin-top:2rem; }
.hero__bar{
  position:relative; z-index:2; border-top:1px solid rgba(242,240,235,.22);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding-block:1.05rem;
}
.hero .scale-spine{ color:rgba(242,240,235,.55); }
.hero .scale-spine__item{ color:rgba(242,240,235,.55); }
.hero .scale-spine__item.is-active{ color:var(--ivory); }
.hero__scroll{ display:flex; align-items:center; gap:.7rem; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase; color:rgba(242,240,235,.7); }
.hero__scroll i{ display:block; width:1px; height:26px; background:currentColor; animation:scroll-tick 2.2s var(--e-io) infinite; transform-origin:top; }
@keyframes scroll-tick{ 0%{transform:scaleY(.2)} 45%{transform:scaleY(1)} 100%{transform:scaleY(.2)} }
.hero__count{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em; color:rgba(242,240,235,.7); }

/* approach */
.approach{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border-block:1px solid var(--rule); }
.approach__cell{
  background:var(--ivory); padding:clamp(1.5rem,2.6vw,2.5rem);
  position:relative; transition:background var(--t-mid) var(--e-out);
  min-height:15rem; display:flex; flex-direction:column;
}
.approach__cell:hover{ background:var(--limestone); }
.approach__num{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em; color:var(--bronze); }
.approach__name{ font-size:clamp(1.25rem,1.9vw,1.7rem); font-weight:500; letter-spacing:-.026em; margin-top:1.6rem; }
.approach__line{ height:1px; background:var(--rule); margin-top:1rem; position:relative; }
.approach__line::after{ content:""; position:absolute; inset:0; background:var(--bronze); transform:scaleX(0); transform-origin:left; transition:transform var(--t-slow) var(--e-out); }
.approach__cell:hover .approach__line::after{ transform:scaleX(1); }
.approach__text{ margin-top:1rem; font-size:.9375rem; color:var(--ink-soft); }

/* making split */
.making-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,3rem); }
.making-card .frame{ margin-bottom:1.5rem; }

/* profile preview */
.profile-preview{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,5rem); align-items:center; }

/* ---------- 12 PROJECT TEMPLATE ---------- */
.p-hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:var(--ivory); overflow:hidden; }
.p-hero .frame{ position:absolute; inset:0; }
.p-hero .frame::after{ border:0; }
.p-hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,23,23,.55) 0%, rgba(23,23,23,.22) 40%, rgba(23,23,23,.82) 100%); }
.p-hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(2rem,4vw,3.5rem); padding-top:calc(var(--nav-h) + 4rem); }
.p-hero__meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; align-items:baseline; }
.p-hero__title{ margin-top:1.2rem; max-width:16ch; }
.p-hero__sub{ margin-top:.9rem; font-family:var(--serif); font-size:clamp(1.35rem,2.4vw,2rem); color:rgba(242,240,235,.8); }
.p-hero__ar{ margin-top:.5rem; font-size:clamp(1.5rem,2.6vw,2.2rem); color:rgba(242,240,235,.72); }
.p-hero__bar{ position:relative; z-index:2; border-top:1px solid rgba(242,240,235,.22); padding-block:1rem; display:flex; justify-content:space-between; align-items:center; gap:2rem; }
.p-hero .scale-spine__item{ color:rgba(242,240,235,.5); }
.p-hero .scale-spine__item.is-active{ color:var(--ivory); }

.p-intro{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(2rem,5vw,5rem); }
.meta-list{ list-style:none; margin:0; padding:0; position:sticky; top:calc(var(--nav-h) + 1.5rem); }
.meta-list li{ padding:.85rem 0; border-bottom:1px solid var(--rule-soft); }
.meta-list dt,.meta-list .k{
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
}
.meta-list dd,.meta-list .v{ margin:.3rem 0 0; font-size:.9375rem; }
.meta-list .v--stack span{ display:block; }

.p-section{ padding-block:var(--sec-y-sm); border-top:1px solid var(--rule); }
.p-section__head{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:var(--col-gap); margin-bottom:clamp(1.75rem,3.5vw,3rem); }
.p-body{ font-size:var(--fs-body); color:var(--ink-soft); max-width:var(--measure); }
.p-body strong{ color:var(--ink); font-weight:500; }

/* condition / response comparison */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.compare__cell{ background:var(--ivory); padding:clamp(1.5rem,2.6vw,2.4rem); }
.compare__cell .eyebrow{ color:var(--bronze); }
.compare__cell h4{ font-size:1.25rem; margin-top:1rem; font-weight:500; letter-spacing:-.02em; }
.compare__cell p{ margin-top:.8rem; font-size:.9375rem; color:var(--ink-soft); }

/* principles list */
.principles{ list-style:none; margin:0; padding:0; columns:2; column-gap:clamp(2rem,4vw,4rem); }
.principles li{ break-inside:avoid; padding:.7rem 0; border-bottom:1px solid var(--rule-soft); display:flex; gap:.9rem; align-items:baseline; font-size:.9375rem; }
.principles li i{ font-style:normal; font-family:var(--mono); font-size:var(--fs-label); color:var(--bronze); flex:none; }

/* drawings viewer */
.drawings{ background:var(--limestone); }
.drawing-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:var(--col-gap); }
.drawing{ background:#EFEDE7; border:1px solid var(--rule-soft); cursor:zoom-in; position:relative; }
.drawing .frame{ background:#EFEDE7; }
.drawing__bar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem .9rem; border-top:1px solid var(--rule-soft); }
.drawing__name{ font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.1em; text-transform:uppercase; }
.drawing__zoom{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.14em; color:var(--bronze); text-transform:uppercase; }

/* gallery layouts */
.g-full{ grid-column:1 / -1; }
.g-pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--col-gap); }
.g-quad{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--col-gap); }
.g-offset{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--col-gap); align-items:end; }

/* material board */
.materials{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:var(--col-gap); }
.material__name{ margin-top:.9rem; font-size:1rem; font-weight:500; letter-spacing:-.01em; }
.material__role{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase; color:var(--bronze); margin-top:.35rem; }
.material__note{ font-size:.875rem; color:var(--ink-soft); margin-top:.5rem; }

/* before / after slider */
.ba{ position:relative; overflow:hidden; cursor:ew-resize; user-select:none; touch-action:none; }
.ba__after{ position:absolute; inset:0; width:50%; overflow:hidden; }
.ba__after > *{ width:var(--ba-w,100%); height:100%; }
.ba__handle{ position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--ivory); z-index:5; }
.ba__handle::after{
  content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%);
  border:1px solid var(--ivory); border-radius:50%; background:rgba(23,23,23,.35);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.ba__tag{ position:absolute; bottom:.9rem; z-index:6; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--ivory); background:rgba(23,23,23,.5); padding:.3rem .6rem; }
.ba__tag--l{ left:.9rem; } .ba__tag--r{ right:.9rem; }

/* next project */
.next-project{ position:relative; display:block; overflow:hidden; color:var(--ivory); min-height:62svh; display:flex; align-items:center; }
.next-project .frame{ position:absolute; inset:0; }
.next-project .frame::after{ border:0; }
.next-project__scrim{ position:absolute; inset:0; background:rgba(23,23,23,.55); transition:background var(--t-mid) var(--e-out); }
.next-project:hover .next-project__scrim{ background:rgba(23,23,23,.42); }
.next-project__inner{ position:relative; z-index:2; width:100%; }
.p-foot{ display:flex; justify-content:space-between; align-items:center; gap:2rem; padding-block:1.5rem; }

/* ---------- 13 METHODS ---------- */
.method-flow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.flow-step{ background:var(--ivory); padding:1.15rem 1.1rem 1.4rem; position:relative; }
.flow-step__n{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.14em; color:var(--bronze); }
.flow-step__t{ margin-top:.8rem; font-size:.9375rem; font-weight:500; letter-spacing:-.012em; line-height:1.3; }
.flow-step--gate{ background:var(--limestone); }
.flow-step--gate .flow-step__n{ color:var(--terracotta); }

.scope-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,3rem); }
.scope-list{ list-style:none; margin:1.25rem 0 0; padding:0; }
.scope-list li{ padding:.55rem 0; border-bottom:1px solid var(--rule-soft); font-size:.9375rem; display:flex; gap:.8rem; align-items:baseline; }
.scope-list li::before{ content:""; width:10px; height:1px; background:var(--bronze); flex:none; transform:translateY(-4px); }
.scope-list--excl li::before{ background:var(--terracotta); }

.class-table{ width:100%; border-collapse:collapse; }
.class-table th{ text-align:left; font-family:var(--mono); font-size:var(--fs-label); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); padding:.7rem .9rem .7rem 0; border-bottom:1px solid var(--rule); }
.class-table td{ padding:1rem .9rem 1rem 0; border-bottom:1px solid var(--rule-soft); font-size:.9375rem; vertical-align:top; }
.class-table .code{ font-family:var(--mono); font-size:var(--fs-caption); color:var(--bronze); white-space:nowrap; }

.checklist{ list-style:none; margin:0; padding:0; }
.checklist li{ display:flex; gap:.9rem; align-items:flex-start; padding:.7rem 0; border-bottom:1px solid var(--rule-soft); font-size:.9375rem; }
.checklist li::before{ content:""; width:13px; height:13px; border:1px solid var(--bronze); flex:none; margin-top:.35rem; }
.risk{ border-left:2px solid var(--terracotta); padding-left:1.1rem; }

.toc{ position:sticky; top:calc(var(--nav-h) + 1.5rem); list-style:none; margin:0; padding:0; }
.toc li{ border-bottom:1px solid var(--rule-soft); }
.toc a{ display:flex; gap:.9rem; padding:.6rem 0; font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); transition:color var(--t-fast); }
.toc a:hover,.toc a.is-current{ color:var(--ink); }
.toc a .n{ color:var(--bronze); }

/* ---------- 14 MAKING ---------- */
.contact-sheet{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:var(--col-gap); }
.model-card__meta{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-top:.8rem; }
.model-card__meta span{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.model-card__title{ margin-top:.55rem; font-size:1.0625rem; font-weight:500; letter-spacing:-.014em; }
.model-card__desc{ margin-top:.5rem; font-size:.875rem; color:var(--ink-soft); }

.process-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--col-gap); border-top:1px solid var(--rule); padding-top:1.25rem; }
.process-strip__step .n{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.14em; color:var(--bronze); }
.process-strip__step .t{ margin-top:.5rem; font-size:1rem; font-weight:500; letter-spacing:-.014em; }

.character-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:clamp(1.5rem,2.6vw,2.5rem); }
.character{ position:relative; }
.character .frame{ background:#E9E2D6; }
.character__views{ display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; margin-top:.4rem; }
.character__name{ margin-top:.9rem; font-size:1.25rem; font-weight:500; letter-spacing:-.022em; }
.character__series{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--terracotta); }
.character__desc{ margin-top:.55rem; font-size:.9375rem; color:var(--ink-soft); }
.character:hover .frame img,.character:hover .frame .ph{ transform:translateY(-6px) scale(1.02); }
.zombo-band{ background:#EDE3D6; }

/* ---------- 15 PROFILE / CV ---------- */
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:var(--col-gap); padding:1.4rem 0; border-top:1px solid var(--rule); }
.timeline .when{ font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.timeline .what{ font-size:1.125rem; font-weight:500; letter-spacing:-.018em; }
.timeline .where{ font-size:.9375rem; color:var(--ink-soft); margin-top:.3rem; }
.tag-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:0 var(--col-gap); }
.tag-grid li{ list-style:none; padding:.7rem 0; border-bottom:1px solid var(--rule-soft); font-size:.9375rem; display:flex; gap:.8rem; align-items:baseline; }
.tag-grid li i{ font-style:normal; font-family:var(--mono); font-size:var(--fs-label); color:var(--bronze); }
.award{ border:1px solid var(--bronze); padding:clamp(1.5rem,3vw,2.5rem); }
.cv-page{ background:var(--ivory); }
.cv-doc{ max-width:960px; margin-inline:auto; background:#FBFAF7; border:1px solid var(--rule); padding:clamp(2rem,5vw,4.5rem); }
.cv-block + .cv-block{ margin-top:clamp(2rem,3.5vw,3rem); padding-top:clamp(2rem,3.5vw,3rem); border-top:1px solid var(--rule); }
.cv-block h2{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); font-weight:500; }
.cv-block .body{ margin-top:1.25rem; }

/* ---------- 16 CONTACT & FORMS ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.field{ position:relative; margin-bottom:1.6rem; }
.field label{
  display:block; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:.6rem;
}
.field input,.field select,.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--rule);
  padding:.7rem 0; font-size:1.0625rem; border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color var(--t-fast) var(--e-out);
}
.field select{ background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 12px) 1.35rem,calc(100% - 7px) 1.35rem; background-size:5px 5px; background-repeat:no-repeat; }
.field textarea{ min-height:9rem; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--bronze); }
.field .err{ display:none; margin-top:.5rem; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.08em; color:var(--terracotta); text-transform:uppercase; }
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:var(--terracotta); }
.field.has-error .err{ display:block; }
.form-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--col-gap); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-done{ display:none; border:1px solid var(--bronze); padding:clamp(2rem,4vw,3.5rem); }
.form-done.is-on{ display:block; animation:fade-up var(--t-mid) var(--e-out) both; }
.contact-lines{ list-style:none; margin:0; padding:0; }
.contact-lines li{ padding:1rem 0; border-bottom:1px solid var(--rule); }
.contact-lines .k{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.contact-lines .v{ display:inline-flex; align-items:center; gap:.5rem; margin-top:.4rem; font-size:1.0625rem; }
.contact-lines a.v::after{ content:"↗"; font-size:.8em; color:var(--bronze); }

/* ---------- 17 FOOTER ---------- */
.footer{ background:var(--charcoal); color:var(--ivory); position:relative; z-index:2; }
.footer a{ color:inherit; }
.footer__main{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr); gap:clamp(2rem,4vw,4rem); padding-block:clamp(3rem,6vw,5.5rem); }
.footer__mark{ width:52px; height:52px; }
.footer__mark path,.footer__mark line{ stroke:var(--ivory); }
.footer__name{ margin-top:1.5rem; font-size:1.375rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.footer__sig{ margin-top:.5rem; font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); }
.footer__list{ list-style:none; margin:0; padding:0; }
.footer__list li{ border-bottom:1px solid rgba(242,240,235,.14); }
.footer__list a{ display:flex; justify-content:space-between; align-items:center; padding:.8rem 0; font-size:1rem; transition:padding-left var(--t-mid) var(--e-out), color var(--t-fast); color:rgba(242,240,235,.82); }
.footer__list a:hover{ padding-left:.7rem; color:var(--ivory); }
.footer__list a span{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; color:rgba(242,240,235,.45); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:2rem; padding-block:1.4rem; border-top:1px solid rgba(242,240,235,.14); font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase; color:rgba(242,240,235,.55); }
.to-top{ display:inline-flex; align-items:center; gap:.6rem; background:none; border:0; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; transition:color var(--t-fast); }
.to-top:hover{ color:var(--bronze); }

/* ---------- 18 LIGHTBOX / CURSOR / LOADER / TRANSITION ---------- */
.lightbox{
  position:fixed; inset:0; z-index:90; background:rgba(23,23,23,.96);
  display:flex; flex-direction:column; opacity:0; visibility:hidden;
  transition:opacity var(--t-mid) var(--e-out), visibility var(--t-mid);
}
.lightbox.is-on{ opacity:1; visibility:visible; }
.lightbox__bar{ display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:1.1rem var(--gutter); color:rgba(242,240,235,.75); font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid rgba(242,240,235,.14); }
.lightbox__stage{ flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; padding:var(--gutter); }
.lightbox__stage > *{ transform-origin:center; transition:transform var(--t-mid) var(--e-out); max-width:min(1400px,100%); width:100%; }
.lightbox__ctl{ background:none; border:1px solid rgba(242,240,235,.35); color:inherit; padding:.4rem .8rem; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; transition:background var(--t-fast),color var(--t-fast); }
.lightbox__ctl:hover{ background:var(--ivory); color:var(--charcoal); }
.lightbox__ctls{ display:flex; gap:.6rem; align-items:center; }

.cursor{
  position:fixed; top:0; left:0; z-index:80; width:78px; height:78px; border-radius:50%;
  border:1px solid var(--ivory); color:var(--ivory); background:rgba(23,23,23,.28);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; pointer-events:none;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase;
  opacity:0; transform:translate(-50%,-50%) scale(.6);
  transition:opacity .25s var(--e-out), transform .35s var(--e-out);
}
.cursor.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (hover:none),(pointer:coarse){ .cursor,.float-preview{ display:none !important; } }

.progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--bronze); z-index:70; transition:width .1s linear; }

.loader{
  position:fixed; inset:0; z-index:100; background:var(--ivory);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1.5rem;
}
.loader.is-out{ animation:loader-part 1s var(--e-io) forwards; }
.loader__mark{ width:120px; height:120px; }
.loader__mark path,.loader__mark line{
  stroke:var(--charcoal); stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300);
  animation:draw .85s var(--e-io) forwards;
}
.loader__mark .l2{ animation-delay:.16s; }
.loader__mark .l3{ animation-delay:.3s; }
.loader__mark .l4{ animation-delay:.42s; }
.loader__label{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); opacity:0; animation:fade-in .5s .6s var(--e-out) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes loader-part{ to{ clip-path:inset(50% 0 50% 0); opacity:0; visibility:hidden; } }

/* section-cut page transition */
.cut{
  position:fixed; inset:0; z-index:95; pointer-events:none;
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
}
.cut__line{ width:0; height:1px; background:var(--bronze); }
.cut__panel{ position:absolute; left:0; right:0; background:var(--ivory); height:0; }
.cut__panel--t{ top:0; } .cut__panel--b{ bottom:0; }
.cut.is-on{ opacity:1; visibility:visible; }
.cut.is-on .cut__line{ animation:cut-line .34s var(--e-io) forwards; }
.cut.is-on .cut__panel{ animation:cut-open .42s .3s var(--e-io) forwards; }
@keyframes cut-line{ from{ width:0 } to{ width:100% } }
@keyframes cut-open{ from{ height:0 } to{ height:50vh } }

/* ---------- 19 MOTION / REVEAL / A11Y ---------- */
@keyframes fade-up{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes fade-in{ to{ opacity:1 } }
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--e-out), transform .9s var(--e-out); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal-mask{ clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--e-out); }
.reveal-mask.is-in{ clip-path:inset(0 0 0 0); }
.d1{ transition-delay:.08s } .d2{ transition-delay:.16s } .d3{ transition-delay:.24s } .d4{ transition-delay:.32s }

:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }
.skip{
  position:absolute; left:1rem; top:-4rem; z-index:120; background:var(--charcoal); color:var(--ivory);
  padding:.75rem 1.1rem; font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.1em; text-transform:uppercase;
  transition:top var(--t-fast) var(--e-out);
}
.skip:focus{ top:1rem; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.motion-toggle{
  position:fixed; right:calc(var(--gutter) / 2 + 10px); bottom:1.1rem; z-index:50;
  background:rgba(242,240,235,.9); color:var(--charcoal); border:1px solid var(--rule);
  padding:.45rem .7rem; cursor:pointer;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:opacity var(--t-mid),transform var(--t-mid),background var(--t-fast);
}
.motion-toggle.is-on{ opacity:1; transform:none; }
.motion-toggle:hover{ background:var(--charcoal); color:var(--ivory); }

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after{
  animation-duration:.001ms !important; animation-iteration-count:1 !important;
  transition-duration:.001ms !important; scroll-behavior:auto !important;
}
body.reduce-motion .reveal{ opacity:1; transform:none; }
body.reduce-motion .reveal-mask{ clip-path:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .reveal-mask{ clip-path:none !important; }
}

/* ---------- 20 RESPONSIVE ---------- */
@media (max-width:1180px){
  .grid{ grid-template-columns:repeat(8,1fr); }
  .work-seq{ grid-template-columns:repeat(8,1fr); }
  .pl-left,.pl-half-a{ grid-column:1 / span 5; }
  .pl-right,.pl-half-b{ grid-column:4 / -1; }
  .pl-rightN{ grid-column:5 / -1; }
  .pl-leftN,.pl-inset{ grid-column:1 / span 4; }
  .pl-center{ grid-column:2 / span 6; }
  .pl-offset{ grid-column:5 / span 4; }
  .approach{ grid-template-columns:repeat(2,1fr); }
  .process-strip{ grid-template-columns:repeat(3,1fr); row-gap:1.5rem; }
}
@media (max-width:900px){
  :root{ --nav-h:64px; }
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .sec-head{ grid-template-columns:1fr; gap:1.25rem; }
  .scale-board{ grid-template-columns:1fr; gap:2rem; }
  .p-intro,.profile-preview,.contact-grid{ grid-template-columns:1fr; }
  .p-section__head{ grid-template-columns:1fr; gap:1rem; }
  .meta-list{ position:static; }
  .making-split{ grid-template-columns:1fr; }
  .timeline li{ grid-template-columns:1fr; gap:.4rem; }
  .scope-cols{ grid-template-columns:1fr; }
  .g-quad{ grid-template-columns:repeat(2,1fr); }
  .float-preview{ display:none; }
}
@media (max-width:720px){
  .grid,.work-seq{ grid-template-columns:repeat(4,1fr); }
  .work-seq{ row-gap:clamp(3rem,10vw,5rem); }
  .pl-full,.pl-left,.pl-right,.pl-rightN,.pl-leftN,
  .pl-half-a,.pl-half-b,.pl-center,.pl-inset,.pl-offset{ grid-column:1 / -1; }
  .approach{ grid-template-columns:1fr; }
  .approach__cell{ min-height:auto; }
  .compare,.g-pair,.form-cols,.principles{ grid-template-columns:1fr; }
  .principles{ columns:1; }
  .g-quad{ grid-template-columns:repeat(2,1fr); }
  .footer__main{ grid-template-columns:1fr; }
  .hero__bar{ flex-direction:column; align-items:flex-start; gap:.9rem; }
  .hero__scroll{ display:none; }
  .scale-spine{ font-size:.625rem; letter-spacing:.14em; }
  .scale-spine__sep{ padding-inline:.4rem; }
  .index-table .c-hide{ display:none; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:.8rem; text-align:left; }
  .p-hero__title{ max-width:none; }
  .lightbox__bar{ flex-wrap:wrap; gap:.8rem; }
  .contact-sheet{ grid-template-columns:repeat(2,1fr); }
  .rail{ display:none; }
}

/* ---------- 21 PRINT ---------- */
@media print{
  .nav,.menu,.footer,.progress,.cursor,.loader,.cut,.motion-toggle,.hero__scroll,.to-top,.btn,.skip{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  body::before{ display:none; }
  .cv-doc{ border:0; padding:0; max-width:none; background:#fff; }
  .section{ padding-block:1.2rem; }
  a[href]::after{ content:" (" attr(href) ")"; font-size:8pt; color:#555; }
  .cv-doc a[href]::after{ content:""; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- 22 CMS SLOTS (draft mode only) ----------
   A field that exists in the CMS but has no content yet. Set DRAFT = False
   in build/templates.py to strip every one of these before publishing. */
.cms-slot{
  border:1px dashed var(--concrete); padding:1rem 1.15rem; background:rgba(181,177,169,.10);
}
.cms-slot__k{
  display:block; font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta);
}
.cms-slot__v{ display:block; margin-top:.5rem; font-size:.9375rem; color:var(--ink-soft); }
.cms-slot__n{ margin:.5rem 0 0; font-size:.8125rem; color:var(--ink-faint); }
.cms-slot + .cms-slot{ margin-top:.6rem; }

/* ---------- 23 LAYOUT UTILITIES (replace inline grid-column) ---------- */
.split-57{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(1.5rem,3.5vw,3.5rem); align-items:start; }
.split-73{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(1.5rem,3.5vw,3.5rem); align-items:start; }
.split-11{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3.5vw,3.5rem); align-items:start; }
@media (max-width:900px){ .split-57,.split-73,.split-11{ grid-template-columns:1fr; } }

.ch-row{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--col-gap); row-gap:1.5rem; align-items:center; margin-top:clamp(3rem,6vw,5rem); }
.ch-media{ grid-column:span 7; }
.ch-text{ grid-column:8 / span 5; }
.ch-row--flip .ch-media{ grid-column:6 / span 7; }
.ch-row--flip .ch-text{ grid-column:1 / span 4; }
@media (max-width:1100px){
  .ch-row{ grid-template-columns:1fr; }
  .ch-media,.ch-text,.ch-row--flip .ch-media,.ch-row--flip .ch-text{ grid-column:1 / -1; }
}

.w-a{ grid-column:span 6; }
.w-b{ grid-column:span 4; }
@media (max-width:1180px){ .w-a,.w-b{ grid-column:span 4; } }
@media (max-width:720px){ .w-a,.w-b{ grid-column:1 / -1; } }

.process-strip--7{ grid-template-columns:repeat(7,1fr); }
@media (max-width:1180px){ .process-strip--7{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:720px){ .process-strip,.process-strip--7{ grid-template-columns:repeat(2,1fr); } }

/* nav legibility on light pages + while the mobile menu is open */
body.menu-open .nav{ color:var(--charcoal); background:transparent; box-shadow:none; }
.nav--onlight:not(.is-solid){ color:var(--charcoal); }

/* ---------- 24 IMAGE SLOTS, GUIDE MODE, GRACEFUL EMPTY ---------- */

/* Placeholders are hidden by default so visitors never see them.
   Turn on "Image guide" (bottom-right) while you are adding images. */
.ph{ display:none; }
body.guide-on .frame:not(.has-image) .ph{ display:flex; }
.ph__file{
  position:relative; margin-top:.35rem; padding:.2rem .5rem;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.06em;
  color:var(--charcoal); background:rgba(242,240,235,.85); border:1px solid var(--rule);
  max-width:92%; overflow-wrap:anywhere; text-align:center;
}
body.guide-on .frame:not(.has-image){ background:var(--limestone); }

/* Empty, non-required slots collapse completely on the published page */
.frame.is-empty, .figure.is-empty, .drawing.is-empty,
.character__views.is-empty{ display:none !important; }
body.guide-on .frame.is-empty, body.guide-on .figure.is-empty,
body.guide-on .drawing.is-empty, body.guide-on .character__views.is-empty{ display:block !important; }
body.guide-on .character__views.is-empty{ display:grid !important; }
body.guide-on .frame.is-empty{ display:block !important; }

/* A chapter row with no image becomes a clean full-width text block */
.ch-row--noimg .ch-media{ display:none; }
.ch-row--noimg .ch-text{ grid-column:1 / span 7; }
body.guide-on .ch-row--noimg .ch-media{ display:block; }

/* Hero slots with no image yet: a designed surface, never a broken frame */
.frame.is-empty-hero{ background:linear-gradient(160deg,#2A2724 0%,#171717 60%,#1E1C1A 100%); }
.frame.is-empty-hero::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(242,240,235,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,240,235,.05) 1px, transparent 1px);
  background-size:64px 64px;
}
.frame img{ animation:img-in .8s var(--e-out) both; }
@keyframes img-in{ from{ opacity:0 } to{ opacity:1 } }

/* Corner tools */
.tools{
  position:fixed; right:calc(var(--gutter) / 2 + 10px); bottom:1.1rem; z-index:50;
  display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end;
}
.tool-btn{
  background:rgba(242,240,235,.92); color:var(--charcoal); border:1px solid var(--rule);
  padding:.45rem .7rem; cursor:pointer;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase;
  transition:background var(--t-fast), color var(--t-fast);
}
.tool-btn:hover{ background:var(--charcoal); color:var(--ivory); }
.tool-btn[aria-pressed="true"]{ background:var(--bronze); color:var(--ivory); border-color:var(--bronze); }
.motion-toggle{ position:static; opacity:1; transform:none; }
@media print{ .tools{ display:none !important; } }

/* Unresolved slots stay invisible until the resolver decides: image or collapse */
.frame:not(.has-image):not(.is-empty-hero){ background:transparent; }
.frame:not(.has-image):not(.is-empty-hero)::after{ border-color:transparent; }
body.guide-on .frame:not(.has-image){ background:var(--limestone); }
body.guide-on .frame:not(.has-image)::after{ border-color:var(--rule-soft); }

/* ---------- 25 PROJECT FACTS BAR ---------- */
.facts-bar{ background:var(--charcoal); color:var(--ivory); padding-block:clamp(1.75rem,3vw,2.5rem); position:relative; z-index:2; }
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr));
  gap:1px; background:rgba(242,240,235,.16); border:1px solid rgba(242,240,235,.16);
}
.fact{ background:var(--charcoal); padding:1.05rem 1.2rem; }
.fact__k{
  display:block; font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.18em; text-transform:uppercase; color:var(--bronze);
}
.fact__v{ display:block; margin-top:.5rem; font-size:.9375rem; line-height:1.4; color:var(--ivory); }
.facts-bar .link{ color:rgba(242,240,235,.9); }
.p-hero__tag{
  margin-top:1.1rem; font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.65rem);
  color:var(--bronze); letter-spacing:-.01em;
}

/* ---------- 26 SEQUENCE / STEP GRID ---------- */
.step-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(1.25rem,2.2vw,2rem);
}
.step-card{ position:relative; }
.step-card .frame{ margin-bottom:1rem; }
.step-card__n{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em; color:var(--bronze); }
.step-card__t{ margin-top:.5rem; font-size:1.125rem; font-weight:500; letter-spacing:-.018em; line-height:1.25; }
.step-card__d{ margin-top:.5rem; font-size:.875rem; color:var(--ink-soft); line-height:1.55; }

@media (max-width:720px){
  .facts{ grid-template-columns:1fr 1fr; }
  .step-grid{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   27  SIMPLIFIED PROJECT PAGE — facts, brief, shots
   ============================================================ */

/* --- facts + brief band --- */
.brief-block{ background:var(--charcoal); color:var(--ivory); position:relative; z-index:2;
  padding-block:0 clamp(3.5rem,7vw,6rem); }
.brief-block .facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:0; border-bottom:1px solid rgba(242,240,235,.18);
}
.brief-block .fact{ padding:clamp(1.35rem,2.4vw,2rem) 1.25rem clamp(1.35rem,2.4vw,2rem) 0;
  border-right:1px solid rgba(242,240,235,.14); }
.brief-block .fact:last-child{ border-right:0; }
.fact__k{ display:block; font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); }
.fact__v{ display:block; margin-top:.6rem; font-size:1.0625rem; line-height:1.35;
  letter-spacing:-.012em; color:var(--ivory); }

.brief{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem,5vw,5rem); padding-top:clamp(2.5rem,5vw,4rem); align-items:start; }
.brief__lead .t-serif-statement{ color:var(--ivory); max-width:18ch; }
.brief__body p{ font-size:clamp(1.0625rem,1.15vw,1.1875rem); line-height:1.72;
  color:rgba(242,240,235,.82); max-width:46rem; }
.brief__body p + p{ margin-top:1.1em; }
.brief__actions{ margin-top:2rem; }

/* --- shots --- */
.shots-section{ padding-top:clamp(3.5rem,7vw,6rem); }
.shots-head{ display:flex; justify-content:space-between; align-items:baseline;
  gap:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--rule);
  margin-bottom:clamp(1.5rem,3vw,2.5rem); }
.shots{ display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(.6rem,1.2vw,1.25rem); }
.shot{ margin:0; position:relative; cursor:zoom-in; }
.s-full { grid-column:span 6; }
.s-wide { grid-column:span 4; }
.s-half { grid-column:span 3; }
.s-third{ grid-column:span 2; }
.shot figcaption{
  position:absolute; left:.75rem; top:.75rem; z-index:4; pointer-events:none;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.14em;
  color:var(--ivory); opacity:0; transform:translateY(-4px);
  transition:opacity var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
  text-shadow:0 1px 6px rgba(23,23,23,.6);
}
.shot:hover figcaption{ opacity:1; transform:none; }
.shot .frame::after{ border-color:transparent; }
.shot::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:rgba(23,23,23,0); transition:background var(--t-fast) var(--e-out);
}
.shot:hover::after{ background:rgba(23,23,23,.14); }
.shot:hover .frame img{ transform:scale(1.035); }
.shots-hint{ margin-top:clamp(1.5rem,3vw,2.25rem); text-align:center;
  font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.06em; color:var(--ink-faint); }
.film-section .shots-head{ margin-bottom:clamp(1.5rem,3vw,2.5rem); }

@media (max-width:900px){
  .brief{ grid-template-columns:1fr; }
  .brief-block .fact{ border-right:0; border-bottom:1px solid rgba(242,240,235,.12); }
  .shots{ grid-template-columns:repeat(4,1fr); }
  .s-full,.s-wide{ grid-column:span 4; }
  .s-half{ grid-column:span 2; }
  .s-third{ grid-column:span 2; }
}
@media (max-width:600px){
  .shots{ grid-template-columns:repeat(2,1fr); }
  .s-full,.s-wide{ grid-column:span 2; }
  .s-half,.s-third{ grid-column:span 1; }
  .shot figcaption{ opacity:1; }
}

/* Lightbox gallery controls */
.lightbox__nav{ display:flex; gap:.6rem; align-items:center; }
.lightbox__count{ font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.16em; color:rgba(242,240,235,.6); }

.shot.is-empty{ display:none !important; }
body.guide-on .shot.is-empty{ display:block !important; }
.lightbox__stage .frame{ background:transparent; }
.lightbox__stage .ph{ display:flex !important; }

/* ============================================================
   28  INTERIORS
   ============================================================ */
.int-jumps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.int-jump{
  background:var(--ivory); padding:clamp(1.25rem,2.2vw,1.85rem);
  display:block; transition:background var(--t-mid) var(--e-out), padding-left var(--t-mid) var(--e-out);
}
.int-jump:hover{ background:var(--limestone); padding-left:calc(clamp(1.25rem,2.2vw,1.85rem) + .5rem); }
.int-jump .n{ display:block; font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.16em; color:var(--bronze); }
.int-jump .t{ display:block; margin-top:.9rem; font-size:clamp(1.15rem,1.7vw,1.5rem);
  font-weight:500; letter-spacing:-.024em; line-height:1.15; }
.int-jump .k{ display:block; margin-top:.5rem; font-family:var(--mono);
  font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }

.int-set{ margin-top:clamp(3rem,7vw,7rem); scroll-margin-top:calc(var(--nav-h) + 1rem); }
.int-hero{
  position:relative; min-height:62svh; display:flex; align-items:flex-end;
  color:var(--ivory); overflow:hidden;
}
.int-hero .frame{ position:absolute; inset:0; }
.int-hero .frame::after{ border:0; }
.int-hero__scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(23,23,23,.35) 0%,rgba(23,23,23,.20) 40%,rgba(23,23,23,.80) 100%); }
.int-hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(1.75rem,3.5vw,3rem); padding-top:4rem; }
.int-hero__title{ margin-top:1rem; font-size:clamp(2.5rem,5.5vw,4.5rem); }
.int-hero .p-hero__sub{ margin-top:.75rem; }
.int-set .shots-section{ padding-top:clamp(2.5rem,5vw,4rem); }

/* ============================================================
   29  PROFILE / CV — stats, skills, project list
   ============================================================ */
.stat-band{ background:var(--charcoal); color:var(--ivory); position:relative; z-index:2; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:0; }
.stat{ padding:clamp(1.75rem,3.5vw,2.75rem) 1.5rem clamp(1.75rem,3.5vw,2.75rem) 0;
  border-right:1px solid rgba(242,240,235,.14); }
.stat:last-child{ border-right:0; }
.stat__n{ display:block; font-size:clamp(2.25rem,4.2vw,3.5rem); font-weight:500;
  letter-spacing:-.04em; line-height:1; color:var(--ivory); }
.stat__k{ display:block; margin-top:.7rem; font-family:var(--mono);
  font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); }

.software{ display:grid; gap:0; border-top:1px solid var(--rule); }
.soft{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:var(--col-gap);
  padding:1.1rem 0; border-bottom:1px solid var(--rule-soft); align-items:baseline; }
.soft__k{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); }
.soft__v{ font-size:1rem; letter-spacing:-.01em; }

.cv-top{ display:flex; flex-wrap:wrap; gap:1.25rem; justify-content:space-between;
  align-items:flex-end; max-width:960px; margin:0 auto clamp(2rem,4vw,3rem); }
.cv-group{ font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:500;
  margin:1.75rem 0 .5rem; }
.cv-group:first-child{ margin-top:0; }
.cv-projects{ list-style:none; margin:0; padding:0; }
.cv-proj{ border-bottom:1px solid var(--rule-soft); }
.cv-proj > *{ display:flex; flex-wrap:wrap; gap:.35rem 1.5rem; justify-content:space-between;
  align-items:baseline; padding:.75rem 0; transition:padding-left var(--t-mid) var(--e-out); }
.cv-proj a:hover{ padding-left:.6rem; }
.cv-proj__t{ font-size:1rem; font-weight:500; letter-spacing:-.014em; }
.cv-proj a:hover .cv-proj__t{ color:var(--bronze); }
.cv-proj__m{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.08em;
  color:var(--ink-faint); text-align:right; }
.cv-role{ font-size:1.0625rem; font-weight:500; letter-spacing:-.016em; margin:0; }
.cv-contact{ list-style:none; margin:0; padding:0; }
.cv-contact li{ display:flex; flex-wrap:wrap; gap:.3rem 1.5rem; padding:.55rem 0;
  border-bottom:1px solid var(--rule-soft); }
.cv-contact .k{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); min-width:7rem; }
.cv-contact .v{ font-size:.9375rem; }
.cv-block .body{ margin-top:1.25rem; }
.award .t-caption{ color:var(--ink-faint); }

@media (max-width:720px){
  .stat{ border-right:0; border-bottom:1px solid rgba(242,240,235,.12); }
  .soft{ grid-template-columns:1fr; gap:.35rem; }
  .cv-proj__m{ text-align:left; }
}
@media print{
  .stat-band{ display:none; }
  .cv-top .btn-row{ display:none; }
}

/* Archive group headings */
.group-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding-bottom:.85rem; border-bottom:1px solid var(--rule);
  margin:clamp(3rem,6vw,5rem) 0 clamp(1.75rem,3.5vw,2.75rem);
}
.group-head:first-child{ margin-top:0; }

/* ============================================================
   30  SHOTS — natural aspect ratio, nothing cropped
   ============================================================ */

/* An "auto" frame takes the proportions of whatever image is dropped in.
   No aspect-ratio, no object-fit cover, no crop. */
.frame[data-ratio="auto"]{ aspect-ratio:auto; }
.frame[data-ratio="auto"] img{ width:100%; height:auto; object-fit:contain; display:block; }
.frame[data-ratio="auto"] .ph{ position:relative; inset:auto; min-height:230px; }

/* Lead shot: full width, its own height */
.shots-lead{ margin-bottom:clamp(.6rem,1.2vw,1.25rem); }
.shots-lead .shot{ width:100%; }

/* The rest flow as masonry columns — mixed portrait, landscape, square and
   competition boards all sit together without gaps or cropping. */
.shots{
  display:block;
  columns:3;
  column-gap:clamp(.6rem,1.2vw,1.25rem);
  grid-template-columns:none;
}
.shots .shot{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  margin:0 0 clamp(.6rem,1.2vw,1.25rem);
  display:block;
  width:100%;
}
@media (max-width:1100px){ .shots{ columns:2; } }
@media (max-width:640px){ .shots{ columns:1; } }

/* Tall images (competition boards, elevations) get a sensible ceiling so one
   board can't take over the whole column. */
.shot .frame img{ max-height:none; }
.shots-lead .frame img{ max-height:88svh; margin-inline:auto; width:auto; max-width:100%; }

/* Lightbox shows the real image at its own proportions */
.lightbox__stage{ align-items:center; justify-content:center; }
.lightbox__img{
  display:block; margin:auto; max-width:100%; max-height:calc(100svh - 8rem);
  width:auto; height:auto; object-fit:contain;
  transform-origin:center; transition:transform var(--t-mid) var(--e-out);
}
.lightbox__stage > *{ width:auto; max-width:100%; }
.lightbox__empty{
  font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.1em;
  text-transform:uppercase; color:rgba(242,240,235,.55);
}

/* Notice shown only when a page finds no images at all */
.img-note{
  position:fixed; left:50%; bottom:1.25rem; transform:translateX(-50%);
  z-index:65; max-width:min(46rem,calc(100vw - 2rem));
  background:var(--charcoal); color:var(--ivory);
  border:1px solid var(--bronze); padding:1rem 1.15rem;
  font-size:.9375rem; line-height:1.55;
  display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center;
  animation:fade-up .5s var(--e-out) both;
}
.img-note strong{ font-weight:500; color:var(--bronze); }
.img-note code{
  font-family:var(--mono); font-size:.85em; background:rgba(242,240,235,.12);
  padding:.15rem .4rem; letter-spacing:.02em;
}
.img-note button{
  margin-left:auto; background:none; border:1px solid rgba(242,240,235,.4);
  color:var(--ivory); padding:.4rem .8rem; cursor:pointer;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase;
}
.img-note button:hover{ background:var(--ivory); color:var(--charcoal); }
@media print{ .img-note{ display:none !important; } }

/* ============================================================
   31  CARDS AT NATURAL PROPORTIONS — no cropped previews
   ============================================================ */

/* Before an image loads (or if a slot is empty) hold a sensible box so the
   layout never collapses. Once loaded, JS sets the real ratio inline. */
.frame[data-ratio="auto"]:not(.has-image){ aspect-ratio:4 / 3; }
.frame[data-ratio="auto"].is-empty-hero{ aspect-ratio:4 / 3; }

/* Archive: masonry so portrait boards and wide renders sit together */
.card-masonry{
  columns:3;
  column-gap:clamp(1.25rem,2.4vw,2.5rem);
}
.card-masonry .card{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  display:block; width:100%;
  margin:0 0 clamp(2.5rem,4.5vw,4rem);
}
@media (max-width:1100px){ .card-masonry{ columns:2; } }
@media (max-width:640px){ .card-masonry{ columns:1; } }

/* Homepage sequence: the editorial column rhythm stays, heights follow the image */
.work-seq{ align-items:start; }
.work-seq .card .frame[data-ratio="auto"] img{ width:100%; height:auto; }

/* Floating index preview also keeps its proportions */
.float-preview .frame[data-ratio="auto"]:not(.has-image){ aspect-ratio:4 / 3; }

/* Making: one to three images per set, shown at their own size */
.make-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(1rem,2vw,1.75rem);
  align-items:start;
}
.make-grid .shot{ margin:0; }
.make-set .shots-head{ margin-bottom:clamp(1.5rem,3vw,2.25rem); }

/* Anchored sections clear the fixed navigation bar */
.make-set, .int-set, [id]:target{ scroll-margin-top:calc(var(--nav-h) + 1.5rem); }