/* Journal article page.
   Warm branch per the Tide Rule: the article imagery is brass, paper and wood.
   Built by sections/article-page/build-article.py from template.html. */

.ar-page {
  --surface: #211f1d; --surface-deep: #0a0908;
  --cream: #efe6d8;
  --gutter: clamp(28px, 4.3vw, 86px);
  --rail: clamp(170px, 15vw, 280px);
  --rail-gap: clamp(32px, 5vw, 110px);
  background: var(--surface);
}
/* Diamond Pin Rule: pins take the surface they sit in */
.ar-page .ar-head .deco-frame i { background: var(--surface); }
/* warm branch: the article headers are paper and candlelight, so the nav's
   always-on ground takes the warm tint rather than the default cold one */
.ar-page .nav { --nav-ground: 20, 18, 16; }

/* below 1180px the links move into the dropdown menu (nav-menu.css) */
.ar-page { --nav-menu-ground: rgba(20, 18, 16, .97); }
/* The nav spark carried margin-right:auto and so was the bar's spacer. With the
   ornament removed (2026-10-09) the brand takes that job. */
.ar-page .nav .brand { margin-right: auto; }
.ar-page .nav .nav-links + .nav-end { margin-left: 48px; }
@media (max-width: 1180px) { .ar-page .nav .nav-links + .nav-end { margin-left: auto; } }

@media (prefers-reduced-motion: no-preference) { html:has(.ar-page) { scroll-behavior: smooth; } }

/* ---------- Head ---------- */
/* photographic ground: the image fills the frame, the copy sits on its dark half */
.ar-head {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(520px, 78vh, 860px);
  padding: calc(1.8vh + 78px + clamp(26px, 4vh, 60px)) var(--gutter) clamp(40px, 6vh, 84px);
}
.ar-head-art {
  position: absolute; inset: var(--frame-inset); z-index: -2;
  width: calc(100% - 2 * var(--frame-inset)); height: calc(100% - 2 * var(--frame-inset));
  object-fit: cover; object-position: 70% 40%;
  background: var(--surface-deep);
}
/* Wash, Not Panel: a warm directional gradient, darkest under the copy */
.ar-head::before {
  content: ""; position: absolute; inset: var(--frame-inset); z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10,9,8,.92) 0%, rgba(10,9,8,.72) 36%, rgba(10,9,8,.08) 66%, rgba(10,9,8,0) 100%),
    linear-gradient(180deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,0) 22%);
}
.ar-head-inner { position: relative; z-index: 2; }
.ar-head .ar-eyebrow { width: min(100%, 60%); }

.ar-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 0; }
.ar-eyebrow b { flex: 1 1 auto; height: 1px; background: var(--accent-line); }
.ar-eyebrow a { color: inherit; text-decoration: none; transition: color .3s var(--ease); }
.ar-eyebrow a:hover { color: var(--action); }
.ar-eyebrow a:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }

.ar-title {
  margin-top: clamp(14px, 2.2vh, 30px); max-width: 11em; text-wrap: balance;
  font: 900 clamp(38px, 4.4vw, 84px)/.94 var(--display);
  letter-spacing: -.042em; word-spacing: .05em; color: var(--ink);
}
.ar-standfirst {
  margin-top: clamp(14px, 2vh, 28px); max-width: 24em;
  font: 300 clamp(17px, 1.34vw, 26px)/1.54 var(--serif); color: var(--cream);
}
.ar-meta {
  margin-top: clamp(18px, 2.6vh, 34px);
  font: 400 clamp(10px, .82vw, 15px)/1 var(--mono);
  letter-spacing: .24em; text-transform: uppercase; color: var(--cream);
}
.ar-meta i { font-style: normal; color: var(--accent); margin: 0 .6em; }

/* ---------- Rail + reading column ---------- */
.ar-layout, .ar-cta {
  /* rail | reading column | an empty rail-width column, so the text sits on
     the page's centre line under the full-width figure */
  display: grid; grid-template-columns: var(--rail) minmax(0, 34em) var(--rail);
  justify-content: center;
  column-gap: var(--rail-gap); padding: 0 var(--gutter);
  font-size: clamp(17px, 1.24vw, 23px); /* so the 34em track matches the prose measure */
}
.ar-layout { padding-top: clamp(40px, 6vh, 96px); }

.ar-rail { position: relative; }
.ar-rail-label, .ar-rail ol { position: sticky; }
.ar-rail-label {
  top: calc(1.8vh + 78px + 28px);
  font: 400 clamp(10px, .74vw, 14px)/1 var(--mono);
  letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
  padding-bottom: 14px; border-bottom: 1px solid var(--accent-line);
}
.ar-rail ol {
  top: calc(1.8vh + 78px + 28px + 2.4em + 14px);
  list-style: none; display: grid; gap: 2px; margin-top: 14px;
}
.ar-rail a {
  position: relative; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 4px;
  padding: 7px 0 7px 12px;
  font: 400 clamp(10px, .74vw, 14px)/1.45 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: rgba(239, 230, 216, .62);
  transition: color .3s var(--ease);
}
.ar-rail a span { color: var(--accent); }
.ar-rail a::before { /* the tick that marks where you are */
  content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border: 1px solid var(--accent); transform: rotate(45deg) scale(0); transition: transform .35s var(--ease);
}
.ar-rail a[aria-current] { color: var(--ink); }
.ar-rail a[aria-current]::before { transform: rotate(45deg) scale(1); background: var(--accent); }
.ar-rail a:hover { color: var(--action); }
.ar-rail a:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* ---- prose: Fraunces 300, the unhurried voice ---- */
.ar-prose {
  max-width: 34em;
  font: 300 clamp(17px, 1.24vw, 23px)/1.64 var(--serif); color: var(--cream);
}
.ar-prose > * + * { margin-top: .95em; }
.ar-prose strong { font-weight: 400; color: var(--ink); }
.ar-prose em { font-style: italic; }

.ar-prose h2 {
  margin-top: 2.6em; scroll-margin-top: calc(78px + 6vh);
  font: 800 clamp(22px, 1.8vw, 34px)/1.18 var(--display);
  letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}
.ar-prose h2 + p { margin-top: .8em; }
.ar-num {
  display: block; margin-bottom: .7em;
  font: 400 clamp(10px, .74vw, 14px)/1 var(--mono); letter-spacing: .26em; color: var(--accent);
}

/* a paragraph that is only bold: the article's own emphasis lines */
.ar-prose .ar-emph { font-weight: 400; color: var(--ink); }

/* the one pull-out: the question the whole article turns on */
.ar-prose .ar-pull {
  position: relative; margin: 1.6em 0;
  padding: 1.05em 0;
  border-top: 1px solid var(--accent-line); border-bottom: 1px solid var(--accent-line);
  font: 700 clamp(22px, 2vw, 38px)/1.28 "Playfair Display", Georgia, serif; color: var(--ink);
}
.ar-prose .ar-pull::before { /* diamond pinned in the top rule */
  content: ""; position: absolute; left: 0; top: -6px; width: 10px; height: 10px;
  border: 1px solid var(--accent); background: var(--surface); transform: rotate(45deg);
}
.ar-prose .ar-pull + p { margin-top: 0; }

/* ---------- Closing call to action ---------- */
.ar-cta { padding-top: clamp(56px, 9vh, 130px); padding-bottom: clamp(56px, 9vh, 130px); }
.ar-cta > * { grid-column: 2; }

.ar-cta-plate {
  position: relative; max-width: 40em;
  padding: clamp(30px, 3.6vw, 66px);
  background: var(--surface-deep); border: 1px solid var(--accent-line);
}
.ar-cta-plate u {
  position: absolute; width: 18px; height: 18px; border: 1px solid var(--accent); text-decoration: none;
}
.ar-cta-plate u.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.ar-cta-plate u.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.ar-cta-plate u.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.ar-cta-plate u.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.ar-cta-plate .deco-eyebrow { margin-bottom: clamp(16px, 2.2vh, 28px); padding-left: 20px; }

.ar-cta-title {
  font: 900 clamp(28px, 2.6vw, 52px)/1 var(--display);
  letter-spacing: -.035em; word-spacing: .05em; color: var(--ink); text-wrap: balance;
}
.ar-cta-body { margin-top: clamp(14px, 2vh, 24px); }
.ar-cta-body p {
  font: 300 clamp(16px, 1.16vw, 21px)/1.6 var(--serif); color: var(--cream); max-width: 32em;
}
.ar-cta-body p + p { margin-top: .8em; }
.ar-cta-body strong { font-weight: 400; color: var(--ink); }
/* the one action on the page carries Tiffany, as the nav plate does */
.ar-cta-plate .bp-cta { border-color: var(--action); }
.ar-cta-plate .bp-cta svg { color: var(--action); }
.ar-cta-plate .bp-cta:hover { background: rgba(134, 209, 205, .12); }

.ar-back { margin-top: clamp(26px, 4vh, 52px); }
.ar-back a {
  display: inline-flex; align-items: center; gap: 14px;
  font: 400 clamp(11px, .82vw, 15px)/1 var(--mono); letter-spacing: .24em; text-transform: uppercase;
  color: var(--cream); text-decoration: none; transition: color .3s var(--ease);
}
.ar-back svg { width: 30px; color: var(--accent); transition: transform .35s var(--ease); }
.ar-back a:hover { color: var(--action); }
.ar-back a:hover svg { transform: translateX(-4px); }
.ar-back a:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }

/* ---------- Shared shell responsive ----------
   Copied from blueprint-page.css: these nav and footer rules live per page, not in
   blueprint-shared.css. Nav ground is warm here to match the branch. */
/* the frame's edge pins sit 7px outside the rule; keep the rule at least 8px in
   so they never cross the screen edge on a phone */
.ar-page { --frame-inset: max(1.2vw, 8px); }
.ar-page .deco-frame { inset: var(--frame-inset); }

@media (max-width: 1024px) {
  .ar-page .nav { padding-left: 32px; background: rgba(20, 18, 16, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .ar-page .foot-grid { grid-template-columns: 1fr 1fr; gap: 5vh 6vw; }
  .ar-page .foot-col + .foot-col { border-left: 0; padding-left: 0; }
  .ar-page .foot-col:first-child { grid-column: 1 / -1; }
  .ar-page .foot-sub { max-width: none; }
  .ar-page .foot-base { flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 14px; }
  .ar-page .foot-base i { min-width: 40px; }
}
@media (max-width: 640px) {
  .ar-page .nav { height: 64px; padding: 0 12px 0 16px; }
  .ar-page .nav-end::before { display: none; }
  .ar-page .nav .bp-cta { padding: 10px 16px; font-size: 12px; letter-spacing: .08em; gap: 0; white-space: nowrap; }
  .ar-page .nav .bp-cta svg { display: none; }
  .ar-page .nav .bp-cta::before, .ar-page .nav .bp-cta::after,
  .ar-page .nav .bp-cta i::before, .ar-page .nav .bp-cta i::after { width: 7px; height: 7px; left: auto; right: auto; }
  .ar-page .nav .bp-cta::before { left: 4px; top: 4px; }
  .ar-page .nav .bp-cta::after { right: 4px; bottom: 4px; }
  .ar-page .nav .bp-cta i::before { right: 4px; top: 4px; }
  .ar-page .nav .bp-cta i::after { left: 4px; bottom: 4px; }
  .ar-page .brand img { height: 26px; margin-left: calc(26px * -0.15); }
  .ar-page .foot-grid { grid-template-columns: 1fr; gap: 4.5vh; }
  .ar-page .foot-form { flex-direction: column; }
  .ar-page .foot-join { justify-content: center; }
  .ar-page .foot-base i { display: none; }
  .ar-page .foot-base { flex-direction: column; gap: 16px; }
  .ar-head { padding-top: calc(64px + 1.8vh + 28px); }
}

/* ---------- Tablet / phone ---------- */
@media (max-width: 960px) {
  .ar-layout, .ar-cta { grid-template-columns: minmax(0, min(34em, 100%)); }
  .ar-cta > * { grid-column: 1; }
  .ar-rail { display: none; }
  .ar-head .ar-eyebrow { width: 100%; }
  /* narrow screens: the instruments sit above, the copy below on a vertical wash */
  .ar-head-art { object-position: 78% 30%; }
  .ar-head::before {
    background: linear-gradient(180deg, rgba(10,9,8,.5) 0%, rgba(10,9,8,.35) 30%, rgba(10,9,8,.86) 58%, rgba(10,9,8,.95) 100%);
  }
}