/* ==========================================================================
   AN AUSTRIAN ECONOMIST — V2 Revamp
   Layered on top of journal.css. Adds vintage broadsheet density:
   warmer paper, deeper gold, real noise texture, new components for the
   front page broadsheet block, folio archive, workshop apps, and essay covers.
   ========================================================================== */

/* ---------------------------------------------------------------
   1. Token nudges — warmer palette, plus new paper/ink shades
   --------------------------------------------------------------- */
:root {
  --paper:        #ECE0BD;
  --paper-deep:   #DCCD9C;
  --paper-edge:   #C9B888;
  --paper-line:   #B49C66;

  --ink:          #1B1409;
  --ink-2:        #3A2D18;
  --ink-3:        #6B5A3E;
  --ink-4:        #9C8B6A;

  --gold:         #94691A;
  --gold-deep:    #6E4D0F;
  --gold-bright:  #B6852A;
  --oxblood:      #6B2A22;

  --serif-text:   'Lora', 'Times New Roman', Georgia, serif;
  --script:       'Pinyon Script', 'Allura', cursive;
}

/* Aged-newsprint texture, applied at body level so every page picks it up */
body {
  background-color: var(--paper);
  background-image:
    /* corner toning — opacities halved from original to dim the seam at gradient boundaries */
    radial-gradient(ellipse at 4% 6%,  rgba(70,45,18,0.05) 0%, transparent 40%),
    radial-gradient(ellipse at 96% 92%, rgba(70,45,18,0.045) 0%, transparent 42%),
    radial-gradient(ellipse at 90% 8%, rgba(70,45,18,0.03) 0%, transparent 28%),
    radial-gradient(ellipse at 10% 94%, rgba(70,45,18,0.035) 0%, transparent 28%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600' viewBox='0 0 1600 1600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.10  0 0 0 0 0.04  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2400' height='2400' viewBox='0 0 2400 2400'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.013' numOctaves='2' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0.34  0 0 0 0 0.22  0 0 0 0 0.08  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23b)'/></svg>");
  background-size: auto, auto, auto, auto, 1600px 1600px, 2400px 2400px;
  background-blend-mode: multiply, multiply, multiply, multiply, normal, multiply;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
}

/* Let masthead, hero band, and footer inherit the body's textured paper —
   override the flat var(--paper) backgrounds set in journal.css so the page
   reads as one continuous sheet of paper. */
.masthead,
.hero-band,
.footer { background: transparent; }

/* Equalize the hero band so the carousel plate sits vertically centered
   between the masthead's bottom rule and the hero band's bottom rule. */
.front--hero { padding: 32px 0; }

/* ---------------------------------------------------------------
   2. Front page — broadsheet section under the hero carousel
   --------------------------------------------------------------- */

/* Section heading: title left, hairline rule, link right; double rule beneath */
.bs-secthead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 24px;
  margin: 0 0 22px;
  padding-bottom: 10px;
  border-bottom: 4px double var(--ink);
}
.bs-secthead__l {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.01em;
}
.bs-secthead__l em {
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.bs-secthead__rule {
  height: 1px;
  background: var(--ink);
  opacity: .3;
  align-self: center;
}
.bs-secthead__r {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  white-space: nowrap;
}
.bs-secthead__r:hover { color: var(--gold); border-color: var(--gold-bright); }

/* Lede + Recent column grid */
.bs-grid {
  display: grid;
  grid-template-columns: 2fr 1px 1fr;
  gap: 28px;
  padding: 0;
}
.bs-rule {
  background: var(--ink);
  opacity: .22;
  width: 1px;
}

.bs-lede__cat {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--paper-line);
}
.bs-lede__cat span:first-child { color: var(--gold-deep); }
.bs-lede__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1;
  letter-spacing: -0.022em;
  margin-bottom: 12px;
  text-wrap: balance;
}
.bs-lede__title em {
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.bs-lede__title a { color: inherit; transition: color .15s; }
.bs-lede__title a:hover { color: var(--gold-deep); }
.bs-lede__deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.4;
  color: var(--ink-2);
  margin-bottom: 14px;
  max-width: 60ch;
  text-wrap: pretty;
}
.bs-lede__byline {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--paper-line);
}
.bs-lede__byline em {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: .02em;
  font-size: 13px;
  color: var(--gold-deep);
}
.bs-lede__cols {
  column-count: 2;
  column-gap: 28px;
  column-rule: 1px solid var(--paper-line);
  column-fill: balance;
  font-family: var(--serif-text);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink);
  text-align: justify;
  hyphens: auto;
}
.bs-lede__cols p { margin-bottom: 12px; text-wrap: pretty; }
.bs-lede__cols p:first-child::first-letter {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 64px;
  float: left;
  line-height: .82;
  padding: 4px 8px 0 0;
  color: var(--gold-deep);
}
.bs-lede__cont {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--paper-line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.bs-lede__cont a {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}
.bs-lede__cont a:hover { color: var(--gold); border-color: var(--gold-bright); }

/* Recent column */
.bs-recent__head {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.005em;
  padding-bottom: 10px;
  margin-bottom: 0;
  border-bottom: 2px solid var(--ink);
}
.bs-recent__head em {
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.bs-recent__item {
  padding: 18px 0 16px;
  border-bottom: 1px dotted var(--paper-line);
}
.bs-recent__item:last-child { border-bottom: 0; padding-bottom: 0; }
.bs-recent__item + .bs-recent__item { padding-top: 18px; }
.bs-recent__meta { margin-bottom: 6px; }
.bs-recent__title { margin-bottom: 6px; }
.bs-recent__meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.bs-recent__meta .cat { color: var(--gold-deep); }
.bs-recent__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  text-wrap: balance;
}
.bs-recent__title a { color: inherit; transition: color .15s; }
.bs-recent__title a:hover { color: var(--gold-deep); }
.bs-recent__deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Clean instrument strip (no inner background, hairline top/bottom) */
.bs-instrument-clean {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 28px 8px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  position: relative;
}
.bs-instrument-clean::before,
.bs-instrument-clean::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  opacity: .25;
}
.bs-instrument-clean::before { top: 4px; }
.bs-instrument-clean::after  { bottom: 4px; }
.bs-instrument-clean__body { max-width: 64ch; }
.bs-instrument-clean__kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.bs-instrument-clean__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 34px);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  line-height: 1.1;
}
.bs-instrument-clean__desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.bs-instrument-clean__cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  display: inline-block;
}
.bs-instrument-clean__cta:hover { color: var(--gold); border-color: var(--gold-bright); }
.bs-instrument-clean__seal { width: 140px; height: 140px; flex-shrink: 0; }
.bs-instrument-clean__seal svg {
  animation: bs-sealspin 40s linear infinite;
  transform-origin: 50% 50%;
}
.bs-instrument-clean__seal svg > text[text-anchor="middle"] {
  animation: bs-sealspin-rev 40s linear infinite;
  transform-origin: 70px 70px;
}
@keyframes bs-sealspin     { to { transform: rotate(360deg); } }
@keyframes bs-sealspin-rev { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bs-instrument-clean__seal svg,
  .bs-instrument-clean__seal svg > text[text-anchor="middle"] { animation: none; }
}

/* ---------------------------------------------------------------
   3. Essays archive — folio v2 (all-black titles)
   --------------------------------------------------------------- */
.archive-head {
  padding: 22px 32px 18px;
  text-align: center;
  border-bottom: 1px solid var(--ink);
  position: relative;
}
.archive-head__orn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.archive-head__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin-bottom: 8px;
  color: var(--ink);
}
.archive-head__title em {
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 500;
}
.archive-head__sub {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-3);
  max-width: 58ch;
  margin: 0 auto;
  line-height: 1.55;
}
.archive-head__orn .rule {
  width: 60px; height: 1px;
  background: var(--ink); opacity: .5;
}
.archive-head__orn .mark {
  font-family: var(--serif);
  color: var(--gold-deep);
  font-size: 18px;
}

/* Department-index filter — dot-separated mono caps with an italic
   "Filter by" label anchoring the row as a control. Active item is gold
   with a hairline underline; hover gets a dotted underline to signal
   that the chips are interactive. */
.archive-filters {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0;
  padding: 14px 24px 12px;
  border-bottom: 1px solid var(--ink);
  flex-wrap: wrap;
  position: relative;
}
.archive-filters__label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
  margin-right: 14px;
  padding-right: 16px;
  border-right: 1px solid var(--paper-line);
  align-self: center;
  line-height: 1;
}
.archive-filters__chip {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: 4px 16px;
  color: var(--ink-3);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: color .15s, text-decoration-color .15s;
  position: relative;
  text-decoration: underline dotted transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
/* Mid-dot separator between chips (not before the first chip) */
.archive-filters__chip + .archive-filters__chip::before {
  content: '·';
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  opacity: .55;
  font-size: 14px;
  letter-spacing: 0;
  pointer-events: none;
}
.archive-filters__chip:hover {
  color: var(--ink);
  text-decoration-color: var(--ink-4);
}
.archive-filters__chip[aria-pressed="true"] {
  color: var(--gold-deep);
  text-decoration: underline solid var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.archive-filters__chip[aria-pressed="true"]:hover {
  color: var(--gold);
  text-decoration-color: var(--gold-bright);
}

@media (max-width: 600px) {
  .archive-filters__label {
    flex-basis: 100%;
    text-align: center;
    border-right: 0;
    padding-right: 0;
    margin-right: 0;
    margin-bottom: 8px;
  }
}

.folio-list {
  padding: 4px 32px 32px;
  max-width: 880px;
  margin: 0 auto;
}

/* Folio v2 — single-column, book-chapter rhythm.
   Small italic gold "Essay I" folio mark at top, single inline metadata
   line, then title, deck, and a subtle CTA footer. No giant date numeral. */
.folio-v2 {
  padding: 22px 0;
}
.folio-v2__folio {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.folio-v2__folio em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-deep);
  margin-left: 8px;
  vertical-align: -1px;
}
.folio-v2__cat {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--paper-line);
}
.folio-v2__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin-bottom: 10px;
  text-wrap: balance;
  color: var(--ink);
}
.folio-v2__title a { color: var(--ink); transition: color .15s; }
.folio-v2__title a:hover { color: var(--gold-deep); }
.folio-v2__deck {
  font-family: var(--serif-text);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 12px;
  max-width: 68ch;
  text-wrap: pretty;
}
.folio-v2__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}
.folio-v2__cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.folio-v2__cta:hover { color: var(--gold); border-color: var(--gold-bright); }
.folio-v2__pubinfo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-3);
  letter-spacing: 0;
  text-transform: none;
}
.folio-v2__pubinfo .dot {
  color: var(--gold);
  margin: 0 6px;
  font-style: normal;
}

.folio-divider {
  text-align: center;
  padding: 4px 0;
  position: relative;
}
.folio-divider::before,
.folio-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 24px);
  height: 1px;
  background: var(--paper-line);
}
.folio-divider::before { left: 0; }
.folio-divider::after  { right: 0; }
.folio-divider span {
  color: var(--gold-deep);
  font-size: 13px;
  position: relative;
  z-index: 1;
  padding: 0 10px;
  background: transparent;
}

/* ---------------------------------------------------------------
   4a. About — page rhythm.
       Restore horizontal gutter (the legacy .about-grid rule wipes
       out .wrap's 0/24px padding) and tighten the vertical rhythm
       to match the rest of the V2 broadsheet pages.
   --------------------------------------------------------------- */
.about-grid {
  padding: 28px 24px 40px;
  gap: 16px 56px;
  grid-template-areas:
    "left intro"
    "left bio";
  grid-template-rows: auto 1fr;
}
.about-intro { grid-area: intro; }
.about-col-left { grid-area: left; padding-right: 28px; }
.about-bio { grid-area: bio; }
.about-bio h1,
.about-intro h1 {
  font-size: clamp(34px, 4vw, 48px);
  margin-bottom: 14px;
}
.about-bio .about-kicker,
.about-intro .about-kicker {
  margin-bottom: 12px;
}
.about-bio p {
  font-size: 17.5px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.about-bio__elsewhere-h {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 28px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--paper-line);
}
.about-bio__elsewhere-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .about-bio h1 { font-size: clamp(30px, 7vw, 40px); }
  .about-bio p { font-size: 16.5px; line-height: 1.6; margin-bottom: 12px; }
}

/* ---------------------------------------------------------------
   4. About — stacked précis under the portrait.
       Mono caps label as a small eyebrow, big upright Playfair value
       below, dotted hairline between pairs, no outer container.
       Polished by an opening hairline rule and a small gold accent
       bar on the closing credo so it reads as the motto, not just
       another row.
   --------------------------------------------------------------- */
.about-table {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--paper-line);
  background: transparent;
}
.about-table dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.about-table dd {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px dotted var(--paper-line);
}
.about-table dd:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Tablet & mobile: stack as intro (kicker + name) → portrait beside
   précis → bio paragraphs. The side-by-side picture+table inside
   .about-col-left keeps vertical footprint compact. */
@media (max-width: 940px) {
  .about-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 22px 24px 36px;
    grid-template-areas: none;
  }
  .about-intro { order: 1; text-align: center; margin-bottom: 0; }
  .about-col-left {
    order: 2;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    padding-right: 0;
    border-right: 0;
    display: grid;
    grid-template-columns: minmax(140px, 44%) 1fr;
    gap: 32px;
    align-items: center;
  }
  .about-col-left .about-portrait { margin-bottom: 0; }
  .about-col-left .about-table {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .about-col-left .about-table dd {
    font-size: 18px;
    margin-bottom: 12px;
    padding-bottom: 12px;
  }
  .about-bio { order: 3; }
}
@media (max-width: 600px) {
  .about-grid { padding: 18px 20px 32px; gap: 20px; }
  .about-col-left { max-width: 440px; gap: 24px; }
  .about-col-left .about-table dd { font-size: 16px; }
}

/* ---------------------------------------------------------------
   5. Apps Index — The Workshop
       Quiet chapter-divider header, no card backgrounds, vertical
       hairline rule between two centered "feature" columns.
   --------------------------------------------------------------- */
.apps-orig__head {
  max-width: 880px;
  margin: 0 auto;
  padding: 22px 32px 18px;
  text-align: center;
  border-bottom: 1px solid var(--ink);
}
.apps-orig__orn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.apps-orig__orn .rule { width: 64px; height: 1px; background: var(--gold); opacity: .55; }
.apps-orig__orn .mark { color: var(--gold-deep); font-size: 18px; }

.apps-orig__h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin-bottom: 8px;
  color: var(--ink);
}
.apps-orig__h em {
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 500;
}
.apps-orig__sub {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-3);
  max-width: 58ch;
  margin: 0 auto;
  line-height: 1.55;
}

/* Two-column feature grid — each cell framed as an engraved plate
   (hairline ink border + inset gold rule), background transparent so
   the textured paper shows through. */
.apps-orig__grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 32px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.apps-orig__cell {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 28px 32px;
  background: transparent;
  border: 1px solid var(--ink);
  box-shadow: none;
}
.apps-orig__cell::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(110, 77, 15, 0.4);
  pointer-events: none;
}
.apps-orig__cell--coming::before { border-color: rgba(110, 77, 15, 0.28); }

.apps-orig__seal {
  width: 84px;
  height: 84px;
  margin: 0 0 20px;
}
.apps-orig__seal--ghost { opacity: .65; }

.apps-orig__head-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1.4;
}
.apps-orig__status--avail {
  color: var(--gold-deep);
}
.apps-orig__status--coming {
  color: var(--ink-3);
  font-style: italic;
  font-family: var(--serif);
  font-size: 13px;
  text-transform: none;
  letter-spacing: .04em;
}
.apps-orig__sep {
  color: var(--gold);
  opacity: .55;
  font-size: 11px;
  letter-spacing: 0;
}
.apps-orig__cat { color: var(--ink-3); }

.apps-orig__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin-bottom: 12px;
  text-wrap: balance;
}
.apps-orig__title em {
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.apps-orig__desc {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 22px;
  max-width: 46ch;
  text-wrap: pretty;
  flex: 1;
}
.apps-orig__cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  display: inline-block;
  margin-top: auto;
  transition: color .15s, border-color .15s;
}
.apps-orig__cta:hover { color: var(--gold); border-color: var(--gold-bright); }
.apps-orig__cta span { color: var(--gold-deep); margin-left: 6px; }
.apps-orig__cta--disabled {
  border-color: var(--ink-4);
  color: var(--ink-3);
  pointer-events: none;
}

/* Title-as-link: the title text is itself a link to the app, so the
   user can click either the title or the CTA below. Hover deepens to
   gold to signal interactivity. */
.apps-orig__title a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.apps-orig__title a:hover { color: var(--gold-deep); }
.apps-orig__title a:hover em { color: var(--gold); }

/* ---------------------------------------------------------------
   6. Essay Cover — frontispiece for all three essays
   --------------------------------------------------------------- */
.cover-orig {
  text-align: center;
  padding: 48px 32px 48px;
  border-bottom: 1px solid var(--paper-line);
}
.cover-orig__inner { max-width: 880px; margin: 0 auto; }
.cover-orig__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 28px;
}
.cover-orig__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(48px, 6.5vw, 88px);
  line-height: .96;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  text-wrap: balance;
}
.cover-orig__title em {
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.cover-orig__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto 36px;
  text-wrap: balance;
}
.cover-orig__meta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 28px;
}
.cover-orig__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}
.cover-orig__attr {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.7;
}
.cover-orig__attr strong {
  color: var(--ink);
  font-weight: 700;
  font-style: normal;
}

/* ---------------------------------------------------------------
   7. Essay Body V2 — applies to Deflation + What is Money
       (Coin Cannon Code keeps its existing essay.css)
   --------------------------------------------------------------- */
.essay-body-v2 {
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 32px 48px;
  font-family: var(--serif-text);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
}
.essay-body-v2 > p,
.essay-body-v2 > h2,
.essay-body-v2 > h3,
.essay-body-v2 > blockquote,
.essay-body-v2 > aside,
.essay-body-v2 > figure { max-width: 680px; margin-left: auto; margin-right: auto; }
.essay-body-v2 > p {
  margin-bottom: 22px;
  text-wrap: pretty;
}
.essay-body-v2 > p em { font-style: italic; }
.essay-body-v2 > p:first-child::first-letter {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 78px;
  float: left;
  line-height: .82;
  padding: 6px 12px 0 0;
  color: var(--gold-deep);
}
.essay-body-v2 > h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 56px 0 20px;
  text-wrap: balance;
  color: var(--ink);
}
.essay-body-v2 > h2 em { font-style: italic; color: var(--gold-deep); font-weight: 400; }
.essay-body-v2 > h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  margin: 36px 0 14px;
  color: var(--ink);
}
.essay-body-v2 > blockquote {
  margin: 28px auto;
  padding: 4px 0 4px 28px;
  border-left: 3px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.essay-body-v2 > blockquote p { margin-bottom: 10px; }
.essay-body-v2 > blockquote p:last-child { margin-bottom: 0; }
.essay-body-v2 > blockquote cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 10px;
}
.essay-body-v2 > aside.pull {
  margin: 36px auto;
  padding: 24px 28px;
  border-top: 4px double var(--ink);
  border-bottom: 4px double var(--ink);
  background: transparent;
  text-align: center;
}
.essay-body-v2 > aside.pull p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

.essay-body-v2 a {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}
.essay-body-v2 a:hover { color: var(--gold); }

/* Footer of v2 essay (back link) */
.essay-footer-v2 {
  max-width: 680px;
  margin: 24px auto 0;
  padding: 20px 32px 32px;
  border-top: 1px solid var(--paper-line);
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.essay-footer-v2 a {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.essay-footer-v2 a:hover { color: var(--gold); border-color: var(--gold-bright); }

/* On V2 essay pages, match gap above the rule (text→rule ≈ 94px) and below the back-link (link→footer border) */
main:has(.essay-footer-v2) + .footer { margin-top: 62px; }

/* ---------------------------------------------------------------
   8. Page-load motion — subtle ink-settling fade + small upward drift.
      Matches V1 cadence with V2 class selectors.
   --------------------------------------------------------------- */
@keyframes v2-pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v2-riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

main { animation: v2-pageIn .5s ease-out both; }

/* Staggered rise for repeated content blocks across V2 pages */
.bs-lede,
.bs-recent__item,
.bs-instrument-clean,
.folio-v2,
.folio-divider,
.apps-orig__cell,
.cover-orig,
.essay-body-v2 > * {
  animation: v2-riseIn .55s ease-out both;
}

/* Delay stagger so blocks settle one after another */
.bs-lede                     { animation-delay: .06s; }
.bs-recent__item:nth-child(1){ animation-delay: .12s; }
.bs-recent__item:nth-child(2){ animation-delay: .20s; }
.bs-instrument-clean         { animation-delay: .14s; }

.folio-v2:nth-of-type(1)     { animation-delay: .08s; }
.folio-v2:nth-of-type(2)     { animation-delay: .18s; }
.folio-v2:nth-of-type(3)     { animation-delay: .28s; }
.folio-divider:nth-of-type(1){ animation-delay: .14s; }
.folio-divider:nth-of-type(2){ animation-delay: .24s; }

.apps-orig__cell:nth-child(1){ animation-delay: .10s; }
.apps-orig__cell:nth-child(2){ animation-delay: .20s; }

.essay-body-v2 > p:nth-child(1) { animation-delay: .08s; }
.essay-body-v2 > p:nth-child(2) { animation-delay: .14s; }
.essay-body-v2 > h2:first-of-type { animation-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
  main,
  .bs-lede,
  .bs-recent__item,
  .bs-instrument-clean,
  .folio-v2,
  .folio-divider,
  .apps-orig__cell,
  .cover-orig,
  .essay-body-v2 > * {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------
   9. Responsive breakpoints
   --------------------------------------------------------------- */
/* Lede + Recent rail collapses below 940px. At 768-880 the two columns of
   the lede body squeeze to ~211-250px each, producing rivers in the
   justified text and cramping the right rail. Above 940 the broadsheet
   2-col stays. */
@media (max-width: 940px) {
  .bs-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 0; }
  .bs-rule { display: none; }
  .bs-lede__cols { column-count: 1; column-rule: none; }
  .bs-recent__head { margin-top: 8px; }
}
@media (max-width: 880px) {
  .bs-instrument-clean { grid-template-columns: 1fr; gap: 24px; padding: 28px 8px; }
  .bs-instrument-clean__seal { margin: 16px auto 0; width: 110px; height: 110px; order: 2; }
  .bs-instrument-clean__body { order: 1; }

  .folio-v2 { padding: 22px 0; }
  .folio-list { padding: 8px 24px 32px; }

  /* Apps grid collapses to one column; cells stack with their own borders */
  .apps-orig__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 24px 48px;
  }
}

/* Tablet & mobile — restore some breath inside the recent rail */
@media (max-width: 880px) {
  .bs-recent__item { padding: 22px 0 18px; }
  .bs-recent__item + .bs-recent__item { padding-top: 22px; }
  .bs-recent__meta { margin-bottom: 8px; }
  .bs-recent__title { margin-bottom: 8px; }
}

@media (max-width: 600px) {
  .bs-secthead { gap: 12px; grid-template-columns: 1fr auto; padding-bottom: 16px; }
  .bs-secthead__rule { display: none; }

  .bs-lede__title { font-size: clamp(30px, 7vw, 44px); }
  .bs-recent__title { font-size: 19px; }
  .bs-recent__meta { margin-bottom: 10px; }
  .bs-recent__title { margin-bottom: 8px; }
  .bs-instrument-clean { padding: 28px 8px; }
  .bs-instrument-clean__name { font-size: 24px; }
  .footer { margin-top: 32px; }

  .archive-head { padding: 28px 24px 18px; }
  .folio-v2 { padding: 20px 0; }
  .folio-v2__title { font-size: clamp(24px, 6vw, 30px); }
  .folio-v2__deck { font-size: 15.5px; }
  .folio-v2__cat { font-size: 9.5px; margin-bottom: 10px; padding-bottom: 10px; }
  .folio-v2__pubinfo { font-size: 12.5px; }

  .apps-orig__head { padding: 18px 24px 14px; }
  .apps-orig__grid { padding: 24px 24px 48px; gap: 20px; }
  .apps-orig__cell { padding: 28px 22px 24px; }
  .apps-orig__title { font-size: 24px; }
  .apps-orig__seal { width: 72px; height: 72px; margin-bottom: 16px; }

  .cover-orig { padding: 48px 20px 48px; }
  .cover-orig__title { font-size: clamp(38px, 9vw, 56px); line-height: 1.05; margin-bottom: 22px; }
  .cover-orig__sub { font-size: 17px; }

  .essay-body-v2 { padding: 48px 24px 60px; font-size: 17px; }
  .essay-body-v2 > p:first-child::first-letter { font-size: 64px; }
  .essay-body-v2 > h2 { font-size: 24px; line-height: 1.22; margin-top: 40px; }
  .essay-body-v2 > blockquote { font-size: 18px; padding-left: 20px; }
}