/* ==========================================================================
   Afterlife Carbon — pages.css
   Order and legal pages. Loaded after styles.css, which owns the tokens.
   These pages deliberately carry none of the homepage's scroll theatrics:
   someone here is trying to read something or trying to pay.
   ========================================================================== */

/* Any author `display` beats the browser's own `[hidden] { display: none }`, so
   a grid or flex component with the hidden attribute stays on screen. That bit
   us twice: the balance row on a Founder order, and the etch-name field on an
   Open Edition pair. Fix it once for everything here.
   The menu is the deliberate exception: styles.css sets
   `.menu[hidden] { display: block }` so the overlay can run its slide
   transition while still being hidden from assistive technology. */
[hidden]:not(.menu) { display: none !important; }

/* ---------- Browser surfaces ----------
   The parts we did not draw still belong to the design. */
::selection { background: var(--black); color: var(--white); }
:root { caret-color: var(--black); accent-color: var(--black); }

/* Sub-pages sit under a fixed nav with no hero behind it. */
.page { padding-top: var(--nav-h); }

/* ==========================================================================
   Page head, shared by order and legal
   ========================================================================== */
.page-head {
  padding: 56px var(--gutter) 0;
  border-bottom: 1px solid var(--rule-on-white);
  padding-bottom: 40px;
}
.page-title { font-size: var(--fs-h2); line-height: 1.05; }
.page-intro { margin-top: 20px; }
.page-meta {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--body-on-white);
}
@media (min-width: 768px) {
  .page-head { padding-top: 88px; padding-bottom: 56px; }
}

/* ==========================================================================
   Order
   ========================================================================== */
.ord {
  padding: 0 var(--gutter) var(--section-pad);
  display: grid;
  gap: 0;
}

/* ---------- A step ---------- */
.ord-step {
  padding: 48px 0;
  border-bottom: 1px solid var(--rule-on-white);
}
.ord-step:first-of-type { padding-top: 40px; }

/* Locked steps stay visible and readable, just clearly not yet yours.
   Starting from a visible default means nothing can snapshot an opacity of 0
   before the stylesheet lands, which is how the homepage hero once went black
   on iOS Safari. */
.ord-step[data-locked="true"] {
  opacity: .32;
  filter: blur(1.5px);
  transition: opacity .5s var(--ease-out), filter .5s var(--ease-out);
}
.ord-step[data-locked="true"] .ord-options { pointer-events: none; }
.ord-step[data-locked="false"] {
  opacity: 1;
  filter: blur(0);
  transition: opacity .55s var(--ease-out), filter .55s var(--ease-out);
}

.ord-step-head { display: flex; align-items: baseline; gap: 14px; }
.ord-num {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: var(--fs-h3); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--idle-on-white);
  flex: 0 0 auto;
}
.ord-step[data-locked="false"] .ord-num { color: var(--black); }
.ord-step-title { font-size: var(--fs-h3); line-height: 1.15; }
.ord-step-note {
  margin-top: 10px;
  font-family: var(--font-body); font-size: var(--fs-body);
  color: var(--body-on-white);
}

/* ---------- Option groups ---------- */
.ord-options { margin-top: 28px; display: grid; gap: 12px; }
.ord-options--lineage { gap: 16px; }
@media (min-width: 768px) {
  .ord-options--lineage { grid-template-columns: repeat(3, 1fr); }
  .ord-options--pair { grid-template-columns: repeat(2, 1fr); }
}

.ord-opt { position: relative; display: block; cursor: pointer; }
.ord-opt input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ord-opt-inner {
  height: 100%;
  border: 1px solid var(--rule-on-white);
  padding: 18px 20px;
  display: grid; gap: 6px; align-content: start;
  background: var(--white);
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.ord-opt:hover .ord-opt-inner { border-color: var(--black); }
.ord-opt input:focus-visible + .ord-opt-inner { outline: 2px solid var(--black); outline-offset: 3px; }
.ord-opt input:checked + .ord-opt-inner {
  background: var(--black); color: var(--white); border-color: var(--black);
}
.ord-opt input:checked + .ord-opt-inner .ord-opt-sub,
.ord-opt input:checked + .ord-opt-inner .ord-opt-price { color: rgba(255, 255, 255, .75); }

/* Sold out: still legible, plainly unavailable, never mistaken for unselected. */
.ord-opt input:disabled + .ord-opt-inner {
  cursor: not-allowed;
  color: var(--idle-on-white);
  border-color: var(--rule-on-white);
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 7px, rgba(0, 0, 0, .035) 7px, rgba(0, 0, 0, .035) 14px);
}
.ord-opt:has(input:disabled) { cursor: not-allowed; }
.ord-opt:has(input:disabled):hover .ord-opt-inner { border-color: var(--rule-on-white); }

.ord-opt-name { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; letter-spacing: -1px; font-size: 20px; line-height: 1.1; }
.ord-opt-sub { font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--body-on-white); }
.ord-opt-price {
  font-family: var(--font-body); font-size: 14px; line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--body-on-white);
}

/* Lineage options lead with the photograph. */
.ord-opt--img .ord-opt-inner { padding: 0; gap: 0; }
.ord-opt-fig { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: #f2f2f2; }
.ord-opt-fig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease-out); }
.ord-opt:hover .ord-opt-fig img { transform: scale(1.03); }
.ord-opt--img .ord-opt-text { padding: 16px 20px 20px; display: grid; gap: 6px; }

/* Remaining count. Reads as a fact, not a badge. */
.ord-remaining {
  font-family: var(--font-body); font-size: 13px; line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--body-on-white);
}
.ord-opt input:checked + .ord-opt-inner .ord-remaining { color: rgba(255, 255, 255, .75); }
.ord-remaining[data-state="low"] { color: #8a2b1f; }
.ord-remaining[data-state="out"] { color: var(--idle-on-white); }
.ord-opt input:checked + .ord-opt-inner .ord-remaining[data-state="low"] { color: #ffb3a6; }

/* ==========================================================================
   Summary and payment
   ========================================================================== */
.ord-summary { padding: 48px 0 0; }
.ord-lines {
  margin-top: 24px;
  border-top: 1px solid var(--black);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}
.ord-line {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-on-white);
  font-size: var(--fs-body);
}
.ord-line dt { color: var(--body-on-white); }
.ord-line dd { margin: 0; text-align: right; }
.ord-line--total { border-bottom: 1px solid var(--black); }
.ord-line--total dt, .ord-line--total dd {
  color: var(--black);
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700; letter-spacing: -.5px;
  font-size: 18px;
}
.ord-line--pending dd { color: var(--idle-on-white); }

/* ---------- Consent ----------
   The legal spine of the deposit model. It gets room, not a footnote. */
.ord-consent {
  margin-top: 32px;
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--rule-on-white);
}
.ord-consent input {
  width: 22px; height: 22px; margin: 0; flex: 0 0 auto;
  accent-color: var(--black);
}
.ord-consent label {
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: var(--black);
}
.ord-consent a { text-decoration: underline; text-underline-offset: 3px; }
.ord-consent[data-error="true"] { border-color: #8a2b1f; }
.ord-consent-err {
  grid-column: 2;
  font-family: var(--font-body); font-size: 13px; color: #8a2b1f;
}

.ord-actions { margin-top: 28px; display: grid; gap: 14px; justify-items: start; }
.ord-submit { width: 100%; justify-content: center; }
@media (min-width: 768px) { .ord-submit { width: auto; min-width: 280px; } }
.ord-submit[disabled] {
  background: transparent; color: var(--idle-on-white); border-color: var(--rule-on-white);
  cursor: not-allowed;
}
.ord-submit[disabled]:hover { background: transparent; color: var(--idle-on-white); }
.ord-fineprint {
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
  color: var(--body-on-white); max-width: 62ch;
}

/* Where Stripe's embedded form mounts. */
.ord-payment { margin-top: 32px; }
.ord-payment:empty { display: none; }

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal {
  padding: 48px var(--gutter) var(--section-pad);
  font-family: var(--font-body);
  color: var(--body-on-white);
}
.legal-body { max-width: 68ch; }
.legal-body h2 {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700; letter-spacing: -1px;
  font-size: var(--fs-h3); line-height: 1.15;
  color: var(--black);
  margin: 56px 0 16px;
  text-wrap: balance;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-body); color: var(--black);
  margin: 28px 0 8px;
}
.legal-body p { font-size: var(--fs-body); line-height: 1.65; margin: 0 0 16px; }
.legal-body ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.legal-body li { font-size: var(--fs-body); line-height: 1.65; margin-bottom: 8px; }
.legal-body a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.legal-body strong { color: var(--black); font-weight: 600; }

/* A callout for the thing a reader must not skim past. */
.legal-note {
  margin: 28px 0;
  padding: 20px;
  border: 1px solid var(--black);
  background: #fafafa;
}
.legal-note p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ord-step, .ord-opt-fig img, .ord-opt-inner { transition-duration: .01ms !important; }
  .ord-step[data-locked="true"] { filter: none; }
}

/* ==========================================================================
   The name on a Founder pair
   ========================================================================== */
.ord-name {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--black);
  display: grid; gap: 8px;
}
.ord-name-label {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  letter-spacing: -.5px; font-size: 16px; color: var(--black);
}
.ord-name-note {
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
  color: var(--body-on-white); max-width: 56ch;
}
.ord-name-input {
  margin-top: 4px;
  width: 100%; max-width: 24em;
  padding: 12px 14px;
  border: 1px solid var(--rule-on-white);
  background: var(--white);
  font-family: var(--font-body); font-size: 16px; line-height: 1.4;
  color: var(--black);
  transition: border-color .3s var(--ease-out);
}
.ord-name-input::placeholder { color: var(--idle-on-white); }
.ord-name-input:hover { border-color: rgba(0, 0, 0, .35); }
.ord-name-input:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; border-color: var(--black); }
.ord-name-err { font-family: var(--font-body); font-size: 13px; color: #8a2b1f; }

/* ==========================================================================
   Add to order
   ========================================================================== */
.ord-add { padding: 32px 0; border-bottom: 1px solid var(--rule-on-white); }
.ord-add-btn { width: 100%; justify-content: center; }
@media (min-width: 768px) { .ord-add-btn { width: auto; min-width: 320px; } }
.ord-add-btn[disabled] {
  background: transparent; color: var(--idle-on-white); border-color: var(--rule-on-white);
  cursor: not-allowed;
}
.ord-add-btn[disabled]:hover { background: transparent; color: var(--idle-on-white); }

/* ==========================================================================
   The basket
   ========================================================================== */
.ord-basket { margin-top: 24px; display: grid; gap: 0; }
.ord-basket:empty { display: none; }
.ord-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-on-white);
}
.ord-item:first-child { border-top: 1px solid var(--black); }
.ord-item-main { display: grid; gap: 4px; }
.ord-item-title {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  letter-spacing: -.5px; font-size: 16px; line-height: 1.2; color: var(--black);
}
.ord-item-sub {
  font-family: var(--font-body); font-size: 14px; line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--body-on-white);
}
.ord-item-remove {
  flex: 0 0 auto;
  min-height: 44px; padding: 0 4px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--body-on-white);
  text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; cursor: pointer;
  transition: color .3s var(--ease-out);
}
.ord-item-remove:hover { color: var(--black); }
.ord-basket-empty {
  margin-top: 24px;
  font-family: var(--font-body); font-size: var(--fs-body);
  color: var(--idle-on-white);
}

/* ==========================================================================
   Add another pair
   ========================================================================== */
.ord-again { margin-top: 20px; }
.ord-again-btn { width: 100%; justify-content: center; }
@media (min-width: 768px) { .ord-again-btn { width: auto; } }

/* ==========================================================================
   The lenses
   A product page, so it carries more air than the legal pages and more
   photography than the order page, but it still loads site.js only: no
   scroll theatrics, nothing that can snapshot an opacity of 0 before the
   stylesheet lands.
   ========================================================================== */
.lens-maker {
  padding: 56px var(--gutter) 72px;
  display: grid;
  gap: 20px;
}
.lens-maker .eyebrow { color: var(--body-on-white); }
.lens-maker-body { margin-top: 8px; }
@media (min-width: 900px) {
  .lens-maker {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 64px;
    padding: 88px var(--gutter) 104px;
    align-items: start;
  }
  .lens-maker .eyebrow { grid-column: 1 / -1; }
  .lens-maker-body { margin-top: 0; }
}

.lens { padding: 0 var(--gutter); }

/* ---------- One lens ---------- */
.lens-block {
  padding: 64px 0;
  border-bottom: 1px solid var(--rule-on-white);
  display: grid;
  gap: 32px;
}
@media (min-width: 900px) {
  .lens-block {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    column-gap: 64px;
    padding: 96px 0;
    align-items: start;
  }
  /* The second lens leads with the text, so the two blocks do not read as
     one column of pictures down the left. Swapping the track widths as well
     as the order keeps the prose column the wider of the two either way. */
  .lens-block--flip { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
  .lens-block--flip .lens-fig { order: 2; }
}

.lens-fig { overflow: hidden; background: #f2f2f2; }
.lens-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) {
  .lens-fig { position: sticky; top: calc(var(--nav-h) + 32px); aspect-ratio: 4 / 5; }
}

.lens-text { display: grid; gap: 16px; align-content: start; }
.lens-text .eyebrow { color: var(--body-on-white); }
.lens-text .h2 { margin-top: -4px; }
.lens-lede { font-size: 17px; line-height: 1.55; }
@media (min-width: 768px) { .lens-lede { font-size: 19px; line-height: 1.5; } }

/* ---------- The facts ---------- */
.lens-facts { margin: 16px 0 0; display: grid; gap: 0; }
.lens-fact {
  padding: 20px 0;
  border-top: 1px solid var(--rule-on-white);
  display: grid;
  gap: 6px;
}
.lens-fact:last-child { border-bottom: 1px solid var(--rule-on-white); }
.lens-fact dt {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  letter-spacing: -.5px; font-size: 16px; line-height: 1.2;
  color: var(--black);
}
.lens-fact dd {
  margin: 0;
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6;
  color: var(--body-on-white);
  max-width: 58ch;
}
@media (min-width: 1200px) {
  .lens-fact { grid-template-columns: 180px minmax(0, 1fr); column-gap: 32px; align-items: start; }
}

/* ---------- Side by side ---------- */
.lens-compare { padding: 72px 0 var(--section-pad); display: grid; gap: 14px; }
.lens-compare .eyebrow { color: var(--body-on-white); }

/* The table is the one thing here that can outgrow a phone, so it scrolls
   inside itself rather than pushing the page sideways. */
.lens-table-wrap { margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lens-table {
  width: 100%; min-width: 520px;
  border-collapse: collapse;
  font-family: var(--font-body);
  text-align: left;
}
.lens-table th, .lens-table td {
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--rule-on-white);
  font-size: var(--fs-body); line-height: 1.5;
  vertical-align: top;
}
.lens-table thead th {
  border-bottom: 1px solid var(--black);
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  letter-spacing: -.5px; font-size: 16px;
  color: var(--black);
}
.lens-table tbody th { font-weight: 600; color: var(--black); width: 34%; }
.lens-table td { color: var(--body-on-white); }

.lens-close { margin-top: 32px; }
.lens-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }

/* A link inside a step note: same weight as the note, just underlined. */
.ord-step-link { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }