/* zakkofalltrades.com, Zakk's own visual direction (DOCS/design-brief.md).
   Layout follows the web-chat wireframe Zakk preferred (wide, two-column case studies, card grids),
   set dark, framed by textured edges from his mood boards, headed by his hand lettering. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Grenze Gotisch";   /* fallback only, for headers Zakk hasn't lettered yet */
  src: url("../fonts/grenze-gotisch-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Zakk's mood-board swatches: TEXTURE / CONTRAST / MOVEMENT / AUTHENTICITY */
  --asphalt: #0b0b0a;
  --char: #1c1a19;
  --char-2: #24211f;
  --steel: #494645;
  --bone: #e6e0d4;
  --ash: #a39e94;
  --gold: #c9a14a;
  --gold-hi: #e6c97c;
  --gold-lo: #8a6a2a;
  --rust: #9b5a2a;
  --tape: rgba(214, 200, 168, 0.55);

  --text: "Bricolage Grotesque", system-ui, sans-serif;
  --fallback-lettering: "Grenze Gotisch", Georgia, serif;

  --wrap: 960px;
  /* edge = the gap beside the content column. The strip runs solid to 3.5rem short of its inner
     side, then fades, leaving clear dark before the text (v2 faded from 35% and lost most texture) */
  --edge: clamp(14px, calc((100vw - var(--wrap)) / 2 - var(--gutter)), 480px);
  --gutter: clamp(1rem, 3vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--asphalt); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--asphalt);
  color: var(--bone);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--gold-hi); }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 2px; }

/* ---------- textured edges: a different pair per page (img/edges/<page>-left|right.webp) ---------- */
.edge {
  position: fixed;
  top: 0;
  bottom: 0;
  width: calc(var(--edge) + var(--gutter) * 0.25);  /* leaves ~1.5rem of clear dark before the text */
  background-repeat: no-repeat;
  /* vw + px only, so the computed value is plain px (the drift script reads it) */
  background-size: max(400px, var(--edge) + var(--gutter) * 0.25) auto;
  pointer-events: none;
  z-index: 0;
}
.edge-left {
  left: 0;
  background-position: left 0 top var(--drift, 0px);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
}
.edge-right {
  right: 0;
  background-position: right 0 top var(--drift, 0px);
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3.5rem), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 3.5rem), transparent);
}
.page { position: relative; z-index: 1; }

.wrap { width: min(100% - 2 * var(--edge) - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* ---------- lettering: Zakk's hand lettering as a CSS mask, so its ink colour is set here ---------- */
.lt {
  display: block;
  width: min(100%, calc(var(--lt-h, 6rem) * var(--ar, 2.2)));
  aspect-ratio: var(--ar, 2.2);
  margin: 0 0 0 -0.6rem;   /* flourishes overhang the column a touch, like a tag on a wall */
  background: var(--bone);
  /* mask-image is set inline per header (url relative to the page); the rest lives here */
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.lt.gold { background: linear-gradient(170deg, var(--gold-hi) 5%, var(--gold) 45%, var(--gold-lo) 85%); }
.lt-fallback { font-family: var(--fallback-lettering); font-weight: 700; color: var(--bone); line-height: 1; margin: 0; }

/* ---------- top bar ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--char-2); }
.bar .mark { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--bone); font-weight: 800; }
.bar .mark img { width: 44px; height: 44px; }
.bar nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.bar nav a { color: var(--bone); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.bar nav a:hover { color: var(--gold-hi); }
.bar nav .aside a { color: var(--ash); font-weight: 400; }
.bar nav a.btn { color: var(--asphalt); }

/* ---------- buttons + chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.55rem 1.15rem;
  border: 1px solid var(--gold); border-radius: 3px;
  color: var(--gold); background: transparent;
  text-decoration: none; font-weight: 700; font-size: 0.98rem;
}
.btn:hover { background: var(--gold); color: var(--asphalt); }
.btn.solid { background: var(--gold); color: var(--asphalt); }
.btn.solid:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 1.1rem 0 0; padding: 0; }
.chips li { border: 1px solid var(--steel); border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.85rem; color: var(--bone); }

/* ---------- taped media slots (placeholders for the shot list, then real images/video) ---------- */
.slot {
  position: relative;
  margin: 0;
  background: var(--char);
  border: 1px dashed var(--steel);
  color: var(--ash);
  font-size: 0.9rem;
  line-height: 1.45;
  padding: 1.25rem;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.slot strong { color: var(--bone); font-weight: 700; display: block; margin-bottom: 0.2rem; }
.slot.wide { aspect-ratio: 16 / 10; }
.slot.small { aspect-ratio: 4 / 3; padding: 0.9rem; font-size: 0.85rem; }
.slot.photo { aspect-ratio: 1; padding: 0; border-style: solid; }
.slot.photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.2) contrast(1.05); }
.taped::before, .taped::after {
  content: ""; position: absolute; top: -10px; width: 78px; height: 22px;
  background: var(--tape); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); z-index: 1;
}
.taped::before { left: 16px; transform: rotate(-4deg); }
.taped::after { right: 16px; transform: rotate(3deg); }
.slot.small.taped::before, .slot.small.taped::after { width: 52px; height: 18px; top: -8px; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 7vh, 5rem) 3rem; }
.hero .name { --lt-h: clamp(8rem, 18vw, 15rem); margin-bottom: 0.5rem; }
.hero .role { color: var(--gold); font-weight: 600; margin: 0 0 1rem; }
.hero .tagline { font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 1rem; text-wrap: balance; }
.hero .lead { margin: 0 0 1.75rem; max-width: 34em; }
/* his mark, shown exactly as drawn: square, untilted (height:auto or the width/height attrs stretch it) */
.badge { justify-self: center; width: min(100%, 340px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.7)); }

.routes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); padding-block: 2.5rem 1rem; border-top: 1px solid var(--steel); }
.routes > div { display: grid; align-content: start; gap: 0.75rem; }
.routes .lt { --lt-h: 6.5rem; }
.routes p { margin: 0; color: var(--ash); }

/* ---------- sections ---------- */
.section { padding-block: 5rem 1rem; }
.section-head { margin-bottom: 2.5rem; }
.section-head .lt { --lt-h: clamp(6rem, 11vw, 9rem); }
.section-head p { color: var(--ash); margin: 0.75rem 0 0; max-width: 40em; }

/* case studies: media left, story right (wireframe layout) */
.case { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.25rem); padding-block: 2.75rem; border-top: 1px solid var(--char-2); }
.case:first-of-type { border-top: 0; padding-top: 0.5rem; }
.media { display: grid; gap: 1rem; align-content: start; }
.media .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 1rem; }
.who { color: var(--gold); font-weight: 600; font-size: 0.92rem; margin: 0 0 0.35rem; }
.case h3 { font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 1rem; text-wrap: balance; }
.case p { margin: 0 0 0.8rem; }
.case ul:not(.chips) { margin: 0 0 0.8rem; padding-left: 1.2rem; }
.case ul:not(.chips) li + li { margin-top: 0.25rem; }
.runin { font-weight: 800; color: var(--bone); }

/* card grids (more builds, kids, workbench) */
.grid { display: grid; gap: 1.5rem; }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--char); border: 1px solid var(--char-2); display: flex; flex-direction: column; }
.card .slot { border: 0; border-bottom: 1px dashed var(--steel); aspect-ratio: 16 / 10; }
.card .body { padding: 1.1rem 1.2rem 1.3rem; }
.card h3 { font-weight: 800; font-size: 1.15rem; line-height: 1.2; margin: 0 0 0.45rem; }
.card p { margin: 0; font-size: 0.97rem; }
.card p + p { margin-top: 0.6rem; }
.card .who { font-size: 0.85rem; }
.pill { display: inline-block; border: 1px solid var(--gold); color: var(--gold); border-radius: 3px; font-size: 0.78rem; font-weight: 700; padding: 0.05rem 0.45rem; margin-bottom: 0.5rem; }

/* about */
.about { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.about h3 { font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12; margin: 0 0 1rem; }
.about p { margin: 0 0 1rem; }

/* toolbox */
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.tools h3 { font-size: 1rem; font-weight: 800; margin: 0; }

/* résumé */
.resume { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
.jobs { list-style: none; margin: 0; padding: 0; }
.jobs li { padding-block: 0.85rem; border-top: 1px solid var(--char-2); }
.jobs li:first-child { border-top: 0; padding-top: 0; }
.jobs b { font-weight: 800; }
.jobs .when { color: var(--ash); display: block; font-size: 0.93rem; }
.resume aside { background: var(--char); border: 1px solid var(--char-2); padding: 1.4rem; display: grid; gap: 0.75rem; }
.resume aside p { margin: 0 0 0.25rem; color: var(--ash); }

/* contact band */
.contact { margin-top: 5rem; background: var(--char); border-top: 4px solid var(--gold); }
.contact .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gutter); align-items: center; padding-block: 3rem; }
.contact .lt { --lt-h: 7rem; }
.contact .ask { font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.1; margin: 0.75rem 0 0.75rem; text-wrap: balance; }
.contact p { margin: 0; }
.contact .stack { display: grid; gap: 0.75rem; }
.contact .stack .btn { width: 100%; }

footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.5rem 3rem; color: var(--ash); font-size: 0.9rem; }
footer img { width: 34px; height: 34px; vertical-align: middle; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0.5rem; background: var(--gold); color: var(--asphalt); padding: 0.5rem 1rem; z-index: 5; }
.skip:focus { left: 0.5rem; }

/* ---------- narrower screens ---------- */
@media (max-width: 60rem) {
  .grid.three { grid-template-columns: repeat(2, 1fr); }
  .tools { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 46rem) {
  :root { --edge: 16px; --gutter: 1rem; }
  .edge { width: var(--edge); background-size: 220px auto; }
  .edge-left, .edge-right { -webkit-mask-image: none; mask-image: none; opacity: 0.85; }
  .bar { flex-direction: column; align-items: flex-start; }
  .hero, .routes, .case, .about, .resume, .contact .wrap, .grid.two, .grid.three { grid-template-columns: minmax(0, 1fr); }
  .media .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .badge { display: none; }
  .hero .name { --lt-h: 7.5rem; }
  .tools { grid-template-columns: 1fr; }
  .section-head .lt { --lt-h: 5rem; }
  .section-head h1.lt, #collection > h1.lt { --lt-h: 8.5rem; }
}

/* ======================================================================================
   Secondary pages: Merch (art lines → Square), Art (gallery wall), After Dark (age warning)
   ====================================================================================== */
/* any component that sets its own display (e.g. .gate's grid) would otherwise ignore [hidden] */
[hidden] { display: none !important; }
.page-title { font-size: clamp(3.5rem, 9vw, 5.5rem); }
.section-head .actions { margin-top: 1.25rem; }
.fine { color: var(--ash); font-size: 0.9rem; margin-top: 3rem; max-width: 46em; }
.bar nav a[aria-current="page"] { color: var(--gold); }

/* jump links to each art line */
.jump ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.jump a { display: inline-block; border: 1px solid var(--steel); border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.9rem; color: var(--bone); text-decoration: none; }
.jump a:hover { border-color: var(--gold); color: var(--gold-hi); }

/* one art line: artwork + product photos left, price list right */
.line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.25rem); padding-block: 2.75rem; border-top: 1px solid var(--char-2); scroll-margin-top: 1rem; }
.line .art { position: relative; margin: 0; padding: 10px; background: var(--char); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); display: grid; gap: 8px; }
.line .art img { display: block; width: 100%; height: auto; }
.line .art.n2, .line .art.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.line .mocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.line .mocks img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--char-2); }
.line h2 { font-weight: 800; font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 0.6rem; }
.line .story > p { margin: 0 0 1.4rem; color: var(--ash); }
.line h4 { font-size: 0.95rem; font-weight: 800; margin: 0 0 0.25rem; color: var(--bone); }

/* price list: label ..... price, each row a link to that product on Square */
.prices { list-style: none; margin: 0; padding: 0; }
.prices a { display: flex; align-items: baseline; gap: 0.5rem; min-height: 44px; padding-block: 0.55rem; color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--char-2); }
.prices li:first-child a { border-top: 1px solid var(--char-2); }
.prices .dots { flex: 1; border-bottom: 1px dotted var(--steel); transform: translateY(-0.3em); }
.prices .price { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.prices a:hover .what { color: var(--gold-hi); }
.prices a:hover .dots { border-color: var(--gold); }
.prices .sold { color: var(--rust); font-size: 0.8rem; font-weight: 700; margin-left: 0.4rem; }
.price-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }

/* gallery wall: pieces pinned up with tape at slightly different angles */
.group { padding-top: 1rem; }
.group > h2 { font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0 0 2rem; padding-top: 2rem; border-top: 1px solid var(--char-2); }
/* Photography is a different discipline from the art groups, so it gets his lettering instead of a plain h2 */
.group > h2.lt { --lt-h: clamp(7rem, 15vw, 10rem); padding: 0; border: 0; margin: 0 0 0.5rem -0.6rem; }  /* padding/border would sit inside the mask box */
.group.photos { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--char-2); }
.group-intro { margin: -0.75rem 0 2rem; color: var(--ash); max-width: 40em; }
.ad-group { font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 1rem 0 1.25rem; padding-top: 2rem; border-top: 1px solid var(--char-2); }
.photo-group { font-weight: 800; font-size: 1.15rem; margin: 0.5rem 0 1.25rem; color: var(--bone); }
.wall + .photo-group { margin-top: 1.5rem; }
.wall { columns: 3 240px; column-gap: 1.75rem; }
.wall.dealt { columns: auto; display: flex; gap: 1.75rem; align-items: flex-start; }  /* js/wall.js: reading-order columns */
.wall-col { flex: 1 1 0; min-width: 0; }
/* tape stays inside the box (top: 2px): tape poking above a piece got split off into the bottom of
   the previous column (multi-column fragmentation) */
.piece { position: relative; break-inside: avoid; margin: 0 0 2.25rem; padding-top: 12px; }
.piece button { display: block; width: 100%; padding: 8px; border: 0; background: var(--char); cursor: zoom-in; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55); transition: transform 0.2s ease; }
.piece button:hover { transform: rotate(0deg) scale(1.01); }
.piece img { display: block; width: 100%; height: auto; }
.piece figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--ash); }
.piece.taped::before, .piece.taped::after { width: 58px; height: 18px; top: 2px; }
.piece:nth-child(3n+1) button { transform: rotate(-0.8deg); }
.piece:nth-child(3n+2) button { transform: rotate(0.6deg); }
.piece:nth-child(4n)::after { display: none; }  /* every fourth piece hangs from one strip */
@media (prefers-reduced-motion: reduce) { .piece button { transition: none; } }

/* full-size viewer */
dialog.viewer { max-width: min(94vw, 1400px); max-height: 94vh; padding: 0; border: 0; background: transparent; color: var(--bone); overflow: visible; }
dialog.viewer::backdrop { background: rgba(5, 5, 4, 0.9); }
dialog.viewer figure { margin: 0; text-align: center; }
dialog.viewer img { display: block; max-width: 100%; max-height: 84vh; width: auto; height: auto; margin: 0 auto; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); }
dialog.viewer figcaption { margin-top: 0.75rem; color: var(--ash); }
dialog.viewer .close, dialog.player .close { position: fixed; top: 0.75rem; right: 0.75rem; width: 48px; height: 48px; border: 1px solid var(--steel); border-radius: 50%; background: var(--char); color: var(--bone); font-size: 1.6rem; line-height: 1; cursor: pointer; }
dialog.viewer .close:hover, dialog.player .close:hover { border-color: var(--gold); color: var(--gold-hi); }

/* the door to After Dark (Art page) and its warning (After Dark page) */
.door { margin-top: 3rem; padding: 2rem clamp(1.25rem, 4vw, 2.5rem); background: var(--char); border: 1px solid var(--char-2); border-left: 4px solid var(--rust); display: grid; gap: 0.9rem; justify-items: start; }
/* page titles are one word with wide spray/drips, so they need more height than section heads */
.section-head h1.lt, #collection > h1.lt { --lt-h: clamp(10rem, 20vw, 15rem); }
.door .lt { --lt-h: clamp(7rem, 16vw, 10rem); }
.gate .lt { --lt-h: clamp(9rem, 26vw, 13rem); }
#collection > .lt { margin-bottom: 0.25rem; }
.door p { margin: 0; color: var(--ash); max-width: 40em; }
.gate { max-width: 40rem; margin: 2rem auto 4rem; padding: clamp(1.5rem, 5vw, 3rem); background: var(--char); border: 1px solid var(--char-2); border-top: 4px solid var(--rust); display: grid; gap: 1.25rem; }
.gate .warn { margin: 0; }
.gate .warn strong { color: var(--bone); }
.gate button.btn { cursor: pointer; font: inherit; font-weight: 700; }
.after-dark .intro { color: var(--ash); margin: 0.75rem 0 2.5rem; }
.after-dark #ad-title:focus { outline: none; }

@media (max-width: 46rem) {
  .line { grid-template-columns: minmax(0, 1fr); }
  .price-groups { grid-template-columns: minmax(0, 1fr); }
  .wall { columns: 2 140px; column-gap: 1rem; }
  .wall.dealt { gap: 1rem; }
  .piece { margin-bottom: 1.5rem; }
  .piece button { padding: 5px; }
  .piece.taped::before, .piece.taped::after { width: 40px; height: 14px; top: 4px; }
  .piece figcaption { font-size: 0.82rem; }
}

/* ---------- Services: featured offer, grouped price menu, steps ---------- */
.offer { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--char); border-top: 4px solid var(--gold); margin-bottom: 1.5rem; }
.offer h2 { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 0.9rem; text-wrap: balance; }
.offer p { margin: 0 0 0.9rem; }
.offer .price-line { margin: 1.1rem 0 0; color: var(--ash); }
.offer .price-line strong { color: var(--gold); font-size: 1.25em; }
.offer .hear { display: grid; gap: 0.75rem; padding-left: clamp(0rem, 3vw, 2rem); border-left: 1px solid var(--char-2); }
.offer .hear p { margin: 0; color: var(--ash); }

.svc { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: 3rem; border-top: 1px solid var(--char-2); scroll-margin-top: 1rem; }
.offer + .svc { border-top: 0; }
.svc-head h2 { font-weight: 800; font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 0.8rem; }
.svc-head p { margin: 0 0 1rem; color: var(--ash); }
.svc-head { align-self: start; position: sticky; top: 1.5rem; }
.menu { list-style: none; margin: 0; padding: 0; }
.menu li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1.5rem; align-items: baseline; padding-block: 1rem; border-bottom: 1px solid var(--char-2); }
.menu li:first-child { padding-top: 0; }
.menu h3 { font-size: 1.08rem; font-weight: 800; margin: 0 0 0.2rem; }
.menu p { margin: 0; color: var(--ash); font-size: 0.97rem; }
.menu .price { color: var(--gold); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }

.steps { padding-block: 3rem 0; border-top: 1px solid var(--char-2); }
.steps > h2 { font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0 0 1.75rem; }
.steps ol { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; }
.steps li { counter-increment: step; border-top: 2px solid var(--steel); padding-top: 1rem; }
.steps li::before { content: counter(step); display: block; font-family: var(--fallback-lettering); font-size: 2.4rem; line-height: 1; color: var(--gold); margin-bottom: 0.5rem; }
.steps h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.3rem; }
.steps p { margin: 0; color: var(--ash); font-size: 0.97rem; }

@media (max-width: 60rem) {
  .steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 46rem) {
  .offer, .svc { grid-template-columns: minmax(0, 1fr); }
  .offer .hear { padding-left: 0; border-left: 0; border-top: 1px solid var(--char-2); padding-top: 1.25rem; }
  .svc-head { position: static; }
  .menu li { grid-template-columns: minmax(0, 1fr); }
  .menu .price { text-align: left; }
}

/* real screenshots in the proof slots: same taped frame, image fills it, caption underneath, tap to enlarge */
.slot.shot { padding: 0; border-style: solid; border-color: var(--char-2); aspect-ratio: auto; display: block; background: transparent; }
.slot.shot button { display: block; width: 100%; padding: 0; border: 0; background: var(--char); cursor: zoom-in; overflow: hidden; }
.slot.shot.wide button { aspect-ratio: 16 / 9.6; }
.slot.shot.small button { aspect-ratio: 4 / 3; }
.slot.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.slot.shot figcaption { padding: 0.55rem 0.15rem 0; font-size: 0.85rem; line-height: 1.35; color: var(--ash); }
.slot.shot.small figcaption { font-size: 0.78rem; }
.slot.shot button:hover img { filter: brightness(1.08); }
.slot.shot.video video { display: block; width: 100%; height: auto; background: var(--char); }
/* filled card slots: fixed frame like the placeholders, caption under the image */
.card .slot.shot { border: 0; border-bottom: 1px solid var(--char-2); aspect-ratio: auto; }
.card .slot.shot button { aspect-ratio: 16 / 10; }
.card .slot.shot figcaption { padding: 0.5rem 1.2rem 0.6rem; font-size: 0.78rem; }

/* Digital characters (2026-10-13): Meet the cast + player cards (js/cast.js).
   Tiles and cards show placeholders until Zakk's headshots and body references are in ASSETS/art/cast/. */
.page-title { font-size: clamp(3rem, 9vw, 5.5rem); margin: 0.5rem 0 0; }
.ad-group.lt-fallback { font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 700; }
.cast-title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 2rem 0 1.25rem; }
.cast { list-style: none; margin: 0 0 2rem; padding: 0; max-width: 600px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 0.75rem; }  /* 4 x 3 on every screen (Zakk, 2026-10-13: the bigger tiles were "far too large") */
.cast-tile { display: block; width: 100%; padding: 5px 5px 0; border: 0; background: var(--char); color: var(--bone); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55); transition: transform 0.2s ease; }
.cast li:nth-child(3n+1) .cast-tile { transform: rotate(-0.8deg); }
.cast li:nth-child(3n+2) .cast-tile { transform: rotate(0.6deg); }
.cast .cast-tile:hover, .cast .cast-tile:focus-visible { transform: translateY(-3px); }
.cast-face { display: grid; place-items: center; aspect-ratio: 1; background: var(--char-2); overflow: hidden; }
.cast-face img { width: 100%; height: 100%; object-fit: cover; }
.cast-ph { font-family: var(--fallback-lettering); font-weight: 700; font-size: 4.5rem; line-height: 1; color: var(--steel); }
.cast-name { display: block; padding: 0.4rem 0.1rem 0.5rem; font-size: 0.85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .cast { gap: 0.75rem 0.5rem; } .cast-name { font-size: 0.72rem; } }
.cast-more { margin: 0 0 1.5rem; }

dialog.player { padding: 0; border: 0; background: transparent; color: var(--bone); overflow: visible; max-width: none; max-height: none; }
dialog.player::backdrop { background: rgba(5, 5, 4, 0.9); }
/* A trading card, stacked: name across the top, the headshot (a wide portrait), then the front-and-back body
   reference sheet. Both of Zakk's images are landscape, so stacking them fills a portrait card with no dead space.
   Width is capped by the viewport height so the whole card fits without scrolling.
   Scoped to dialog.player: a bare .card here (2026-10-13) restyled every portfolio card on the main page
   (fixed 520px width = overlapping grid, gold background = unreadable gold text) until 2026-10-17. */
dialog.player .card { border: 0; width: min(92vw, 520px, calc((88vh - 96px) / 1.32)); width: min(92vw, 520px, calc((86svh - 96px) / 1.32)); padding: 10px; display: grid; gap: 8px;
  background: linear-gradient(155deg, var(--gold-hi), var(--gold) 38%, var(--gold-lo) 70%, var(--gold)); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75); }
.card-name { margin: 0; padding: 0.55rem 0.9rem 0.45rem; background: var(--asphalt); color: var(--gold-hi); font-family: var(--fallback-lettering); font-weight: 700; font-size: clamp(1.9rem, 7vw, 2.5rem); line-height: 1; border-radius: 6px; }
.card-head, .card-body { position: relative; display: grid; place-items: center; background: var(--char); border-radius: 6px; overflow: hidden; }
.card-head { aspect-ratio: 16 / 9; }
.card-body { aspect-ratio: 4 / 3; }
.card-head img, .card-body img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Pinned with inset, not height:100% in flow: the slot's height comes from aspect-ratio, which a percentage
   height can't resolve against, so the image grew to its natural height and overflow cut Ai'sha's tall sheet
   off at the thighs (2026-10-13). */
.card-head img { object-fit: cover; }
.card-body img { object-fit: contain; }   /* never crop a reference sheet */
dialog.player .empty span { color: var(--ash); font-size: 0.95rem; text-align: center; padding: 0 1rem; }
@media (prefers-reduced-motion: reduce) { .cast-tile { transition: none; } }

/* ======================================================================================
   Main page, tightened for reviewers (2026-10-17): result first, details folded, six builds shown
   ====================================================================================== */
.case .result { font-size: 1.12rem; font-weight: 600; line-height: 1.45; }
.case .result .runin { color: var(--gold); }
/* "How it works": the step-by-step list, folded so the case reads in seconds */
details.how { margin: 0 0 0.8rem; }
details.how summary, details.more-builds summary { cursor: pointer; list-style: none; color: var(--gold); font-weight: 700; width: fit-content; }
details.how summary::-webkit-details-marker, details.more-builds summary::-webkit-details-marker { display: none; }
details.how summary::after { content: " +"; }
details.how[open] summary::after { content: " \2212"; }
details.how summary:hover, details.more-builds summary:hover { color: var(--gold-hi); }
details.how[open] summary { margin-bottom: 0.6rem; }
/* the phone agent's wide slot: a tap-to-call card until the recorded demo call exists */
.slot.call-card { border-style: solid; justify-content: center; align-items: flex-start; gap: 0.35rem; padding: clamp(1.25rem, 4vw, 2.25rem); }
.call-card .call-label { margin: 0; color: var(--ash); font-weight: 600; }
.call-card .call-number { color: var(--gold-hi); font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.05; letter-spacing: -0.02em; text-decoration: none; }
.call-card .call-number:hover { color: var(--gold); }
.call-card p:last-child { margin: 0.4rem 0 0; max-width: 28em; }
/* More builds: the four extra cards */
details.more-builds { margin-top: 1.5rem; }
details.more-builds summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0.55rem 1.15rem; border: 1px solid var(--gold); border-radius: 3px; }
details.more-builds summary:hover { background: var(--gold); color: var(--asphalt); }
details.more-builds .when-open, details.more-builds[open] .when-closed { display: none; }
details.more-builds[open] .when-open { display: inline; }
details.more-builds[open] summary { margin-bottom: 1.5rem; }
/* Toolbox now closes the About section */
#about .toolbox { margin-top: 3rem; padding-top: 2.25rem; border-top: 1px solid var(--char-2); }
#about .toolbox .lt { --lt-h: clamp(4rem, 7vw, 5.5rem); margin-bottom: 1.25rem; }
/* the phone agent's wide slot: two real test calls (replaced the tap-to-call card 2026-10-18) */
.slot.calls { border-style: solid; justify-content: flex-start; gap: 1rem; padding: clamp(1.1rem, 3vw, 1.6rem); aspect-ratio: auto; }
.calls .call-label { margin: 0; color: var(--bone); font-weight: 800; font-size: 1.05rem; }
.calls .call { display: grid; gap: 0.45rem; padding-top: 0.85rem; border-top: 1px solid var(--char-2); }
.calls .call-title { margin: 0; color: var(--bone); font-weight: 700; }
.calls .call-title span { color: var(--ash); font-weight: 400; margin-left: 0.35rem; }
.calls audio { width: 100%; height: 40px; color-scheme: dark; }   /* dark player, not the white default */
.calls details.how { margin: 0; font-size: 0.9rem; }
.calls .transcript { max-height: 22rem; overflow-y: auto; padding: 0.75rem 0.9rem; background: var(--asphalt); border: 1px solid var(--char-2); }
.calls .transcript p { margin: 0 0 0.6rem; color: var(--bone); line-height: 1.5; }
.calls .transcript p:last-child { margin-bottom: 0; }
.calls .transcript b { color: var(--gold); }
.calls .transcript .cut { color: var(--ash); font-style: italic; }
.calls .call-try { margin: 0.25rem 0 0; color: var(--ash); }
.calls .call-try .call-number { color: var(--gold-hi); font-weight: 800; font-size: 1.15rem; text-decoration: none; margin-left: 0.25rem; }
.calls figcaption { margin: 0; font-size: 0.85rem; color: var(--ash); }