/* Gabriele Tealdo — Portfolio. Minimal editorial: neutral system + single purple accent. */
:root{
  --ink:#0A0A0A;        /* primary text */
  --paper:#FAFAFA;      /* background */
  --grey:#6E6E6E;       /* secondary text, metadata, nav */
  --line:#E4E4E4;
  --hairline:rgba(10,10,10,.12);
  --accent:#5B4DDB;     /* interactive + hero accent, used sparingly */
  --ease:cubic-bezier(.22,1,.36,1);
  --pad-x:clamp(24px,6vw,120px);
  --sect:clamp(110px,17vh,200px);
}
/* One colour per project, taken from the darkest shade of that project's own mockup
   palette — the carousel tints themselves are far too pale to read as text. Each title
   wears its project's colour in both places it appears: the Selected work carousel and
   the case-study hero. */
:root{--p-unimate:#35219A;--p-clarity:#295C7C;--p-homelinkher:#A8636F;--p-invalle:#14584F;--p-uniborrow:#7862A8}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
/* Zero-specificity floor: an unsized inline SVG can never fall back to its intrinsic box. */
:where(svg:not([width]):not([height])){width:1em;height:1em}
body{background:var(--paper);color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-size:clamp(16px,1.15vw,19px);line-height:1.6;font-weight:400;overflow-x:hidden}
::selection{background:var(--ink);color:var(--paper)}
a{color:var(--ink);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--accent)}
img{max-width:100%;display:block}

/* Display type */
.display{font-family:"Inter Tight","Inter",sans-serif;font-weight:500;line-height:1.0;letter-spacing:-.03em}
h1,h2,h3{font-family:"Inter Tight","Inter",sans-serif;font-weight:500;letter-spacing:-.03em;line-height:1.0}

/* Micro labels */
.label{font-family:"Inter",sans-serif;font-weight:500;font-size:clamp(11px,.78vw,13px);letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}

/* Layout */
.wrap{padding-left:var(--pad-x);padding-right:var(--pad-x)}
section{padding-top:var(--sect);padding-bottom:var(--sect)}
.rule{height:1px;background:var(--hairline);border:0;width:100%}

/* Nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;padding:14px var(--pad-x);background:rgba(250,250,250,.62);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid rgba(10,10,10,.07);transition:background .3s var(--ease)}
nav .brand{justify-self:start;font-family:"Inter Tight",sans-serif;font-weight:500;letter-spacing:-.02em;font-size:16px;color:var(--ink)}
nav .brand:hover{color:var(--ink);opacity:.7}
nav .navlinks{justify-self:center;display:flex;gap:clamp(24px,3vw,48px)}
nav .navlinks a{font-family:"Inter",sans-serif;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
nav .navlinks a:hover{color:var(--ink)}
/* Pill copy-email button */
.nav-email{justify-self:end;display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:11px 20px;font-family:"Inter",sans-serif;font-weight:500;font-size:clamp(11px,.85vw,13px);letter-spacing:.02em;line-height:1;cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease)}
.nav-email:hover{background:#262626;transform:translateY(-1px)}
.nav-email:active{transform:translateY(0)}
.nav-email svg{width:16px;height:16px;flex:none}
.nav-email .ic-check{display:none}
.nav-email.copied{background:var(--accent)}
.nav-email.copied .ic-copy{display:none}
.nav-email.copied .ic-check{display:inline}
nav .navgroup{position:relative}
/* Invisible hover bridge: spans the visual gap under the trigger AND the panel's
   width, so a diagonal pointer move never leaves the group. */
nav .navgroup::after{content:"";position:absolute;top:100%;left:0;width:max(100%,180px);height:24px;pointer-events:none}
nav .navgroup:hover::after,nav .navgroup:focus-within::after,nav .navgroup.navopen::after{pointer-events:auto}
nav .navtop{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;font-family:"Inter",sans-serif;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);transition:color .2s var(--ease)}
nav .navtop svg{width:14px;height:14px;transition:transform .25s var(--ease)}
nav .navgroup:hover .navtop,nav .navgroup:focus-within .navtop{color:var(--ink)}
nav .navgroup:hover .navtop svg,nav .navgroup:focus-within .navtop svg,nav .navgroup.navopen .navtop svg{transform:rotate(180deg)}
nav .navgroup.navopen .navtop{color:var(--ink)}
nav .navmenu{position:absolute;top:calc(100% + 18px);left:0;min-width:172px;display:flex;flex-direction:column;gap:14px;padding:18px 22px;background:#fff;border-radius:10px;box-shadow:0 18px 40px -18px rgba(10,10,10,.28),0 2px 8px rgba(10,10,10,.06);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
nav .navmenu a{display:block;margin:-7px -22px;padding:7px 22px;font-family:"Inter",sans-serif;font-weight:400;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap}
nav .navmenu a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:6px}
nav .navgroup.navclosed .navmenu{opacity:0!important;transform:translateY(-6px)!important;pointer-events:none!important}
nav .navmenu a:hover{color:var(--accent)}
nav .navgroup:hover .navmenu,nav .navgroup:focus-within .navmenu,nav .navgroup.navopen .navmenu{opacity:1;transform:none;pointer-events:auto}
@media(max-width:680px){nav .navlinks{display:none}}
#work,#research,#story{scroll-margin-top:88px}

/* Hero */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(120px,18vh,200px);padding-bottom:clamp(48px,8vh,90px);position:relative}
.hero-eyebrow{display:block;margin-bottom:clamp(14px,1.8vh,22px)}
.hero-h1{font-family:"Inter",system-ui,sans-serif;font-weight:500;letter-spacing:.02em;line-height:.92;font-kerning:normal;font-feature-settings:"kern" 1;font-size:clamp(30px,4.6vw,72px);color:#111111;white-space:nowrap}
.hero-h2{font-family:"Libre Baskerville",Georgia,serif;font-weight:400;color:var(--accent);letter-spacing:-.02em;line-height:1.03;font-size:clamp(30px,4.3vw,66px);max-width:690px;margin-top:clamp(30px,min(4.9vw,7.6vh),62px)}
.hero-h2 em{font-style:italic}
.hero-body{margin-top:clamp(18px,2.2vh,27px);max-width:88ch;font-size:clamp(16px,1.28vw,19px);line-height:1.75;color:var(--ink)}
.hero-next{align-self:center;margin-top:clamp(72px,9vh,120px);display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(10,10,10,.55);font-family:"Inter",sans-serif;font-weight:400;font-size:clamp(15px,1.15vw,18px);letter-spacing:0;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.hero-next em{font-family:"Libre Baskerville",Georgia,serif;font-style:italic}
.hero-next svg{width:22px;height:22px;flex:none}
.scrollcue{position:static;width:100%;text-align:center;z-index:5;font-family:"Inter",sans-serif;font-weight:500;font-size:clamp(12px,.97vw,15px);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66);transition:opacity .3s var(--ease)}
.hero .eyebrow{margin-bottom:clamp(28px,5vh,56px);display:flex;flex-wrap:wrap;gap:10px}
.tag{font-family:"Inter",sans-serif;font-weight:500;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);border:1px solid var(--hairline);border-radius:999px;padding:7px 15px;line-height:1}
.hero-lede{display:flex;align-items:center;gap:clamp(24px,3.5vw,56px)}
.hero-col{display:flex;flex-direction:column;min-width:0}
.hero-portrait{flex:none;width:clamp(150px,24vw,360px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#EDEDED}
.hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:72% 28%}
.hero-title{font-family:"Libre Baskerville",Georgia,serif;font-weight:400;color:var(--accent);letter-spacing:-.02em;line-height:1.08;font-size:clamp(30px,6vw,92px)}
.hero-title em{font-style:italic}
@media(max-width:680px){.hero-lede{flex-direction:column;align-items:flex-start;gap:clamp(24px,5vh,40px)}}
.hero .sub{margin-top:clamp(28px,4vh,48px);max-width:44ch;font-size:clamp(18px,1.5vw,24px);color:var(--ink);line-height:1.45}
.hero .sub .muted{color:var(--grey)}
.hero .meta{margin-top:clamp(48px,8vh,96px);display:grid;grid-template-columns:1fr;gap:clamp(28px,3vw,44px);border-top:1px solid var(--hairline);padding-top:clamp(28px,4vh,44px)}
@media(min-width:760px){.hero .meta{grid-template-columns:1fr 1.15fr 1fr;gap:clamp(32px,4vw,64px)}}
.hero .meta .item{display:flex;flex-direction:column;gap:14px}
.hero .meta .item .label{margin:0}
.hero .meta .item .k{font-size:16px;line-height:1.5;color:var(--grey);max-width:32ch}
.hero .meta .item .k strong{font-family:"Inter Tight",sans-serif;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.hero .meta .item-flagship{position:relative}
@media(min-width:760px){.hero .meta .item-flagship{padding:0 clamp(24px,3vw,48px);border-left:1px solid var(--hairline);border-right:1px solid var(--hairline)}}
.hero .meta .item-flagship .k{color:var(--ink)}
.hero .meta .item-flagship .k strong{color:var(--accent)}
.impact-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.impact-list li{display:flex;align-items:baseline;gap:11px;font-size:16px;line-height:1.4;color:var(--ink)}
.impact-list .ico{flex:none;font-size:15px;line-height:1}
.edaccent{font-family:"Libre Baskerville",Georgia,serif!important;font-style:italic}

/* Section header */
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:clamp(48px,8vh,90px)}
.shead h2{font-size:clamp(28px,3vw,44px)}

/* Work rows */
.work-list{border-top:1px solid var(--hairline)}
.work-row{display:block;border-bottom:1px solid var(--hairline);padding:clamp(26px,3.4vw,44px) 0;position:relative}
.work-row .inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,3vw,48px)}
.work-row .idx{font-family:"Inter",sans-serif;font-weight:500;font-size:13px;color:var(--grey);letter-spacing:.06em;width:2.5em}
.work-row .ttl{font-family:"Inter Tight",sans-serif;font-weight:500;letter-spacing:-.03em;line-height:1.02;font-size:clamp(30px,5.2vw,72px);transition:transform .5s var(--ease),opacity .5s var(--ease)}
.work-row .rgt{display:flex;align-items:center;gap:clamp(16px,2.5vw,40px);justify-self:end}
.work-row .cat{text-align:right;max-width:20ch}
.work-row .arw{width:clamp(28px,3vw,44px);height:clamp(28px,3vw,44px);flex:none;transition:transform .5s var(--ease);opacity:.25}
.work-row:hover .ttl{transform:translateX(clamp(10px,1.6vw,28px))}
.work-row:hover .arw{transform:translate(6px,-6px);opacity:1}
@media(max-width:760px){
  .work-row .inner{grid-template-columns:1fr auto;grid-template-areas:"idx arw" "ttl ttl" "cat cat";row-gap:14px}
  .work-row .idx{grid-area:idx}.work-row .ttl{grid-area:ttl}
  .work-row .rgt{grid-area:cat;justify-self:start}.work-row .cat{text-align:left}
  .work-row .arw{grid-area:arw;justify-self:end}
}

/* ===== Research & publications — the Selected work carousel, one document per slide.
   Cover on the left, document copy on the right, publication date in place of the
   project counter, and each document's institution as a faded backdrop. ===== */
.rsw{--sw-fg:#9E1B32;--gnav-fg:var(--sw-fg)}
.rsw.r0{--sw-fg:#9E1B32}.rsw.r1{--sw-fg:#96131F}
.rsw .sw-bg[data-i="0"]{background:linear-gradient(152deg,#FDF7F6 0,#F7E9E8 46%,#EFD6D6 100%)}
.rsw .sw-bg[data-i="1"]{background:linear-gradient(152deg,#FCF8F1 0,#F6ECDC 44%,#EFE0D2 100%)}
/* The institution's mark, not a picture of it: contained, faded, and dissolved into the
   gradient by a radial mask so the source image has no visible edge. */
.rsw-mark{position:absolute;inset:0;display:block;background-repeat:no-repeat;background-position:88% 54%;background-size:min(42vw,470px) auto;opacity:.085;-webkit-mask-image:radial-gradient(52% 52% at 88% 54%,#000 0,rgba(0,0,0,.8) 44%,rgba(0,0,0,.3) 70%,transparent 100%);mask-image:radial-gradient(52% 52% at 88% 54%,#000 0,rgba(0,0,0,.8) 44%,rgba(0,0,0,.3) 70%,transparent 100%)}
.rsw .sw-bg[data-i="0"] .rsw-mark{background-image:url("assets/unitn-logo.png")}
.rsw .sw-bg[data-i="1"] .rsw-mark{background-image:url("assets/clicit-logo.png");opacity:.075;background-size:min(46vw,520px) auto}
/* Cover left, copy right — the one departure from Selected work's arrangement. */
.rsw .sw-slide{grid-template-columns:clamp(190px,22vw,330px) minmax(0,1fr);column-gap:clamp(28px,4vw,84px)}
.rsw-cover{display:flex;align-items:center;justify-content:center;height:100%;min-width:0}
.rsw-cover img{width:100%;height:auto;max-height:min(62vh,600px);object-fit:contain;border-radius:6px;background:#fff;box-shadow:0 18px 46px -24px rgba(10,10,10,.34),0 0 0 1px var(--hairline);-webkit-user-drag:none;user-select:none}
.rsw .sw-copy{max-width:56ch;gap:clamp(12px,1.7vh,20px)}
/* The date reads from the right, flush with the trailing edge of the title block. */
.rsw .sw-rail{margin-top:clamp(4px,.7vh,10px)}
.rsw .sw-next{margin-top:clamp(18px,2.8vh,38px)}
.rsw .sw-next svg{animation:breathe 2s ease-in-out .45s infinite alternate}
.rsw-date{align-self:stretch;text-align:right;text-transform:uppercase;letter-spacing:.16em}
.rsw .sw-title.rsw-title{color:var(--ink);font-size:clamp(23px,2.5vw,40px);line-height:1.14;letter-spacing:-.015em;text-wrap:pretty}
@media(max-width:680px){
  .rsw .sw-slide{grid-template-columns:1fr}
  .rsw-cover img{max-height:34vh}
  .rsw-date{text-align:left}
}
@media(max-width:1100px){.rs-item{grid-template-columns:5em clamp(130px,16vw,180px) minmax(0,1fr);row-gap:22px}}
@media(max-width:760px){.rs-head{grid-template-columns:1fr;align-items:start}.rs-item{grid-template-columns:1fr;gap:18px}.rs-cover{max-width:200px}}}}

/* Experience */
.xp{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.xp-row{display:grid;grid-template-columns:6em 1fr;gap:clamp(20px,4vw,64px);padding:clamp(26px,3.2vw,42px) 0;border-bottom:1px solid var(--hairline)}
.xp-row .yr{font-size:14px;color:var(--grey);letter-spacing:.03em;padding-top:6px}
.xp-row .role{font-family:"Inter Tight",sans-serif;font-weight:500;letter-spacing:-.02em;font-size:clamp(22px,2.4vw,34px);line-height:1.05}
.xp-row .org{color:var(--grey);margin-top:6px;font-size:16px}
.xp-row .desc{margin-top:16px;max-width:62ch;color:var(--ink)}
@media(max-width:600px){.xp-row{grid-template-columns:1fr;gap:10px}}

/* Recognition */
.recog{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.recog .cell{background:var(--paper);padding:clamp(28px,3vw,44px)}
.recog .cell .yr{font-size:13px;color:var(--grey);letter-spacing:.04em}
.recog .cell .rt{font-family:"Inter Tight",sans-serif;font-weight:500;letter-spacing:-.02em;font-size:clamp(21px,2vw,27px);line-height:1.1;margin-top:18px}
.recog .cell .rd{color:var(--grey);margin-top:12px;font-size:15px;line-height:1.5}

/* Closing hero */
.close{position:relative;isolation:isolate;overflow:hidden;background:var(--paper);min-height:min(100vh,940px);display:flex;transition:background-color .9s var(--ease)}
.close.is-per{background:#FAF7F0}
/* Two photographs in the same frame, cross-faded with the gradient. The skate frame
   carries its own soft mask so its edge dissolves into the warm gradient. */
.close-bg{position:absolute;right:0;top:0;width:min(72%,1180px);height:100%;object-fit:cover;object-position:52% 46%;z-index:0;filter:contrast(.94) brightness(1.06) saturate(.92);transition:opacity .9s var(--ease)}
.cb-per{opacity:0;object-position:56% 40%;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,.45) 16%,#000 40%);mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,.45) 16%,#000 40%)}
.close.is-per .cb-pro{opacity:0}
.close.is-per .cb-per{opacity:1}
.close-veil{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .9s var(--ease);background:linear-gradient(to right,var(--paper) 0,var(--paper) 30%,rgba(250,250,250,.97) 40%,rgba(250,250,250,.86) 50%,rgba(250,250,250,.6) 62%,rgba(250,250,250,.38) 76%,rgba(250,250,250,.26) 100%),linear-gradient(to bottom,rgba(250,250,250,.6) 0,transparent 26%,transparent 62%,rgba(250,250,250,.55) 100%)}
.close-veil-per{opacity:0;transition:opacity .9s var(--ease);background:linear-gradient(to right,#FAF7F0 0,#FAF7F0 30%,rgba(250,245,234,.95) 40%,rgba(250,242,228,.8) 50%,rgba(250,238,218,.5) 62%,rgba(250,235,212,.26) 76%,rgba(250,233,208,.14) 100%),radial-gradient(58% 72% at 6% 82%,rgba(244,168,56,.26) 0,rgba(244,168,56,0) 72%),radial-gradient(44% 52% at 26% 4%,rgba(24,20,16,.12) 0,rgba(24,20,16,0) 74%),linear-gradient(to bottom,rgba(250,247,240,.42) 0,transparent 24%,transparent 64%,rgba(250,243,228,.42) 100%)}
.close.is-per .close-veil-per{opacity:1}
.close.is-per .close-veil:not(.close-veil-per){opacity:0}
.close-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-top:var(--sect);padding-bottom:clamp(30px,5vh,56px)}
/* Editorial state switch: type only, the selected label carries a hairline underline. */
.close-tabs{display:flex;align-items:center;gap:clamp(10px,1vw,16px)}
.ctab{position:relative;background:none;border:0;padding:0 0 6px;font-family:"Inter",sans-serif;font-weight:500;font-size:clamp(11px,.78vw,13px);letter-spacing:.16em;text-transform:uppercase;color:#A2A2A2;opacity:.78;cursor:pointer;transition:color .35s var(--ease),opacity .35s var(--ease)}
.ctab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.ctab:hover{color:var(--grey);opacity:.92}
.ctab.is-on{color:var(--ink);opacity:1}
.ctab.is-on::after{transform:scaleX(1)}
.ctab:focus-visible{outline:2px solid var(--ink);outline-offset:5px;border-radius:3px}
.close.is-per .ctab.is-on{color:#1A1613}
.ctab-sep{color:#C9C4BC;opacity:.9;pointer-events:none;user-select:none;padding-bottom:6px}
/* Both states share one grid cell, so switching cannot change the section height. */
.close-swap{display:grid}
.close-state{grid-area:1/1;visibility:hidden}
.close-state.is-live{visibility:visible}
.close-state-per .close-title em{color:#F4A838}
.close-state-per .close-mail a:hover{color:#F4A838}
.close-state-per .close-mail a:focus-visible{outline-color:#F4A838}
.close-state-per .clink::after{background:#F4A838}
.close-copy{max-width:min(50ch,54%)}
.close-title{margin-top:28px;font-size:clamp(34px,4.6vw,68px);line-height:1.03;letter-spacing:-.03em;text-wrap:pretty}
.close-title em{font-family:"Libre Baskerville",Georgia,serif;font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-.02em}
.close-p{margin-top:clamp(24px,3.2vh,38px);max-width:52ch;color:var(--grey);font-size:clamp(15px,1.12vw,18px);line-height:1.7;text-wrap:pretty}
.close-mail{margin-top:clamp(28px,3.6vh,44px);font-family:"Inter Tight",sans-serif;font-weight:500;letter-spacing:-.02em;font-size:clamp(20px,2vw,30px);white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Static separator between LinkedIn and CV — never part of either hit area. */
.cmdiv{display:inline-block;padding:0 .42em;color:var(--grey);opacity:.5;pointer-events:none;user-select:none}
.cmpre{color:var(--ink)}
.cv-soon{cursor:pointer}
.close-mail a:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:3px}
.close-cta{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(26px,3.4vh,42px);font-family:"Inter",sans-serif;font-weight:500;font-size:clamp(11px,.78vw,13px);letter-spacing:.16em;text-transform:uppercase;color:var(--grey);transition:opacity .3s var(--ease),transform .3s var(--ease),color .3s var(--ease)}
.close-cta svg{width:18px;height:18px;flex:none}
a.close-cta:hover{color:var(--ink);opacity:.72;transform:translateY(-3px)}
a.close-cta:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:4px}
.clink{display:inline-block;position:relative}
.clink::after{content:"";position:absolute;left:0;bottom:.08em;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.clink:hover::after{transform:scaleX(1)}
.footer-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;margin-top:clamp(56px,9vh,120px);padding-top:28px;border-top:1px solid var(--hairline)}
.footer-links{display:flex;flex-wrap:wrap;gap:clamp(18px,2.5vw,40px)}
@media(max-width:900px){.close{min-height:0}.close-bg{width:100%;opacity:.9}.cb-per{opacity:0;object-position:52% 30%;-webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 48%,rgba(0,0,0,0) 80%);mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 48%,rgba(0,0,0,0) 80%)}.close.is-per .cb-per{opacity:.9}.close-veil{background:linear-gradient(to bottom,rgba(250,250,250,.9) 0,rgba(250,250,250,.97) 34%,var(--paper) 52%)}.close-veil-per{background:linear-gradient(to bottom,rgba(250,247,240,.62) 0,rgba(250,245,234,.9) 30%,#FAF7F0 52%),radial-gradient(70% 30% at 12% 92%,rgba(244,168,56,.26) 0,rgba(244,168,56,0) 76%)}.close-copy{max-width:none}.close-inner{padding-top:clamp(240px,42vh,420px)}}
@media(prefers-reduced-motion:reduce){.close-state{transition:opacity .28s linear}}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal,.stagger>*{opacity:1;transform:none;transition:none}}
@media(max-width:680px){.hero-h1{white-space:normal}}
a.hero-next.reveal.in{transition:opacity .3s var(--ease),transform .3s var(--ease)}
a.hero-next:hover,a.sw-next:hover{color:rgba(10,10,10,.55);opacity:.72;transform:translateY(-3px)}
a.hero-next:focus-visible,a.sw-next:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:4px}

/* ===== Story / milestones pinned scroll ===== */
.story{position:relative;height:560vh;background:var(--ink);padding:0;border-radius:clamp(20px,2.4vw,40px)}
.story-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:clamp(20px,2.4vw,40px)}
.story-center{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,40px)}
.story-bg{position:static;left:auto;right:auto;top:auto;transform:none;width:100%;text-align:center;font-family:"Libre Baskerville",Georgia,serif;font-style:italic;font-size:clamp(56px,15vw,220px);color:#fff;opacity:1;letter-spacing:-.03em;line-height:1;pointer-events:none;user-select:none;padding:0 var(--pad-x)}
.story.story-light{background:var(--paper)}
#process.story{height:440vh}
/* Seven chapters instead of four: the pin grows so each card keeps the same
   amount of scroll to travel through the frame. */
#story.story{height:900vh}
.story-light .story-bg{color:var(--ink)}
.story-light .scrollcue{color:rgba(10,10,10,.5)}
.story-light .mcard{box-shadow:0 40px 90px -42px rgba(10,10,10,.34)}
#process .story-photo,#story .story-photo{inset:clamp(28px,3.4vw,56px) 5.5%;border-radius:clamp(12px,1.4vw,20px);overflow:hidden}
/* Framed so the team and the certificate stay in view as the crop narrows. */
#story .story-photo img{object-position:center 34%}
#story.story,#story.story.story-light{background:radial-gradient(120% 92% at 10% 6%,rgba(122,203,220,.42) 0,rgba(122,203,220,0) 62%),radial-gradient(104% 82% at 90% 20%,rgba(166,220,234,.34) 0,rgba(166,220,234,0) 60%),radial-gradient(92% 72% at 80% 88%,rgba(246,203,192,.28) 0,rgba(246,203,192,0) 66%),radial-gradient(112% 84% at 18% 94%,rgba(245,233,216,.5) 0,rgba(245,233,216,0) 70%),linear-gradient(168deg,#F1FAFC 0,#E9F4F8 46%,#FBF3EA 100%)}
#story .story-sticky{background:transparent}
#story .story-veil{background:radial-gradient(120% 92% at 10% 6%,rgba(122,203,220,.42) 0,rgba(122,203,220,0) 62%),radial-gradient(104% 82% at 90% 20%,rgba(166,220,234,.34) 0,rgba(166,220,234,0) 60%),radial-gradient(92% 72% at 80% 88%,rgba(246,203,192,.28) 0,rgba(246,203,192,0) 66%),radial-gradient(112% 84% at 18% 94%,rgba(245,233,216,.5) 0,rgba(245,233,216,0) 70%),linear-gradient(168deg,#F1FAFC 0,#E9F4F8 46%,#FBF3EA 100%)}
#process .story-photo img,#story .story-photo img{border-radius:inherit}
.story-photo{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.story-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.story-veil{position:absolute;inset:0;background:var(--paper,#fff);opacity:0}
.story-photo~.story-stage{z-index:2}
.story-cue2{position:absolute;left:0;right:0;bottom:clamp(56px,7vh,96px);z-index:1;display:flex;justify-content:center;pointer-events:none;transition:opacity .25s var(--ease)}
.story-cue2 .sc-inner,.story-next .sc-inner{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 22px;border-radius:999px;font-family:"Inter",sans-serif;font-weight:500;font-size:clamp(15px,1.35vw,21px);letter-spacing:.01em;text-align:center;text-wrap:balance;backdrop-filter:blur(6px);animation:breathe 2s ease-in-out infinite alternate}
.story-cue2 em,.story-next .sc-inner em{font-family:"Libre Baskerville",Georgia,serif;font-style:italic}
.story-cue2 svg,.story-next .sc-inner svg{width:24px;height:24px;flex:none}
.story-cue2.sc-light .sc-inner,.story-next .sc-inner.sc-light{color:#fff;background:rgba(10,10,10,.22);text-shadow:0 1px 10px rgba(10,10,10,.35)}
.story-cue2.sc-dark .sc-inner,.story-next .sc-inner.sc-dark{color:rgba(10,10,10,.78);background:rgba(255,255,255,.34);text-shadow:0 1px 10px rgba(255,255,255,.5)}
@media(min-width:900px){.story-cue2 .sc-inner span,.story-next .sc-inner span{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.story-cue2 .sc-inner,.story-next .sc-inner{animation:none}}
.story-stage{position:absolute;inset:0;pointer-events:none;z-index:2}
.mcard{position:absolute;top:50%;left:50%;width:min(40vw,620px);aspect-ratio:1.25/1;border-radius:22px;overflow:hidden;background:#151515;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);will-change:transform,opacity;pointer-events:none}
.mcard>img,.mcard>.imgslot,.mcard>.mcard-duo{width:100%;height:100%;object-fit:cover;display:block;transition:filter .32s var(--ease),transform .32s var(--ease)}
.mcard>.imgslot{display:flex;align-items:center;justify-content:center;border:0;border-radius:0;background:#1E1E1E}
.mcard>.imgslot .label{color:rgba(255,255,255,.72)}
.mcard::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,.55);opacity:0;transition:opacity .32s var(--ease);pointer-events:none}
.mcard:hover>img,.mcard:focus-visible>img,.mcard:focus-within>img,.mcard.open>img,.mcard:hover>.imgslot,.mcard:focus-visible>.imgslot,.mcard:focus-within>.imgslot,.mcard.open>.imgslot,.mcard:hover>.mcard-duo,.mcard:focus-visible>.mcard-duo,.mcard:focus-within>.mcard-duo,.mcard.open>.mcard-duo{filter:blur(7px) brightness(.72);transform:scale(1.06)}
.mcard:hover::after,.mcard:focus-visible::after,.mcard:focus-within::after,.mcard.open::after{opacity:1}
.mcard-ov{--ov-pad:clamp(20px,2.6vw,30px);--cta-h:44px;position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:9px;padding:var(--ov-pad);color:#fff;opacity:0;transform:translateY(10px);transition:opacity .32s var(--ease),transform .32s var(--ease);z-index:2}
/* Card CTAs sit at the foot of the copy column — last flex item, pushed down by an auto
   top margin, so every card's button lands bottom-left on the same inset as its text and
   long copy simply meets it at the overlay's own gap instead of running underneath. */
.mcard:hover .mcard-ov,.mcard:focus-visible .mcard-ov,.mcard:focus-within .mcard-ov,.mcard.open .mcard-ov{opacity:1;transform:none}
.mcard-label{font-family:"Inter",sans-serif;font-weight:500;font-size:clamp(15px,1.4vw,19px);letter-spacing:-.01em;color:#fff}
.mcard-lead{font-family:"Libre Baskerville",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.015em;line-height:1.25;font-size:clamp(17px,4.9cqh,27px);color:#fff;margin:0 0 clamp(2px,.9cqh,8px);max-width:22ch;text-wrap:pretty}
.mcard-txt{font-family:"Inter",sans-serif;font-weight:400;font-size:clamp(13px,1vw,15px);line-height:1.45;margin:0;color:rgba(255,255,255,.88)}
.mcard[data-i="0"],.mcard[data-i="1"],.mcard[data-i="2"],.mcard[data-i="3"],.mcard[data-i="4"],.mcard[data-i="5"],.mcard[data-i="6"]{width:auto;height:min(74vh,700px);aspect-ratio:1/1.16;container-type:size}
.mcard[data-i="0"] .mcard-txt,.mcard[data-i="1"] .mcard-txt,.mcard[data-i="2"] .mcard-txt,.mcard[data-i="3"] .mcard-txt,.mcard[data-i="4"] .mcard-txt,.mcard[data-i="5"] .mcard-txt,.mcard[data-i="6"] .mcard-txt{font-size:clamp(11px,2.85cqh,15px);line-height:1.45}
.mcard[data-i="0"] .mcard-ov,.mcard[data-i="1"] .mcard-ov,.mcard[data-i="2"] .mcard-ov,.mcard[data-i="3"] .mcard-ov,.mcard[data-i="4"] .mcard-ov,.mcard[data-i="5"] .mcard-ov,.mcard[data-i="6"] .mcard-ov{--ov-pad:clamp(14px,4.4cqh,30px);--cta-h:clamp(34px,8.5cqh,50px);gap:clamp(6px,1.9cqh,12px);padding:var(--ov-pad)}
.mcard[data-i="0"] .mcard-label,.mcard[data-i="1"] .mcard-label,.mcard[data-i="2"] .mcard-label,.mcard[data-i="3"] .mcard-label,.mcard[data-i="4"] .mcard-label,.mcard[data-i="5"] .mcard-label,.mcard[data-i="6"] .mcard-label{font-size:clamp(13px,4.1cqh,19px)}
#story .mcard[data-i="4"]{background:#883be1}
/* The scholarship announcement is a document: shown whole on white, never cropped. */
#story .mcard[data-i="6"]{background:#fff}
#story .mcard[data-i="6"]>img{object-fit:contain;padding:clamp(6px,1.4vw,20px)}
#story .mcard[data-i="4"]>img{object-fit:contain;padding:clamp(8px,1.6vw,26px)}
#story .mcard[data-i="3"]:hover>img,#story .mcard[data-i="3"]:focus-visible>img,#story .mcard[data-i="3"]:focus-within>img,#story .mcard[data-i="3"].open>img{filter:blur(8px) brightness(.34)}
/* Copy-dense process card: floors scale with the container so a short card
   (74vh on laptops) still fits lead + body + CTA without clipping. */
.mcard.mcard-dense .mcard-ov{--ov-pad:clamp(12px,3.5cqh,28px);--cta-h:clamp(30px,7.5cqh,44px);gap:clamp(3px,1.2cqh,10px);padding:var(--ov-pad)}
.mcard.mcard-dense .mcard-label{font-size:clamp(11px,3.4cqh,18px)}
.mcard.mcard-dense .mcard-lead{font-size:clamp(13px,4cqh,24px);line-height:1.2;margin-bottom:0;max-width:26ch}
.mcard.mcard-dense .mcard-txt{font-size:clamp(9.5px,2.45cqh,14px);line-height:1.38}
.mcard.mcard-dense .mcard-cta{font-size:clamp(10px,2.4cqh,12px);padding:clamp(6px,1.5cqh,9px) clamp(11px,3cqh,16px)}
/* Text-only process card: no media, copy visible without hover. Each case study's cards
   carry that project's own colour — the same token its title wears — falling back to the
   near-black used elsewhere. */
.mcard-text{background:var(--project-card,var(--project,#151515))}
.mcard-text .mcard-txt{color:rgba(255,255,255,.94)}
.mcard-text .mcard-ov{opacity:1;transform:none;justify-content:flex-start}
.mcard-text::after,.mcard-text:hover::after,.mcard-text:focus-visible::after,.mcard-text:active::after,.mcard-text.open::after{content:none;opacity:0;background:none}
.mcard-text .mcard-txt{max-width:48ch}
.mcard-cta{margin-top:auto;align-self:flex-start;font-family:"Inter",sans-serif;font-weight:500;font-size:12px;letter-spacing:.04em;color:#0A0A0A;background:#fff;border-radius:999px;padding:9px 16px;transition:background .2s var(--ease),color .2s var(--ease)}
.mcard .mcard-ov{--cta-inset:clamp(16px,1.5vw,26px)}
.mcard-cta:hover{background:rgba(255,255,255,.82);color:#0A0A0A}
/* The sentence that hands off to the CTA: the serif, at body size and body rhythm, in
   full-strength white — an invitation rather than more prose. One shared class, so every
   card's hand-off line reads the same. */
.mcard-inv{font-family:"Libre Baskerville",Georgia,serif;font-style:italic;color:#fff}
/* Inline serif and inline figure, for a phrase or a number that carries weight inside
   body copy — never a display statistic. */
.txt-ser{font-family:"Libre Baskerville",Georgia,serif;font-style:italic}
/* HomeLinkHer's problem card runs two long paragraphs above its CTA: its body type keys
   off the card's own height, like the dense cards, so the copy and button stay inside the
   frame on short windows instead of relying on the viewport-based floor. */
.theme-hlh .mcard[data-i="0"] .mcard-txt{font-size:clamp(10px,2.55cqh,15px);line-height:1.36}
.txt-fig{font-weight:400;color:#fff}
.mcard-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cta-soon{cursor:default}
/* Card 2 — both originals in one frame: the graduation holds the top-left, the Apple
   Store frame the right, with its face high and the logo on the sweatshirt low. The
   split sits as near the middle as the two originals allow: the Apple frame carries its
   face and the logo on opposite corners, so it needs a little more than half the card
   for both to stay whole. The panels OVERLAP across the seam (graduation to 44%, Apple
   from 40%) and only the upper one is feathered, so the union is always fully opaque —
   no layer boundary, no dark band, only the seam itself, a band ~4% of the card wide.
   Percent stops throughout, so the composition holds at every width. */
.mcard-duo{position:absolute;inset:0;overflow:hidden;background:#151515;border-radius:inherit}
.mcard-duo .duo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mcard-duo .duo-a{inset:0 auto 0 0;width:44%;object-position:100% 50%}
.mcard-duo .duo-b{position:absolute;inset:0 0 0 40%;width:auto;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.5) 3.3%,#000 6.7%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.5) 3.3%,#000 6.7%)}
.mcard-duo .duo-b .duo-img{object-position:31% 50%}
/* Institution marks on the two admission cards — the same treatment as the Research &
   publications backdrops: the mark, not a picture of it. Centred, contained, multiplied
   so the source file's white ground disappears against the screenshot, held far below
   full strength, and radially masked so the square edge of the file never shows. It
   fades further under the hover copy. */
.mcard-mark{position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat;background-position:50% 50%;mix-blend-mode:multiply;opacity:.13;transition:opacity .32s var(--ease);-webkit-mask-image:radial-gradient(54% 54% at 50% 50%,#000 0,rgba(0,0,0,.8) 44%,rgba(0,0,0,.3) 72%,transparent 100%);mask-image:radial-gradient(54% 54% at 50% 50%,#000 0,rgba(0,0,0,.8) 44%,rgba(0,0,0,.3) 72%,transparent 100%)}
.mcard[data-i="3"] .mcard-mark{background-image:url("assets/unitn-logo.png");background-size:min(48%,250px) auto;opacity:.115}
.mcard[data-i="6"] .mcard-mark{background-image:url("assets/polimi-gsom-mark.jpg");background-size:min(66%,340px) auto;opacity:.12}
.mcard:hover .mcard-mark,.mcard:focus-visible .mcard-mark,.mcard:focus-within .mcard-mark,.mcard.open .mcard-mark{opacity:.06}
.story-next{position:absolute;right:clamp(80px,8vw,120px);bottom:clamp(60px,10vh,100px);display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,255,255,.66);font-family:"Inter",sans-serif;font-weight:500;font-size:clamp(12px,.9vw,14px);letter-spacing:.02em;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease);z-index:6}
.story-next.story-next-c{left:0;right:auto;width:100%;align-items:center;font-size:clamp(16px,1.45vw,22px);letter-spacing:.01em}
.story-next.story-next-c span{white-space:nowrap}
.story-next.story-next-c svg{width:26px;height:26px}
.story-next.story-next-c.on{animation:breathe 2s ease-in-out .45s infinite alternate}
/* Closing prompt on #story: plain text over the faded background, same treatment and
   bottom offset as the process end-prompts. */
#story .story-next.story-next-c{text-shadow:0 1px 12px rgba(255,255,255,.55)}
@keyframes breathe{from{transform:translateY(0);opacity:1}to{transform:translateY(-5px);opacity:.62}}
@media(prefers-reduced-motion:reduce){.story-next.story-next-c.on,.hero-cue,.rsw .sw-next svg{animation:none}}
.story-light .story-next{color:rgba(10,10,10,.55)}
.story-light .story-next:hover{color:rgba(10,10,10,.55);opacity:.72}
.story-next.on{opacity:1;transform:none;pointer-events:auto}
.story-next svg{width:22px;height:22px;flex:none}
.story-next:hover{color:rgba(255,255,255,.66);opacity:.72}
@media(prefers-reduced-motion:reduce),(max-width:680px){
  .story{height:auto}
  .story-sticky{position:static;height:auto;flex-direction:column;padding:clamp(60px,10vh,120px) var(--pad-x) clamp(80px,12vh,140px)}
  .story-bg{position:static;transform:none;margin-bottom:clamp(36px,6vh,64px);opacity:.14}
  .story-center{position:static;transform:none;margin-bottom:clamp(36px,6vh,64px)}
.scrollcue{margin-bottom:0}
  .story-photo{position:absolute;inset:0}
  #process .story-photo,#story .story-photo{inset:clamp(16px,4vw,32px) 4%}
  .story-cue2{display:none}
  .story-veil{opacity:.84}
  .story-stage{position:relative;inset:auto;width:min(78vw,420px);height:auto;display:flex;flex-direction:column;gap:clamp(20px,4vh,40px);pointer-events:auto}
  .mcard,.mcard[data-i="0"]{position:relative;top:auto;left:auto;width:100%;height:auto;aspect-ratio:auto;min-height:min(78vw,420px);margin:0;transform:none!important;opacity:1!important;filter:none!important;pointer-events:auto}
  .mcard.open>img,.mcard.open>.mcard-duo{filter:blur(7px) brightness(.72)}
}

/* ===== Selected work — horizontal project carousel ===== */
.sw{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);padding:clamp(92px,13vh,150px) 0 clamp(26px,4vh,52px);--sw-fg:#35219A;--gnav-fg:var(--sw-fg);--gnav-bg:rgba(255,255,255,.42);--gnav-bg-h:rgba(255,255,255,.66);--gnav-bd:rgba(28,24,58,.14);--gnav-hl:rgba(255,255,255,.85)}
.sw.p0{--sw-fg:#35219A}.sw.p1{--sw-fg:#1F4D64}.sw.p2{--sw-fg:#8E4E5B}.sw.p3{--sw-fg:#14584F}.sw.p4{--sw-fg:#5B4A93}
/* Project backdrops: one soft gradient per palette, cross-dissolved by script. */
.sw-bgs{position:absolute;inset:0;z-index:0;pointer-events:none}
.sw-bg{position:absolute;inset:0;opacity:0}
.sw-bg[data-i="0"]{background:linear-gradient(152deg,#F3F4FD 0,#E0E2FA 44%,#C6CAF6 100%)}
.sw-bg[data-i="1"]{background:linear-gradient(152deg,#F1F6FA 0,#DEEAF3 44%,#C4DCEB 100%)}
.sw-bg[data-i="2"]{background:linear-gradient(152deg,#FCF3F3 0,#F6E4E6 44%,#EDD1D5 100%)}
.sw-bg[data-i="3"]{background:linear-gradient(152deg,#F2F8F4 0,#E0EDE4 44%,#CCE0D4 100%)}
.sw-bg[data-i="4"]{background:linear-gradient(152deg,#FAF8FE 0,#EFEAFC 44%,#DCD4F7 100%)}
.sw-eyebrow{position:relative;z-index:2;padding:0 var(--pad-x);margin-bottom:clamp(16px,2.6vh,34px)}
/* One project per slide; native snap, drag, dots and arrows share one state. */
.sw .gcar{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.sw-track{flex:1 1 auto;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sw-track::-webkit-scrollbar{display:none}
.sw-track:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:8px}
.sw-track.is-drag{cursor:grabbing}
.sw-slide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:42% 1fr;align-items:center;column-gap:clamp(24px,3vw,64px);padding:0 var(--pad-x);scroll-snap-align:start;scroll-snap-stop:always}
.sw-copy{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2vh,26px);max-width:48ch}
.sw-slide[data-i="0"]{--project:var(--p-unimate)}
.sw-slide[data-i="1"]{--project:var(--p-clarity)}
.sw-slide[data-i="2"]{--project:var(--p-homelinkher)}
.sw-slide[data-i="3"]{--project:var(--p-invalle)}
.sw-slide[data-i="4"]{--project:var(--p-uniborrow)}
.sw-idx{color:var(--grey)}
.sw-title{font-family:"Libre Baskerville",Georgia,serif;font-style:italic;font-weight:400;color:var(--project,var(--accent));letter-spacing:-.02em;line-height:1.02;font-size:clamp(38px,5.8vw,87px)}
.sw-desc{color:#4C4C4C;max-width:44ch;font-size:clamp(15px,1.1vw,18px)}
.sw-cta{display:inline-flex;align-items:center;gap:10px;margin-top:8px;font-family:"Inter",sans-serif;font-weight:500;font-size:13px;letter-spacing:.03em;color:var(--ink)}
.sw-cta svg{width:20px;height:20px;transition:transform .3s var(--ease)}
.sw-cta:hover{color:var(--ink)}
.sw-cta:hover svg{transform:translateX(5px)}
.sw-shot{display:flex;align-items:center;justify-content:center;height:100%;min-width:0}
.sw-shot img{width:auto;height:auto;max-width:100%;max-height:min(62vh,600px);object-fit:contain;-webkit-user-drag:none;user-select:none}
/* Pagination: horizontal, directly under the active project. Liquid Glass dots are
   defined once for every carousel at the foot of this file. */
.sw-rail{position:relative;z-index:2;display:flex;justify-content:center;gap:20px;margin-top:clamp(12px,1.7vh,22px);--dot-ink:24,20,58;--dot-edge:.3}
/* Research prompt: fixed at the foot of the section, never travelling with a slide. */
.sw-next{position:relative;z-index:2;align-self:center;margin-top:clamp(22px,3.4vh,46px);display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(10,10,10,.62);font-family:"Inter",sans-serif;font-weight:500;font-size:clamp(16px,1.45vw,22px);letter-spacing:.01em;text-align:center;text-wrap:pretty;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.sw-next svg{width:26px;height:26px;flex:none}
.sw-next:hover{color:rgba(10,10,10,.62);opacity:.72;transform:translateY(-3px)}
.sw-next:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:4px}
.story-next em,.sw-next em{font-family:"Libre Baskerville",Georgia,serif;font-style:italic}
@media(max-width:680px){
  .sw{min-height:0;padding:clamp(84px,12vh,120px) 0 clamp(24px,3.4vh,40px)}
  .sw-slide{grid-template-columns:1fr;align-content:center;row-gap:clamp(18px,3vh,30px)}
  .sw-copy{max-width:none}
  .sw-shot img{max-height:40vh}
}
@media(prefers-reduced-motion:reduce){.sw-track,.cse-hgal{scroll-behavior:auto}}
.imgslot{width:100%;aspect-ratio:3/2;background:#EDEDED;border:1px solid var(--hairline);border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;overflow:hidden}
.imgslot img{width:100%;height:100%;object-fit:cover}

/* ===== Case study pages ===== */
.cs-hero{padding-top:clamp(140px,18vh,220px);padding-bottom:clamp(60px,9vh,120px)}
.cs-hero .label{margin-bottom:clamp(26px,4vh,44px)}
.cs-hero h1{font-size:clamp(44px,9vw,120px);max-width:14ch}
.cs-hero .lede{margin-top:clamp(34px,5vh,60px);font-size:clamp(20px,1.8vw,28px);line-height:1.4;max-width:34ch;font-family:"Inter Tight",sans-serif;font-weight:500;letter-spacing:-.02em}
.cs-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(56px,8vh,100px);padding-top:34px;border-top:1px solid var(--hairline)}
.cs-facts .f .k{font-size:15px;line-height:1.45}
.cs-facts .f .l{margin-bottom:10px}
.cs-body{max-width:1200px}
.cs-block{padding-top:clamp(70px,10vh,140px)}
.cs-block .label{margin-bottom:26px}
.cs-block h2{font-size:clamp(26px,3vw,40px);max-width:20ch;margin-bottom:28px}
.cs-block .prose{max-width:64ch;font-size:clamp(17px,1.25vw,20px)}
.cs-block .prose p+p{margin-top:1.2em}
.cs-two{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px)}
@media(min-width:840px){.cs-two{grid-template-columns:1fr 1fr}}
.cs-fig{margin-top:clamp(40px,6vh,80px)}
.cs-fig .imgslot{aspect-ratio:16/10}
.cs-fig .cap{margin-top:14px;color:var(--grey);font-size:13px;letter-spacing:.02em}
.backnav{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(80px,12vh,160px)}
.nextp{padding-top:clamp(16px,2.2vh,30px);padding-bottom:0;margin-top:0;border-top:0;overflow:hidden}
.nextp-eyebrow{display:block;padding-top:clamp(20px,2.8vh,36px);color:var(--grey)}
.nextp-head{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,64px);align-items:start;transition:opacity .7s var(--ease)}
.nextp-title{font-family:"Libre Baskerville",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.04em;line-height:.94;font-size:clamp(38px,5.6vw,88px)}
.nextp-title a{color:var(--np-title,var(--accent));transition:opacity .3s var(--ease)}
.nextp-title a:hover{color:var(--np-title,var(--accent));opacity:.72}
@media(min-width:940px){.nextp-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

@media(max-height:760px){.sw{padding-top:clamp(72px,10vh,110px)}.sw-title{font-size:clamp(30px,4.4vw,52px)}.sw-desc{font-size:clamp(13px,.95vw,15px);line-height:1.55}.sw-copy{gap:clamp(10px,1.4vh,16px)}.sw-shot img{max-height:min(50vh,520px)}}

/* ===== Case study — editorial (UniMate) ===== */
.cse-hero{padding-top:clamp(84px,11.2vh,141px);padding-bottom:clamp(40px,5vh,72px);display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,80px)}
@media(min-width:940px){.cse-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
/* Hero with an atmospheric photograph bleeding in from the left (mirror of the closing hero). */
.cse-hero-photo{position:relative;isolation:isolate;overflow:hidden}
.cse-hero-photo>*:not(.cseh-bg):not(.cseh-veil){position:relative;z-index:2}
.cseh-bg{position:absolute;left:0;top:0;width:min(58%,880px);height:100%;object-fit:cover;object-position:38% 50%;z-index:0;pointer-events:none;filter:contrast(.95) brightness(1.06) saturate(.9);-webkit-mask-image:linear-gradient(to right,#000 0,#000 52%,rgba(0,0,0,.82) 68%,rgba(0,0,0,.52) 84%,rgba(0,0,0,.22) 95%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to right,#000 0,#000 52%,rgba(0,0,0,.82) 68%,rgba(0,0,0,.52) 84%,rgba(0,0,0,.22) 95%,rgba(0,0,0,0) 100%)}
.cseh-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(250,250,250,.26) 0,rgba(250,250,250,.36) 30%,rgba(250,250,250,.5) 48%,rgba(250,250,250,.66) 62%,rgba(250,250,250,.8) 78%,rgba(250,250,250,.9) 100%),linear-gradient(to right,rgba(214,150,166,0) 42%,rgba(214,150,166,.2) 62%,rgba(214,150,166,.13) 82%,rgba(214,150,166,0) 100%)}
@media(max-width:939px){.cseh-bg{width:100%;width:100%;-webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 46%,rgba(0,0,0,0) 78%);mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 46%,rgba(0,0,0,0) 78%)}.cseh-veil{background:linear-gradient(to bottom,rgba(250,250,250,.5) 0,rgba(250,250,250,.9) 40%,var(--paper) 60%)}}
.cse-name{font-family:"Libre Baskerville",Georgia,serif;font-style:italic;font-weight:400;color:var(--project,var(--accent));letter-spacing:-.02em;line-height:1;font-size:clamp(38px,5.6vw,88px)}
.cse-intro{display:flex;flex-direction:column;align-items:flex-start}
.cse-back{grid-column:1/-1;justify-self:start;margin-bottom:calc(24px - clamp(36px,5vw,80px));display:inline-flex;align-items:center;gap:7px;font-family:"Inter",sans-serif;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);transition:color .3s var(--ease),transform .3s var(--ease)}
.cse-back svg{width:14px;height:14px;flex:none;transition:transform .3s var(--ease)}
.cse-back:hover{color:var(--ink)}
.cse-back:hover svg{transform:translateX(-3px)}
.cse-back:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:4px}
/* Closing link on the final case study — same micro-label treatment as .cse-back. */
.cse-end{padding-top:clamp(56px,7vh,96px);padding-bottom:clamp(56px,7vh,96px)}
.cse-end-link{display:inline-flex;align-items:center;gap:7px;font-family:"Inter",sans-serif;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);transition:color .3s var(--ease)}
.cse-end-link svg{width:14px;height:14px;flex:none;transition:transform .3s var(--ease)}
.cse-end-link:hover{color:var(--ink)}
.cse-end-link:hover svg{transform:translateX(-3px)}
.cse-end-link:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:4px}

.cse-lede{font-family:"Inter Tight",sans-serif;font-weight:500;letter-spacing:-.025em;line-height:1.22;font-size:clamp(21px,2vw,34px);max-width:34ch;text-wrap:pretty}
.cse-lede em{font-family:"Libre Baskerville",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.02em}
.cse-link{display:inline-block;position:relative;margin-top:clamp(22px,3vh,34px);color:var(--accent);font-size:clamp(15px,1.05vw,17px)}
.cse-link::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.cse-link:hover{color:var(--accent)}
.cse-link:hover::after{transform:scaleX(1)}
.cse-meta{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;align-items:start;gap:clamp(18px,2.4vw,44px);margin-top:clamp(40px,5.4vh,72px)}
.cse-m{min-width:0}
.cse-m .label{display:block;margin-bottom:12px}
.cse-m p{font-size:clamp(15px,1.05vw,17px);line-height:1.5}
.cse-figma,.cse-linkedin{display:inline-flex;align-items:center;height:clamp(26px,2vw,32px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.cse-linkedin svg{width:auto;height:clamp(21px,1.62vw,26px)}
.cse-figma svg{width:auto;height:clamp(26px,2vw,32px)}
.cse-figma:hover,.cse-linkedin:hover{opacity:.72;transform:translateY(-3px)}
.cse-figma:focus-visible,.cse-linkedin:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:4px}
.cse-showcase{background:#EFEFEF;padding:clamp(30px,4vw,64px) var(--pad-x) 0;overflow:hidden}
.mcard-inline{position:static;top:auto;left:auto;width:100%;max-width:1500px;height:auto;aspect-ratio:auto;margin:0 auto;transform:none;opacity:1;background:none;box-shadow:none;border-radius:clamp(12px,1.4vw,20px);display:block;pointer-events:auto;cursor:pointer}
.mcard-inline>img{height:auto;object-fit:contain}
.mcard-inline .mcard-ov{--ov-pad:clamp(24px,3.4vw,52px);--cta-h:52px;justify-content:flex-end;gap:12px;padding:var(--ov-pad)}
.mcard-inline .mcard-label{max-width:30ch;line-height:1.2}
.mcard-inline .mcard-quote{margin:clamp(14px,1.8vw,24px) 0 clamp(6px,.8vw,12px);font-family:"Libre Baskerville",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.015em;font-size:clamp(15px,1.35vw,21px);line-height:1.35;color:#fff}
.mcard-inline .mcard-txt{max-width:52ch}
.mcard-inline .mcard-cta{font-size:13px;padding:11px 20px}
.cse-showcase img{width:100%;max-width:1500px;margin:0 auto;height:auto}
@media(min-width:940px){.cse-hero{align-items:end}}
.cse-body{padding-bottom:0}
.cse-two{padding-top:var(--sect);display:flex;flex-direction:column;gap:clamp(64px,9vh,130px);width:min(100%,960px);margin-left:auto;margin-right:auto}

.cse-col h2{font-size:clamp(26px,2.9vw,40px);margin-bottom:clamp(24px,3.4vh,40px)}
.cse-col p{max-width:none;color:var(--grey);font-size:clamp(16px,1.15vw,19px);line-height:1.7;text-wrap:pretty}
.cse-col p+p{margin-top:1.2em}
.cse-screens{padding-top:clamp(38px,5vh,70px);padding-bottom:clamp(22px,3vh,40px)}
.cse-hgal{display:flex;gap:clamp(24px,3vw,56px);overflow-x:auto;scroll-behavior:smooth;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cse-hgal::-webkit-scrollbar{display:none}
.cse-hgal:focus-visible{outline:2px solid var(--ink);outline-offset:10px;border-radius:8px}
.cse-screen{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;align-items:center}
.cse-screen img{width:auto;max-width:100%;max-height:min(calc(100vh - 172px),880px);height:auto;border-radius:clamp(10px,1.1vw,16px)}
.cse-screen figcaption{margin-top:18px;text-align:center;font-family:"Libre Baskerville",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.02em;text-transform:none;color:var(--grey);font-size:clamp(15px,1.3vw,20px)}
/* My Journey slide: sketch ⇄ final design crossfade. Both images share one
   fixed-ratio box so the slide never changes size between states. */
.jflip{position:relative;display:block;width:auto;max-width:100%;height:min(calc(100vh - 172px),880px);aspect-ratio:1600/1138;padding:0;border:0;background:none;cursor:pointer;border-radius:clamp(10px,1.1vw,16px);-webkit-tap-highlight-color:transparent}
.cse-screen .jflip-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-height:none;transition:opacity .35s ease-out,transform .35s ease-out}
.cse-screen .jflip-b{opacity:0;transform:scale(.99)}
.cse-screen .jflip[aria-pressed="true"] .jflip-a{opacity:0;transform:scale(.99)}
.cse-screen .jflip[aria-pressed="true"] .jflip-b{opacity:1;transform:none}
.jflip:focus-visible{outline:2px solid var(--ink);outline-offset:10px}
@media (prefers-reduced-motion:reduce){.cse-screen .jflip-img{transition:none}.cse-screen .jflip-b,.cse-screen .jflip[aria-pressed="true"] .jflip-a{transform:none}}
.cse-hrail{display:flex;justify-content:center;gap:20px;margin-top:clamp(10px,1.2vh,16px)}
.cse-outcome{padding-top:var(--sect);width:min(100%,960px);margin-left:auto;margin-right:auto}
.cse-outcome .cse-col p{max-width:58ch}
@media(max-width:560px){.cse-meta{display:flex;flex-wrap:wrap;gap:26px 34px}}
.cse-showcase-empty{padding-bottom:clamp(30px,4vw,64px)}
/* Artwork whose subjects are flush to its own top edge: no grey band above it. */
.cse-showcase-flush{padding-top:0}
.cse-showcase .imgslot{width:100%;max-width:1500px;margin:0 auto;aspect-ratio:16/10;border-radius:clamp(12px,1.4vw,20px);background:#E3E3E3;border-color:rgba(10,10,10,.08)}
.cse-screen .imgslot{width:auto;max-width:100%;height:min(calc(100vh - 172px),880px);aspect-ratio:45/32;margin:0 auto;border-radius:clamp(10px,1.1vw,16px);background:#EFEFEF}

/* Next project — image sits below the editorial line at rest; on hover it lifts
   slightly and takes priority while the text recedes to semi-transparent. */
/* UP NEXT preview carrying the HomeLinkHer hero's photographic treatment. */
.nextp-photo{position:relative;isolation:isolate;overflow:hidden;background:#FBF2F2}
.nextp-photo>*:not(.npx-bg):not(.npx-veil){position:relative;z-index:2}
.npx-bg{position:absolute;left:0;top:56px;height:100%;transform:none;width:min(58%,880px);object-fit:cover;object-position:38% 50%;z-index:0;pointer-events:none;filter:contrast(.95) brightness(1.06) saturate(.9);-webkit-mask-image:linear-gradient(to right,#000 0,#000 52%,rgba(0,0,0,.82) 68%,rgba(0,0,0,.52) 84%,rgba(0,0,0,.22) 95%,rgba(0,0,0,0) 100%),linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 12%,#000 34%,rgba(0,0,0,.55) 52%,rgba(0,0,0,.18) 70%,rgba(0,0,0,0) 84%);mask-image:linear-gradient(to right,#000 0,#000 52%,rgba(0,0,0,.82) 68%,rgba(0,0,0,.52) 84%,rgba(0,0,0,.22) 95%,rgba(0,0,0,0) 100%),linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 12%,#000 34%,rgba(0,0,0,.55) 52%,rgba(0,0,0,.18) 70%,rgba(0,0,0,0) 84%);-webkit-mask-composite:source-in;mask-composite:intersect}
.npx-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(251,242,242,.26) 0,rgba(251,242,242,.36) 30%,rgba(251,242,242,.5) 48%,rgba(251,242,242,.66) 62%,rgba(251,242,242,.8) 78%,rgba(251,242,242,.9) 100%),linear-gradient(to bottom,rgba(251,242,242,0) 30%,rgba(251,242,242,.55) 62%,rgba(251,242,242,.9) 86%)}
@media(max-width:760px){.npx-bg{width:100%;top:28px;height:100%;transform:none;object-position:38% 50%;-webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.45) 44%,rgba(0,0,0,0) 74%);mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.45) 44%,rgba(0,0,0,0) 74%)}.npx-veil{background:linear-gradient(to bottom,rgba(251,242,242,.45) 0,rgba(251,242,242,.85) 46%,#FBF2F2 70%)}}
.nextp-stage{--np-gap:clamp(28px,3.4vw,56px);--np-show:clamp(300px,33vw,520px);--np-lift:clamp(54px,6.6vw,110px);position:relative;overflow:visible;margin-top:clamp(18px,2.4vh,34px)}
.nextp-visual{position:relative;z-index:3;display:block;margin-top:var(--np-gap);height:var(--np-show);transition:transform .7s var(--ease)}
.nextp-visual>*{position:absolute;left:0;right:0;top:0}
.nextp-visual:hover,.nextp-visual:focus-visible{transform:translateY(calc(-1 * var(--np-lift)))}
.nextp-visual:focus-visible{outline:2px solid var(--ink);outline-offset:8px}
.nextp-art{display:block;width:100%;height:auto;border:0;border-radius:0;background:none;padding:0}
.nextp-art.imgslot{aspect-ratio:16/10;background:#EFEFEF;border-radius:clamp(10px,1.1vw,16px)}
.nextp-art.imgslot .label{position:absolute;left:0;right:0;top:22%;text-align:center}
.nextp-stage:has(.nextp-visual:hover) .nextp-head,.nextp-stage:has(.nextp-visual:focus-visible) .nextp-head{opacity:.28}
@media(hover:none),(max-width:760px){.nextp-stage{overflow:visible}.nextp-visual{height:auto}.nextp-visual>*{position:static}.nextp-stage .nextp-visual,.nextp-stage .nextp-visual:hover,.nextp-stage .nextp-visual:focus-visible{transform:none}.nextp-stage:has(.nextp-visual:hover) .nextp-head,.nextp-stage:has(.nextp-visual:focus-visible) .nextp-head{opacity:1}}
@media(prefers-reduced-motion:reduce){.nextp-visual,.nextp-head{transition:none}.nextp-visual:hover,.nextp-visual:focus-visible{transform:none}.nextp-stage:has(.nextp-visual:hover) .nextp-head{opacity:1}}

/* ===== HomeLinkHer case-study theme — warm muted rose sampled from the hero photograph ===== */
.theme-hlh{--hlh-blush:#FBF2F2;--hlh-dusty:#F4E3E4;--hlh-rose:#E8C9CD;--hlh-deep:var(--p-homelinkher);--project:var(--hlh-deep);--project-card:color-mix(in oklab,var(--p-homelinkher) 86%,#0A0A0A)}
.theme-hlh,.theme-hlh .cse-body{background:var(--hlh-blush)}
.theme-hlh .cse-hero-photo{background:var(--hlh-blush)}
.theme-hlh .cseh-veil{background:linear-gradient(to right,rgba(251,242,242,.26) 0,rgba(251,242,242,.36) 30%,rgba(251,242,242,.5) 48%,rgba(251,242,242,.66) 62%,rgba(251,242,242,.8) 78%,rgba(251,242,242,.9) 100%),linear-gradient(to right,rgba(214,150,166,0) 42%,rgba(214,150,166,.2) 62%,rgba(214,150,166,.13) 82%,rgba(214,150,166,0) 100%)}
.theme-hlh .cse-showcase{background:var(--hlh-dusty)}
.theme-hlh .story.story-light{background:var(--hlh-blush)}
.theme-hlh .story-veil{background:var(--hlh-blush)}
.theme-hlh .cse-screens{background:var(--hlh-deep)}
.theme-hlh .cse-screen figcaption{color:#fff}
.theme-hlh .cse-hrail{--dot-ink:70,26,36;--dot-edge:.3}
.theme-hlh .nextp{background:var(--hlh-dusty)}
.theme-hlh ::selection{background:var(--hlh-deep);color:#fff}
@media(max-width:939px){.theme-hlh .cseh-veil{background:linear-gradient(to bottom,rgba(251,242,242,.5) 0,rgba(251,242,242,.9) 40%,var(--hlh-blush) 60%)}}

/* Pitch-video lightbox */
.vmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,64px)}
.vmodal[hidden]{display:none}
.vmodal-scrim{position:absolute;inset:0;background:rgba(10,10,10,.82);backdrop-filter:blur(4px)}
.vmodal-box{position:relative;z-index:1;width:min(100%,1180px)}
.vmodal-box video{width:100%;height:auto;max-height:82vh;display:block;border-radius:clamp(8px,1vw,14px);background:#000}
.vmodal-x{position:absolute;top:-46px;right:0;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;transition:background .2s var(--ease)}
.vmodal-x:hover{background:rgba(255,255,255,.26)}
.vmodal-x svg{width:20px;height:20px}
button.mcard-cta{border:0;cursor:pointer;font-family:"Inter",sans-serif}
.vmodal-msg{padding:clamp(40px,8vh,90px) 24px;text-align:center;color:rgba(255,255,255,.8);font-family:"Inter",sans-serif;font-size:16px;background:rgba(255,255,255,.06);border-radius:clamp(8px,1vw,14px)}
.vmodal-msg[hidden]{display:none}

/* ===== Clarity case-study theme — blues sampled from the Talent Week photo and the app UI ===== */
.theme-cl{--cl-pale:#F0F5F9;--cl-soft:#DFEAF1;--cl-cyan:#C3D8E5;--cl-deep:#1F4D64;--project:var(--p-clarity)}
.theme-cl,.theme-cl .cse-body{background:var(--cl-pale)}
.theme-cl .cse-showcase{background:var(--cl-soft)}
.theme-cl .story.story-light{background:var(--cl-pale)}
.theme-cl .story-veil{background:var(--cl-pale)}
.theme-cl .cse-screens{background:var(--cl-deep)}
.theme-cl .cse-screen figcaption{color:#fff}
.theme-cl .cse-hrail{--dot-ink:8,34,48;--dot-edge:.3}
.theme-cl ::selection{background:var(--cl-deep);color:#fff}
/* Clarity hero + UP NEXT: the Talent Week team photo on the same layered treatment as HomeLinkHer,
   graded to the Clarity blues instead of the HomeLinkHer pinks. */
.theme-cl .cse-hero-photo{background:var(--cl-pale)}
.cse-hero-cl .cseh-bg{filter:saturate(.82) brightness(1.04) contrast(.95);object-position:38% 14%}
@media(max-width:939px){.cse-hero-cl .cseh-bg{object-position:38% 8%}}
.cse-hero-cl .cseh-veil{background:linear-gradient(to right,rgba(240,245,249,.62) 0,rgba(240,245,249,.7) 30%,rgba(240,245,249,.82) 48%,rgba(240,245,249,.9) 62%,rgba(240,245,249,.95) 78%,rgba(240,245,249,.98) 100%),linear-gradient(to right,rgba(31,77,100,.3) 0,rgba(93,150,180,.26) 34%,rgba(160,200,222,.2) 60%,rgba(195,216,229,.1) 82%,rgba(195,216,229,0) 100%)}
@media(max-width:939px){.cse-hero-cl .cseh-veil{background:linear-gradient(to bottom,rgba(240,245,249,.52) 0,rgba(240,245,249,.9) 42%,var(--cl-pale) 62%),linear-gradient(to bottom,rgba(31,77,100,.22) 0,rgba(160,200,222,.12) 46%,rgba(195,216,229,0) 70%)}}
/* Every teaser wears the colour of the project it points at — the same token that
   project's hero title and Selected work slide already use. */
.nextp-cl{background:#E6E7FA;--np-title:var(--p-clarity)}
.nextp-hlh{--np-title:var(--p-homelinkher)}
.nextp-iv{--np-title:var(--p-invalle)}
.nextp-ub{--np-title:var(--p-uniborrow)}
.nextp-cl .npx-bg{filter:saturate(.82) brightness(1.04) contrast(.95)}
.nextp-cl .npx-veil{background:linear-gradient(to right,rgba(239,240,252,.6) 0,rgba(239,240,252,.68) 30%,rgba(239,240,252,.8) 48%,rgba(239,240,252,.89) 62%,rgba(239,240,252,.95) 78%,rgba(239,240,252,.98) 100%),linear-gradient(to bottom,rgba(239,240,252,.22) 0,rgba(239,240,252,.4) 34%,rgba(239,240,252,.72) 62%,rgba(239,240,252,.94) 86%),linear-gradient(to right,rgba(31,77,100,.26) 0,rgba(93,150,180,.22) 36%,rgba(195,216,229,.1) 74%,rgba(195,216,229,0) 100%)}
@media(max-width:939px){.nextp-cl .npx-bg{opacity:.5}.nextp-cl .npx-veil{background:linear-gradient(to right,rgba(239,240,252,.74) 0,rgba(239,240,252,.86) 46%,rgba(239,240,252,.96) 100%),linear-gradient(to bottom,rgba(239,240,252,.4) 0,rgba(239,240,252,.7) 40%,rgba(239,240,252,.95) 78%)}}
@media(max-width:939px){.cse-hero-cl .cseh-bg{opacity:.5}}
@media(max-width:760px){.nextp-cl .npx-veil{background:linear-gradient(to bottom,rgba(239,240,252,.5) 0,rgba(239,240,252,.88) 46%,#E6E7FA 70%)}}

/* ===== InValle case-study theme — alpine greens drawn from the logo's valley lines ===== */
.theme-iv{--iv-mint:#F1F7F3;--iv-sage:#DCE8E0;--iv-green:#3F7C63;--iv-forest:var(--p-invalle);--project:var(--iv-forest)}
.theme-iv,.theme-iv .cse-body{background:var(--iv-mint)}
.theme-iv .cse-showcase{background:var(--iv-sage)}
.theme-iv .story.story-light{background:var(--iv-mint)}
.theme-iv .story-veil{background:var(--iv-mint)}
.theme-iv .cse-screens{background:var(--iv-forest)}
.theme-iv .cse-screen figcaption{color:#fff}
.theme-iv .cse-hrail{--dot-ink:6,38,32;--dot-edge:.3}
.theme-iv .nextp{background:var(--iv-sage)}
.theme-iv ::selection{background:var(--iv-forest);color:#fff}
/* Hero: the logo as a decorative layer inside a broad green section atmosphere. */
.cse-hero-iv{position:relative;isolation:isolate;background-image:radial-gradient(120% 110% at 6% 46%,rgba(20,88,79,.24) 0,rgba(63,124,99,.17) 26%,rgba(120,163,140,.1) 50%,rgba(220,232,224,.05) 72%,rgba(241,247,243,0) 90%)}
.cse-hero-iv>*:not(.ivlogo){position:relative;z-index:2}
.ivlogo{position:absolute;left:calc(var(--pad-x) - clamp(20px,3vw,54px));bottom:clamp(24px,5vh,70px);width:min(360px,30vw);aspect-ratio:850/730;background:url(assets/invalle-logo.png) center/contain no-repeat;z-index:1;pointer-events:none;opacity:.3;-webkit-mask-image:radial-gradient(ellipse 58% 58% at 50% 48%,#000 0,rgba(0,0,0,.92) 46%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.16) 88%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(ellipse 58% 58% at 50% 48%,#000 0,rgba(0,0,0,.92) 46%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.16) 88%,rgba(0,0,0,0) 100%)}
@media(max-width:939px){.ivlogo{display:none}}
/* UP NEXT preview: same logo + green atmosphere, faded before the mockup row. */
.theme-hlh .nextp.nextp-iv,.nextp-iv{position:relative;isolation:isolate;overflow:hidden;background-color:#F1F7F3;background-image:radial-gradient(105% 150% at 22% 10%,rgba(20,88,79,.2) 0,rgba(63,124,99,.14) 28%,rgba(120,163,140,.08) 52%,rgba(220,232,224,.03) 74%,rgba(250,250,250,0) 92%)}
.nextp-iv>*:not(.ivlogo-np){position:relative;z-index:2}
.ivlogo-np{position:absolute;left:clamp(10px,4vw,90px);top:clamp(40px,5vh,74px);width:min(300px,24vw);aspect-ratio:850/730;background:url(assets/invalle-logo.png) center/contain no-repeat;z-index:1;pointer-events:none;opacity:.26;-webkit-mask-image:radial-gradient(ellipse 58% 58% at 50% 48%,#000 0,rgba(0,0,0,.92) 46%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.16) 88%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(ellipse 58% 58% at 50% 48%,#000 0,rgba(0,0,0,.92) 46%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.16) 88%,rgba(0,0,0,0) 100%)}
@media(max-width:939px){.ivlogo-np{display:none}}
/* Vertical fade so the atmosphere clears before the mockup row. */
.nextp-iv::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(241,247,243,0) 26%,rgba(241,247,243,.6) 60%,rgba(241,247,243,.94) 86%)}

/* ===== UniBorrow case-study theme — pale academic lilacs built from #F7F5FE ===== */
.theme-ub{--ub-pale:#F7F5FE;--ub-soft:#EAE5FA;--ub-mid:#CFC3EE;--ub-deep:var(--p-uniborrow);--project:var(--ub-deep)}
.theme-ub,.theme-ub .cse-body{background:var(--ub-pale)}
.theme-ub .cse-showcase{background:var(--ub-soft)}
.theme-ub .story.story-light{background:var(--ub-pale)}
.theme-ub .story-veil{background:var(--ub-pale)}
.theme-ub .cse-screens{background:var(--ub-deep)}
.theme-ub .cse-screen figcaption{color:#fff}
.theme-ub .cse-hrail{--dot-ink:40,26,70;--dot-edge:.3}
.theme-ub ::selection{background:var(--ub-deep);color:#fff}
/* Hero: the illustration as a masked layer inside a broad lilac atmosphere. */
.cse-hero-ub{position:relative;isolation:isolate;background-image:linear-gradient(to right,rgba(207,195,238,.42) 0,rgba(216,206,242,.3) 26%,rgba(230,224,247,.18) 48%,rgba(240,237,251,.08) 70%,rgba(247,245,254,0) 90%)}
.cse-hero-ub>*:not(.ubart){position:relative;z-index:2}
.ubart{position:absolute;left:calc(var(--pad-x) - clamp(16px,2.6vw,46px));bottom:clamp(16px,4vh,58px);width:min(330px,27vw);aspect-ratio:709/787;background:url(assets/uniborrow-art.png) center/contain no-repeat;z-index:1;pointer-events:none;opacity:.5;-webkit-mask-image:radial-gradient(ellipse 56% 56% at 48% 48%,#000 0,rgba(0,0,0,.9) 44%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.14) 88%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(ellipse 56% 56% at 48% 48%,#000 0,rgba(0,0,0,.9) 44%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.14) 88%,rgba(0,0,0,0) 100%)}
@media(max-width:939px){.ubart{display:none}}
/* UP NEXT preview: same layer, horizontal + vertical fade before the mockup row. */
.theme-iv .nextp.nextp-ub,.nextp-ub{position:relative;isolation:isolate;overflow:hidden;background-color:#F7F5FE;background-image:linear-gradient(to right,rgba(207,195,238,.38) 0,rgba(216,206,242,.28) 28%,rgba(230,224,247,.16) 52%,rgba(240,237,251,.07) 74%,rgba(247,245,254,0) 92%)}
.nextp-ub>*:not(.ubart-np){position:relative;z-index:2}
.nextp-ub::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(247,245,254,0) 26%,rgba(247,245,254,.6) 60%,rgba(247,245,254,.94) 86%)}
.ubart-np{position:absolute;left:clamp(6px,3.4vw,74px);top:clamp(30px,4vh,62px);transform:translateY(calc(-2px - .472 * min(260px,21vw)));width:min(260px,21vw);aspect-ratio:709/787;background:url(assets/uniborrow-art.png) center/contain no-repeat;z-index:0;pointer-events:none;opacity:.42;-webkit-mask-image:radial-gradient(ellipse 56% 56% at 48% 48%,#000 0,rgba(0,0,0,.9) 44%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.14) 88%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(ellipse 56% 56% at 48% 48%,#000 0,rgba(0,0,0,.9) 44%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.14) 88%,rgba(0,0,0,0) 100%)}
@media(max-width:939px){.ubart-np{display:none}}

/* ===== UniMate case-study theme — cool blue-violets from the logo ===== */
.theme-um{--um-violet:#5438CC;--um-deep:var(--p-unimate);--um-peri:#8174E8;--um-lav:#C8C5F3;--um-pale:#EFF0FC;--project:var(--um-deep)}
.theme-um,.theme-um .cse-body{background:var(--um-pale)}
.theme-um .cse-showcase{background:#E6E7FA}
.theme-um .story.story-light{background:var(--um-pale)}
.theme-um .story-veil{background:var(--um-pale)}
.theme-um .cse-screens{background:linear-gradient(160deg,#DCD8F6 0,var(--um-lav) 100%)}
/* Captions sit on a light lilac band, so they carry the deep violet rather than white;
   the glass dots take a violet definition rim for the same reason. */
.theme-um .cse-screen figcaption{color:var(--um-deep)}
.theme-um .cse-hrail{--dot-ink:53,33,154;--dot-edge:.52}
.theme-um .nextp{background:#E6E7FA}
.theme-um ::selection{background:var(--um-deep);color:#fff}
/* Hero: the cap mark as a large atmospheric layer in a broad violet wash. */
.cse-hero-um{position:relative;isolation:isolate;background-image:radial-gradient(115% 110% at 6% 44%,rgba(84,56,204,.2) 0,rgba(129,116,232,.14) 26%,rgba(200,197,243,.1) 50%,rgba(239,240,252,.04) 72%,rgba(239,240,252,0) 90%)}
.cse-hero-um>*:not(.umlogo){position:relative;z-index:2}
.umlogo{position:absolute;left:calc(var(--pad-x) - clamp(30px,4.4vw,86px));bottom:clamp(10px,3.4vh,52px);width:min(400px,32vw);aspect-ratio:156/144;background:url(assets/unimate-logo.png) center/contain no-repeat;z-index:1;pointer-events:none;opacity:.16;-webkit-mask-image:radial-gradient(ellipse 56% 56% at 50% 48%,#000 0,rgba(0,0,0,.9) 42%,rgba(0,0,0,.5) 68%,rgba(0,0,0,.14) 88%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(ellipse 56% 56% at 50% 48%,#000 0,rgba(0,0,0,.9) 42%,rgba(0,0,0,.5) 68%,rgba(0,0,0,.14) 88%,rgba(0,0,0,0) 100%)}
@media(max-width:939px){.umlogo{display:none}}

/* ===== Liquid Glass carousel controls — homepage and every case study ===== */
.gcar{position:relative}
.gnav{position:absolute;top:50%;z-index:6;width:46px;height:46px;display:grid;place-items:center;padding:0;border-radius:999px;cursor:pointer;color:var(--gnav-fg,#fff);background:var(--gnav-bg,rgba(255,255,255,.16));border:1px solid var(--gnav-bd,rgba(255,255,255,.44));-webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);box-shadow:0 8px 22px -12px rgba(10,10,10,.4),inset 0 1px 0 var(--gnav-hl,rgba(255,255,255,.55));transform:translateY(-50%);transition:background .3s var(--ease),border-color .3s var(--ease),color .5s var(--ease),transform .3s var(--ease),opacity .3s var(--ease)}
.gnav svg{width:20px;height:20px}
.gnav-prev{left:clamp(2px,.8vw,16px)}
.gnav-next{right:clamp(2px,.8vw,16px)}
.gnav:hover{background:var(--gnav-bg-h,rgba(255,255,255,.3));transform:translateY(-50%) scale(1.06)}
.gnav:active{transform:translateY(-50%) scale(.95)}
.gnav:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.gnav[disabled]{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.gnav{transition:none}.gnav:hover,.gnav:active{transform:translateY(-50%)}}
/* Dark mockup bands take white glass; the pale UniMate band takes deep violet. */
.cse-screens{--gnav-fg:#fff;--gnav-bg:rgba(255,255,255,.15);--gnav-bg-h:rgba(255,255,255,.28);--gnav-bd:rgba(255,255,255,.46);--gnav-hl:rgba(255,255,255,.5)}
.theme-um .cse-screens{--gnav-fg:#35219A;--gnav-bg:rgba(255,255,255,.44);--gnav-bg-h:rgba(255,255,255,.68);--gnav-bd:rgba(53,33,154,.18);--gnav-hl:rgba(255,255,255,.9)}
/* Room beside the mockups so the controls never sit over a screen. */
@media(min-width:940px){.cse-screens .gcar{padding-left:58px;padding-right:58px}}

/* ===== Backward links — foreground picked from the surface behind the label ===== */
.cse-back.bl-dark,.cse-end-link.bl-dark{color:#141414}
.cse-back.bl-dark:hover,.cse-end-link.bl-dark:hover{color:#141414;opacity:.58}
.cse-back.bl-light,.cse-end-link.bl-light{color:#fff}
.cse-back.bl-light:hover,.cse-end-link.bl-light:hover{color:#fff;opacity:.74}
.cse-back.bl-veil,.cse-end-link.bl-veil{text-shadow:0 1px 8px rgba(255,255,255,.6)}
.cse-back.bl-veil.bl-light,.cse-end-link.bl-veil.bl-light{text-shadow:0 1px 10px rgba(10,10,10,.5)}

/* ===== Liquid Glass pagination dots — one component, every carousel ===== */
.sw-rail span,.cse-hrail span{position:relative;flex:none;width:10px;height:10px;padding:0;border:0;border-radius:50%;cursor:pointer;opacity:1;background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.66) 0,rgba(255,255,255,.3) 42%,rgba(255,255,255,.1) 100%);-webkit-backdrop-filter:blur(3px) saturate(180%);backdrop-filter:blur(3px) saturate(180%);box-shadow:inset 0 .5px .5px rgba(255,255,255,.95),inset 0 0 3px rgba(255,255,255,.42),0 0 0 1px rgba(255,255,255,.6),0 0 0 1.75px rgba(var(--dot-ink,14,12,34),var(--dot-edge,.26)),0 0 7px rgba(255,255,255,.28),0 1px 2px rgba(var(--dot-ink,14,12,34),.16);transition:transform .34s var(--ease),box-shadow .34s var(--ease),background .34s var(--ease)}
/* 44px-tall contiguous hit area, drawn outside the layout box so spacing is untouched. */
.sw-rail span::after,.cse-hrail span::after{content:"";position:absolute;left:-10px;right:-10px;top:-17px;bottom:-17px;border-radius:999px}
.sw-rail span.on,.cse-hrail span.on{background:radial-gradient(circle at 32% 24%,#fff 0,rgba(255,255,255,.96) 44%,rgba(255,255,255,.78) 100%);box-shadow:inset 0 .5px .5px #fff,inset 0 0 4px rgba(255,255,255,.9),0 0 0 1px rgba(255,255,255,.82),0 0 0 1.75px rgba(var(--dot-ink,14,12,34),var(--dot-edge,.26)),0 0 12px rgba(255,255,255,.6),0 1px 3px rgba(var(--dot-ink,14,12,34),.2)}
@media(hover:hover){
  .sw-rail span:hover,.cse-hrail span:hover{transform:scale(1.3);background:radial-gradient(circle at 33% 25%,#fff 0,rgba(255,255,255,.8) 44%,rgba(255,255,255,.4) 100%);box-shadow:inset 0 .5px .5px #fff,inset 0 0 4px rgba(255,255,255,.8),0 0 0 1px rgba(255,255,255,.86),0 0 0 1.75px rgba(var(--dot-ink,14,12,34),var(--dot-edge,.26)),0 0 13px rgba(255,255,255,.62),0 1px 3px rgba(var(--dot-ink,14,12,34),.18)}
  .sw-rail span.on:hover,.cse-hrail span.on:hover{background:radial-gradient(circle at 32% 24%,#fff 0,#fff 46%,rgba(255,255,255,.86) 100%);box-shadow:inset 0 .5px .5px #fff,inset 0 0 5px #fff,0 0 0 1px rgba(255,255,255,.92),0 0 0 1.75px rgba(var(--dot-ink,14,12,34),var(--dot-edge,.26)),0 0 16px rgba(255,255,255,.72),0 1px 3px rgba(var(--dot-ink,14,12,34),.2)}
}
.sw-rail span:active,.cse-hrail span:active{transform:scale(.9);transition-duration:.12s}
.sw-rail span:focus-visible,.cse-hrail span:focus-visible{outline:2px solid rgba(255,255,255,.92);outline-offset:3px;box-shadow:inset 0 .5px .5px rgba(255,255,255,.95),0 0 0 1px rgba(255,255,255,.6),0 0 0 6px rgba(var(--dot-ink,14,12,34),.42),0 0 12px rgba(255,255,255,.5)}
@media(prefers-reduced-motion:reduce){.sw-rail span,.cse-hrail span{transition:none}.sw-rail span:hover,.cse-hrail span:hover,.sw-rail span:active,.cse-hrail span:active{transform:none}}

/* ===== Homepage hero — adaptive atmosphere, coin flip, Diffuse copy ===== */
.hero{isolation:isolate;padding-bottom:clamp(112px,14vh,172px)}
.hero-atmo{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-atmo-l{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 56%,rgba(0,0,0,.58) 80%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,#000 0,#000 56%,rgba(0,0,0,.58) 80%,rgba(0,0,0,0) 100%)}
/* Professional: cool lavender, blue and soft green off the stage photograph. */
.hero-atmo-pro{background:radial-gradient(74% 88% at 15% 46%,rgba(188,194,246,.72) 0,rgba(202,212,244,.5) 32%,rgba(212,231,221,.26) 58%,rgba(250,250,250,0) 86%),radial-gradient(46% 54% at 4% 80%,rgba(204,228,213,.4) 0,rgba(250,250,250,0) 78%),linear-gradient(to right,rgba(227,227,250,.46) 0,rgba(243,244,252,.18) 46%,rgba(250,250,250,0) 74%)}
/* Personal: warm sand, blush and soft sky, with a whisper of the #F4A838 headline. */
.hero-atmo-per{opacity:0;transition:opacity .95s var(--ease);background:radial-gradient(74% 88% at 15% 46%,rgba(244,168,56,.2) 0,rgba(246,221,196,.62) 24%,rgba(240,203,200,.44) 50%,rgba(220,233,242,.2) 72%,rgba(250,250,250,0) 90%),radial-gradient(46% 54% at 4% 80%,rgba(224,236,245,.44) 0,rgba(250,250,250,0) 78%),linear-gradient(to right,rgba(247,230,212,.46) 0,rgba(250,242,233,.2) 46%,rgba(250,250,250,0) 74%)}
.hero.is-per .hero-atmo-per{opacity:1}
@media(max-width:680px){
  .hero-atmo-pro{background:radial-gradient(88% 46% at 34% 16%,rgba(188,194,246,.66) 0,rgba(202,212,244,.44) 36%,rgba(212,231,221,.2) 62%,rgba(250,250,250,0) 88%),linear-gradient(to bottom,rgba(227,227,250,.4) 0,rgba(243,244,252,.14) 44%,rgba(250,250,250,0) 72%)}
  .hero-atmo-per{background:radial-gradient(88% 46% at 34% 16%,rgba(244,168,56,.18) 0,rgba(246,221,196,.56) 28%,rgba(240,203,200,.36) 54%,rgba(220,233,242,.16) 74%,rgba(250,250,250,0) 92%),linear-gradient(to bottom,rgba(247,230,212,.4) 0,rgba(250,242,233,.14) 44%,rgba(250,250,250,0) 72%)}
}
/* The coin: one masked container, two faces, a real 180° turn. */
.hero-figure{position:relative;flex:none;perspective:1200px}
.hero-portrait{position:relative;width:clamp(150px,24vw,360px);aspect-ratio:1;padding:0;border:0;background:none;overflow:visible;cursor:pointer;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.62,.03,.31,1)}
.hero.is-per .hero-portrait{transform:rotateY(180deg)}
/* Faces swap exactly at the edge-on midpoint of the turn, so neither the reversed
   back face nor a blank frame is ever visible. */
.coin-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#EDEDED;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:opacity 0s linear 500ms}
.coin-face img{width:100%;height:100%;object-fit:cover}
.coin-pro img{object-position:72% 28%}
.coin-per{transform:rotateY(180deg);opacity:0}
.coin-per img{object-position:50% 50%}
.hero.is-per .coin-pro{opacity:0}
.hero.is-per .coin-per{opacity:1}
.hero-portrait:focus-visible{outline:2px solid var(--ink);outline-offset:12px;border-radius:50%}
/* The invitation: italic Baskerville centred over the coin, with the same downward
   chevron the other prompts use, drifting gently to catch the eye. */
.hero-cue{position:absolute;left:50%;translate:-50% 0;bottom:calc(100% + clamp(9px,1.3vw,18px));display:flex;flex-direction:column;align-items:center;gap:clamp(1px,.45vw,5px);width:max-content;max-width:min(78vw,290px);color:var(--grey);text-align:center;pointer-events:none;animation:cuedrift 5.4s var(--ease) infinite}
.hero-cue-t{display:block;font-family:"Libre Baskerville",Georgia,serif;font-style:italic;font-size:clamp(13px,1.08vw,17px);line-height:1.3;white-space:nowrap}
.hero-cue-a{display:block;width:clamp(19px,1.85vw,25px);height:auto;margin:0;opacity:.78}
@keyframes cuedrift{0%,100%{transform:translate3d(0,0,0);opacity:.9}50%{transform:translate3d(0,-5px,0);opacity:1}}
.hero.is-flipping .hero-cue{animation-play-state:paused}
@media(max-width:680px){.hero-cue{max-width:min(84vw,250px);bottom:calc(100% + 8px)}.hero-cue-t{font-size:13px;white-space:normal}.hero-cue-a{width:20px}}
/* Two copy states, one reserved region for the pair: statement and paragraph travel
   together as one block, and the cell is as tall as the taller state, so switching copy
   cannot shift the layout. flow-root keeps the statement's top margin inside its group. */
.hero-swap{display:grid;align-items:start}
.hero-group{grid-area:1/1;display:flow-root}
.hero-state{grid-area:1/1;visibility:hidden}
.hero-state.is-live{visibility:visible}
.hero-h2-per{color:#F4A838}
.dfw{display:inline-block;white-space:nowrap}
.dfz{display:inline-block;transition:opacity .42s var(--ease),transform .42s var(--ease),filter .42s var(--ease)}
.dfz.is-out{opacity:0;filter:blur(6px);transform:translate3d(var(--dx,0px),var(--dy,0px),0) scale(.84)}
/* The scroll prompt, pinned to the foot of the hero (translate keeps the centring
   independent of the reveal and hover transforms). */
.hero-next{position:absolute;left:50%;translate:-50% 0;bottom:clamp(30px,5vh,58px);width:max-content;max-width:min(92vw,720px);margin-top:0;align-self:auto;font-weight:500;font-size:clamp(16px,1.45vw,22px);letter-spacing:.01em;color:rgba(10,10,10,.62);text-align:center;cursor:pointer}
.hero-next svg{width:26px;height:26px;animation:breathe 2s ease-in-out .45s infinite alternate}
.hero-next>span{white-space:nowrap}
a.hero-next:hover{color:rgba(10,10,10,.62)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-next svg{animation:none}
  .dfz,.dfz.is-out{opacity:1;filter:none;transform:none;transition:none}
  .hero-state{transition:opacity .28s linear}
  .hero-portrait,.hero.is-per .hero-portrait{transform:none;transition:none}
  .coin-face{transition:opacity .28s linear}
  .coin-per{transform:none;-webkit-backface-visibility:visible;backface-visibility:visible}
}