/* =====================================================================================================
   MARTIN JAGO: design system lock (Gate 1). First set 10 Oct 2026 for the one-page demo; carried into the
   multi-page portfolio rebuild 18 Oct 2026 (owner-confirmed direction, OWNER-NOTES.md, 17 Oct 2026: a showreel and portfolio with behind-the-scenes photos).
   ROUND 3, 24 Oct 2026 (owner by SMS and his layout template and Read Me, OWNER-NOTES.md): the dark site stays ("I
   like the dark site you built"), his sketch shows through underneath at about 10 percent, the feel is an online
   portfolio rather than a hard sell, the home page is a simpler landing that opens onto the chapters, and the
   project page follows his layout: tracked-caps title, a rule, company and dates, left column (supervisor, role,
   description, video), right column (poster or logo), a scrolling image bar that enlarges on hover and opens full
   screen on click, his social icons at the foot.

   BASE TONE: dark, by STANDARD's Design system lock rule for a category that sells on premium aesthetics
   (creature effects and animatronics for film, TV and the stage; conversion-psychology-notes.md principle 6), and
   by the owner's own choice in round 3. A matte, warm near-black page (not blue-black), machined steel-grey
   hairlines and frames, off-white text, and his own two masthead blues: the light blue of his old tagline
   (#83A8F0) as the one accent, the mid blue of his old name (#3B5EB6) for the filled button only. No noise, no
   vignettes, no drop shadows, no blend modes: the photographs of the mechanisms carry the texture.

   TYPE PAIRING PROTOCOL (Website Builder/references/type-pairing.md), answered against his wordmark as set on
   the old Wix masthead, because no logo file exists (re-run 18 Oct 2026, same answers; round 3 adds his template's
   widely tracked caps titles, which Antonio 600 carries as end-credits title cards):
   1. Logotype class: geometric sans (proxima-nova), set lower case "martin jago"; round o, single-storey g.
   2. Width and weight: normal width, regular weight.
   3. Register: film and TV crew, end credits and title cards; premium craft, matter of fact.
   4. Display: Antonio 700 and 600, a tall condensed grotesque, chosen by register (end-credits energy); the old
      masthead is a template default with no brand equity. Caps with wide tracking for production names and the
      project titles, normal case for sentences; H1 line-height 1.02 to 1.12, tracking 0 to .14em.
   5. Body: Work Sans 400 and 600, a quiet grotesque with a large x-height, 17px, line-height 1.7.
   6. Test sheet: _audit/type-test.jpg. Ratings: Antonio + Work Sans 9 (reads like a title sequence, the credits
      line looks like end credits); Sofia Sans Extra Condensed + Sofia Sans 8 (H1 cramped at 800); IBM Plex
      Sans Condensed + IBM Plex Sans 7.5 (reads as documentation). The 9 is used.

   CONTRAST (WCAG 1.4.3, computed from the hexes below)
   on --ink #0F0E0D:  --text 15.8:1, --muted 7.7:1, --dim 6.0:1, --accent 8.1:1
   on --bar #080807:  --text 16.4:1, --muted 8.0:1, --dim 6.2:1, --accent 8.4:1
   on --panel #161615: --text 14.8:1, --muted 7.2:1, --dim 5.6:1, --accent 7.6:1
   on --card #1C1D1F: --text 13.8:1, --muted 6.7:1, --dim 5.3:1, --accent 7.1:1
   button text #F4F6FB on --cta #3B5EB6: 5.6:1 (hover #4568C2: 4.8:1)
   --cta against --ink 3.2:1, edged with a 1px #7D9BE6 line (WCAG 1.4.11 non-text contrast 3:1)
   round 3 watermark, worst case where a pure white sketch line at 10 percent crosses text (#272625 on --ink):
   --text 12.4:1, --muted 6.0:1, --dim 4.7:1, --accent 6.3:1; the fallback mechanism drawing strokes at 11 percent
   (no darker case). Lightbox: --text and --muted on --bar at .97 (16.4:1, 8.0:1); its round buttons sit on a .7
   bar plate (icons 5.6:1 over the brightest photo, WCAG 1.4.11). Play button text on its .82 plate over a white
   still: 10.2:1.
   Caption plates sit on --card or --bar, never on a photograph. The home band copy sits on the black of the
   letterbox on desktop and below the photo on phones. Photos are darkened in CSS only (brightness plus
   gradients), never baked into the files; his drawings are inverted in CSS to light line art (data pass, 25 Oct 2026:
   his two scanned sketches, HP2 and HP3, have their paper set to white in the file to keep it light; lines untouched).

   UX LAWS behind the layout (Laws of UX, Jon Yablonski)
   Jakob's Law: brand left, his menu where people expect it, breadcrumbs above every inner title, the footer icons
   where his template puts them.
   Hick's Law: the home page offers seven chapters and nothing else; one quiet contact link in the menu.
   Miller's Law: projects chunked by medium, newest first; credits chunked into periods; seven chapter tiles.
   Fitts's Law: every target 48px or more; prev and next links span half the row on phones; lightbox arrows 52px.
   Law of Common Region: cards are a frame within a frame (a hairline and a second hairline inset 6px).
   Law of Uniform Connectedness: rules above and below the company and dates line tie it to the title (his template).
   Serial position effect: the strongest credits open and close the credits crawl.
   Von Restorff effect: the filled mid-blue button is the only element in that colour on a page.
   Doherty threshold: photos enlarge on hover and open at once; nothing waits on a script.

   MOTIF: one armature line drawing (a four-bar linkage with pivot dots), in the footer, on the contact page and
   between the periods of the credits table.
   CRAFT BACKDROP (main-session direction, 10 Oct 2026): (1) a machined aluminium tile, /img/tex-metal.webp, cut from his own CNC
   stilt plate photo (raw/media/files/078_w_307), 256px, 2 KB, under a 90 percent layer of the surface colour on
   the chapter tiles and the contact cards; worst case under the brightest tile pixel the
   surface reads #28292B on cards (--text 11.9:1, --muted 5.8:1, --dim 4.53:1, --accent 6.1:1). (2) a CAD sheet:
   a cutting-mat grid in steel hairlines (3.5 and 7.5 percent) with line drawings of mechanisms he builds
   (four-bar linkage, cam and follower, compression spring, servo horn, rack and pinion), one inline symbol set,
   in margins and beside headings. (3) ROUND 3, the owner's watermark: on every project page his sketch or design
   drawing sits behind the page at about 10 percent as light line art (his Read Me: "approx. 10% opacity"); until
   he supplies one, one of the five mechanism drawings, drawn large, does the same job over the grid (data pass,
   25 Oct 2026: HP2, HP3 and HP4 carry his own drawings).
   Nothing animated but the credits crawl and hover states; no blend modes, no noise filters.
   ===================================================================================================== */
:root{
  --ink:#0F0E0D; --bar:#080807; --panel:#161615; --card:#1C1D1F; --steel:#4A4D52;
  --rule:rgba(168,174,184,.24); --rule-soft:rgba(168,174,184,.12);
  --text:#ECE8E1; --muted:#A8A39A; --dim:#948F86; --accent:#83A8F0;
  --cta:#3B5EB6; --cta-hi:#4568C2; --cta-edge:#7D9BE6; --cta-ink:#F4F6FB;
  --display:"Antonio","Arial Narrow","Roboto Condensed",sans-serif;
  --body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:clamp(4rem,9vw,7.5rem);
  --hdr:84px; --strip:58px; --gap:6px; --ease:cubic-bezier(.2,.7,.2,1);
  --grid-a:rgba(168,174,184,.075); --grid-b:rgba(168,174,184,.035);
  --edge:max(1rem,calc((100% - 1240px)/2));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdr)}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:1.0625rem;line-height:1.7;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:.005em;color:var(--text)}
h2{font-size:clamp(2.1rem,4.8vw,3.3rem)}
h3{font-size:1.5rem;line-height:1.1}
h1 em,h2 em{font-style:normal;color:var(--accent)}
section[id]{scroll-margin-top:var(--hdr)}
.wrap{width:min(1240px,100% - 2rem);margin-inline:auto}
.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}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--accent);color:var(--bar);padding:.8rem 1.1rem;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.eyebrow{font-weight:600;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
.lede{color:var(--muted);font-size:1.125rem;max-width:60ch}
.lead{font-size:clamp(1.12rem,2vw,1.28rem);line-height:1.6;max-width:62ch}
.mini{font-family:var(--body);font-weight:600;font-size:.72rem;line-height:1.4;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin:0 0 .9rem}

/* buttons: 48px and up (WCAG 2.5.8, Fitts's Law); square corners like a film frame */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:52px;padding:.85rem 1.4rem;border:1px solid transparent;border-radius:0;font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;line-height:1.2;text-align:center;transition:transform .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cta);border-color:var(--cta-edge);color:var(--cta-ink)}
.btn-primary:hover{background:var(--cta-hi)}
.btn-line{background:transparent;border-color:var(--rule);color:var(--text)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.ctas{display:flex;flex-direction:column;gap:.7rem;margin-top:1.6rem}
@media (min-width:560px){.ctas{flex-direction:row;flex-wrap:wrap}}
.tlink{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;min-width:48px;font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--accent)}
.tlink:hover{color:var(--text)}
.tlink svg{width:16px;height:16px;flex:none}

/* his social profiles as labelled icon links: footer, mobile menu */
.soc{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.soc a{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:.5rem 1rem .5rem .8rem;border:1px solid var(--rule);text-decoration:none;font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text);transition:border-color .2s var(--ease),color .2s var(--ease)}
.soc a:hover{border-color:var(--accent);color:var(--accent)}
.soc svg{width:22px;height:22px;flex:none}

/* header: the top letterbox bar; his eight labels and one quiet email link from 1240px, the menu below that */
.hdr{position:relative;z-index:40;background:var(--bar);border-bottom:1px solid var(--rule-soft)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;min-height:var(--hdr);padding-right:3.6rem}
.brand{display:inline-flex;flex-direction:column;justify-content:center;gap:.38rem;text-decoration:none;padding:.5rem 0}
.brand .wm{font-family:var(--display);font-weight:700;font-size:2.1rem;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.brand .tag{font-weight:600;font-size:.66rem;line-height:1.2;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.nav{display:none}
@media (max-width:359px){.brand .tag{font-size:.6rem;letter-spacing:.15em}}
@media (min-width:1240px){
  .hdr{position:sticky;top:0}
  .hdr .wrap{padding-right:0}
  .brand .tag{letter-spacing:.24em}
  .nav{display:flex;align-items:center;gap:1.2rem;margin-left:auto}
  .nav ul{display:flex;gap:1.05rem;list-style:none;margin:0;padding:0}
  .nav ul a{position:relative;display:inline-flex;align-items:center;min-height:48px;text-decoration:none;font-weight:600;font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);transition:color .2s var(--ease)}
  .nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--text)}
  .nav ul a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--accent)}
  .hdr-mail{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding-left:1.2rem;border-left:1px solid var(--rule);text-decoration:none;font-weight:600;font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);transition:color .2s var(--ease)}
  .hdr-mail svg{width:17px;height:17px;flex:none}
  .hdr-mail:hover{color:var(--text)}
}
@media (min-width:1400px){.nav ul{gap:1.35rem}.nav ul a,.hdr-mail{letter-spacing:.17em}}

/* mobile menu: CSS :target first, a JS class on top */
.menu-btn{position:fixed;top:18px;right:12px;z-index:70;display:grid;place-content:center;gap:6px;width:48px;height:48px;background:var(--bar);border:1px solid var(--rule)}
.menu-btn span{display:block;width:20px;height:2px;background:var(--text)}
.menu-btn span+span{width:14px;justify-self:end;background:var(--accent)}
@media (min-width:1240px){.menu-btn,.mmenu{display:none!important}}
.mmenu{position:fixed;inset:0;z-index:80;display:none;flex-direction:column;padding:6rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));overflow-y:auto;background:var(--bar)}
.mmenu:target,.menu-open .mmenu{display:flex}
.mmenu .brand{position:absolute;top:12px;left:1rem}
.mclose{position:absolute;top:18px;right:12px;width:48px;height:48px;border:1px solid var(--rule)}
.mclose span{position:absolute;left:13px;top:23px;width:20px;height:2px;background:var(--text);transform:rotate(45deg)}
.mclose span+span{transform:rotate(-45deg)}
.mmenu ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-soft)}
.mmenu li a{display:flex;align-items:center;min-height:54px;padding:.25rem 0;border-bottom:1px solid var(--rule-soft);text-decoration:none;font-family:var(--display);font-weight:600;font-size:1.4rem;letter-spacing:.07em;text-transform:uppercase}
.mmenu li a[aria-current="page"]{color:var(--accent)}
.mmenu .soc{border:0}
.mmenu .soc a{font-family:var(--body);font-size:.72rem;min-height:52px;border:1px solid var(--rule);padding:.5rem .9rem .5rem .7rem}
.mm-ctas{display:grid;gap:1rem;margin-top:auto;padding-top:1.6rem}
.menu-open{overflow:hidden}

/* home: the letterbox, now a quieter band. Phones: the photo, then his name and one line below it, never over the
   mechanism. Desktop: a 3:1 band, the words on the black at the left, the photo in the right part of the frame,
   never shown larger than its own pixels. */
.hero{position:relative;background:var(--bar)}
.frame{position:relative;background:var(--bar)}
.frame .shot{position:relative;display:block;margin:0}
.frame .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%;filter:brightness(.7) saturate(.92)}
.frame .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,7,0) 55%,rgba(8,8,7,.55) 82%,var(--bar) 100%);pointer-events:none}
.frame .copy{position:relative;isolation:isolate;padding:1.1rem 0 2.6rem}
/* craft backdrop in the letterbox: the cutting-mat grid at low strength on the black copy panel */
.frame::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(168,174,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(168,174,184,.05) 1px,transparent 1px),linear-gradient(rgba(168,174,184,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(168,174,184,.022) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
.hero-art{right:0;bottom:-.5rem;width:110px;height:110px}
.hero h1 .nm{display:block;font-size:clamp(3rem,14vw,4.6rem);line-height:.96;letter-spacing:.05em;text-transform:uppercase}
.hero h1 .ln{display:block;margin-top:.75rem;font-weight:600;font-size:clamp(1.3rem,5.6vw,1.75rem);line-height:1.18;letter-spacing:.02em;color:var(--accent);max-width:24ch}
@media (min-width:960px){
  /* a 3:1 band by height, not aspect-ratio: a min-height on an aspect-ratio box widens it past the viewport */
  .frame{display:flex;align-items:center;height:min(clamp(400px,33.34vw,560px),calc(100svh - var(--hdr) - var(--strip) - 110px));min-height:340px;overflow:hidden;border-bottom:1px solid var(--rule-soft)}
  .frame .shot{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(60%,1600px);height:100%}
  .frame .shot img{height:100%;aspect-ratio:auto;object-position:0% 42%;filter:brightness(.64) saturate(.9);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);mask-image:linear-gradient(90deg,transparent 0,#000 14%)}
  .frame .shot::after{background:linear-gradient(180deg,rgba(8,8,7,.35) 0,rgba(8,8,7,0) 22%,rgba(8,8,7,0) 62%,rgba(8,8,7,.7) 100%)}
  .frame .copy{position:relative;z-index:1;padding:2rem 0}
  .frame .copy>h1{max-width:min(36rem,38vw)}
  .hero h1 .nm{font-size:clamp(3.6rem,5.3vw,5.5rem)}
  .hero h1 .ln{margin-top:.9rem;font-size:clamp(1.4rem,1.8vw,1.85rem);max-width:26ch}
  .hero-art{right:auto;left:0;bottom:calc(-6.6rem - 30px);width:200px;height:200px}  /* fix pass 30 Oct: starts below the subtitle */
}

/* breadcrumbs */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .55rem;list-style:none;margin:0;padding:0;font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
/* fix pass 30 Oct: the separator trails the crumb before it and stays on its line, so no line starts with "/" */
.crumbs li:not(:last-child){white-space:nowrap}
.crumbs li:not(:last-child)::after{content:"/";margin-left:.55rem;color:var(--steel)}
.crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--accent)}

/* the credits crawl in the bottom bar: production names only, paused on hover, by its button, and still under
   reduced motion; every name is in the HTML */
.strip{position:relative;display:flex;align-items:center;gap:.6rem;min-height:var(--strip);background:var(--bar);border-bottom:1px solid var(--rule-soft);padding:0 .5rem}
.strip-label{flex:none;padding-left:.5rem;font-weight:600;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.strip-view{position:relative;flex:1;min-width:0;overflow:hidden;display:flex;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.strip-track{display:flex;flex:none;align-items:center;margin:0;padding:0;list-style:none;animation:crawl 120s linear infinite}
.strip-track li{flex:none;padding:0 1.6rem;font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap;border-left:1px solid var(--rule-soft)}
@keyframes crawl{to{transform:translateX(-100%)}}
.strip-view:hover .strip-track,.strip-toggle:checked~.strip-view .strip-track{animation-play-state:paused}
.strip-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:52px;min-height:48px;padding:0 .7rem;border:1px solid var(--rule);cursor:pointer;font-weight:600;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.strip-btn .r{display:none}
.strip-toggle:checked+.strip-btn .p{display:none}
.strip-toggle:checked+.strip-btn .r{display:inline}
.strip-toggle:focus-visible+.strip-btn{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:599px){.strip-label{display:none}}

/* sections */
.block{padding-block:var(--s6)}
.block.tight{padding-top:0}
.band{background:var(--panel);border-block:1px solid var(--rule-soft)}
.arm{fill:none;stroke:var(--steel);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.arm .pv{fill:var(--ink);stroke:var(--accent)}
.arm .gl{stroke-dasharray:3 4}
/* a small heading between hairlines, like the rules on his template */
.ruled,.ruled-l{display:flex;align-items:center;gap:1.2rem;font-family:var(--body);font-weight:600;font-size:.78rem;line-height:1.2;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.ruled::before,.ruled::after,.ruled-l::after{content:"";flex:1;height:1px;background:var(--rule)}
.ruled{margin:0 0 clamp(1.4rem,3vw,2.2rem)}

/* craft backdrop 1: the machined aluminium tile, always under a 90 percent layer of the surface colour */
.metal{background:linear-gradient(rgba(28,29,31,.9),rgba(28,29,31,.9)),url(/img/tex-metal.webp) 0 0/256px 256px repeat,var(--card)}
/* craft backdrop 2: the CAD sheet */
.cad{position:relative;isolation:isolate;overflow:hidden}
.cad::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(var(--grid-a) 1px,transparent 1px),linear-gradient(90deg,var(--grid-a) 1px,transparent 1px),linear-gradient(var(--grid-b) 1px,transparent 1px),linear-gradient(90deg,var(--grid-b) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
.cad.light{--grid-a:rgba(168,174,184,.05);--grid-b:rgba(168,174,184,.022)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
/* centre lines dash-dot, like an engineering drawing (styles on the symbols reach every <use> of them) */
.defs .cl{stroke-dasharray:6 4 1 4}
.cad-d{position:absolute;z-index:-1;pointer-events:none;fill:none;stroke:rgba(168,174,184,.2);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.up-art{display:none}
@media (min-width:900px){
  .up-art{display:block}
  .edge-art{width:230px;height:230px;bottom:-2.5rem}
  .edge-art.bl{left:calc((100% - 1240px)/2 - 150px)}
  .edge-art.br{right:calc((100% - 1240px)/2 - 150px)}
}

/* cards: a frame within a frame, never a shadow */
.framed{position:relative;background:var(--card);border:1px solid var(--rule)}
.framed::after{content:"";position:absolute;inset:var(--gap);border:1px solid var(--rule-soft);pointer-events:none}

/* tiles: the home chapters (photo or drawing) and the Profile page's text tiles */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;list-style:none;margin:0;padding:0}
@media (min-width:640px){.tiles{gap:1.25rem}}
@media (min-width:1100px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;height:100%;text-decoration:none;transition:border-color .2s var(--ease)}
.tile:hover{border-color:var(--accent)}
.tile .ph{display:block;padding:var(--gap) var(--gap) 0;overflow:hidden}
.tile .ph img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:brightness(.82);transition:transform .5s var(--ease)}
.tile:hover .ph img{transform:scale(1.03)}
/* his drawings as light line art on the dark card, the way the project pages show his sketches */
.tile.draw .ph img{filter:grayscale(1) invert(.9)}
.tile .tplate{display:grid;gap:.3rem;padding:.8rem .9rem 1rem}
.tile .tplate b{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,4.4vw,1.9rem);line-height:1.05;letter-spacing:.05em;text-transform:uppercase}
.tile .tplate span{font-family:var(--display);font-weight:600;font-size:clamp(.74rem,2.5vw,.95rem);line-height:1.35;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-wrap:balance}
@media (min-width:640px){.tile .tplate{padding:1rem 1.2rem 1.25rem}}
@media (min-width:1100px){.tile .tplate b{font-size:1.75rem}}
.chapters{padding-top:clamp(2.4rem,6vw,4.2rem);padding-bottom:clamp(3.5rem,8vw,6rem)}
.ch7 .t7{grid-column:1/-1}
.ch7 .t5 .ph img,.ch7 .t6 .ph img{aspect-ratio:1/1}
.ch7 .t7 .ph img{aspect-ratio:16/9}
@media (min-width:1100px){
  .ch7{grid-template-columns:repeat(12,minmax(0,1fr))}
  .ch7 li{grid-column:span 3}
  .ch7 .t5,.ch7 .t6,.ch7 .t7{grid-column:span 4}
  .ch7 .t5 .ph img,.ch7 .t6 .ph img,.ch7 .t7 .ph img{aspect-ratio:16/10}
}

/* category grid: 16:9 photo cards with a caption plate; a drawn slate where a project has no photo yet */
.grid{display:grid;gap:1.25rem;list-style:none;margin:0;padding:0}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{height:100%}
.card>a,.card>.cbody{display:flex;flex-direction:column;height:100%;text-decoration:none}
.card:not(.still):hover{border-color:var(--accent)}
.card .ph{position:relative;display:block;padding:var(--gap) var(--gap) 0}
.card .ph img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:brightness(.85)}
/* his poster on every card (6 Nov 2026, his i; square box): whole on the slate ground, never cropped; a photo only where a poster is missing or held */
.card .ph.pst img{object-fit:contain;background-color:var(--bar);background-image:linear-gradient(rgba(168,174,184,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(168,174,184,.075) 1px,transparent 1px);background-size:24px 24px}
.card .slate{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem;aspect-ratio:1/1;padding:1rem 1.1rem;overflow:hidden;background-color:var(--bar);background-image:linear-gradient(rgba(168,174,184,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(168,174,184,.075) 1px,transparent 1px),linear-gradient(rgba(168,174,184,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(168,174,184,.035) 1px,transparent 1px);background-size:60px 60px,60px 60px,12px 12px,12px 12px}
.card .slate .y{position:relative;z-index:1;font-family:var(--display);font-weight:700;font-size:2.6rem;line-height:1;letter-spacing:.04em;color:var(--text);font-variant-numeric:tabular-nums}
.card .slate .r{position:relative;z-index:1;font-weight:600;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.card .slate svg{position:absolute;right:-.4rem;top:-.4rem;width:45%;height:auto;aspect-ratio:1;fill:none;stroke:rgba(168,174,184,.26);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.card .plate{flex:1;display:grid;align-content:start;gap:.35rem;padding:.95rem 1.2rem 1.25rem}
.card .plate b{font-family:var(--display);font-weight:600;font-size:1.22rem;line-height:1.15;letter-spacing:.07em;text-transform:uppercase}
.card .plate span{font-size:.9rem;line-height:1.45;color:var(--muted)}
/* Gate 6 verbatim company blocks stay inline in the card plates */
.plate .meta{display:block;font-size:.9rem;line-height:1.45;color:var(--muted)}
.plate .meta .co{display:inline}

/* end-credits rows: latest work and credits without a page, on the category pages */
.xcredits{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-soft)}
.xcredits li{border-bottom:1px solid var(--rule-soft)}
.xcredits a{display:grid;gap:.2rem;padding:.9rem 0;text-decoration:none}
@media (min-width:760px){.xcredits a{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:2rem;align-items:baseline}}
.xcredits b{font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.18;letter-spacing:.1em;text-transform:uppercase;transition:color .2s var(--ease)}
.xcredits a:hover b{color:var(--accent)}
.xcredits span{color:var(--muted);font-size:.98rem}
.xhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1.4rem;margin-bottom:1.2rem}
.xhead h2{font-size:clamp(1.6rem,3.4vw,2.2rem);letter-spacing:.04em}

/* inner page heads (category, profile, credits, contact) */
.phead{padding:clamp(2.2rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.5rem);background:var(--bar);border-bottom:1px solid var(--rule-soft)}
.phead h1{margin-top:.8rem;font-size:clamp(2.6rem,9vw,5rem);line-height:1.02;letter-spacing:.01em;text-wrap:balance}
.phead .lede{margin-top:1rem}
.phead .kicker{margin-top:1.2rem;font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.phead-art{right:-2rem;top:1.5rem;width:150px;height:150px}
@media (min-width:900px){.phead-art{right:max(2rem,calc((100% - 1240px)/2 + 2rem));top:2rem;width:250px;height:250px}}

/* his words: verbatim blocks with their source label */
.said{margin:0}
.said figcaption{font-weight:600;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-bottom:.7rem}
.said .q{margin:0;padding:0 0 0 1.2rem;border-left:2px solid var(--accent)}
.said .q p{max-width:66ch}
.said .q p+p{margin-top:1rem}
.said .hd{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.said .mt{font-size:.9rem;color:var(--dim)}
.said+.said{margin-top:1.8rem}
.nowords{color:var(--muted);max-width:60ch}

/* project page v2 (round 3, his layout). The watermark: his sketch, or a mechanism drawing, behind the page */
.pv2{position:relative;isolation:isolate;overflow:hidden}
.pv2::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(168,174,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(168,174,184,.05) 1px,transparent 1px),linear-gradient(rgba(168,174,184,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(168,174,184,.022) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
.sketch{position:absolute;inset:0;z-index:-1;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000 calc(100% - 14rem),transparent);mask-image:linear-gradient(#000 calc(100% - 14rem),transparent)}
.sk-img{width:min(100%,var(--nw),1240px);height:auto;opacity:.1;filter:grayscale(1) invert(1) contrast(1.5)}
.sk-img.sk-photo{opacity:.14;filter:grayscale(1) contrast(1.15)}
.sk-cad{flex:none;width:min(1000px,150vw);height:min(1000px,150vw);margin-top:clamp(.5rem,5vw,3.5rem);fill:none;stroke:rgba(236,232,225,.11);stroke-width:.3;stroke-linecap:round;stroke-linejoin:round}
/* title, a rule, company and dates on one line, a rule (his template), the one-sentence lede */
.ptitle{padding:clamp(1.2rem,3.5vw,2.4rem) 0 0;text-align:center}
.ptitle .crumbs ol{justify-content:center}
.ptitle h1{margin:clamp(.4rem,1.6vw,1rem) auto 0;max-width:31ch;font-weight:600;font-size:clamp(1.85rem,4.4vw,3.45rem);line-height:1.14;letter-spacing:.14em;text-transform:uppercase;text-wrap:balance}
.pmeta,.prule{margin:clamp(1.4rem,3vw,2.1rem) 0 0;border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.prule{height:0;border-bottom:0}
.pmeta{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.95rem 0;font-weight:600;font-size:.78rem;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pmeta .sep{display:none}
@media (min-width:640px){
  .pmeta{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.35rem 1.1rem}
  .pmeta .sep{display:block;flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent)}
}
.ptitle .lede{margin:1.3rem auto 0;max-width:60ch;font-size:1.06rem}
/* left column (supervisor, role, his words, video) and the right column (poster), one centred column without one */
.pcols{padding:clamp(1.4rem,3.5vw,2.4rem) 0 clamp(2.2rem,5vw,3.4rem)}
.pcgrid{border-top:1px solid var(--rule-soft);padding-top:clamp(1.5rem,3.5vw,2.4rem)}
.pleft{max-width:46rem;margin-inline:auto}
.pcgrid.has-poster{display:grid;gap:2rem}
.pcgrid>*{min-width:0}
@media (min-width:900px){
  .pcgrid.has-poster{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2.4rem,5vw,4.5rem);align-items:start}
  .pcgrid.has-poster .pleft{max-width:none;margin-inline:0}
}
.sup{display:inline-block;margin-bottom:1.1rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule);font-weight:600;font-size:.8rem;line-height:1.45;letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.prole{margin-bottom:1.2rem;font-family:var(--body);font-weight:600;font-size:.98rem;line-height:1.45;letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.oldmenu{margin-top:1.4rem;font-size:.9rem;color:var(--dim)}
/* his notes for the new site (data pass): plain paragraphs under his role line, as his layout sets them */
.pdesc p{max-width:62ch}
.pdesc p+p{margin-top:1rem}
.pright{width:100%;max-width:420px;justify-self:center}
.poster{margin:0;padding:var(--gap)}
.poster img{width:100%;height:auto}
/* the video bar (data pass, 25 Oct 2026): his clips as 16:9 tiles that scroll sideways in the left column, two to a
   row from 560px; each tile links to YouTube and site.js swaps in the privacy-enhanced player on click and asks for full
   screen (his Read Me: enlarge on roll over, full screen on click). The still is one of the page's own photos, darkened
   in CSS, or a mechanism drawing on the CAD grid. Hover lifts the tile and zooms the still: transform only. */
.vwin{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--rule-soft)}
.vstrip{display:flex;gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;list-style:none;margin:0;padding:.5rem 0 1rem;scrollbar-width:thin;scrollbar-color:var(--steel) transparent}
.vstrip li{flex:none;width:min(82%,21rem);scroll-snap-align:start}
@media (min-width:560px){.vstrip li{width:calc(50% - .5rem)}}
.vstrip.one li{width:100%}
.vbox{padding:var(--gap);transition:transform .35s var(--ease),border-color .2s var(--ease)}
.vstrip li:hover .vbox,.vbox:focus-within{transform:translateY(-4px);border-color:var(--accent)}
.vplay{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bar);text-decoration:none}
.vstill,.vstill img{display:block;width:100%;height:100%}
.vstill img{object-fit:cover;filter:brightness(.6);transition:transform .5s var(--ease)}
.vplay:hover .vstill img,.vplay:focus-visible .vstill img{transform:scale(1.06)}
.vslate{display:block;width:100%;height:100%;fill:none;stroke:rgba(168,174,184,.28);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;background-image:linear-gradient(rgba(168,174,184,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(168,174,184,.075) 1px,transparent 1px),linear-gradient(rgba(168,174,184,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(168,174,184,.035) 1px,transparent 1px);background-size:60px 60px,60px 60px,12px 12px,12px 12px}
.vbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:.8rem 1.2rem;background:rgba(8,8,7,.82);border:1px solid var(--accent);color:var(--text);font-weight:600;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:transform .2s var(--ease)}
.vbtn svg{width:20px;height:20px;color:var(--accent)}
.vplay:hover .vbtn{transform:translate(-50%,-50%) scale(1.04)}
.vbox iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.vbox .vlocal{display:block;width:100%;aspect-ratio:16/9;background:#000;object-fit:contain}
.vcap{margin-top:.55rem;font-size:.86rem;line-height:1.45;color:var(--muted)}
.vtag{margin-top:.15rem;font-size:.76rem;letter-spacing:.06em;color:var(--dim)}
/* the scrolling image bar: full width, first photo aligned with the page edge; enlarge on hover (transform only) */
.pbar{padding:clamp(.4rem,2vw,1rem) 0 clamp(2.4rem,5vw,3.6rem)}
.g-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.4rem}
.g-head .ruled-l{flex:1;min-width:14rem}
.swipe{font-size:.82rem;color:var(--dim)}
.pstrip{display:flex;align-items:flex-start;gap:1.1rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);list-style:none;margin:0;padding:1rem var(--edge) 1.2rem;scrollbar-width:thin;scrollbar-color:var(--steel) transparent}
.pstrip li{display:table;flex:none;scroll-snap-align:start}
.pg-a{display:block;text-decoration:none}
.pstrip .shotf{display:block;overflow:hidden;padding:var(--gap);background:var(--card);border:1px solid var(--rule);transition:transform .35s var(--ease),border-color .2s var(--ease)}
.pstrip img{height:clamp(200px,32vw,340px);width:auto;max-width:calc(100vw - 2rem - 14px);object-fit:cover;transition:transform .5s var(--ease)}
.pg-a:hover .shotf,.pg-a:focus-visible .shotf{transform:translateY(-4px);border-color:var(--accent)}
.pg-a:hover img,.pg-a:focus-visible img{transform:scale(1.06)}
.pg-cap{display:table-caption;caption-side:bottom;padding:.55rem .2rem 0;font-size:.86rem;line-height:1.45;color:var(--muted)}
/* full screen: CSS :target, with JavaScript off too; site.js opens the same box without a jump and adds keys and swipe */
.lb{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:4.4rem 1rem 1.4rem;background:rgba(8,8,7,.97)}
.lb:target,.lb.is-open{display:grid}
.lb-f{display:grid;justify-items:center;gap:.8rem;margin:0;max-width:100%}
.lb-img{width:auto;height:auto;max-width:min(100%,var(--nw));max-height:calc(100svh - 9.5rem);object-fit:contain}
.lb-f figcaption{max-width:60ch;text-align:center;font-size:.92rem;line-height:1.5;color:var(--muted)}
.lb-x{position:absolute;top:.8rem;right:.8rem;display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.5rem .95rem;border:1px solid var(--rule);background:rgba(8,8,7,.7);text-decoration:none;font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.lb-x svg{width:18px;height:18px;flex:none}
.lb-nav{position:absolute;top:50%;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;border:1px solid var(--rule);background:rgba(8,8,7,.7);color:var(--text)}
.lb-nav svg{width:24px;height:24px}
.lb-prev{left:.6rem}
.lb-next{right:.6rem}
.lb-x:hover,.lb-nav:hover{border-color:var(--accent);color:var(--accent)}
body:has(.lb:target),.lb-open body{overflow:hidden}
/* previous, back, next */
.pmore{padding-top:.5rem;padding-bottom:clamp(3rem,6vw,4.5rem)}
.pager{display:grid;gap:.8rem}
@media (min-width:760px){.pager{grid-template-columns:1fr auto 1fr;align-items:stretch}}
.pager a{display:flex;flex-direction:column;justify-content:center;gap:.2rem;min-height:72px;padding:.9rem 1.2rem;text-decoration:none;transition:border-color .2s var(--ease)}
.pager a:hover{border-color:var(--accent)}
.pager .next{text-align:right}
.pager span{font-weight:600;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.pager b{font-family:var(--display);font-weight:600;font-size:1.2rem;line-height:1.15;letter-spacing:.06em;text-transform:uppercase}
.pager .back{align-items:center;justify-content:center;text-align:center;color:var(--accent);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}

/* the end-credits table (Credits, at /portfolio/) */
.jump{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.jump a{display:inline-flex;align-items:center;min-height:48px;padding:.5rem 1rem;border:1px solid var(--rule);text-decoration:none;font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.jump a:hover{border-color:var(--accent);color:var(--accent)}
.phead .jump{margin-top:1.6rem}
.decade{padding-top:var(--s5);scroll-margin-top:var(--hdr)}
.dec-h{position:relative;display:grid;justify-items:center;gap:.8rem;text-align:center;margin-bottom:var(--s4)}
.dec-h svg.arm{width:150px;height:46px}
.dec-h h2{font-size:clamp(1.9rem,4.6vw,3rem);letter-spacing:.12em;text-transform:uppercase}
.dec-h p{color:var(--dim);font-size:.92rem;max-width:46ch}
.dec-h .dec-art{display:none}
@media (min-width:900px){
  .dec-h .dec-art{display:block;top:50%;width:220px;height:220px;transform:translateY(-50%)}
  .dec-art.l{left:2%}
  .dec-art.r{right:2%}
}
.credits{width:100%;border-collapse:collapse}
.credits caption,.credits thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.credits tr{border-top:1px solid var(--rule-soft)}
.credits td,.credits th{vertical-align:top;text-align:left;font-weight:400;padding:.9rem 0}
.credits .role{font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.credits .yr{font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.06em;color:var(--dim);font-variant-numeric:tabular-nums}
.credits .prod b,.credits .prod a{display:block;font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.18;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.credits .prod a{display:inline-flex;align-items:center;min-height:48px;min-width:48px;margin:-.65rem 0 -.5rem;text-decoration:none;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:var(--steel)}
.credits .prod a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.credits .meta{display:block;margin-top:.15rem;font-size:.84rem;color:var(--dim)}
.credits .meta>div{display:inline}
.credits .co{font-weight:600;color:var(--muted)}
.credits .co+.when::before{content:"/";margin:0 .5rem;color:var(--steel)}
.credits .desc{display:block;margin-top:.35rem;color:var(--muted);font-size:.96rem;max-width:62ch}
.credits tr:target{background:rgba(131,168,240,.07)}
@media (max-width:759px){
  .credits,.credits tbody,.credits tr,.credits td,.credits th{display:block}
  .credits tr{padding:.85rem 0}
  .credits td,.credits th{padding:0}
  .credits .role,.credits .yr{display:inline-block;margin-bottom:.35rem}
  .credits .yr{margin-left:.45rem}
}
@media (min-width:760px){
  .credits .role{width:36%;padding-right:1.6rem;text-align:right}
  .credits .yr{width:6.5rem;text-align:center}
  .credits .prod{padding-left:1.6rem}
}
.block.tight-b{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:1rem}
.block.tight-t{padding-top:1.5rem}
.block.grid-sec{padding-top:clamp(2.5rem,5vw,4rem)}

/* profile */
.split{display:grid;gap:2.6rem}
@media (min-width:1000px){.split{grid-template-columns:1fr 1.15fr;gap:4rem;align-items:start}}
.words{display:grid;gap:1rem;padding:clamp(1.5rem,3vw,2.4rem)}
.words .mini{margin:0}
.portrait{margin:0;padding:var(--gap)}
.portrait img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:30% 45%;filter:brightness(.9)}
.portrait figcaption{padding:.7rem .4rem .3rem;font-size:.88rem;color:var(--muted)}
.aboutp{margin:1.8rem 0 .4rem}
.aboutp p+p{margin-top:1rem;color:var(--muted)}
.about-split .mini{margin-top:2rem}
.teams{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.teams li{padding:.45rem .8rem;border:1px solid var(--rule-soft);font-family:var(--display);font-weight:600;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.plist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-soft)}
.plist li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--rule-soft)}
.plist b{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase}
.plist span{color:var(--muted);text-align:right;font-size:.94rem}

/* contact: email first, Instagram and YouTube second, where he works */
.channels{display:grid;gap:1.25rem}
@media (min-width:880px){.channels{grid-template-columns:1.15fr 1fr}}
.channel{display:grid;gap:.9rem;align-content:start;padding:clamp(1.5rem,3vw,2.4rem)}
.channel h3{font-size:clamp(1.6rem,3vw,2.1rem)}
.channel p{color:var(--muted)}
.channel .mini{margin:1.2rem 0 0}
.channel h3.mini{font-family:var(--body);font-weight:600;font-size:.72rem;line-height:1.4;letter-spacing:.24em;color:var(--dim)}
.channel .ctas{margin-top:.4rem}
.ch-yt{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--rule-soft)}
.handle{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,6.4vw,3rem);line-height:1.05;letter-spacing:.03em;color:var(--accent)!important;overflow-wrap:anywhere}
/* the address stays on one line: sized to the card on phones */
.ch-mail .handle{font-size:clamp(1.3rem,6.6vw,3rem);letter-spacing:.02em}
@media (min-width:880px){.ch-mail .handle{font-size:clamp(2rem,2.9vw,3rem)}}
.ch-sec{padding-top:clamp(2.4rem,5vw,3.6rem)}
.sendlist{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.sendlist li{position:relative;padding-left:1.4rem;color:var(--text)}
.sendlist li::before{content:"";position:absolute;left:0;top:.8em;width:.7rem;height:1px;background:var(--accent)}
.base{display:grid;justify-items:center;gap:.7rem;margin-top:clamp(2.4rem,6vw,3.6rem);text-align:center}
.base .arm-b{width:150px;height:46px}
.base-l{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,4.4vw,2.6rem);line-height:1.12;letter-spacing:.04em}

/* FAQ: native details */
.faq{display:grid;gap:.6rem;max-width:56rem;margin-top:clamp(1.2rem,3vw,1.8rem)}
.faq details{background:var(--card);border:1px solid var(--rule-soft);transition:border-color .2s var(--ease)}
.faq details[open]{border-color:var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:58px;padding:1rem 1.2rem;font-weight:600;font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--rule);color:var(--accent);font-size:1.15rem;line-height:1;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1.2rem 1.15rem;color:var(--muted);max-width:68ch}

/* footer: the bottom letterbox bar; his social icons at the foot (his template), the menu, then the legal block */
.ftr{background:var(--bar);border-top:1px solid var(--rule-soft);padding:var(--s5) 0 var(--s4);color:var(--muted);font-size:.95rem}
.ftr .wrap{display:grid;gap:2rem}
.f-brand p{margin-top:.7rem;max-width:36ch}
.arm-f{display:block;width:180px;height:56px;margin-top:1.1rem}
.f-nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.4rem;list-style:none;margin:0;padding:0}
.f-nav a{display:flex;align-items:center;min-height:48px;text-decoration:none;font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.f-nav a:hover{color:var(--accent)}
.f-soc{display:flex;justify-content:center;padding-block:1.4rem;border-block:1px solid var(--rule-soft)}
.f-icons{justify-content:center}
@media (min-width:900px){
  .ftr .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:start;column-gap:4rem}
  .f-nav ul{grid-template-columns:repeat(4,minmax(0,1fr))}
  .f-soc{grid-column:1/-1;grid-row:2}
}
.fine{grid-column:1/-1;font-size:.84rem;color:var(--dim)}
.concept{grid-column:1/-1;margin-top:-1.4rem;font-size:.84rem;color:var(--dim)}
.ftr .foot-credit-wrap{grid-column:1/-1;margin-top:-1.2rem}
.foot-credit-wrap{margin:0}.foot-credit{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.5rem .25rem;font-size:.75rem;opacity:.85;text-decoration:none;border:0;color:var(--muted)}.foot-credit:hover{opacity:1}.foot-credit img{height:24px;width:auto;border:0}

/* 404 */
.nf{min-height:60vh;display:flex;align-items:center}

/* data pass 30 Oct 2026: his home bio between the photo band and the chapter tiles; his Profile photos in two columns,
   each at its own shape (no crop), beside his text; his supervisor line in the Credits rows; landscape posters */
.hbio{padding-top:clamp(2.4rem,6vw,3.8rem);padding-bottom:0}
.hbio-t{max-width:68ch}
.hbio-t p{font-size:clamp(1.08rem,2vw,1.24rem);line-height:1.65;color:var(--text)}
.hbio-t p+p{margin-top:1rem;color:var(--muted)}
.hbio .tlink{margin-top:.6rem}
.about-split{align-items:start}
.pph-cols{columns:2;column-gap:.75rem}
@media (min-width:640px){.pph-cols{column-gap:1rem}}
.pph{break-inside:avoid;margin:0 0 .75rem;padding:var(--gap)}
@media (min-width:640px){.pph{margin-bottom:1rem}}
.pph img{display:block;width:100%;height:auto}
.pph figcaption{padding:.55rem .3rem .2rem;font-size:.84rem;line-height:1.4;color:var(--muted)}
.pph-credit{margin-top:.15rem;font-size:.74rem;letter-spacing:.04em;color:var(--dim)}
.pbar .pcredit{margin:.5rem 0 0;font-size:.74rem;letter-spacing:.04em;color:var(--dim)}
.ptext .q p{max-width:64ch}
@media (max-width:999px){.about-split .ptext{order:-1}}
.credits .psup{display:block;margin-top:.15rem;font-size:.86rem;line-height:1.45;color:var(--dim)}
/* motion: transform and opacity only; nothing runs under reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .strip-btn{display:none}
}
/* his reference quotes on the Credits page (4 Nov 2026): one framed card per quote, his words then the name */
.refs{display:grid;gap:1.25rem;list-style:none;margin:1.6rem 0 0;padding:0}
@media (min-width:900px){.refs{grid-template-columns:repeat(3,1fr)}}
.ref{padding:1.4rem 1.5rem 1.5rem}
.ref blockquote{margin:0}
.ref blockquote p{position:relative;margin:0;padding-left:1.6rem;font-size:1.02rem;line-height:1.6;color:var(--text)}
.ref blockquote p::before{content:"\201C";position:absolute;left:0;top:-.3rem;font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--accent)}
.ref .who{margin:1rem 0 0;padding-left:1.6rem;font-weight:600;font-size:.78rem;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}