/* =============================================================================
   TEODORA MALEŠEVIĆ — Portfolio · design system  (v2 — colour-blocked & bold)
   -----------------------------------------------------------------------------
   A warm cream base interrupted by saturated jewel-tone panels — la dolce vita
   with the volume up. Rooted in Teodora's own Sleep & Trip colour-blocking.

   How the colour system works
   ---------------------------
   Every section/page carries a THEME class (.theme-azure, .theme-plum, …) that
   sets six local variables: --bg --fg --accent --accent-2 --muted --hair.
   All components read those variables, so a section recolours itself just by
   switching its theme class. Change a jewel hex once in :root and it ripples out.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* — Base — */
  --paper:    #F4ECDB;
  --paper-2:  #EDE0C6;
  --espresso: #201810;
  --ink:      #241C15;
  --cream:    #F7EFDD;
  --cream-dim: rgba(247,239,221,.72);

  /* — Jewel accents (saturated, grown-up) — */
  --azure:     #17638F;
  --azure-dk:  #0F4666;
  --plum:      #5E2749;
  --emerald:   #2C6A4B;
  --olive:     #4E5A34;
  --bordeaux:  #7C2E2A;
  --terracotta:#B4481F;
  --coral:     #E0603A;
  --ochre:     #C6963A;
  --gold:      #E4AE45;
  --blush:     #E9BBA2;
  --stone:     #B9AE97;
  --stone-ink: #6E6650;

  /* — Default theme = warm cream — */
  --bg: var(--paper);
  --fg: var(--ink);
  --accent: var(--bordeaux);
  --accent-2: var(--terracotta);
  --muted: var(--stone-ink);
  --hair: color-mix(in srgb, var(--stone) 60%, transparent);

  /* — Type — */
  --font-display: "Fraunces", Georgia, serif;
  --font-serif:   "Newsreader", Georgia, serif;
  --font-ui:      "Space Grotesk", system-ui, sans-serif;
  --font-hand:    "Caveat", cursive;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* — Type scale (deliberately compact — less scrolling) — */
  --step--1: clamp(0.75rem, 0.72rem + 0.12vw, 0.83rem);
  --step-0:  clamp(0.98rem, 0.95rem + 0.14vw, 1.06rem);
  --step-1:  clamp(1.12rem, 1.05rem + 0.32vw, 1.32rem);
  --step-2:  clamp(1.35rem, 1.20rem + 0.62vw, 1.85rem);
  --step-3:  clamp(1.70rem, 1.45rem + 1.05vw, 2.50rem);
  --step-4:  clamp(2.05rem, 1.68rem + 1.65vw, 3.20rem);
  --step-5:  clamp(2.45rem, 1.95rem + 2.45vw, 4.20rem);

  /* — Space — */
  --sp-1:.5rem; --sp-2:.85rem; --sp-3:1.2rem; --sp-4:1.9rem;
  --sp-5:2.9rem; --sp-6:4.2rem; --sp-7:5.5rem;
  --container: 1240px;
  --gutter: clamp(1.15rem, 4vw, 4rem);
  --radius: 4px;
  --radius-lg: 14px;

  --ease: cubic-bezier(0.22,0.61,0.36,1);
  --dur: .6s; --dur-fast: .3s;
}

/* ----------------------------------------------------------------------------
   THEME CLASSES
   -------------------------------------------------------------------------- */
.theme-cream    { --bg:var(--paper);     --fg:var(--ink);   --accent:var(--bordeaux); --accent-2:var(--terracotta); --muted:var(--stone-ink);  --hair:color-mix(in srgb,var(--stone) 60%,transparent); }
.theme-paper2   { --bg:var(--paper-2);   --fg:var(--ink);   --accent:var(--bordeaux); --accent-2:var(--terracotta); --muted:var(--stone-ink);  --hair:color-mix(in srgb,var(--stone) 60%,transparent); }
.theme-espresso { --bg:var(--espresso);  --fg:var(--cream);  --accent:var(--gold);     --accent-2:var(--blush);      --muted:var(--cream-dim);  --hair:rgba(247,239,221,.18); }
.theme-azure    { --bg:var(--azure);     --fg:var(--cream);  --accent:var(--gold);     --accent-2:var(--blush);      --muted:var(--cream-dim);  --hair:rgba(247,239,221,.22); }
.theme-plum     { --bg:var(--plum);      --fg:var(--cream);  --accent:var(--gold);     --accent-2:var(--blush);      --muted:var(--cream-dim);  --hair:rgba(247,239,221,.22); }
.theme-emerald  { --bg:var(--emerald);   --fg:var(--cream);  --accent:var(--gold);     --accent-2:var(--blush);      --muted:var(--cream-dim);  --hair:rgba(247,239,221,.22); }
.theme-bordeaux { --bg:var(--bordeaux);  --fg:var(--cream);  --accent:var(--gold);     --accent-2:var(--blush);      --muted:var(--cream-dim);  --hair:rgba(247,239,221,.22); }
.theme-terracotta{ --bg:var(--terracotta);--fg:var(--cream); --accent:var(--gold); --accent-2:var(--gold);       --muted:rgba(247,239,221,.92); --hair:rgba(247,239,221,.32); }
.theme-gold     { --bg:var(--gold);      --fg:var(--espresso);--accent:var(--bordeaux); --accent-2:var(--azure);      --muted:#6b5320;           --hair:rgba(32,24,16,.22); }

/* Any element can paint itself with the current theme */
.themed { background: var(--bg); color: var(--fg); }

/* ----------------------------------------------------------------------------
   1. RESET & BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--font-serif); font-size:var(--step-0); line-height:1.6;
  color:var(--ink); background:var(--paper);
  font-feature-settings:"kern" 1,"liga" 1,"onum" 1;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* subtle film grain over everything */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
header,main,footer{ position:relative; z-index:3; }
img,svg,picture{ display:block; max-width:100%; height:auto; }
::selection{ background:var(--bordeaux); color:var(--paper); }
:focus-visible{ outline:2.5px solid currentColor; outline-offset:3px; }
.skip{ position:absolute; left:-999px; top:0; z-index:100; background:var(--espresso); color:var(--paper); padding:.6rem 1rem; font-family:var(--font-ui); }
.skip:focus{ left:1rem; top:1rem; }

/* ----------------------------------------------------------------------------
   2. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; line-height:1.03; letter-spacing:-0.02em; font-optical-sizing:auto; text-wrap:balance; color:var(--fg); }
h1{ font-size:var(--step-5); font-weight:360; }
h2{ font-size:var(--step-4); }
h3{ font-size:var(--step-2); }
p{ text-wrap:pretty; }
a{ color:var(--accent); }
.lead{ font-size:var(--step-1); line-height:1.5; color:var(--fg); }
.prose{ max-width:64ch; }
.prose p + p{ margin-top:1.05em; }
.prose.big p{ font-size:var(--step-1); }
.hand{ font-family:var(--font-hand); color:var(--accent); }
em,.italic{ font-style:italic; }
.display{ font-family:var(--font-display); }

/* ----------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--wide{ max-width:1440px; }
.container--narrow{ max-width:860px; }
section{ padding-block:clamp(2.75rem, 5.5vw, 4.75rem); background:var(--bg); color:var(--fg); }
.pad-lg{ padding-block:clamp(3.5rem,7vw,6rem); }
.grid{ display:grid; gap:clamp(1.25rem,3vw,2.5rem); }
@media(min-width:720px){ .g-2{grid-template-columns:repeat(2,1fr);} .g-3{grid-template-columns:repeat(3,1fr);} .g-4{grid-template-columns:repeat(4,1fr);} }
.hr{ border:0; height:1px; background:var(--hair); }
.center{ text-align:center; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}.mt-5{margin-top:3.2rem}

/* ----------------------------------------------------------------------------
   4. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--paper) 85%,transparent); backdrop-filter:blur(10px) saturate(1.15); border-bottom:1px solid color-mix(in srgb,var(--stone) 55%,transparent); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.85rem; }
.wordmark{ font-family:var(--font-display); font-size:clamp(1.05rem,1rem+.5vw,1.35rem); font-weight:500; letter-spacing:-0.01em; color:var(--ink); text-decoration:none; white-space:nowrap; display:inline-flex; gap:.5ch; align-items:baseline; }
.wordmark .star{ color:var(--terracotta); font-size:.7em; }
.nav-links{ display:flex; align-items:center; gap:clamp(.9rem,2vw,2rem); list-style:none; padding:0; }
.nav-links a{ font-family:var(--font-ui); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); text-decoration:none; padding-block:.3rem; position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--terracotta); transform:scaleX(0); transform-origin:right; transition:transform var(--dur-fast) var(--ease); }
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a.current::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a.current{ color:var(--bordeaux); }
.nav-links .cta{ border:1.5px solid var(--bordeaux); border-radius:100px; padding:.42rem 1.05rem; color:var(--bordeaux); }
.nav-links .cta::after{ display:none; }
.nav-links .cta:hover{ background:var(--bordeaux); color:var(--paper); }
.nav-toggle{ display:none; }

/* ----------------------------------------------------------------------------
   5. BUTTONS & LINKS  (read theme vars, so they recolour per section)
   -------------------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; gap:.6ch; font-family:var(--font-ui); font-size:.82rem; letter-spacing:.05em; text-decoration:none; padding:.8rem 1.4rem; border-radius:100px; border:1.5px solid var(--accent); color:var(--accent); background:transparent; cursor:pointer; transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease); }
.btn:hover{ background:var(--accent); color:var(--bg); transform:translateY(-1px); }
.btn--solid{ background:var(--accent); color:var(--bg); }
.btn--solid:hover{ filter:brightness(1.08); }
.btn .arrow{ transition:transform var(--dur-fast) var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }
.link{ color:var(--accent); text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:0% 1.5px; background-repeat:no-repeat; background-position:left 92%; transition:background-size var(--dur-fast) var(--ease); padding-bottom:1px; }
.link:hover,.link:focus-visible{ background-size:100% 1.5px; }
.link .arrow{ display:inline-block; transition:transform var(--dur-fast) var(--ease); }
.link:hover .arrow{ transform:translateX(3px); }

/* ----------------------------------------------------------------------------
   6. EPHEMERA & LABELS  (all recolour via theme vars)
   -------------------------------------------------------------------------- */
.eyebrow{ font-family:var(--font-ui); font-size:var(--step--1); letter-spacing:.2em; text-transform:uppercase; color:var(--accent-2); font-weight:500; display:inline-flex; align-items:center; gap:.8ch; }
.eyebrow::before{ content:""; width:1.8rem; height:2px; background:var(--accent-2); }
.eyebrow--plain::before{ display:none; }
.kicker{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.big-index{ font-family:var(--font-display); font-weight:300; font-size:clamp(3rem,9vw,7rem); line-height:.85; color:var(--accent); letter-spacing:-.03em; }
.star{ color:var(--accent); }
.roman{ font-family:var(--font-mono); letter-spacing:.1em; color:var(--muted); }
.tag{ display:inline-block; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg); border:1px solid var(--hair); padding:.28rem .6rem; border-radius:2px; }
.tag--fill{ background:var(--accent); color:var(--bg); border-color:transparent; }

/* stamp / ticket / polaroid — colour follows accent */
.stamp{ display:grid; place-content:center; text-align:center; width:88px; height:88px; padding:.4rem; color:var(--accent); border:2px solid var(--accent); border-radius:50%; font-family:var(--font-mono); font-size:.5rem; letter-spacing:.12em; text-transform:uppercase; line-height:1.5; transform:rotate(-11deg); opacity:.9; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent); }
.stamp b{ font-size:.78rem; display:block; letter-spacing:.04em; }
.ticket{ display:inline-flex; align-items:center; gap:.7ch; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); background:transparent; border:1.5px dashed color-mix(in srgb,var(--accent) 60%,transparent); padding:.5rem .8rem; border-radius:3px; transform:rotate(2deg); }
.ticket .dot{ width:.3rem; height:.3rem; border-radius:50%; background:var(--accent); }
.polaroid{ background:#fbf5e8; padding:.6rem .6rem 2.3rem; box-shadow:0 16px 34px -16px rgba(20,14,8,.55),0 2px 6px rgba(20,14,8,.18); border:1px solid rgba(20,14,8,.06); position:relative; }
.polaroid img{ width:100%; }
.polaroid figcaption{ position:absolute; left:0; right:0; bottom:.4rem; text-align:center; font-family:var(--font-hand); color:var(--bordeaux); font-size:1.35rem; line-height:1; }

/* ----------------------------------------------------------------------------
   7. IMAGE TREATMENT — colour duotone tint by accent; reveals on hover
   -------------------------------------------------------------------------- */
.frame{ position:relative; overflow:hidden; background:var(--paper-2); border-radius:var(--radius); }
.frame img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.02) contrast(1.02); transition:transform 1s var(--ease),filter var(--dur) var(--ease); }
.frame::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(150deg, color-mix(in srgb,var(--accent) 42%,transparent), transparent 55%, color-mix(in srgb,var(--accent-2) 26%,transparent)); mix-blend-mode:multiply; opacity:.5; transition:opacity var(--dur) var(--ease); }
a.frame:hover img,.hover-zoom:hover .frame img{ transform:scale(1.05); }
a.frame:hover::after,.hover-zoom:hover .frame::after{ opacity:.15; }
.frame--mat{ padding:.6rem; background:#fbf5e8; }
/* dark-ground images (deli-on-black): warm not crush */
.frame--dark{ background:var(--espresso); }
.frame--dark img{ object-position:top center; filter:sepia(.24) saturate(1.06) brightness(1.08); }
.frame--dark::after{ mix-blend-mode:soft-light; opacity:.55; background:linear-gradient(150deg,color-mix(in srgb,var(--gold) 60%,transparent),transparent 55%,color-mix(in srgb,var(--bordeaux) 50%,transparent)); }
/* logo thumbnail — contain the mark on a cream ground, no duotone */
.frame--logo{ background:var(--cream); display:grid; place-items:center; padding:1.1rem; }
.frame--logo img{ width:auto; height:auto; max-width:82%; max-height:78%; object-fit:contain; filter:none; }
.frame--logo::after{ display:none; }

/* concept placeholder tiles (work without key art yet) */
.concept-tile{ position:relative; display:grid; align-content:space-between; aspect-ratio:4/3; padding:1.1rem; color:var(--cream); overflow:hidden; background:radial-gradient(120% 120% at 80% 10%,rgba(228,174,69,.24),transparent 55%),var(--espresso); border-radius:var(--radius); }
.concept-tile.olive{ background:radial-gradient(120% 120% at 20% 15%,rgba(228,174,69,.22),transparent 55%),linear-gradient(160deg,#3c471f,#222a13); }
.concept-tile .ct-top{ display:flex; justify-content:space-between; align-items:start; }
.concept-tile .ct-mark{ display:block; font-family:var(--font-display); font-size:clamp(1.3rem,3vw,2rem); line-height:.98; }
.concept-tile .ct-sub{ display:block; margin-top:.2rem; font-family:var(--font-hand); font-size:1.2rem; color:var(--blush); }
.concept-tile .orbit{ position:absolute; right:-30px; bottom:-30px; width:130px; height:130px; border:1px solid rgba(228,174,69,.4); border-radius:50%; }
.concept-tile .orbit::after{ content:""; position:absolute; inset:20px; border:1px solid rgba(247,239,221,.18); border-radius:50%; }

/* ----------------------------------------------------------------------------
   8. REUSABLE BLOCKS
   -------------------------------------------------------------------------- */
/* section header */
.section-head{ max-width:52ch; }
.section-head h2{ margin-top:.6rem; }
.section-head .lead{ margin-top:.8rem; }

/* big colour hero */
.hero{ position:relative; overflow:hidden; }
.hero .eyebrow{ margin-bottom:1rem; }
.hero h1{ font-size:var(--step-5); }
.hero .lead{ margin-top:1.2rem; max-width:46ch; color:var(--fg); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
.hero-grid{ display:grid; gap:clamp(1.6rem,4vw,3.2rem); align-items:center; }
@media(min-width:940px){ .hero-grid{ grid-template-columns:1.02fr .98fr; } }

/* hero collage */
.collage{ position:relative; min-height:420px; }
.collage .polaroid{ position:absolute; }
.collage .p1{ width:56%; top:0; left:3%; transform:rotate(-5deg); z-index:3; }
.collage .p2{ width:44%; top:22%; right:0; transform:rotate(6deg); z-index:4; }
.collage .p3{ width:43%; bottom:-3%; left:14%; transform:rotate(3deg); z-index:5; }
.collage .stamp{ position:absolute; top:-10px; right:16%; z-index:6; background:color-mix(in srgb,var(--bg) 70%,transparent); }
.collage .ticket{ position:absolute; bottom:5%; right:2%; z-index:6; }
.collage .note{ position:absolute; top:6%; left:-2%; z-index:6; font-family:var(--font-hand); color:var(--accent); font-size:1.5rem; transform:rotate(-8deg); max-width:8rem; line-height:1.05; }

/* stat band */
.stats{ display:grid; gap:1.6rem; text-align:center; }
@media(min-width:720px){ .stats{ grid-template-columns:repeat(3,1fr); } }
.stats.four{ grid-template-columns:repeat(2,1fr); }
@media(min-width:900px){ .stats.four{ grid-template-columns:repeat(4,1fr); } }
/* hero handwritten locator — sits in the copy column, always legible */
.hero-note{ font-family:var(--font-hand); color:var(--accent); font-size:1.5rem; display:inline-block; transform:rotate(-3deg); margin-top:1.4rem; }
.hero-note .arrow{ font-family:var(--font-ui); font-size:.8em; }
.stat .num{ font-family:var(--font-display); font-weight:340; font-size:clamp(2.4rem,5.5vw,3.8rem); line-height:1; color:var(--accent); letter-spacing:-.02em; }
.stat .cap{ margin-top:.5rem; color:var(--muted); }
@media(min-width:720px){ .stat + .stat{ position:relative; } .stat + .stat::before{ content:""; position:absolute; left:0; top:14%; height:72%; width:1px; background:var(--hair); } }

/* index rows (Work, Writing) */
.index{ border-top:1px solid var(--hair); }
.row{ display:grid; grid-template-columns:auto 1fr; gap:1rem 1.6rem; align-items:center; padding:clamp(1.2rem,2.6vw,2rem) 0; border-bottom:1px solid var(--hair); text-decoration:none; color:inherit; transition:padding var(--dur-fast) var(--ease); }
.row .r-no{ font-family:var(--font-display); font-size:var(--step-2); color:var(--accent); }
.row .r-main{ min-width:0; }
.row .r-title{ display:block; font-family:var(--font-display); font-size:var(--step-3); line-height:1.02; transition:color var(--dur-fast) var(--ease); }
.row .r-title .yr{ font-size:.5em; color:var(--muted); font-family:var(--font-mono); margin-left:.6ch; }
.row .r-one{ display:block; color:var(--muted); margin-top:.5rem; max-width:56ch; }
.row .r-meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; align-items:center; }
.row .r-thumb{ display:none; }
.row .r-go{ font-family:var(--font-ui); font-size:.78rem; color:var(--accent); opacity:0; transform:translateX(-6px); transition:all var(--dur-fast) var(--ease); white-space:nowrap; }
.row:hover .r-title{ color:var(--accent); }
.row:hover .r-go{ opacity:1; transform:none; }
@media(min-width:860px){
  .row{ grid-template-columns:auto minmax(0,1fr) 220px auto; }
  .row .r-thumb{ display:block; width:220px; }
  .row .r-thumb .frame,.row .r-thumb .concept-tile{ aspect-ratio:4/3; }
}

/* panel cards (services, tools, teasers) */
.panel{ background:color-mix(in srgb,var(--fg) 6%,transparent); border:1px solid var(--hair); border-radius:var(--radius-lg); padding:clamp(1.3rem,3vw,2rem); }
.panel h3{ color:var(--fg); }

/* teaser cards linking to other pages */
.teaser{ display:block; text-decoration:none; color:var(--fg); border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,2.2rem); background:var(--bg); border:1px solid var(--hair); transition:transform var(--dur-fast) var(--ease); position:relative; overflow:hidden; }
.teaser:hover{ transform:translateY(-3px); }
.teaser .t-no{ font-family:var(--font-mono); font-size:.7rem; color:var(--accent); letter-spacing:.14em; }
.teaser h3{ margin:.5rem 0; }
.teaser .t-go{ font-family:var(--font-ui); font-size:.78rem; letter-spacing:.06em; color:var(--accent); }

/* method / principle list */
.principles{ list-style:none; padding:0; counter-reset:p; }
.principles li{ counter-increment:p; display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:baseline; padding:1rem 0; border-top:1px solid var(--hair); }
.principles li::before{ content:counter(p,decimal-leading-zero); font-family:var(--font-mono); font-size:.78rem; color:var(--accent); }
.principles .pr{ font-family:var(--font-display); font-size:var(--step-2); color:var(--fg); }
.principles .pr .aside{ display:block; font-family:var(--font-serif); font-size:.98rem; color:var(--muted); font-style:italic; margin-top:.3rem; }
blockquote.pull{ font-family:var(--font-display); font-style:italic; font-weight:340; font-size:var(--step-3); color:var(--fg); max-width:24ch; line-height:1.15; }
blockquote.pull .star{ display:block; margin-bottom:.5rem; font-style:normal; }

/* services list */
.svc-list{ list-style:none; padding:0; }
.svc{ display:grid; grid-template-columns:1fr auto; gap:.4rem 2rem; align-items:baseline; padding:1.2rem 0; border-top:1px solid var(--hair); }
.svc:last-child{ border-bottom:1px solid var(--hair); }
.svc .svc-name{ font-family:var(--font-display); font-size:var(--step-2); color:var(--fg); }
.svc .svc-line{ grid-column:1/-1; color:var(--muted); font-style:italic; max-width:62ch; }
.svc .svc-tag{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:right; }

/* tools grid */
.tools{ display:grid; gap:1.4rem; }
@media(min-width:640px){ .tools{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .tools{ grid-template-columns:repeat(3,1fr); } }
.tool-cat h4{ font-family:var(--font-ui); font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem; }
.tool-cat ul{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.tool-cat li{ font-family:var(--font-ui); font-size:.82rem; border:1px solid var(--hair); border-radius:100px; padding:.35rem .8rem; color:var(--fg); }

/* chips (filters) */
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{ font-family:var(--font-ui); font-size:.76rem; letter-spacing:.04em; padding:.45rem 1rem; border-radius:100px; border:1.5px solid var(--hair); background:transparent; color:var(--fg); cursor:pointer; transition:all var(--dur-fast) var(--ease); }
.chip:hover{ border-color:var(--accent); }
.chip.active{ background:var(--accent); color:var(--bg); border-color:transparent; }

/* deck gallery (presentations) */
.decks{ display:grid; gap:1.4rem; }
@media(min-width:640px){ .decks{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .decks{ grid-template-columns:repeat(3,1fr); } }
.deck{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--hair); background:var(--espresso); box-shadow:0 18px 40px -22px rgba(20,14,8,.6); transition:transform var(--dur-fast) var(--ease); }
.deck:hover{ transform:translateY(-3px); }
.deck img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.deck figcaption{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-dim); padding:.7rem .9rem; }

/* writing cards */
.wcard{ text-decoration:none; color:var(--fg); display:block; padding:1.4rem 0; border-top:1px solid var(--hair); }
.wcard:first-child{ border-top:0; }
.wcard .wc-cat{ margin-bottom:.5rem; }
.wcard h3{ transition:color var(--dur-fast) var(--ease); }
.wcard:hover h3{ color:var(--accent); }
.wcard p{ color:var(--muted); margin-top:.5rem; max-width:64ch; }

/* forms */
.field{ display:block; margin-bottom:1.1rem; }
.field label{ display:block; font-family:var(--font-ui); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }
.field input,.field select,.field textarea{ width:100%; font-family:var(--font-serif); font-size:1rem; color:var(--fg); background:color-mix(in srgb,var(--fg) 4%,transparent); border:1.5px solid var(--hair); border-radius:var(--radius); padding:.75rem .9rem; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); }
.field textarea{ min-height:130px; resize:vertical; }

/* logo lockup card — holds a brand logo legibly on any coloured section */
.logo-card{ display:grid; place-items:center; background:var(--cream); border-radius:var(--radius-lg); padding:clamp(1.6rem,4vw,3rem); box-shadow:0 24px 60px -34px rgba(20,14,8,.55); }
.logo-card img{ max-width:min(320px,78%); height:auto; }
.logo-card figcaption{ margin-top:1rem; }

/* article / blog reading */
.article{ max-width:68ch; margin-inline:auto; }
.article > p{ font-size:var(--step-1); line-height:1.72; margin-top:1.15em; color:var(--fg); }
.article > p:first-of-type{ margin-top:0; }
.article .drop::first-letter{ font-family:var(--font-display); font-size:3.3em; float:left; line-height:.72; padding:.06em .12em 0 0; color:var(--accent); font-weight:400; }
.article h3{ margin-top:1.7em; color:var(--fg); }
.article ol,.article ul{ margin:1.1em 0 1.1em 1.3em; }
.article li{ margin:.45em 0; font-size:var(--step-1); line-height:1.6; }
.article blockquote{ margin:1.4em 0; padding-left:1.2rem; border-left:3px solid var(--accent); font-style:italic; color:var(--muted); }
.byline{ display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center; color:var(--muted); }

/* openable deliverables list (Presentations / library) */
.files{ border-top:1px solid var(--hair); }
.file-row{ display:grid; grid-template-columns:auto 1fr auto; gap:.6rem 1.4rem; align-items:center; padding:1.15rem 0; border-bottom:1px solid var(--hair); text-decoration:none; color:var(--fg); transition:padding var(--dur-fast) var(--ease); }
.file-row:hover{ padding-left:.4rem; }
.file-row:hover .f-title{ color:var(--accent); }
.file-row .f-type{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--hair); border-radius:2px; padding:.3rem .55rem; color:var(--muted); white-space:nowrap; }
.file-row .f-title{ font-family:var(--font-display); font-size:var(--step-2); transition:color var(--dur-fast) var(--ease); }
.file-row .f-sub{ display:block; color:var(--muted); font-size:.9rem; margin-top:.25rem; }
.file-row .f-open{ font-family:var(--font-ui); font-size:.76rem; letter-spacing:.04em; color:var(--accent); white-space:nowrap; }
@media(max-width:620px){ .file-row{ grid-template-columns:auto 1fr; } .file-row .f-open{ display:none; } }

/* footer */
.site-footer{ background:var(--espresso); color:var(--cream); padding-block:clamp(3rem,6vw,4.5rem); }
.site-footer .themed{ background:transparent; }
.footer-top{ display:grid; gap:2.2rem; }
@media(min-width:720px){ .footer-top{ grid-template-columns:1.5fr 1fr 1fr; } }
.site-footer .wordmark{ color:var(--cream); }
.site-footer h4{ font-family:var(--font-ui); font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.9rem; }
.footer-links{ list-style:none; padding:0; display:grid; gap:.55rem; }
.footer-links a{ color:var(--cream-dim); text-decoration:none; font-size:.94rem; }
.footer-links a:hover{ color:var(--cream); }
.footer-colophon{ border-top:1px solid rgba(247,239,221,.16); margin-top:2.6rem; padding-top:1.4rem; display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.05em; color:var(--cream-dim); }

/* ----------------------------------------------------------------------------
   9. MOTION
   -------------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s}
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   10. RESPONSIVE
   -------------------------------------------------------------------------- */
@media(max-width:939px){
  .collage{ min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
  .collage .polaroid{ position:static; transform:rotate(0)!important; width:auto!important; }
  .collage .p1{ grid-column:1/-1; transform:rotate(-2deg)!important; max-width:74%; margin-inline:auto; }
  .collage .note{ display:none; }
  .collage .stamp{ position:absolute; top:4px; right:8px; }
  .collage .ticket{ position:static; justify-self:start; }
}
@media(max-width:760px){
  .nav-links{ position:fixed; inset:0 0 0 auto; width:min(80vw,320px); flex-direction:column; align-items:flex-start; justify-content:center; gap:1.4rem; padding:2rem; background:var(--paper); border-left:1px solid var(--stone); transform:translateX(100%); transition:transform var(--dur) var(--ease); box-shadow:-20px 0 50px -20px rgba(20,14,8,.4); }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:1rem; }
  .nav-toggle{ display:inline-flex; flex-direction:column; gap:5px; justify-content:center; width:40px; height:40px; background:transparent; border:0; cursor:pointer; z-index:50; }
  .nav-toggle span{ height:2px; width:24px; background:var(--ink); transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast); }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .svc{ grid-template-columns:1fr; } .svc .svc-tag{ text-align:left; }
  .row .r-title{ font-size:var(--step-2); }
}


/* Hero role cycle */
.roles{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:1.1rem; font-family:var(--font-display); font-style:italic; font-size:clamp(1.15rem,1rem + 1vw,1.7rem); line-height:1; }
.roles span{ color:var(--muted); animation:roleGlow 7.5s infinite; }
.roles span:nth-child(2){ animation-delay:2.5s; }
.roles span:nth-child(3){ animation-delay:5s; }
@keyframes roleGlow{ 0%,25%{ color:var(--accent); } 34%,100%{ color:var(--muted); } }
@media (prefers-reduced-motion:reduce){ .roles span{ animation:none; } .roles span:first-child{ color:var(--accent); } }

/* Hero — fill the space, 4 roles */
.hero{ min-height:clamp(560px,80vh,820px); display:flex; align-items:center; }
.hero h1{ font-size:clamp(2.8rem,3rem + 3.5vw,5.6rem); }
.hero .lead{ max-width:54ch; }
.roles{ font-size:clamp(1.25rem,1.1rem + 1.1vw,1.95rem); margin-top:1.2rem; }
.roles span{ animation-duration:8s; }
.roles span:nth-child(2){ animation-delay:2s; }
.roles span:nth-child(3){ animation-delay:4s; }
.roles span:nth-child(4){ animation-delay:6s; }
@keyframes roleGlow{ 0%,20%{ color:var(--accent); } 28%,100%{ color:var(--muted); } }