/* Article pages (C3): the photograph edge to edge under the header; the headline on one line; the standfirst beside
   the post's own 2.5D scroll scene; at 1440 two shores (prose up to 68ch; the sticky marginalia rail on the water
   tone with the kit graphic, pull quotes, figures and the next-step card); at 1920 and above three columns
   (contents 25, prose 45 with its two columns meeting on the water line, rail 30); at 375 one column with the
   graphic inline; a deep closing band. Text hover: the headline opens along the width axis and returns. */

/* ---------- the photograph ---------- */
.ar-photo { position: relative; height: clamp(320px, 60vh, 960px); overflow: hidden; background: var(--water); }
.ar-photo > picture > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- the headline, the standfirst, the scene ---------- */
.ar-head { padding-top: clamp(28px, 3.2vw, 64px); }
.ar-head__h1 { margin-bottom: clamp(18px, 2.2vw, 44px); }
.ar-head__shores { align-items: stretch; }
.ar-head__stand { display: flex; align-items: center; }
.ar-stand { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.5rem, 2.3vw, 3.5rem); line-height: 1.14; letter-spacing: -.01em;
  font-variation-settings: "wdth" 88, "opsz" 96; text-wrap: pretty; }

.ar-scene { position: relative; min-height: clamp(280px, 25vw, 680px); border-radius: 4px; overflow: hidden; perspective: 1000px; color: var(--mist);
  background: radial-gradient(110% 90% at 50% 70%, #1B2B44 0%, #16243A 34%, #0E1826 76%); box-shadow: inset 0 0 0 1px rgba(237, 240, 243, .08); }
.ar-scene::after { content: ''; position: absolute; inset: auto 0 0 0; height: 38%; pointer-events: none; background: linear-gradient(to top, rgba(14, 24, 38, .7), rgba(14, 24, 38, 0)); }
.sc-svg { position: absolute; inset: 4% 3%; width: 94%; height: 92%; overflow: visible; transform-origin: 50% 60%; transform: rotateX(var(--tilt, 14deg)) translateY(var(--lift, 0px)); will-change: transform; }
.sc-water, .sc-rule { stroke: var(--mist); stroke-opacity: .6; stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.sc-seam { stroke: var(--glow); stroke-width: 2; stroke-linecap: round; fill: none; vector-effect: non-scaling-stroke; }
.sc-float { fill: #7B63F0; filter: drop-shadow(0 0 8px rgba(181, 107, 255, .8)); transform-box: fill-box; transform-origin: center; }
/* the Level's ticks settling */
.sc-up, .sc-down { stroke: var(--mist); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sc-down { stroke-opacity: .28; }
.sc-cap { fill: var(--mist); }
.sc-tick:nth-child(3) .sc-up, .sc-tick:nth-child(3) .sc-cap { stroke: #C9B8FF; fill: #C9B8FF; }
.sc-line { stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); }
/* the receipt cleaving */
.sc-cleave { position: absolute; inset: 0; transform-style: preserve-3d; }
.sc-tab, .sc-whole { position: absolute; top: 50%; height: 34%; display: grid; place-items: center; background: #F3EEE4 url(/assets/tex-paper.jpg); background-size: 120px; background-blend-mode: multiply;
  color: var(--raven); border-radius: 3px; box-shadow: 0 30px 40px -24px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(18, 21, 25, .12); transform-style: preserve-3d; will-change: transform, opacity; }
.sc-tab .fig, .sc-whole .fig { font-size: clamp(1.75rem, 2.8vw, 4rem); letter-spacing: -.01em; }
.sc-tab--a { left: 19%; width: 31%; border-radius: 3px 0 0 3px; transform-origin: 100% 50%; }
.sc-tab--b { left: 50%; width: 31%; border-radius: 0 3px 3px 0; transform-origin: 0 50%; }
.sc-whole { left: 19%; width: 62%; }
.sc-seamline { position: absolute; left: 50%; top: 40%; height: 54%; width: 2px; margin-left: -1px; background: linear-gradient(to bottom, var(--rose), var(--iris)); box-shadow: 0 0 18px 2px rgba(255, 111, 177, .6); opacity: var(--flare, 0); }
.sc-waterline { position: absolute; left: 0; right: 0; top: 84%; height: 1px; background: var(--mist); opacity: .4; }
/* two posts with a slack line */
.sc-hill { fill: #22324C; }
.sc-post line { stroke: var(--mist); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sc-post .sc-rf { stroke-width: 4; stroke-opacity: .5; }
.sc-lamp { fill: #D9C2FF; }
.sc-halo { opacity: var(--halo, .2); }
.sc-line { stroke: var(--mist); stroke-opacity: .85; stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
/* the tide rule with the first of the month marked */
.sc-day { stroke: var(--mist); stroke-width: 2.5; stroke-opacity: .7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sc-day--wk { stroke-width: 3.5; }
.sc-oct { stroke: #9A86FF; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sc-now { stroke: var(--glow); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }

/* ---------- the article: contents, prose, marginalia ---------- */
.ar-body { padding-top: clamp(40px, 4.6vw, 100px); padding-bottom: 0; padding-right: 0; }
.ar-grid { position: relative; display: grid; grid-template-columns: calc(50vw - var(--gutter)) 50vw; }
.ar-grid::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50vw - var(--gutter)); width: 1px; background: var(--raven); opacity: .55; z-index: 1; pointer-events: none; }
.ar-toc { display: none; }
.ar-p { grid-column: 1; grid-row: var(--row); padding: 0 clamp(24px, 3vw, 64px) clamp(32px, 3.4vw, 64px) 0; }
.ar-m { grid-column: 2; grid-row: var(--row); background: var(--water); padding: 0 var(--gutter) clamp(32px, 3.4vw, 64px) clamp(24px, 3vw, 64px); }
.ar-m[style*="--row:1"] { padding-top: clamp(24px, 2.4vw, 44px); }
.ar-m[style*="--row:1"] { border-radius: 4px 0 0 0; }
.ar-m__in { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: clamp(24px, 2.6vw, 52px); }
.ar-p--lead .ar-prose > p:first-child { font-size: clamp(1.125rem, 1.1vw, 1.375rem); line-height: 1.5; }
.ar-prose { font-size: var(--body); line-height: 1.62; column-width: 34ch; column-gap: 3rem; }
.ar-prose p { margin: 0 0 1em; orphans: 3; widows: 3; }
.ar-prose p:last-child { margin-bottom: 0; }
.ar-sub { margin: 0 0 clamp(16px, 1.6vw, 28px); padding-top: clamp(20px, 1.8vw, 32px); border-top: 1px solid var(--rule); font-family: var(--font-head); font-weight: 500;
  font-size: clamp(1.5rem, 2.05vw, 3rem); line-height: 1.12; letter-spacing: -.005em; font-variation-settings: "wdth" 88, "opsz" 96; text-wrap: balance; }

.ar-art { margin: 0; padding: clamp(8px, .8vw, 14px); background: var(--mist); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--rule); }
.ar-art .art-svg { width: 100%; height: auto; display: block; }
@media (min-width: 900px) { .ar-art { margin-right: calc(-1 * var(--gutter)); padding-right: 0; border-radius: 4px 0 0 4px; } }
.ar-quote { margin: 0; }
.ar-quote::before { content: ''; display: block; width: 48px; height: 2px; margin-bottom: clamp(14px, 1.4vw, 24px); background: linear-gradient(90deg, var(--rose), var(--iris)); }
.ar-quote p { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.625rem, 2.25vw, 3.5rem); line-height: 1.1; letter-spacing: -.012em; font-variation-settings: "wdth" 86, "opsz" 96; text-wrap: balance; }
.ar-cap { display: block; font-size: clamp(.9375rem, .85vw, 1.125rem); line-height: 1.45; color: var(--slate); }
.ar-fig, .ar-split, .ar-pair { margin: 0; }
.ar-fig__num, .ar-split__total { margin: 0 0 14px; line-height: 1; }
.ar-split__halves { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin: 0 0 14px; padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ar-split__seam { width: 2px; height: 1.6em; font-size: clamp(2rem, 3.9vw, 3.5rem); background: linear-gradient(to bottom, var(--rose), var(--iris)); }
.ar-split__b { justify-self: end; }
.ar-pair__nums { display: flex; gap: clamp(24px, 3vw, 56px); margin-bottom: 14px; }
.ar-rows { display: grid; }
.ar-rows__row { display: grid; grid-template-columns: minmax(5.4ch, auto) 1fr; column-gap: clamp(16px, 1.6vw, 28px); align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule); }
.ar-rows__row .fig { font-size: clamp(1.75rem, 2.4vw, 3rem); }
.ar-next { display: grid; gap: clamp(12px, 1.2vw, 20px); justify-items: start; padding: clamp(24px, 2.4vw, 44px); border-radius: 36px 4px 4px 4px; color: var(--mist); }
.ar-next__mark .rc-ico { width: 36px; height: 36px; color: var(--mist); stroke-width: 1.25; }
.ar-next__link, .ar-next__price, .ar-next__cta { margin: 0; }
.ar-next__link .link { font-size: clamp(1.25rem, 1.6vw, 2rem); }
.ar-next__price { color: var(--water); font-size: clamp(1rem, 1vw, 1.25rem); }

/* the contents rail and the three columns, 1920 and above */
@media (min-width: 1920px) {
  .ar-grid { grid-template-columns: calc(25vw - var(--gutter)) 45vw 30vw; }
  .ar-grid::before { display: none; }
  .ar-toc { display: block; grid-column: 1; grid-row: 1 / span 6; padding-right: 2vw; }
  .ar-toc__in { position: sticky; top: calc(var(--header-h) + 32px); }
  .ar-toc__list { display: grid; border-left: 1px solid var(--rule); }
  .ar-toc__link { display: block; padding: 12px 0 12px 22px; text-decoration: none; color: var(--slate); font-family: var(--font-head); font-weight: 500;
    font-size: clamp(1rem, .95vw, 1.5rem); line-height: 1.25; font-variation-settings: "wdth" 90, "opsz" 96; transition: color var(--dur-fast); }
  .ar-toc__link:hover, .ar-toc__link[aria-current="true"] { color: var(--raven); }
  .ar-toc__float { position: absolute; left: -4px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--iris); transform: translateY(var(--y, -40px)); transition: transform var(--dur-base) var(--ease-slack); box-shadow: 0 0 0 4px var(--iris-tint); }
  .ar-p { grid-column: 2; padding-left: 6.6vw; padding-right: 1.6vw; }
  .ar-m { grid-column: 3; }
  /* the section flows in two columns that meet on the water line, its subhead heading the first column */
  .ar-p { column-count: 2; column-gap: 3rem; }
  .ar-sub { break-after: avoid; }
  .ar-prose { column-width: auto; column-count: auto; font-size: 1.125rem; }
}
@media (min-width: 2400px) { .ar-prose { font-size: 1.25rem; } }

/* ---------- the closing band ---------- */
.ar-close__shores { align-items: start; }
.ar-close__h2 { margin: 0 0 clamp(18px, 2vw, 36px); }
.ar-close__all { margin: 0; }
.ar-more { display: grid; }
.ar-more__item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(14px, 1.4vw, 24px); align-items: start; padding: clamp(18px, 1.8vw, 32px) 0; border-top: 1px solid var(--rule-deep); }
.ar-more__item:last-child { border-bottom: 1px solid var(--rule-deep); }
.ar-more__item .rc-ico { margin-top: .35em; color: var(--mist); }
.ar-more__link { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 2.5rem); line-height: 1.16; font-variation-settings: "wdth" 88, "opsz" 96; }

/* ---------- phones and tablets ---------- */
@media (max-width: 899.98px) {
  .ar-photo { height: 64vw; }
  .ar-scene { min-height: 64vw; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
  .ar-body { padding-right: var(--gutter); }
  .ar-grid { grid-template-columns: minmax(0, 1fr); }
  .ar-grid::before { display: none; }
  .ar-p, .ar-m { grid-column: 1; grid-row: auto; padding: 0 0 28px; }
  .ar-m { background: none; }
  .ar-m[style*="--row:1"] { padding-top: 0; }
  .ar-m__in { position: static; }
  .ar-prose { column-width: auto; }
  .ar-next { border-radius: 28px 4px 4px 4px; }
}
@media (prefers-reduced-motion: reduce) { .sc-svg, .sc-tab, .sc-whole { will-change: auto; } }