/* ==========================================================================
   moumitabhattacharya.com

   PALETTE B — Moumita's brand document ("Brand Site Colors.txt"), applied
   verbatim: her token names, her values, no amendments.

   The previous palette is snapshotted at ../../palettes/palette-a-mockup-derived.css
   (outside the repo, so it never deploys) together with the rename map to
   restore it.

   Known issues NOT fixed here, because this is her document as given:
     - --gold-on-light on --surface-ivory measures 4.51:1, clearing AA by 0.01
     - --text-muted on --surface-ivory measures 1.94:1, so light surfaces have
       no muted-text token
     - the doc defines no decorative token, so --ghost below is carried over
     - --surface-green-raised #103A2C is within 7 channel-steps of --ghost
       #103629, so a raised panel and a ghost numeral read as the same colour
     - the portrait and the TYC logo have #08291F baked into their pixels and
       can never sit on --surface-ivory or --surface-ink without re-export

   Measured, on --surface-green #08291F:
     --text-primary 14.21:1  --text-body 12.20:1  --text-muted  7.31:1
     --gold          8.00:1  --gold-bright 9.90:1
   ========================================================================== */

:root {
  /* Core — brand anchors */
  --color-green:          #08291F; /* page background, front-of-house */
  --color-yellow:         #D9B73A; /* brand accent (The Yellow Cycle gold) */
  --color-ivory:          #F8F4EC; /* light surface / warm white */

  /* Surfaces */
  --surface-green:        #08291F; /* homepage + section pages */
  --surface-green-raised: #103A2C; /* menus, dropdowns, panels above the base */
  --surface-ink:          #2A2723; /* article reading surface (warm dark grey) */
  --surface-ink-raised:   #332F2A; /* raised elements on the reading surface */
  --surface-ivory:        #F8F4EC; /* optional light surface */

  /* Text */
  --text-primary:         #F8F4EC; /* headings + short text on dark (ivory) */
  --text-body:            #E9E3D7; /* long-form body on dark */
  --text-muted:           #9DB8A8; /* labels, captions, metadata (sage) */
  --text-on-light:        #23201B; /* text on ivory / light surfaces */

  /* Accent — gold states */
  --gold:                 #D9B73A; /* links + accent on dark */
  --gold-bright:          #E8CD63; /* hover, active nav, emphasis */
  --gold-on-light:        #8A6C1A; /* gold text/links on ivory (contrast-safe) */

  /* Lines */
  --line-soft:   rgba(217,183,58,0.22); /* hairlines, card edges */
  --line-strong: rgba(217,183,58,0.42); /* section breaks, coda rules */

  /* ---------------------------------------------------------------------
     NOT IN THE BRAND DOCUMENT. The site needs these and the doc does not
     define them, so they are carried over from palette A unchanged. They
     are deliberately kept separate rather than folded in above, so the
     block over this line stays a faithful copy of what she supplied.
     --------------------------------------------------------------------- */
  --paper-lift:  #123D2F;  /* second lift, card hover                     */
  --accent-dim:  #B8901A;  /* held-back gold: card hover edge, blockquote */
  --ghost:       #103629;  /*  1.17:1  the oversized 01/02/03 numerals.   */
                           /* Decorative, never read, aria-hidden.        */

  --measure:     68ch;     /* reading width                               */

  /* Left-rail column width. NOT a ratio — Moumita's reference is that the
     "A" of "Amazon" lines up with the "E" of "I'VE" in the highlight label
     above it. Both are rem-sized, so the width that satisfies it is a
     constant, and an fr would break the alignment at every other viewport.

     Derivation, measured in the browser at 1440px:
       D  = 82.3px  from the rail's content edge to that "E"
       tw = 52.9px  rendered width of the word "Amazon"
       content width = 2D + tw = 217.4px      (chip padding and border cancel)
       column        = content + 2.5rem padding-right = 257.4px ~= 16.1rem

     Depends on the label and chip font metrics. Re-derive if --font-label,
     the label text, or the first chip's text changes.                     */
  --rail:        16.1rem;
  --section-gap: clamp(1.5rem, 4vw, 3.5rem);

  /* --- type ----------------------------------------------------------
     Moumita's mockup was built in PowerPoint, so its fonts are whatever
     Office had installed and are not necessarily web-licensed. These are
     open-licence Google Fonts chosen to sit close to it. Each is used in
     exactly one place, so auditioning an alternative means editing this
     block and the <link> in the page head — nothing else.

       --font-display  the headline voice   (mockup: tall flat condensed)
       --font-label    the deco voice       (mockup: the quadrant labels)
       --font-body     long-form prose      (not shown in the mockup)
     ------------------------------------------------------------------- */
  --font-display: 'Big Shoulders Display', 'Oswald', 'Arial Narrow', sans-serif;
  --font-label:   'Josefin Sans', 'Century Gothic', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-green);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--text-primary); }

img { max-width: 100%; height: auto; display: block; }

/* One visible focus style everywhere. The quadrant is this site's main
   navigation, so keyboard users must be able to see where they are. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: min(100% - 3rem, 1180px);
  margin-inline: auto;
}

/* ==========================================================================
   chrome — masthead and footer
   The homepage deliberately has no nav bar; its quadrant IS the navigation.
   Interior pages render <site-nav>, which produces this header.
   ========================================================================== */

header { padding: 2rem 0 1.25rem; }

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.logo {
  font-family: var(--font-label);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
}
.logo em { font-style: normal; color: var(--gold); }
.logo:hover { color: var(--gold); }

.masthead nav ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.masthead nav a {
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-body);
  text-decoration: none;
}
.masthead nav a:hover { color: var(--gold); }

footer {
  margin-top: 3rem;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover { color: var(--gold); }

/* The copied markup carried these as inline styles, including width:100% —
   which overrode .wrap's gutter and let the footer bleed off the right edge
   on a phone. Keep them here, where the media query below can reach them. */
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
}

@media (min-width: 861px) {
  .footer--section-page .footer-row {
    padding-left: calc(var(--rail) + var(--section-gap));
  }
}

/* ==========================================================================
   home — portrait beside the headline and the quadrant
   ========================================================================== */

.home {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: 100svh;
  padding-block: clamp(2.5rem, 6vh, 5rem);
}

.portrait { align-self: center; }

/* No frame, no border, no crop box. The photograph is a cutout whose
   backdrop is #08291F — pixel-identical to --paper — so it is meant to sit
   directly on the page. A border or a lifted panel behind it would draw an
   edge around something designed not to have one.

   Consequence worth knowing: --paper and this file are now coupled. Change
   the ground colour and the portrait keeps its old green as a visible
   rectangle. The photo has to be re-exported to match. */
.portrait-photo {
  width: 100%;
  height: auto;
  display: block;

  /* The source photo ends in a hard horizontal cut through her sweater.
     Inside a frame that would read as a crop; with no frame it reads as a
     slice. Fading the last sixth into the ground lets her emerge from the
     page instead. Delete these two lines to see the untouched photograph. */
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}

.portrait-name {
  margin: 1.5rem 0 0;
  text-align: center;
  font-family: var(--font-label);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--text-primary);
}
/* Inline, not block: "Mo Bhattacharya" reads as one line, the surname in gold. */
.portrait-name em { font-style: normal; color: var(--gold); }

/* --- the headline ----------------------------------------------------- */

.home-lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 1.06;
  letter-spacing: 0.005em;
  color: var(--gold);
  margin: 0 0 clamp(2.5rem, 6vh, 4.5rem);
  /* No max-width. The column already sets the measure, and this face is
     condensed enough that a ch-based cap breaks the line far too early —
     Moumita's mockup carries the sentence in two lines, not four. */
  text-wrap: balance;
}

/* ==========================================================================
   the quadrant — the four entry points, and the site's main navigation

   The headline says "stop choosing between the boxes", so the boxes are
   drawn as a single crosshair rather than four closed cells. Two rules,
   no outer border: the shape stays open on purpose.
   ========================================================================== */

.quadrant {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: clamp(300px, 46vh, 460px);
}

/* the crosshair */
.quadrant::before,
.quadrant::after {
  content: '';
  position: absolute;
  background: var(--line-soft);
  pointer-events: none;
}
.quadrant::before { top: 0; bottom: 0; left: 50%; width: 1px; }   /* vertical   */
.quadrant::after  {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-soft) 50%, transparent);
}  /* horizontal */

.quad {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.5rem;
  padding: 1.75rem 1.25rem;
  text-align: center;
  text-decoration: none;
  color: var(--gold);
  transition: background-color 140ms ease, color 140ms ease;
}

.quad-label {
  font-family: var(--font-label);
  font-size: clamp(0.9rem, 1.35vw, 1.12rem);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.3;
}

.quad:hover,
.quad:focus-visible {
  background: var(--surface-green-raised);
  color: var(--gold);
}

/* ==========================================================================
   generic sections — used by interior pages
   ========================================================================== */

main { padding-bottom: 2rem; }

.hero { padding: clamp(2rem, 6vh, 4.5rem) 0 clamp(1.5rem, 4vh, 3rem); }

.lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.1;
  color: var(--gold);
  max-width: 20ch;
  text-wrap: balance;
}
.lede em { font-style: normal; color: var(--text-primary); }

.intro { margin-top: 1.75rem; max-width: var(--measure); color: var(--text-body); }
.intro p { margin: 0; }

.section-label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

section { margin-top: clamp(3rem, 8vh, 5.5rem); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  color: var(--text-primary);
  letter-spacing: 0.005em;
}
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0.5rem 0 0; }
h3 { font-size: 1.3rem; margin: 0; }

/* --- cards ------------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.5rem;
}

.card {
  display: block;
  padding: 1.5rem;
  background: var(--surface-green-raised);
  border: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--text-primary);
  transition: background-color 140ms ease, border-color 140ms ease;
}
.card:hover { background: var(--paper-lift); border-color: var(--accent-dim); }
.card h3 { margin: 0.6rem 0; }
.card p { margin: 0; color: var(--text-body); font-size: 0.95rem; }
.card .meta {
  margin-top: 1rem;
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.card .thumb { margin: 0; }

.thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-green-raised);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   The Yellow Cycle — the magazine index

   The logo is line art on a #08291F ground, pixel-identical to --paper, so
   like the portrait it sits directly on the page with no frame. Same coupling
   applies: change --paper and the logo keeps its old green as a square.
   ========================================================================== */

/* Two columns with a hairline between them: the configured navigation rail
   at the left and the section magazine in the remaining space. */
.section-page {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--section-gap);
  padding-block: clamp(2rem, 6vh, 4rem);
  min-height: 70svh;
}

/* --- the configured left rail -----------------------------------------
   The entire structure is generated by nav.js. Selectors stay under
   .section-page so the article header and homepage cannot inherit them.
   ---------------------------------------------------------------------- */

.section-page > .rail {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding-right: 2.5rem;
  scrollbar-width: thin;
}

.section-page > .rail::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(217, 183, 58, 0) 0%,
    rgba(217, 183, 58, 0.32) 9%,
    rgba(217, 183, 58, 0.32) 91%,
    rgba(217, 183, 58, 0) 100%
  );
  pointer-events: none;
}

/* --- 1. home --- */

.section-page .rail-home {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.section-page .rail-home-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: color 140ms ease;
}

.section-page .rail-home-name {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--gold);
  transition: color 140ms ease;
  white-space: nowrap;
}

.section-page .rail-home:hover .rail-home-icon,
.section-page .rail-home:hover .rail-home-name { color: var(--gold-bright); }

/* --- 2. four worlds --- */

.section-page .rail-links {
  display: grid;
  gap: 0.75rem;
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.section-page .rail-links a {
  display: grid;
  grid-template-columns: 0.45rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: #C9A83F;
  text-decoration: none;
}

.section-page .rail-links a:hover { color: var(--gold-bright); }

/* Every row reserves the same dot column, aligning inactive labels with the
   active label rather than with its marker. */
.section-page .rail-world-dot {
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: transparent;
}

.section-page .rail-nav-item.on a {
  color: var(--gold-bright);
  font-weight: 600;
}

.section-page .rail-nav-item.on .rail-world-dot {
  background: var(--gold-bright);
}

/* --- 3. utility link --- */

.section-page .rail-utility {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid transparent;
  border-image: linear-gradient(
    to right,
    rgba(217, 183, 58, 0) 0%,
    var(--line-soft) 16%,
    var(--line-soft) 84%,
    rgba(217, 183, 58, 0) 100%
  ) 1;
}

.section-page .rail-utility a {
  display: grid;
  grid-template-columns: 0.45rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #C9A83F;
  text-decoration: none;
}

.section-page .rail-utility a:hover { color: var(--gold-bright); }

/* --- 4. section-specific anchors --- */

.section-page .rail-anchor-area {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2.5rem, 7vh, 4rem);
}

.section-page .rail-anchor-group { margin: 0; }

.section-page .rail-anchor-label {
  margin: 0 0 1rem;
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-page .rail-anchor-boxes {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-page .rail-anchor-box {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: transparent;
  font-family: var(--font-label);
  font-size: 0.8rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--gold);
}

.section-page .rail-anchor-box small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.section-page .rail-anchor-box--award {
  justify-items: start;
  text-align: left;
}

.section-page .rail-anchor-box--award strong {
  color: var(--gold);
  font-weight: 600;
}

.section-page .rail-anchor-box--award span {
  margin-top: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--text-body);
}

/* The banner sentence: gold, centred, the first thing on the page. Set in the
   BODY face, not the condensed display one — her revised mockup switched it to
   a regular-width sans, so the old 62ch measure went with it. */
.tyc-banner {
  margin: 0 auto;
  max-width: 40ch;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  line-height: 1.55;
  text-align: center;
  color: var(--gold);
  text-wrap: pretty;
}

/* The logo links out to the magazine itself, which lives on Substack at
   theyellowcycle.com. A bare image link has no affordance, so it dims
   slightly on hover and takes the standard focus ring. */
.tyc-logo-link {
  display: block;
  width: clamp(190px, 26vw, 320px);
  margin: clamp(2.5rem, 8vh, 5rem) auto 0;
  transition: opacity 140ms ease;
}
.tyc-logo-link:hover { opacity: 0.75; }

.tyc-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* The logo carries the masthead, so the <h1> beside it would be a visual
   duplicate. It stays for screen readers and search engines instead. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* The magazine is published on Substack, not here, so this page carries a way
   through to it rather than a list of issues. */
.tyc-cta {
  display: block;
  width: fit-content;
  margin: clamp(2rem, 5vh, 3rem) auto 0;
  padding: 0.95rem 2.5rem;
  border: 1px solid var(--gold-bright);
  border-radius: 8px;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  text-decoration: none;
  text-align: center;
  transition: background-color 140ms ease, color 140ms ease;
}
.tyc-cta:hover {
  background: var(--gold-bright);
  color: var(--surface-green);   /* 9.90:1 the other way round */
}

.tyc-published {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.community-main .conviction-tags {
  display: none;
}

.community-main .community-article-deck {
  width: 85%;
  max-width: 85%;
  margin: 0.3rem 0 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-muted);
}

.community-desktop-break {
  display: none;
}

@media (min-width: 861px) {
  .tyc-banner {
    max-width: 44ch;
    margin: 0 auto;
    font-size: 1.03rem;
    line-height: 1.6;
    text-align: left;
    transform: translateY(50px);
  }

  .tyc-logo-link {
    width: clamp(157px, 21.5vw, 264px);
    margin-top: clamp(3.5rem, 10vh, 6rem);
  }

  .tyc-cta {
    margin-top: clamp(2.75rem, 7vh, 4rem);
    padding: 0.84rem 2.2rem;
    font-size: 0.9rem;
  }

  .tyc-published {
    margin-top: 1.75rem;
    font-size: 0.81rem;
  }

  .tyc-cta,
  .tyc-published {
    transform: translateY(-40px);
  }

  .community-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 3rem;
  }

  .community-page {
    min-height: 0;
    padding-bottom: 1rem;
  }

  .community-main .section-intro {
    grid-column: 1 / -1;
  }

  .community-main .section-intro p {
    font-size: 0.93rem;
  }

  .community-main .community-desktop-break {
    display: block;
  }

  .community-main .conviction {
    margin-top: max(0px, calc(clamp(3rem, 8vh, 5.5rem) - 3.25rem));
    padding-top: 1rem;
    border-top: 1px solid transparent;
    border-image: linear-gradient(
      to right,
      rgba(217, 183, 58, 0) 0%,
      var(--line-soft) 14%,
      var(--line-soft) 86%,
      rgba(217, 183, 58, 0) 100%
    ) 1;
    text-align: left;
  }

  .community-main .conviction-num,
  .community-main .conviction--right .conviction-num {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: block;
    margin: 0 0 0.6875rem;
    font-size: clamp(3.25rem, 4.4vw, 3.625rem);
    color: #123E2F;
  }

  .community-main .conviction h2 {
    margin: 0 0 0.9375rem;
    margin-left: 0;
    font-size: clamp(1.125rem, 2.15vw, 1.75rem);
  }

  .community-main .conviction-links,
  .community-main .conviction--right .conviction-links {
    padding-top: 0.6875rem;
    gap: 1.75rem;
    justify-items: start;
  }

  .community-main .conviction-links li,
  .community-main .conviction--right .conviction-links li {
    margin-left: 0;
    max-width: 91%;
    font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-body);
    text-decoration: none;
  }

  .community-main .conviction-tags {
    display: flex;
    width: fit-content;
    align-items: baseline;
    gap: 0.375rem;
    margin-top: 0.5rem;
    margin-left: 0;
    white-space: nowrap;
    vertical-align: baseline;
    font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.5rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .community-main .conviction-article-link {
    color: var(--text-body);
    text-decoration: none;
  }

  .community-main h2 .conviction-article-link {
    color: inherit;
  }

  .community-main h2 .conviction-article-link:hover,
  .community-main h2 .conviction-article-link:focus-visible {
    color: var(--gold-bright);
  }

  .community-main .conviction-title {
    transition: color 140ms ease;
  }

  .community-main .conviction-article-link:hover,
  .community-main .conviction-article-link:focus-visible {
    color: var(--text-body);
  }

  .community-main .conviction-article-link:hover .conviction-title,
  .community-main .conviction-article-link:focus-visible .conviction-title {
    color: var(--gold);
  }

  .community-main .conviction-link-cue {
    visibility: hidden;
    opacity: 0;
    font-size: 0.625rem;
    line-height: 1;
    letter-spacing: 0;
    color: var(--text-muted);
    transition: opacity 140ms ease;
  }

  .community-main .conviction-article-link:hover .conviction-link-cue,
  .community-main .conviction-article-link:focus-visible .conviction-link-cue {
    visibility: visible;
    opacity: 1;
  }
}

.software-main .conviction-tags {
  display: none;
}

@media (min-width: 1024px) {
  .software-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 3rem;
  }

  .software-main .section-intro,
  .software-main .craft {
    grid-column: 1 / -1;
  }

  .software-main .section-intro h1 {
    font-size: clamp(1.53rem, 2.89vw, 2.465rem);
  }

  .software-main .conviction {
    margin-top: 1.25rem;
    padding: 1rem 0 1.5rem;
    border-top: 1px solid transparent;
    border-image: linear-gradient(
      to right,
      rgba(217, 183, 58, 0) 0%,
      var(--line-soft) 14%,
      var(--line-soft) 86%,
      rgba(217, 183, 58, 0) 100%
    ) 1;
    text-align: left;
  }

  .software-main .conviction-num,
  .software-main .conviction--right .conviction-num {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: block;
    margin: 0 0 0.6875rem;
    font-size: clamp(3.25rem, 4.4vw, 3.625rem);
  }

  .software-main .conviction h2 {
    margin: 0 0 0.9375rem;
    margin-left: 0;
    font-size: clamp(1.125rem, 2.15vw, 1.75rem);
  }

  .software-main .conviction-links,
  .software-main .conviction--right .conviction-links {
    padding-top: 0.4375rem;
    gap: 1.125rem;
    justify-items: start;
  }

  .software-main .conviction-links li,
  .software-main .conviction--right .conviction-links li {
    margin-left: 0;
    max-width: 100%;
    font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-body);
    text-decoration: none;
  }

  .software-main .conviction-tags {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    margin-left: 0.5rem;
    white-space: nowrap;
    vertical-align: baseline;
    font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.5rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .software-main .conviction-article-link {
    color: var(--text-body);
    text-decoration: none;
  }

  .software-main .conviction-title {
    transition: color 140ms ease;
  }

  .software-main .conviction-article-link:hover,
  .software-main .conviction-article-link:focus-visible {
    color: var(--text-body);
  }

  .software-main .conviction-article-link:hover .conviction-title,
  .software-main .conviction-article-link:focus-visible .conviction-title {
    color: var(--gold);
  }

  .software-main .conviction-link-cue {
    visibility: hidden;
    opacity: 0;
    font-size: 0.625rem;
    line-height: 1;
    letter-spacing: 0;
    color: var(--text-muted);
    transition: opacity 140ms ease;
  }

  .software-main .conviction-article-link:hover .conviction-link-cue,
  .software-main .conviction-article-link:focus-visible .conviction-link-cue {
    visibility: visible;
    opacity: 1;
  }

  .software-main .craft {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid transparent;
    border-image: linear-gradient(
      to right,
      rgba(217, 183, 58, 0) 0%,
      var(--line-soft) 14%,
      var(--line-soft) 86%,
      rgba(217, 183, 58, 0) 100%
    ) 1;
  }

  .software-main .craft-header {
    display: flex;
    align-items: baseline;
    gap: 1.375rem;
  }

  .software-main .craft-header h2 {
    margin-bottom: 0;
  }

  .software-main .craft-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 5rem;
    row-gap: 1.5rem;
  }

  .software-main .craft-links .conviction-tags {
    display: flex;
    width: fit-content;
    margin-top: 0.375rem;
    margin-left: 0;
  }
}

/* ==========================================================================
   Software, Anywhere and Community — one shared template

   Both mockups (mo-third-page.png, mo-fourth-page.png) use the same layout:
   a rail of chips, an opening paragraph, then numbered convictions with an
   oversized ghost numeral behind each heading. Software, Anywhere adds a Craft block
   at the end; Community does not.

   Both arrived in a different palette (#0E3A2B ground, #D9A521 gold) and a
   different typeface from the first two mockups. Taken as structure-and-copy
   specs, not visual ones, and rendered in the established palette and type:
   the portrait and the TYC logo are baked onto #08291F and would show a
   visible rectangle on any other ground, and #FFC000 measures 9.49:1 where
   the mockups' gold measures 5.64:1.
   ========================================================================== */


/* --- 3. highlights --- */

.rail-group { margin-top: clamp(2.5rem, 7vh, 4rem); }

.rail-group-label {
  margin: 0 0 1rem;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Where she has built. These are labels, not links — nothing to click
   through to. Rounded like the mockup, but with no hover or pointer, so the
   shape does not promise an interaction that isn't there. */
.chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.chip {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.7rem 0.75rem;
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--gold);
}

/* A qualifier under a chip's name — "(formerly ACT)". Her mockup sets it
   beside the name; at this rail width that leaves both cramped, so it sits
   underneath instead. */
.chip-note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* --- the opening statement --------------------------------------------
   Shared by Software, Anywhere and Community. The heading is optional: Software, Anywhere opens
   with "I build new things for a living."; Community opens with the paragraph
   alone and carries its <h1> visually hidden.
   ---------------------------------------------------------------------- */

.section-intro { padding-bottom: clamp(2rem, 5vh, 3rem); }

.section-intro h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  color: var(--gold);
  text-wrap: balance;
}

.section-intro p {
  margin: 0;
  max-width: 52ch;
  /* Gold, as both mockups have it. Her intro paragraph (#C9A83F) measures
     within 2% of her heading gold, so it is the same colour role — not a
     dimmed one. */
  color: var(--gold);
  font-size: 1.02rem;
}

/* --- the three convictions --------------------------------------------
   01 and 03 sit left, 02 sits right, each with an oversized ghost numeral
   behind the heading.
   ---------------------------------------------------------------------- */

.conviction {
  position: relative;
  padding-block: clamp(2.5rem, 7vh, 4.5rem);
  border-top: 1px solid var(--line-soft);
}

.conviction-num {
  position: absolute;
  top: clamp(1.5rem, 4vh, 3rem);
  left: 0;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(5rem, 13vw, 10rem);
  line-height: 0.8;
  color: var(--ghost);   /* 1.17:1 — matches the mockup's 1.16:1 */
  user-select: none;
}

.conviction h2,
.conviction-links { position: relative; z-index: 1; }

.conviction h2 {
  margin: 0 0 1.75rem;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  color: var(--gold);
  /* Both mockups carry every conviction heading in two lines, and the copy
     lengths differ a lot — "I build from the person." against "Heart picks
     the cause. Rigor keeps it honest.". Swept 16-26ch against both pages:
     18ch is the only value that gives two lines on all six. Narrower puts
     Community on three, wider collapses Software, Anywhere to one. Re-run that sweep if
     either page's headings change. */
  max-width: 18ch;
  text-wrap: balance;
}

.conviction-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  justify-items: start;
}
.conviction-links li {
  max-width: 46ch;
  /* Pale gold, sampled from the mockup — lighter and less saturated than the
     heading above, so the titles sit back from it rather than competing. */
  color: var(--gold-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  line-height: 1.4;
}

/* 02 mirrors to the right. */
.conviction--right { text-align: right; }
.conviction--right .conviction-num { left: auto; right: 0; }
.conviction--right h2 { margin-left: auto; }
.conviction--right .conviction-links { justify-items: end; }
.conviction--right .conviction-links li { margin-left: auto; }

/* --- craft ------------------------------------------------------------- */

.craft { padding-top: clamp(2.5rem, 7vh, 4.5rem); border-top: 1px solid var(--line-soft); }
.craft h2 { margin: 0 0 0.75rem; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--gold); }
.craft-note { margin: 0; font-style: italic; color: var(--text-body); max-width: 50ch; }
.software-main .craft-note { font-style: normal; color: var(--accent-dim); }
.software-main .craft-links {
  display: grid;
  gap: 1.125rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.software-main .craft-links li {
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-body);
  text-decoration: none;
}
.craft-pending { margin: 1.25rem 0 0; font-size: 0.9rem; color: var(--text-muted); }

/* ==========================================================================
   Dance & Theater

   Same rail and ground as the other sections; the body is productions rather
   than convictions. Sampled from mo-danceandtheate-page.png — every colour
   already existed: headings --gold, labels and credits --text-muted, the
   review pull-quotes --gold-bright (her #E8C76B is that token).
   ========================================================================== */

/* Standing in for photographs that have not been supplied yet. Deliberately
   plain and labelled, so it reads as "image pending" rather than as a design
   element. Delete .placeholder and drop in an <img> when the stills arrive. */
.placeholder {
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  background: var(--surface-green-raised);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Photo beside the heading, as the mockup has it. The supplied crop is square
   (999x999), so the slot is 1/1 rather than the mockup's 4/5 — forcing a
   square image into a 4:5 box would crop a fifth of its width back off, and
   that crop was chosen deliberately. */
.stage-intro {
  display: grid;
  grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
  padding-bottom: clamp(2rem, 5vh, 3rem);
}
.stage-intro .placeholder { aspect-ratio: 4 / 5; }
.stage-intro img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
}
.stage-intro h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  color: var(--gold);
  max-width: 18ch;
  text-wrap: balance;
}
.stage-intro p { margin: 0; max-width: 46ch; color: var(--gold); font-size: 1.02rem; }

/* Each major Stage band is separated by a hairline
   and introduced by a muted label, as on Software, Anywhere and Community. */
.stage-block {
  padding-block: clamp(2rem, 5vh, 3.25rem);
  border-top: 1px solid var(--line-soft);
}
.block-label {
  margin: 0 0 1.75rem;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- selected productions --- */

.production {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.production + .production { margin-top: clamp(2rem, 5vh, 3rem); }

/* Placeholders hold the mockup's 3:2. Real stills keep their own ratio — the
   press photos come in whatever shape the publication cropped them, and
   forcing a common box would crop performers out of ensemble shots. */
.production .placeholder { aspect-ratio: 3 / 2; }
.production-still { width: 100%; height: auto; border-radius: 3px; }

.production h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--gold);
}

/* Credit and source share --text-muted; the mockup dims the source slightly,
   which the brand doc has no token for, so the distinction is carried by
   size rather than by inventing a colour. */
.production-meta {
  margin: 0 0 0.35rem;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.production-source {
  margin: 0 0 1.1rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.stage-main .production-awards {
  display: block;
  margin-top: 0.375rem;
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--accent-dim);
}

.stage-main .production-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 0.25rem;
}

.stage-main .production-title-row h2 {
  margin: 0;
}

.stage-main .production-author {
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.stage-main .production-awards--featured {
  margin: 0 0 1.25rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.production-quote {
  margin: 0 0 0.75rem;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--gold-bright);
  max-width: 34ch;
}
.production-cite { margin: 0; font-size: 0.9rem; }
.production-cite a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.production-cite a:hover { color: var(--gold-bright); }

/* --- also adapted --- */

.adapted { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.adapted li { max-width: 60ch; color: var(--text-body); line-height: 1.5; }
.adapted strong { color: var(--gold); font-weight: 600; }
.adapted-more { margin: 1.25rem 0 0; font-style: italic; color: var(--text-muted); }

/* --- Dance & Theater desktop portfolio -------------------------------
   The shared section rail remains untouched. Stage-specific scope keeps the
   image-led portfolio and its compact editorial typography from leaking into
   the other section pages. */

.stage-main .stage-intro {
  display: block;
}

.stage-desktop-break {
  display: none;
}

.stage-main .stage-press-band {
  margin-top: 2rem;
}

.stage-main .stage-press-label {
  margin: 0 0 1rem;
}

.stage-main .stage-press-columns,
.stage-main .stage-press-column {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage-main .stage-press-item {
  margin: 0;
}

.stage-main .stage-press-item--multiple {
  display: grid;
  gap: 0.125rem;
}

.stage-main .stage-press-item--single {
  display: grid;
  gap: 0.125rem;
}

.stage-main .stage-press-articles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem;
}

.stage-main .stage-press-columns a {
  text-decoration: none;
}

.stage-main .stage-press-publication {
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stage-main .stage-press-articles a {
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-body);
}

.stage-main .stage-press-columns a:hover,
.stage-main .stage-press-columns a:focus-visible {
  color: var(--gold);
}

.stage-main .stage-press-cue {
  font-size: 0.625rem;
  letter-spacing: 0;
}

.stage-main > .stage-productions {
  margin-top: calc(clamp(3rem, 8vh, 5.5rem) - 8px);
  padding-top: calc(clamp(2rem, 5vh, 3.25rem) + 8px);
}

@media (min-width: 1024px) {
  .stage-main .stage-intro {
    padding-bottom: 0;
  }

  .stage-main .stage-intro h1 {
    font-size: clamp(1.53rem, 2.89vw, 2.465rem);
    max-width: none;
  }

  .stage-main .stage-intro p {
    max-width: 52ch;
  }

  .stage-main .stage-desktop-break {
    display: block;
  }

  .stage-main .stage-press-band {
    min-height: calc(
      clamp(2rem, 5vh, 3rem) +
      clamp(3rem, 8vh, 5.5rem) -
      8px +
      clamp(1.7136rem, 3.2368vw, 2.7608rem)
    );
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-content: start;
    align-items: baseline;
    column-gap: 2rem;
    margin-top: 0.625rem;
    padding-top: 0.875rem;
    padding-bottom: 0.25rem;
  }

  .stage-main .stage-press-label {
    margin: 0;
  }

  .stage-main .stage-press-columns {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    column-gap: 2.5rem;
  }

  .stage-main .stage-press-column--multiple {
    gap: 0.625rem;
  }

  .stage-main .stage-press-column--single {
    gap: 0.625rem;
  }

  .stage-main .stage-press-column {
    align-content: start;
  }

  .stage-main > .stage-productions {
    margin-top: 0;
    padding-bottom: 0;
  }

  .stage-main .stage-block {
    border-top: 1px solid transparent;
    border-image: linear-gradient(
      to right,
      rgba(217, 183, 58, 0) 0%,
      var(--line-soft) 14%,
      var(--line-soft) 86%,
      rgba(217, 183, 58, 0) 100%
    ) 1;
  }

  .stage-main .production-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    row-gap: clamp(3rem, 6vh, 4rem);
    align-items: start;
  }

  .stage-main .production {
    display: block;
    margin-top: 0;
  }

  .stage-main .production-still {
    width: 100%;
    height: auto;
  }

  .stage-main .production > div {
    margin-top: 0.625rem;
  }

  .stage-main .production h2 {
    font-size: clamp(1.125rem, 2.15vw, 1.75rem);
  }

  .stage-main .production-meta {
    font-size: 0.8125rem;
  }

  .stage-main .production-role {
    margin-bottom: 0.25rem;
  }

  .stage-main .production-venue {
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
  }

  .stage-main .production-source {
    font-size: 0.8125rem;
    margin-bottom: 1.25rem;
  }

  .stage-main .production-quote {
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-body);
  }

  .stage-main .production-cite {
    font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
  }

  .stage-main .production-cite a {
    text-decoration: none;
  }

  .stage-main .stage-other-works {
    padding-top: 1.5rem;
  }

  .stage-main .stage-other-works .block-label {
    margin-bottom: 0.75rem;
  }

  .stage-main .stage-other-works .adapted {
    gap: 0.4375rem; /* 7px */
  }

  .stage-main .stage-other-works .adapted li {
    max-width: none;
  }

  .stage-main .adapted-item--yours-mallika {
    white-space: nowrap;
  }

  .stage-main .stage-other-works .adapted-more {
    margin-top: 0.5rem; /* 8px */
  }

}

@media (min-width: 1180px) {
  .stage-main .stage-press-item--multiple {
    grid-template-columns: 10rem minmax(0, 1fr);
    align-items: baseline;
    column-gap: 1.25rem;
    row-gap: 0;
  }

  .stage-main .stage-press-item--single {
    grid-template-columns: 8.75rem minmax(0, 1fr);
    align-items: baseline;
    column-gap: 1rem;
    row-gap: 0;
  }
}

/* ========================================================================== 
   Speaking — talks, audiences and editorial closing

   All rules are scoped to the Speaking page. The rail and footer continue to
   use the shared section-page system.
   ========================================================================== */

.speaking-main {
  min-width: 0;
}

.speaking-main .speaking-hero {
  padding-bottom: clamp(2rem, 5vh, 3rem);
}

.speaking-main .speaking-hero h1 {
  max-width: 52ch;
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.53rem, 2.89vw, 2.465rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--gold);
  text-wrap: balance;
}

.speaking-main .speaking-hero p {
  max-width: 52ch;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--gold);
}

.speaking-main .speaking-hero .speaking-proof {
  max-width: 72ch;
  margin: 0.75rem 0 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--text-muted);
}

.speaking-main .speaking-section {
  margin: 0;
  padding-block: clamp(2rem, 5vh, 3.25rem);
}

.speaking-main .speaking-audiences,
.speaking-main .speaking-closing {
  border-top: 1px solid transparent;
  border-image: linear-gradient(
    to right,
    rgba(217, 183, 58, 0) 0%,
    var(--line-soft) 14%,
    var(--line-soft) 86%,
    rgba(217, 183, 58, 0) 100%
  ) 1;
}

.speaking-main .speaking-talk-grid {
  display: grid;
  gap: 0;
}

.speaking-main .speaking-talk-row {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.speaking-main .speaking-talk-row + .speaking-talk-row {
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid transparent;
  border-image: linear-gradient(
    to right,
    rgba(217, 183, 58, 0) 0%,
    var(--line-soft) 14%,
    var(--line-soft) 86%,
    rgba(217, 183, 58, 0) 100%
  ) 1;
}

.speaking-main .speaking-talk-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line-soft);
  background: transparent;
}

.speaking-main .speaking-talk-number {
  display: block;
  margin: 0 0 0.6875rem;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 4.4vw, 3.625rem);
  font-weight: 400;
  line-height: 0.8;
  color: var(--ghost);
}

.speaking-main .speaking-talk h3 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.7vw, 2.25rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--gold);
}

.speaking-main .speaking-talk-deck {
  margin: 0 0 0.75rem;
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted);
}

.speaking-main .speaking-talk-body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-body);
}

.speaking-main .speaking-audience-grid {
  display: grid;
  gap: 1.5rem;
}

.speaking-main .speaking-audience h3 {
  margin: 0 0 0.625rem;
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.speaking-main .speaking-audience p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-body);
}

.speaking-main .speaking-context {
  max-width: 70ch;
  margin: 2rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.speaking-main .speaking-closing > p {
  max-width: 28ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--gold);
}

.speaking-main .speaking-closing-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 1.25rem;
}

.speaking-main .speaking-closing-links a {
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
}

.speaking-main .speaking-closing-links a:hover,
.speaking-main .speaking-closing-links a:focus-visible {
  color: var(--gold);
}

@media (min-width: 1024px) {
  .speaking-main .speaking-talk-row {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  .speaking-main .speaking-audience-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 3rem;
  }
}

/* ========================================================================== 
   About — cross-disciplinary biography and speaking

   The shared section shell and configured rail do the structural work. These
   rules are intentionally page-scoped: speaking topics borrow the site's
   editorial language without inheriting the conviction system's mobile
   positioning or page-specific spacing.
   ========================================================================== */

.about-main {
  min-width: 0;
}

.about-main .about-hero {
  padding-bottom: clamp(2rem, 5vh, 3rem);
}

.about-main .about-hero h1 {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.53rem, 2.89vw, 2.465rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--gold);
  text-wrap: balance;
}

.about-main .about-hero p {
  max-width: 52ch;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--gold);
}

.about-main .about-hero p + p {
  margin-top: 1rem;
}

.about-main .about-hero strong {
  font-weight: 500;
}

.about-main .about-hero-cta a {
  color: var(--text-body);
}

.about-main .about-hero-cta a:hover,
.about-main .about-hero-cta a:focus-visible {
  color: var(--gold);
}

.about-desktop-break {
  display: none;
}

.about-main .about-section {
  margin: 0;
  padding-block: clamp(2rem, 5vh, 3.25rem);
  border-top: 1px solid transparent;
  border-image: linear-gradient(
    to right,
    rgba(217, 183, 58, 0) 0%,
    var(--line-soft) 14%,
    var(--line-soft) 86%,
    rgba(217, 183, 58, 0) 100%
  ) 1;
}

.about-main .about-speaking {
  border-image: none;
}

.about-main .about-speaking-grid {
  display: grid;
  gap: 2.5rem;
}

.about-main .about-topic {
  padding-top: 1rem;
  border-top: 1px solid transparent;
  border-image: linear-gradient(
    to right,
    rgba(217, 183, 58, 0) 0%,
    var(--line-soft) 14%,
    var(--line-soft) 86%,
    rgba(217, 183, 58, 0) 100%
  ) 1;
}

.about-main .about-topic-number {
  display: block;
  margin: 0 0 0.6875rem;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 4.4vw, 3.625rem);
  font-weight: 400;
  line-height: 0.8;
  color: var(--ghost);
}

.about-main .about-topic h3 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.7vw, 2.25rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--gold);
}

.about-main .about-topic p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-body);
}

.about-main .about-topic .about-topic-deck {
  margin: 0 0 0.75rem;
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted);
}

.about-main .about-notes {
  display: grid;
  gap: 1rem;
  max-width: 60ch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-main .about-notes li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 1rem;
}

.about-main .about-note-number {
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.about-main .about-notes p {
  max-width: 62ch;
  margin: 0;
  color: var(--text-body);
}

.about-main .about-closing p {
  max-width: 28ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--gold);
}

.about-main .about-closing-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

.about-main .about-closing-link {
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
}

.about-main .about-closing-links {
  margin-top: 1.25rem;
}

.about-main .about-closing-link {
  color: var(--text-muted);
}

.about-main .about-closing-link:hover,
.about-main .about-closing-link:focus-visible {
  color: var(--gold);
}

@media (min-width: 1024px) {
  .about-main .about-speaking > .block-label {
    font-size: 1.05rem;
  }

  .about-main .about-speaking-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 3rem;
  }

  .about-main .about-desktop-break {
    display: block;
  }
}

@media (min-width: 1024px) {
  .about-main .about-hero,
  .speaking-main .speaking-hero {
    padding-top: 0;
  }
}

/* ==========================================================================
   article page system

   Everything in this block is rooted in .article-page so the reading design
   cannot leak into the homepage, section pages or 404. Article pages use the
   article variant of <site-nav>; section pages keep their existing rail.
   ========================================================================== */

.article-page {
  --article-card: #2A2723;
  --article-title: #F1ECE1;
  --article-body: #E9E3D7;
  --article-muted: #9A9082;
  --article-kicker: #C9A86A;
  --article-back: #C9A83F;
  --article-menu: #124434;
  --article-sans: 'Montserrat', system-ui, sans-serif;
  --article-identity: 'Josefin Sans', 'Century Gothic', sans-serif;
  --article-title-font: 'Inter Tight', 'Inter', system-ui, sans-serif;

  min-height: 100vh;
  background: var(--surface-green);
}

/* Article-only header in the permanent green frame. */
.article-page .article-header {
  position: relative;
  z-index: 10;
  padding: 0;
  border-bottom: 1px solid rgba(217, 183, 58, 0.14);
}

.article-page .article-header-inner {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  min-height: 4.5rem;
  padding-inline: 2.5rem;
}

.article-page .article-header-left {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  min-width: 0;
}

.article-page .article-home-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--article-identity);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}

.article-page .article-home-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  color: var(--text-muted);
}

.article-page .article-home-lockup:hover,
.article-page .article-menu-toggle:hover { color: var(--gold-bright); }

.article-page .article-menu-control {
  position: relative;
  margin-left: auto;
  justify-self: end;
}

.article-page .article-menu-toggle {
  border: 0;
  padding: 0.6rem 0;
  background: transparent;
  font-family: var(--article-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--text-muted);
  cursor: pointer;
}

.article-page .article-menu-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: 15rem;
  padding: 1rem;
  background: var(--article-menu);
}

.article-page .article-menu-panel[hidden] { display: none; }

.article-page .article-menu-panel ul {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-page .article-menu-panel a {
  display: grid;
  grid-template-columns: 0.55rem 1fr;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  font-family: var(--article-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
}

.article-page .article-menu-panel a:hover { color: var(--gold-bright); }

.article-page .article-menu-dot {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: transparent;
}

.article-page .article-menu-panel .is-active a {
  color: var(--gold-bright);
}

.article-page .article-menu-panel .is-active .article-menu-dot {
  background: var(--gold-bright);
}

.article-page .article-frame {
  width: 100%;
  padding-block: 0;
}

.article-page .article-card {
  width: min(100%, 900px);
  margin-inline: auto;
  padding: 3rem 3.5rem 3.5rem;
  border-top: 2px solid var(--gold);
  background: var(--article-card);
}

.article-page .article-kicker {
  margin: 0 0 0.8rem;
  font-family: var(--article-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.15625rem;
  text-transform: uppercase;
  color: var(--article-kicker);
}

.article-page .article-title {
  margin: 0 0 1rem;
  font-family: var(--article-title-font);
  font-size: 1.5625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--article-title);
  text-wrap: balance;
}

.article-page .article-byline {
  margin: 0 0 1.65rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(217, 183, 58, 0.18);
  font-family: var(--article-sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--article-muted);
}

.article-page .article-deck {
  margin: 0 0 1.65rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(217, 183, 58, 0.18);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--article-muted);
}

.article-page .article-body {
  max-width: 760px;
  margin-inline: auto;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--article-body);
}

.article-page .article-body p {
  max-width: none;
  margin: 0 0 1.35rem;
}

.article-page .article-body p:last-child { margin-bottom: 0; }

.article-page .article-list-title {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.article-page .article-body li > p {
  margin: 0;
}

.article-page .article-body li + li {
  margin-top: 1rem;
}

.article-page .article-body h2 {
  margin: 2rem 0 0.8rem;
  font-family: var(--article-title-font);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  font-optical-sizing: auto;
  font-variation-settings: normal;
  color: var(--article-title);
}

.article-page .article-body a {
  color: var(--gold-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.article-page .article-body a:hover { color: var(--article-title); }

.article-page .article-parent-link {
  display: block;
  width: min(100%, 900px);
  margin: 0 auto 1.25rem;
  font-family: var(--article-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--article-back);
  text-decoration: none;
}

.article-page .article-parent-link:hover {
  color: var(--gold-bright);
}

@media (max-width: 700px) {
  .article-page .article-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      'left menu';
    gap: 0.65rem 1rem;
    min-height: 0;
    padding: 0.85rem 1rem 0.75rem;
  }

  .article-page .article-header-left {
    grid-area: left;
  }

  .article-page .article-home-lockup { font-size: 0.67rem; overflow: hidden; }
  .article-page .article-menu-control { grid-area: menu; }

  .article-page .article-menu-panel {
    position: fixed;
    top: 4.9rem;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }

  .article-page .article-card {
    width: calc(100% - 1.5rem);
    margin-left: 0.75rem;
    padding: 2rem 1.375rem 2.5rem;
  }

  .article-page .article-parent-link {
    width: calc(100% - 1.5rem);
    margin-inline: 0.75rem;
  }

  .article-page .article-title { font-size: 1.375rem; }

  .article-page .article-body { font-size: 1rem; }
}

/* ==========================================================================
   post page
   ========================================================================== */

article.post {
  width: min(100% - 3rem, 44rem);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vh, 3.5rem);
}

.kicker {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

article.post h1 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  margin: 0.75rem 0 1rem;
  color: var(--gold);
  text-wrap: balance;
}
article.post h2 { font-size: 1.75rem; margin: 2.75rem 0 0.75rem; }
article.post h3 { font-size: 1.3rem; margin: 2rem 0 0.5rem; }

.byline {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line-soft);
}

article.post p { max-width: var(--measure); }
article.post li { max-width: var(--measure); }

article.post blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent-dim);
  color: var(--text-body);
  font-style: italic;
}

.pullquote {
  margin: 2.75rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  color: var(--gold);
  border: none;
  padding: 0;
  font-style: normal;
  text-wrap: balance;
}

.post-hero, .post-figure { margin: 2.5rem 0; }
.post-hero img, .post-figure img { width: 100%; }
.post-hero figcaption, .post-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

article.post hr { border: none; border-top: 1px solid var(--line-soft); }

/* --- code ------------------------------------------------------------- */

article.post code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--surface-green-raised);
  border: 1px solid var(--line-soft);
  padding: 0.1em 0.35em;
}

article.post pre {
  position: relative;
  overflow-x: auto;
  padding: 1.15rem 1.25rem;
  margin: 1.75rem 0;
  font-size: 0.88rem;
  line-height: 1.55;
}
article.post pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-green);
  border: 1px solid var(--line-soft);
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, color 140ms ease;
}
article.post pre:hover .copy-btn,
.copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { color: var(--gold); }

/* ==========================================================================
   404
   ========================================================================== */

.notfound { padding: clamp(3rem, 12vh, 7rem) 0; max-width: var(--measure); }
.notfound h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--gold); margin: 0 0 1.5rem; }
.onward { margin-top: 2.5rem; }
.onward .primary {
  font-family: var(--font-label);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.onward .also { margin-top: 1rem; color: var(--text-muted); font-size: 0.9rem; }

/* ==========================================================================
   narrow screens
   ========================================================================== */

@media (max-width: 860px) {
  .home {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 2.5rem;
    padding-block: 2rem 3rem;
  }
  /* Held well back: at 320px the portrait filled the whole first screen and
     pushed the four entry points — the actual point of the page — below the
     fold on a phone. */
  .portrait {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 1.25rem;
    align-items: center;
    max-width: none;
  }
  /* Two items in one row now that the blurb is gone — no row span. */
  .portrait { grid-template-columns: 108px 1fr; }
  .portrait-photo { grid-row: auto; }
  /* "Mo Bhattacharya" stays on one line here too, so the tracking and size
     come down and the photo narrows to make room. Measured at 390px: the
     name renders 176px inside a 210px column. */
  .portrait-name {
    margin-top: 0;
    white-space: nowrap;
    font-size: clamp(0.88rem, 3.4vw, 1.2rem);
    letter-spacing: 0.12em;
  }

  .quadrant { min-height: 340px; }
  .quad { padding: 1.25rem 0.75rem; }

  /* Stage: image beside text is too cramped on a phone — stack, and cap the
     placeholder so it does not swallow the screen. */
  .stage-intro, .production { grid-template-columns: 1fr; gap: 1.25rem; }
  .stage-intro img { max-width: 200px; }
  footer { margin-top: 3rem; }

  /* The rail becomes a header strip: a vertical hairline down a 150px column
     makes no sense on a phone, so it turns into a rule underneath. */
  .section-page { grid-template-columns: 1fr; gap: 2rem; min-height: 0; }
  .section-page > .rail {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
    padding-right: 0;
    padding-bottom: 1.5rem;
  }
  .section-page > .rail::after { content: none; }
  /* Sections run across instead of down. Flex with wrapping, not grid
     columns — four labels do not fit one 390px row and were overflowing. */
  .section-page .rail-links {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.1rem;
  }
  .section-page .rail-links a { font-size: 0.88rem; }
  .section-page .rail-anchor-area {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   syntax highlighting — Pygments, gruvbox-dark

   Regenerate with:
     python3 -c "from pygments.formatters import HtmlFormatter; \
       print(HtmlFormatter(style='gruvbox-dark').get_style_defs( \
       'article.post .codehilite'))"

   The theme ships its own hardcoded #282828 background. On this green
   ground that reads as a grey foreign object, so the background is
   overridden below to the lifted surface and given a border — without
   one the block loses its edge against the page.
   ========================================================================== */

article.post .codehilite {
  background: var(--surface-green-raised);
  border: 1px solid var(--line-soft);
  margin: 1.75rem 0;
}
article.post .codehilite pre { margin: 0; background: none; }

article.post .codehilite .hll { background-color: #ebdbb2 }
article.post .codehilite .c { color: #928374; font-style: italic } /* Comment */
article.post .codehilite .err { color: #282828; background-color: #fb4934 } /* Error */
article.post .codehilite .esc { color: #dddddd } /* Escape */
article.post .codehilite .g { color: #dddddd } /* Generic */
article.post .codehilite .k { color: #fb4934 } /* Keyword */
article.post .codehilite .l { color: #dddddd } /* Literal */
article.post .codehilite .n { color: #dddddd } /* Name */
article.post .codehilite .o { color: #dddddd } /* Operator */
article.post .codehilite .x { color: #dddddd } /* Other */
article.post .codehilite .p { color: #dddddd } /* Punctuation */
article.post .codehilite .ch { color: #928374; font-style: italic } /* Comment.Hashbang */
article.post .codehilite .cm { color: #928374; font-style: italic } /* Comment.Multiline */
article.post .codehilite .c-PreProc { color: #8ec07c; font-style: italic } /* Comment.PreProc */
article.post .codehilite .cp { color: #928374; font-style: italic } /* Comment.Preproc */
article.post .codehilite .cpf { color: #928374; font-style: italic } /* Comment.PreprocFile */
article.post .codehilite .c1 { color: #928374; font-style: italic } /* Comment.Single */
article.post .codehilite .cs { color: #928374; font-style: italic } /* Comment.Special */
article.post .codehilite .gd { color: #282828; background-color: #fb4934 } /* Generic.Deleted */
article.post .codehilite .ge { color: #83a598; text-decoration: underline } /* Generic.Emph */
article.post .codehilite .gr { color: #ebdbb2; font-weight: bold; background-color: #fb4934 } /* Generic.Error */
article.post .codehilite .gh { color: #b8bb26; font-weight: bold } /* Generic.Heading */
article.post .codehilite .gi { color: #282828; background-color: #b8bb26 } /* Generic.Inserted */
article.post .codehilite .go { color: #504945 } /* Generic.Output */
article.post .codehilite .gp { color: #ebdbb2 } /* Generic.Prompt */
article.post .codehilite .gs { color: #ebdbb2 } /* Generic.Strong */
article.post .codehilite .gu { color: #b8bb26; font-weight: bold } /* Generic.Subheading */
article.post .codehilite .gt { color: #ebdbb2 } /* Generic.Traceback */
article.post .codehilite .kc { color: #fb4934 } /* Keyword.Constant */
article.post .codehilite .kd { color: #fb4934 } /* Keyword.Declaration */
article.post .codehilite .kn { color: #fb4934 } /* Keyword.Namespace */
article.post .codehilite .kp { color: #fb4934 } /* Keyword.Pseudo */
article.post .codehilite .kr { color: #fb4934 } /* Keyword.Reserved */
article.post .codehilite .kt { color: #fabd2f } /* Keyword.Type */
article.post .codehilite .ld { color: #dddddd } /* Literal.Date */
article.post .codehilite .m { color: #d3869b } /* Literal.Number */
article.post .codehilite .s { color: #b8bb26 } /* Literal.String */
article.post .codehilite .na { color: #fabd2f } /* Name.Attribute */
article.post .codehilite .nb { color: #fabd2f } /* Name.Builtin */
article.post .codehilite .nc { color: #dddddd } /* Name.Class */
article.post .codehilite .no { color: #d3869b } /* Name.Constant */
article.post .codehilite .nd { color: #dddddd } /* Name.Decorator */
article.post .codehilite .ni { color: #dddddd } /* Name.Entity */
article.post .codehilite .ne { color: #dddddd } /* Name.Exception */
article.post .codehilite .nf { color: #b8bb26; font-weight: bold } /* Name.Function */
article.post .codehilite .nl { color: #dddddd } /* Name.Label */
article.post .codehilite .nn { color: #dddddd } /* Name.Namespace */
article.post .codehilite .nx { color: #dddddd } /* Name.Other */
article.post .codehilite .py { color: #dddddd } /* Name.Property */
article.post .codehilite .nt { color: #8ec07c } /* Name.Tag */
article.post .codehilite .nv { color: #83a598 } /* Name.Variable */
article.post .codehilite .ow { color: #fb4934 } /* Operator.Word */
article.post .codehilite .pm { color: #dddddd } /* Punctuation.Marker */
article.post .codehilite .w { color: #dddddd } /* Text.Whitespace */
article.post .codehilite .mb { color: #d3869b } /* Literal.Number.Bin */
article.post .codehilite .mf { color: #d3869b } /* Literal.Number.Float */
article.post .codehilite .mh { color: #d3869b } /* Literal.Number.Hex */
article.post .codehilite .mi { color: #d3869b } /* Literal.Number.Integer */
article.post .codehilite .mo { color: #d3869b } /* Literal.Number.Oct */
article.post .codehilite .sa { color: #b8bb26 } /* Literal.String.Affix */
article.post .codehilite .sb { color: #b8bb26 } /* Literal.String.Backtick */
article.post .codehilite .sc { color: #b8bb26 } /* Literal.String.Char */
article.post .codehilite .dl { color: #b8bb26 } /* Literal.String.Delimiter */
article.post .codehilite .sd { color: #b8bb26 } /* Literal.String.Doc */
article.post .codehilite .s2 { color: #b8bb26 } /* Literal.String.Double */
article.post .codehilite .se { color: #b8bb26 } /* Literal.String.Escape */
article.post .codehilite .sh { color: #b8bb26 } /* Literal.String.Heredoc */
article.post .codehilite .si { color: #b8bb26 } /* Literal.String.Interpol */
article.post .codehilite .sx { color: #b8bb26 } /* Literal.String.Other */
article.post .codehilite .sr { color: #b8bb26 } /* Literal.String.Regex */
article.post .codehilite .s1 { color: #b8bb26 } /* Literal.String.Single */
article.post .codehilite .ss { color: #b8bb26 } /* Literal.String.Symbol */
article.post .codehilite .bp { color: #fabd2f } /* Name.Builtin.Pseudo */
article.post .codehilite .fm { color: #b8bb26; font-weight: bold } /* Name.Function.Magic */
article.post .codehilite .vc { color: #83a598 } /* Name.Variable.Class */
article.post .codehilite .vg { color: #83a598 } /* Name.Variable.Global */
article.post .codehilite .vi { color: #83a598 } /* Name.Variable.Instance */
article.post .codehilite .vm { color: #83a598 } /* Name.Variable.Magic */
article.post .codehilite .il { color: #d3869b } /* Literal.Number.Integer.Long */