/* VIVERE COLORADO · Line pages and path hubs
   Extends site.css. Each line sets three tokens on .line (--tint, --acc, --pat, plus --acc-ink for text on bone).
   Components use tokens only. Motion is transform and opacity; the painted default is the finished page. */

.line { --acc: var(--copper); --acc-ink: var(--copper-ink); --tint: var(--charcoal); --pat: none; }
.line .eyebrow, .line .rim { color: var(--acc); }
.line .on-bone .eyebrow, .line .on-bone .rim { color: var(--acc-ink); }
.line .on-bone .link-arrow { color: var(--acc-ink); }

.btn--acc {
  background: linear-gradient(180deg, color-mix(in oklab, var(--acc) 76%, #fff), var(--acc) 55%, color-mix(in oklab, var(--acc) 82%, #000)); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 6px 18px -8px color-mix(in oklab, var(--acc) 70%, transparent);
}
.line .btn--ghost { border-color: color-mix(in oklab, var(--acc) 62%, transparent); }
.line .btn--ghost:hover { border-color: var(--acc); }

/* ---------- section grounds ---------- */
.lsec { position: relative; isolation: isolate; padding-block: var(--sec); }
.lsec--ink { background: var(--ink); }
.lsec--char { background: var(--charcoal); }
.lsec--tint {
  background:
    radial-gradient(60% 70% at 88% 0%, color-mix(in oklab, var(--acc) 14%, transparent), transparent 70%),
    linear-gradient(172deg, color-mix(in oklab, var(--tint) 100%, #000) 0%, color-mix(in oklab, var(--tint) 55%, var(--ink)) 100%);
}
.lsec--tint::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pat) center / cover no-repeat; opacity: .09; }
.lsec--bone { background: var(--bone); color: var(--ink); }
.lsec--bone::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pat) center / cover no-repeat; opacity: .1; }
.lsec--patina {
  background:
    radial-gradient(60% 50% at 18% 26%, rgba(90, 140, 115, .26), transparent 62%),
    radial-gradient(55% 60% at 74% 14%, rgba(30, 64, 50, .6), transparent 70%),
    radial-gradient(45% 45% at 84% 82%, rgba(201, 138, 94, .12), transparent 70%), var(--patina-deep);
}
/* full-strength pattern bands: the image is mirrored down the middle so its edges never show a seam */
.lsec--pat { background: var(--tint); }
.lsec--pat::before, .lsec--pat::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; z-index: -1; background: var(--pat) center / cover no-repeat; }
.lsec--pat::before { left: 0; }
.lsec--pat::after { right: 0; transform: scaleX(-1); }

.lhead { display: grid; gap: 12px; justify-items: start; margin-bottom: clamp(24px, 3.4vw, 44px); }
.lhead h2 { font-size: var(--t-h2); letter-spacing: -.015em; }
.lhead .lede { max-width: 56ch; }

.lsec--bone .lede, .lsec--bone p { color: var(--mute-l); }
.lsec--bone h2, .lsec--bone h3 { color: var(--ink); }

/* ================= HERO: a chapter opener ================= */
.lhero {
  position: relative; isolation: isolate; overflow: clip; display: grid; align-items: end; color: var(--chalk);
  min-height: clamp(430px, 64svh, 70svh); background: var(--tint);
}
.lhero__img { position: absolute; inset: 0; margin: 0; z-index: -3; }
.lhero__img img { width: 100%; height: 100%; object-fit: cover; }
.lhero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--tint) 96%, #000) 0%, color-mix(in oklab, var(--tint) 66%, transparent) 40%, transparent 80%),
    linear-gradient(90deg, color-mix(in oklab, var(--tint) 80%, transparent) 0%, transparent 72%),
    radial-gradient(50% 60% at 90% 10%, color-mix(in oklab, var(--acc) 16%, transparent), transparent 70%);
}
.lhero--flip::before {
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--tint) 96%, #000) 0%, color-mix(in oklab, var(--tint) 66%, transparent) 40%, transparent 80%),
    linear-gradient(270deg, color-mix(in oklab, var(--tint) 80%, transparent) 0%, transparent 72%),
    radial-gradient(50% 60% at 10% 10%, color-mix(in oklab, var(--acc) 16%, transparent), transparent 70%);
}
.lhero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pat) center / cover no-repeat; opacity: .1; pointer-events: none; }

.lhero__num {
  position: absolute; right: var(--gut); top: clamp(10px, 2.4vw, 34px); z-index: 0; user-select: none; pointer-events: none;
  font: 700 clamp(4.5rem, 13vw, 11rem)/.8 var(--f-slab); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--acc); opacity: .5;
}
.lhero--flip .lhero__num { right: auto; left: var(--gut); }

.lhero__in { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; padding: clamp(56px, 7vw, 84px) 0 clamp(24px, 4vw, 52px); display: grid; gap: 18px 40px; grid-template-columns: minmax(0, 1fr); position: relative; z-index: 1; }
.lhero__main { display: grid; gap: 10px; justify-items: start; align-content: end; }
.lhero__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font: 600 var(--t-rim)/1.2 var(--f-slab); letter-spacing: .2em; text-transform: uppercase; color: rgba(242, 241, 237, .82); }
.lhero__crumb a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: inherit; }
.lhero__crumb a:hover { color: var(--chalk); }
.lhero__crumb i { font-style: normal; color: var(--acc); letter-spacing: .08em; margin-right: .5em; }
.lhero__chap { margin-left: auto; color: var(--acc); }
@media (max-width: 519px) { .lhero__chap { display: none; } }
.lhero__title { font-size: clamp(2.6rem, 1rem + 7vw, 6.6rem); line-height: .94; letter-spacing: -.02em; text-shadow: 0 2px 28px rgba(0, 0, 0, .5); }
.lhero__status { display: flex; align-items: center; gap: .7em; flex-wrap: wrap; font: 600 var(--t-rim)/1.4 var(--f-slab); letter-spacing: .18em; text-transform: uppercase; color: var(--chalk); }
.lhero__status { flex-wrap: nowrap; align-items: baseline; }  /* the dot stays with its words when a narrow column wraps them */
.lhero__status .live-dot { flex: none; align-self: center; }
.lhero .live-dot { background: var(--acc); box-shadow: 0 0 0 3px color-mix(in oklab, var(--acc) 28%, transparent); }
.lhero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.lread { margin: 0; display: grid; gap: clamp(8px, 1.2vw, 14px); padding-left: 16px; border-left: 2px solid var(--acc); align-self: end; }
.lread p { display: grid; gap: 2px; }
.lread .lat { font: 600 clamp(.625rem, .58rem + .2vw, .75rem)/1 var(--f-slab); letter-spacing: .26em; text-transform: uppercase; color: var(--acc); }
.lread .en { font: 700 clamp(1.1rem, .9rem + 1.1vw, 1.85rem)/1.1 var(--f-slab); letter-spacing: -.005em; text-wrap: balance; text-shadow: 0 1px 18px rgba(0, 0, 0, .55); }
.lread p:nth-child(3) .en { color: color-mix(in oklab, var(--acc) 40%, #fff); }

@media (min-width: 900px) {
  .lhero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; }
  .lhero__main { grid-column: 1; grid-row: 1; }
  .lhero__quote { grid-column: 2; grid-row: 1; }
  .lhero--flip .lhero__main { grid-column: 2; }
  .lhero--flip .lhero__quote { grid-column: 1; }
  .lread { padding-left: 22px; }
  .lread p { grid-template-columns: 10.4rem minmax(0, 1fr); align-items: baseline; gap: 14px; }
}

/* art slot: coin window, capsule badge, price tickets */
.lhero.has-art .lhero__in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.lhero.has-art .lhero__main { grid-column: 1; grid-row: 1; }
.lhero.has-art .lhero__art { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
.lhero.has-art .lhero__quote { grid-column: 1 / -1; grid-row: 2; }
@media (min-width: 900px) {
  .lhero.has-art .lhero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .lhero.has-art .lhero__main { grid-column: 1; grid-row: 1; align-self: end; }
  .lhero.has-art .lhero__quote { grid-column: 1; grid-row: 2; align-self: start; }
  .lhero.has-art .lhero__art { grid-column: 2; grid-row: 1 / span 2; justify-self: center; align-self: center; }
}
.lhero--window { background: radial-gradient(60% 80% at 82% 40%, color-mix(in oklab, var(--acc) 16%, transparent), transparent 70%), var(--tint); }
.lhero--window::before, .lhero--mint::before { background: radial-gradient(80% 60% at 8% 100%, rgba(44, 74, 63, .35), transparent 70%); }
.lhero--window::after { opacity: .2; }
.lhero .lwin { width: clamp(124px, 34vw, 400px); order: 0; margin: 0; }
.lhero .window__rim .edge, .lhero .window__rim .edge-2, .lhero .window__rim .beads { stroke: var(--acc); }
.lhero .window__rim text { fill: var(--acc); }
.lhero .window img { object-position: 50% 50%; }

.lhero--mint { background: radial-gradient(60% 80% at 82% 40%, color-mix(in oklab, var(--acc) 18%, transparent), transparent 70%), var(--tint); }
.lhero__rosette {
  position: absolute; z-index: -2; width: min(130vw, 960px); aspect-ratio: 1; right: -14%; top: 50%; translate: 0 -50%; background: var(--acc); opacity: .08;
  -webkit-mask: url(/img/guilloche-rosette.svg) center / contain no-repeat; mask: url(/img/guilloche-rosette.svg) center / contain no-repeat;
}
.tickets { display: none; }
@media (min-width: 700px) {
  .tickets { display: grid; gap: 14px; justify-items: center; padding: 6px 0; }
  .ticket { position: relative; display: grid; gap: 4px; width: 250px; padding: 32px 18px 16px; background: var(--bone); color: var(--charcoal); border-radius: 12px; text-decoration: none; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(122, 69, 38, .35); transition: transform .35s var(--ease); }
  .ticket:nth-child(1) { transform: rotate(-2.2deg) translateX(-26px); }
  .ticket:nth-child(2) { transform: rotate(1.6deg) translateX(18px); }
  .ticket:nth-child(3) { transform: rotate(-1deg) translateX(-8px); }
  .ticket:hover { transform: rotate(0) translateY(-4px); }
  .ticket__hole { position: absolute; top: 11px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--char-2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); outline: 1px dashed rgba(138, 85, 52, .55); outline-offset: 2px; }
  .ticket__rim { font: 600 .5625rem/1.2 var(--f-slab); letter-spacing: .2em; text-transform: uppercase; color: var(--copper-ink); }
  .ticket b { font: 700 1.125rem/1.1 var(--f-slab); }
  .ticket .price { color: var(--copper-ink); font-size: 1.5rem; }
}

/* capsule badge */
.lhero__badge { display: block; width: clamp(92px, 16vw, 200px); color: var(--acc); }
.lhero__badge text { fill: currentColor; font: 600 12.5px var(--f-slab); letter-spacing: 2px; }
.lhero__badge .mid { font: 700 21px var(--f-slab); letter-spacing: 3px; }
.line[data-line="to-live-co"] .lhero::before {
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--tint) 96%, #000) 0%, color-mix(in oklab, var(--tint) 62%, transparent) 40%, transparent 80%),
    linear-gradient(90deg, color-mix(in oklab, var(--tint) 76%, transparent) 0%, transparent 70%),
    radial-gradient(50% 55% at 60% 100%, rgba(219, 163, 109, .32), transparent 70%);
}

/* hunt: the sunrise dial */
.lhero--sunrise .lhero__in { grid-template-columns: minmax(0, 1fr); }
.lhero--sunrise .lhero__in > * { max-width: 640px; }
.lhero--sunrise .lhero__main, .lhero--sunrise .lhero__quote { grid-column: 1; grid-row: auto; }
.lhero__sun { position: absolute; right: 2%; bottom: -1px; width: clamp(280px, 52vw, 700px); height: auto; z-index: -1; pointer-events: none; opacity: .92; }
.lhero__sun text { fill: #f0b184; font: 600 11px var(--f-slab); letter-spacing: .08em; opacity: .85; }
.lhero--sunrise::before {
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--tint) 96%, #000) 0%, color-mix(in oklab, var(--tint) 58%, transparent) 38%, transparent 76%),
    linear-gradient(90deg, color-mix(in oklab, var(--tint) 84%, transparent) 0%, color-mix(in oklab, var(--tint) 20%, transparent) 62%, transparent 100%),
    radial-gradient(60% 55% at 78% 100%, rgba(232, 100, 27, .5), transparent 70%);
}
@media (max-width: 699px) { .lhero__sun { right: -14%; opacity: .55; } }

/* ================= PIECES: a lead plate beside a grid (Field) ================= */
.pieces__grid { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: minmax(0, 1fr); align-items: start; }
.pieces__head { grid-column: 1 / -1; }
.pieces__head .lhead { margin-bottom: 0; }
.lead { display: grid; background: var(--bone); color: var(--charcoal); border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px var(--rule-d), 0 40px 70px -40px #000; min-width: 0; }
.lead__stage { position: relative; background: #101113; }
.lead__img { display: block; position: relative; aspect-ratio: 1; overflow: hidden; }
.lead__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.lead__img:hover img { transform: scale(1.03); }
.lead__back { position: absolute; right: 5%; bottom: 5%; width: 31%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--copper), 0 0 0 5px rgba(11, 12, 13, .85), 0 14px 28px -8px #000; background: #101113; }
.lead__back img { width: 100%; height: 100%; object-fit: cover; }
.lead__back i { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 0 6px; text-align: center; font: 600 .5625rem/1 var(--f-slab); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--chalk); background: linear-gradient(0deg, rgba(11, 12, 13, .85), transparent); }
.lead__no { position: absolute; left: 14px; top: 14px; z-index: 1; font: 600 .625rem/1 var(--f-slab); letter-spacing: .18em; text-transform: uppercase; color: var(--copper); background: rgba(11, 12, 13, .72); padding: 8px 11px; border-radius: 999px; border: 1px solid rgba(201, 138, 94, .35); }
.lead__meta { position: relative; padding: 34px clamp(18px, 2.6vw, 30px) clamp(18px, 2.6vw, 28px); display: grid; gap: 10px; }
.lead__meta::before { content: ""; position: absolute; top: 12px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--char-2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); outline: 1px dashed rgba(138, 85, 52, .55); outline-offset: 2px; }
.lead__meta .rim { color: var(--copper-ink); }
.lead__meta h3 { font-size: var(--t-h3); }
.lead__meta h3 a { text-decoration: none; }
.lead__meta p { color: var(--mute-l); font-size: .9375rem; }
.lead__meta .rim { font-size: .625rem; }
.lead__buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--rule-l); }
.lead .price { color: var(--copper-ink); font-size: 1.75rem; }
.lead .add { color: var(--charcoal); border-color: rgba(122, 69, 38, .55); }
.lead .add:hover { background: rgba(122, 69, 38, .1); border-color: var(--copper-ink); }

.pieces__main { display: contents; }  /* phones: the lead, the rail, then the run note, in that order */
.pieces__main > .lead { order: 1; }
.pieces__rest { order: 2; list-style: none; margin: 0; padding: 4px 0 14px; display: grid; gap: 14px; grid-auto-flow: column; grid-auto-columns: minmax(232px, 72%); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; min-width: 0; }
.pieces__rest::-webkit-scrollbar { display: none; }
.pieces__main > .dispatch { order: 3; }
.dispatch { display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; padding: 20px; border: 1px dashed var(--rule-d); border-radius: 18px; background: radial-gradient(70% 70% at 50% 40%, color-mix(in oklab, var(--acc) 10%, transparent), transparent 70%); min-width: 0; }
.dispatch__live { font-size: var(--t-small); color: var(--mute-d); max-width: 22ch; }
@media (min-width: 420px) {  /* the stamp sits beside its note, so the box reads as a slip, not an empty card */
  .dispatch { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "stamp text" "stamp link"; justify-items: start; align-items: center; text-align: left; column-gap: 24px; row-gap: 6px; padding: 22px 26px; }
  .dispatch .stamp { grid-area: stamp; }
  .dispatch__live { grid-area: text; align-self: end; }
  .dispatch .link-arrow { grid-area: link; align-self: start; }
}
@media (min-width: 900px) {
  /* Lead and run note stack in the left column; the three pieces fill the right one. The grid stretches both
     columns to the same height, and an odd last piece runs across the full width as a tag laid on its side,
     so neither column ends short of the other. */
  .pieces__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .pieces__main { display: grid; gap: 14px; grid-template-rows: auto minmax(0, 1fr); min-width: 0; }
  .pieces__main > .lead, .pieces__rest, .pieces__main > .dispatch { order: 0; }
  .pieces__rest { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 0; }
  .pieces__rest > .piece:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .pieces__rest > .piece:last-child:nth-child(odd) .piece__img { align-self: stretch; }
  .pieces__rest > .piece:last-child:nth-child(odd) .piece__meta { align-content: center; }
}

/* the stamp: RUN OF 48 */
.stamp { position: relative; width: 150px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; color: var(--acc); }
.stamp--sm { width: 124px; }
.stamp__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.stamp__ring text { fill: var(--acc); font: 600 11.5px var(--f-slab); letter-spacing: 2.2px; }
.stamp__ring circle { fill: none; stroke: var(--acc); }
.stamp__k { font: 600 .5625rem/1 var(--f-slab); letter-spacing: .2em; text-transform: uppercase; color: var(--mute-d); }
.stamp__n { font: 700 2.6rem/1 var(--f-slab); color: var(--acc); font-variant-numeric: tabular-nums; margin: 2px 0; }
.stamp--sm .stamp__n { font-size: 2.1rem; }

/* the run strip */
.runstrip { background: radial-gradient(60% 90% at 90% 0%, color-mix(in oklab, var(--acc) 14%, transparent), transparent 70%), var(--ink); }
.runstrip__in { display: grid; gap: 24px 40px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.runstrip__head { display: grid; gap: 12px; justify-items: start; }
.runstrip__head h2 { font-size: var(--t-h2); }
.runstrip .stamp { justify-self: start; }
.run { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 2px solid var(--acc); border-bottom: 1px solid var(--rule-d); }
.run > div { padding: 16px 16px 16px 0; display: grid; gap: 6px; align-content: start; }
.run > div + div { padding-left: 16px; border-left: 1px dashed var(--rule-d); }
.run dt { font: 600 var(--t-rim)/1 var(--f-slab); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.run dd { margin: 0; font: 700 1.25rem/1.2 var(--f-slab); font-variant-numeric: tabular-nums; }
.run__bar { height: 4px; border-radius: 2px; background: var(--rule-d); overflow: hidden; }
.run__bar i { display: block; height: 100%; background: var(--acc); transform-origin: left; transform: scaleX(var(--pct, 0)); transition: transform 1.1s var(--ease); }
.run__fine { font-size: var(--t-small); color: var(--mute-d); max-width: 60ch; }
.runstrip__in > .run, .runstrip__in > .run__bar, .runstrip__in > .run__fine { grid-column: 1 / -1; }
@media (min-width: 900px) { .runstrip__in { grid-template-columns: minmax(0, 1fr) auto; } .runstrip .stamp { width: 190px; justify-self: end; } .runstrip .stamp__n { font-size: 3.4rem; } }

/* ================= RENDER BANDS: the same hang tag, five different shapes ================= */
.band { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 24px); }
.piece--wide .piece__img { aspect-ratio: 1000 / 664; }
.band .piece { min-width: 0; }
@media (max-width: 520px) { .band .piece__latin { display: none; } }

.band--diptych { grid-template-columns: minmax(0, 1fr); max-width: 1020px; margin-inline: auto; }
@media (min-width: 640px) { .band--diptych { grid-template-columns: repeat(2, minmax(0, 1fr)); } .band--diptych > li:nth-child(2) { margin-top: clamp(20px, 4vw, 56px); } }
.band--single { grid-template-columns: minmax(0, 1fr); width: min(100%, 520px); }

.band--mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.band--mosaic > li:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .band--mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; }
  .band--mosaic > li { grid-column: span 4; }
  .band--mosaic > li:first-child { grid-column: span 6; grid-row: span 2; grid-template-rows: 1fr auto; }
  .band--mosaic > li:first-child .piece__img { aspect-ratio: auto; min-height: 320px; }
  .band--mosaic > li:nth-child(n+2):nth-child(-n+5) { grid-column: span 3; }
}
.band--mosaic > li:not(:first-child) .piece__img { aspect-ratio: 1; }
@media (max-width: 899px) { .band--mosaic > li:last-child:nth-child(even) { grid-column: 1 / -1; } }

.band--stagger { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.band--stagger > li:nth-child(2) { margin-top: clamp(24px, 5vw, 72px); }
.band--sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: frame; position: relative; padding: 34px 0; }
.band--sheet::before, .band--sheet::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--acc) 60%, transparent) 0 16px, transparent 16px 30px); border-radius: 2px; }
.band--sheet::before { top: 4px; } .band--sheet::after { bottom: 4px; }
.band--sheet > li { counter-increment: frame; }
.band--sheet > li::before { content: counter(frame, decimal-leading-zero); position: absolute; z-index: 2; left: 12px; top: 12px; font: 700 .75rem/1 var(--f-slab); letter-spacing: .16em; color: var(--acc); background: rgba(11, 12, 13, .72); padding: 7px 10px; border-radius: 999px; }
@media (max-width: 799px) {
  .band--stagger, .band--sheet { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(232px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .band--stagger > li:nth-child(2) { margin-top: 0; }
  .band--stagger::-webkit-scrollbar, .band--sheet::-webkit-scrollbar { display: none; }
}

.band--kids { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .band--kids { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } .band--kids > li:nth-child(2) { margin-top: clamp(24px, 5vw, 64px); } }
.band--strike { grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 700px) { .band--strike { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.band--addons { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .band--addons { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } .band--addons > li:nth-child(2) { margin-top: 44px; } }
@media (max-width: 799px) { .band--addons { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(232px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .band--addons::-webkit-scrollbar { display: none; } }
.piece--addon .price { font-size: 1.5rem; }
.piece--addon .piece__buy { align-items: baseline; }

.piece--render .piece__img:not(a) { cursor: zoom-in; }

/* single feature (one render, one paragraph) */
.feature__in { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; grid-template-columns: minmax(0, 1fr); }
.feature__copy { display: grid; gap: 14px; justify-items: start; }
.feature__copy h2 { font-size: var(--t-h2); }
.feature__mood { color: var(--chalk); max-width: 52ch; padding-left: 16px; border-left: 2px solid var(--acc); }
@media (min-width: 900px) { .feature__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .line[data-line="weather"] .feature__in { direction: rtl; } .line[data-line="weather"] .feature__in > * { direction: ltr; } }

/* ================= ESSENTIALS specials ================= */
.teeband { background: radial-gradient(60% 80% at 90% 50%, rgba(201, 138, 94, .1), transparent 70%), var(--ink); }
.teeband__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; grid-template-columns: minmax(0, 1fr); }
.teeband__copy { display: grid; gap: 14px; justify-items: start; }
.teeband__copy h2 { font-size: clamp(2.2rem, 1.1rem + 4.4vw, 4.8rem); line-height: .98; letter-spacing: -.02em; }
.teeband__fit { font-size: var(--t-small); color: var(--mute-d); }
.teeband__buy { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.teeband__buy .price { font-size: 2rem; }
.teeband__plates { position: relative; aspect-ratio: 1.12; width: min(100%, 640px); justify-self: center; }
.plate { position: absolute; display: block; overflow: hidden; border-radius: 20px; aspect-ratio: 1; background: #101113; box-shadow: 0 0 0 1px var(--rule-d), 0 40px 60px -26px #000; }
.plate img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.plate:hover img { transform: scale(1.04); }
.plate--a { left: 0; top: 0; width: 66%; z-index: 1; }
.plate--b { right: 0; bottom: 0; width: 54%; z-index: 2; transform: rotate(2.6deg); box-shadow: 0 0 0 1px var(--rule-d), 0 0 0 6px var(--ink), 0 40px 60px -26px #000; }
@media (min-width: 900px) { .teeband__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

.pieces2__grid { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: minmax(0, 1fr); }
.pieces2__head .lhead { margin-bottom: 0; }
.pieces2__list { list-style: none; margin: 0; padding: 4px 0 14px; display: grid; gap: 14px; grid-auto-flow: column; grid-auto-columns: minmax(232px, 72%); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; min-width: 0; }
.pieces2__list::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .pieces2__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .pieces2__head { position: sticky; top: calc(var(--nav-h) + 24px); }
  .pieces2__list { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 0; gap: 18px; }
  .pieces2__list > li:nth-child(even) { margin-top: 36px; }
}
.kids__grid { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; grid-template-columns: minmax(0, 1fr); }
.kids__copy { display: grid; gap: 14px; justify-items: start; }
.kids__copy h2 { font-size: var(--t-h2); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font: 600 .75rem/1 var(--f-slab); letter-spacing: .12em; text-transform: uppercase; padding: 9px 13px; border-radius: 999px; border: 1px solid var(--acc-ink); color: var(--acc-ink); }
.kids__links { display: grid; gap: 0; font-size: var(--t-small); }
@media (min-width: 900px) { .kids__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* ================= UNSEEN / HUNT pattern bands ================= */
.patband { padding-block: clamp(72px, 11vw, 168px); overflow: clip; }
.patband__in, .plainly__in { display: grid; }
.patband__card { max-width: 620px; padding: clamp(22px, 3vw, 40px); border-radius: 22px; background: color-mix(in oklab, var(--tint) 90%, #000); border: 1px solid color-mix(in oklab, var(--acc) 45%, transparent); box-shadow: 0 30px 60px -30px #000; display: grid; gap: 14px; justify-items: start; }
.patband__card h2 { font-size: var(--t-h2); }
.patband__card p { color: var(--chalk); }
.patband__cols { display: grid; gap: 10px; margin-top: 6px; }
.patband { border-bottom: 10px solid var(--acc); }
.line[data-line="hunt"] .patband__card { background: color-mix(in oklab, var(--tint) 94%, #000); }
.plainly { background: var(--ink); }
.plainly__card { margin-inline: auto; max-width: 720px; text-align: center; justify-items: center; padding: clamp(24px, 4vw, 52px); border-radius: 24px; background: rgba(11, 12, 13, .88); border: 1px solid var(--rule-d); display: grid; gap: 14px; }
.plainly__card h2 { font-size: var(--t-h2); }
.plainly__big { font: 700 clamp(1.5rem, 1rem + 2.6vw, 2.8rem)/1.05 var(--f-slab); color: var(--acc); text-wrap: balance; }
.plainly__mood { font-size: var(--t-small); color: var(--mute-d); }

.planchets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 22px; }
.planchets li { display: flex; align-items: center; gap: 11px; font-size: var(--t-small); font-weight: 500; }
.planchets i {
  width: 40px; aspect-ratio: 1; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--c) 72%, #fff), var(--c) 55%, color-mix(in oklab, var(--c) 78%, #000));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--c) 60%, #000), 0 0 0 4px rgba(11, 12, 13, .0), inset 0 0 0 3px rgba(0, 0, 0, .16), 0 0 0 5px rgba(201, 138, 94, .5), 0 8px 12px -4px rgba(0, 0, 0, .5);
  margin: 4px;
}

/* ================= THE MEANING: tap coin, the reading, the hang-tag back ================= */
.lmean__grid { display: grid; gap: 28px clamp(24px, 4vw, 64px); align-items: center; grid-template-columns: minmax(0, 1fr); justify-items: start; }
.lmean__coin { display: grid; justify-items: center; gap: 12px; justify-self: center; }
.lmean__hint { text-align: center; }
.lmean__words { display: grid; gap: 14px; }
.lmean__words h2 { font-size: var(--t-h2); }
.lreading { margin: 0; display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid color-mix(in oklab, var(--acc) 40%, transparent); }
.lreading dt { font: 600 .625rem/1.3 var(--f-slab); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.lreading dd { margin: 0; font: 700 clamp(1.4rem, 1rem + 1.8vw, 2.3rem)/1.1 var(--f-slab); }
.lreading div:nth-child(3) dd { color: color-mix(in oklab, var(--acc) 40%, #fff); }
.lreading.is-swap dd { animation: lwater 520ms var(--ease) both; }
.lreading.is-swap div:nth-child(2) dd { animation-delay: 60ms; }
.lreading.is-swap div:nth-child(3) dd { animation-delay: 120ms; }
@keyframes lwater { from { opacity: 0; transform: translateY(.45em); } }
.lmean__note { font-size: var(--t-small); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; color: var(--mute-d); }
.on-bone .lreading { border-top-color: var(--rule-l); }
.on-bone .lreading dt { color: var(--acc-ink); }
.on-bone .lreading div:nth-child(3) dd { color: var(--acc-ink); }
.on-bone .lmean__note { color: var(--mute-l); }
.lmean__cols { grid-column: 1 / -1; display: grid; gap: 10px; width: 100%; padding-top: 18px; border-top: 1px solid var(--rule-d); }
.on-bone .lmean__cols { border-top-color: var(--rule-l); }

.tagback {
  position: relative; width: min(100%, 250px); aspect-ratio: 2 / 3.1; padding: 36px 18px 18px; display: grid; align-content: space-between; justify-items: center; text-align: center; gap: 8px;
  background: var(--bone); color: var(--charcoal); border-radius: 14px; justify-self: center;
  box-shadow: 0 0 0 1px rgba(122, 69, 38, .4), 0 30px 46px -22px rgba(0, 0, 0, .75);
}
.on-bone .tagback { background: var(--chalk); }
.tagback__hole { position: absolute; top: 13px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--char-2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); outline: 1px dashed rgba(138, 85, 52, .6); outline-offset: 2px; }
.tagback__rim { font: 600 .5rem/1.4 var(--f-slab); letter-spacing: .2em; text-transform: uppercase; color: var(--copper-ink); }
.tagback__line { font: 600 .6875rem/1.2 var(--f-slab); letter-spacing: .18em; text-transform: uppercase; color: var(--mute-l); }
.tagback__read { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 700 1.125rem/1.15 var(--f-slab); }
.tagback__read li:nth-child(3) { color: var(--copper-ink); }
.tagback__no { font: 600 .625rem/1 var(--f-slab); letter-spacing: .2em; text-transform: uppercase; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.tagback__cap { font-size: .6875rem; line-height: 1.35; color: var(--mute-l); }
@media (min-width: 900px) {
  .lmean__grid { grid-template-columns: auto minmax(0, 1fr) 250px; }
  .lmean__coin { align-self: center; }
}

/* ================= NOTIFY ================= */
.lnotify__in { display: grid; gap: 24px 48px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.lnotify__copy { display: grid; gap: 12px; justify-items: start; }
.lnotify__copy h2 { font-size: var(--t-h2); }
.nform { display: grid; gap: 10px; }
.nform label { font: 600 var(--t-rim)/1.2 var(--f-slab); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.nform__row { display: flex; gap: 8px; flex-wrap: wrap; }
.nform input { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--acc) 55%, transparent); background: rgba(242, 241, 237, .07); color: var(--chalk); font: 400 1rem var(--f-body); }
.nform input::placeholder { color: var(--mute-d); }
.nform input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.nform__msg { font-size: var(--t-small); color: var(--mute-d); min-height: 1.3em; }
.nform__msg.is-ok { color: var(--chalk); }
@media (min-width: 900px) { .lnotify__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ================= TO LIVE CO.: the capsule inside the brand ================= */
.capsule { background: radial-gradient(60% 80% at 20% 50%, rgba(219, 163, 109, .14), transparent 70%), var(--ink); }
.capsule__in { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; grid-template-columns: minmax(0, 1fr); }
.capsule__rings { width: min(100%, 420px); height: auto; justify-self: center; overflow: visible; }
.capsule__rings .r-out { stroke: var(--acc); stroke-width: 1.4; opacity: .7; }
.capsule__rings .r-out2 { stroke: var(--acc); stroke-width: .8; opacity: .35; }
.capsule__rings .r-bead { stroke: var(--acc); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 11.4; opacity: .7; }
.capsule__rings .t-out { fill: var(--acc); font: 600 15px var(--f-slab); letter-spacing: 3px; }
.capsule__rings .r-in { stroke: var(--acc); stroke-width: 2; }
.capsule__rings .r-in2 { stroke: var(--acc); stroke-width: .8; opacity: .5; }
.capsule__rings .t-mid { fill: var(--chalk); font: 700 30px var(--f-slab); letter-spacing: 6px; }
.capsule__copy { display: grid; gap: 14px; justify-items: start; }
.capsule__copy h2 { font-size: var(--t-h2); }
.capsule__note { font-size: .9375rem; color: var(--chalk); padding-left: 16px; border-left: 2px solid var(--acc); max-width: 52ch; }
@media (min-width: 900px) { .capsule__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

/* ================= COIN GOODS: first strike, the box ================= */
.strike { background: radial-gradient(50% 70% at 12% 0%, rgba(201, 138, 94, .14), transparent 70%), var(--ink); }
.strike__in { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: center; }
.strike__copy { display: grid; gap: 14px; justify-items: start; }
.strike__copy h2 { font-size: var(--t-h2); }
.strike__seal { display: inline-flex; align-items: center; gap: .7em; font: 600 var(--t-rim)/1 var(--f-slab); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); padding: 10px 16px; border: 1px solid color-mix(in oklab, var(--acc) 50%, transparent); border-radius: 999px; }
.strike__seal svg { width: 1.3em; height: 1.3em; }
@media (min-width: 900px) { .strike__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.boxband__in { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: center; }
.boxband__fig { margin: 0; position: relative; }
.boxband__fig img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 0 0 1px var(--rule-d), 0 40px 70px -34px #000; cursor: zoom-in; }
.boxband__fig figcaption { margin-top: 10px; font: 600 var(--t-rim)/1.3 var(--f-slab); letter-spacing: .18em; text-transform: uppercase; color: var(--acc); }
.boxband__copy { display: grid; gap: 14px; justify-items: start; }
.boxband__copy h2 { font-size: var(--t-h2); }
.boxband__copy .lede { color: #b9c2ba; }
@media (min-width: 900px) { .boxband__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* ================= SMALL GOODS: where they go ================= */
.goes__in { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: start; }
.goes__copy { display: grid; gap: 14px; justify-items: start; }
.goes__copy h2 { font-size: var(--t-h2); }
.goes { margin: 0; display: grid; border-top: 2px solid var(--ink); }
.goes__row { display: grid; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--rule-l); }
.goes__row dt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 700 1.25rem/1.2 var(--f-slab); }
.goes__row dd { margin: 0; }
.goes .price { color: var(--copper-ink); }
.chips--links li { padding: 0; border: 0; }
.chips--links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--acc-ink); color: var(--acc-ink); text-decoration: none; font: 600 .75rem/1 var(--f-slab); letter-spacing: .1em; text-transform: uppercase; }
.chips--links a:hover { background: color-mix(in oklab, var(--acc-ink) 10%, transparent); }
@media (min-width: 900px) { .goes__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }

/* ================= ALSO ON THIS PATH: medallions, previous and next ================= */
.lalso__row { list-style: none; margin: 0 0 clamp(24px, 3vw, 40px); padding: 8px 4px 16px; display: flex; gap: clamp(14px, 3vw, 36px); overflow-x: auto; position: relative; scrollbar-width: none; }
@media (min-width: 900px) { .lalso__row { justify-content: space-around; } }
.lalso__row::-webkit-scrollbar { display: none; }
.lalso__row::before { content: ""; position: absolute; left: 0; right: 0; top: 56px; height: 2px; background: repeating-linear-gradient(90deg, var(--copper-lo) 0 8px, transparent 8px 13px); opacity: .6; }
.lalso__row > li { position: relative; flex: none; }
.lmedal { display: grid; justify-items: center; gap: 7px; text-align: center; width: 124px; text-decoration: none; padding: 4px 0; border-radius: 14px; }
.lmedal__face {
  position: relative; width: 88px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--char-2); flex: none;
  box-shadow: 0 0 0 2px var(--acc), 0 0 0 5px var(--charcoal), 0 0 0 6px color-mix(in oklab, var(--acc) 55%, transparent), 0 12px 20px -8px rgba(0, 0, 0, .8);
  transition: transform .35s var(--ease);
}
.lmedal__face img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.lmedal__face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(11, 12, 13, .35), inset 0 0 14px rgba(11, 12, 13, .45); }
.lmedal:hover .lmedal__face, .lstep__a:hover .lmedal__face { transform: translateY(-3px); }
.lmedal:hover img, .lstep__a:hover img { transform: scale(1.08); }
.lmedal__name { font: 700 .9375rem/1.1 var(--f-slab); }
.lmedal__when { font: 600 .5625rem/1.3 var(--f-slab); letter-spacing: .12em; text-transform: uppercase; color: var(--mute-d); text-wrap: balance; }
.lstep { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.lstep__a { display: flex; align-items: center; gap: 16px; text-decoration: none; padding: 12px 22px 12px 12px; border: 1px solid var(--rule-d); border-radius: 999px; min-height: 64px; transition: border-color .25s, background-color .25s; min-width: 0; }
.lstep__a:hover { border-color: var(--acc); background: color-mix(in oklab, var(--acc) 8%, transparent); }
.lstep__a--next { flex-direction: row-reverse; text-align: right; padding: 12px 12px 12px 22px; }
.lstep__a .lmedal__face { width: 56px; box-shadow: 0 0 0 2px var(--acc), 0 0 0 4px var(--charcoal), 0 8px 14px -6px rgba(0, 0, 0, .8); }
.lstep__t { display: grid; gap: 2px; min-width: 0; }
.lstep__t small { font: 600 .625rem/1.2 var(--f-slab); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.lstep__t b { font: 700 1.25rem/1.1 var(--f-slab); }
.lstep__t em { font-style: normal; font-size: .75rem; color: var(--mute-d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lalso__paths { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: clamp(18px, 2.4vw, 28px); font: 600 var(--t-rim)/1 var(--f-slab); letter-spacing: .18em; text-transform: uppercase; color: var(--mute-d); }
.lalso__paths a { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; text-decoration: none; color: var(--chalk); }
.lalso__paths a i { font-style: normal; color: var(--acc); }
.lalso__paths a:hover { color: var(--acc); }
@media (min-width: 700px) { .lstep { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= PATH HUBS ================= */
.hubhero { position: relative; isolation: isolate; overflow: clip; background: radial-gradient(60% 80% at 82% 30%, color-mix(in oklab, var(--acc) 16%, transparent), transparent 70%), radial-gradient(70% 70% at 0% 100%, rgba(44, 74, 63, .35), transparent 70%), var(--ink); }
.hubhero__rosette { position: absolute; z-index: -1; width: min(120vw, 1000px); aspect-ratio: 1; right: -16%; top: 50%; translate: 0 -50%; background: var(--acc); opacity: .07; -webkit-mask: url(/img/guilloche-rosette.svg) center / contain no-repeat; mask: url(/img/guilloche-rosette.svg) center / contain no-repeat; }
.hubhero__in { display: grid; gap: 14px 40px; align-items: center; padding: clamp(8px, 4vw, 56px) 0 clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); }
.hubhero__copy { display: grid; gap: 12px; justify-items: start; }
.hubhero__title { display: flex; align-items: baseline; gap: .18em; font-size: clamp(3rem, 1rem + 9vw, 8rem); line-height: .92; letter-spacing: -.02em; }
.hubhero__title i { font-style: normal; font-size: .62em; color: transparent; -webkit-text-stroke: 1.5px var(--acc); letter-spacing: 0; }
.hubhero__blurb { font: 600 clamp(1.15rem, .95rem + 1vw, 1.75rem)/1.2 var(--f-slab); max-width: 26ch; text-wrap: balance; }
.hubhero__count { font: 600 var(--t-rim)/1.3 var(--f-slab); letter-spacing: .18em; text-transform: uppercase; color: var(--mute-d); }
.hubhero__fork { justify-self: center; width: min(62%, 230px); }
.forkart { display: block; width: 100%; height: auto; overflow: visible; }
.forkart path { fill: none; stroke: var(--copper-lo); stroke-width: 2.4; stroke-linecap: round; opacity: .5; }
.forkart .stem { stroke: var(--acc); opacity: .9; }
.forkart .b.is-on { stroke: var(--acc); stroke-width: 5; opacity: 1; }
.forkart .node circle { fill: var(--ink); stroke: var(--copper-lo); stroke-width: 1.8; transition: fill .3s, stroke .3s; }
.forkart .node.is-on circle { fill: var(--acc); stroke: var(--acc); }
.forkart .num { font: 700 20px var(--f-slab); fill: var(--chalk); }
.forkart .node.is-on .num { fill: var(--ink); }
.forkart .lab { font: 600 10px var(--f-slab); letter-spacing: .22em; fill: var(--mute-d); }
.forkart .node.is-on .lab { fill: var(--acc); }
.forkart a:hover .node circle { stroke: var(--acc); }
.forkart a:focus-visible { outline: none; }
.forkart a:focus-visible .node circle { stroke: var(--chalk); stroke-width: 3; }
@media (min-width: 900px) { .hubhero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .hubhero__fork { width: min(100%, 420px); } }

.hubtiles { padding-block: clamp(32px, 4vw, 56px) var(--sec); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(300px, 74vw); }
.tile { position: relative; border-radius: 24px; overflow: hidden; isolation: isolate; background: var(--tint); box-shadow: 0 0 0 1px color-mix(in oklab, var(--acc) 42%, transparent); }
.tile__a { position: absolute; inset: 0; display: block; text-decoration: none; color: var(--chalk); }
.tile__img { position: absolute; inset: 0; margin: 0; z-index: -2; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile__a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in oklab, var(--tint) 94%, #000) 0%, color-mix(in oklab, var(--tint) 62%, transparent) 42%, transparent 78%), radial-gradient(60% 50% at 90% 0%, color-mix(in oklab, var(--acc) 16%, transparent), transparent 70%); }
.tile__a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pat) center / cover no-repeat; opacity: .1; }
.tile:hover .tile__img img { transform: scale(1.045); }
.tile__a:focus-visible { outline-offset: -4px; }
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px, 2.4vw, 32px); display: grid; gap: 6px; justify-items: start; }
.tile__no { width: 100%; display: flex; justify-content: space-between; gap: 12px; font: 600 .625rem/1 var(--f-slab); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.tile__name { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); letter-spacing: -.015em; text-shadow: 0 2px 22px rgba(0, 0, 0, .5); }
.tile__status { font: 600 var(--t-rim)/1.3 var(--f-slab); letter-spacing: .18em; text-transform: uppercase; color: var(--chalk); }
.tile__reading { font: 600 .9375rem/1.3 var(--f-slab); color: color-mix(in oklab, var(--acc) 42%, #fff); max-width: 46ch; }
.tile__go { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; font-weight: 600; font-size: .875rem; color: var(--chalk); }
.tile__go::after { content: ""; width: 1.6em; height: 1px; background: currentColor; transition: transform .3s var(--ease); transform-origin: left; }
.tile:hover .tile__go::after { transform: scaleX(1.6); }
@media (min-width: 900px) {
  .tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(260px, 28vw, 410px); }
  .tile { grid-column: span var(--span); grid-row: span var(--rows); }
}
.hubnexts__row { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.hubnext { display: flex; align-items: center; gap: 18px; padding: 22px; border: 1px solid var(--rule-l); border-radius: 22px; text-decoration: none; color: var(--ink); transition: background-color .25s, border-color .25s; }
.hubnext:hover { background: rgba(122, 69, 38, .07); border-color: var(--copper-ink); }
/* the two other paths read as cards you can press: a lifted face and an arrow that moves on hover */
.hubnext { position: relative; padding-right: 60px; background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .26)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 18px 30px -24px rgba(60, 40, 20, .55); }
.hubnext:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .4)); }
.hubnext::after { content: "\2192"; position: absolute; right: 24px; top: 50%; translate: 0 -50%; font: 700 1.4rem/1 var(--f-slab); color: var(--copper-ink); transition: transform .3s var(--ease); }
.hubnext:hover::after, .hubnext:focus-visible::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .hubnext::after { transition: none; } }
.hubnext i { font: 700 2.4rem/1 var(--f-slab); font-style: normal; color: var(--copper-ink); min-width: 2.2ch; }
.hubnext span { display: grid; gap: 4px; }
.hubnext b { font: 700 1.5rem/1.1 var(--f-slab); }
.hubnext em { font-style: normal; font-size: var(--t-small); color: var(--mute-l); }
@media (min-width: 700px) { .hubnexts__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= LIGHTBOX ================= */
.lbx { border: 0; padding: 0; background: transparent; color: var(--chalk); width: 100%; max-width: 100vw; height: 100dvh; max-height: 100dvh; }
.lbx::backdrop { background: rgba(11, 12, 13, .93); }
.lbx[open] { display: grid; place-items: center; }
.lbx figure { margin: 0; display: grid; gap: 12px; justify-items: center; max-width: min(92vw, 900px); }
.lbx img { max-height: 76dvh; width: auto; max-width: 100%; height: auto; object-fit: contain; border-radius: 14px; box-shadow: 0 0 0 1px var(--rule-d), 0 40px 80px -30px #000; background: #101113; }
.lbx figcaption { font: 600 var(--t-rim)/1.3 var(--f-slab); letter-spacing: .2em; text-transform: uppercase; color: var(--copper); text-align: center; }
.lbx__x, .lbx__nav { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(201, 138, 94, .55); background: rgba(11, 12, 13, .7); color: var(--copper); font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lbx__x:hover, .lbx__nav:hover { background: rgba(201, 138, 94, .16); }
.lbx__x { top: 16px; right: 16px; }
.lbx__nav { top: 50%; translate: 0 -50%; }
.lbx__nav--prev { left: 12px; } .lbx__nav--next { right: 12px; }
@media (max-width: 640px) { .lbx__nav { top: auto; bottom: 18px; translate: none; } }

/* ================= MOTION: transform and opacity only, below the fold, final state is the default ================= */
@media (prefers-reduced-motion: no-preference) {
  .motion .lhero__img img { animation: lh-settle 1.8s var(--ease) both; }
  @keyframes lh-settle { from { transform: scale(1.08); } }
  .motion .lhero__sun { animation: lh-rise 1.9s var(--ease) both; }
  @keyframes lh-rise { from { transform: translateY(16%); } }
  .motion .lhero--mint .ticket, .motion .lhero--window .window img { animation: none; }
  .motion .lhero--window .window img { animation: lh-settle 1.8s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  .lhero__img img, .lead__img img, .plate img, .tile__img img, .lmedal__face, .lmedal__face img, .ticket { transition: none; }
  .lreading.is-swap dd { animation: none; }
  .run__bar i { transition: none; }
}

/* ---- drawn flats (build_lines.py flats()): drawings, labelled as drawings, pinned like a cutting-table sheet */
.flats__head { max-width: 62ch; }
.flats__row { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: clamp(14px, 2vw, 26px); }
.flat figure { margin: 0; position: relative; background: #f6f2ea; padding: 10px 10px 0; border-radius: 4px;
  box-shadow: 0 0 0 1px var(--rule-l), 0 16px 28px -20px rgba(0, 0, 0, .5); transform: rotate(var(--r, 0deg)); transition: transform .35s var(--ease); }
.flat:nth-child(3n+1) { --r: -.8deg; } .flat:nth-child(3n+2) { --r: .6deg; } .flat:nth-child(3n) { --r: -.3deg; }
.flat figure::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--copper-hi), var(--copper-lo)); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.flat img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; cursor: zoom-in; }
.flat figcaption { padding: 10px 2px 12px; font: 600 .72rem/1.2 var(--f-slab); letter-spacing: .16em; text-transform: uppercase; color: var(--copper-ink); text-align: center; }
.flat:hover figure { transform: rotate(0) translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .flat figure { transition: none; } }

/* ---- small goods: flat-art pieces not priced yet */
.piece--flatart .price--soft { font-weight: 600; }
.goes__art { width: 56px; height: 56px; object-fit: contain; border-radius: 50%; background: #141518; padding: 6px; box-sizing: border-box;
  box-shadow: 0 0 0 1px var(--rule-l); margin-right: 12px; vertical-align: middle; cursor: zoom-in; flex: none; }

/* ---- colour swatches in the meaning block (swatches.js turns each colour into a button and adds the panel underneath).
   Two-class selectors so these win over swatches.css, which loads after this file. Finished on dark and bone grounds. */
.lmean .planchets { gap: 10px 12px; }
.lmean .planchet-btn {
  appearance: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 3px 16px 3px 3px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, rgba(242, 241, 237, .08), rgba(242, 241, 237, .02)); border: 1px solid rgba(242, 241, 237, .16); color: var(--chalk);
  font: 600 .875rem/1 var(--f-body); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 16px -12px rgba(0, 0, 0, .7);
}
.lmean .planchet-btn i { margin: 0; width: 38px; }
.lmean .planchet-btn:hover { border-color: var(--acc); }
.lmean .planchet-btn[aria-pressed="true"] { border-color: var(--acc); background: color-mix(in oklab, var(--acc) 18%, transparent); box-shadow: inset 0 0 0 1px var(--acc), 0 10px 20px -12px rgba(0, 0, 0, .8); }
.lmean .swatchbox {
  margin-top: 14px; padding: 16px 18px 18px; border-radius: 18px; color: var(--chalk);
  border: 1px solid color-mix(in oklab, var(--acc) 34%, transparent); background: linear-gradient(180deg, rgba(11, 12, 13, .5), rgba(11, 12, 13, .3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 40px -30px #000;
}
.lmean .swatchbox__h { font: 600 var(--t-rim)/1.3 var(--f-slab); letter-spacing: .18em; text-transform: uppercase; color: var(--mute-d); margin-bottom: 12px; }
.lmean .swatchbox__h b, .lmean .swatchbox__none b { color: var(--acc); }
.lmean .swatchbox__t { background: rgba(242, 241, 237, .05); border-color: rgba(242, 241, 237, .14); color: var(--chalk); font-weight: 600; }
.lmean .swatchbox__t:hover { border-color: var(--acc); }
.on-bone .planchet-btn { background: linear-gradient(180deg, #fbf8f2, var(--chalk)); border-color: var(--rule-l); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 8px 16px -12px rgba(60, 40, 20, .45); }
.on-bone .planchet-btn:hover { border-color: var(--acc-ink); }
.on-bone .planchet-btn[aria-pressed="true"] { border-color: var(--acc-ink); background: color-mix(in oklab, var(--acc-ink) 12%, #fbf8f2); box-shadow: inset 0 0 0 1px var(--acc-ink), 0 10px 18px -12px rgba(60, 40, 20, .5); }
.on-bone .planchet-btn:focus-visible, .on-bone .swatchbox__t:focus-visible { outline-color: var(--acc-ink); }
.on-bone .swatchbox { background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .36)); border-color: color-mix(in oklab, var(--acc-ink) 30%, transparent); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 22px 36px -30px rgba(60, 40, 20, .6); }
.on-bone .swatchbox__h, .on-bone .swatchbox__none { color: var(--mute-l); }
.on-bone .swatchbox__h b, .on-bone .swatchbox__none b { color: var(--acc-ink); }
.on-bone .swatchbox__t { background: #fbf8f2; border-color: var(--rule-l); color: var(--ink); }
.on-bone .swatchbox__t:hover { border-color: var(--acc-ink); }

/* small phones: the coin window or badge sits above the title so the sentence keeps the full width,
   and the outline chapter number steps back so it never fights the breadcrumb */
@media (max-width: 559px) {
  .lhero.has-art .lhero__in { grid-template-columns: minmax(0, 1fr); }
  .lhero.has-art .lhero__art { grid-column: 1; grid-row: 1; justify-self: end; }
  .lhero.has-art .lhero__main { grid-column: 1; grid-row: 2; }
  .lhero.has-art .lhero__quote { grid-column: 1; grid-row: 3; }
  .lhero__num { opacity: .26; }
}
/* phones: the title block covers most of the photograph, so a soft scrim sits behind the words only */
@media (max-width: 699px) {
  .lhero__in::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none; top: -48px; bottom: 0; left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut));
    background: linear-gradient(0deg, color-mix(in oklab, var(--tint) 86%, #000) 0%, color-mix(in oklab, var(--tint) 58%, transparent) 55%, transparent 100%);
  }
}

/* a plain sentence under the line title: what you can actually buy here */
.lhero__what { max-width: 52ch; margin: 10px 0 0; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.5; color: var(--chalk, #f2f1ed); opacity: .94; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
@media (max-width: 560px) { .flats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .flat figcaption { font-size: .62rem; letter-spacing: .1em; } }