/* ==========================================================================
   Delhi Tobacco: Concept 2, "Mid-Century Tobacco Country"
   The colour swap happens in bin/build-css.py (old palette → new roles).
   This layer adds the brand fonts, the drawn logo lockups and the cream hero.
   Brand rules: brand/BRAND_GUIDE.md. Logos are PNG artwork, used as images;
   never rebuild the lettering in CSS.
   ========================================================================== */

@font-face { font-family: "RC"; src: url("../fonts/roboto-condensed-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* "DT Serif" is Source Serif 4 trimmed for the web (weights 400–700; the
   optical size fixed at 20 for upright, 24 for italic) and renamed, as the OFL asks of
   modified fonts with a Reserved Font Name. Licence: ../fonts/OFL.txt. */
@font-face { font-family: "SS4"; src: url("../fonts/dt-serif-text.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "SS4"; src: url("../fonts/dt-serif-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

/* Stand-ins sized to Roboto Condensed (measured: bold capitals 82% of Arial
   Bold; the small capital labels about 84% of Arial), so headings wrap the same before and after the
   real font arrives and the page doesn't jump on a slow connection. */
@font-face { font-family: "RC fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"), local("Roboto-Regular"), local("Liberation Sans"); font-weight: 100 550; size-adjust: 84%; ascent-override: 110%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "RC fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica Bold"), local("Roboto Bold"), local("Roboto-Bold"), local("Liberation Sans Bold"); font-weight: 551 900; size-adjust: 82%; ascent-override: 113%; descent-override: 30%; line-gap-override: 0%; }

:root {
  --display: "RC", "RC fallback", "Roboto Condensed", "Arial Narrow", sans-serif;
  --serif: "SS4", "Source Serif 4", Georgia, serif;
  --mono: "RC", "RC fallback", "Roboto Condensed", "Arial Narrow", sans-serif;
  --barn: #a51d22; --field: #123c2b; --cream-0: #f3e6c8; --harvest: #dca429; --soil: #2c241d;
}

/* Condensed sans is wider than the old display face: pull the big sizes in a
   little and tighten the tracking so headings keep their line breaks. */
body { font-variation-settings: normal; }
.mono { letter-spacing: .1em; font-weight: 500; }
.page-hero h1, .dt-chapter .chapter-hero h1, .sec-head h2 { letter-spacing: -.01em; font-weight: 800; }
.page-hero h1 { font-size: clamp(46px, 6.4vw, 104px); line-height: .9; }
.sec-head h2 { font-size: clamp(34px, 4vw, 60px); line-height: .95; }
.sec-num { font-weight: 800; }
.page-hero h1 .place, .tagline, .sign-words { font-variation-settings: normal; }

/* Barn-red headings on cream, cream and gold on field green. */
body .sec-head h2 { color: var(--barn); }
body .sec-head h2 span, body.dt-home .paper .sec-head h2 span { color: var(--field); }
body .dark .sec-head h2, body.dt-home section.block:not(.paper) .sec-head h2 { color: var(--cream); }
body .dark .sec-head h2 span, body.dt-home section.block:not(.paper) .sec-head h2 span { color: var(--gold); }

/* ------------------------------------------------------------ header */
.nav a { font-size: 17px; letter-spacing: .04em; padding: 8px 9px; white-space: nowrap; }
.nav a::after { left: 9px; right: 9px; }
.header-cta { white-space: nowrap; font-size: 17px; }
.brand-img .brand-txt { display: none; }
.utility { background: #0c2a1e; }
.brand-img { gap: 14px; align-items: center; }
.brand-img img { display: block; height: auto; }
.brand-img .wm { width: 220px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
.brand-img .ic { display: none; width: 44px; border-radius: 6px; }
.brand-img .brand-sub { display: none; }
.site-header .wrap { min-height: 84px; }
/* The homepage header no longer floats over a photo: it sits on green like every page. */
.dt-home .site-header, .dt-home .site-header.solid { position: sticky; top: 0; background: rgba(18,60,43,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); animation: none; }
/* Phones keep the drawn wordmark too (never typed lettering), sized to leave
   room for the Menu button: 190 px wide, down to 170 px on a 320 px screen. */
@media (max-width: 640px) {
  .brand-img .wm { width: min(190px, calc(100vw - 150px)); }
  .site-header .wrap { min-height: 70px; }
}

/* ------------------------------------------------------------ homepage hero */
.dt-home .hero.hero-brand { min-height: 0; background: var(--paper); color: var(--ink); overflow: visible; }
.dt-home .hero.hero-brand::before, .dt-home .hero.hero-brand::after { content: none; }
.hero-brand .hero-grid { position: relative; display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 6fr) 200px; gap: clamp(28px, 5vw, 80px); align-items: center; padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(32px, 4vw, 56px); }
.hero-brand .logo-h1 { margin: 0; }
.hero-brand .logo-h1 img { width: 100%; max-width: 500px; height: auto; }
.hero-brand .tagline { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; color: var(--soil); }
.hero-brand .where { margin: 10px 0 0; font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--field); }
.hero-brand .kicker .mono { color: var(--field); }
.hero-brand .sign-words { margin: 0 0 18px; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 5vw, 76px); line-height: .92; letter-spacing: -.01em; color: var(--barn); }
.hero-brand .sign-words span { color: var(--harvest); }
.dt-home .hero-brand .dek { color: var(--ink); text-shadow: none; opacity: 1; animation: none; max-width: 34em; }
.dt-home .hero-brand .dek em { color: var(--ink-2); }
.dt-home .hero-brand .actions { opacity: 1; animation: none; }
.dt-home .hero-brand .btn-gold { background: var(--field); color: var(--cream); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.dt-home .hero-brand .btn-gold:hover { background: #0f3324; color: var(--cream); box-shadow: 0 10px 30px -10px rgba(18,60,43,.6), inset 0 -3px 0 rgba(0,0,0,.25); }
.dt-home .hero-brand .btn-ghost { color: var(--field); border-color: var(--field); background: transparent; backdrop-filter: none; }
.dt-home .hero-brand .btn-ghost:hover { color: var(--barn); border-color: var(--barn); }
/* The 1967 sign sits in its own column, lined up with the quote it's the source of. */
.dt-home .hero-brand .signprint { position: relative; top: auto; right: auto; bottom: auto; align-self: center; justify-self: end; width: 190px; margin: 0; transform: rotate(3deg); box-shadow: 0 22px 40px -18px rgba(44,36,29,.6); animation: none; }
.fields-banner { position: relative; margin: 0; border-top: 4px solid var(--harvest); border-bottom: 4px solid var(--field); }
.fields-banner img { width: 100%; height: clamp(170px, 24vw, 360px); object-fit: cover; object-position: 50% 62%; }
.fields-banner .ill-note { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: var(--cream); background: rgba(18,60,43,.78); padding: 3px 8px; border-radius: 2px; letter-spacing: .1em; }
.dt-home .hero-brand .rail { background: var(--field); border-top: 0; }
@media (max-width: 1100px) {
  .hero-brand .hero-grid { grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); }
  .dt-home .hero-brand .signprint { display: none; }
}
@media (max-width: 860px) {
  .hero-brand .hero-grid { grid-template-columns: 1fr; text-align: left; }
  .hero-brand .logo-h1 img { max-width: 360px; }
}

/* ------------------------------------------------------------ footer */
.foot { background: var(--field); }
.foot .credit-gw span.mono { color: var(--muted); }
body.dt-home .ticker .lot .mono { color: var(--soil); opacity: 1; }

/* ------------------------------------------------------------ page and chapter heroes
   Cream like the homepage. With a photo: a split hero, the archival photo in its own
   sepia on the right half (no colour wash over history), the title on cream at left. */
body .page-hero, body.dt-chapter .ch-hero { background: var(--paper); color: var(--ink); }
body .page-hero::before, body.dt-chapter .ch-hero::before { content: none; }
body .page-hero h1, body.dt-chapter .ch-hero h1 { color: var(--barn); text-shadow: none; }
body .page-hero h1 .gold, body.dt-chapter .ch-hero h1 .gold { color: var(--field); }
body .page-hero h1 .place, body.dt-chapter .ch-hero h1 .place { color: var(--soil); }
body .page-hero .dek, body.dt-chapter .ch-hero .ch-dek { color: var(--ink); text-shadow: none; }
body .page-hero .kicker, body.dt-chapter .ch-hero .kicker, body .page-hero .kicker a, body.dt-chapter .ch-hero .kicker a { color: var(--field); }
body .page-hero .kicker .sep, body.dt-chapter .ch-hero .kicker .sep { color: var(--ink-2); }
body .page-hero .meta, body.dt-chapter .ch-hero .meta { color: var(--ink-2); }
body .page-hero .meta b, body.dt-chapter .ch-hero .meta b { color: var(--soil); font-weight: 700; }
body .page-hero .big-num, body .page-hero .yr-big, body.dt-community .page-hero .yr-big, body.dt-chapter .ch-hero .ch-num { -webkit-text-stroke-color: rgba(165,29,34,.5); }
body .page-hero .plate, body.dt-chapter .ch-hero .plate { background: #fbf4e2; box-shadow: 0 18px 40px -18px rgba(44,36,29,.55); }
body .page-hero .roles span { color: var(--field); border-color: rgba(18,60,43,.35); }
body .page-hero .portrait { background: var(--paper-2); color: var(--ink); border-color: var(--rule); }
body .page-hero .portrait b { color: var(--soil); }
body .page-hero .portrait .mono { color: var(--barn); }

@media (min-width: 981px) {
  body .page-hero:not(.plain), body.dt-chapter .ch-hero { min-height: 0; }
  body .page-hero:not(.plain) .photo, body.dt-chapter .ch-hero .photo { left: calc(50% + 20px); border-left: 6px solid var(--harvest); }
  body .page-hero:not(.plain) .photo img, body.dt-chapter .ch-hero .photo img { animation: none; transform: none; }
  body .page-hero:not(.plain) .wrap, body.dt-chapter .ch-hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 560px; padding-top: 64px; padding-bottom: 40px; }
  body .page-hero:not(.plain) .wrap > :last-child:not(:first-child), body.dt-chapter .ch-hero .wrap > .plate { justify-self: end; width: min(340px, 100%); }
  body .page-hero:not(.plain) h1, body.dt-chapter .ch-hero h1 { font-size: clamp(48px, 5.4vw, 96px); }
  body .page-hero:not(.plain) .big-num, body .page-hero:not(.plain) .yr-big, body.dt-chapter .ch-hero .ch-num { left: calc(50% + 50px); right: auto; -webkit-text-stroke-color: rgba(243,230,200,.85); filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
}
@media (max-width: 980px) {
  body .page-hero:not(.plain) .photo, body.dt-chapter .ch-hero .photo { position: relative; inset: auto; height: 56vw; max-height: 420px; border-bottom: 5px solid var(--harvest); }
  body.dt-chapter .ch-hero { display: block; min-height: 0; }
  body .page-hero:not(.plain) .wrap, body.dt-chapter .ch-hero .wrap { padding-top: 34px; }
  body .page-hero:not(.plain) .big-num, body .page-hero:not(.plain) .yr-big, body.dt-chapter .ch-hero .ch-num { -webkit-text-stroke-color: rgba(243,230,200,.85); }
}

/* ------------------------------------------------------------ photos inside dark cards
   Archival photos used as card backgrounds sit on soil brown, not field green, so they
   keep their sepia instead of turning green. */
.rel, .dt-chapter .pager a, .dt-cards .wp-block-post, .dt-home .film-play { background-color: #241d17; }
.rel::before { background: linear-gradient(180deg, rgba(36,29,23,.15), rgba(36,29,23,.92)); }
.dt-chapter .pager a::before { background: linear-gradient(90deg, rgba(36,29,23,.9), rgba(36,29,23,.5)); }
.dt-home .film-play::after { background: linear-gradient(180deg, rgba(36,29,23,0) 40%, rgba(36,29,23,.92)); }
.dt-home .ph figcaption { background: linear-gradient(180deg, transparent, rgba(36,29,23,.88)); }
.dt-cards .wp-block-post::before { background: linear-gradient(180deg, rgba(36,29,23,.15), rgba(36,29,23,.92)); }
.dt-home .stat:has(.stat-photo) { background: linear-gradient(180deg, #3a2f25, #241d17); border-color: #4a3c2f; }
.dt-home .stat-photo { opacity: .3; }
.site-header .now .mono { white-space: nowrap; }
body.dt-chapter article h2 { color: var(--barn); }
@media (max-width: 1400px) { body.dt-chapter .site-header .now { display: none; } }

/* Chapter margin notes need a real right column between 1181 and 1440 px wide. */
@media (min-width: 1181px) and (max-width: 1440px) {
  body.dt-chapter .read { grid-template-columns: 200px minmax(0, 1fr) 256px; gap: 0 40px; }
  body.dt-chapter .note { width: 240px; margin-right: -296px; }
}

/* Header fit: the wordmark never shrinks; the menu button takes over below 1180 px,
   and the homepage's extra "Start reading" button only shows when there's room. */
.brand-img { flex: none; }
body .site-header .nav a { font-size: 16px; padding: 8px 8px; letter-spacing: .04em; white-space: nowrap; }
body .site-header .nav a::after { left: 8px; right: 8px; }
@media (max-width: 1440px) { body.dt-home .site-header .header-cta { display: none; } }
@media (max-width: 1180px) {
  body .site-header .nav { display: none; }
  body .site-header .menu-btn { display: inline-flex; }
}
@media (max-width: 370px) {
  body .site-header .wrap { gap: 10px; }
  body .site-header .menu-btn { padding: 8px 10px; font-size: 16px; gap: 8px; }
}

/* ------------------------------------------------------------ social post (click to load) */
.social-post { margin: 30px 0; padding: 20px 22px; background: #fbf4e2; border: 1px solid var(--rule); border-left: 5px solid var(--field); border-radius: 3px; }
.social-post .mono { display: block; font-size: 11px; color: #6b4f0a; letter-spacing: .12em; }
.social-post b { display: block; margin: 6px 0 2px; font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 1; color: var(--field); }
.social-post .sp-by { display: block; font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.social-post p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; }
.social-post .sp-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 14px; }
.social-post .sp-load { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; padding: 10px 16px; border: 0; border-radius: 3px; background: var(--field); color: var(--cream); cursor: pointer; }
.social-post .sp-load:hover { background: #0f3324; }
.social-post .sp-actions a { color: var(--barn); font-size: 15px; }
.social-post .sp-note { font-size: 13px; color: var(--ink-2); }
.social-post .sp-frame { margin-top: 16px; }
.social-post .sp-frame iframe { display: block; width: 100%; max-width: 500px; height: 620px; border: 0; background: #fff; }

/* ------------------------------------------------------------ footer
   Field green with a gold-over-red rule, the round badge, three link
   columns, and a darker base bar for the rights line and the GWND credit. */
.site-foot { position: relative; background: linear-gradient(var(--barn) 0 4px, var(--field) 4px); color: var(--cream); border-top: 5px solid var(--gold); }
.site-foot .sf-main { display: grid; grid-template-columns: minmax(300px, 1.25fr) 2fr; gap: 48px clamp(40px, 6vw, 96px); padding-top: 64px; padding-bottom: 56px; }
.sf-mark { display: flex; align-items: center; gap: 22px; color: inherit; text-decoration: none; }
.sf-badge { flex: none; display: block; width: 132px; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.28)); transition: transform .3s ease; }
.sf-mark:hover .sf-badge, .sf-mark:focus-visible .sf-badge { transform: rotate(-4deg) scale(1.03); }
.sf-words { display: block; }
.sf-tag { display: block; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 23px; line-height: 1.2; color: var(--cream); }
.sf-where { display: block; margin-top: 10px; font-family: var(--display); font-weight: 600; font-size: 13px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
body .site-foot .sf-statement { margin: 28px 0 0; max-width: 34em; font-size: 16px; line-height: 1.6; color: var(--muted); }
body .site-foot .sf-statement strong { color: var(--cream); font-weight: 700; }
.sf-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 44px); align-content: start; }
.sf-h { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); font-family: var(--display); font-weight: 800; font-size: 14px; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.sf-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.sf-col a { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: .01em; color: var(--cream); text-decoration: none; text-underline-offset: 4px; transition: color .2s; }
.sf-col a:hover { color: var(--gold-2); text-decoration: underline; text-decoration-thickness: 1px; }
.site-foot a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.sf-col a span { color: var(--gold); font-size: .85em; }
.sf-base { background: #0c2a1e; border-top: 1px solid var(--line); }
.sf-base .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 48px; padding-top: 20px; padding-bottom: 22px; }
body .site-foot .sf-rights { flex: 1 1 420px; margin: 0; max-width: 64em; font-size: 13px; line-height: 1.55; color: var(--muted); }
body .site-foot .sf-rights a { color: var(--gold-2); }
body .site-foot .sf-credit { flex: none; display: flex; align-items: baseline; gap: 10px; margin: 0; font-family: var(--display); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sf-credit a { font-family: var(--display); font-weight: 900; font-size: 19px; letter-spacing: .03em; color: var(--cream); text-decoration: none; }
.sf-credit a b { color: #f0553b; font-weight: 900; }
.sf-credit a:hover { color: var(--gold-2); }
@media (max-width: 1000px) {
  .site-foot .sf-main { grid-template-columns: 1fr; padding-top: 52px; padding-bottom: 44px; }
  body .site-foot .sf-statement { max-width: 46em; }
}
@media (max-width: 640px) {
  .sf-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-badge { width: 104px; }
  .sf-mark { gap: 18px; }
  .sf-tag { font-size: 20px; }
  .sf-col a { font-size: 17px; }
  body .site-foot .sf-rights { flex-basis: 100%; }
  body .site-foot .sf-credit { flex-direction: column; align-items: flex-start; gap: 4px; white-space: normal; }
}
@media (max-width: 360px) {
  .sf-nav { grid-template-columns: 1fr; }
  .sf-badge { width: 88px; }
  .sf-credit a { font-size: 17px; }
}

/* ------------------------------------------------------------ speed
   The opening titles used to fade and rise over about 1.8 s; on a phone that
   read as a page still loading. Same movement, quicker, so the words are
   readable within half a second. */
body h1 .line > span, body h1 .place > span, body h1 .town > span { animation-duration: .5s; }
body h1 .line:nth-child(2) > span, body h1 .line:nth-of-type(2) > span { animation-delay: .05s; }
body h1 .line:nth-child(3) > span, body h1 .line:nth-of-type(3) > span { animation-delay: .1s; }
body.dt-home .dek { animation-duration: .5s; animation-delay: .15s; }
body.dt-home .actions { animation-duration: .5s; animation-delay: .22s; }
body.dt-home .plate { animation-duration: .5s; animation-delay: .3s; }
body .reveal, body.dt-home .reveal { transition-duration: .55s; }
body.dt-home .reveal.d1 { transition-delay: .04s; } body.dt-home .reveal.d2 { transition-delay: .08s; } body.dt-home .reveal.d3 { transition-delay: .12s; }

/* ------------------------------------------------------------ back to top */
.to-top { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 85; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid var(--gold); border-radius: 50%; background: var(--field); color: var(--cream); cursor: pointer; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s, background-color .2s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s, background-color .2s; }
.to-top:hover { background: var(--barn); }
.to-top:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.to-top svg { width: 22px; height: 22px; }
@media (max-width: 700px) { .to-top { width: 52px; height: 52px; } .to-top svg { width: 24px; height: 24px; } }
@media (min-width: 1024px) { .to-top { right: calc(28px + env(safe-area-inset-right, 0px)); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; } }
/* With viewport-fit=cover, keep the page clear of the notch in landscape (0 in portrait and on desktop). */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top.show { transition: none; } }
@media print { .to-top { display: none; } }

/* ------------------------------------------------------------ no drop caps
   The mockups opened chapters and community pages with a 90–116 px initial.
   It split the first word ("T" + "here") and was hard to read, on phones
   especially. The opening paragraph keeps its lede size; the letter is normal. */
body.dt-chapter article .lede::first-letter,
body.dt-community .c-body .first::first-letter { float: none; font: inherit; color: inherit; margin: 0; line-height: inherit; }