/* REEL CHANGE · Opus world layer · 31.10.2026
   A showbook in chapters: bone paper, indigo night, cinema-yellow title cards, ember cue marks.
   Load after portfolio.css, cyber.css and journal.css. Restyles the existing markup; product
   evidence is framed, never filtered or recoloured.
   build_inline.py scoped() safe: no commas inside :not()/:where()/:has(), no @supports/@layer,
   no ".cyber>" selectors, and no literal "url(" inside data URIs. */

/* ── 1 · Tokens ─────────────────────────────────────────────────────────── */
:root{
 --day-ground:#EDE6D8;--day-ground-alt:#E3D9C6;--day-field:#F7F2E8;--day-text:#12162B;--day-muted:#514A44;--day-link:#9E2A22;--day-accent:#B33E1C;--day-hair:#B08A5F;--day-edge:#12162B;--day-focus:#12162B;--day-halo:#F2C230;
 --night-ground:#12162B;--night-ground-alt:#1C2140;--night-field:#1C2140;--night-text:#EDE6D8;--night-muted:#C9BFAF;--night-link:#F2C230;--night-accent:#F07A4E;--night-hair:rgba(237,230,216,.24);--night-edge:#EDE6D8;--night-focus:#F2C230;--night-halo:#12162B;
 --card:#F2C230;--card-text:#12162B;--cue:#D9542B;--screen:#0B0E1C;--scrim:18,22,43;--gate:14px;--ease:cubic-bezier(.2,.8,.2,1);
 --italic:italic;--w-display:400;--w-strong:700;
 --serif-display:"Bodoni 72","Bodoni MT",Didot,"Didot LT STD","Big Caslon","Sitka Banner",Georgia,"Times New Roman",serif;
 --serif-text:"Iowan Old Style","Sitka Text",Charter,"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
 --mono:"IBM Plex Mono","Cascadia Mono","SF Mono",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
 --grain-day:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .086 0 0 0 0 .17 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
 --grain-night:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .85 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
 --sprockets:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='26'%3E%3Crect x='12' y='8' width='14' height='10' rx='2.5' fill='%23EDE6D8' fill-opacity='.8'/%3E%3C/svg%3E");
 --display:var(--serif-display);--body:var(--serif-text);
 --action:var(--card);--tungsten:var(--card);--dark:var(--night-ground);--white:var(--night-text);--graphite:var(--night-ground-alt);
}

/* Day scope: bone paper. Also re-asserted on .cyber so the edition recomputes its own values. */
:root,.cyber,.workshop,.consent-banner,.reel-day{
 --ground:var(--day-ground);--ground-alt:var(--day-ground-alt);--field:var(--day-field);--text:var(--day-text);--text-muted:var(--day-muted);--link-c:var(--day-link);--accent:var(--day-accent);--hair:var(--day-hair);--edge:var(--day-edge);--focus-ring:var(--day-focus);--focus-halo:var(--day-halo);--grain:var(--grain-day);
 --paper:var(--day-ground);--ink:var(--day-text);--muted:var(--day-muted);--blue:var(--day-ground-alt);--rose:var(--day-ground-alt);--mat:var(--day-ground-alt);--link:var(--day-link);--wine:var(--day-link);--line:var(--day-hair);
}
/* Night scope: letterbox bars, dailies, projection bands, service pages. */
.site-header,.site-footer,.countershot,.case-image,.case-gallery,.timeline,.closing,.typographic-cover,.reel-night,:where(main:has(.sol-grid)),:where(main:has(.service-detail)),:where(main:has(.proc-steps)),:where(main.reel-service),:where(main:has(.contact-form) .page-heading){
 --ground:var(--night-ground);--ground-alt:var(--night-ground-alt);--field:var(--night-field);--text:var(--night-text);--text-muted:var(--night-muted);--link-c:var(--night-link);--accent:var(--night-accent);--hair:var(--night-hair);--edge:var(--night-edge);--focus-ring:var(--night-focus);--focus-halo:var(--night-halo);--grain:var(--grain-night);
 --paper:var(--night-ground);--ink:var(--night-text);--muted:var(--night-muted);--blue:var(--night-ground-alt);--rose:var(--night-ground-alt);--mat:var(--night-ground-alt);--link:var(--night-link);--wine:var(--night-link);--line:var(--night-hair);
}
/* Card scope: Tarantino title cards in cinema yellow. */
.showbook-foot,.next-project,.service-detail .service-cta,#article .service-cta,.reel-card{
 --text:var(--card-text);--text-muted:var(--card-text);--link-c:var(--card-text);--accent:var(--card-text);--hair:var(--card-text);--edge:var(--card-text);--focus-ring:var(--card-text);--focus-halo:var(--card);
 --ink:var(--card-text);--muted:var(--card-text);--link:var(--card-text);--wine:var(--card-text);--line:var(--card-text);
 background:var(--card);color:var(--card-text);
}

/* ── 2 · Base ───────────────────────────────────────────────────────────── */
html{background:var(--day-ground);scrollbar-color:var(--day-text) var(--day-ground)}
html:has(body.cyber){background:#0E0F12;scrollbar-color:#FF5A1F #0E0F12}
body{background:var(--grain),var(--ground);color:var(--text);font:400 1.0625rem/1.68 var(--serif-text);font-kerning:normal;font-variant-ligatures:common-ligatures;text-rendering:optimizeLegibility}
main{overflow-x:clip}
::selection{background:var(--card);color:var(--card-text)}
a{color:var(--link-c);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
p{margin:0 0 1.2rem}
h1,h2,h3,h4{font-family:var(--serif-display);font-weight:var(--w-display);font-style:normal;letter-spacing:-.012em;line-height:1.04;color:inherit;margin:0 0 1.25rem;text-wrap:balance}
h1{font-size:clamp(2.8rem,6.4vw,6rem)}h2{font-size:clamp(2.1rem,4.2vw,3.9rem)}h3{font-size:clamp(1.4rem,2.2vw,2rem)}h4{font-size:1.2rem}
strong{font-weight:700}
figcaption,.caption{font:400 .76rem/1.6 var(--mono);letter-spacing:.02em;color:var(--text-muted)}
.quiet{color:var(--text-muted)}
.title-line{display:block}
.title-line+.title-line::before{content:' '}
.section{padding-block:clamp(4rem,9vw,7.5rem)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus-ring)!important;outline-offset:3px!important;box-shadow:0 0 0 3px var(--focus-halo)!important}
.skip{position:absolute;left:1rem;top:-10rem;z-index:100;padding:.85rem 1.1rem;background:var(--card);color:var(--card-text);font:600 .76rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:1rem}

/* ── 3 · Shared components ─────────────────────────────────────────────── */
.button,.legacy-content .bp,.legacy-content .bg,.legacy-content .cta-link,.legacy-content .btn,.legacy-content .bpri{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:48px;padding:.9rem 1.35rem;background:var(--card);color:var(--card-text);border:2px solid var(--card-text);border-radius:0;font:600 .76rem/1.25 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;box-shadow:5px 5px 0 var(--cue);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.button:hover,.legacy-content .bp:hover,.legacy-content .cta-link:hover,.legacy-content .btn:hover,.legacy-content .bpri:hover{background:var(--card);color:var(--card-text);text-decoration:none;transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--cue)}
.button:active,.legacy-content .bp:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--cue)}
.button.secondary,.legacy-content .bg{background:transparent;color:var(--text);border:1px solid var(--text);box-shadow:none}
.button.secondary:hover,.legacy-content .bg:hover{background:var(--text);color:var(--ground);transform:none;box-shadow:none}
.showbook .button,.workshop .button{background:var(--card);color:var(--card-text);border-radius:0}
.showbook .button:hover,.workshop .button:hover{background:var(--card);color:var(--card-text)}
.actions{gap:1rem 1.75rem}
.text-link,.showbook .text-link,.case-hero .text-link,.workshop .text-link{display:inline-flex;align-items:center;gap:.6rem;padding-block:.35rem;border-bottom:1px solid currentColor;color:var(--link-c);font:600 .74rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.text-link:hover{color:var(--text)}
.text-link::after{width:.95em;height:.95em}
.status{display:inline-flex;align-items:center;gap:.45rem;width:fit-content;padding:.38rem .6rem;border:1px solid currentColor;border-radius:0;font:600 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
[data-project-status=live] .status::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--cue)}
[data-project-status=wip] .status::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;border:1px solid currentColor}
.tags span{background:transparent;border:1px solid var(--hair);border-radius:0;font:500 .72rem/1 var(--mono);letter-spacing:.08em;padding:.45rem .6rem}
/* Section heads carry a static cue mark: the changeover dot in the top-right corner. */
.section-head{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:1.25rem clamp(2rem,6vw,6rem);margin-bottom:clamp(2.25rem,5vw,3.75rem);padding:0 2.5rem clamp(1.25rem,2.5vw,1.75rem) 0;border-bottom:1px solid var(--hair)}
.section-head h2{max-width:13ch;margin:0;font:var(--italic) var(--w-display) clamp(2.5rem,5.4vw,5.2rem)/.98 var(--serif-display);letter-spacing:-.015em}
.section-head p{max-width:46ch;margin:0;color:var(--text-muted);font-size:1.08rem;line-height:1.7}
.section-head::before,.community-intro::before,.page-heading::before{content:"";position:absolute;top:.4rem;right:0;width:.85rem;height:.85rem;border-radius:50%;background:var(--cue);box-shadow:0 0 0 .32rem color-mix(in srgb,var(--cue) 22%,transparent);pointer-events:none}
.typographic-cover,.cover-rada,.cover-supply,.cover-research{background:var(--grain),var(--ground);color:var(--card)}
.typographic-cover strong{font:var(--italic) var(--w-display) clamp(1.9rem,4vw,3.2rem)/1 var(--serif-display)}
.typographic-cover small{font:500 .68rem/1.4 var(--mono);letter-spacing:.12em;color:var(--text)}
.source-code{background:var(--screen);color:var(--night-text);border:1px solid var(--hair);border-radius:10px;padding:clamp(1rem,2.5vw,1.6rem);font:400 .8rem/1.75 var(--mono)}
.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}

/* ── 4 · Header: the top letterbox bar ────────────────────────────────── */
.site-header{position:relative;z-index:40;background:var(--grain),var(--ground);color:var(--text);border-bottom:1px solid var(--hair)}
.header-inner{min-height:68px;gap:clamp(1rem,2.2vw,2.25rem);padding-block:.4rem}
.site-header .brand{display:inline-flex;align-items:center;gap:.65rem;color:var(--text);font:var(--italic) var(--w-display) 1.4rem/1 var(--serif-display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.site-header .brand::before{content:"";flex:none;width:.95rem;height:.95rem;border-radius:50%;border:1.5px solid var(--cue);background:radial-gradient(circle,var(--cue) 0 36%,transparent 40%)}
.site-header .brand em{font-style:normal;color:var(--cue)}
.site-menu{gap:clamp(1.1rem,1.8vw,2rem)}
.site-menu a{padding:.9rem 0;color:var(--text);font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.site-menu a:hover{color:var(--link-c)}
.site-menu a[aria-current=page]{color:var(--text);text-decoration:none;box-shadow:inset 0 -2px 0 var(--card)}
.experience-controls{gap:.45rem}
.experience-controls button{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .8rem;border:1px solid var(--text-muted);border-radius:999px;background:transparent;color:var(--text);font:600 .68rem/1.1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.experience-controls button::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;border:1px solid currentColor}
.experience-controls button:hover{border-color:var(--card)}
.experience-controls button[aria-pressed=true]{background:var(--card);border-color:var(--card);color:var(--card-text)}
.experience-controls button[aria-pressed=true]::before{background:currentColor}
.experience-controls button:disabled{opacity:1;background:transparent;color:var(--text-muted);border-style:dashed;cursor:default}
.language-menu{position:relative}
.language-menu summary{list-style:none;display:flex;align-items:center;gap:.45rem;min-height:44px;padding:.5rem .7rem;border:1px solid var(--text-muted);color:var(--text);font:600 .7rem/1 var(--mono);letter-spacing:.14em;cursor:pointer}
.language-menu summary::-webkit-details-marker{display:none}
.language-menu[open] summary{border-color:var(--card)}
.language-menu div{top:calc(100% + .4rem);right:0;z-index:50;min-width:8.5rem;padding:.35rem;background:var(--ground);border:1px solid var(--hair);box-shadow:8px 8px 0 rgba(0,0,0,.28)}
.language-menu a{display:block;padding:.65rem .75rem;color:var(--text);font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-decoration:none}
.language-menu a:hover{background:var(--ground-alt);color:var(--link-c)}
html[lang=it] .language-menu a[hreflang=it],html[lang=en] .language-menu a[hreflang=en],html[lang=es] .language-menu a[hreflang=es],html[lang=pt] .language-menu a[hreflang=pt],html[lang=fr] .language-menu a[hreflang=fr]{color:var(--card)}
.menu-toggle{align-items:center;gap:.65rem;min-height:44px;padding:.55rem .85rem;border:1px solid var(--text-muted);border-radius:0;background:transparent;color:var(--text);font:600 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.menu-toggle::before{content:"";flex:none;width:1rem;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
.menu-toggle[aria-expanded=true]::before{box-shadow:none}

/* ── 5 · Footer: the end credits ──────────────────────────────────────── */
.site-footer{position:relative;padding:clamp(4rem,9vw,7rem) 0 1.75rem;background:var(--grain),var(--ground);color:var(--text);text-align:center}
.site-footer::before{content:"";position:absolute;top:clamp(1.5rem,3vw,2.25rem);right:var(--gutter);width:.85rem;height:.85rem;border-radius:50%;background:var(--cue);box-shadow:0 0 0 .32rem color-mix(in srgb,var(--cue) 22%,transparent)}
.footer-top{display:flex;flex-direction:column;align-items:center;gap:0;padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.footer-signature{max-width:16ch;margin:0 auto 1.1rem;font:var(--italic) var(--w-display) clamp(2.4rem,6.4vw,5.8rem)/1 var(--serif-display);letter-spacing:-.015em;text-wrap:balance}
.site-footer .quiet{margin:0;color:var(--text-muted)!important;font:600 .72rem/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.75rem;max-width:none;margin-top:clamp(2rem,4vw,2.75rem)}
.site-footer a{display:inline-block;padding:.65rem 0;color:var(--text);font:600 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.site-footer a:hover{color:var(--link-c)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem 1.5rem;padding-top:1.25rem;border-top:1px solid var(--hair);color:var(--text-muted);font:500 .7rem/1.6 var(--mono);letter-spacing:.1em}
.footer-bottom a{padding:.35rem 0;font-size:.7rem}
.site-footer button{background:none;border:0;padding:.35rem 0;color:var(--text);font:600 .7rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:.3em;cursor:pointer}

/* ── 6 · Consent ──────────────────────────────────────────────────────── */
.consent-banner{background:var(--field);color:var(--text);border:2px solid var(--text);border-radius:0;box-shadow:8px 8px 0 var(--text);font-family:var(--serif-text);max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);overflow:auto;overscroll-behavior:contain}
body.cyber .consent-banner{position:fixed;z-index:50}
.consent-inner p{font-size:.95rem;line-height:1.6}
.consent-actions{min-width:0;max-width:100%;flex-shrink:1}
.consent-actions button{min-width:0;max-width:100%;min-height:44px;padding:.7rem 1rem;border:1px solid var(--text);border-radius:0;background:transparent;color:var(--text);font:600 .7rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:normal;overflow-wrap:break-word}
.consent-actions button[data-consent=accept]{background:var(--text);color:var(--ground)}
.consent-preferences{border-top:1px solid var(--hair)}
.consent-preferences label{font-size:.95rem;align-items:flex-start}
.consent-preferences input{accent-color:var(--text);width:18px;height:18px;flex-shrink:0}
.consent-preferences button{max-width:100%;white-space:normal}
@media(max-width:600px){.consent-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;width:100%}}

/* ── 7 · Home · Opening credits: name above, arch, name below ─────────── */
.showbook{background:var(--grain),var(--ground);color:var(--text);overflow-x:clip}
.showbook-grid{
 --name-size:clamp(3.6rem,min(8.4vw,13vh),8.8rem);--name-size:clamp(3.6rem,min(8.4vw,13svh),8.8rem);
 --arch-w:clamp(12rem,min(25vw,calc((100vh - 11rem - 1.8 * var(--name-size)) / 1.5)),23rem);
 --arch-w:clamp(12rem,min(25vw,calc((100svh - 11rem - 1.8 * var(--name-size)) / 1.5)),23rem);
 display:grid;grid-template-columns:minmax(0,1fr) var(--arch-w) minmax(0,1fr);grid-template-rows:calc(var(--name-size) * .9) auto auto calc(var(--name-size) * .9);column-gap:clamp(2.25rem,4.5vw,4.5rem);align-items:center;padding-block:clamp(1.25rem,3vw,2.25rem) clamp(1.5rem,3vw,2.5rem)}
.showbook-copy{display:contents}
.showbook h1{grid-column:1/-1;grid-row:1/-1;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;align-items:center;max-width:none;margin:0;color:var(--text);font:var(--italic) var(--w-display) var(--name-size)/.9 var(--serif-display);letter-spacing:-.02em;text-align:center;text-wrap:initial}
.showbook h1>span{display:block}
.showbook .name-period{color:var(--cue)}
.showbook-line{grid-column:1;grid-row:2/4;align-self:center;justify-self:end;max-width:12ch;margin:0;text-align:right;font:var(--italic) var(--w-display) clamp(1.5rem,2.3vw,2.4rem)/1.12 var(--serif-display);letter-spacing:-.01em}
.showbook-intro{grid-column:3;grid-row:2;align-self:end;max-width:38ch;margin:0 0 1.5rem;color:var(--text-muted);font-size:.98rem;line-height:1.7}
.showbook .actions{grid-column:3;grid-row:3;align-self:start;margin:0}
/* The arch: a proscenium frame with an ember plate printed slightly out of register. */
.showbook-portrait,.portrait-section .portrait{position:relative;isolation:isolate;display:block;width:var(--arch-w);max-width:100%;margin:.6rem 0;padding:clamp(.35rem,.7vw,.55rem);overflow:visible;background:var(--ground);border:1px solid var(--edge);border-bottom-width:3px;border-radius:100vmax 100vmax 0 0}
.showbook-portrait{grid-column:2;grid-row:2/4;align-self:center;justify-self:center;min-width:0}
.showbook-portrait::before,.portrait-section .portrait::before{content:"";position:absolute;inset:-1px;z-index:-1;border:1.5px solid var(--cue);border-radius:inherit;transform:translate(.65rem,-.65rem);pointer-events:none}
.showbook-portrait .portrait-art,.portrait-section .portrait-art{display:block;position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:100vmax 100vmax 0 0;background:var(--ground-alt)}
.portrait-art>.portrait-default{object-position:center 26%}
.showbook-portrait figcaption{position:absolute;top:16%;left:calc(100% + 1.15rem);height:78%;margin:0;writing-mode:vertical-rl;color:var(--text-muted);font:500 .66rem/1.35 var(--mono);letter-spacing:.16em;text-transform:uppercase}
/* Title card under the stage. */
.showbook-foot{position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem 2rem;margin:0;padding-block:clamp(1.1rem,2.6vw,1.9rem);border:0;box-shadow:0 0 0 100vmax var(--card);clip-path:inset(0 -100vmax)}
.showbook-foot span{font:var(--italic) var(--w-strong) clamp(1.7rem,4.2vw,3.6rem)/1.05 var(--serif-display);letter-spacing:-.012em}
.showbook-foot a{color:var(--card-text);font:600 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-block:.5rem}

/* ── 8 · Chapter index: project rows on home and work ────────────────── */
.showcase-grid{display:block;counter-reset:chapter;border-bottom:1px solid var(--hair)}
.showcase-grid .project-row{counter-increment:chapter;position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto auto auto 1fr auto;column-gap:clamp(1rem,2.4vw,2.5rem);align-items:start;min-width:0;margin:0;padding:clamp(2.75rem,6vw,5.25rem) 0;border:0;border-top:1px solid var(--hair);color:var(--text);scroll-margin-top:6rem}
.showcase-grid .project-row:nth-child(even){margin-top:0}
.showcase-grid .project-row::before{content:counter(chapter,decimal-leading-zero) / "";grid-column:9/-1;grid-row:2;margin-bottom:1rem;color:var(--accent);font:var(--italic) 400 clamp(3.2rem,6vw,6rem)/.8 var(--serif-display);letter-spacing:-.03em}
.showcase-grid .project-thumb{grid-column:1/span 7;grid-row:1/6;display:block;aspect-ratio:16/10;padding:clamp(.4rem,.9vw,.75rem);overflow:hidden;background:var(--screen);border-radius:var(--gate);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.showcase-grid #dream-home .project-thumb,.showcase-grid #clubperfumes .project-thumb{background:var(--screen)}
.showcase-grid .project-thumb img{width:100%;height:100%;object-fit:contain;border-radius:calc(var(--gate) - 6px)}
.showcase-grid #rada .project-thumb img,.showcase-grid #supply-chain-tracker .project-thumb img,.showcase-grid #bankruptcy-prediction .project-thumb img{object-fit:cover}
.showcase-grid .project-row:hover .project-thumb img{transform:none}
.showcase-grid .project-thumb:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--cue)}
.showcase-grid .project-caption{grid-column:1/span 7;grid-row:6;margin-top:.8rem;color:var(--text-muted);font:500 .72rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.showcase-grid .project-body{grid-column:9/-1;grid-row:3;display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem;min-width:0;padding:0}
.showcase-grid .project-body h2,.showcase-grid .project-body h3{flex:0 0 100%;margin:0 0 .65rem;color:var(--card-text);font:var(--italic) var(--w-display) clamp(2rem,3.5vw,3.4rem)/1.16 var(--serif-display);letter-spacing:-.01em}
.showcase-grid .project-body h2 a,.showcase-grid .project-body h3 a{padding:.02em .2em .06em;background:var(--card);-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background .18s var(--ease)}
.showcase-grid .project-body h2:hover,.showcase-grid .project-body h3:hover{color:var(--card)}
.showcase-grid .project-body h2:hover a,.showcase-grid .project-body h3:hover a{background:var(--card-text)}
.showcase-grid .project-type{margin:0;color:var(--text-muted);font:500 .74rem/1.4 var(--mono);letter-spacing:.06em}
.showcase-grid .project-row>p{grid-column:9/-1;grid-row:4;display:block;max-width:44ch;margin:1.1rem 0 0;color:var(--text);font-size:1.02rem;line-height:1.7}
.showcase-grid .project-row .text-link{margin-top:1rem}
.showcase-grid .project-row:nth-child(even)::before{grid-column:1/span 4}
.showcase-grid .project-row:nth-child(even) .project-thumb,.showcase-grid .project-row:nth-child(even) .project-caption{grid-column:6/-1}
.showcase-grid .project-row:nth-child(even) .project-body,.showcase-grid .project-row:nth-child(even)>p{grid-column:1/span 4}
/* Every fourth chapter opens as a wide establishing shot. */
.showcase-grid .project-row:nth-child(4n+3){grid-template-rows:auto auto auto;align-items:end}
.showcase-grid .project-row:nth-child(4n+3)::before{grid-column:1/span 2;grid-row:1;margin:0}
.showcase-grid .project-row:nth-child(4n+3) .project-body{grid-column:3/span 5;grid-row:1}
.showcase-grid .project-row:nth-child(4n+3)>p{grid-column:8/-1;grid-row:1}
.showcase-grid .project-row:nth-child(4n+3) .project-thumb{grid-column:1/-1;grid-row:2;margin-top:clamp(1.5rem,3vw,2.5rem);aspect-ratio:2.2/1}
.showcase-grid .project-row:nth-child(4n+3) .project-caption{grid-column:1/-1;grid-row:3}
/* Work page: centred title card and reel selector. */
.page-heading{position:relative;padding-block:clamp(3.5rem,9vw,7.5rem) clamp(2rem,4vw,3rem);text-align:center}
.page-heading::before{top:clamp(1.5rem,3vw,2.5rem);right:var(--gutter)}
.page-heading h1{max-width:15ch;margin:0 auto 1.25rem;font:var(--italic) var(--w-display) clamp(3rem,8.4vw,8rem)/.95 var(--serif-display);letter-spacing:-.018em;text-wrap:balance}
.page-heading p{max-width:56ch;margin:0 auto;color:var(--text-muted);font-size:1.12rem;line-height:1.7}
.project-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0 auto clamp(1.25rem,3vw,2.25rem)}
.project-filter button{min-height:44px;padding:.65rem 1.05rem;border:1px solid var(--text);border-radius:999px;background:transparent;color:var(--text);font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.project-filter button:hover{background:var(--ground-alt)}
.project-filter button[aria-pressed=true]{background:var(--text);color:var(--ground);box-shadow:3px 3px 0 var(--cue)}
[data-filter-empty]{text-align:center;color:var(--text-muted);font-style:italic}

/* ── 9 · Home supporting sections ─────────────────────────────────────── */
/* Dailies: the Cimatica countershot on night. */
.countershot{background:var(--grain),var(--ground);color:var(--text)}
.countershot-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.countershot h2{max-width:11ch;font:var(--italic) var(--w-display) clamp(2.4rem,4.6vw,4.6rem)/1.02 var(--serif-display)}
.countershot p{max-width:42ch;color:var(--text-muted);font-size:1.06rem;line-height:1.7}
.strata-title{font:var(--italic) 400 1.7rem/1.1 var(--serif-display)}
.strata-tabs{gap:0;border-bottom:1px solid var(--hair)}
.strata-tabs button{min-height:44px;padding:.85rem 1rem;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--text-muted);font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.strata-tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--card);font-weight:700}
.strata .screen-mat{padding:clamp(.4rem,.9vw,.75rem);background:var(--screen);border-radius:var(--gate)}
.strata .screen-mat img{border-radius:calc(var(--gate) - 6px)}
.strata [role=tabpanel]>.decisions{background:var(--ground-alt);color:var(--text);border:1px solid var(--hair)}
.decisions h3,.evidence h3{font:var(--italic) var(--w-display) 1.7rem/1.1 var(--serif-display)}
.decisions li{font-size:1rem;line-height:1.6}
.strata [role=tabpanel]>.evidence{background:var(--card);color:var(--card-text);--focus-ring:var(--card-text);--focus-halo:var(--card);--link-c:var(--card-text);--ink:var(--card-text);--link:var(--card-text)}
.strata .evidence a,.strata .evidence .text-link{color:var(--card-text)}
.evidence .figure-number{font:var(--italic) 400 clamp(3.5rem,6vw,5rem)/1 var(--serif-display)}
.strata-credit{color:var(--text-muted);font:400 .74rem/1.55 var(--mono)}
.strata-credit a{color:var(--link-c)}
/* Production notes: AI and judgement, as roman-numbered steps. */
.workshop{background:var(--grain),var(--ground-alt);color:var(--text)}
.workshop-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem)}
.workshop h2{max-width:12ch;font:var(--italic) var(--w-display) clamp(2.6rem,5.4vw,5.4rem)/.98 var(--serif-display);letter-spacing:-.015em}
.workshop p,.workshop .section-head p,.workshop .quiet{color:var(--text-muted)}
.workshop a{color:var(--link-c)}
.workshop .caption{margin-top:1.5rem!important;color:var(--text)!important;font:600 .74rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.tools-line{gap:.5rem;margin-top:2rem;font:600 .74rem/1 var(--mono);color:var(--text)}
.tools-line span,.workshop .tools-line span{padding:.55rem .8rem;border:1px solid var(--text);color:var(--text);letter-spacing:.14em;text-transform:uppercase}
.method-list li{grid-template-columns:4.25rem minmax(0,1fr);gap:1rem;padding:1.6rem 0;border-top:1px solid var(--hair)}
.method-list li:last-child{border-bottom:1px solid var(--hair)}
.method-list li::before{content:counter(method,upper-roman);padding-top:.1rem;color:var(--accent);font:var(--italic) 400 2.3rem/1 var(--serif-display)}
.method-list h3{margin:0 0 .45rem;font:var(--italic) var(--w-display) clamp(1.5rem,2.2vw,1.9rem)/1.1 var(--serif-display)}
.method-list p{margin:0;color:var(--text-muted);font-size:1rem;line-height:1.65}
/* Director's note (home) and Director's commentary (about) share the arch. */
.portrait-section{background:var(--grain),var(--ground);color:var(--text)}
.portrait-grid{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(2rem,7vw,7rem);align-items:center}
.portrait-section .portrait{--arch-w:clamp(10rem,19vw,16rem);justify-self:center;max-width:100%}
.portrait-grid h2{max-width:14ch;font:var(--italic) var(--w-display) clamp(2.4rem,4.6vw,4.6rem)/1 var(--serif-display)}
.portrait-grid p{max-width:58ch;font-size:1.12rem;line-height:1.75}
.credentials{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin-block:2rem}
.credential{padding:0 0 0 1rem;border:0;border-left:3px solid var(--card)}
.credential strong{display:block;font:var(--italic) 400 1.7rem/1.1 var(--serif-display)}
.credential span{display:block;margin-top:.3rem;color:var(--text-muted);font:500 .72rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.portrait-grid:has(h1){grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.portrait-grid:has(h1)>.portrait{grid-column:2;grid-row:1;--arch-w:clamp(13rem,27vw,23rem)}
.portrait-grid:has(h1)>div{grid-column:1;grid-row:1}
.portrait-grid h1{max-width:10ch;margin:0 0 1.75rem;font:var(--italic) var(--w-display) clamp(3.2rem,8vw,7.6rem)/.92 var(--serif-display);letter-spacing:-.02em}
.portrait-grid:has(h1) p{font-size:1.2rem}
/* House rules: services I–III. */
.services-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:rule;border-top:2px solid var(--text)}
.service{counter-increment:rule;padding:2rem clamp(1rem,2.5vw,2.25rem) 2.25rem;border:0;border-left:1px solid var(--hair)}
.service:first-child{padding-left:0;border-left:0}
.service::before{content:counter(rule,upper-roman) / "";display:block;margin-bottom:1.25rem;color:var(--accent);font:var(--italic) 400 clamp(3rem,5vw,4.5rem)/.9 var(--serif-display)}
.service h3{max-width:14ch;font:var(--italic) var(--w-display) clamp(1.6rem,2.4vw,2.1rem)/1.1 var(--serif-display)}
.service p{color:var(--text-muted);font-size:1rem;line-height:1.7}
/* Supporting cast: collaborations as a credit list on bone-deep. */
.community{background:var(--ground-alt);box-shadow:0 0 0 100vmax var(--ground-alt);clip-path:inset(0 -100vmax)}
.community-intro{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:1.25rem clamp(2rem,6vw,6rem);margin-bottom:clamp(2rem,4vw,3rem);padding-right:2.5rem}
.community-intro h2{margin:0;font:var(--italic) var(--w-display) clamp(2.4rem,5vw,4.6rem)/1 var(--serif-display)}
.community-intro p{max-width:46ch;margin:0;color:var(--text-muted);font-size:1.04rem}
.collab-list li{border-top:1px solid var(--hair)}
.collab-list li:last-child{border-bottom:1px solid var(--hair)}
.collab-link{gap:clamp(1rem,4vw,4rem);padding:1.75rem 0;color:var(--text)}
.collab-name h3{margin:0 0 .4rem;font:var(--italic) var(--w-display) clamp(1.6rem,2.6vw,2.2rem)/1.1 var(--serif-display)}
.collab-name span{color:var(--text-muted);font:500 .72rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.collab-detail p{color:var(--text);font-size:1rem;line-height:1.65}
.collab-action{color:var(--link-c);font:600 .72rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.collab-link:hover .collab-name h3{text-decoration:underline;text-decoration-color:var(--cue);text-decoration-thickness:2px;text-underline-offset:.15em}
/* Final scene: asymmetric cubist paper, with a quiet indigo field for the invitation. */
.closing{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(34rem,49vw,46rem);padding-block:clamp(4rem,8vw,8rem) clamp(5rem,10vw,9rem);background:var(--night-ground) url("/assets/media/showbook/closing-cubist-mosaic.webp") center/cover no-repeat;color:var(--text);text-align:left}
.closing::after{content:none}
.closing .wrap{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2rem}
.closing .wrap>div:first-child{width:40rem;max-width:54%}
.closing h2{max-width:11ch;margin:0 0 1.5rem;font:var(--italic) var(--w-display) clamp(2.8rem,6.8vw,6rem)/.98 var(--serif-display);letter-spacing:-.015em;text-wrap:balance}
.closing p{max-width:44ch;margin:0;color:var(--text);font-size:1.12rem;line-height:1.7}
.closing .actions{justify-content:flex-start;margin:0}
.cyber .closing{background-image:linear-gradient(rgba(11,14,20,.28),rgba(11,14,20,.28)),url("/assets/media/showbook/closing-cubist-mosaic.webp")}
@media(max-width:900px){.closing{background-position:32% center}.closing .wrap>div:first-child{max-width:68%}}
@media(max-width:600px){.closing{min-height:38rem;padding-block:4rem 6rem;background-position:40% center}.closing .wrap>div:first-child{width:100%;max-width:none}.closing h2{max-width:12ch}.closing p{max-width:34ch}}

/* ── 10 · Case · Screenplay ───────────────────────────────────────────── */
.case-hero{counter-reset:act;padding-block:clamp(1.25rem,2.5vw,2rem) 0;background:var(--grain),var(--ground);color:var(--text)}
.case-hero>.wrap{display:flex;flex-direction:column;align-items:center}
.case-hero>.wrap>.text-link{align-self:flex-start}
.case-heading{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;width:100%;padding-block:clamp(2rem,5vw,4.5rem) clamp(2rem,4vw,3.25rem);text-align:center}
.case-heading>div{display:flex;flex-direction:column;align-items:center;min-width:0}
.case-heading h1{max-width:13ch;margin:0 0 1.5rem;font:var(--italic) var(--w-display) clamp(3.2rem,10vw,9rem)/.92 var(--serif-display);letter-spacing:-.02em;text-wrap:balance}
.case-meta{display:grid;grid-template-columns:max-content minmax(0,30rem);gap:.6rem 1.25rem;width:fit-content;max-width:100%;min-width:0;margin:2rem auto 0;padding:1.25rem 0 0;border-top:1px solid var(--hair);text-align:left;font-size:1rem}
.case-meta dt{margin:0;padding-top:.2rem;text-align:right;color:var(--text-muted);font:600 .7rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.case-meta dd{margin:0;overflow-wrap:anywhere;line-height:1.5}
.case-image{align-self:stretch;margin:0;padding-block:clamp(1.75rem,4.5vw,4rem);background:var(--grain),var(--ground);box-shadow:0 0 0 100vmax var(--ground);clip-path:inset(0 -100vmax)}
.case-image .screen-mat{max-width:min(72rem,100%);margin-inline:auto;padding:clamp(.45rem,1vw,.9rem);background:var(--screen);border-radius:var(--gate)}
.case-image img{width:100%;max-height:min(72vh,46rem);object-fit:contain;border-radius:calc(var(--gate) - 6px)}
.case-image figcaption{margin-top:1rem;text-align:center;color:var(--text-muted);font:500 .74rem/1.55 var(--mono);letter-spacing:.06em}
/* Acts: a sticky rail with roman numerals beside a single reading column. */
.case-story{display:block;margin:0;padding-block:clamp(2rem,5vw,4rem)}
.case-story>div{counter-increment:act;display:grid;grid-template-columns:minmax(9rem,15rem) minmax(0,43rem);justify-content:center;column-gap:clamp(2rem,6vw,6.5rem);padding-block:clamp(2.25rem,5vw,4rem);border-top:1px solid var(--hair)}
.case-story>div>h2{grid-column:1;grid-row:1/span 8;align-self:start;position:sticky;top:6rem;max-width:none;margin:0;font:var(--italic) var(--w-display) clamp(1.7rem,2.6vw,2.4rem)/1.08 var(--serif-display)}
.case-story>div>h2::before{content:counter(act,upper-roman) / "";display:block;margin-bottom:.6rem;color:var(--accent);font:var(--italic) 400 clamp(2.6rem,4vw,3.6rem)/1 var(--serif-display)}
.case-story>div>*:not(h2){grid-column:2}
.case-story p{max-width:none;font-size:1.14rem;line-height:1.78}
.case-story .button{margin-top:.5rem}
.architecture-list{counter-reset:shot}
.architecture-list li{counter-increment:shot;display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1rem;padding:1.1rem 0;border-top:1px solid var(--hair);font-size:1.05rem;line-height:1.7}
.architecture-list li:last-child{border-bottom:1px solid var(--hair)}
.architecture-list li::before{content:counter(shot,decimal-leading-zero) / "";color:var(--accent);font:600 .72rem/2.3 var(--mono);letter-spacing:.1em}
/* Contact sheet: gallery on a perforated night strip. */
.case-gallery{position:relative;margin:0;padding-block:clamp(4.5rem,9vw,7rem);background:var(--sprockets) 0 .9rem/38px 26px repeat-x,var(--sprockets) 0 calc(100% - .9rem)/38px 26px repeat-x,var(--grain),var(--ground);color:var(--text);box-shadow:0 0 0 100vmax var(--ground);clip-path:inset(0 -100vmax)}
.case-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.25rem,4vw,3.5rem) clamp(1.5rem,3.5vw,3.25rem)}
.case-gallery-media{margin:clamp(.4rem,.8vw,.7rem);background:var(--screen);border-radius:10px;box-shadow:0 0 0 clamp(.4rem,.8vw,.7rem) var(--screen),0 0 0 calc(clamp(.4rem,.8vw,.7rem) + 1px) var(--hair);overflow:hidden}
.case-gallery .case-gallery-media img{background:transparent}
.case-gallery figcaption{max-width:70ch;margin-top:1.2rem;color:var(--text-muted);font:400 .74rem/1.6 var(--mono)}
.case-gallery figcaption a{color:var(--link-c)}
.case-diagram{padding:clamp(1.25rem,3vw,2.25rem);background:transparent;border:1px solid var(--hair)}
.case-diagram-flow{gap:clamp(1rem,2.5vw,2rem)}
.case-diagram-flow li{gap:.85rem;padding-top:1.1rem;border-top:2px solid var(--card)}
.diagram-step-number{color:var(--card);font:600 .74rem/1 var(--mono);letter-spacing:.14em}
.case-diagram-flow strong{font:var(--italic) var(--w-display) clamp(1.15rem,1.7vw,1.45rem)/1.25 var(--serif-display)}
.case-diagram figcaption{margin-top:1.5rem}
.evidence-block{padding:clamp(1.25rem,3vw,2.25rem);background:transparent;border:1px solid var(--hair);border-radius:0}
.evidence-block h3{font:var(--italic) var(--w-display) clamp(1.8rem,3vw,2.6rem)/1.05 var(--serif-display)}
.evidence-stats strong{color:var(--card);font:var(--italic) 400 clamp(2.6rem,5vw,4.2rem)/1 var(--serif-display)}
.evidence-stats span{color:var(--text-muted);font:500 .72rem/1.45 var(--mono);letter-spacing:.06em}
.country-list li{font:500 .78rem/1.4 var(--mono)}
.country-bar{background:var(--ground-alt)}
.country-bar span{background:var(--card)}
.evidence-note{color:var(--text-muted);font:400 .74rem/1.6 var(--mono)}
/* Next chapter: a yellow title card. */
.next-project{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 2rem;margin:clamp(2rem,5vw,4rem) 0 0;padding:clamp(1.75rem,4vw,3rem) clamp(1.25rem,4vw,3rem);border:0;box-shadow:8px 8px 0 var(--cue)}
.next-project>span{font:600 .74rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.next-project .text-link{gap:1rem;border-bottom:0;color:var(--card-text);font:var(--italic) var(--w-display) clamp(2.2rem,5vw,4.4rem)/1 var(--serif-display);letter-spacing:-.01em;text-transform:none}
.next-project .text-link::after{width:.55em;height:.55em}

/* ── 11 · About: commentary, credits roll, production notes ──────────── */
.case-text{max-width:min(44rem,100%);margin-inline:auto;font-size:1.16rem;line-height:1.8}
.case-text p{line-height:1.8}
.case-text>p:first-child::first-letter{float:left;margin:.06em .12em 0 0;color:var(--accent);font:var(--italic) 400 4.6em/.78 var(--serif-display)}
.case-text h2{margin:3rem 0 1rem;font:var(--italic) var(--w-display) clamp(1.8rem,3vw,2.4rem)/1.1 var(--serif-display)}
.case-text h3{margin:2rem 0 .75rem;font:var(--italic) var(--w-display) 1.5rem/1.15 var(--serif-display)}
.timeline{margin:clamp(3.5rem,8vw,6rem) 0 0;padding-block:clamp(3rem,7vw,5.5rem);background:var(--grain),var(--ground);box-shadow:0 0 0 100vmax var(--ground);clip-path:inset(0 -100vmax);color:var(--text);text-align:center}
.tl-section{max-width:36rem;margin:0 auto}
.tl-section+.tl-section{margin-top:clamp(3rem,6vw,4.5rem)}
.tl-label{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.75rem;padding:0;border:0;color:var(--card);font:600 .74rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase}
.tl-label::before,.tl-label::after{content:"";flex:1;height:1px;background:var(--hair)}
.tl-item{padding:1.1rem 0;border:0}
.tl-role{font:var(--italic) var(--w-display) clamp(1.45rem,2.6vw,2rem)/1.15 var(--serif-display)}
.tl-org{margin-top:.35rem;font-size:1rem}
.tl-date{margin:.45rem 0;color:var(--text-muted);font:500 .72rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.tl-note{max-width:46ch;margin-inline:auto;color:var(--text-muted);font-size:.98rem}
.timeline a{color:var(--link-c)}
.profile-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;counter-reset:note;border-top:2px solid var(--text)}
.profile-facts article{counter-increment:note;padding:2rem clamp(1rem,3vw,2.5rem) 2rem 0;border:0;border-bottom:1px solid var(--hair)}
.profile-facts article:nth-child(even){padding-left:clamp(1rem,3vw,2.5rem);border-left:1px solid var(--hair)}
.profile-facts article::before{content:counter(note,decimal-leading-zero) / "";display:block;margin-bottom:1rem;color:var(--accent);font:600 .72rem/1 var(--mono);letter-spacing:.16em}
.profile-facts h3{font:var(--italic) var(--w-display) clamp(1.5rem,2.4vw,1.9rem)/1.1 var(--serif-display)}
.profile-facts p{color:var(--text-muted);font-size:1rem}
.profile-facts a{font:600 .74rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* ── 12 · Contact · Final scene ───────────────────────────────────────── */
main:has(.contact-form) .page-heading{width:100%;padding-block:clamp(4rem,10vw,8.5rem) clamp(6rem,13vw,10.5rem);background:linear-gradient(180deg,rgba(var(--scrim),.88) 0%,rgba(var(--scrim),.62) 62%,rgba(var(--scrim),.3) 100%),url("/assets/media/backdrops/dusk-desert-night.webp") center 64%/cover no-repeat,var(--ground);color:var(--text)}
main:has(.contact-form) .page-heading p{color:var(--text)}
.contact-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.contact-aside h2{font:var(--italic) var(--w-display) clamp(2rem,3.4vw,2.8rem)/1.05 var(--serif-display)}
.contact-aside p{color:var(--text-muted)}
.contact-email{display:inline-block;color:var(--link-c);font:var(--italic) 400 clamp(1.3rem,2.6vw,2rem)/1.2 var(--serif-display);overflow-wrap:anywhere}
.contact-form{position:relative;z-index:1;gap:1.4rem;padding:clamp(1.25rem,3.5vw,2.75rem);background:var(--field);color:var(--text);border:2px solid var(--text);box-shadow:10px 10px 0 var(--cue)}
.field{gap:.5rem}
.field label{color:var(--text);font:600 .72rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.field input,.field textarea,.field select{min-height:48px;padding:.95rem 1rem;background:var(--ground);color:var(--text);border:1px solid var(--text);border-radius:0;font:400 1.05rem/1.4 var(--serif-text);caret-color:var(--accent)}
.field textarea{min-height:10rem}
.field input::placeholder,.field textarea::placeholder{color:var(--text-muted);opacity:1}
.field-check{font-size:.95rem;line-height:1.55}
.field-check input{accent-color:var(--text)}
.contact-form [type=submit]{justify-self:start}
.form-status{padding:.85rem 1rem;border-left:3px solid var(--card);font:500 .82rem/1.5 var(--mono)}
.form-status[data-state=error]{border-left-color:var(--day-link)}

/* ── 13 · Service family · Night shoot (solutions, SEO services, process) ─ */
:where(main:has(.sol-grid)),:where(main:has(.service-detail)),:where(main:has(.proc-steps)),:where(main.reel-service){position:relative;isolation:isolate;background:var(--grain),var(--ground);color:var(--text)}
:where(main:has(.sol-grid))::before,:where(main:has(.service-detail))::before,:where(main:has(.proc-steps))::before,:where(main.reel-service)::before{content:"";position:absolute;inset:0 0 auto;z-index:-1;height:clamp(28rem,62vh,44rem);background:linear-gradient(180deg,rgba(var(--scrim),.55) 0%,rgba(var(--scrim),.8) 50%,var(--ground) 100%),url("/assets/media/backdrops/dusk-desert-night.webp") center 75%/cover no-repeat;pointer-events:none}
.legacy-content{max-width:1240px;padding:clamp(2.5rem,6vw,5rem) var(--gutter) clamp(4rem,8vw,6rem)}
.legacy-content h1{max-width:16ch;margin:0 0 1.75rem;font:var(--italic) var(--w-display) clamp(2.8rem,7vw,6.6rem)/.96 var(--serif-display);letter-spacing:-.015em}
.legacy-content h2{margin-top:3rem;font:var(--italic) var(--w-display) clamp(1.8rem,3.2vw,2.6rem)/1.1 var(--serif-display)}
.legacy-content h3{margin-top:2rem;font:var(--italic) var(--w-display) clamp(1.3rem,2vw,1.6rem)/1.2 var(--serif-display)}
.legacy-content p,.legacy-content li{line-height:1.75}
.legacy-content table{font:400 .85rem/1.5 var(--mono)}
.legacy-content td,.legacy-content th{border-bottom:1px solid var(--hair)}
.legacy-content pre{background:var(--screen);color:var(--night-text)}
.legacy-content .fu{opacity:1;transform:none}
/* Solutions hub: call sheet, then alternating scenes. */
.service-hub{margin:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem);padding:clamp(1.5rem,3vw,2.25rem);background:rgba(var(--scrim),.55);border:1px solid var(--hair);border-left:4px solid var(--card)}
.legacy-content .service-hub h2{margin:0 0 .5rem;font:var(--italic) var(--w-display) clamp(1.6rem,2.6vw,2.1rem)/1.1 var(--serif-display)}
.service-hub p{color:var(--text-muted)}
.service-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;margin:1.25rem 0 0;padding:0;list-style:none}
.legacy-content .service-links li{max-width:none;border-top:1px solid var(--hair)}
.service-links a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.95rem 0;color:var(--text);font:600 .76rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.service-links a::after{content:"\2197" / "";flex:none;color:var(--link-c)}
.service-links a:hover{color:var(--link-c)}
.sol-grid{display:block;counter-reset:scene}
.sol-card{counter-increment:scene;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.75rem,5vw,5rem);align-items:center;padding-block:clamp(2.5rem,6vw,5rem);border-top:1px solid var(--hair)}
.sol-card:nth-child(even) .sol-card-body{order:2}
.sol-card-body::before{content:counter(scene,decimal-leading-zero) / "";display:block;margin-bottom:1rem;color:var(--accent);font:var(--italic) 400 clamp(2.8rem,5vw,4.4rem)/.9 var(--serif-display)}
.legacy-content .sol-title{max-width:20ch;margin:0 0 1rem;font:var(--italic) var(--w-display) clamp(1.8rem,3vw,2.7rem)/1.08 var(--serif-display)}
.sol-desc{color:var(--text);font-size:1.04rem;line-height:1.75}
.legacy-content .solutions-preview-figure,.solutions-preview-figure{max-width:none;margin:0;padding:clamp(.45rem,1vw,.85rem);background:var(--screen);border-radius:var(--gate)}
.solutions-preview-figure img{max-height:30rem;object-fit:contain;border-radius:6px}
.solutions-preview-figure figcaption{padding:.85rem .25rem .2rem;color:var(--night-muted);font:400 .72rem/1.55 var(--mono)}
.solutions-code-preview{padding:clamp(1rem,2.5vw,1.75rem);background:var(--screen);color:var(--night-text)}
.solutions-code-preview pre,.solutions-code-preview .source-code{padding:0;background:transparent;border:0;color:var(--night-text)}
.solutions-code-preview figcaption{color:var(--night-muted)}
.solutions-code-preview figcaption a{color:var(--night-link)}
.sol-inner>.fu{gap:1rem 1.25rem!important;align-items:center}
/* SEO service pages: slugline, breakout scene breakdown, edit timeline, FAQ. */
.service-breadcrumb ol{display:flex;flex-wrap:wrap;gap:.35rem .6rem;margin:0 0 2.25rem;padding:0;list-style:none;color:var(--text-muted);font:500 .7rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.legacy-content .service-breadcrumb li{max-width:none}
.service-breadcrumb li+li::before{content:"/" / "";margin-right:.6rem}
.service-breadcrumb a{color:var(--text)}
.service-detail .article-meta{margin:0 0 1rem;color:var(--card);font:600 .74rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.service-detail .article-title{max-width:15ch}
/* Service title cards share the closing mosaic. The first three grid rows size
   the artwork from actual breadcrumb, metadata and title content, not the viewport. */
main:has(.service-detail)::before{display:none}
.service-detail{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr)}
.service-detail::before{content:"";grid-column:1;grid-row:1/4;z-index:-1;background:linear-gradient(90deg,rgba(18,22,43,.92) 0%,rgba(18,22,43,.92) 55%,rgba(18,22,43,0) 82%),url("/assets/media/showbook/closing-cubist-mosaic.webp") center/cover no-repeat,var(--night-ground);pointer-events:none}
.service-detail>.service-breadcrumb{grid-column:1;grid-row:1;padding:clamp(2rem,4vw,3.5rem) clamp(1.25rem,4vw,3rem) 1.5rem;color:var(--night-text)}
.service-detail>.service-breadcrumb ol{margin:0;color:var(--night-text)}
.service-detail>.service-breadcrumb a{color:var(--night-text)}
.service-detail>.article-meta{grid-column:1;grid-row:2;width:65%;box-sizing:border-box;margin:0;padding:0 clamp(1.25rem,4vw,3rem) 1rem;color:var(--night-text)}
.legacy-content .service-detail>.article-title{grid-column:1;grid-row:3;box-sizing:border-box;width:65%;max-width:none;margin:0;padding:0 clamp(1.25rem,4vw,3rem) clamp(3rem,8vw,6.5rem);color:var(--night-text);font-size:clamp(2.5rem,5.8vw,5.6rem);line-height:1.04;overflow-wrap:break-word;hyphens:auto}
.service-detail>.article-body{grid-column:1;grid-row:4;margin-top:clamp(2.5rem,5vw,4rem)}
.cyber .service-detail::before{background-image:linear-gradient(90deg,rgba(11,14,20,.92) 0%,rgba(11,14,20,.92) 55%,rgba(11,14,20,0) 82%),url("/assets/media/showbook/closing-cubist-mosaic.webp")}
@media(max-width:900px){
 .service-detail::before{background-image:linear-gradient(rgba(18,22,43,.64),rgba(18,22,43,.64)),url("/assets/media/showbook/closing-cubist-mosaic.webp");background-position:32% center}
 .cyber .service-detail::before{background-image:linear-gradient(rgba(11,14,20,.68),rgba(11,14,20,.68)),url("/assets/media/showbook/closing-cubist-mosaic.webp")}
 .service-detail>.article-meta,.legacy-content .service-detail>.article-title{width:78%}
}
@media(max-width:600px){
 .service-detail::before{background-image:linear-gradient(rgba(18,22,43,.64),rgba(18,22,43,.64)),url("/assets/media/showbook/closing-cubist-mosaic.webp");background-position:40% center}
 .service-detail>.article-meta,.legacy-content .service-detail>.article-title{width:100%}
 .service-detail>.article-meta{font-size:.68rem;letter-spacing:.08em;line-height:1.6}
 .service-detail>.service-breadcrumb ol{font-size:.65rem;letter-spacing:.06em}
 .cyber .service-detail::before{background-image:linear-gradient(rgba(11,14,20,.68),rgba(11,14,20,.68)),url("/assets/media/showbook/closing-cubist-mosaic.webp")}
}
@media(forced-colors:active){.service-detail::before{background:Canvas;border:1px solid CanvasText}.service-detail>.article-meta,.legacy-content .service-detail>.article-title,.service-detail>.service-breadcrumb ol,.service-detail>.service-breadcrumb a{color:CanvasText}}
.service-detail .article-body{display:grid;grid-template-columns:minmax(0,1fr) min(46rem,100%) minmax(0,1fr)}
.service-detail .article-body>*{grid-column:2}
.service-lead{font:italic 400 clamp(1.3rem,2.2vw,1.65rem)/1.5 var(--serif-text)}
.service-detail .article-body>ul{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1px;margin:2rem 0;padding:0;list-style:none;background:var(--hair);border:1px solid var(--hair)}
.service-detail .article-body>ul>li{max-width:none;padding:1.5rem;background:var(--ground)}
.service-detail .article-body>ul>li>strong:first-child{display:block;margin-bottom:.5rem;font:var(--italic) var(--w-display) 1.35rem/1.2 var(--serif-display)}
.service-detail .article-body>ol{position:relative;counter-reset:cut;margin:2rem 0;padding:0;list-style:none}
.service-detail .article-body>ol>li{counter-increment:cut;position:relative;padding:0 0 1.75rem 3.75rem}
.service-detail .article-body>ol>li::before{content:counter(cut,decimal-leading-zero) / "";position:absolute;left:0;top:-.1rem;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--card);border-radius:50%;background:var(--ground);color:var(--card);font:600 .72rem/1 var(--mono)}
.service-detail .article-body>ol>li::after{content:"";position:absolute;left:1.25rem;top:2.6rem;bottom:.25rem;width:1px;background:var(--hair)}
.service-detail .article-body>ol>li:last-child::after{display:none}
.service-detail .article-body h3{margin:2.25rem 0 .5rem;padding-left:1rem;border-left:3px solid var(--card);font:var(--italic) var(--w-display) 1.45rem/1.25 var(--serif-display)}
.service-detail .article-related{margin-top:3rem;padding:1.5rem;border:1px solid var(--hair)}
.service-detail .article-related h2{margin-top:0;font-size:clamp(1.5rem,2.4vw,1.9rem)}
.service-detail .service-cta{margin-top:3.5rem;padding:clamp(1.75rem,4vw,3rem);border:0;box-shadow:10px 10px 0 var(--cue)}
.service-detail .service-cta h2{margin-top:0;color:var(--card-text)}
.service-detail .service-cta a{color:var(--card-text);font-weight:700}
/* Process: an edit timeline with four cuts. */
.proc-sub{max-width:40ch;color:var(--text-muted);font:italic 400 clamp(1.2rem,2vw,1.45rem)/1.5 var(--serif-text)}
.proc-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:clamp(2.5rem,6vw,4.5rem) 0}
.proc-track{display:none}
.proc-step{position:relative;padding:3.25rem clamp(.75rem,2vw,1.75rem) 0 0;border-top:2px solid var(--hair)}
.proc-step::before{content:"";position:absolute;top:-.6rem;left:0;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--card);box-shadow:0 0 0 4px var(--ground)}
.proc-num{margin-bottom:1rem;color:var(--accent);font:var(--italic) 400 clamp(2.6rem,4vw,3.6rem)/1 var(--serif-display)}
.legacy-content .proc-ttl{margin:0 0 .75rem;font:var(--italic) var(--w-display) 1.35rem/1.2 var(--serif-display)}
.proc-txt{color:var(--text-muted);font-size:.98rem;line-height:1.7}

/* ── 14 · Journal · Reel notes ────────────────────────────────────────── */
#blog .proc-inner>h1{max-width:none;text-align:center;font:var(--italic) var(--w-display) clamp(3rem,8vw,7.5rem)/.94 var(--serif-display)}
#blog .proc-sub{max-width:46ch;margin-inline:auto;text-align:center;color:var(--text-muted);font:italic 400 1.25rem/1.5 var(--serif-text)}
#blog .blog-grid{display:block;counter-reset:reel-note;margin-top:clamp(2.5rem,6vw,4.5rem);border-top:2px solid var(--text)}
#blog .blog-card{counter-increment:reel-note;display:grid;grid-template-columns:clamp(4.5rem,9vw,8rem) minmax(0,1fr) minmax(12rem,22rem);gap:clamp(1.25rem,3vw,3rem);align-items:center;padding:clamp(1.75rem,3.5vw,2.75rem) 0;border-bottom:1px solid var(--hair);color:var(--text)}
#blog .blog-card::before{content:counter(reel-note,decimal-leading-zero) / "";grid-column:1;grid-row:1;color:var(--accent);font:var(--italic) 400 clamp(3rem,7vw,6.5rem)/.8 var(--serif-display)}
#blog .blog-card-visual{grid-column:3;grid-row:1;aspect-ratio:16/10;padding:.45rem;background:var(--screen);border-radius:var(--gate)}
#blog .blog-card-visual img{object-fit:contain;object-position:center;border-radius:6px}
#blog .blog-card:hover img{transform:none}
#blog .blog-card-body{grid-column:2;grid-row:1}
#blog .blog-card-meta{color:var(--text-muted);font:500 .72rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase}
#blog .blog-card-title{margin:.6rem 0 .7rem;font:var(--italic) var(--w-display) clamp(1.7rem,3vw,2.7rem)/1.08 var(--serif-display)}
#blog .blog-card:hover .blog-card-title{text-decoration:underline;text-decoration-color:var(--card);text-decoration-thickness:.16em;text-underline-offset:.12em}
#blog .blog-card-excerpt{color:var(--text-muted);font-size:1.02rem}
#article .article-inner{max-width:none}
#article .article-meta{justify-content:center;gap:.5rem 1.25rem;color:var(--text-muted);font:500 .74rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase}
#article .art-cat{color:var(--accent)}
#article .art-date::before{content:"";display:inline-block;width:.45rem;height:.45rem;margin-right:1rem;border-radius:50%;background:var(--cue);vertical-align:.12em}
#article .article-title{max-width:17ch;margin:1.5rem auto 2.75rem;text-align:center;font:var(--italic) var(--w-display) clamp(2.6rem,6.4vw,6rem)/.98 var(--serif-display);letter-spacing:-.015em}
#article .article-hero{max-width:68rem;margin:0 auto}
#article .article-hero figure{padding:clamp(.45rem,1vw,.85rem);background:var(--screen);border-radius:var(--gate)}
#article .article-hero img{max-height:min(70vh,40rem);background:transparent;border-radius:6px}
#article .article-hero figcaption{padding:.75rem .25rem .1rem;color:var(--night-muted);font:400 .72rem/1.55 var(--mono)}
#article .article-body,#article .service-cta{max-width:min(68ch,100%)}
#article .article-body p,#article .article-body li{font-size:1.16rem;line-height:1.8}
#article .article-body>p:first-of-type::first-letter{float:left;margin:.06em .12em 0 0;color:var(--accent);font:var(--italic) 400 4.4em/.78 var(--serif-display)}
#article .article-body h2{margin:3.5rem 0 1rem;font:var(--italic) var(--w-display) clamp(1.9rem,3.4vw,2.9rem)/1.1 var(--serif-display)}
#article .article-body h2::before{content:"";display:block;width:.75rem;height:.75rem;margin-bottom:1.1rem;border-radius:50%;background:var(--cue)}
#article .article-body h3{font:var(--italic) var(--w-display) 1.5rem/1.2 var(--serif-display)}
#article .article-body li::marker{color:var(--accent)}
#article .article-body blockquote{margin:2rem 0;padding:.25rem 0 .25rem 1.25rem;border-left:4px solid var(--card);font:italic 400 1.35rem/1.5 var(--serif-text)}
#article .article-related{margin-top:3rem;padding:1.5rem;border:1px solid var(--hair)}
#article .article-related h3{margin-top:0;color:var(--text-muted);font:600 .72rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
#article .rel-title{font:var(--italic) var(--w-display) 1.5rem/1.2 var(--serif-display)}
#article .rel-excerpt{color:var(--text-muted)}
#article .service-cta{margin-top:3.5rem;padding:clamp(1.75rem,4vw,3rem);border:0;box-shadow:10px 10px 0 var(--cue)}
#article .service-cta h2{margin-top:0;font:var(--italic) var(--w-display) clamp(1.7rem,3vw,2.4rem)/1.1 var(--serif-display)}
#article .service-cta a{color:var(--card-text);font-weight:700}
.legacy-content>.cta-block{max-width:68ch;margin:2.5rem auto 0;padding-top:1.25rem;border-top:1px solid var(--hair);color:var(--text-muted);font-size:1rem}

/* ── 15 · Notes and documents: privacy, thanks, 404 ───────────────────── */
.ci h1{margin-inline:auto;text-align:center}
.ci p{color:var(--text-muted)}
.pp-section{margin-bottom:2rem}

/* ── 16 · Responsive ──────────────────────────────────────────────────── */
@media(max-width:1180px){
 .header-inner{flex-wrap:wrap;gap:.5rem .75rem;min-height:64px;padding-block:.55rem}
 .site-header .brand{order:1;margin-right:auto}
 .experience-controls{order:2;width:auto;margin-left:0}
 .language-menu{order:3;margin-left:0}
 .js .menu-toggle{display:inline-flex;order:4}
 .site-menu{order:6;flex-basis:100%;width:100%;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:0;margin:0;padding:.4rem 0 1.4rem;counter-reset:reel-nav}
 .js .site-menu:not(.is-open){display:none}
 .site-menu a{display:flex;align-items:baseline;gap:1rem;padding:.85rem 0;border-top:1px solid var(--hair);font:var(--italic) var(--w-display) clamp(1.65rem,5.4vw,2.5rem)/1.05 var(--serif-display);letter-spacing:-.005em;text-transform:none}
 .site-menu a::before{counter-increment:reel-nav;content:counter(reel-nav,decimal-leading-zero) / "";min-width:2.2rem;color:var(--card);font:600 .72rem/1 var(--mono);letter-spacing:.14em}
 .site-menu a[aria-current=page]{box-shadow:none;color:var(--card)}
}
@media(max-width:1024px){
 .services-grid{grid-template-columns:minmax(0,1fr)}
 .service,.service:first-child{padding:2rem 0;border-left:0;border-bottom:1px solid var(--hair)}
 #blog .blog-card{grid-template-columns:clamp(4rem,9vw,6rem) minmax(0,1fr) minmax(10rem,16rem)}
}
@media(max-width:900px){
 .showcase-grid .project-row:nth-child(n){grid-template-columns:minmax(0,1fr);grid-template-rows:none;align-items:start;padding-block:clamp(2.5rem,8vw,3.5rem)}
 .showcase-grid .project-row:nth-child(n)::before,.showcase-grid .project-row:nth-child(n) .project-thumb,.showcase-grid .project-row:nth-child(n) .project-caption,.showcase-grid .project-row:nth-child(n) .project-body,.showcase-grid .project-row:nth-child(n)>p{grid-column:1;grid-row:auto}
 .showcase-grid .project-row:nth-child(n)::before{margin:0 0 1rem}
 .showcase-grid .project-row:nth-child(n) .project-thumb{aspect-ratio:16/10;margin:0 0 0}
 .showcase-grid .project-row:nth-child(n) .project-body{margin-top:1.5rem}
 .showcase-grid .project-row:nth-child(n)>p{max-width:60ch}
}
@media(max-width:860px){
 .showbook-grid{--name-size:clamp(3rem,19vw,7rem);--arch-w:clamp(9rem,min(66vw,calc((100vh - 8rem - 1.8 * var(--name-size)) / 1.5)),21rem);--arch-w:clamp(9rem,min(66vw,calc((100svh - 8rem - 1.8 * var(--name-size)) / 1.5)),21rem);grid-template-columns:minmax(0,1fr);grid-template-rows:calc(var(--name-size) * .9) auto calc(var(--name-size) * .9) auto auto auto;justify-items:center;text-align:center;padding-block:1rem 2.5rem}
 .showbook h1{grid-column:1;grid-row:1/4}
 .showbook-portrait{grid-column:1;grid-row:2}
 .showbook-line{grid-column:1;grid-row:4;justify-self:center;max-width:18ch;margin-top:1.75rem;text-align:center;font-size:clamp(1.6rem,6vw,2.3rem)}
 .showbook-intro{grid-column:1;grid-row:5;align-self:start;max-width:52ch;margin:1rem 0 1.5rem}
 .showbook .actions{grid-column:1;grid-row:6;justify-content:center}
 .showbook-portrait figcaption{left:calc(100% + .9rem);font-size:.62rem}
 .showbook-foot{justify-content:center;text-align:center}
}
@media(max-width:800px){
 .section-head,.community-intro{grid-template-columns:minmax(0,1fr)}
 .section-head h2{max-width:16ch}
 .countershot-grid,.workshop-grid{grid-template-columns:minmax(0,1fr)}
 .portrait-grid,.portrait-grid:has(h1){grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
 .portrait-grid:has(h1)>.portrait,.portrait-grid:has(h1)>div{grid-column:1;grid-row:auto}
 .portrait-section .portrait{--arch-w:min(62vw,16rem)}
 .portrait-grid:has(h1)>.portrait{--arch-w:min(66vw,18rem)}
 .portrait-grid p{margin-inline:auto}
 .credentials{justify-content:center}
 .collab-link{grid-template-columns:minmax(0,1fr)}
 .case-story>div{grid-template-columns:minmax(0,1fr);row-gap:1rem}
 .case-story>div>h2{position:static;grid-row:auto}
 .case-story>div>*:not(h2){grid-column:1}
 .case-gallery-grid{grid-template-columns:minmax(0,1fr)}
 .case-diagram-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
 .profile-facts{grid-template-columns:minmax(0,1fr)}
 .profile-facts article,.profile-facts article:nth-child(even){padding:1.75rem 0;border-left:0}
 .contact-grid{grid-template-columns:minmax(0,1fr)}
 .sol-card{grid-template-columns:minmax(0,1fr)}
 .sol-card:nth-child(even) .sol-card-body{order:0}
 .service-links{grid-template-columns:minmax(0,1fr)}
 .proc-steps{grid-template-columns:minmax(0,1fr);padding-left:.55rem}
 .proc-step{padding:0 0 2.25rem 2.25rem;border-top:0;border-left:2px solid var(--hair)}
 .proc-step::before{top:.35rem;left:-.6rem}
 .footer-bottom{flex-direction:column;justify-content:center}
}
@media(min-width:861px){
 main:has(.contact-form) .contact-form{margin-top:calc(-1 * clamp(4rem,9vw,7.5rem))}
}
@media(max-width:600px){
 .experience-controls{order:5;flex-basis:100%;width:100%;justify-content:flex-start;padding-top:.15rem}
 .site-header .brand{font-size:1.2rem}
 #blog .blog-card{grid-template-columns:auto minmax(0,1fr);gap:1rem 1.25rem}
 #blog .blog-card-visual{grid-column:1/-1;grid-row:1}
 #blog .blog-card::before{grid-row:2;font-size:3rem}
 #blog .blog-card-body{grid-row:2}
 .case-meta{grid-template-columns:minmax(0,1fr);text-align:center}
 .case-meta dt{text-align:center;padding-top:.6rem}
 .case-diagram-flow{grid-template-columns:minmax(0,1fr)}
 .next-project{box-shadow:6px 6px 0 var(--cue)}
 .contact-form,.service-detail .service-cta,#article .service-cta{box-shadow:6px 6px 0 var(--cue)}
 .showbook-foot a{margin-inline:auto}
}
@media(max-width:380px){
 .site-header .brand{font-size:1.05rem;gap:.5rem}
 .language-menu summary,.menu-toggle{padding-inline:.6rem}
}

/* ── 18 · Motion and forced colours ───────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
 .button,.showcase-grid .project-thumb,.showcase-grid .project-body h3 a,.showcase-grid .project-body h2 a{transition:none}
 .button:hover,.showcase-grid .project-thumb:hover,.legacy-content .bp:hover{transform:none}
}
@media(forced-colors:active){
 .showbook-foot,.next-project,.service-detail .service-cta,#article .service-cta,.strata [role=tabpanel]>.evidence{border:1px solid CanvasText}
 .showbook-portrait,.portrait-section .portrait,.showcase-grid .project-thumb{border:1px solid CanvasText}
 .showcase-grid .project-body h3 a,.showcase-grid .project-body h2 a{background:none}
}

/* Opus integration: typography and overview boards */
@font-face{font-family:"Bodoni Moda";src:url("/assets/fonts/opus-bodoni-moda.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/opus-newsreader.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/opus-ibm-plex-mono.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--serif-display:"Bodoni Moda","Bodoni 72","Bodoni MT",Didot,Georgia,serif;--serif-text:"Newsreader",Georgia,"Times New Roman",serif;--mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
/* Project overview boards: type only, no artwork, nothing interactive */
.type-board{--tb-paper:#efe9dc;--tb-ink:#1b1e46;--tb-accent:#e8b923;container-type:inline-size;box-sizing:border-box;display:flex;flex-direction:column;gap:.9rem;width:100%;aspect-ratio:16/10;padding:clamp(1rem,6%,3.25rem);background:var(--tb-paper);color:var(--tb-ink)}
.type-board__rule{display:block;width:clamp(2.5rem,16cqi,7rem);height:3px;margin-bottom:auto;background:var(--tb-accent)}
.type-board__name{margin:0;font-family:var(--serif-display);font-weight:500;font-size:clamp(1.4rem,10.5cqi,5.25rem);line-height:.98;letter-spacing:-.012em;text-wrap:balance;overflow-wrap:break-word}
.type-board__stack{display:flex;flex-wrap:wrap;gap:.3rem 1.25rem;margin:0;padding:.85rem 0 0;border-top:1px solid currentColor;list-style:none;font-family:var(--mono);font-size:clamp(.7rem,2.1cqi,.9rem);line-height:1.45;letter-spacing:.03em}
.type-board__stack li{margin:0;padding:0}
.type-board--rada{background:var(--tb-ink);color:var(--tb-paper)}
.type-board--rada .type-board__name{font-size:clamp(2.6rem,24cqi,10rem);letter-spacing:.04em;line-height:.9}
.type-board--supply .type-board__rule{width:100%;height:6px}
.type-board--bankruptcy{box-shadow:inset 0 0 0 1px var(--tb-ink),inset 0 0 0 5px var(--tb-paper),inset 0 0 0 6px var(--tb-ink)}
.type-board--bankruptcy .type-board__name{font-family:var(--serif-text);font-weight:400;letter-spacing:0}
.type-board--bankruptcy .type-board__rule{width:100%;height:4px;background:none;border-block:1px solid currentColor}
@media (forced-colors:active){.type-board{border:1px solid CanvasText}.type-board__rule{background:CanvasText}}

@font-face{font-family:"Bodoni Moda";src:url("/assets/fonts/opus-bodoni-moda-latin-ext.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/opus-newsreader-latin-ext.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/opus-ibm-plex-mono-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* Opus framing: consistent wells for authentic project evidence; boards fit the same frame. */
.showcase-grid .project-row:nth-child(n) .project-thumb{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:max(16px,6%);border-radius:0;background:#E2D9C8;box-shadow:inset 0 0 0 1px rgba(18,22,43,.18)}
.showcase-grid .project-row:nth-child(n) .project-thumb:hover{transform:none;box-shadow:inset 0 0 0 1px #D9542B}
.showcase-grid #cimatica.project-row .project-thumb,.showcase-grid #rada.project-row .project-thumb{background:#12162B;box-shadow:inset 0 0 0 1px rgba(237,230,216,.2)}
.showcase-grid .project-row:nth-child(n) .project-thumb img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:0;outline:1px solid rgba(18,22,43,.18);outline-offset:0}
.showcase-grid #cimatica.project-row .project-thumb img{outline-color:rgba(237,230,216,.35)}
.showcase-grid .project-row:nth-child(n) .project-thumb .type-board{width:100%;height:100%;aspect-ratio:auto;min-height:0}
@media(max-width:600px){.showcase-grid .project-row:nth-child(n) .project-thumb{aspect-ratio:16/11}}

/* Opus Journal typography; selectors expanded for the inline preview. */
main .journal-type-plate{--jp-bg:#12162B;--jp-fg:#EDE6D8;--jp-ac:#F2C230;--jp-em:#D9542B;position:relative;display:flex;align-items:flex-end;box-sizing:border-box;width:100%;height:auto;min-height:100%;aspect-ratio:16/10;margin:0;padding:1.5rem 8% 7% calc(8% + .4rem);overflow:hidden;container-type:inline-size;background:radial-gradient(120% 90% at 100% 0,rgba(242,194,48,.14),transparent 60%),var(--jp-bg);color:var(--jp-fg);text-decoration:none}
main .journal-type-plate::before{content:'';position:absolute;inset:.5rem 0 auto;height:.3rem;background:repeating-linear-gradient(90deg,transparent 0 .5rem,currentColor .5rem 1.05rem);opacity:.2}
main .journal-type-plate::after{content:'';position:absolute;inset:0 auto 0 0;width:.4rem;background:var(--jp-em)}
main .journal-type-title{display:block;overflow:visible;max-width:18ch;padding-top:.45em;background:linear-gradient(var(--jp-ac),var(--jp-ac)) 0 0/2.4em .11em no-repeat;color:var(--jp-fg);font-family:var(--serif-display);font-weight:600;font-size:clamp(1.3rem,4vw,2.6rem);font-size:clamp(1.3rem,8.5cqi,3.2rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
#article .journal-type-plate{aspect-ratio:21/9;min-height:15rem;padding-bottom:5%}
#article .journal-type-title{max-width:20ch;font-size:clamp(2rem,6vw,5.25rem);font-size:clamp(2rem,7cqi,5.25rem)}
#blog .blog-card:where(:nth-of-type(4n+2)) .journal-type-plate{--jp-bg:#EDE6D8;--jp-fg:#12162B;--jp-ac:#D9542B;--jp-em:#12162B}
#blog .blog-card:where(:nth-of-type(4n+3)) .journal-type-plate{--jp-bg:#D9542B;--jp-fg:#12162B;--jp-ac:#EDE6D8;--jp-em:#F2C230}
#blog .blog-card:where(:nth-of-type(4n)) .journal-type-plate{--jp-fg:#F2C230;--jp-ac:#EDE6D8;--jp-em:#F2C230}
@media (prefers-reduced-motion:no-preference){#blog .journal-type-plate::after{transition:width .35s ease}#blog .blog-card:hover .journal-type-plate::after,#blog .blog-card:focus-visible .journal-type-plate::after{width:.9rem}}
@media (max-width:640px){#article .journal-type-plate{aspect-ratio:4/3;min-height:0}#blog .journal-type-title{-webkit-line-clamp:5}}
.cyber .journal-type-plate{--jp-bg:#05060D;--jp-fg:#FFFFFF;--jp-ac:#F2C230;--jp-em:#D9542B;box-shadow:inset 0 0 0 1px rgba(242,194,48,.6)}
.cyber .journal-type-plate::before{opacity:.35}
@media (forced-colors:active){main .journal-type-plate{border:1px solid CanvasText}main .journal-type-plate::before,main .journal-type-plate::after{display:none}}
#blog .blog-card-visual{overflow:visible}


/* Keep light project screenshots on the light mat specified by the Opus framing brief. */
.showcase-grid #dream-home.project-row .project-thumb,.showcase-grid #clubperfumes.project-row .project-thumb,.showcase-grid #roamly.project-row .project-thumb,.showcase-grid #carniceria-raul.project-row .project-thumb{background:#E2D9C8}