/* ═══ THE PRODUCT PAGES · shared system (product.html, us.html, posters.html) ═══
   One layout for all three instruments, so they read as one press:
   film hero → look inside → what's in it → how it works → edition → questions → last call.

   THE COPPER LAW (docs/34): bone is the frame, copper is you. Copper lands on
   the one primary action (.btn-gold), the object's hard facts (<b> in .spec)
   and the reader's own selection (.fmt[aria-pressed=true]). Everything else,
   prices included, sets in bone. site.css paints .kicker copper; corrected here.
   ═════════════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

.pdp .kicker { color: var(--ink-faint); font-size: .66rem; letter-spacing: .32em; margin-bottom: .9rem; }
.pdp h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.pdp h2 em, .pdp h1 em { font-style: italic; }
/* founder 2026-09-24: too much scrolling. Eleven bands at 5.5rem of air each
   was about 1000px of nothing on a product page. 3.8rem still reads as separate
   sections and gives back a screen and a half. */
.pdp .band { padding-top: 3.8rem; padding-bottom: 0; }
.pdp .section-head { max-width: 44rem; margin-bottom: 1.6rem; }
.pdp .section-head p { color: var(--ink-dim); line-height: 1.8; }

/* ── buttons: the system's, from ag.css. Only .btn-gold carries copper. ── */
.btn {
  display: inline-block; cursor: pointer;
  font-family: var(--mono); font-size: .68rem; font-weight: 300;
  letter-spacing: .26em; text-transform: uppercase;
  padding: 1.05rem 2rem 1rem; border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink); text-decoration: none; background: none;
  transition: border-color .3s cubic-bezier(.16,1,.3,1), background .3s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1);
}
.btn-gold { border-color: var(--gold); color: var(--gold-bright); }
.btn-gold:hover { background: var(--gold-bright); color: var(--bg); }
.btn-line:hover { border-color: rgba(237,239,243,.55); }
.btn:disabled { opacity: .45; cursor: default; }

/* ── the spec line: the object's hard facts ── */
.spec {
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .64rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; line-height: 2.1;
}
.spec b { color: var(--gold-bright); font-weight: 400; }

/* ═══ HERO ═══ */
.pdp-hero { padding-top: 7.6rem; }
.pdp-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3.4rem; align-items: center; }
.pdp-media { margin: 0; }
.pdp-media .frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--bg-2);
}
.pdp-media video, .pdp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-media figcaption, .shot figcaption {
  margin-top: .8rem; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint);
}
.pdp-copy h1 { font-size: clamp(2.5rem, 4.6vw, 3.9rem); margin-bottom: .9rem; }
.pdp-copy .lede { max-width: 34rem; }
.pdp-price {
  margin-top: 1.4rem; font-family: var(--serif); font-weight: 300;
  font-size: 1.6rem; color: var(--ink);
}
.pdp-price small {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint); margin-left: .6rem;
}
.pdp-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.pdp-assure {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
}
.pdp-assure li {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim); padding-left: 1rem; position: relative;
}
.pdp-assure li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 5px; height: 5px;
  border: 1px solid var(--ink-faint); border-radius: 50%;
}

/* ═══ LOOK INSIDE · a strip of real pages ═══ */
.gallery {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 31%);
  gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
.shot { margin: 0; scroll-snap-align: start; }
.shot img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--bg-2);
}
.gallery-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.2rem; }
.gallery-foot .note { margin: 0; }

/* ═══ ON THE WALL · the prints at room scale ═══ */
.walls { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.4rem; align-items: start; }
.wall { margin: 0; }
.wall img {
  width: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--bg-2);
}
.wall figcaption {
  margin-top: .7rem; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint);
}
@media (max-width: 880px) { .walls { grid-template-columns: 1fr; } }

/* ═══ IN THE HAND · three films, one of them upright ═══ */
.films { display: grid; grid-template-columns: 1fr 1.62fr; gap: 1.4rem; align-items: start; }
.films .stack { display: grid; gap: 1.4rem; }
.film { margin: 0; }
.film .frame {
  position: relative; overflow: hidden; background: var(--bg-2);
  border: 1px solid var(--rule); border-radius: 2px; aspect-ratio: 16 / 9;
}
.film.tall .frame { aspect-ratio: 4 / 5; }
.film video, .film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film figcaption {
  margin-top: .7rem; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint);
}
.films-foot { margin-top: 1.4rem; }
.films-foot .note { margin: 0; max-width: 42rem; }
@media (max-width: 880px) {
  .films { grid-template-columns: 1fr; }
}

/* ═══ WHAT'S IN IT · numbered, hairline ruled ═══ */
/* the head sits above a two-column list rather than beside a ten-row one:
   same words, roughly half the height (founder 2026-09-24) */
.contents-wrap { display: block; }
.contents {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 3.2rem;
}
.contents li {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: 0 1.2rem;
  padding: 1.2rem 0; border-top: 1px solid var(--rule);
}
.contents li:last-child { border-bottom: 1px solid var(--rule); }
.contents .no {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; padding-top: .4rem;
}
.contents h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.contents p { font-size: .88rem; line-height: 1.65; color: var(--ink-dim); max-width: 46ch; }
@media (max-width: 620px) { .contents { grid-template-columns: 1fr; } }
.domains { grid-column: 2; display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin-top: .8rem; }
.domains span {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ═══ HOW IT WORKS · three steps ═══ */
/* ─── why people buy it: three plain cards, bone only ─── */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.why article { border: 1px solid var(--rule); border-radius: 2px; padding: 1.6rem 1.5rem; }
.why h3 {
  font-family: var(--serif); font-weight: 300; font-size: 1.3rem; line-height: 1.2;
  color: var(--ink); margin: 0 0 .7rem;
}
.why p { margin: 0; font-size: .92rem; line-height: 1.75; color: var(--ink-dim); }
@media (max-width: 860px) { .why { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .why { grid-template-columns: 1fr; } }

.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.steps3 li { border-top: 1px solid var(--rule); padding-top: 1.3rem; }
.steps3 .n {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .3em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.steps3 h3 { font-size: 1.35rem; margin: .55rem 0 .45rem; }
.steps3 p { font-size: .92rem; line-height: 1.75; color: var(--ink-dim); }

/* ═══ YOUR EDITION · bone frame, copper only on what you chose ═══ */
.edition-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 3.4rem; align-items: start; }
.edition-wrap .copy p { color: var(--ink-dim); line-height: 1.8; }
.fmts { list-style: none; display: grid; gap: .7rem; margin: 0; padding: 0; }
.fmt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.4rem;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  padding: 1.05rem 1.25rem;
  transition: border-color .25s cubic-bezier(.16,1,.3,1), background .25s cubic-bezier(.16,1,.3,1);
}
.fmt:hover { border-color: rgba(237,239,243,.4); }
.fmt[aria-pressed="true"] { border-color: var(--gold); background: rgba(168,104,58,.07); }
.fmt .nm { font-family: var(--serif); font-weight: 300; font-size: 1.25rem; color: var(--ink); }
.fmt .sub { display: block; margin-top: .2rem; font-size: .8rem; line-height: 1.6; color: var(--ink-faint); }
.fmt .amt {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .12em;
  color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fmt.na { cursor: default; opacity: .8; }
.fmt.na .amt, .fmt .amt.na { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.buy-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.4rem; }
.note { font-size: .8rem; color: var(--ink-faint); line-height: 1.8; }
.leaf {
  border: 1px solid var(--rule); border-radius: 2px;
  background: rgba(7,12,21,.45); padding: 1.8rem 1.9rem;
}
.leaf p + p { margin-top: .8rem; }
.waitlist { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.waitlist input {
  flex: 1; min-width: 220px; font: inherit; font-size: .9rem; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--rule); border-radius: 2px; padding: .9rem 1rem;
}
.waitlist input:focus { outline: none; border-color: var(--ink-faint); }

/* ═══ QUESTIONS ═══ */
.faq { max-width: 50rem; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.2rem 1.15rem 0; position: relative;
  font-family: var(--serif); font-weight: 300; font-size: 1.3rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .2rem; top: 1.05rem;
  font-family: var(--mono); font-size: 1rem; color: var(--ink-faint);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2.2rem 1.3rem 0; color: var(--ink-dim); line-height: 1.8; font-size: .95rem; max-width: 60ch; }

/* ═══ LAST CALL ═══ */
.last-call { text-align: center; padding: 5.5rem 0 5rem; }
.last-call h2 { margin-bottom: .6rem; }
.last-call p { color: var(--ink-dim); }
.last-call .pdp-actions { justify-content: center; }

/* links inside the page body are bone; the copper button is the only copper action */
.pdp main a:not(.btn):not(.cta), main.pdp a:not(.btn):not(.cta):not(.order) {
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule);
}
main.pdp a:not(.btn):not(.cta):not(.order):hover { border-bottom-color: var(--ink-faint); }
.trust-strip { border-color: var(--rule); }

/* quiet arrival: pdp.js adds html.io only once its observer is running, so a
   page whose script fails never hides a section */
.pdp .reveal { opacity: 1; transform: none; }
html.io .pdp .reveal { transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
html.io .pdp .reveal:not(.visible) { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
  html.io .pdp .reveal, html.io .pdp .reveal:not(.visible) { opacity: 1; transform: none; transition: none; }
  .btn, .fmt, .faq summary::after { transition: none; }
}

/* ═══ SMALL SCREENS ═══ */
@media (max-width: 900px) {
  .pdp-hero { padding-top: 6.4rem; }
  .pdp-hero-grid, .contents-wrap, .edition-wrap { grid-template-columns: 1fr; gap: 2.2rem; }
  .steps3 { grid-template-columns: 1fr; }
  .gallery { grid-auto-columns: 78%; }
}
@media (max-width: 620px) {
  .pdp .band { padding-top: 2.8rem; }
  .contents li { grid-template-columns: 1fr; }
  .contents .no { padding-top: 0; margin-bottom: .3rem; }
  .domains { grid-column: 1; }
  .fmt { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .pdp-actions .btn, .buy-row .btn { flex: 1 1 100%; text-align: center; }
}

/* the gift shelf reuses .steps3 but its first line is a product name, not a number */
.steps3 li .n { display:block; }
.steps3 h3 span[data-price] { font-variant-numeric: tabular-nums; }

/* prints: the three sizes, offered at the plate rather than in a table below */
.plate .sizes { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.plate .chip.size {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
  padding: .45rem .6rem; cursor: pointer; background: none;
  border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-dim);
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.plate .chip.size:hover { border-color: rgba(237,239,243,.4); color: var(--ink); }
.plate .chip.size[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-bright); background: rgba(168,104,58,.07); }