@charset "utf-8";
/* ==========================================================================
   Dimitra Glenti — Portfolio
   Dark, quiet and minimal. Sharp edges, liquid-glass surfaces.
   Tokens → base → ambient light → glass → chrome → home → case → contact → footer
   ========================================================================== */

:root {
  /* Colour: every text pairing below meets WCAG AA (≥ 4.5:1) */
  --bg: #ece4d8;           /* warm cream, like plastered walls */
  --surface: #ddd0bd;       /* sand / light oak */
  --band: #e4d9c9;          /* a slightly deeper cream for alternating sections */
  --ink: #2b221b;           /* walnut */
  --text: var(--ink);       /* 12.4:1 on --bg */
  --muted: #665444;         /* 5.7:1 on --bg */
  --muted-on-glass: #665444;
  --line: rgba(43, 34, 27, .14);      /* decorative dividers */
  --line-strong: #8a765e;   /* ≥ 3:1, for form borders (non-text contrast) */
  --on-glass: #fbf7f1;      /* text on the smoked-brown glass: ≥ 6.4:1 even over white */
  --muted-on-smoke: #efe6da;/* ≥ 5.6:1 on the smoked glass */
  --error: #9e2a1d;

  /* Case accents: only used as soft ambient light and hover glows */
  --aida: #9a8fd6;
  --credion: #c9a85a;
  --prescan: #b98aa9;
  --ics: #7fb0aa;
  --accent: #c9a85a;

  /* Type */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  /* Titles in Lora, text in Satoshi; Instrument Serif for the logo wordmark. */
  --sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --title: "Lora", Georgia, "Times New Roman", serif;
  --track: .14em;            /* uppercase UI tracking */

  /* Layout */
  --gutter: clamp(16px, 4vw, 48px);
  --gap: 8px;
  --max: 1240px;
  --chrome-h: 60px;          /* height of the floating menu bar and icon buttons */
  --r-xl: 14px;              /* cards and stages */
  --r-lg: 12px;              /* floating controls */
  --r-md: 8px;               /* nested items: concentric with --r-lg minus padding */
  --r-sm: 6px;               /* buttons, inputs, tags */
  --ease: cubic-bezier(.2, .7, .1, 1);
}
@media (max-width: 719px) { :root { --chrome-h: 54px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light;
  scroll-padding-top: 96px; /* anchored/focused content stays clear of the floating menu */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--title); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--text); color: var(--bg); }

:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 200;
  background: var(--text); color: var(--bg); padding: 12px 16px; text-decoration: none;
  font-size: 13px; letter-spacing: var(--track); text-transform: uppercase;
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.icon { width: 18px; height: 18px; flex: none; }

/* Small uppercase UI label */
.label {
  font-family: var(--sans); font-weight: 400; line-height: 1.5;
  font-size: 12.5px; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); margin: 0;
}

/* ---------- Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .intro-anim { animation: fade-up .9s var(--ease) both; }
  .intro-anim + .intro-anim { animation-delay: .1s; }
  .intro-anim + .intro-anim + .intro-anim { animation-delay: .2s; }
}
@keyframes fade-up { from { opacity: .001; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Liquid glass (after Apple's material, WWDC25 "Meet Liquid Glass")
   - Lensing, not borders: content behind bends at the rounded edges.
     In Chromium, liquid-glass.js swaps the backdrop for an SVG displacement
     filter (inline style). Other browsers keep the frosted fallback below.
   - Light, not strokes: soft inner specular highlights catch the edges.
   Variants:
   .glass         floating controls (menu, icon buttons). The backdrop is
                  darkened so light text stays ≥ 4.5:1 even over a white image.
   .glass--light  large panels (project cards, image stages, form), which
                  only ever sit on the dark page.
   ========================================================================== */
.glass {
  /* dense enough that light text passes AA from the tint alone, before any backdrop darkening */
  --glass-tint: rgba(74, 58, 45, .82);
  --glass-filter: blur(16px) saturate(140%) brightness(.7);
  --text: var(--on-glass);
  --muted-on-glass: var(--muted-on-smoke);
  color: var(--text);
  --specular:
    inset 0 1px 1.5px rgba(255, 255, 255, .17),
    inset 0 -1px 1.5px rgba(255, 255, 255, .05),
    inset 0 0 22px rgba(255, 255, 255, .04);
  background: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--specular), 0 16px 40px -18px rgba(60, 40, 22, .45);
  transition: box-shadow .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
}
.glass--light {
  --glass-tint: rgba(255, 251, 245, .5);
  --glass-filter: blur(24px) saturate(140%);
  --text: var(--ink);
  --muted-on-glass: var(--muted);
  box-shadow: var(--specular), 0 24px 60px -32px rgba(60, 40, 22, .35);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { --glass-tint: #5f5145; }
  .glass--light { --glass-tint: #f4eee6; }
}
/* Reduce Transparency: frostier, near-opaque (Apple does the same) */
@media (prefers-reduced-transparency: reduce) {
  .glass { --glass-tint: #5a4c40; }
  .glass--light { --glass-tint: #f4eee6; }
  .glass, .glass--light { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* Increase Contrast: Apple adds a contrasting border in this mode only */
@media (prefers-contrast: more) {
  .glass { --glass-tint: #3a2e25; box-shadow: inset 0 0 0 1px var(--text); }
}
@media (forced-colors: active) {
  .glass { border: 1px solid CanvasText; }
}


/* ==========================================================================
   Chrome: floating menu (top centre) + icon buttons (top right)
   ========================================================================== */
.menu {
  position: fixed; z-index: 100; top: 16px; left: 50%; transform: translateX(-50%);
  width: min(400px, calc(100% - 24px)); border-radius: var(--r-lg);
}
.menu__bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--chrome-h); padding: 0 8px 0 16px; }
.logo {
  display: grid; text-decoration: none; font-family: var(--serif); text-transform: uppercase;
  font-size: 21px; line-height: .9; letter-spacing: .01em; padding-block: 4px;
}
.logo span:last-child { padding-left: .4em; }
.menu__toggle {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; border-radius: var(--r-md); color: var(--text); cursor: pointer;
  transition: background .3s;
}
.menu__toggle:hover { background: rgba(255, 255, 255, .08); }
.menu__icon { position: relative; width: 22px; height: 8px; }
.menu__icon::before, .menu__icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.menu__icon::before { top: 0; }
.menu__icon::after { top: 6.5px; }
.menu__toggle[aria-expanded="true"] .menu__icon::before { top: 3.25px; transform: rotate(45deg); }
.menu__toggle[aria-expanded="true"] .menu__icon::after { top: 3.25px; transform: rotate(-45deg); }

.menu__panel { position: relative; z-index: 2; padding: 4px 8px 12px; }
.menu__panel[hidden] { display: none; }
/* A plain list straight on the glass: no boxes, just the words */
.menu__links { list-style: none; margin: 0; padding: 0; display: grid; }
.menu__links a {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 10px;
  border-radius: var(--r-md); text-decoration: none;
  font-family: var(--title); font-size: 17px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text); transition: background .25s, padding .4s var(--ease);
}
.menu__links a:hover { background: rgba(255, 255, 255, .06); padding-left: 14px; }
.menu__links a[aria-current="page"]::after { content: "\25C2"; font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .menu.is-open .menu__panel { animation: fade-up .45s var(--ease); }
}

/* Icon buttons with tooltips */
.quick { position: fixed; z-index: 100; top: 16px; right: 16px; display: flex; gap: 6px; }
.icon-btn {
  position: relative; display: grid; place-items: center;
  width: var(--chrome-h); height: var(--chrome-h); border-radius: var(--r-lg); text-decoration: none; color: var(--text);
}
.icon-btn .icon { position: relative; z-index: 2; width: 20px; height: 20px; transition: transform .4s var(--ease); }
.icon-btn:hover, .icon-btn:focus-visible { background: rgba(70, 55, 42, .7); transform: scale(1.04); }
/* The menu bar gets the same gentle lift-and-zoom as the icon buttons (only while closed) */
@media (hover: hover) {
  .menu:not(.is-open):hover { background: rgba(70, 55, 42, .7); transform: translateX(-50%) scale(1.025); }
}
@media (hover: hover) and (max-width: 719px) {
  .menu:not(.is-open):hover { transform: scale(1.025); }
}
.icon-btn:active { transform: scale(.96); }
.icon-btn:hover .icon { transform: scale(1.08); }

/* Tooltip: shown on hover and keyboard focus, hoverable, dismissable with Esc (WCAG 1.4.13).
   Its text is also the link's accessible name. */
.tip {
  position: absolute; z-index: 3; top: calc(100% + 8px); right: 0;
  white-space: nowrap; padding: 8px 12px; font-size: 13.5px; letter-spacing: .02em; text-transform: lowercase;
  background: #2e2620; color: var(--text); border-radius: var(--r-sm);
  box-shadow: 0 12px 30px -12px rgba(60, 40, 22, .5);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .2s, transform .3s var(--ease);
}
.tip::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; } /* hover bridge */
.icon-btn:hover .tip, .icon-btn:focus-visible .tip { opacity: 1; transform: none; pointer-events: auto; }
.icon-btn.tip-off .tip { opacity: 0; pointer-events: none; }

/* Small screens: menu on the left, icons on the right, same row */
@media (max-width: 719px) {
  .menu { left: 12px; transform: none; width: calc(100% - 24px - 2 * var(--chrome-h) - 12px); }
  .quick { top: 16px; right: 12px; }
  .logo { font-size: 19px; }
}

/* ==========================================================================
   Device frames: where project screenshots go
   ========================================================================== */
.device {
  position: relative; overflow: hidden; border: 6px solid #0b0b0a; border-radius: 12px;
  box-shadow: 0 30px 60px -30px rgba(60, 40, 22, .5);
  transition: transform .8s var(--ease);
}
.device img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Skeleton screen, visible until a real image is added */
.device--phone {
  aspect-ratio: 9 / 19; border-radius: 20px;
  background:
    linear-gradient(color-mix(in oklab, var(--accent) 70%, #fff) 0 0) 12px 26px / 46% 8px no-repeat,
    linear-gradient(#d9d4ca 0 0) 12px 44px / 70% 5px no-repeat,
    linear-gradient(#d9d4ca 0 0) 12px 56px / 54% 5px no-repeat,
    linear-gradient(color-mix(in oklab, var(--accent) 35%, #efebe3) 0 0) 12px 78px / calc(100% - 24px) 32% no-repeat,
    linear-gradient(#d9d4ca 0 0) 12px 80% / calc(100% - 24px) 8% no-repeat,
    #efebe3;
}
.device--browser {
  aspect-ratio: 16 / 10; border-top-width: 18px;
  background:
    linear-gradient(color-mix(in oklab, var(--accent) 70%, #fff) 0 0) 6% 14% / 30% 10px no-repeat,
    linear-gradient(#d9d4ca 0 0) 6% 24% / 44% 6px no-repeat,
    linear-gradient(color-mix(in oklab, var(--accent) 35%, #efebe3) 0 0) 6% 80% / 28% 44% no-repeat,
    linear-gradient(#e3dfd6 0 0) 50% 80% / 28% 44% no-repeat,
    linear-gradient(#e3dfd6 0 0) 94% 80% / 28% 44% no-repeat,
    #efebe3;
}

/* Large image slot used on case pages: a glass stage holding a device frame */
.stage {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 16 / 10; padding: clamp(20px, 5%, 56px); border-radius: var(--r-xl);
}
.stage > .device { z-index: 2; }
.stage > .device--phone { height: 100%; }
.stage > .device--browser { width: min(100%, 860px); max-height: 100%; }
.stage--tall { aspect-ratio: 4 / 5; }
.stage--wide { aspect-ratio: 21 / 10; }
.stage--square { aspect-ratio: 6 / 5; }
/* Images that already include their own device mockups (transparent background): no extra frame */
.stage--mockup > img, .stage--mockup > video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: clamp(20px, 5%, 56px); object-fit: contain; }
.is-preview .slot.is-missing .stage--mockup > img, .is-preview .slot.is-missing .stage--mockup > video { display: none; }
.stage--mockup > video { border-radius: var(--r-md); }
/* Screenshots and recordings shown like the other case visuals: sand frame, rounded media */
.stage--shot { display: block; aspect-ratio: auto; padding: clamp(14px, 2.4vw, 28px); background: linear-gradient(180deg, #e0d3c0, #d8c9b4); }
.stage--shot > img, .stage--shot > video { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.slot--small { max-width: 440px; }

figure { margin: 0; }
figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* ==========================================================================
   Home
   ========================================================================== */
/* Hero: one small line, one big statement, one subtitle */
/* Hero: fills the first screen; the content sits a little below centre */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 120px; padding-bottom: 72px;
}
.hero__title { font-size: clamp(2.4rem, 5.2vw, 4.6rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 17ch; margin-top: 22px; }
.hero__cue {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(40px, 6vw, 72px);
  min-height: 44px; font-size: 13px; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); text-decoration: none;
}
.hero__cue:hover { color: var(--text); }
.hero__cue .icon { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.hero__cue:hover .icon { transform: translateY(3px); }

/* Hero visual: loose sticky notes that drift on their own and move away from the cursor */
.hero { position: relative; }
.hero__visual { display: none; }
@media (min-width: 1000px) {
  .hero__visual {
    display: block; position: absolute; top: 50%; right: 0;
    width: min(30vw, 400px); aspect-ratio: 1; transform: translateY(-46%);
  }
}

.note {
  /* --px/--py/--pr: the push from the cursor, set by main.js */
  position: absolute; left: 0; top: 0; width: 24%; aspect-ratio: 1;
  /* translate % refers to the note's own size (24% of the box), so scale positions by 100/24 */
  transform:
    translate(calc(var(--sx) * 4.1667 + var(--px, 0px)), calc(var(--sy) * 4.1667 + var(--py, 0px)))
    rotate(calc(var(--sr) + var(--pr, 0deg)));
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.note__inner {
  display: block; width: 100%; height: 100%; border-radius: 6px;
  background:
    linear-gradient(rgba(43, 34, 27, .22) 0 0) 16% 30% / 58% 5% no-repeat,
    linear-gradient(rgba(43, 34, 27, .16) 0 0) 16% 46% / 40% 5% no-repeat,
    linear-gradient(rgba(43, 34, 27, .12) 0 0) 16% 62% / 50% 5% no-repeat,
    var(--note);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 14px 24px -14px rgba(60, 40, 22, .45);
  /* gentle drift: each note on its own tempo and phase, so they never move in sync */
  animation: note-drift calc(10s + var(--d) * 30) ease-in-out infinite;
  animation-delay: calc(var(--d) * -55);
}
.note:nth-child(even) .note__inner { animation-direction: reverse; }
.note:nth-child(3n) .note__inner { animation-name: note-drift-alt; }
.note--honey    { --note: #ecd09a; }
.note--sage     { --note: #cdd4b0; }
.note--lavender { --note: #d4c4dc; }
.note--terra    { --note: #e2b29d; }
.note--paper    { --note: #f4ead8; }
@keyframes note-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(7px, -12px) rotate(2.5deg); }
  50%      { transform: translate(-3px, -20px) rotate(-1.5deg); }
  75%      { transform: translate(-9px, -7px) rotate(1.5deg); }
}
@keyframes note-drift-alt {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30%      { transform: translate(-8px, -14px) rotate(-2.5deg); }
  60%      { transform: translate(6px, -18px) rotate(2deg); }
  80%      { transform: translate(9px, -5px) rotate(-1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .note { transition: none; }
  .note__inner { animation: none; }
}

/* Sections alternate between the page cream and a slightly deeper shade */
.band { background: var(--band); }
.band.wrap { box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); } /* full-bleed behind a centred section */
.work { padding-block: clamp(80px, 10vw, 140px); }
.hero__text { color: var(--muted); font-size: clamp(16px, 1.4vw, 18.5px); max-width: 54ch; margin-top: 26px; }
/* company names: a soft marker underline (not a link) */
.hl { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .3em; text-underline-offset: -.12em; text-decoration-skip-ink: none; }

/* Section titles (Selected work, Experience) */
.section-head {
  display: grid; gap: 12px 48px; align-items: end; margin-bottom: clamp(24px, 3.5vw, 40px);
}
.section-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.section-head p { color: var(--muted); max-width: 56ch; margin: 0; }
@media (min-width: 900px) { .section-head { grid-template-columns: auto 1fr; } .section-head p { justify-self: end; } }

/* Selected work: one case per row. Each row is a light liquid-glass panel with the text on
   the left and the screenshot on the right; hovering warms the glass, like a highlighted row. */
.case-list { list-style: none; margin-top: 0; margin-bottom: 0; display: grid; gap: 10px; }

.case-row {
  --glass-tint: rgba(255, 251, 245, .38);
  position: relative; display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center;
  padding: 18px; border-radius: var(--r-xl); text-decoration: none;
  transition: background .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
@media (min-width: 900px) {
  .case-row { grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 340px); gap: 40px; padding: 16px 16px 16px 32px; }
}
.case-row:hover, .case-row:focus-visible {
  background: linear-gradient(100deg, rgba(255, 255, 255, .6), rgba(245, 226, 204, .65));
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .7),
    inset 0 -1px 2px rgba(255, 255, 255, .3),
    0 26px 50px -30px rgba(60, 40, 22, .4);
}
.case-row:focus-visible { outline-offset: 4px; }

.case-row__text { display: grid; gap: 8px; min-width: 0; }
.case-row__name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  font-family: var(--title); font-weight: 400; letter-spacing: -0.01em; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.1;
}
.case-row__badge {
  padding: 2px 8px; border-radius: var(--r-sm); background: rgba(43, 34, 27, .08);
  font-family: var(--sans); font-size: 10.5px; letter-spacing: var(--track); text-transform: uppercase;
}
.case-row__arrow {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md);
  background: rgba(43, 34, 27, .06); transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.case-row__arrow .icon { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.case-row:hover .case-row__arrow, .case-row:focus-visible .case-row__arrow { background: var(--ink); color: var(--bg); }
.case-row:hover .case-row__arrow .icon, .case-row:focus-visible .case-row__arrow .icon { transform: translate(4px, -4px); }
.case-row:hover .case-row__arrow, .case-row:focus-visible .case-row__arrow { transform: scale(1.08); }
.case-row__desc { color: var(--muted); max-width: 56ch; }
@media (max-width: 899px) {
  .case-row__text { padding-right: 44px; }
  .case-row__arrow { position: absolute; top: 18px; right: 18px; }
}

/* Photo frame: every photo shares one shape, cropped around its centre */
.case-row__shot {
  display: block; position: relative; aspect-ratio: 2000 / 1090; overflow: hidden; border-radius: var(--r-md);
  box-shadow: 0 20px 40px -22px rgba(60, 40, 22, .45);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.case-row__shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* Hovering the picture grows the whole frame (the photos always show at full brightness) */
.case-row__shot:hover, .case-row:focus-visible .case-row__shot {
  transform: scale(1.04); box-shadow: 0 30px 56px -24px rgba(60, 40, 22, .5);
}
@media (prefers-reduced-motion: reduce) {
  .case-row__shot:hover, .case-row:focus-visible .case-row__shot { transform: none; }
}

/* Experience: a short CV list */
.experience { padding-block: clamp(80px, 10vw, 140px); }
.cv { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cv__row {
  display: grid; gap: 6px 32px; grid-template-columns: 1fr; padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .cv__row { grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1.5fr); align-items: baseline; }
  .cv__years { white-space: nowrap; }
}
.cv__years { margin: 0; font-size: 12.5px; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.cv__role { font-size: clamp(22px, 2vw, 26px); }
.cv__org { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.cv__what { margin: 8px 0 0; color: var(--muted); max-width: 60ch; }
@media (min-width: 900px) { .cv__what { margin-top: 0; } }

/* About me teaser at the bottom of the home page */
.about-home {
  display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: 1fr; align-items: center;
  padding-block: clamp(80px, 10vw, 140px);
}
@media (min-width: 900px) { .about-home { grid-template-columns: minmax(320px, 540px) 1fr; } }
.about-home__photo {
  position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-xl);   /* landscape portrait */
  background: linear-gradient(180deg, #e0d3c0, #d8c9b4);
}
/* placeholder until assets/img/portrait.webp exists */
.about-home__photo::before {
  content: "DG"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: clamp(64px, 9vw, 120px); color: rgba(43, 34, 27, .18);
}
.about-home__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-home__text h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin: 14px 0 18px; }
.about-home__text p:not(.label) { color: var(--muted); max-width: 52ch; }
.about-home__text .btn { margin-top: 18px; }

/* ==========================================================================
   Case study
   ========================================================================== */
.back-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none;
  font-size: 12.5px; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted);
}
.back-link:hover { color: var(--text); }
.back-link .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.back-link:hover .icon { transform: translateX(-3px); }



/* Case opening: a compact overview (left, sized to its content) + the hero image (right).
   On narrow screens the hero image moves to just after the first section's text
   (a second copy in the markup), so the story starts right after the overview. */
.case-intro { padding-top: clamp(92px, 11vw, 118px); }
.case-intro__grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 1000px) { .case-intro__grid { grid-template-columns: fit-content(400px) minmax(0, 1fr); align-items: stretch; } }

.case-card {
  /* same sand surface as the hero image block next to it */
  --text: var(--ink); --muted-on-glass: var(--muted);
  color: var(--ink); background: linear-gradient(180deg, #e0d3c0, #d8c9b4);
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: clamp(20px, 2vw, 28px); border-radius: var(--r-xl);
}
.case-card > * { position: relative; z-index: 2; }
.case-card .label { color: var(--muted-on-glass); }
.case-card h1 {
  font-family: var(--title); font-weight: 400; letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem); line-height: 1.05;
}
.case-card__tagline { color: var(--muted-on-glass); font-size: 15.5px; line-height: 1.55; margin: 0; }
.case-card__meta {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; padding-top: 12px;
  font-size: 13.5px; line-height: 1.45;
}
.case-card__meta dt { color: var(--muted-on-glass); font-size: 11.5px; letter-spacing: var(--track); text-transform: uppercase; padding-top: 2px; }
.case-card__meta dd { margin: 0; }

.case-intro__shot {
  display: flex; align-items: center; justify-content: center; margin: 0;
  padding: clamp(16px, 3vw, 36px); border-radius: var(--r-xl);
  background: linear-gradient(180deg, #e0d3c0, #d8c9b4);
}
.case-intro__shot img {
  max-width: 100%; max-height: min(52vh, 460px); width: auto; height: auto;
  border-radius: var(--r-md); box-shadow: 0 30px 60px -26px rgba(60, 40, 22, .45);
}
/* Mobile: the project card first, then the cover image (DOM order) */

/* Optional image slots: hidden until their file has loaded, removed if it doesn't exist */
.slot:not(.is-loaded) { display: none; }
/* Local preview only: show missing slots as labelled placeholders so you can see where images go */
.is-preview .slot.is-missing { display: block; }
.is-preview .slot-pair:has(.is-missing) { display: grid; }
.is-preview .slot.is-missing .stage { border: 1.5px dashed var(--line-strong); background: rgba(255, 251, 245, .4); min-height: 220px; }
.is-preview .slot.is-missing .device { display: none; }
.is-preview .slot.is-missing .stage::after {
  content: attr(data-kind) " placeholder\A" attr(data-file); white-space: pre; text-align: center;
  font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; line-height: 1.8; color: var(--muted);
}

.case-body { display: grid; grid-template-columns: 1fr; gap: 32px; padding-block: clamp(28px, 4vw, 64px) clamp(48px, 7vw, 96px); }
.case-toc { display: none; }
@media (min-width: 1000px) {
  .case-body { grid-template-columns: 160px minmax(0, 900px); gap: clamp(40px, 6vw, 96px); }
  .case-toc { display: block; }
  .case-toc ol { position: sticky; top: 120px; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .case-toc a {
    display: flex; align-items: center; gap: 12px; min-height: 36px; text-decoration: none;
    font-size: 12.5px; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); transition: color .25s;
  }
  .case-toc a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background .25s, border-color .25s; }
  .case-toc a:hover, .case-toc a.is-active { color: var(--text); }
  .case-toc a.is-active::before { background: var(--text); border-color: var(--text); }
}

.case-section { padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.case-section:first-child { border-top: 0; padding-top: 0; }
.case-section__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 14px; }
.case-section__head .label:first-child { color: var(--text); }
.case-section h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); max-width: none; text-wrap: balance; margin-bottom: clamp(18px, 2vw, 24px); }
.case-section .prose { max-width: none; color: var(--muted); }
.case-section figure { margin-top: clamp(24px, 3vw, 36px); }

.principles { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 0 24px; grid-template-columns: 1fr; }
.highlights + .principles { margin-top: clamp(28px, 3vw, 36px); }
.principles li { padding: 18px 0; border-top: 1px solid var(--line-strong); }
.principles h3 { font-size: 22px; margin-bottom: 8px; }
.principles p { font-size: 15px; color: var(--muted); }
@media (min-width: 760px) { .principles { grid-template-columns: repeat(3, 1fr); } }

.highlights { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; padding: 0; list-style: none; }
.highlights li {
  font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; padding: 7px 12px; border-radius: var(--r-sm);
  color: var(--ink); background: var(--surface); border: 1px solid rgba(43, 34, 27, .16);
}

/* Research figures: big, scannable numbers */
.stats { display: grid; gap: 12px; grid-template-columns: 1fr; margin: clamp(20px, 2.5vw, 28px) 0; }
@media (min-width: 640px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid rgba(43, 34, 27, .16); }
.stat__num { font-family: var(--title); font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.stat__text { font-size: 15px; line-height: 1.45; color: var(--ink); }

/* Product blockers: numbered subsections */
.blockers { list-style: none; padding: 0; margin: clamp(20px, 2.5vw, 28px) 0 0; }
.blocker { padding-block: clamp(20px, 2.5vw, 28px); border-top: 1px solid var(--line-strong); }
.blocker h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: 12px; }
.blocker__num .tag { vertical-align: middle; margin-left: 12px; position: relative; top: -1px; }
.blocker__num { display: block; margin-bottom: 6px; font-family: var(--sans); font-size: 12px; letter-spacing: var(--track); color: var(--muted); }
.tag { font-family: var(--sans); font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-sm); color: var(--ink); background: var(--surface); border: 1px solid rgba(43, 34, 27, .16); display: inline-block; vertical-align: .3em; margin-left: 10px; line-height: 1.2; white-space: nowrap; }

/* Two optional images side by side; a missing one simply disappears */
.slot-pair { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.slot-pair:not(:has(.is-loaded)) { display: none; }
.slot-pair .slot { margin-top: clamp(24px, 3vw, 36px); }

/* Before → after comparison */
.case-section .shift { margin-top: clamp(28px, 3.5vw, 40px); }
.shift__grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: end; }
.shift__panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.shift__label { margin: 0; font-size: 11.5px; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.shift__label--after { color: var(--ink); }
.shift__label--after::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.shift__shot { padding: clamp(8px, 1vw, 12px); border-radius: var(--r-xl); background: linear-gradient(180deg, #e0d3c0, #d8c9b4); }
.shift__shot img { display: block; width: 100%; height: auto; aspect-ratio: 2000 / 951; object-fit: cover; object-position: top center; border-radius: calc(var(--r-xl) - 6px); box-shadow: 0 20px 40px -22px rgba(60, 40, 22, .45); }
.shift__arrow { justify-self: center; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink); transform: rotate(90deg); }
.shift__arrow .icon { width: 18px; height: 18px; }

/* Blurred "coming soon" preview */
.case-section .soon { margin-top: clamp(24px, 3vw, 36px); }
.soon__stage { position: relative; overflow: hidden; padding: clamp(14px, 2.4vw, 28px); border-radius: var(--r-xl); background: linear-gradient(180deg, #e0d3c0, #d8c9b4); }
.soon__stage img, .soon__stage video { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.soon__badge {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 16px 24px; border-radius: var(--r-lg); background: rgba(255, 251, 245, .9); color: var(--ink);
  box-shadow: 0 18px 40px -20px rgba(60, 40, 22, .45); font-size: 14px;
}
.soon__badge span { font-size: 11.5px; letter-spacing: var(--track); text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-sm); background: var(--ink); color: #fff; }

/* Feedback → decisions map */
.map { display: grid; grid-template-columns: 1fr; margin-top: clamp(24px, 3vw, 36px); border: 1px solid rgba(43, 34, 27, .16); border-radius: var(--r-xl); background: rgba(255, 251, 245, .5); overflow: hidden; }
.map__col { padding: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--line); }
.map__col:first-of-type { border-top: 0; }
@media (min-width: 1100px) {
  .map { grid-template-columns: 1.15fr 1fr 1fr; }
  .map__col { border-top: 0; border-left: 1px solid var(--line); }
  .map__col:first-of-type { border-left: 0; }
}
.map__eyebrow { font-size: 11.5px; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.map__title { font-size: 1.2rem; line-height: 1.2; margin: 0 0 18px; }
.map__sources, .map__flow { list-style: none; padding: 0; margin: 0; }
.map__sources li { position: relative; padding-left: 22px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 2px; }
.map__sources li::before { content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.map__sources li.is-new::before, .map__dot { background: var(--accent); border-color: var(--accent); }
.map__sources strong { font-weight: 500; font-size: 15px; color: var(--ink); }
.map__sources span:not(.visually-hidden), .map__flow li > span:last-child, .map__impact dd { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.map__legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.map__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent); }
.map__flow li { position: relative; display: flex; flex-direction: column; gap: 6px; padding-bottom: 22px; }
.map__flow li:not(:last-child)::after { content: ""; position: absolute; left: 18px; bottom: 4px; height: 14px; border-left: 1.5px solid var(--line-strong); }
.map__chip { align-self: flex-start; font-size: 11.5px; letter-spacing: var(--track); text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-sm); color: var(--ink); border: 1px solid rgba(43, 34, 27, .16); background: var(--surface); }
.map__impact { margin: 0; }
.map__impact > div { padding: 12px 0; border-top: 1px solid var(--line); }
.map__impact > div:first-child { border-top: 0; padding-top: 0; }
.map__impact dt { font-family: var(--title); font-size: 1.05rem; color: var(--ink); margin-bottom: 2px; }
.map__impact dd { margin: 0; }
.map__note { grid-column: 1 / -1; margin: 0; padding: 16px clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink); background: rgba(221, 208, 189, .45); }

/* Designed and shipped examples */
.sub-title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin: clamp(32px, 4vw, 44px) 0 4px; }
.shipped { list-style: none; padding: 0; margin: 0; }
.shipped__item { padding-block: 18px; border-top: 1px solid var(--line); }
.shipped__item:first-child { border-top: 0; }
.shipped__item h4 { font-family: var(--sans); font-weight: 500; font-size: 16px; color: var(--ink); margin: 0 0 6px; }
.shipped__item p { color: var(--muted); margin: 0; }

.figure-row { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 760px) { .figure-row { grid-template-columns: 1fr 1fr; } }

.soon-note { margin-top: 8px; }
.soon-note p { color: var(--muted); max-width: 52ch; }
.soon-note .btn { margin-top: 20px; }

/* Previous / next project */
.case-nav { border-top: 1px solid var(--line); }
.case-nav__grid { display: grid; grid-template-columns: 1fr; padding-block: clamp(32px, 5vw, 64px); }
.case-nav__link { display: flex; align-items: end; gap: clamp(14px, 2vw, 24px); padding-block: 18px; text-decoration: none; color: var(--text); }
.case-nav__link + .case-nav__link { border-top: 1px solid var(--line); }
.case-nav__link--next { justify-content: space-between; }
.case-nav__link--prev { flex-direction: row; }
.case-nav__link .label { display: block; }
.case-nav__link strong { display: block; font-family: var(--title); font-weight: 400; letter-spacing: -0.015em; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.05; margin-top: 8px; }
.case-nav__link .icon { flex: none; width: clamp(26px, 3vw, 38px); height: clamp(26px, 3vw, 38px); margin-bottom: .2em; transition: transform .4s var(--ease); }
.case-nav__link--prev:hover .icon { transform: translateX(-4px); }
.case-nav__link--next:hover .icon { transform: translateX(4px); }
.case-nav__link:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
@media (min-width: 760px) {
  .case-nav__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .case-nav__link + .case-nav__link { border-top: 0; }
  .case-nav__link--next { justify-content: flex-end; text-align: right; }
}

/* Next project */
.next-case { display: block; text-decoration: none; border-top: 1px solid var(--line); }
.next-case .wrap { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-block: clamp(40px, 6vw, 80px); }
.next-case strong { display: block; font-family: var(--title); font-weight: 400; letter-spacing: -0.015em; font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1; margin-top: 10px; }
.next-case .icon { width: clamp(28px, 4vw, 44px); height: clamp(28px, 4vw, 44px); transition: transform .4s var(--ease); }
.next-case:hover .icon { transform: translate(4px, -4px); }
.next-case:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { display: grid; gap: clamp(40px, 6vw, 88px); grid-template-columns: 1fr; padding-top: clamp(120px, 16vw, 168px); padding-bottom: clamp(56px, 8vw, 96px); }
.contact > * { min-width: 0; }
@media (min-width: 960px) { .contact { grid-template-columns: 1fr 1.15fr; } }
.contact h1 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); line-height: .98; margin: 14px 0 16px; }
.contact__intro > p:not(.label) { color: var(--muted); max-width: 36ch; }

.direct { list-style: none; padding: 0; margin: 32px 0 0; border-top: 1px solid var(--line); }
.direct li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.direct a { flex: 1; display: flex; align-items: center; gap: 14px; min-height: 56px; font-weight: 500; font-size: 19px; text-decoration: none; }
.direct a .icon { color: var(--muted); }
.direct a:hover span { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.copy-btn {
  font: 400 12px/1 var(--sans); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted);
  min-height: 36px; padding: 0 12px; background: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer;
}
.copy-btn:hover { color: var(--text); border-color: var(--text); }

.form-card { position: relative; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-xl); }
.form-card > * { position: relative; z-index: 2; }
.form-card h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 8px 0 6px; }
.form-card > p { color: var(--muted-on-glass); margin-bottom: 24px; }
.form-card .label { color: var(--muted-on-glass); }
.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field label, .field legend { font-size: 12.5px; letter-spacing: var(--track); text-transform: uppercase; color: var(--text); padding: 0; }
.field .opt { color: var(--muted-on-glass); text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
  width: 100%; font: 400 16px/1.4 var(--sans); color: var(--text);
  background: rgba(255, 253, 249, .7); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 13px 14px;
  transition: border-color .2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 0; border-color: var(--text); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--error); }
.field .error { display: none; font-size: 13.5px; color: var(--error); }
.field input:user-invalid ~ .error, .field textarea:user-invalid ~ .error { display: block; }

fieldset.field { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chips label {
  font-size: 14px; letter-spacing: 0; text-transform: none; min-height: 40px; display: inline-flex; align-items: center;
  padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.chips label:hover { border-color: var(--text); }
.chips input:checked + label { background: var(--text); color: var(--bg); border-color: var(--text); }
.chips input:focus-visible + label { outline: 2px solid var(--text); outline-offset: 3px; }

.btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px;
  font: 500 13px/1 var(--sans); letter-spacing: var(--track); text-transform: uppercase; text-decoration: none;
  background: var(--text); color: var(--bg); border: 1px solid var(--text); border-radius: var(--r-md); cursor: pointer; transition: background .25s, color .25s;
}
.btn:hover { background: transparent; color: var(--text); }
.btn .icon { width: 16px; height: 16px; }

.form-status { margin-top: 16px; font-size: 15px; min-height: 1.6em; }
.form-status:empty { display: none; }   /* no extra space under the button until there's a message */
.form-card { align-self: start; }
.form-status.is-error { color: var(--error); }
.form-status.is-info { color: var(--muted-on-glass); }

/* Thanks / 404 */
.simple-page { min-height: 80vh; display: grid; align-content: center; padding-block: 140px 80px; }
.simple-page h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); margin: 16px 0 14px; }
.simple-page p:not(.label) { color: var(--muted); max-width: 40ch; }
.simple-page .btn { margin-top: 20px; width: fit-content; }