/* hellofarida.com: new site styles. Tokens match DESIGN.md §4–5 and the Figma variables.
   Fonts in /fonts, images in /img. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ── FONTS (self-hosted; licences in /fonts) ── */
/* fallback: wait up to 100ms for the font before showing a system font, so a cached font never flashes */
@font-face{font-family:'Alte Haas Grotesk';src:url('/fonts/AlteHaasGrotesk-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:fallback;}
@font-face{font-family:'Alte Haas Grotesk';src:url('/fonts/AlteHaasGrotesk-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:fallback;}
@font-face{font-family:'Inter';src:url('/fonts/Inter-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:fallback;}

/* ── TOKENS ── */
:root{
  --color-bg-base:#F7F7F7;
  --color-bg-raised:#FFFFFF;
  --color-bg-media:#EBEBEB;
  --color-text-primary:#1E1E1E;
  --color-text-muted:#5C5C5C;
  --color-text-on-media:#FFFFFF;
  --color-border-subtle:#E3E3E3;
  --color-accent:#4A7016;
  --color-on-accent:#FFFFFF;
  --color-error:#B3261E;          /* red/41 */
  --scrim:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.04) 25%,rgba(0,0,0,.2) 45%,rgba(0,0,0,.45) 60%,rgba(0,0,0,.68) 80%,rgba(0,0,0,.78) 100%);  /* matches the Figma card scrim; keeps titles 3:1+ and subtitles 4.5:1+ on the lightest covers */

  --font-heading:'Alte Haas Grotesk','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  /* Type sizes that change by device (Figma .primitives modes Desktop / Tablet / Mobile).
     Every other font size and line height is the same on all devices. */
  --font-size-28:28px;   /* article/h2: card titles, section headings, Next project */
  --line-height-34:34px; /* article/h2 and the logo */
  --font-size-32:32px;   /* heading/h1: case study and About titles */
  --font-size-12:12px;   /* body/tag: tags */
  --line-height-18:18px; /* body/tag and nav/default-sm (card subtitles) */
  --font-size-16:16px;   /* every 16px style: body/md, body/md-500, nav, links, captions, subtitles, labels (not the password input) */

  --spacing-1:4px;--spacing-2:8px;--spacing-3:12px;--spacing-4:16px;--spacing-6:24px;--spacing-8:32px;
  --radius-md:8px;
  --page-max:1920px;
  --focus-ring:0 0 0 2px var(--color-bg-base),0 0 0 4px var(--color-accent);
}
@media (max-width:1023px){:root{--font-size-28:26px;--line-height-34:30px;--font-size-16:14px;}} /* Tablet */
@media (max-width:599px){:root{--font-size-28:24px;--line-height-34:26px;--font-size-16:16px;--font-size-32:30px;--font-size-12:10px;--line-height-18:16px;}} /* Mobile */

/* ── BASE ── */
html{-webkit-text-size-adjust:100%;}
body{background:var(--color-bg-base);color:var(--color-text-primary);font-family:var(--font-body);font-size:var(--font-size-16);line-height:24px;font-weight:300;}  /* body/md and body/sm are Inter Light */
img,video{display:block;max-width:100%;}
a{color:inherit;}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px;}
@media (forced-colors:active){:focus-visible{outline:2px solid CanvasText;outline-offset:2px;}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0s !important;transition-duration:0s !important;}}

.visually-hidden{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:var(--spacing-4);top:var(--spacing-4);z-index:100;padding:var(--spacing-2) var(--spacing-4);background:var(--color-text-primary);color:var(--color-on-accent);font-weight:500;text-decoration:none;border-radius:var(--radius-md);transform:translateY(-200%);}
.skip-link:focus{transform:none;}

/* ── SHELL: sidebar + page ── */
/* 1024px and up: sidebar beside the page. Column sizes follow the Figma frames
   (281 + 927 at 1280px, 450 + 1398 at 1920px); above 1920 the page is centred.
   Between 1024 and about 1180px the sidebar keeps 272px, enough for the site name, and the page column narrows. */
.shell{display:grid;grid-template-columns:minmax(272px,1fr) minmax(0,min(calc(73.6% + 20px),1398px));column-gap:var(--spacing-6);max-width:var(--page-max);margin:0 auto;padding:0 var(--spacing-6);}
.shell-main{display:flex;flex-direction:column;gap:var(--spacing-6);min-width:0;padding-top:var(--spacing-6);}  /* Figma contentContainer: 24px top */
.shell-main main{flex:1;}

.sidebar{position:sticky;top:0;height:100vh;display:flex;align-items:flex-end;overflow-y:auto;border-right:1px solid var(--color-border-subtle);}  /* full height, with a divider on its right */
.sidebar-inner{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-6);padding:0 var(--spacing-6) 100px;}
.identity{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-6);}
.bio{order:2;font-size:var(--font-size-16);line-height:24px;}
.nav-main{order:3;}
.contact{order:4;}
.link-list{list-style:none;display:flex;flex-direction:column;}

/* Below 1024px: the sidebar becomes a header above the page. The top row (logo, name,
   nav) sticks to the top while scrolling; bio and contact scroll away. */
.topbar{display:contents;}
@media (max-width:1023px){
  .shell{display:block;padding:0;}
  .sidebar,.sidebar-inner{display:contents;}
  .topbar{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--spacing-6);padding:var(--spacing-6) var(--spacing-6) var(--spacing-3);background:var(--color-bg-base);}
  .identity{flex-direction:row;align-items:center;gap:var(--spacing-3);}
  .bio,.nav-main,.contact{order:0;}
  .bio{padding:var(--spacing-3) var(--spacing-6) 0;}
  .contact{padding:var(--spacing-6);}
  .link-list{flex-direction:row;gap:var(--spacing-4);}
  .contact.link-list{gap:var(--spacing-6);}  /* room for the ↗ hover arrow */
  .shell-main{gap:0;padding-top:0;}
  .shell-main main{padding:0 var(--spacing-6);}
}

/* ── SITE NAME ── */
.site-name{font-family:var(--font-heading);font-size:24px;line-height:var(--line-height-34);font-weight:400;text-decoration:none;color:var(--color-text-primary);}
.site-name b{font-weight:700;}
a.site-name:hover .site-name-text{color:var(--color-accent);}
.logo{width:40px;height:40px;border-radius:50%;}
/* Interactive sidebar logo (Figma "logo": eyes=closed / eyes=open). The faces cross-fade on click;
   the eyeballs follow the pointer while open; the mind floats above both. */
.logo-toggle{position:relative;flex:none;padding:0;border:0;background:none;cursor:pointer;overflow:hidden;}
.logo-toggle:focus-visible{border-radius:50%;}
.logo-face,.logo-eyes{position:absolute;inset:0;width:100%;height:100%;transition:opacity .25s ease;}
.logo-face--open,.logo-eyes{opacity:0;}
.logo-toggle.is-open .logo-face--open,.logo-toggle.is-open .logo-eyes{opacity:1;}
.logo-toggle.is-open .logo-face--closed{opacity:0;}
.logo-eyes circle{fill:#7A8371;transition:transform .12s ease-out;}  /* Figma eyeball colour */
/* mind: placed from its Figma render bounds (9.14, 5.17, 21.75 x 8.75 in a 40px logo) */
.logo-mind{position:absolute;left:22.86%;top:12.92%;width:54.375%;height:21.875%;animation:mind-float 2.4s ease-in-out infinite alternate;}
@keyframes mind-float{to{transform:translateY(-1.6px);}}
@media (prefers-reduced-motion:reduce){.logo-mind{animation:none;}}

/* ── NAV AND CONTACT LINKS ── */
.nav-link{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 0;font-size:var(--font-size-16);line-height:20px;font-weight:400;color:var(--color-text-primary);text-decoration:none;}
.nav-link:hover{color:var(--color-accent);}
.nav-link.is-current{font-weight:500;color:var(--color-accent);}  /* nav/active: Medium */
/* Main nav: the current page's item animates in as the page opens (arrow slides in and pushes the
   text across, text fades to green). Items that aren't current never animate. */
.nav-main .nav-link.is-current{gap:0;animation:nav-current-text .3s ease-out both;}
.nav-main .nav-link.is-current .icon{margin-right:6px;animation:nav-current-arrow .3s ease-out both;}
@keyframes nav-current-text{from{color:var(--color-text-primary);font-weight:400;}}
@keyframes nav-current-arrow{from{width:0;margin-right:0;opacity:0;transform:translateX(-8px);}}
.icon{flex:none;}
/* Contact links: a ↗ arrow appears on hover and focus to show they leave the site. It sits just past
   the text without taking space, so nothing moves; it slides in along the diagonal. */
.contact .nav-link{position:relative;}
.icon-external{position:absolute;left:100%;top:50%;margin:-7px 0 0 4px;opacity:0;transform:translate(-4px,4px);transition:opacity .2s ease,transform .2s ease;}
.contact .nav-link:hover .icon-external,.contact .nav-link:focus-visible .icon-external{opacity:1;transform:none;}
/* Desktop: each contact link spans the sidebar, and the arrow appears at its right edge */
@media (min-width:1024px){
  .contact{align-self:stretch;}
  .contact .nav-link{display:flex;}
  .contact .icon-external{left:auto;right:0;margin:-7px 0 0;}
}

/* ── FOOTER ── */
.site-footer{display:flex;justify-content:center;padding:var(--spacing-6) 0;}
.footer-logo{display:grid;place-items:center;width:44px;height:44px;margin:-12px 0;border-radius:50%;}
.footer-logo img{width:20px;height:20px;border-radius:50%;}

/* ── CARDS ── */
/* One list in Home order; CSS columns lay it out as the two-column masonry */
.cards{list-style:none;columns:2;column-gap:var(--spacing-6);}
.card{break-inside:avoid;margin-bottom:var(--spacing-6);}
@media (max-width:599px){.cards{columns:1;}}

.card-link{position:relative;display:block;aspect-ratio:687/615;border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg-media);color:var(--color-text-on-media);text-decoration:none;}
.card--short .card-link{aspect-ratio:687/410;}
.card-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .2s ease,transform .5s ease-out;}
.card-content{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:6px;padding:100px var(--spacing-4) var(--spacing-4);background:var(--scrim);}
.card-title{font-family:var(--font-heading);font-size:24px;line-height:30px;font-weight:700;}  /* article/h3 */
.card-subtitle{font-size:14px;line-height:var(--line-height-18);font-weight:300;}  /* nav/default-sm: Inter Light 14/18 (14/16 on mobile) */
.card-link:hover .card-cover{filter:brightness(.88);}
/* Hover video (hoverVideo): sits over the cover and fades in once it is actually playing */
.card-video{opacity:0;transition:opacity .2s ease,filter .2s ease,transform .5s ease-out;}
.card-link.is-playing .card-video{opacity:1;}
/* Tags (Figma ".tag / group"): top right of the card, hidden until hover or keyboard focus */
.card-tags{position:absolute;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--spacing-1);opacity:0;transition:opacity .2s ease;}
.card-tag{padding:2px var(--spacing-2);border-radius:999px;background:rgb(255 255 255 / .9);color:var(--color-text-muted);font-size:var(--font-size-12);line-height:var(--line-height-18);font-weight:400;}  /* body/tag */
.card-link:hover .card-tags,.card-link:focus-visible .card-tags{opacity:1;}
/* The cover zooms in on hover and keyboard focus (the card clips it); not under reduced motion */
@media (prefers-reduced-motion:no-preference){.card-link:hover .card-cover,.card-link:focus-visible .card-cover{transform:scale(1.05);}}
.card-link:focus-visible{box-shadow:0 0 0 2px #FFFFFF,0 0 0 4px var(--color-text-primary);border-radius:var(--radius-md);}

/* ── CENTRED PAGES (password, 404, Lab empty state) ── */
.centred-page{min-height:calc(100vh - 116px);display:grid;place-items:center;padding:var(--spacing-6) 0;}
.centred-eyebrow{font-size:var(--font-size-16);line-height:20px;font-weight:400;color:var(--color-text-muted);}
.centred-title{font-family:var(--font-heading);font-size:var(--font-size-28);line-height:var(--line-height-34);font-weight:700;}
@media (max-width:1023px){.centred-page{min-height:0;padding:var(--spacing-6) 0 var(--spacing-8);}}

/* ── PASSWORD FORM ── */
.password-form{width:min(360px,100%);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-4);text-align:center;}
.password-form .centred-eyebrow{margin-bottom:calc(var(--spacing-2) * -1);}
.field{width:100%;display:flex;flex-direction:column;gap:var(--spacing-2);text-align:left;}
.field-input{width:100%;height:46px;padding:0 var(--spacing-4);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-bg-raised);font:inherit;font-size:16px;font-weight:400; /* stays 16px: iOS zooms into smaller fields */color:var(--color-text-primary);}
.field-input::placeholder{color:var(--color-text-muted);}
.field-input:focus{outline:none;border:2px solid var(--color-accent);padding:0 15px;}
.field-input:focus-visible{box-shadow:none;}
.field-input[aria-invalid="true"]{border:2px solid var(--color-error);padding:0 15px;}
.field-error{display:flex;align-items:center;gap:6px;font-size:var(--font-size-16);line-height:20px;font-weight:400;color:var(--color-error);}
.field-error[hidden]{display:none;}
.button{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 var(--spacing-6);border:0;border-radius:999px;background:var(--color-text-primary);color:var(--color-on-accent);font:inherit;font-weight:500;font-size:var(--font-size-16);cursor:pointer;}
.button:hover{background:var(--color-accent);}

/* ── CASE STUDY PAGE ── */
/* 1024px and up: three columns sized from the Figma frames (290/758/184 at 1280, 498/1082/292 at 1920),
   edge to edge with no outer margin. The sidebar never gets narrower than 226px. */
.cs-page{max-width:var(--page-max);margin:0 auto;}
/* The bar (Back + logo) stays pinned to the top once the page scrolls, on every screen size */
.cs-bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 var(--spacing-6);background:var(--color-bg-base);}
.back-link{display:inline-flex;align-items:center;gap:var(--spacing-1);min-height:44px;font-size:var(--font-size-16);line-height:20px;font-weight:400;text-decoration:none;color:var(--color-text-primary);}
.back-link:hover{color:var(--color-accent);}
/* Back: the arrow nudges 2px left on hover and keyboard focus */
.back-link .icon{transition:transform .2s ease-out;}
.back-link:hover .icon,.back-link:focus-visible .icon{transform:translateX(-2px);}
.bar-logo{display:grid;place-items:center;width:44px;height:44px;margin-right:-7px;border-radius:50%;}
.bar-logo img{width:30px;height:30px;border-radius:50%;}

.cs-grid{display:grid;grid-template-columns:minmax(226px,1fr) minmax(0,calc(50.625% + 110px)) calc(16.875% - 32px);gap:var(--spacing-6);}
/* Figma "caseStudy": 24px above and below the article and "On this page" */
.cs-main{min-width:0;padding:var(--spacing-6) 0;}
/* The sidebar runs the full height, down past the footer; the footer sits under the article and "On this page" only */
.cs-aside{grid-row:1 / span 2;}
.cs-main{grid-column:2;grid-row:1;}
.cs-toc{grid-column:3;grid-row:1;}
.cs-grid > .site-footer{grid-column:2 / -1;grid-row:2;}
.cs-article{display:flex;flex-direction:column;gap:var(--spacing-6);}

/* Sticky copy in the left column: sits at the bottom of the screen while reading */
.cs-aside{display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--spacing-6);border-right:1px solid transparent;transition:border-color .3s ease;}
/* A line on its right fades in with the copy */
.cs-aside:has(.is-visible){border-right-color:var(--color-border-subtle);}
.cs-aside-inner{position:sticky;bottom:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;}
.cs-aside-inner.is-visible{opacity:1;visibility:visible;}
/* Figma "case study / sidebar footer": smaller type than the main header */
.aside-card{padding-bottom:60px;}
.aside-header{padding-bottom:var(--spacing-6);}
.aside-titles{display:flex;flex-direction:column;gap:var(--spacing-2);padding-bottom:var(--spacing-6);}
.aside-title,.aside-next-title{font-family:var(--font-heading);font-size:24px;line-height:30px;font-weight:700;}
.aside-subtitle{font-size:14px;line-height:20px;font-weight:500;}
.aside-meta{display:flex;flex-direction:column;gap:var(--spacing-4);padding-bottom:var(--spacing-4);border-bottom:1px solid var(--color-border-subtle);}
.aside-meta-item{display:flex;flex-direction:column;gap:var(--spacing-2);}
.aside-meta dt{font-size:14px;line-height:20px;font-weight:500;color:var(--color-text-muted);}
.aside-meta dd{font-size:var(--font-size-16);line-height:24px;}
.aside-next{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--spacing-6);color:var(--color-text-primary);text-decoration:none;}

/* "On this page" */
.cs-toc{position:sticky;top:62px;align-self:start;padding:var(--spacing-6) var(--spacing-6) var(--spacing-6) 7px;}  /* top: just below the pinned bar */
/* When the current section changes: the arrow slides in (or out), pushing the text across,
   and the text fades to green (or back). The arrow takes no space until it is shown. */
/* Figma nav/default-sm (Light) and nav/active-sm (Semi Bold): 14/18, 30px rows */
.cs-toc .nav-link{gap:0;min-height:30px;font-size:14px;line-height:18px;font-weight:300;transition:color .3s ease-out,font-weight .3s ease-out;}
.cs-toc .nav-link .icon{width:0;margin-right:0;opacity:0;transform:translateX(-8px);transition:width .3s ease-out,margin-right .3s ease-out,opacity .3s ease-out,transform .3s ease-out;}
.cs-toc .nav-link.is-current{font-weight:600;color:var(--color-accent);}
.cs-toc .nav-link.is-current .icon{width:16px;margin-right:6px;opacity:1;transform:none;}
.cs-h2{scroll-margin-top:var(--spacing-6);}
.cs-h2:focus{outline:none;}

/* Below 1024px: one column; no sticky copy and no "On this page" */
@media (max-width:1023px){
  .cs-page{padding:0;}
  .cs-grid{display:block;}
  .cs-aside,.cs-toc{display:none;}
  .cs-main{padding:var(--spacing-6);}
}

/* ── CASE STUDY HEADER ── */
.cs-header{display:flex;flex-direction:column;gap:var(--spacing-6);padding-bottom:var(--spacing-6);border-bottom:1px solid var(--color-border-subtle);}
.cs-titles{display:flex;flex-direction:column;gap:var(--spacing-2);padding-bottom:var(--spacing-6);}
/* Tags under the tagline: the card's pills, always shown. On the light page they get a white fill and a 1px line so they stand out. */
.cs-tags{list-style:none;display:flex;flex-wrap:wrap;gap:var(--spacing-1);}  /* 8px under the tagline (the titles gap), as in Figma */
.cs-tag{padding:1px 7px;border:1px solid var(--color-border-subtle);border-radius:999px;background:var(--color-bg-raised);color:var(--color-text-muted);font-size:var(--font-size-12);line-height:var(--line-height-18);font-weight:400;}
.cs-title{font-family:var(--font-heading);font-size:var(--font-size-32);line-height:44px;font-weight:700;}
.cs-subtitle{font-size:var(--font-size-16);line-height:20px;font-weight:400;}
.cs-meta{display:flex;flex-wrap:wrap;gap:var(--spacing-6);}
.cs-meta-item{display:flex;flex-direction:column;gap:var(--spacing-2);width:250px;}
.cs-meta-team{width:100%;}
.cs-meta dt,.cs-label{font-size:var(--font-size-16);line-height:20px;font-weight:400;color:var(--color-text-muted);}
.cs-meta dd{font-size:var(--font-size-16);line-height:24px;}

/* ── SECTIONS ── */
.cs-h2{font-family:var(--font-heading);font-size:var(--font-size-28);line-height:var(--line-height-34);font-weight:700;}
.cs-block{display:flex;flex-direction:column;gap:var(--spacing-2);}
.cs-body{display:flex;flex-direction:column;gap:var(--spacing-2);}
.cs-body p,.cs-list,.cs-contrib dd,.quote-slide blockquote{font-size:var(--font-size-16);line-height:24px;}
.cs-list{display:flex;flex-direction:column;gap:var(--spacing-2);padding-left:1.25em;}
.cs-list li::marker{font-size:.9em;}
strong{font-weight:400;}

.cs-contrib{display:flex;flex-direction:column;gap:var(--spacing-3);}
.cs-contrib-row{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--spacing-2);}
.cs-contrib-row + .cs-contrib-row{padding-top:var(--spacing-3);border-top:1px solid var(--color-border-subtle);}
.cs-contrib dt{font-size:var(--font-size-16);line-height:24px;font-weight:400;}
@media (max-width:599px){.cs-contrib-row{grid-template-columns:1fr;gap:var(--spacing-1);}}

.cs-cards{list-style:none;display:grid;gap:var(--spacing-6);margin-top:var(--spacing-4);}
.cs-cards--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cs-cards--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cs-card{display:flex;flex-direction:column;gap:var(--spacing-2);padding:20px;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);font-size:var(--font-size-16);line-height:24px;}
.cs-card-heading{font-size:var(--font-size-16);line-height:20px;font-weight:400;}
.cs-card ul{padding-left:1.25em;}
@media (max-width:599px){.cs-cards--2,.cs-cards--3{grid-template-columns:1fr;}}

/* Images and videos */
.cs-media{display:flex;flex-direction:column;gap:10px;min-width:0;}
.cs-media-frame{position:relative;display:flex;align-items:center;justify-content:center;padding:20px;border-radius:var(--radius-md);background:var(--color-bg-media);overflow:hidden;}
/* No fixed height: media keeps its own proportions, capped so tall portrait clips still fit on screen */
.cs-media-frame img,.cs-media-frame video{max-width:100%;max-height:80vh;width:auto;height:auto;object-fit:contain;}
.cs-media figcaption{font-size:var(--font-size-16);line-height:20px;font-weight:400;color:var(--color-text-muted);}
.cs-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-4);}
.cs-pair .cs-media-frame{flex:1;}  /* both frames in a pair match the taller one, so captions line up */
@media (max-width:599px){
  .cs-pair{grid-template-columns:1fr;gap:var(--spacing-6);}
}
.play-toggle{position:absolute;right:var(--spacing-4);bottom:var(--spacing-4);display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--color-text-primary);color:#FFFFFF;cursor:pointer;}
.play-toggle:hover{background:var(--color-accent);}
.play-toggle:focus-visible{box-shadow:0 0 0 2px var(--color-bg-media),0 0 0 4px var(--color-accent);border-radius:50%;}
.play-toggle .icon-pause,.play-toggle.is-playing .icon-play{display:none;}
.play-toggle.is-playing .icon-pause{display:block;}

/* Quote carousel */
.quotes-slides{display:flex;flex-direction:column;gap:var(--spacing-4);}
.quote-slide[hidden]{display:none;}
.quotes{display:flex;flex-direction:column;gap:var(--spacing-4);padding:var(--spacing-6);border:1px solid var(--color-bg-media);border-radius:var(--radius-md);background:var(--color-bg-raised);}
.quotes-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);flex-wrap:wrap;}
.quotes-controls[hidden]{display:none;}
.quotes-step{display:flex;align-items:center;gap:var(--spacing-3);}
.quotes-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--color-bg-media);border-radius:50%;background:transparent;color:var(--color-text-primary);cursor:pointer;}
.quotes-btn:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent);}
.quotes-btn:disabled{opacity:.35;cursor:default;}
.quotes-btn:focus-visible{border-radius:50%;}
.quotes-count{font-size:var(--font-size-16);line-height:20px;font-weight:400;color:var(--color-text-muted);min-width:3ch;}
.quotes-dots{display:flex;}
.quotes-dot{display:grid;place-items:center;width:24px;height:24px;border:0;background:none;cursor:pointer;}
.quotes-dot::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--color-text-primary);}
.quotes-dot[aria-current="true"]::before{background:var(--color-text-primary);}
.quotes-dot:focus-visible{border-radius:50%;}

/* ── CASE STUDY FOOTER ── */
.cs-footer{display:flex;flex-direction:column;gap:var(--spacing-6);}
.next-link{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--spacing-6);padding:var(--spacing-6) 0;border-bottom:1px solid var(--color-border-subtle);color:var(--color-text-primary);text-decoration:none;}
.next-text{display:flex;flex-direction:column;gap:var(--spacing-2);}
.next-label{font-size:var(--font-size-16);line-height:20px;font-weight:400;color:var(--color-text-muted);}
.next-title{font-family:var(--font-heading);font-size:var(--font-size-28);line-height:var(--line-height-34);font-weight:700;}
.next-arrow{flex:none;color:var(--color-accent);transition:transform .2s ease-out;}
/* Next project: the arrow nudges 2px right on hover and keyboard focus (main column and sidebar) */
.next-link:hover .next-arrow,.next-link:focus-visible .next-arrow,.aside-next:hover .next-arrow{transform:translateX(2px);}
.cs-contact{display:flex;flex-direction:column;gap:var(--spacing-1);padding-top:var(--spacing-2);}
.cs-contact p{font-size:var(--font-size-16);line-height:24px;color:var(--color-text-muted);}
.email-link{align-self:flex-start;font-size:var(--font-size-16);line-height:24px;font-weight:500;color:var(--color-text-primary);text-underline-offset:3px;}
.email-link:hover{color:var(--color-accent);}

/* Email links copy the address (site.js): "Copy email" fades in above the link on hover and
   keyboard focus; on click the text slides up to "Copied" */
.copy-link{position:relative;}
.copy-tip{position:absolute;left:0;bottom:calc(100% + 4px);z-index:5;display:grid;justify-items:center;overflow:hidden;padding:2px var(--spacing-2);border-radius:999px;background:var(--color-text-primary);color:var(--color-on-accent);font-size:12px;line-height:18px;font-weight:400;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease;}
.copy-tip-text{grid-area:1/1;transition:opacity .2s ease,transform .2s ease;}
.copy-tip-done{opacity:0;transform:translateY(100%);}
.copy-link:hover .copy-tip,.copy-link:focus-visible .copy-tip,.copy-link.is-tip-open .copy-tip{opacity:1;transform:none;}
.copy-link.is-copied .copy-tip-text{opacity:0;transform:translateY(-100%);}
.copy-link.is-copied .copy-tip-done{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.copy-tip,.copy-note,.copy-tip-text{transform:none !important;}}
/* Desktop sidebar email: no pill; "Copy email" / "Copied" fades in as plain muted text at the right
   edge of the row (Figma nav / contact, nav/default in color/grey/36) */
.copy-note{display:none;}
@media (min-width:1024px){
  .contact .copy-tip{display:none;}
  .contact .copy-note{position:absolute;right:0;top:6px;display:grid;justify-items:end;overflow:hidden;font-size:var(--font-size-16);line-height:20px;font-weight:400;color:var(--color-text-muted);white-space:nowrap;pointer-events:none;opacity:0;transform:translateX(4px);transition:opacity .2s ease,transform .2s ease;}  /* top:6px lines it up with the link text */
  .contact .copy-link:hover .copy-note,.contact .copy-link:focus-visible .copy-note,.contact .copy-link.is-tip-open .copy-note{opacity:.5;transform:none;}  /* 50% opacity */
}

/* ── ABOUT ── */
.about{max-width:1082px;display:flex;flex-direction:column;gap:10px;}
.about-section{display:flex;flex-direction:column;gap:var(--spacing-4);padding:var(--spacing-6);}
.about-section:last-child{border-bottom:1px solid var(--color-border-subtle);}  /* Figma: no line between sections, one under Experience */
.about-section:first-child{gap:var(--spacing-2);}
.about-title{font-family:var(--font-heading);font-size:var(--font-size-32);line-height:44px;font-weight:700;}
.about-body{display:flex;flex-direction:column;gap:var(--spacing-2);font-size:var(--font-size-16);line-height:24px;}
.about-h2{font-family:var(--font-heading);font-size:var(--font-size-28);line-height:var(--line-height-34);font-weight:700;}
.about-table{list-style:none;}
.about-row{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--spacing-6);padding:var(--spacing-4) 0;border-top:1px solid var(--color-border-subtle);}
.about-col{display:flex;flex-direction:column;gap:var(--spacing-1);}
.about-key,.about-role{font-size:var(--font-size-16);line-height:24px;font-weight:400;}
.about-desc{font-size:var(--font-size-16);line-height:24px;color:var(--color-text-muted);}
.about-years{font-size:var(--font-size-16);line-height:24px;color:var(--color-text-muted);}
@media (max-width:1023px){.about-section{padding:var(--spacing-6) 0;}}
@media (max-width:599px){.about-row{grid-template-columns:1fr;}}

/* ── EMPTY STATE (Lab, 404) ── */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-6);text-align:center;}
.empty-state .centred-eyebrow{margin-bottom:calc(var(--spacing-4) * -1);}
.empty-logo{width:120px;height:120px;border-radius:50%;}
.empty-body{font-size:var(--font-size-16);line-height:24px;}
.empty-link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--font-size-16);line-height:24px;font-weight:500;color:var(--color-text-primary);text-underline-offset:3px;}
.empty-link:hover{color:var(--color-accent);}

/* ── FADE-INS ── */
/* Each .reveal block fades in and rises 16px the first time it scrolls into view (site.js adds .is-revealed).
   Blocks are only hidden when JavaScript is running (.reveal-ready on <html>) and reduced motion is off.
   A focused element is never left invisible. */
@media (prefers-reduced-motion:no-preference){
  .reveal-ready .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease-out,transform .5s ease-out;}
  .reveal-ready .reveal.is-revealed,.reveal-ready .reveal:focus-within{opacity:1;transform:none;}
  .reveal-ready .reveal:focus-within:not(.is-revealed){transition:none;}
}
@media print{.reveal{opacity:1 !important;transform:none !important;}}

/* ── NO TRANSITIONS WHILE LOADING ── */
/* Until the page has loaded (html.no-transitions, removed by an inline script in the head), nothing
   transitions, so links can't animate from the browser's default blue/visible-arrow state into
   their own. Scroll fade-ins (.reveal) are left alone so they still play. */
.no-transitions *:not(.reveal),.no-transitions *::before,.no-transitions *::after{transition:none !important;}

/* ── LINK HOVER FADES ── */
/* Text links fade to their hover colour; no link gains an underline on hover. Reduced motion makes this instant (BASE). */
.site-name-text,.nav-link,.back-link,.email-link,.empty-link,.next-title,.aside-next-title{transition:color .2s ease;}
.next-link:hover .next-title,.aside-next:hover .aside-next-title{color:var(--color-accent);}

/* ── STICKY BARS (below 1024px) ── */
/* A line appears under the bar once the page has scrolled; site.js sets --sticky-offset
   so headings and focused links are never hidden behind it */
html{scroll-padding-top:var(--sticky-offset,0px);}
.js-sticky{box-shadow:0 1px 0 transparent;transition:box-shadow .3s ease;}  /* the line fades in (300ms) */
.js-sticky.is-stuck{box-shadow:0 1px 0 var(--color-border-subtle);}
/* Short screens (phone sideways, high zoom): a pinned bar would cover too much, so it scrolls away */
@media (max-height:480px){.topbar,.cs-bar{position:static !important;}}