/* ===========================================================================
   SHREYA SAXENA — DESIGN SYSTEM v2
   Retro editorial catalogue × modern creative portfolio.
   Phase 1: global foundation only. Loaded after style.css; everything here
   overrides the previous scrapbook layer. Nothing page-specific lives here.
   =========================================================================== */

:root{
  /* ---- surface ---- */
  --cream:        #F7EEDC;
  --cream-light:  #FFF9EE;

  /* ---- brand / action ---- */
  --red:          #D8473B;
  --red-dark:     #B83B32;

  /* ---- supporting, used to signal category — never decoration ---- */
  --pink:         #F3A9B8;
  --blue:         #A9CFDF;
  --yellow:       #FFD66F;

  /* ---- type ---- */
  --ink:          #713A32;
  --ink-soft:     #8B5A50;

  /* ---- line ---- */
  --line:         rgba(184, 59, 50, 0.42);
  --line-soft:    rgba(184, 59, 50, 0.20);

  /* ---- shape ---- */
  --r-card:       18px;
  --r-feature:    24px;
  --r-pill:       999px;
  --r-tight:      12px;

  /* ---- elevation: paper on paper, never floating software ---- */
  --shadow:       0 6px 24px rgba(100, 50, 40, 0.06);
  --shadow-lift:  0 10px 32px rgba(100, 50, 40, 0.10);

  /* ---- grid ---- */
  --max:          1280px;
  --pad:          48px;
  --gutter:       32px;

  /* ---- spacing scale (8px base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* ---- type families ---- */
  --display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --ui:      'DM Sans', system-ui, -apple-system, sans-serif;

  /* legacy names still referenced by style.css, remapped so nothing breaks */
  --page:   var(--cream);
  --paper:  var(--cream);
  --accent: var(--red);
  --muted:  var(--ink-soft);
  --rule:   transparent;
  --margin: transparent;
  --kraft:  var(--cream);
  --rhy:    1.6;
}

/* ===========================================================================
   1. CANVAS — warm cream paper. No rules, no margin line, no texture.
   =========================================================================== */
html{ background:var(--cream); }

body{
  font-family:var(--ui);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  color:var(--ink);
  background-color:var(--cream);
  background-image:none;          /* kills the ruled sheet + red margin line */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--pink); color:var(--ink); }

/* ===========================================================================
   2. TYPOGRAPHY
   Serif carries personality and voice. Sans carries information.
   =========================================================================== */

/* --- display: the editorial voice --- */
.t-hero,
.t-title,
.t-section,
.t-project{
  font-family:var(--display);
  font-weight:400;
  color:var(--ink);
  letter-spacing:-0.015em;
  text-wrap:balance;
  margin:0;
}
.t-hero   { font-size:clamp(48px, 7.2vw, 110px); line-height:0.98; letter-spacing:-0.028em; }
.t-title  { font-size:clamp(42px, 5.2vw, 72px);  line-height:1.04; letter-spacing:-0.022em; }
.t-section{ font-size:clamp(30px, 3.4vw, 48px);  line-height:1.10; letter-spacing:-0.018em; }
.t-project{ font-size:clamp(30px, 4.0vw, 60px);  line-height:1.06; letter-spacing:-0.020em; }

/* --- the old cut-out lettering becomes real type ---------------------------
   Every cut-out word already carries its word in aria-label, so the heading
   can be set in the display face with no markup change at all. Reversible in
   one rule if the lettering ever comes back. ------------------------------- */
.hw{
  font-family:var(--display);
  font-weight:400;
  color:var(--ink);
  letter-spacing:-0.02em;
  line-height:1.05;
  display:inline;
  text-transform:none;
}
.hw > .wd, .hw > .sp, .hw > .glx, .hw > .gl{ display:none !important; }
.hw::after{ content:attr(aria-label); }
.hw.xl   { font-size:clamp(48px, 7.2vw, 110px); line-height:0.98; letter-spacing:-0.028em; }
.hw.sec  { font-size:clamp(30px, 3.4vw, 48px);  line-height:1.10; }
.hw.sm   { font-size:inherit; }
.hw.statnum{ font-size:clamp(34px, 3.6vw, 46px); letter-spacing:-0.02em; }
.ptitle .hw, .csname .hw{ font-size:clamp(34px, 4.4vw, 60px); line-height:1.06; }
.hrow{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }

/* --- headings that were already real type --- */
h1, h2, h3, .mhead, .shead h2, .plead, .pcase-t, .pull, .acc-t, .psub, .hero-role{
  font-family:var(--display);
  font-weight:400;
  color:var(--ink);
  letter-spacing:-0.018em;
}
h1{ font-size:clamp(42px,5.2vw,72px); line-height:1.04; }
h2, .shead h2, .mhead{ font-size:clamp(30px,3.4vw,48px); line-height:1.10; }
h3, .psub{ font-size:clamp(22px,2.2vw,28px); line-height:1.20; }

/* --- body --- */
p, li, dd, .prose p, .gist dd, .lede{
  font-family:var(--ui);
  color:var(--ink);
}
p{ font-size:17px; line-height:1.62; }
.lede{ font-size:clamp(18px,1.6vw,20px); line-height:1.58; color:var(--ink-soft); }
.t-body-sm, .crow, .rel, small{ font-size:14.5px; line-height:1.58; }

/* --- metadata: the catalogue register --- */
.t-meta, .alabel, .bg-meta, .hn-meta, .num-l, .uw-m, .uw-n, .credit,
.fig figcaption, .ai-label, .hg-cap, .stat-src, .pn-l, .sh-n{
  font-family:var(--ui);
  font-size:11.5px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.fig figcaption, .ai-label, .hg-cap{ letter-spacing:0.05em; text-transform:none; font-size:12px; }

/* --- the standfirst / lead paragraph --- */
.plead, .flag-lead, .hf-lead, .hn-lead{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(20px,2.1vw,26px);
  line-height:1.34;
  letter-spacing:-0.015em;
  color:var(--ink);
}

/* --- pull lines keep their job, in the display face --- */
.pull{
  font-family:var(--display);
  font-size:clamp(24px,2.8vw,34px);
  line-height:1.22;
  color:var(--red-dark);
  border-left:2px solid var(--red);
  padding-left:var(--s5);
}
.pull.sm{ font-size:clamp(20px,2.2vw,26px); }

/* ===========================================================================
   3. GRID — 12 / 8 / 4 columns, editorial rather than uniform
   =========================================================================== */
.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad);
}
@media (min-width:901px){
  .wrap{ margin-left:auto; margin-right:auto; padding-inline:var(--pad); }
}
.grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:var(--gutter);
}
@media (max-width:1024px){
  :root{ --pad:32px; --gutter:24px; }
  .grid{ grid-template-columns:repeat(8, minmax(0,1fr)); }
}
@media (max-width:640px){
  :root{ --pad:16px; --gutter:16px; }
  .grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* ===========================================================================
   4. SURFACES — paper sitting on paper
   =========================================================================== */
.surface,
.card{
  background:var(--cream-light);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow);
}
.surface-flat{ background:var(--cream-light); border:1px solid var(--line); border-radius:var(--r-card); }

/* ===========================================================================
   5. NAVIGATION — a small catalogue object, not a navbar
   =========================================================================== */
nav{ position:sticky; top:0; z-index:60; background:transparent; }
.navpaper{
  background:transparent;
  border:0;
  box-shadow:none;
  background-image:none;
  padding:var(--s4) var(--pad) var(--s3);
}
.nv{
  display:flex;
  align-items:center;
  gap:var(--s5);
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding:10px 10px 10px 18px;
  background:var(--cream-light);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow);
}
.nvbrand{ display:inline-flex; align-items:center; text-decoration:none; }
.nvbrand .nvs{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:20px; line-height:1;
  color:var(--cream-light); background:var(--red);
  border:0; border-radius:var(--r-pill);
  transition:background .18s ease, transform .18s ease;
}
.nvbrand:hover .nvs{ background:var(--red-dark); transform:none; }

.lks{ display:flex; align-items:center; gap:var(--s1); margin-left:auto; }
.lks a{
  font-family:var(--ui);
  font-size:12px; font-weight:500;
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  padding:10px 16px;
  min-height:44px; display:inline-flex; align-items:center;
  border:0; border-radius:var(--r-pill);
  transition:background .16s ease, color .16s ease;
}
.lks a:hover{ background:rgba(216,71,59,.08); color:var(--red-dark); border:0; }
.lks a[aria-current="page"]{ background:var(--red); color:var(--cream-light); border:0; }

nav .icons{ display:flex; gap:var(--s1); margin-left:0; }
nav .icons a{
  width:38px; height:38px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:transparent; color:var(--ink-soft);
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
nav .icons a:hover{ background:var(--red); border-color:var(--red); color:var(--cream-light); transform:none; }
nav .icons svg{ width:15px; height:15px; stroke-width:1.7; }
@media (max-width:860px){
  nav .icons{ display:none; }
  .nv{ gap:var(--s3); padding-left:14px; }
  .lks a{ padding:10px 11px; font-size:11px; letter-spacing:0.07em; }
}

/* ===========================================================================
   6. BUTTONS
   =========================================================================== */
.btn, .btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ui); font-size:13px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cream-light); background:var(--red);
  border:1px solid var(--red);
  border-radius:var(--r-pill);
  padding:14px 26px; min-height:44px;
  box-shadow:none; transform:none;
  text-decoration:none; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:hover, .btn-primary:hover{ background:var(--red-dark); border-color:var(--red-dark); transform:none; }
.btn:active, .btn-primary:active{ transform:scale(.98); }

.btn.ghost, .btn-secondary{
  color:var(--red-dark); background:var(--cream-light);
  border:1px solid var(--line); box-shadow:none;
}
.btn.ghost:hover, .btn-secondary:hover{ background:var(--red); border-color:var(--red); color:var(--cream-light); }

.btn-text{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ui); font-size:13px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--red-dark); background:none; border:0; padding:12px 0;
  min-height:44px; text-decoration:none; cursor:pointer;
}
.btn-text .arw, .btn .arw{ transition:transform .18s ease; }
.btn-text:hover .arw, .btn:hover .arw{ transform:translateX(4px); }

/* ===========================================================================
   7. METADATA — the catalogue register
   =========================================================================== */
.meta{ display:flex; flex-direction:column; gap:var(--s2); }
.meta-num{
  font-family:var(--ui); font-size:11.5px; font-weight:600;
  letter-spacing:0.14em; color:var(--red); font-variant-numeric:tabular-nums;
}
.meta-name{ font-family:var(--display); font-size:clamp(24px,2.4vw,32px); line-height:1.1; color:var(--ink); }
.meta-client{
  font-family:var(--ui); font-size:11.5px; font-weight:500;
  letter-spacing:0.10em; text-transform:uppercase; color:var(--ink-soft);
}
.meta-tags{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.tag{
  font-family:var(--ui); font-size:11px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-soft);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:6px 13px; background:transparent;
}
.tag.is-pink { background:var(--pink);   border-color:transparent; color:var(--ink); }
.tag.is-blue { background:var(--blue);   border-color:transparent; color:var(--ink); }
.tag.is-yellow{ background:var(--yellow); border-color:transparent; color:var(--ink); }

/* ===========================================================================
   8. CARD FAMILY — five members, one family
   =========================================================================== */
.c-feature, .c-project, .c-archive, .c-info, .c-cta{
  position:relative;
  background:var(--cream-light);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  text-decoration:none;
  color:inherit;
  display:block;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.c-feature{ border-radius:var(--r-feature); padding:var(--s6); }
.c-project{ border-radius:var(--r-card);    padding:var(--s5); }
.c-archive{ border-radius:var(--r-tight);   padding:var(--s3); }
.c-info   { border-radius:var(--r-card);    padding:var(--s5); }
.c-cta    { border-radius:var(--r-feature); padding:var(--s7); background:var(--red); border-color:var(--red); }
.c-cta, .c-cta .t-section, .c-cta p{ color:var(--cream-light); }
.c-cta .btn{ background:var(--cream-light); color:var(--red-dark); border-color:var(--cream-light); }

@media (hover:hover) and (pointer:fine){
  a.c-feature:hover, a.c-project:hover, a.c-archive:hover{
    box-shadow:var(--shadow-lift); border-color:var(--red); transform:translateY(-2px);
  }
}

/* the media well inside a card keeps the artwork's own proportions */
.c-media{ border-radius:var(--r-tight); overflow:hidden; background:var(--cream); }
.c-media img, .c-media video{ display:block; width:100%; height:auto; }

/* ===========================================================================
   9. RETIRE THE SCRAPBOOK LAYER
   Tape, kraft, torn edges, pinned rotations and hard offset shadows are gone.
   The rules stay in style.css so Phase 2 can delete them file by file.
   =========================================================================== */
.tape, .tape2, .navcat-yarn{ display:none !important; }

.herobg, .kraftmid{
  background:var(--cream) !important;
  background-image:none !important;
  color:var(--ink);
}
.herobg::before, .herobg::after,
.kraftmid::before, .kraftmid::after{ display:none !important; content:none !important; }
.herobg .lede, .herobg .alabel, .herobg .crumb a, .herobg .crumb b, .herobg .crumb span,
.kraftmid .hn-lead, .kraftmid .hn-meta, .kraftmid .sh-note, .kraftmid .meta{ color:var(--ink-soft); }

.polaroid, .tbox, .journal, .ncard, .hnext, .flag, .rel, .acc, .gist,
.fig, .ai, .hg-i, .strip-i, .aboutbox{
  transform:none !important;
  box-shadow:none;
}
.polaroid, .tbox, .journal, .ncard, .aboutbox{
  background:var(--cream-light);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow);
}
.fig, .ai, .hg-i, .strip-i{
  background:transparent;
  border:0;
  border-radius:var(--r-tight);
}
.fig img, .ai img, .hg-i img, .strip-i img, .polaroid img{
  border-radius:var(--r-tight);
  display:block;
}
.brk{ border-top:1px solid var(--line-soft); }
.hg-i::after, .strip-i::after, .asheet .ai::after, .sheet > .fig::after,
.ncard::after, .hnext::after, .flag::after{ display:none !important; content:none !important; }

/* links */
a{ color:var(--red-dark); }
a:hover{ color:var(--red); }

/* forms inherit the pill language */
.form input, .form textarea{
  font-family:var(--ui); font-size:16px; color:var(--ink);
  background:var(--cream-light);
  border:1px solid var(--line); border-radius:var(--r-tight);
  padding:14px 16px;
}
.form input:focus, .form textarea:focus{ outline:2px solid var(--red); outline-offset:2px; border-color:var(--red); }

/* visible focus everywhere, in brand red */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--red); outline-offset:3px; border-radius:4px;
}

footer{ background:var(--cream); border-top:1px solid var(--line-soft); }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ===========================================================================
   10. CORRECTIONS AGAINST THE REFERENCE
   Read from the Rayo comp: section headings carry red, colour appears as solid
   fields behind artwork rather than as accents, the footer is a red panel, and
   elevation is almost entirely absent — flat colour, hairline outline.
   =========================================================================== */

/* --- display colour: sections speak in red, names stay ink --- */
.t-title, .t-section,
h2, .shead h2, .mhead, .hw.sec{
  color:var(--red-dark);
}
.t-hero, .t-project, .meta-name, .hw.xl, h1, .pcase-t{
  color:var(--ink);
}
.t-ink{ color:var(--ink) !important; }
.t-red{ color:var(--red-dark) !important; }

/* --- colour fields: the supporting palette carries category, not decoration --
   A card sits its artwork on a solid field. The field is the signal; the card
   around it stays cream. Use one field per category, never at random. ------- */
.field{
  border-radius:var(--r-card);
  padding:var(--s5);
  display:flex; align-items:center; justify-content:center;
}
.field-pink  { background:var(--pink); }
.field-blue  { background:var(--blue); }
.field-yellow{ background:var(--yellow); }
.field-red   { background:var(--red); }
.field-cream { background:var(--cream); }
.field img, .field video{ display:block; max-width:100%; height:auto; border-radius:var(--r-tight); }

/* a card whose whole surface is the colour field */
.c-project.on-pink  { background:var(--pink);   border-color:transparent; }
.c-project.on-blue  { background:var(--blue);   border-color:transparent; }
.c-project.on-yellow{ background:var(--yellow); border-color:transparent; }
.c-project.on-red   { background:var(--red);    border-color:transparent; color:var(--cream-light); }
.c-project.on-red .meta-name, .c-project.on-red .meta-client{ color:var(--cream-light); }

/* --- flat by default: elevation is the exception, not the rule --- */
.c-feature, .c-project, .c-archive, .c-info,
.polaroid, .tbox, .journal, .ncard, .aboutbox, .nv{
  box-shadow:none;
}
.is-raised{ box-shadow:var(--shadow); }
@media (hover:hover) and (pointer:fine){
  a.c-feature:hover, a.c-project:hover, a.c-archive:hover{ box-shadow:var(--shadow); }
}

/* --- badge: the small pill that sits on a colour field --- */
.badge-pill{
  position:absolute; top:var(--s3); left:var(--s3);
  font-family:var(--ui); font-size:10.5px; font-weight:600;
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--red-dark); background:var(--cream-light);
  border-radius:var(--r-pill); padding:5px 12px;
}

/* --- disclosure row: a full-width coloured pill with a round control --- */
.row-pill{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  width:100%; padding:14px 10px 14px 22px; min-height:44px;
  border:0; border-radius:var(--r-pill); cursor:pointer;
  font-family:var(--ui); font-size:14px; font-weight:600;
  letter-spacing:0.02em; color:var(--ink); text-align:left;
  background:var(--pink);
}
.row-pill.is-blue  { background:var(--blue); }
.row-pill.is-yellow{ background:var(--yellow); }
.row-pill.is-cream { background:var(--cream-light); border:1px solid var(--line); }
.row-pill .mark{
  flex:0 0 auto; width:28px; height:28px; border-radius:var(--r-pill);
  background:var(--cream-light); color:var(--red);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:17px; line-height:1; transition:transform .2s ease;
}
details[open] > .row-pill .mark{ transform:rotate(45deg); }

/* --- footer: a solid red panel, the last object on the page --- */
footer{
  background:var(--cream);
  border-top:0;
  padding:var(--s7) var(--pad) var(--s7);
}
footer > .wrap, footer > .mid{
  background:var(--red);
  border-radius:var(--r-feature);
  padding:var(--s7);
  color:var(--cream-light);
  max-width:var(--max);
  margin-inline:auto;
}
footer .fnote{ color:var(--cream-light); opacity:.92; font-size:13px; letter-spacing:0.02em; }
footer .ficons a{
  width:40px; height:40px;
  border:1px solid rgba(255,249,238,.45); border-radius:var(--r-pill);
  color:var(--cream-light); background:transparent;
  transition:background .16s ease, color .16s ease;
}
footer .ficons a:hover{ background:var(--cream-light); color:var(--red); transform:none; }
footer a{ color:var(--cream-light); }
@media (max-width:640px){ footer > .wrap, footer > .mid{ padding:var(--s6) var(--s5); } }

/* ---------------------------------------------------------------------------
   The nav is a pill, not a full-width bar: the paper element is constrained to
   the pill's own box so the object sits on the cream rather than spanning it.
--------------------------------------------------------------------------- */
nav{ padding-inline:var(--pad); }
.navpaper{ position:relative; max-width:var(--max); margin-inline:auto; padding:var(--s4) 0 var(--s3); }

/* ---------------------------------------------------------------------------
   Remaining small UI objects brought into the pill/catalogue language.
--------------------------------------------------------------------------- */
.points li, .points span, .chip, .filters button, .bg-cs, .rel, .pn-all, .crow-go{
  font-family:var(--ui);
}
.points li, .points span, .chip{
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:500; letter-spacing:0.06em;
  color:var(--ink-soft);
  background:transparent;
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:8px 16px; box-shadow:none; transform:none !important;
}
.filters button{
  font-size:11.5px; font-weight:600; letter-spacing:0.10em; text-transform:uppercase;
  color:var(--ink-soft); background:transparent;
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:10px 18px; min-height:44px;
}
.filters button[aria-pressed="true"], .filters button.on{
  background:var(--red); border-color:var(--red); color:var(--cream-light);
}
.rel{
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--cream-light); padding:12px 20px;
}
.rel:hover{ border-color:var(--red); transform:none; }
.crumb{ font-family:var(--ui); font-size:11.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-soft); }
.crumb a{ color:var(--ink-soft); } .crumb a:hover{ color:var(--red); }
.jump-wrap{ background:var(--cream) !important; box-shadow:none; border-bottom:1px solid var(--line-soft); }
.jump{ border-top:0; }
.jump a{ font-family:var(--ui); font-size:12.5px; color:var(--ink-soft); }
.jump a:hover{ color:var(--red); }
.badge{ font-family:var(--ui); border-radius:var(--r-pill); }
.gist{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.gist dt, .gist dd{ border-bottom:1px solid var(--line-soft); }
.num-v{ font-family:var(--display); font-weight:400; color:var(--ink); letter-spacing:-0.02em; }
.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------------------------------------------------------------------------
   Touch targets. The monogram reads small, like the reference, but its tappable
   area stays a full 44px; the project-nav links were sitting a hair under.
--------------------------------------------------------------------------- */
.nvbrand{ min-width:44px; min-height:44px; justify-content:center; }
.pn, .pn.prev, .pn.next{ min-height:48px; justify-content:center; }
.points{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s5) 0 0; padding:0; }
.points li{ text-align:center; }

/* ===========================================================================
   11. PHASE 1 REVISION — the final word on nav state, elevation and type colour.
   Everything below overrides anything above it.
   =========================================================================== */

/* --- 1. active navigation: soft pink fill, dark red text --------------------
   Red stays the action colour on buttons and controls; the nav marks where you
   are, which is a quieter job. --------------------------------------------- */
.lks a[aria-current="page"]{
  background:var(--pink);
  color:var(--red-dark);
  font-weight:600;
}
.lks a[aria-current="page"]:hover{ background:var(--pink); color:var(--red-dark); }

/* --- 4. flat is the default ------------------------------------------------
   Hairline outline, rounded corner, solid field. The shadow token stays in the
   system for exceptional interaction states, but nothing wears it at rest. -- */
.surface, .card,
.c-feature, .c-project, .c-archive, .c-info, .c-cta,
.polaroid, .tbox, .journal, .ncard, .aboutbox, .nv, .rel, .chip, .points li{
  box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  a.c-feature:hover, a.c-project:hover, a.c-archive:hover{
    box-shadow:none;
    border-color:var(--red);
    transform:translateY(-1px);
  }
}
.is-raised{ box-shadow:var(--shadow); }   /* opt in, never automatic */

/* --- 5. typographic colour hierarchy, locked -------------------------------
   RED SERIF   section headings, editorial statements, section introductions
   INK SERIF   project and brand names, hero identity, long-form titles
   INK SANS    body, descriptions, navigation, metadata, captions
   RED SANS    active states, labels, small emphasis, selected controls
   Red creates hierarchy. It is not the default colour of type. ------------- */

/* red serif */
.t-section, .hw.sec,
h2, .shead h2, .mhead,
.pull, .plead{
  color:var(--red-dark);
}

/* ink serif */
.t-hero, .t-title, .t-project,
.hw.xl, .hw.statnum, h1, .pcase-t,
.meta-name, .bname,
.flag-lead, .hn-lead, .hf-lead,
.psub, .acc-t, h3{
  color:var(--ink);
}

/* ink sans */
body, p, li, dd, .lede, .prose p, .gist dd,
.t-meta, .alabel, .bg-meta, .hn-meta, .num-l, .uw-m, .uw-n,
.credit, .fig figcaption, .ai-label, .hg-cap, .stat-src, .pn-l,
.lks a, .crumb, .crumb a{
  color:var(--ink);
}
.lede, .t-meta, .alabel, .bg-meta, .hn-meta, .num-l, .uw-m, .uw-n,
.credit, .fig figcaption, .ai-label, .hg-cap, .stat-src, .pn-l,
.lks a, .crumb, .crumb a{
  color:var(--ink-soft);
}

/* red sans — active states, labels, small emphasis, controls */
.meta-num, .btn-text, .crow-go, .bg-cs, .jump a:hover,
.lks a:hover, .hero-now b, .hero-now strong{
  color:var(--red-dark);
}
.filters button[aria-pressed="true"], .filters button.on{
  background:var(--red); border-color:var(--red); color:var(--cream-light);
}
.btn, .btn-primary{ color:var(--cream-light); }      /* on red, stays cream */
.c-cta, .c-cta .t-section, .c-cta p, .c-cta .t-meta{ color:var(--cream-light); }
footer .fnote, footer a{ color:var(--cream-light); }

/* --- the cut-out words, mapped to their real jobs --------------------------
   Bare .hw in a heading row is a page title; .cuthead is a section heading;
   .csname and .ptitle are project names. The old markup never distinguished
   them by size, so the system does it here. ------------------------------- */
.hrow:not(.csname) > .hw:not(.xl):not(.sm):not(.statnum){
  font-size:clamp(42px, 5.2vw, 72px);
  line-height:1.04;
  letter-spacing:-0.022em;
  color:var(--ink);
}
.csname > .hw{
  font-size:clamp(34px, 4.4vw, 60px);
  line-height:1.06;
  color:var(--ink);          /* a project name is ink, never red */
}
.cuthead .hw{
  font-size:clamp(30px, 3.4vw, 48px);
  line-height:1.10;
  color:var(--red-dark);     /* a section heading is red */
}

/* Inline text links that act as controls keep a full tap target at every width,
   not only on phones. */
.crow-go, .bg-cs, .pn-all, .btn-text, .rel, .snote a, .fnote a{
  display:inline-flex; align-items:center; min-height:44px;
}

/* ===========================================================================
   12. HOMEPAGE COMPONENTS (Phase 2)
   Built as reusable objects — hero, feature, project card, proof, archive cta,
   about card, contact cta, rich footer. Later phases reuse these rather than
   writing page-specific CSS.
   =========================================================================== */

.section{ padding-block:var(--s9); }
.section + .section{ padding-top:0; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s5); flex-wrap:wrap; margin-bottom:var(--s7);
}
.section-note{
  font-family:var(--display); font-size:clamp(15px,1.3vw,17px);
  font-style:normal; color:var(--ink-soft);
}

/* --- hero ---------------------------------------------------------------- */
.hero{ padding-block:var(--s9) var(--s8); }
.hero-name{
  font-family:var(--display); color:var(--ink);
  font-size:clamp(52px, 9vw, 132px); line-height:0.92;
  letter-spacing:-0.035em; margin:var(--s5) 0 0; text-wrap:balance;
}
.hero-statement{
  font-family:var(--display); color:var(--red-dark);
  font-size:clamp(24px, 3.2vw, 44px); line-height:1.16;
  letter-spacing:-0.018em; margin:var(--s6) 0 0; max-width:30ch;
  text-wrap:balance;
}
.hero-aside{
  border:1px solid var(--line); border-radius:var(--r-feature);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4);
  align-self:start;
}
.hero-status{
  background:var(--pink); border-radius:var(--r-card);
  padding:var(--s4) var(--s5);
  font-size:14.5px; line-height:1.5; color:var(--ink);
}
.hero-status b, .hero-status strong{ color:var(--red-dark); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s7); }

/* --- feature (the flagship) ---------------------------------------------- */
.feature{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter); align-items:start; }
.feature-media{
  grid-column:span 7;
  background:var(--pink);
  border-radius:var(--r-feature);
  padding:var(--s7);
  display:flex; justify-content:center;
}
.feature-media img{
  display:block; width:100%; height:auto; max-width:430px;
  border-radius:var(--r-tight);
}
.feature-body{ grid-column:span 5; display:flex; flex-direction:column; gap:var(--s4); }
.feature-lead{
  font-family:var(--display); font-size:clamp(22px,2.3vw,30px);
  line-height:1.26; color:var(--ink); margin:0;
}

/* --- catalogue metadata -------------------------------------------------- */
.cat-num{
  font-family:var(--ui); font-size:12px; font-weight:600;
  letter-spacing:0.16em; color:var(--red); font-variant-numeric:tabular-nums;
}
.cat-name{
  font-family:var(--display); color:var(--ink);
  font-size:clamp(34px,4vw,54px); line-height:1.02; letter-spacing:-0.02em;
  margin:var(--s2) 0 0;
}
.cat-client{
  font-family:var(--ui); font-size:11.5px; font-weight:500;
  letter-spacing:0.10em; text-transform:uppercase; color:var(--ink-soft);
  margin:var(--s3) 0 0;
}

/* --- numbers, as catalogue annotations ----------------------------------- */
.figs{ display:flex; flex-wrap:wrap; gap:var(--s6) var(--s7); margin:var(--s3) 0 0; }
.fig-item{ display:flex; flex-direction:column; gap:2px; }
.fig-v{
  font-family:var(--display); color:var(--ink);
  font-size:clamp(26px,2.6vw,36px); line-height:1.05; letter-spacing:-0.02em;
  white-space:nowrap;
}
.fig-l{
  font-family:var(--ui); font-size:11.5px; font-weight:500;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-soft);
  line-height:1.45; max-width:22ch;
}
.fig-src{
  font-family:var(--ui); font-size:10.5px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--red);
}

/* --- project cards, with rhythm ------------------------------------------ */
.projects{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter); }
.proj{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-feature);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:border-color .2s ease, transform .2s ease;
}
.proj-media{ padding:var(--s6); display:flex; justify-content:center; }
.proj-media img{ display:block; width:100%; height:auto; border-radius:var(--r-tight); }
.proj-body{ padding:var(--s5) var(--s6) var(--s6); display:flex; flex-direction:column; gap:var(--s3); }
.proj-lead{ font-family:var(--display); font-size:clamp(18px,1.7vw,22px); line-height:1.3; color:var(--ink); margin:0; }
.proj .btn-text{ margin-top:auto; }
.on-yellow .proj-media{ background:var(--yellow); }
.on-blue   .proj-media{ background:var(--blue); }
.on-pink   .proj-media{ background:var(--pink); }
.on-cream  .proj-media{ background:var(--cream); }
@media (hover:hover) and (pointer:fine){
  .proj:hover{ border-color:var(--red); transform:translateY(-2px); }
  .proj:hover img{ transform:scale(1.02); }
  .proj img{ transition:transform .3s ease; }
}

/* --- a full-width colour panel ------------------------------------------- */
.panel{
  border-radius:var(--r-feature);
  padding:var(--s8) var(--s7);
}
.panel-blue{ background:var(--blue); }
.panel-red { background:var(--red); color:var(--cream-light); }
.panel-red .t-section, .panel-red p, .panel-red .fig-v, .panel-red .cat-name{ color:var(--cream-light); }
.panel-red .fig-l, .panel-red .cat-client{ color:var(--cream-light); opacity:.85; }

/* --- about teaser --------------------------------------------------------- */
.about-card{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gutter); align-items:center;
}
.about-photo{ grid-column:span 4; }
.about-photo img{
  display:block; width:100%; height:auto;
  border-radius:var(--r-feature); border:1px solid var(--line);
}
.about-text{ grid-column:6 / -1; }

/* --- contact --------------------------------------------------------------*/
.panel-red .form label{ color:var(--cream-light); }
.panel-red .form input, .panel-red .form textarea{
  background:var(--cream-light); border-color:transparent; color:var(--ink);
}
.panel-red .btn{ background:var(--cream-light); color:var(--red-dark); border-color:var(--cream-light); }
.panel-red .btn:hover{ background:var(--cream); border-color:var(--cream); }
.panel-red a{ color:var(--cream-light); }

/* --- rich footer ---------------------------------------------------------- */
.foot-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter); }
.foot-name{
  grid-column:span 5;
  font-family:var(--display); font-size:clamp(38px,4.6vw,64px);
  line-height:1; letter-spacing:-0.028em; color:var(--cream-light); margin:0;
}
.foot-col{ grid-column:span 2; display:flex; flex-direction:column; gap:var(--s2); }
.foot-h{
  font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--cream-light); opacity:.7; margin-bottom:var(--s2);
}
.foot-col a{
  font-family:var(--ui); font-size:14.5px; color:var(--cream-light);
  text-decoration:none; min-height:44px; display:inline-flex; align-items:center;
}
.foot-col a:hover{ text-decoration:underline; }
.foot-base{
  grid-column:1 / -1; display:flex; justify-content:space-between; gap:var(--s5);
  flex-wrap:wrap; margin-top:var(--s7); padding-top:var(--s5);
  border-top:1px solid rgba(255,249,238,.3);
}

/* --- responsive: an intentional narrow composition, not a collapse -------- */
@media (max-width:1024px){
  .feature-media{ grid-column:span 6; } .feature-body{ grid-column:span 6; }
  .about-photo{ grid-column:span 5; } .about-text{ grid-column:6 / -1; }
  .foot-name{ grid-column:span 8; } .foot-col{ grid-column:span 4; }
}
@media (max-width:900px){
  .section{ padding-block:var(--s8); }
  .hero{ padding-block:var(--s7) var(--s7); }
  .feature{ gap:var(--s6); }
  .feature-media, .feature-body{ grid-column:1 / -1; }
  .feature-media{ padding:var(--s5); }
  .feature-media img{ max-width:none; }
  .projects > *{ grid-column:1 / -1 !important; }
  .about-card{ gap:var(--s6); }
  .about-photo{ grid-column:1 / -1; max-width:260px; }
  .about-text{ grid-column:1 / -1; }
  .foot-name, .foot-col{ grid-column:1 / -1; }
  .foot-col{ gap:0; }
  .panel{ padding:var(--s7) var(--s5); }
  .section-head{ margin-bottom:var(--s6); }
  .figs{ gap:var(--s5) var(--s6); }
}

/* The hero aside is a right-hand catalogue object on desktop. Below the 12-column
   grid it becomes a full-width band instead of a stranded half-width box. */
@media (max-width:1024px){
  .hero .grid > *{ grid-column:1 / -1 !important; }
  .hero-aside{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--s4) var(--s5); }
  .hero-aside .points{ margin:0; flex:1 1 320px; }
  .hero-status{ flex:1 1 280px; }
}
@media (max-width:900px){
  .hero-aside{ flex-direction:column; align-items:stretch; }
}

/* Once the aside stacks, the tablet flex-basis would be read down the block axis
   and stretch the status panel and chips. Reset it to content height. */
@media (max-width:900px){
  .hero-aside .points, .hero-aside .hero-status{ flex:0 0 auto; }
  .hero-aside .points li{ align-self:flex-start; }
}

/* ===========================================================================
   13. PAGE SYSTEM (Phase 3)
   One header, one credit line, one gallery, one project nav — shared by every
   page so nothing is styled per-page any more.
   =========================================================================== */

/* --- page header: eyebrow, title, optional lead ------------------------- */
.page-head{ padding-block:var(--s8) var(--s7); }
.page-head .t-meta{ display:block; }
.page-title{
  font-family:var(--display); color:var(--ink);
  font-size:clamp(42px,6vw,86px); line-height:1.0; letter-spacing:-0.028em;
  margin:var(--s4) 0 0; text-wrap:balance;
}
.page-lead{
  font-family:var(--display); color:var(--red-dark);
  font-size:clamp(20px,2.3vw,30px); line-height:1.24; letter-spacing:-0.015em;
  margin:var(--s5) 0 0; max-width:30ch;
}
.page-sub{ margin:var(--s5) 0 0; max-width:60ch; color:var(--ink); }

/* --- the credit line that closes a project ------------------------------ */
.credit-line{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6);
  padding:var(--s5) 0; margin-top:var(--s7);
  border-top:1px solid var(--line);
}
.credit-line dt{
  font-family:var(--ui); font-size:11px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
  margin:0 0 2px;
}
.credit-line dd{ font-family:var(--ui); font-size:15px; color:var(--ink); margin:0; }
.credit-line > div{ min-width:140px; }

/* --- contact sheet: the work at its own proportions --------------------- */
.sheet-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s5); flex-wrap:wrap; margin-bottom:var(--s5);
}
.asheet .ai{ border-radius:var(--r-tight); }
.asheet .ai img{ border-radius:var(--r-tight); }
.asheet .ai-label{
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
  margin-top:var(--s2);
}
.asheet .ai-label b{ font-weight:600; color:var(--ink); }
.asheet .ai-label span, .asheet .ai-label i{ color:var(--ink-soft); font-style:normal; }

/* --- project navigation -------------------------------------------------- */
.pnav{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s5); flex-wrap:wrap;
  margin-top:var(--s8); padding-top:var(--s5);
  border-top:1px solid var(--line);
}
.pnav .pn{ display:flex; flex-direction:column; gap:2px; text-decoration:none; }
.pnav .pn-l{
  font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.pnav .pn-n{ font-family:var(--display); font-size:clamp(20px,2vw,26px); color:var(--ink); }
.pnav .pn:hover .pn-n{ color:var(--red-dark); }
.pnav .pn-all{
  font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:0.10em;
  text-transform:uppercase; color:var(--red-dark);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:12px 20px; min-height:44px; display:inline-flex; align-items:center;
  white-space:nowrap; text-decoration:none;
}
.pnav .pn-all:hover{ background:var(--red); border-color:var(--red); color:var(--cream-light); }

/* --- a structural gap we have not filled yet ----------------------------- */
.placeholder{
  border:1px dashed var(--line); border-radius:var(--r-card);
  padding:var(--s5); margin-top:var(--s5);
  font-family:var(--ui); font-size:13.5px; color:var(--ink-soft);
}
.placeholder b{ color:var(--red-dark); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; font-size:11px; display:block; margin-bottom:6px; }

@media (max-width:900px){
  .page-head{ padding-block:var(--s7) var(--s6); }
  .pnav{ flex-direction:column; align-items:flex-start; gap:var(--s4); }
}


/* The three paper marks on About are the only artwork still rendered from the
   old asset set; their tiles stay, everything else in img/letters is gone. */
.a45{background-image:url(img/letters/a45.png);aspect-ratio:0.9000}
.a61{background-image:url(img/letters/a61.webp);aspect-ratio:0.5467}
.a72{background-image:url(img/letters/a72.webp);aspect-ratio:0.4267}

/* ===========================================================================
   14. CURATED THREE-PAGE SYSTEM
   Home / Work / About. Bigger hero, asymmetric editorial evidence, lighter
   components. The work determines the composition, never the grid.
   =========================================================================== */

/* --- temporary construction banner -------------------------------------- */
.notice{
  background:var(--ink); color:var(--cream-light);
  font-family:var(--ui); font-size:13.5px; line-height:1.5;
}
.notice-in{
  max-width:var(--max); margin-inline:auto;
  padding:12px var(--pad);
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
}
.notice b{
  font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  font-size:11px; color:var(--yellow); flex:0 0 auto;
}
.notice p{ margin:0; font-size:13.5px; color:var(--cream-light); opacity:.92; flex:1 1 320px; }
.notice button{
  flex:0 0 auto; margin-left:auto;
  background:transparent; color:var(--cream-light);
  border:1px solid rgba(255,249,238,.4); border-radius:var(--r-pill);
  font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; padding:9px 16px; min-height:44px; cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.notice button:hover{ background:var(--cream-light); color:var(--ink); }
.notice[hidden]{ display:none; }
@media (max-width:640px){
  .notice-in{ padding:10px var(--pad); gap:var(--s3); }
  .notice p{ flex:1 1 100%; font-size:13px; }
  .notice button{ margin-left:0; }
}

/* --- the hero carries the page ------------------------------------------ */
.lede-hero{ padding-block:var(--s9) var(--s8); }
.lede-hero .t-meta{ color:var(--ink-soft); }
.hero-claim{
  font-family:var(--display); color:var(--ink);
  font-size:clamp(40px, 6.6vw, 104px);
  line-height:1.02; letter-spacing:-0.032em;
  margin:var(--s5) 0 0; max-width:17ch; text-wrap:balance;
}
.hero-disc{
  font-family:var(--ui); font-size:clamp(13px,1.1vw,15px); font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--red-dark);
  margin:var(--s6) 0 0;
}
.hero-sub{
  font-family:var(--ui); font-size:clamp(16px,1.3vw,18px); line-height:1.6;
  color:var(--ink-soft); margin:var(--s4) 0 0; max-width:46ch;
}
@media (max-width:760px){ .lede-hero{ padding-block:var(--s7) var(--s7); } }

/* --- editorial evidence: natural ratios, asymmetric columns -------------- */
.ev{
  display:grid; gap:var(--gutter);
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:start;
}
.ev figure{ margin:0; }
.ev img{
  display:block; width:100%; height:auto;   /* ratio always from the file */
  border-radius:var(--r-tight);
}
.ev figcaption{
  font-family:var(--ui); font-size:11.5px; letter-spacing:0.04em;
  color:var(--ink-soft); margin-top:var(--s3);
}
/* a tall reel, a square static and a wide hoarding each take what they need */
.ev .tall { grid-column:span 3; }
.ev .std  { grid-column:span 4; }
.ev .wide { grid-column:span 6; }
.ev .full { grid-column:span 8; }
.ev .off  { margin-left:8.333%; }
@media (max-width:900px){
  .ev{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .ev .tall{ grid-column:span 2; }
  .ev .std { grid-column:span 3; }
  .ev .wide, .ev .full{ grid-column:span 6; }
  .ev .off { margin-left:0; }
}
@media (max-width:560px){
  .ev{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
  .ev .tall{ grid-column:span 1; }
  .ev .std, .ev .wide, .ev .full{ grid-column:span 2; }
}

/* --- a curated project entry -------------------------------------------- */
.entry{ padding-block:var(--s9); border-top:1px solid var(--line-soft); }
.entry:first-of-type{ border-top:0; }
.entry-head{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gutter); align-items:start; margin-bottom:var(--s7);
}
.entry-id{ grid-column:span 1; }
.entry-title{ grid-column:span 5; }
.entry-copy{ grid-column:8 / -1; }
.entry-name{
  font-family:var(--display); color:var(--ink);
  font-size:clamp(34px,4.4vw,62px); line-height:1.0; letter-spacing:-0.026em;
  margin:0;
}
.entry-cap{
  font-family:var(--ui); font-size:11.5px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--red-dark);
  margin:var(--s3) 0 0;
}
.entry-copy p{ margin:0 0 var(--s4); font-size:16.5px; line-height:1.62; }
.entry-take{
  font-family:var(--display); font-size:clamp(18px,1.7vw,22px);
  line-height:1.34; color:var(--red-dark); margin:var(--s5) 0 0;
}
.entry-figs{ display:flex; flex-wrap:wrap; gap:var(--s5) var(--s7); margin:var(--s6) 0 0; }
@media (max-width:900px){
  .entry{ padding-block:var(--s8); }
  .entry-head{ gap:var(--s4); margin-bottom:var(--s6); }
  .entry-id{ grid-column:1 / -1; }
  .entry-title{ grid-column:1 / -1; }
  .entry-copy{ grid-column:1 / -1; }
}

/* --- motion: small, deliberate, never shifting layout -------------------- */
@media (prefers-reduced-motion:no-preference){
  .rise{ opacity:0; transform:translateY(8px); }
  .rise.in{ opacity:1; transform:none; transition:opacity .5s ease-out, transform .5s ease-out; }
  @media (hover:hover) and (pointer:fine){
    .ev figure img, .ev a img{ transition:transform .35s cubic-bezier(.2,.6,.2,1); }
    .ev figure:hover img, .ev a:hover img{ transform:scale(1.015); }
    .entry:hover .entry-name{ transition:color .2s ease; }
  }
}
@media (prefers-reduced-motion:reduce){
  .rise{ opacity:1; transform:none; }
}

/* ===========================================================================
   15. AESTHETIC REFINEMENT
   Colour stops being a layout device and goes back to being an accent. The
   paper, the type and the work carry the weight. Nothing here changes what the
   site says — only how loudly it says it.

   Audience order this pass is tuned to: recruiters first, freelance clients
   second. Personality lives in the visual layer; the information layer stays
   literal.
   =========================================================================== */

/* --- 15.1 the legacy torn-paper band above the footer is gone ------------ */
footer::before, footer::after{ display:none !important; }

/* --- 15.2 the footer is paper, not a red slab ---------------------------- */
footer{
  background:var(--cream); color:var(--ink);
  border-top:1px solid var(--line);
  padding:0; margin-top:var(--s9); box-shadow:none;
}
footer{ padding:0 !important; }
footer > .wrap, footer > .mid{
  background:none; border-radius:0; color:var(--ink);
  padding:var(--s8) var(--pad) var(--s6);
}
.foot-name{
  color:var(--ink); grid-column:span 4;
  font-size:clamp(30px,3.4vw,46px); letter-spacing:-0.024em;
}
.foot-h{ color:var(--red-dark); opacity:1; }
footer a, .foot-col a{ color:var(--ink); border-bottom:0 !important; text-decoration:none; }
.foot-col a{ min-height:38px; font-size:15px; }
.foot-col a:hover{ color:var(--red-dark); text-decoration:none; }
.foot-base{ border-top:1px solid var(--line-soft); margin-top:var(--s6); padding-top:var(--s4); }
footer .fnote{ color:var(--ink-soft); font-size:12.5px; }
/* the one piece of colour left down here: a red rule, not a red field */
footer{ border-top-color:var(--red); border-top-width:2px; }
@media (max-width:900px){ .foot-col a{ min-height:44px; } }

/* --- 15.3 the editorial close replaces the CTA card ---------------------- */
/* Not a component with a background. A closing page: a rule, a line of type,
   an address. The contact details stay unmissable because a recruiter needs
   them, but they are set, not boxed. */
.close{ padding-block:var(--s9) var(--s8); }
.close-rule{ border:0; border-top:2px solid var(--red); margin:0 0 var(--s6); }
.close-label{
  font-family:var(--ui); font-size:11.5px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--red-dark); margin:0;
}
.close-h{
  font-family:var(--display); color:var(--ink);
  font-size:clamp(32px,4.4vw,60px); line-height:1.04; letter-spacing:-0.026em;
  margin:var(--s4) 0 0; max-width:16ch; text-wrap:balance;
}
.close-sub{
  font-family:var(--ui); font-size:17px; line-height:1.65; color:var(--ink-soft);
  margin:var(--s4) 0 0; max-width:46ch;
}
.close-mail{
  display:inline-flex; align-items:center; min-height:46px; margin:var(--s6) 0 0;
  font-family:var(--display); color:var(--ink); text-decoration:none;
  font-size:clamp(21px,2.5vw,34px); line-height:1.2; letter-spacing:-0.015em;
  border-bottom:2px solid var(--line); padding-bottom:4px;
  transition:color .18s ease, border-color .18s ease;
  overflow-wrap:anywhere;
}
.close-mail:hover{ color:var(--red-dark); border-bottom-color:var(--red); }
.close-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--s4);
  margin:var(--s6) 0 0;
}
.close-meta a, .close-meta span{
  font-family:var(--ui); font-size:12.5px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
  text-decoration:none; min-height:44px; display:inline-flex; align-items:center;
}
.close-meta a{ color:var(--red-dark); }
.close-meta a:hover{ color:var(--red); text-decoration:underline; text-underline-offset:4px; }
.close-meta i{ font-style:normal; color:var(--line); }

/* --- 15.4 figures on a rule, not inside a blue box ----------------------- */
.figband{
  border-top:1px solid var(--line); padding-top:var(--s5);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:var(--s6) var(--s5);
}
.figband .fig-v{ color:var(--ink); }
.figband .fig-l{ color:var(--ink-soft); }

/* --- 15.5 principles: a readable measure, finally ------------------------ */
.princ{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6) var(--s8); }
.princ > li{ border-top:1px solid var(--line-soft); padding-top:var(--s4); }
.princ h3{
  font-family:var(--ui); font-size:11.5px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--red-dark); margin:0;
}
.princ p{ margin:var(--s3) 0 0; font-size:16.5px; line-height:1.62; max-width:46ch; }
@media (max-width:760px){ .princ{ grid-template-columns:1fr; gap:var(--s5); } }

/* --- 15.6 skills as a credit list, not thirty outlined pills ------------- */
.skills{ margin:0; }
.skills > div{
  display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:var(--s3) var(--s6);
  border-top:1px solid var(--line-soft); padding-block:var(--s4);
}
.skills dt{
  font-family:var(--ui); font-size:11.5px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--red-dark);
  margin:3px 0 0;
}
.skills dd{ margin:0; font-size:16.5px; line-height:1.6; color:var(--ink); max-width:62ch; }
.skills dd i{ font-style:normal; color:var(--line); padding:0 4px; }
@media (max-width:640px){ .skills > div{ grid-template-columns:1fr; } }

/* --- 15.7 experience: hairline rows, quieter --------------------------- */
.crows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.crows .crow{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) minmax(0,1fr);
  gap:var(--s3) var(--s5); align-items:baseline;
  border-bottom:1px solid var(--line-soft); padding-block:var(--s4);
  background:none;
}
.crows .crow b{ font-family:var(--display); font-weight:400; font-size:20px; color:var(--ink); letter-spacing:-0.01em; }
.crows .crow span{ font-family:var(--ui); font-size:14.5px; color:var(--ink-soft); }
.crows .crow span:empty{ display:none; }
@media (max-width:700px){
  .crows .crow{ grid-template-columns:1fr; gap:2px; padding-block:var(--s4); }
}

/* --- 15.8 a form set on paper ------------------------------------------- */
.form-plain{ max-width:34rem; }
.form-plain > div{ margin-top:var(--s5); }
.form-plain label{
  display:block; font-family:var(--ui); font-size:11.5px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--red-dark); margin-bottom:6px;
}
.form-plain input, .form-plain textarea{
  width:100%; background:transparent; color:var(--ink);
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  padding:10px 0; font-family:var(--ui); font-size:16.5px;
  box-shadow:none;
}
.form-plain input:focus, .form-plain textarea:focus{
  outline:0; border-bottom-color:var(--red); border-bottom-width:2px; padding-bottom:9px;
}
.form-plain textarea{ min-height:112px; resize:vertical; }
.form-plain .fs-status{ font-size:14px; color:var(--red-dark); margin:var(--s4) 0 0; }
.form-plain .btn{ margin-top:var(--s5); }

/* --- 15.9 a quiet line that points somewhere else ----------------------- */
.onward{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:var(--s4); margin-top:var(--s7);
}
.onward p{ margin:0; font-size:15.5px; color:var(--ink-soft); max-width:52ch; }
.onward .btn-text{ margin:0; }

/* --- 15.10 selected-work cards, composed rather than packed -------------- */
/* The spans are authored per card in the markup so each row closes on
   purpose. These rules only handle the type under the picture. */
.workcard{ text-decoration:none; color:inherit; display:block; }
.workcard img{ display:block; width:100%; height:auto; border-radius:var(--r-tight); }
.workcard h3{
  font-family:var(--display); color:var(--ink); margin:var(--s4) 0 0;
  font-size:clamp(23px,2.1vw,31px); line-height:1.1; letter-spacing:-0.018em;
}
.workcard .entry-cap{ margin-top:var(--s2); color:var(--ink-soft); }
.workcard:hover h3{ color:var(--red-dark); }
@media (prefers-reduced-motion:no-preference){ .workcard h3{ transition:color .18s ease; } }

/* ===========================================================================
   16. THE ARCHIVE — an editorial catalogue, not a card wall
   Numbered entries, metadata in a fixed order so it can be scanned by client,
   year, type and discipline, and a contact sheet where evidence exists. An
   entry with no imagery is a typographic record, not an empty box.
   =========================================================================== */

.cat-lead{ margin:var(--s5) 0 0; max-width:62ch; color:var(--ink); }

/* --- the filter: text, not chrome --------------------------------------- */
.catbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--s4);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-top:var(--s7);
}
.catbar .catbar-l{
  font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 var(--s3) 0 0;
}
.catbar button{
  background:none; border:0; cursor:pointer; padding:0;
  min-height:46px; display:inline-flex; align-items:center;
  font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-soft);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .16s ease, border-color .16s ease;
}
.catbar button:hover{ color:var(--ink); }
.catbar button[aria-pressed="true"]{ color:var(--red-dark); border-bottom-color:var(--red); }
.catcount{
  margin-left:auto; font-family:var(--ui); font-size:12px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
}
@media (max-width:640px){ .catcount{ margin-left:0; width:100%; padding-bottom:var(--s3); } }

/* --- one record ---------------------------------------------------------- */
.cat-entry{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s3) var(--gutter);
  align-items:start;
  border-top:1px solid var(--line-soft); padding-block:var(--s7);
}
.cat-entry[hidden]{ display:none; }
.cat-e-n{
  grid-column:span 1;
  font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:0.14em;
  color:var(--red); font-variant-numeric:tabular-nums; padding-top:10px;
}
.cat-e-head{ grid-column:2 / 7; }
.cat-e-name{
  font-family:var(--display); color:var(--ink); margin:0;
  font-size:clamp(26px,2.9vw,40px); line-height:1.06; letter-spacing:-0.022em;
}
.cat-e-meta{
  display:flex; flex-wrap:wrap; gap:0 var(--s3); margin:var(--s3) 0 0;
  font-family:var(--ui); font-size:11.5px; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-soft);
}
.cat-e-meta i{ font-style:normal; color:var(--line); }
.cat-e-meta .yr{ color:var(--ink); }
.cat-e-body{ grid-column:8 / -1; }
.cat-e-body p{ margin:0; font-size:16px; line-height:1.6; color:var(--ink); max-width:46ch; }
.cat-e-links{ display:flex; flex-wrap:wrap; gap:0 var(--s4); margin-top:var(--s3); }
.cat-e-links a{
  font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--red-dark); text-decoration:none;
  min-height:44px; display:inline-flex; align-items:center;
}
.cat-e-links a:hover{ text-decoration:underline; text-underline-offset:4px; }
.cat-e-none{
  font-family:var(--ui); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:var(--s3);
}

/* --- the contact sheet: one height, every ratio its own ------------------ */
.cat-sheet{
  grid-column:2 / -1; margin-top:var(--s5);
  display:flex; flex-wrap:wrap; gap:var(--s4); align-items:flex-end;
}
.cat-sheet img{
  display:block; height:var(--sh,132px); width:auto; max-width:100%;
  border-radius:var(--r-tight);
}
.cat-sheet .big{ --sh:188px; }
.cat-entry.deep .cat-sheet img{ height:188px; }

@media (max-width:900px){
  .cat-entry{ padding-block:var(--s6); gap:var(--s3); }
  .cat-e-n{ grid-column:1 / -1; padding-top:0; }
  .cat-e-head, .cat-e-body, .cat-sheet{ grid-column:1 / -1; }
  .cat-e-body{ margin-top:var(--s3); }
  .cat-sheet{ margin-top:var(--s4); gap:var(--s3); }
  .cat-sheet img, .cat-entry.deep .cat-sheet img{ height:116px; }
}
@media (max-width:480px){
  .cat-sheet img, .cat-entry.deep .cat-sheet img{ height:96px; }
}

/* --- nav with four items still breathes --------------------------------- */
@media (max-width:560px){
  .lks a{ padding-inline:11px; }
}

/* --- 16.1 corrections after looking at the rendered page ----------------- */
/* The two metadata lines were the same weight, so neither read first; and the
   piece count was stranded under the description instead of sitting with the
   data a visitor actually scans. */
.cat-e-meta-1{ color:var(--ink); }
.cat-e-meta-2{ font-size:11px; letter-spacing:0.09em; color:var(--ink-soft); margin-top:5px; }
.cat-e-count{
  display:block; margin-top:var(--s3);
  font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--red-dark);
}
.cat-e-none{ margin-top:var(--s4); }
.cat-e-links{ margin-top:var(--s4); }

/* --- 16.2 numbers inside a project entry get their own air -------------- */
.entry .figs{
  border-top:1px solid var(--line-soft);
  margin-top:var(--s7); padding-top:var(--s5);
}

/* --- 16.3 a prose column that is not pinned to the left rail ------------- */
/* row-gap stays 0: the paragraphs already carry their own margins, and the
   grid gap was adding to them and pulling the prose apart */
.textcol{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gutter); row-gap:0;
}
.textcol > *{ grid-column:4 / 11; }
.textcol > p:first-child{ margin-top:0; }
@media (max-width:900px){ .textcol > *{ grid-column:1 / -1; } }

/* --- 16.4 the submit button is a button, not a banner -------------------- */
.form-plain button[type="submit"]{ width:auto; display:inline-flex; }

/* --- 16.5 the close already carries its own bottom air ------------------- */
footer{ margin-top:var(--s7); }

/* --- 16.6 availability, stated rather than implied ----------------------- */
/* The primary audience is recruiters, so this is a fact in the information
   layer: ink, body scale, sitting where the standfirst sits. Not a CTA. */
.close-avail{
  font-family:var(--ui); font-size:18px; line-height:1.6; color:var(--ink);
  margin:var(--s4) 0 0; max-width:44ch;
}
.close-avail + .close-sub{ margin-top:var(--s3); font-size:16px; }

/* --- 16.7 a record that is deliberately open, not broken ---------------- */
.cat-entry.pending .cat-e-meta-2{ color:var(--red-dark); }

/* --- 16.8 Credits: the register that closes the catalogue ---------------- */
/* Four roles and one open record. Set tighter than the full entries so the
   run of them reads as a deliberate list, not as entries that ran out. */
.cat-groupmark{
  border-top:2px solid var(--red);
  margin-top:var(--s8); padding-top:var(--s5);
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter);
}
.cat-groupmark[hidden]{ display:none; }
.cat-grouphead{
  grid-column:2 / 7; margin:0;
  font-family:var(--ui); font-size:11.5px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--red-dark);
}
.cat-groupmark p{
  grid-column:8 / -1; margin:0;
  font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:42ch;
}
.cat-entry.cat-credit{ padding-block:var(--s5); }
.cat-entry.cat-credit .cat-e-name{ font-size:clamp(21px,1.9vw,27px); }
.cat-entry.cat-credit .cat-e-body p{ color:var(--ink-soft); }
.cat-entry.pending .cat-e-meta-2{ color:var(--red-dark); }
@media (max-width:900px){
  .cat-groupmark{ gap:var(--s3); margin-top:var(--s7); }
  .cat-grouphead, .cat-groupmark p{ grid-column:1 / -1; }
}