/* ==========================================================================
   Titans Studio.

   Every colour here is a token from titans.css. The only new values are the
   four collection accents, which arrive as --accent on the section and are
   used for an icon, a hairline and a tag — never a background. The page is
   carried by the site's own daylight palette, so Studio reads as part of
   Titans rather than as a microsite that borrowed the header.

   Loaded only on /studio and the card routes, via the stylesheets option on
   layout(), so no other page pays for it.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */

.shero {
  padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem);
}

.shero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .shero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.shero__eyebrow { margin: 0 0 1rem; }

.shero__title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6.5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  color: var(--bone);
  text-wrap: balance;
}

.shero__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--bone-2);
  max-width: 34ch;
  margin: 0 0 1.75rem;
}

.shero__acts { margin: 0; }

/* The fan. Four fronts, overlapped, tilted a little more at each end. Purely
   decorative — aria-hidden, and every card is reachable in the grid below —
   so it carries no alt text and is the first thing dropped on a phone, where
   four 140px cards in a row would be four 90px cards nobody can see. */
.shero__fan {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

@media (min-width: 48rem) {
  .shero__fan { display: flex; }
}

.shero__card {
  width: clamp(7rem, 15vw, 10.5rem);
  aspect-ratio: 5 / 7;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1.25rem 2.5rem rgba(22, 41, 62, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.5);
  transition: transform 220ms ease;
}

.shero__card img { display: block; width: 100%; height: 100%; object-fit: cover; }

.shero__card--1 { transform: rotate(-9deg)  translateY(0.6rem); z-index: 1; }
.shero__card--2 { transform: rotate(-3deg)  translateY(-0.4rem); margin-left: -2.5rem; z-index: 2; }
.shero__card--3 { transform: rotate(3deg)   translateY(-0.4rem); margin-left: -2.5rem; z-index: 3; }
.shero__card--4 { transform: rotate(9deg)   translateY(0.6rem);  margin-left: -2.5rem; z-index: 4; }

@media (prefers-reduced-motion: no-preference) {
  .shero__fan:hover .shero__card--1 { transform: rotate(-12deg) translateY(0.3rem); }
  .shero__fan:hover .shero__card--4 { transform: rotate(12deg)  translateY(0.3rem); }
}

/* ---- Edition strip -------------------------------------------------------- */

.sstrip {
  border-block: 1px solid var(--line);
  background: var(--panel);
}

.sstrip__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  /* padding-BLOCK, not the shorthand: .wrap supplies the horizontal gutter
     and `padding: x 0` silently zeroed it, putting the strip flush against
     the left edge of the viewport. */
  padding-block: 0.9rem;
  font-family: var(--mono, inherit);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-2);
}

.sstrip__i { display: inline-flex; align-items: center; gap: 0.5rem; }

.sstrip__i + .sstrip__i::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--line-2);
  margin-right: 0.5rem;
}

/* ---- Collection section --------------------------------------------------- */

.scoll { padding: clamp(2.75rem, 6vw, 4.5rem) 0 0; }

.scoll__head {
  display: grid;
  gap: 0.35rem;
  max-width: 58ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1.25rem;
  border-top: 2px solid var(--accent, var(--line-2));
}

.scoll__icon {
  display: block;
  width: 1.5rem; height: 1.5rem;
  color: var(--accent, var(--bone-2));
  margin-bottom: 0.35rem;
}

.scoll__icon svg { width: 100%; height: 100%; display: block; }

.scoll__name {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.1;
  margin: 0;
  color: var(--bone);
}

.scoll__tag {
  margin: 0;
  font-size: 1rem;
  color: var(--bone);
  font-weight: 500;
}

.scoll__desc {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--bone-2);
}

/* ---- Grid ----------------------------------------------------------------- */

.sgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) { .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .sgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Card tile ------------------------------------------------------------
   NAMED .stile, NOT .scard. titans.css already owns .scard and its fifteen
   rules still paint the comps block on every sold-item page, so a Studio tile
   under that name inherited a white panel background and a 4:3 shot box. The
   collision was invisible in the source and obvious in the browser. */

.stile__link {
  display: grid;
  gap: 0.85rem;
  text-decoration: none;
  color: inherit;
  border-radius: 0.75rem;
  outline-offset: 4px;
}

.stile__shot {
  display: block;
  aspect-ratio: 5 / 7;
  border-radius: 0.65rem;
  overflow: hidden;
  background: var(--ink-3);
  box-shadow: 0 0.35rem 1rem rgba(22, 41, 62, 0.12), 0 0 0 1px var(--line);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.stile__shot picture, .stile__shot img {
  display: block; width: 100%; height: 100%;
}

/* Never crop. The sources are 5:7 and so is the box, so `contain` is a
   guarantee rather than a fit: if a future card arrives at the wrong ratio it
   letterboxes instead of silently losing an edge. */
.stile__shot img { object-fit: contain; }

@media (prefers-reduced-motion: no-preference) {
  .stile__link:hover .stile__shot,
  .stile__link:focus-visible .stile__shot {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem rgba(22, 41, 62, 0.2), 0 0 0 1px var(--line-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stile__link:hover .stile__shot,
  .stile__link:focus-visible .stile__shot {
    box-shadow: 0 1rem 2rem rgba(22, 41, 62, 0.2), 0 0 0 1px var(--line-2);
  }
}

.stile__body { display: grid; gap: 0.3rem; }

.stile__name {
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--bone);
}

.stile__ed {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-3);
}

/* ---- Collection tag ------------------------------------------------------- */

.stag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, var(--bone-2));
}

.stag__icon { width: 0.95rem; height: 0.95rem; display: block; }
.stag__icon svg { width: 100%; height: 100%; display: block; }

/* ---- Buttons -------------------------------------------------------------- */

.sbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: 2rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.sbtn--go {
  background: var(--bone);
  color: var(--ink);
  box-shadow: 0 0.35rem 1rem rgba(22, 41, 62, 0.22);
}

.sbtn--go:hover { box-shadow: 0 0.6rem 1.4rem rgba(22, 41, 62, 0.28); }

@media (prefers-reduced-motion: no-preference) {
  .sbtn--go:hover { transform: translateY(-1px); }
}

/* ---- Reservation ---------------------------------------------------------- */

.sres {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: clamp(2rem, 5vw, 3.25rem) 0;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.sres__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (min-width: 52rem) {
  .sres__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.sres__title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.1;
  margin: 0 0 0.6rem;
  color: var(--bone);
}

.sres__lede {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--bone-2);
  max-width: 46ch;
}

.sform { display: grid; gap: 0.9rem; }

.sform__trap { position: absolute; left: -9999px; }

.sform__f { display: grid; gap: 0.35rem; margin: 0; }

.sform__l {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-3);
}

.sform__i {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: 0.5rem;
  background: var(--ink);
  color: var(--bone);
  font: inherit;
  font-size: 1rem;
}

.sform__i:focus-visible { outline: 2px solid var(--bone); outline-offset: 1px; }
.sform__i[readonly] { background: var(--ink-3); color: var(--bone-2); }

.sform__selwrap { position: relative; display: block; }
.sform__sel { appearance: none; padding-right: 2.25rem; }
.sform__caret {
  position: absolute; right: 0.9rem; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--bone-3);
}

.sform__act { margin: 0.25rem 0 0; }
.sform__act .sbtn { width: 100%; }

@media (min-width: 30rem) { .sform__act .sbtn { width: auto; } }

.sform__fine {
  margin: 0;
  font-size: 0.78rem;
  color: var(--bone-3);
}

/* The inline success state that replaces the form in Phase 3. */
.sform__done {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line-2);
  border-radius: 0.6rem;
  background: var(--ink);
  color: var(--bone);
  font-size: 0.98rem;
  line-height: 1.5;
}

.sform__err {
  margin: 0;
  font-size: 0.85rem;
  color: #8E3B34;
}

/* ---- Footnote ------------------------------------------------------------- */

.snote {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--bone-3);
  max-width: 76ch;
}

/* ==========================================================================
   The card page.
   ========================================================================== */

.scardpage {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  padding-top: 0.5rem;
}

@media (min-width: 60rem) {
  .scardpage { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); align-items: start; }
  /* The gallery stays put while the long right column scrolls past it. */
  .scardpage__gal { position: sticky; top: 5.5rem; }
}

/* ---- The flip -------------------------------------------------------------
   THE CONTAINER OWNS THE HEIGHT, not the faces. Both faces are absolutely
   positioned so they occupy the same space, which means nothing else on the
   page can know which one is showing — the column does not jump by a pixel
   when the card turns. aspect-ratio gives the container its height without a
   magic number. */

.sflip {
  position: relative;
  aspect-ratio: 5 / 7;
  perspective: 1600px;
}

.sflip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sflip.is-flipped .sflip__inner { transform: rotateY(180deg); }

.sflip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1rem 2.5rem rgba(22, 41, 62, 0.18), 0 0 0 1px var(--line);
}

.sflip__face--back { transform: rotateY(180deg); }

.sflip__face picture, .sflip__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A rotation is the one animation on this page that genuinely conveys
   something — a card has two sides — so the reduced-motion version keeps the
   meaning and drops the movement: the faces cross-fade in place. */
@media (prefers-reduced-motion: reduce) {
  .sflip__inner { transition: none; }
  .sflip.is-flipped .sflip__inner { transform: none; }
  .sflip__face {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms linear;
  }
  .sflip__face--back { transform: none; opacity: 0; }
  .sflip.is-flipped .sflip__face--front { opacity: 0; }
  .sflip.is-flipped .sflip__face--back { opacity: 1; }
}

/* ---- Gallery controls ------------------------------------------------------ */

.sgal__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.sgal__thumbs { display: flex; gap: 0.6rem; }

.sthumb {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  color: var(--bone-3);
}

.sthumb__shot {
  display: block;
  width: 3.25rem;
  aspect-ratio: 5 / 7;
  border-radius: 0.3rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow 160ms ease;
}

.sthumb__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sthumb__label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sthumb.is-on { color: var(--bone); }
.sthumb.is-on .sthumb__shot { box-shadow: 0 0 0 2px var(--bone); }
.sthumb:focus-visible .sthumb__shot { outline: 2px solid var(--bone); outline-offset: 2px; }

.sbtn--quiet {
  background: transparent;
  color: var(--bone);
  box-shadow: inset 0 0 0 1px var(--line-2);
  padding: 0.65rem 1.1rem;
  font-size: 0.85rem;
}

.sbtn--quiet:hover { box-shadow: inset 0 0 0 1px var(--bone); }

/* ---- The record ------------------------------------------------------------ */

.scardpage__name {
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  margin: 0 0 0.6rem;
  color: var(--bone);
}

.scardpage__role {
  margin: 0.6rem 0 0;
  font-size: 1.02rem;
  color: var(--bone-2);
}

.scardpage__ed {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-3);
}

.scardpage__price {
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left: 2px solid var(--accent, var(--line-2));
  background: var(--ink-2);
  font-size: 0.92rem;
  color: var(--bone);
}

.scardpage__form { margin: 1.5rem 0 0; }

.scardpage__bio {
  margin: 1.5rem 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bone-2);
  max-width: 60ch;
}

/* ---- Stats ----------------------------------------------------------------- */

.sstats { margin: 1.75rem 0 0; }

.sstats__row {
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}

.sstats__row:last-child { border-bottom: 1px solid var(--line); }

.sstats__v {
  margin: 0;
  font-size: 0.95rem;
  color: var(--bone);
}

/* ---- Specs ----------------------------------------------------------------- */

.sspecs { margin: 1.75rem 0 0; }

.sspecs__h {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin: 0 0 0.6rem;
}

.sspecs__list { margin: 0; display: grid; gap: 0.4rem; }

.sspecs__row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.45;
}

@media (max-width: 30rem) {
  .sspecs__row { grid-template-columns: 1fr; gap: 0.1rem; }
}

.sspecs__k { color: var(--bone-3); }
.sspecs__v { margin: 0; color: var(--bone-2); }

/* ---- More from ------------------------------------------------------------- */

.smore {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: 1.5rem;
  border-top: 2px solid var(--accent, var(--line-2));
}

.smore__h {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  margin: 0 0 1.5rem;
  color: var(--bone);
}

/* TWO UP AT EVERY WIDTH, including a phone.

   This used to inherit the main grid's single column below 40rem, which put
   two full-bleed cards between the reader and the foot of the page — a long
   scroll past a secondary row. It also cost more than the page's own subject:
   at one-per-row the two tiles asked for the 800px tier and pulled 433 KB,
   against 206 KB for the card the page is actually about. Side by side they
   take the 320 tier. */
.sgrid--more { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 40rem) {
  .sgrid--more { max-width: 44rem; }
}

.smore__back { margin: 1.75rem 0 0; }