/* ==========================================================================
   Gabriele Burol — portfolio
   One stylesheet for every page. Layout is a spec-sheet grid: a left rail of
   mono labels, a right column of content. Doto for display, Geist for text.
   ========================================================================== */

:root{
  /* One orange everywhere. On black it is below 4.5:1, so dark mode never uses it for small text. */
  --bg:#EEEFEF; --surface:#F9F9F9; --fg:#0B0B0C; --muted:#5F6165; --line:#D2D3D5; --accent:#B54708;
  --cell:#E2E3E4;
  --ok:#146C35; --error:#B42318; /* form result text; both clear 4.5:1 on --bg */
  --display:"Doto","Courier New",monospace;
  --body:"Geist",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --label:13px; /* small mono caps: labels, menu, buttons, tags */
  --max:1180px;
  --rail:200px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#000000; --surface:#0E0F10; --fg:#ECECEC; --muted:#8C8E92; --line:#25272A; --accent:#B54708;
  --cell:#1A1B1D;
  --ok:#4ADE80; --error:#F97066;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#0E0F10; --fg:#ECECEC; --muted:#8C8E92; --line:#25272A; --accent:#B54708;
  --cell:#1A1B1D;
  --ok:#4ADE80; --error:#F97066;
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.label{font-family:var(--mono);font-size:var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.skip{position:absolute;left:-9999px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{left:16px;top:16px;z-index:10;background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:999px}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.mark{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:.04em;text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.rec{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.6s steps(2,end) infinite}
@keyframes blink{50%{opacity:.15}}
.bar-right{display:flex;align-items:center;gap:clamp(12px,3vw,28px)}
.bar nav{display:flex;gap:clamp(12px,3vw,28px);flex-wrap:wrap}
.bar nav a{font-family:var(--mono);font-size:var(--label);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;color:var(--muted)}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--fg)}
.bar nav a:hover{text-decoration:underline 2px var(--accent);text-underline-offset:6px} /* orange underscore on hover */
.theme{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;display:grid;place-items:center;padding:0}
.theme:hover{border-color:var(--fg)}
.theme svg{width:14px;height:14px}

/* ---------- buttons & pills ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--label);text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line);background:transparent;color:var(--fg);border-radius:999px;padding:9px 16px;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--fg)}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* filled (white) buttons grow a little on hover */
.btn.primary{transition:transform .2s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .btn.primary:hover:not(:disabled){transform:scale(1.06)} }
.btn.icon{width:44px;height:44px;padding:0;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--fg);border-radius:999px;padding:6px 14px;font-family:var(--mono);font-size:var(--label);text-transform:uppercase;letter-spacing:.06em}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.arrow::after{content:"→";display:inline-block;font-family:var(--body);font-size:1.6em;line-height:1;vertical-align:-.08em;transition:translate .2s cubic-bezier(.2,.7,.2,1),scale .2s cubic-bezier(.2,.7,.2,1);will-change:translate}
a:hover .arrow::after,button:hover .arrow::after,.arrow:hover::after,a:focus-visible .arrow::after{translate:3px 0;scale:1.15}
/* same arrow turned down, for links that scroll further down the page */
.arrow.down::after{rotate:90deg}
a:hover .arrow.down::after,a:focus-visible .arrow.down::after{translate:0 3px}
/* while hovered, the arrow swings along its own direction (→ sideways, ↓ up and down), evenly around its
   resting spot: one eased stroke end to end, so it is fastest through the middle and never stalls there.
   The negative delay starts it mid-swing, at rest position, so there is no jump when the hover begins.
   Only `translate` animates; `scale` keeps its own smooth transition. */
@media (prefers-reduced-motion:no-preference){
  a:hover .arrow::after,button:hover .arrow::after,.arrow:hover::after,a:focus-visible .arrow::after{animation:arrow-swing .6s ease-in-out -.3s infinite alternate}
  a:hover .arrow.down::after,a:focus-visible .arrow.down::after{animation-name:arrow-swing-down}
}
@keyframes arrow-swing{from{translate:-3px 0}to{translate:3px 0}}
@keyframes arrow-swing-down{from{translate:0 -3px}to{translate:0 3px}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,8vw,104px);background-image:radial-gradient(var(--line) 1.1px,transparent 1.2px);background-size:14px 14px;background-position:7px 7px}
/* dot field on any section marked data-dots (hero, Contact): static CSS dots for everyone, and the
   interactive canvas (js/hero-dots.js) replaces them on mouse devices with motion allowed */
section.block[data-dots]{background-image:radial-gradient(var(--line) 1.1px,transparent 1.2px);background-size:14px 14px;background-position:7px 7px}
/* Contact's static fallback (trail/spotlight) fades the dots out toward the footer (the canvas does a true halftone) */
section.block[data-dots="trail"],section.block[data-dots="spotlight"]{background-image:linear-gradient(to bottom,transparent 60%,var(--bg)),radial-gradient(var(--line) 1.1px,transparent 1.2px);background-size:100% 100%,14px 14px;background-position:0 0,7px 7px}
[data-dots]{position:relative;isolation:isolate}
.hero-dots{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:none}
.dots-live{background-image:none}
.dots-live > .hero-dots{display:block}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:end}
/* margin-bottom: Doto's line box ends .09em below the letters; pull it up so the column bottom is the letters' bottom row */
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(64px,13vw,168px);line-height:.88;letter-spacing:-.01em;text-transform:uppercase;margin-top:18px;margin-bottom:-.09em}
/* Doto draws its period one dot-row (0.1em) below the baseline; lift it so it sits on the letters' bottom row */
.dot{color:var(--accent);position:relative;top:-.1em}
.hero .lede{max-width:36ch;font-size:clamp(18px,1.6vw,21px);line-height:1.45}
.hero .portrait + .label{margin-top:clamp(40px,6vw,72px)}
.hero .lede b{font-weight:600}
.hero .lede em{font-style:normal;color:var(--accent);font-weight:500}
.status{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:32px}
.portrait{display:flex;align-items:center;gap:16px;margin-top:28px}
.hero .portrait:first-child{margin-top:0}
.portrait .label{color:var(--fg)}
.portrait .avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:var(--cell);color:transparent;font-size:0}
/* hover on the photo: it grows to the right, over its caption, and winks once (a second, winking photo) */
.avatar-wrap{display:block;position:relative;z-index:1;flex:none;width:72px;height:72px;border-radius:50%;transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.avatar-wrap .wink{position:absolute;inset:0;opacity:0}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .avatar-wrap:hover{transform:scale(2.6)}
  .avatar-wrap:hover .wink{animation:wink .7s steps(1,end) .35s}
}
@keyframes wink{0%{opacity:1}75%{opacity:0}} /* closed for ~0.5s, like a real wink */
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- sections ---------- */
section.block{padding-block:clamp(56px,8vw,104px);border-top:1px solid var(--line)}
.split{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:clamp(20px,4vw,56px)}
.split > .label{padding-top:8px}
.label b{color:var(--fg);font-weight:500}
.h2{font-family:var(--display);font-weight:900;font-size:clamp(34px,4.6vw,58px);line-height:1;text-transform:uppercase;letter-spacing:-.005em}
.intro{max-width:62ch;color:var(--muted);margin-top:18px;font-size:17px}
.intro em{color:var(--fg);font-style:normal}

/* ---------- project cards ---------- */
.work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:44px}
.work.single{grid-template-columns:minmax(0,1fr)}
.case{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:16px 16px 24px;display:flex;flex-direction:column;gap:16px;min-width:0;text-decoration:none;transition:border-color .2s}
a.case:hover{border-color:var(--fg)}
.case > :not(.media){margin-inline:8px}
.case-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.case .meta{display:flex;flex-wrap:wrap;gap:6px 14px}
.case h3{font-size:24px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.case p{color:var(--muted)}
.case .more{margin-top:auto;font-size:14px;display:flex;justify-content:flex-end}

/* image frame — shows a dotted placeholder until an <img> is dropped in */
.media{position:relative;aspect-ratio:16/11;border-radius:14px;overflow:hidden;background:var(--cell);margin:0}
.media img{width:100%;height:100%;object-fit:cover}
.media.wide{aspect-ratio:21/9}
.media:empty,.media.placeholder{background-image:radial-gradient(var(--line) 1.4px,transparent 1.6px);background-size:12px 12px;display:grid;place-items:center}
.media.placeholder::after{content:attr(data-file);font-family:var(--mono);font-size:var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface);padding:6px 10px;border-radius:999px;border:1px solid var(--line)}


/* ---------- spec list (reusable on inner pages) ---------- */
.specs{margin-top:40px;border-top:1px solid var(--fg);margin-bottom:0}
.spec{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;padding-block:16px;border-bottom:1px solid var(--line)}
.spec dt{font-family:var(--mono);font-size:var(--label);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding-top:2px}
.spec dd{margin:0}
.spec dd small{color:var(--muted);font-size:14px}

/* ---------- prose (inner pages) ---------- */
.prose{max-width:66ch;display:grid;gap:18px;font-size:17px}
.prose h3{font-size:22px;font-weight:500;margin-top:16px}
.prose b{font-weight:600}
.prose ul{margin:0;padding-left:1.1em;display:grid;gap:8px}
.hero h1.long{font-size:clamp(48px,8.4vw,112px)}

/* ---------- case study pieces (inner pages) ---------- */
/* big numbers: <dl class="stats"><div><dt>label</dt><dd>70%</dd></div>…</dl> */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;margin:40px 0 0;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.stats > div{background:var(--surface);padding:20px 20px 22px;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px}
.stats dd{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,60px);line-height:.9}
.stats dd span{color:var(--accent)}
.stats dt{font-family:var(--mono);font-size:var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* numbered process */
.steps{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--fg);counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 16px;padding-block:16px;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--mono);font-size:var(--label);color:var(--muted);padding-top:3px;grid-row:span 2}
.steps b{font-weight:500}
.steps p{color:var(--muted);font-size:16px}

/* small outlined tags, e.g. a component inventory */
.tags{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-family:var(--mono);font-size:var(--label);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--surface)}

/* colour swatches: set --c inline on each */
.swatches{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.swatches li{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.swatches li::before{content:"";display:block;height:72px;background:var(--c)}
.swatches span{display:block;padding:10px 12px 12px;font-family:var(--mono);font-size:var(--label);letter-spacing:.04em;line-height:1.5;color:var(--muted)}
.swatches b{display:block;color:var(--fg);font-weight:500}

/* images under a section's text */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
.gallery .full{grid-column:1 / -1}
.gallery.three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* app + mobile web + desktop side by side: two phones and one wide screen */
.gallery.devices{grid-template-columns:1fr 1fr 2.6fr;align-items:start}
.gallery figure{margin:0}
.caption{margin-top:10px}

.quote{margin:40px 0 0;padding:24px 0 0 24px;border-left:2px solid var(--accent);max-width:52ch}
.quote p{font-size:clamp(20px,2vw,24px);line-height:1.4;letter-spacing:-.01em}
.quote blockquote{margin:0}
.quote figcaption{margin-top:12px}

/* full-width image band straight under the hero */
.showcase{padding-bottom:clamp(56px,8vw,104px)}
.showcase .media{aspect-ratio:16/9;border-radius:20px}

/* fact cards: <dl class="facts"><div><dt>Role</dt><dd>…</dd></div>…</dl> */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:40px 0 0}
.facts > div{border:1px solid var(--line);border-radius:16px;padding:16px 18px 18px;background:var(--surface)}
.facts dt{font-family:var(--mono);font-size:var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.facts dd{margin:0}

/* research findings: number + insight */
.findings{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.findings li{border-top:2px solid var(--fg);padding-top:16px;display:grid;gap:10px;align-content:start}
.findings b{font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,60px);line-height:.9}
.findings p{color:var(--muted);font-size:15.5px}

.bigquote{margin:56px 0 0;font-size:clamp(24px,3vw,36px);line-height:1.25;letter-spacing:-.015em;max-width:28ch}
.bigquote::before{content:"“";display:block;font-family:var(--display);font-weight:900;color:var(--accent);font-size:1.6em;line-height:.6}
.bigquote + .label{margin-top:14px;display:block}

/* atomic levels as a stepped bar chart: set --h (0–1) on each */
.ladder{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:start}
.ladder li{display:grid;grid-template-rows:220px auto auto;gap:10px}
.ladder li::before{content:"";align-self:end;height:calc(var(--h) * 220px);min-height:24px;border-radius:10px 10px 4px 4px;background:var(--cell);background-image:radial-gradient(var(--line) 1.2px,transparent 1.4px);background-size:8px 8px;border:1px solid var(--line)}
.ladder li:last-child::before{background:var(--fg);border-color:var(--fg)}
.ladder b{font-family:var(--display);font-weight:900;font-size:clamp(26px,3vw,36px);line-height:1}
.ladder span{font-family:var(--mono);font-size:var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.ladder span i{font-style:normal;color:var(--fg);display:block}

/* simple data table */
.table-wrap{margin-top:40px;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.table th{font-family:var(--mono);font-size:var(--label);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left}
.table th,.table td{padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.table tr:last-child td{border-bottom:0}
.table code{font-family:var(--mono);font-size:13px}
.chip{display:inline-block;width:12px;height:12px;border-radius:4px;background:var(--c);border:1px solid var(--line);vertical-align:-1px;margin-right:8px}

/* row of phone-shaped images */
.mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.mosaic figure{margin:0}
.mosaic figure:nth-child(2){transform:translateY(32px)}
.media.tall{aspect-ratio:9/16;border-radius:22px}
/* real phone screenshots: keep their own proportions and rounded corners, no frame behind */
.media.screen{aspect-ratio:750/1624;border-radius:0;background:none}
.media.screen img{object-fit:contain;border:1px solid var(--line);border-radius:6.7% / 3.1%} /* outline follows the screenshot corners, so black screens stay visible on black */
/* an image shown at its natural shape, never cropped */
.media.natural{aspect-ratio:auto}
.media.natural img{height:auto}
/* a single phone screen on its own, kept at phone size */
.phone-solo{max-width:260px;margin:0}
.mosaic.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.mosaic.four figure:nth-child(even){transform:translateY(32px)}
.mosaic.five{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mosaic.five figure:nth-child(even){transform:translateY(32px)}

/* horizontal process: Propose → Critique → … */
.flowline{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.flowline li{font-family:var(--mono);font-size:var(--label);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--fg);border-radius:999px;padding:8px 14px}
.flowline li + li::before{content:"→";font-family:var(--body);margin:0 10px 0 -2px;color:var(--muted)}
.flowline li + li{border:0;padding-left:0}
.flowline li:last-child{color:var(--accent)}

.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px;margin-top:40px}
.cols h3{font-size:18px;font-weight:500;margin-bottom:6px}
.cols p{color:var(--muted);font-size:15.5px}
.cols > div{border-top:1px solid var(--line);padding-top:16px}

/* before / after */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:40px}
.compare > div{border:1px solid var(--line);border-radius:18px;padding:20px 22px 22px;background:var(--surface)}
.compare > div:last-child{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.compare > div:last-child .label{color:inherit;opacity:.7}
.compare ul{margin:14px 0 0;padding-left:1.1em;display:grid;gap:8px}

/* row lists (resume timeline, certificate list): rail label | content | optional arrow.
   Each .row (an <a> when the whole row links somewhere) holds a .label, a .body and optionally an .arrow. */
.rows{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--fg)}
.row{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:6px 24px;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.row > .label{padding-top:4px}
.row > .arrow{align-self:start;padding-top:2px}
.row .body{display:grid;gap:6px;min-width:0}
.row h3{font-size:19px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.row .org{color:var(--muted);font-size:15px}
.row p{color:var(--muted);font-size:15.5px;max-width:62ch}
.row ul{margin:8px 0 0;padding-left:1.1em;display:grid;gap:6px;color:var(--muted);font-size:15.5px;max-width:66ch}
.row .impact{color:var(--fg);font-size:15.5px;margin-top:6px;max-width:66ch}
.row .impact b{font-weight:500}
a.row:hover h3{color:var(--accent)}

/* a big dot-matrix date that opens a story section, with its .label underneath */
.dateline{font-family:var(--display);font-weight:900;font-size:clamp(52px,9vw,120px);line-height:.88;letter-spacing:-.01em}
.dateline + .label{display:block;margin-top:14px}

/* About page: a large round portrait that winks on hover, like the homepage photo */
.about-photo{position:relative;width:min(240px,60vw);aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(--line);background:var(--cell)}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-photo .wink{opacity:0}
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .about-photo:hover .wink{animation:wink .7s steps(1,end) .1s} }
/* small Ukrainian flag mark next to a label */
.flag{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.flag-mark{width:28px;height:18px;border-radius:3px;background:linear-gradient(#0057B7 50%,#FFD700 50%)}

/* password gate for unfinished pages (see js/site.js): content hidden until unlocked */
.locked main,.locked footer{display:none}
.gate{padding-block:clamp(56px,10vw,120px)}
.gate .h2{margin-top:14px}

/* hero title that is one long word (e.g. CERTIFICATES.) */
.hero h1.fit{font-size:clamp(36px,6vw,72px)}

/* next-project link at the bottom of a case study */
.next{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;text-decoration:none}
.next .h2{margin-top:10px}
.next:hover .h2{color:var(--accent)}

/* ---------- contact ---------- */
.contact{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:32px}
/* icon-only action button: grey icon, its box only appears on hover/focus */
.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;transition:background-color .2s,border-color .2s}
.icon-btn:hover,.icon-btn:focus-visible{background:var(--surface);border-color:var(--line)}
.icon-btn svg{width:16px;height:16px}
.icon-btn .i-done,.icon-btn.done .i-copy{display:none}
.icon-btn.done .i-done{display:block}
.email{font-family:var(--mono);font-size:var(--label);letter-spacing:.08em;user-select:all;overflow-wrap:anywhere;text-decoration:none}
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}

/* contact form (Netlify Forms) */
.form{display:grid;gap:26px;max-width:560px;margin-top:40px} /* same gap between the fields and before Send */
.field{display:grid;gap:8px}
.field input,.field textarea{font:inherit;font-size:16px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;width:100%;transition:border-color .2s}
.field textarea{resize:none;min-height:132px}
.field input:hover,.field textarea:hover{border-color:var(--muted)}
.field input:focus,.field textarea:focus{border-color:var(--fg);outline:none} /* the border itself lights up, no extra ring */
.form-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.form-status{margin-left:auto;text-align:right} /* right edge lines up with the fields */
.form-status .ghost{visibility:hidden} /* untyped rest: keeps the sentence in its final place */
.form-status.typing [data-typed]{position:relative}
.form-status.typing [data-typed]::after{content:"";position:absolute;left:calc(100% + 2px);bottom:.05em;width:.55em;height:1em;background:currentColor} /* block cursor while typing; floats so nothing shifts */
.form .btn:disabled{opacity:.5;cursor:default}
/* failed check on an empty field: the reminder shows as a placeholder in the muted grey */
.field [aria-invalid="true"]::placeholder{color:var(--muted);opacity:1}
.form [data-state="ok"]{color:var(--ok)}
.form [data-state="error"]{color:var(--error)}
.trap{position:absolute;left:-9999px} /* spam trap: hidden from people, bots fill it in */

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding-block:28px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot-links{display:flex;flex-wrap:wrap;gap:12px;margin-left:auto} /* stays on the right even when the footer wraps */

/* ---------- scroll reveal ----------
   Elements marked data-reveal fade up as they enter the screen. The head script adds .reveal-on
   only when the browser supports it and the visitor has not asked for reduced motion, so without
   it everything is simply visible. Display headings "print" left to right in steps, like a dot-matrix. */
.reveal-on [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.reveal-on [data-reveal].is-in{opacity:1;transform:none}
/* headings: a background-coloured cover steps off to the right (the heading itself stays measurable for the observer) */
.reveal-on .h2[data-reveal]{position:relative;opacity:1;transform:none}
.reveal-on .h2[data-reveal]::after{content:"";position:absolute;inset:-2px -4px;background:var(--bg);transform-origin:right;transition:transform .55s steps(10,end) var(--d,0ms)}
.reveal-on .h2[data-reveal].is-in::after{transform:scaleX(0)}

/* cards: image eases in on hover (pointer devices only) */
.media img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){ a.case:hover .media img{transform:scale(1.15)} }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero .wrap,.work,.split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .gallery,.gallery.three{grid-template-columns:minmax(0,1fr)}
  .gallery.devices{grid-template-columns:1fr 1fr}
  .gallery.devices figure:last-child{grid-column:1 / -1}
  .swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts,.findings,.cols,.compare{grid-template-columns:minmax(0,1fr)}
  /* levels chart turns into horizontal bars: bar on top, number and label underneath */
  .ladder{grid-template-columns:minmax(0,1fr);gap:18px}
  .ladder li{grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto;gap:8px 12px;align-items:start}
  .ladder li::before{grid-column:1 / -1;align-self:auto;height:14px;min-height:0;width:calc(var(--h) * 100%);border-radius:4px;background-size:6px 6px}
  .ladder b{font-size:26px}
  .swatches b{overflow-wrap:anywhere}
  .mosaic{gap:8px}
  .mosaic figure:nth-child(2){transform:translateY(16px)}
  .mosaic.four{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .mosaic.four figure:nth-child(even){transform:translateY(16px)}
  .mosaic.five{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .mosaic.five figure:nth-child(even){transform:translateY(16px)}
  .steps li{grid-template-columns:40px minmax(0,1fr)}
  .row{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px}
  .row > .label{padding-top:0}
  .row .body{grid-column:1 / -1;grid-row:2}
  .row > .arrow{grid-column:2;grid-row:1}
}
@media (max-width:640px){
  .bar .wrap{gap:10px}
  .mark{font-size:16px;gap:8px}
  .bar-right{gap:10px}
  .bar nav{gap:8px;flex-wrap:nowrap}
  .bar nav a{letter-spacing:.04em}
  .spec{grid-template-columns:minmax(0,1fr);gap:4px}
  .reveal-on [data-reveal]{transform:translateY(10px)} /* shorter travel on small screens */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rec{animation:none}
  .arrow::after,.media img{transition:none}
  a.case:hover .media img{transform:none}
}
@media print{ .reveal-on [data-reveal]{opacity:1;transform:none} .reveal-on .h2[data-reveal]::after{display:none} }
@media (max-width:460px){
  .bar nav{display:none} /* too narrow for four links; the homepage hero repeats them */
}
/* dark mode: orange is too dim for text on black, so the highlighted phrase stays white with an orange underline */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero .lede em{color:var(--fg);text-decoration:underline 2px var(--accent);text-underline-offset:4px} }
:root[data-theme="dark"] .hero .lede em{color:var(--fg);text-decoration:underline 2px var(--accent);text-underline-offset:4px}