@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/space-mono-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/space-mono-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
    --cream:#F6EEDC; --surface:#FCF6E8; --ink:#241C1C; --ink-2:#443A33; --muted:#6E634C;
    --line:#E3D8BF; --line-2:#CBBF9E; --marigold:#E39A12; --rani:#C8306C;
    --serif:"Cormorant Garamond",serif; --sans:"Instrument Sans",sans-serif; --mono:"Space Mono",monospace;
    --wrap:1200px; --pad:40px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  html,body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
  a{color:inherit;text-decoration:none}
  a:focus-visible,button:focus-visible{outline:2px solid var(--rani);outline-offset:2px;}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}
  .kick{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0;}
  .tag{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;border-radius:999px;}
  .tag.marigold{background:var(--marigold);color:var(--ink);}
  .tag.out{border:1px solid var(--line-2);color:var(--muted);}
  .tag.neutral{background:var(--line);color:var(--ink-2);}
  .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:15px;font-weight:500;padding:13px 24px;cursor:pointer;border:1px solid transparent;transition:.18s;}
  .btn.ink{background:var(--ink);color:var(--cream);} .btn.ink:hover{background:#000;}
  .btn.rani{background:var(--rani);color:var(--cream);} .btn.rani:hover{background:#B02A5E;}
  .btn.haldi{background:var(--marigold);color:var(--ink);} .btn.haldi:hover{background:#C8850C;}
  .btn.out{background:transparent;color:var(--ink);border-color:var(--line-2);} .btn.out:hover{border-color:var(--ink);}

  /* Skip link */
  .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--cream);padding:12px 20px;font-family:var(--sans);font-size:14px;}
  .skip-link:focus{left:var(--pad);top:var(--pad);}

  /* Nav */
  header{position:sticky;top:0;z-index:40;background:rgba(246,238,220,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
  .nav{height:70px;display:flex;align-items:center;justify-content:space-between;}
  .brand{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:baseline;gap:2px;}
  .brand .dot{color:var(--rani);}
  .brand .tox{background:var(--marigold);color:var(--ink);padding:1px 7px;border-radius:3px;}
  .brand .thr{margin-left:5px;text-decoration:underline;text-decoration-style:dashed;text-decoration-color:var(--rani);text-underline-offset:5px;text-decoration-thickness:1.5px;}
  .nav-toggle{display:none;background:transparent;border:1px solid var(--line-2);border-radius:6px;padding:8px 10px;cursor:pointer;color:var(--ink);}
  .nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;}
  .nav-links{display:flex;align-items:center;gap:30px;}
  .nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-2);}
  .nav-links a:hover{color:var(--rani);}
  .nav-links a[aria-current="page"]{color:var(--rani);}

  /* Hero */
  .hero{padding:88px 0 76px;border-bottom:1px solid var(--line);}
  .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center;}
  .hero .rule{height:3px;width:60px;background:var(--rani);margin-bottom:26px;}
  .hero h1{font-family:var(--serif);font-weight:500;font-size:82px;line-height:.98;letter-spacing:-.015em;margin:16px 0 0;color:var(--ink);}
  .hero h1 em{font-style:italic;color:var(--rani);}
  .hero .lede{font-family:var(--serif);font-size:23px;line-height:1.42;color:var(--ink-2);max-width:34ch;margin:26px 0 0;}
  .hero .actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}
  .hero .art{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line-2);background:var(--surface);}
  .hero .art img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;}
  .chips{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap;}

  /* Figures within sections */
  .fig{margin:30px 0 0;}
  .fig img{width:100%;height:auto;display:block;border:1px solid var(--line-2);}
  .fig figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:10px;}

  /* Compact page header (sub-pages) */
  .pagehead{border-bottom:1px solid var(--line);}
  .pagehead .wrap{padding:72px var(--pad) 56px;}
  .pagehead .rule{height:3px;width:60px;background:var(--rani);margin:14px 0 22px;}
  .pagehead h1{font-family:var(--serif);font-weight:500;font-size:60px;line-height:1;letter-spacing:-.015em;margin:0;color:var(--ink);}
  .pagehead h1 em{font-style:italic;color:var(--rani);}
  .pagehead .lede{font-family:var(--serif);font-size:22px;line-height:1.45;color:var(--ink-2);max-width:52ch;margin:22px 0 0;}

  /* Editorial entry sections */
  .entry{border-bottom:1px solid var(--line);}
  .entry .wrap{padding:76px var(--pad);display:grid;grid-template-columns:.85fr 1.55fr;gap:56px;align-items:start;}
  .entry h2{font-family:var(--serif);font-weight:500;font-size:40px;line-height:1.05;letter-spacing:-.01em;margin:10px 0 0;color:var(--ink);}
  .entry .prose p{font-size:17px;line-height:1.62;color:var(--ink-2);margin:0 0 18px;max-width:62ch;}
  .entry .prose p:last-child{margin-bottom:0;}
  .entry.sunken{background:var(--surface);}
  sup.ref{line-height:0;}
  sup.ref a{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--rani);padding-left:2px;}
  sup.ref a:hover{text-decoration:underline;}

  /* Inline stat emphasis — makes the numbers pop */
  .stat{color:var(--rani);font-weight:600;font-style:normal;}
  .entry .prose .subhead{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9A5A0A;margin:26px 0 10px;font-weight:400;}
  .entry .prose .subhead:first-child{margin-top:0;}

  /* Fashion by the numbers */
  .numbers{border-bottom:1px solid var(--line);background:var(--surface);}
  .numbers .wrap{padding:76px var(--pad);}
  .numbers .head{max-width:820px;margin:0 0 44px;}
  .numbers h2{font-family:var(--serif);font-weight:500;font-size:44px;line-height:1.04;letter-spacing:-.01em;margin:10px 0 0;color:var(--ink);}
  .statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);}
  .statcard{background:var(--surface);padding:34px 28px;}
  .statnum{font-family:var(--serif);font-weight:600;font-size:58px;line-height:1;color:var(--rani);letter-spacing:-.02em;}
  .statnum .statunit{font-size:24px;margin-left:3px;color:var(--marigold);}
  .statnum sup.ref a{color:var(--muted);}
  .statlabel{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:14px 0 0;max-width:32ch;}

  /* Floating vertical tab — always-visible jump to the stat band */
  .stat-tab{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:35;
    writing-mode:vertical-rl;text-orientation:mixed;
    display:inline-flex;align-items:center;gap:10px;
    background:var(--rani);color:var(--cream);
    font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    padding:20px 9px;border-radius:0 10px 10px 0;
    box-shadow:2px 3px 12px rgba(36,28,28,.18);cursor:pointer;transition:.18s;}
  .stat-tab:hover{background:#B02A5E;padding-right:13px;}
  .stat-tab .arrow{color:var(--marigold);font-size:13px;}

  /* Teaser band (homepage — the issue in 30 seconds) */
  .teaser{border-bottom:1px solid var(--line);}
  .teaser .wrap{padding:82px var(--pad);}
  .teaser .inner{max-width:760px;}
  .teaser p{font-family:var(--serif);font-size:27px;line-height:1.4;color:var(--ink);margin:16px 0 0;}
  .teaser .row{margin-top:30px;}

  /* Generic section + card grid (previews, latest) */
  .section{border-bottom:1px solid var(--line);}
  .section.sunken{background:var(--surface);}
  .section .wrap{padding:76px var(--pad);}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:0 0 42px;flex-wrap:wrap;}
  .section-head h2{font-family:var(--serif);font-weight:500;font-size:40px;line-height:1.05;letter-spacing:-.01em;margin:10px 0 0;color:var(--ink);}
  .link-more{font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--rani);}
  .link-more:hover{text-decoration:underline;}
  .cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .card{border:1px solid var(--line-2);background:var(--surface);padding:28px 26px;display:block;transition:.18s;}
  a.card:hover{border-color:var(--ink);transform:translateY(-2px);}
  .card .tag{margin-bottom:14px;}
  .card h3{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0 0 10px;}
  .card p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0;}
  .card .meta{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:14px;}

  /* Grouped sub-blocks within a zone (Life of Project) */
  .groupblock{margin-top:56px;}
  .groupblock:first-of-type{margin-top:0;}
  .grouplbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9A5A0A;margin:0 0 22px;padding-bottom:11px;border-bottom:1px solid var(--line-2);}
  .comingsoon{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--muted);margin:0;}

  /* Featured single item (homepage — real writing) */
  .feature{border-bottom:1px solid var(--line);background:var(--surface);}
  .feature .wrap{padding:76px var(--pad);}
  .feature .fcard{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:center;border:1px solid var(--line-2);background:var(--cream);padding:40px;transition:.18s;}
  a.feature-link:hover .fcard{border-color:var(--ink);}
  .feature h3{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.12;letter-spacing:-.01em;color:var(--ink);margin:14px 0 0;}
  .feature .fmeta{font-family:var(--mono);font-size:12px;color:var(--muted);margin:18px 0 0;}
  .feature .fart{aspect-ratio:4/3;background:var(--surface);border:1px solid var(--line-2);overflow:hidden;}
  .feature .fart img{width:100%;height:100%;object-fit:cover;display:block;}

  /* Why this matters / CTA (marigold band) */
  .matter{background:var(--marigold);color:var(--ink);}
  .matter .wrap{padding:96px var(--pad);}
  .matter .inner{max-width:820px;}
  .matter .kick{color:#5B3D06;}
  .matter h2{font-family:var(--serif);font-weight:500;font-size:52px;line-height:1.04;letter-spacing:-.01em;margin:16px 0 0;}
  .matter p{font-family:var(--serif);font-size:22px;line-height:1.5;margin:22px 0 0;max-width:52ch;color:#3D2E12;}
  .matter .row{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap;}
  .btn.mk{background:transparent;color:var(--ink);border-color:#5B3D06;} .btn.mk:hover{background:#5B3D06;color:var(--marigold);}

  /* Sources */
  .sources{border-bottom:1px solid var(--line);}
  .sources .wrap{padding:64px var(--pad);}
  .sources h2{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 22px;font-weight:400;}
  .sources ol{margin:0;padding:0;list-style:none;counter-reset:src;max-width:70ch;}
  .sources li{counter-increment:src;position:relative;padding-left:30px;margin-bottom:16px;font-size:13.5px;line-height:1.5;color:var(--ink-2);}
  .sources li::before{content:counter(src);position:absolute;left:0;top:1px;font-family:var(--mono);font-size:11px;color:var(--rani);}
  .sources li:last-child{margin-bottom:0;}
  .sources a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
  .sources a:hover{color:var(--rani);}

  /* Footer */
  footer{background:var(--ink);color:var(--cream);}
  footer .wrap{padding:84px var(--pad) 40px;}
  .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;}
  footer .brand{color:var(--cream);}
  footer p.blurb{font-family:var(--serif);font-size:18px;line-height:1.5;color:#C7BDA9;max-width:34ch;margin:16px 0 0;}
  footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--marigold);margin:0 0 16px;}
  footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;}
  footer ul a{color:#C7BDA9;font-size:15px;} footer ul a:hover{color:var(--cream);}
  .fbar{margin-top:64px;padding-top:22px;border-top:1px solid rgba(246,238,220,.14);display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:#8F8672;flex-wrap:wrap;gap:8px;}

  /* Responsive */
  @media (max-width:900px){
    :root{--pad:24px;}
    .hero{padding:56px 0 48px;}
    .hero-grid{grid-template-columns:1fr;gap:36px;}
    .hero .art{order:-1;aspect-ratio:16/9;}
    .hero h1{font-size:56px;}
    .pagehead .wrap{padding:52px var(--pad) 40px;}
    .pagehead h1{font-size:42px;}
    .entry .wrap{grid-template-columns:1fr;gap:20px;padding:56px var(--pad);}
    .entry h2{font-size:33px;}
    .matter .wrap{padding:64px var(--pad);}
    .matter h2{font-size:38px;}
    .matter p{font-size:20px;}
    .numbers h2{font-size:33px;}
    .statgrid{grid-template-columns:repeat(2,1fr);}
    .statnum{font-size:48px;}
    .teaser p{font-size:23px;}
    .section .wrap{padding:56px var(--pad);}
    .section-head h2{font-size:33px;}
    .cardgrid{grid-template-columns:1fr;}
    .feature .fcard{grid-template-columns:1fr;gap:24px;padding:28px;}
    .feature .fart{order:-1;aspect-ratio:16/9;}
    .fgrid{grid-template-columns:1fr;gap:36px;}
    footer .wrap{padding:56px var(--pad) 32px;}

    .stat-tab{display:none;}
    .nav-toggle{display:block;}
    .nav-links{position:absolute;top:70px;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--pad) 20px;display:none;}
    .nav-links.open{display:flex;}
    .nav-links a{padding:12px 0;width:100%;}
  }
  @media (max-width:520px){
    .hero h1{font-size:42px;}
    .hero .lede{font-size:19px;}
    .statgrid{grid-template-columns:1fr;}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{transition-duration:.001ms !important;animation-duration:.001ms !important;}
  }
