/* ASM centre line (SITE-UPGRADE phase 3): the Kid Called Beast-style spine for the public pages, the profiles and
   the Clothing page, plus the modern-but-human touches line.js drives. Own code, no library.
   - [data-line] sections draw one thin vertical rule down the middle (behind the content; from 751 px up).
   - .lhead: a symmetric section header: mono index · rule · mono label · rule · mono meta, then a centred title.
   - Film grain: one static noise layer on wide screens only (no animation, no blend mode).
   - The cursor ring and magnetic buttons are opt-in (line.js; fine pointers, motion allowed). Calm by design: slow
     fades and small scale changes only (Connor, 2026-10-13).
   Everything is in its final state without JS and under reduced motion. */

:root { --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --spine: rgba(255, 255, 255, .09); }

.mono-label { margin: 0; font: 500 11px/1.25 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mono-label b { color: var(--ink); font-weight: 500; }

/* ---- the spine */
[data-line] { position: relative; isolation: isolate; }
@media (min-width: 751px) {
  [data-line]::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, var(--spine) 6%, var(--spine) 94%, transparent); pointer-events: none; }
}

/* ---- symmetric section header */
/* grid 1fr auto 1fr: the pill sits on the true centre line even when the side labels differ in width */
.lhead { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 14px; max-width: 1320px; margin: 0 auto 22px; }
.lhead-side { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lhead-side:first-child { grid-column: 1; justify-self: stretch; } .lhead-side:last-child { grid-column: 3; justify-self: stretch; }
.lhead-side > i { flex: 1 1 0; height: 1px; background: var(--line-strong); }
.lhead-side > .mono-label { flex: none; color: var(--subtle); white-space: nowrap; }
.lhead-k { flex: none; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-deepest, #08090a); color: var(--ink-secondary); }
.lhead-title { margin: 0 auto; max-width: 16ch; text-align: center; font: 600 clamp(40px, 6.4vw, 96px)/.92 var(--display, 'Oswald', sans-serif); letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; }
.lhead-lede { max-width: 54ch; margin: 18px auto 0; text-align: center; color: var(--ink-secondary); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.lhead-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
@media (max-width: 750px) {
  .lhead { column-gap: 10px; } .lhead-side { gap: 10px; }
  .lhead-side > .mono-label { display: none; }
}

/* ---- film grain (wide screens; static) */
@media (min-width: 861px) {
  body.grain::after { content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
}

/* ---- cursor ring (line.js adds it on fine pointers with motion allowed) */
.cursor-ring { position: fixed; z-index: 70; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .2s; }
.cursor-ring.is-on { opacity: 1; }
.cursor-ring span { position: absolute; left: -9px; top: -9px; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; color: #0b0b0c; font: 500 10px/1 var(--mono); letter-spacing: .14em; overflow: hidden; transition: width .3s cubic-bezier(.16, 1, .3, 1), height .3s cubic-bezier(.16, 1, .3, 1), left .3s cubic-bezier(.16, 1, .3, 1), top .3s cubic-bezier(.16, 1, .3, 1), background .2s, border-color .2s; }
.cursor-ring[data-mode="link"] span { left: -18px; top: -18px; width: 36px; height: 36px; border-color: rgba(255, 255, 255, .35); }
.cursor-ring:is([data-mode="view"], [data-mode="drag"]) span { left: -38px; top: -38px; width: 76px; height: 76px; border-color: #f2f2f0; background: #f2f2f0; }
html.has-ring [data-cursor] { cursor: none; }
html.has-ring [data-cursor] :is(a, button) { cursor: pointer; }

/* ---- magnetic primary buttons */
html.motion-ok .is-magnet { transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .2s, border-color .2s, color .2s; will-change: transform; }

/* ---- hover image swap (product tiles): fine pointers only; touch keeps the first image */
.swap { position: relative; display: block; overflow: hidden; }
.swap > picture, .swap > img { display: block; }
.swap > :nth-child(2) { position: absolute; inset: 0; opacity: 0; transition: opacity .55s cubic-bezier(.16, 1, .3, 1); }
.swap img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .swap:is(:hover, :focus-within) > :nth-child(2), a:is(:hover, :focus-visible) .swap > :nth-child(2) { opacity: 1; }
}

/* ---- home: the hub tile in the index and the Clothing band */
.index-card.hub-card { background: radial-gradient(120% 90% at 70% 100%, #1d1e21, var(--bg-deepest) 70%); }
.hub-card .index-media img { object-fit: contain; object-position: 100% 100%; opacity: .92; }
.hub-card .index-media::after { background: linear-gradient(90deg, rgba(8, 9, 10, .94) 22%, transparent 70%), linear-gradient(180deg, transparent 55%, rgba(8, 9, 10, .7)); }
.index-card.crate-card .index-media img { object-position: 50% 45%; opacity: .55; }

.clothing-band { padding: 110px var(--gutter) 100px; border-top: 1px solid var(--line); }
.clothing-band .lhead-title { max-width: 12ch; }
.cb-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; max-width: 1320px; margin: 40px auto 0; }
.cb-main, .cb-side { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-base); }
.cb-main img, .cb-side img { width: 100%; height: 100%; object-fit: cover; }
.cb-main { aspect-ratio: 16 / 10; }
/* The portrait follows the landscape render's height (the row is set by .cb-main), cropped to the face. */
.cb-side { aspect-ratio: auto; min-height: 280px; }
.cb-side > a, .cb-side picture { position: absolute; inset: 0; display: block; }
.cb-side img { object-position: 50% 30%; }
.cb-main figcaption, .cb-side figcaption { position: absolute; left: 14px; bottom: 14px; right: 14px; display: flex; justify-content: space-between; gap: 10px; }
.cb-tag { padding: 7px 11px; border-radius: 999px; background: rgba(8, 9, 10, .78); color: #e8e8e6; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.cb-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1320px; margin: 12px auto 0; padding: 0; list-style: none; }
.cb-strip a { display: block; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #f3f3f1; }
.cb-strip .swap { aspect-ratio: 1; }
.cb-strip span.mono-label { display: block; padding: 10px 12px; background: var(--bg-base); color: var(--ink-secondary); }
.cb-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin-top: 26px; }
.cb-foot .mono-label { color: var(--subtle); }
@media (max-width: 860px) {
  .cb-grid { grid-template-columns: minmax(0, 1fr); }
  .cb-side { aspect-ratio: 4 / 5; }
  .cb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clothing-band { padding: 80px 16px 70px; }
}

/* ---- home index: the centred head, the hub tile across the grid */
.index-head.index-head-center { display: block; margin-bottom: 30px; text-align: center; }
.index-head-center h2.lhead-title { margin: 0 auto; }
.index-head-center p.lhead-lede { max-width: 54ch; margin: 18px auto 0; }
.index-head-center .chips { justify-content: center; margin-top: 16px; }
.index-card.w6 { grid-column: span 6; min-height: 330px; }
.hub-card h3 { max-width: 12ch; font-size: clamp(30px, 3.4vw, 50px); }
.hub-card p { max-width: 46ch; }
@media (max-width: 860px) {
  .index-card.w6 { grid-column: span 2; min-height: 430px; }
  .hub-card .index-media img { object-position: 50% 0; height: 50%; }
  .hub-card .index-media::after { background: linear-gradient(180deg, transparent 30%, rgba(8, 9, 10, .96) 62%); }
}
.cb-strip a:has(.swap-light), .swap-light { background: #2b2c2f; }
.swap-light > picture:first-child img { object-fit: contain; }

/* ---- home hub: from the studio (Connor's renders), a calm scroll-snap strip */
.studio-strip { padding: 110px 0 80px !important; border-top: 1px solid var(--line); }
.studio-strip > .lhead, .studio-strip > .lhead-title, .studio-strip > .lhead-lede { margin-inline: auto; padding-inline: var(--gutter); }
.studio-controls { margin: 30px var(--gutter) 18px; }
.studio-rail { gap: 14px; }
.studio-shot { position: relative; flex: 0 0 auto; height: min(62vh, 520px); margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #0d0e10; scroll-snap-align: start; }
.studio-shot picture { display: block; height: 100%; }
.studio-shot img { display: block; width: auto; height: 100%; max-width: none; }
.studio-shot.studio-still { aspect-ratio: 1; }
.studio-shot figcaption { position: absolute; z-index: 1; left: 12px; bottom: 12px; padding: 7px 11px; border-radius: 999px; background: rgba(8, 9, 10, .78); color: #d4d6da; }
/* ---- home hub: the lookbook strip inside the Clothing band */
.cb-look.carousel-section { max-width: 1320px; margin: 12px auto 0; padding: 0; overflow: visible; }
.cb-look-head { margin: 26px 0 14px; }
.cb-look-rail { gap: 12px; margin: 0; padding: 0 0 14px; list-style: none; }
.cb-look-item { flex: 0 0 min(300px, 70vw); scroll-snap-align: start; }
.cb-look-item a { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-base); color: var(--ink); }
.cb-look-item picture { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.cb-look-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.16, 1, .3, 1); }
.cb-look-item .mono-label { display: block; padding: 10px 12px; color: var(--ink-secondary); }
@media (hover: hover) and (pointer: fine) { .cb-look-item a:hover img { transform: scale(1.03); } }
/* ---- home hub: the art wall (bento on the centre line; the caption shows on hover, focus or a tap) */
.art-wall { padding: 110px var(--gutter) 100px; border-top: 1px solid var(--line); }
.art-wall .lhead-title { max-width: 18ch; }
.art-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 230px; gap: 12px; max-width: 1320px; margin: 42px auto 26px; }
.art-tile { position: relative; grid-column: span 2; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #0d0e10; outline-offset: 3px; }
.art-tile.w3 { grid-column: span 3; } .art-tile.w4 { grid-column: span 4; } .art-tile.w6 { grid-column: span 6; } .art-tile.h2 { grid-row: span 2; }
.art-tile picture, .art-tile img { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-tile img { object-fit: cover; transition: transform 1.8s cubic-bezier(.16, 1, .3, 1); }
.art-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 48px 16px 14px; background: linear-gradient(transparent, rgba(8, 9, 10, .9)); opacity: 0; translate: 0 6px; transition: opacity .7s ease, translate .7s ease; }
.art-tile figcaption b { font: 600 22px/1 var(--display, 'Oswald', sans-serif); letter-spacing: .01em; text-transform: uppercase; }
.art-tile:is(:hover, :focus, :focus-within) figcaption { opacity: 1; translate: none; }
.art-tile:is(:hover, :focus) img { transform: scale(1.03); }
.art-tile.art-quote figcaption { inset: 0; place-content: center; justify-items: center; padding: 0; background: none; opacity: 1; translate: none; text-align: center; }
.art-tile.art-quote figcaption b { font-size: clamp(30px, 4vw, 54px); }
@media (max-width: 860px) {
  .studio-strip { padding: 80px 0 60px !important; }
  .studio-shot { height: 56vw; max-height: 340px; }
  .art-wall { padding: 80px 16px 70px; }
  .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; gap: 10px; }
  .art-tile, .art-tile.w3 { grid-column: span 1; }
  .art-tile.w4, .art-tile.w6 { grid-column: span 2; }
}

html.reduce-motion .cursor-ring { display: none; }
@media (prefers-reduced-motion: reduce) { .cursor-ring { display: none; } .swap > :nth-child(2), .art-tile img, .art-tile figcaption, .cb-look-item img { transition: none; } }

/* ---------------------------------------------------------------- calm motion (2026-10-13: "animations still ... like
   scrolling and UI animations, no videos"). Scroll-driven where the browser has view timelines, otherwise everything
   simply shows. Only opacity, translate, clip-path and transform; all off without html.motion-ok. */
@keyframes line-rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: none; } }
@keyframes line-draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes line-mask { from { clip-path: inset(0 0 100% 0); translate: 0 .35em; } to { clip-path: inset(0 0 -10% 0); translate: none; } }
@keyframes line-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@supports (animation-timeline: view()) {
  /* tiles rise in as they enter, a column at a time (each column starts a little later in the scroll) */
  html.motion-ok :is(.hub-grid > .index-card, .art-grid > .art-tile, .cb-look-item, .cb-strip > li, .cl-grid > .cl-tile, .studio-shot, .devlog-item) { animation: line-rise linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; }
  html.motion-ok :is(.hub-grid > .index-card, .art-grid > .art-tile, .cl-grid > .cl-tile):nth-child(3n+2) { animation-range: entry 12% entry 62%; }
  html.motion-ok :is(.hub-grid > .index-card, .art-grid > .art-tile, .cl-grid > .cl-tile):nth-child(3n) { animation-range: entry 19% entry 69%; }
  /* images wipe open from the top as they arrive */
  html.motion-ok :is(.art-tile picture, .cb-main picture, .cb-side picture, .cl-feature-main picture, .cl-band-media picture, .cl-statement-media picture) { display: block; animation: line-wipe linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  /* section headings: the hairlines draw out from the label, the big titles wipe up into place */
  html.motion-ok .lhead-side > i { animation: line-draw linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  html.motion-ok .lhead-side:first-child > i { transform-origin: 100% 50%; } html.motion-ok .lhead-side:last-child > i { transform-origin: 0 50%; }
  html.motion-ok .lhead-title { animation: line-mask linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  /* the section labels pin to the top while their section scrolls by (wide screens) */
  @media (min-width: 861px) {
    :is(.hub, .art-wall, .studio-strip, .clothing-band) > .lhead { position: sticky; top: 0; z-index: 4; padding-block: 14px; background: var(--bg-deepest, #08090a); box-shadow: 0 0 0 100vmax var(--bg-deepest, #08090a); clip-path: inset(0 -100vmax); }
  }
}
/* UI: link underlines draw in, outline buttons fill from the left, cards lift a little */
@media (hover: hover) and (pointer: fine) {
  html.motion-ok :is(.footer-main > div > a, .footer-bottom a, .underlink, .hub-collect-note a) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s cubic-bezier(.16, 1, .3, 1), color .2s; }
  html.motion-ok :is(.footer-main > div > a, .footer-bottom a, .underlink, .hub-collect-note a):is(:hover, :focus-visible) { background-size: 100% 1px; }
  html.motion-ok .button:not(.filled):not(.play):not([disabled]) { background-image: linear-gradient(#f2f2f0, #f2f2f0); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .45s cubic-bezier(.16, 1, .3, 1), color .3s, border-color .3s; }
  html.motion-ok .button:not(.filled):not(.play):not([disabled]):is(:hover, :focus-visible) { background-size: 100% 100%; color: #0b0b0c; border-color: #f2f2f0; }
  html.motion-ok :is(.hub-tile, .cl-tile a, .cb-look-item a, body[data-page="collectors"] .explore-card) { transition: translate .6s cubic-bezier(.16, 1, .3, 1), border-color .3s; }
  html.motion-ok :is(.hub-tile, .cl-tile a, .cb-look-item a):hover { translate: 0 -4px; }
}
/* centred tile copy on the Clothing page and in the Clothing band */
.cl-tile-copy { justify-items: center; text-align: center; padding-inline: 40px; }
.cb-look-head { flex-direction: column; }
.studio-controls { flex-direction: column; }