/* ARAT MARBLE · SPLIT FACE
   Tokens are sampled from the generated gallery and the real stones; see DESIGN.md.
   One motif: the break line (--jag-*), set by js/site.js. */

:root {
  --night:      #161510;
  --stone:      #DDD9D3;
  --stone-deep: #B8B3AC;
  --ink:        #1E1C19;
  --ink-soft:   #5F5B51;
  --viola:      #5E4358;
  --bone:       #EFEBE4;

  /* engine tokens */
  --sc-canvas:      var(--night);
  --sc-surface:     #23211C;
  --sc-ink:         var(--bone);
  --sc-ink-soft:    #B6B0A6;
  --sc-accent:      var(--viola);
  --sc-accent-ink:  var(--bone);
  --sc-font-display: "Gloock", "Iowan Old Style", Georgia, serif;
  --sc-font-text:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sc-maxw: 88rem;
  --sc-measure: 58ch;

  --t-hero: clamp(2.9rem, 1.4rem + 5.6vw, 6.3rem);
  --t-h2:   clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem);
  --t-h3:   clamp(1.5rem, 1.2rem + 1.3vw, 2.3rem);
  --t-lede: clamp(1.1rem, 1rem + 0.55vw, 1.4rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sc-font-text);
  font-weight: 300;
  font-size: var(--sc-t-base);
  line-height: 1.55;
  color: var(--sc-ink);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--viola); }
:focus-visible { outline: 2px solid var(--viola); outline-offset: 4px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: -100%; left: var(--sc-gutter); z-index: 60; padding: .6rem 1rem; background: var(--bone); color: var(--ink); }
.skip:focus { top: 1rem; }

/* pale sections set their own ink; the engine's ink is the night one */
.claim, .face, .cuts, .voices, .drawing { color: var(--ink); }
.claim a, .face a, .cuts a, .voices a, .drawing a { color: var(--ink); }

/* ---------- bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(.9rem, 2vw, 1.4rem) var(--sc-gutter);
  mix-blend-mode: difference; color: #fff;
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__mark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--sc-font-display); font-size: 1.15rem; letter-spacing: .01em; }
.bar__glyph { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.bar__doors { display: flex; }
.bar__door { text-decoration: none; font-weight: 400; font-size: var(--sc-t-sm); padding: .45rem .95rem; border: 1px solid currentColor; }
.bar__door--etsy { border-right: 0; }
.bar__door--trade { clip-path: var(--jag-door, none); margin-left: -1px; padding-left: 1.2rem; }
.bar__door:hover { background: #fff; color: #000; }

/* ---------- buttons: the primary one has one broken edge ---------- */
.btn {
  display: inline-block; text-decoration: none; font-weight: 400;
  font-size: var(--sc-t-sm); letter-spacing: .01em;
  padding: .95rem 1.6rem .95rem 1.35rem;
  transition: transform .5s var(--ease), background .3s, color .3s;
}
.btn--cut { background: var(--bone); color: var(--ink); clip-path: var(--jag-door, none); padding-left: 1.7rem; }
.btn--cut:hover { transform: translateX(3px); background: #fff; }
.btn--line { border: 1px solid currentColor; }
.btn--line:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
.claim .btn--cut, .cuts .btn--cut, .drawing .btn--cut, .door--trade .btn--cut { background: var(--ink); color: var(--bone); }
.cuts .btn--cut:hover, .door--trade .btn--cut:hover { background: #000; }

/* ---------- 0 · hero ---------- */
.hero__stage { background: var(--night); }
/* the still is never still: light breathes, dust drifts (code, not video) */
.hero__light {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(118deg, transparent 18%, rgba(236, 228, 214, .55) 34%, rgba(236, 228, 214, .35) 46%, transparent 62%);
  opacity: .05; animation: breathe 7.5s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .03; transform: translateX(-1.2%); } 50% { opacity: .11; transform: translateX(1.2%); } }
.hero__dust { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.hero.is-scrolling .hero__light, .hero.is-scrolling .hero__dust { opacity: 0 !important; transition: opacity .6s; }
.hero__cue {
  position: absolute; z-index: 25; left: 50%; bottom: max(1.2rem, env(safe-area-inset-bottom)); translate: -50% 0;
  display: none; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--bone); text-decoration: none; font-size: var(--sc-t-xs); letter-spacing: .04em;
  transition: opacity .4s;
}
.hero__cue-line { display: block; width: 1px; height: 2.6rem; background: color-mix(in oklab, var(--bone) 28%, transparent); overflow: hidden; }
.hero__cue-line span { display: block; width: 100%; height: 40%; background: var(--bone); animation: cut-down 1.8s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes cut-down { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }
.hero.is-scrolling .hero__cue { opacity: 0; pointer-events: none; }
@media (max-width: 860px) { .hero__cue { display: flex; } .hero__copy { padding-bottom: 3.6rem; } }
@media (prefers-reduced-motion: reduce) { .hero__light, .hero__cue-line span { animation: none; } .hero__dust { display: none; } }
.hero__scrim { --sc-scrim-a: 62%; }
.hero__copy { max-width: min(36rem, 40vw); }
@media (max-width: 860px) { .hero__copy { max-width: 92vw; } }
.split-h {
  position: relative; margin: 0 0 .35em;
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: var(--t-hero); line-height: .98; letter-spacing: -.005em;
  color: var(--bone);
}
.split-h__raw, .split-h__cut { display: block; }
.split-h__raw {
  position: absolute; inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--bone) 70%, transparent);
}
.split-h__cut { position: relative; }
.has-jag .split-h__cut { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.hero__second {
  margin: 0 0 1.1rem;
  font-family: var(--sc-font-display); font-size: calc(var(--t-hero) * .5);
  line-height: 1.05; color: var(--bone);
}
.hero__lede { margin: 0 0 1.8rem; max-width: 34rem; font-size: var(--t-lede); color: var(--sc-ink-soft); }
.hero__doors { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero .btn--line { color: var(--bone); }

/* ---------- broken top edge ---------- */
.jag-top { position: relative; z-index: 2; }
.has-jag .jag-top { clip-path: var(--jag-top, none); margin-top: -6vh; padding-top: calc(var(--sc-section) + 6vh); }

/* ---------- 1 · claim ---------- */
.claim { background: var(--stone); padding-block: var(--sc-section); }
.claim__wrap { max-width: 74rem; }
.claim__text {
  margin: 0; max-width: 30ch;
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.14;
  text-wrap: pretty;
}
.claim__text--second { margin-top: clamp(2rem, 5vw, 4.5rem); margin-left: auto; max-width: 26ch; color: var(--ink-soft); }
@media (max-width: 860px) { .claim__text--second { margin-left: 0; } }

/* ---------- 2 · split face ---------- */
.face { background: var(--stone); }
.face__stage { display: grid; grid-template-rows: auto auto; background: var(--stone); padding-bottom: var(--sc-section); }
.face__head { padding-top: var(--sc-section); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem var(--sc-gutter); align-items: end; }
.face__title { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--t-h2); line-height: 1; }
.face__lede { margin: 0; max-width: 42ch; font-size: var(--t-lede); color: var(--ink-soft); }
.face__frame {
  position: relative; justify-self: center;
  width: min(calc(100vw - 2 * var(--sc-gutter)), calc(72vh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: clamp(1.2rem, 3vh, 2.2rem) var(--sc-gutter);
  overflow: hidden; background: var(--night); cursor: ew-resize; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.face__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.face__img--cut { will-change: clip-path; }
.face__seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: color-mix(in oklab, var(--bone) 55%, transparent);
  pointer-events: none; mix-blend-mode: screen;
}
.face__range { position: absolute; inset: auto 0 0 0; height: 2.2rem; display: block; }
.face__range input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.face__range input:focus-visible + * { outline: 2px solid var(--viola); }
.face__caption { position: absolute; left: 1rem; bottom: .9rem; margin: 0; font-size: var(--sc-t-sm); color: var(--bone); pointer-events: none; }
.face__caption a { pointer-events: auto; color: var(--bone); }
@media (max-width: 860px) {
  .face__head { grid-template-columns: 1fr; padding-top: 4.5rem; }
  .face__frame { aspect-ratio: 4 / 5; width: calc(100vw - 2 * var(--sc-gutter)); }
}

/* ---------- 3 · five cuts (pan) ---------- */
.cuts { background: var(--stone); }
.cuts__stage { background: var(--stone); overflow: hidden; }
.cuts__rail { height: 100vh; height: 100svh; display: flex; align-items: center; gap: clamp(3rem, 7vw, 9rem); padding-inline: var(--sc-gutter); padding-left: calc(var(--sc-gutter) + min(38rem, 46vw) + clamp(3rem, 7vw, 9rem)); width: max-content; }
.cuts__lead { position: absolute; left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(38rem, 46vw); z-index: 2;
  /* visible while the stage slides in (p < 0) and for the first fifth of the pan, then gone */
  opacity: calc(1 - clamp(0, (var(--sc-p, 0) - 0.1) * 7, 1)); }
.cuts__title { margin: 0 0 1rem; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--t-h2); line-height: 1; }
.cuts__lede { margin: 0; max-width: 34ch; font-size: var(--t-lede); color: var(--ink-soft); }

.cut { flex: 0 0 auto; display: grid; gap: 1.2rem 2rem; align-items: end; }
.cut__fig { margin: 0; overflow: hidden; background: var(--stone-deep); }
.cut__fig img { width: 100%; height: 100%; object-fit: cover; }
.cut__fig--tall { width: clamp(16rem, 30vw, 27rem); aspect-ratio: 3 / 4; }
.cut__fig--low  { width: clamp(11rem, 19vw, 17rem); aspect-ratio: 3 / 4; }
.cut__fig--wide { width: clamp(20rem, 40vw, 36rem); aspect-ratio: 3 / 4; max-height: 74vh; }
.cut__text { width: clamp(15rem, 22vw, 20rem); }
.cut__name { margin: 0 0 .5rem; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--t-h3); line-height: 1; }
.cut__text p { margin: 0 0 .9rem; color: var(--ink-soft); }
.cut__pieces { list-style: none; margin: 0; padding: 0; font-size: var(--sc-t-sm); }
.cut__pieces li + li { margin-top: .25rem; }

.cut--split  { grid-template-columns: auto auto auto; }
.cut--split  .cut__fig--tall { grid-row: 1; }
.cut--split  .cut__fig--low  { align-self: start; margin-top: 12vh; }
.cut--ribbed { grid-template-columns: auto auto auto; }
.cut--ribbed .cut__fig--low  { align-self: start; margin-top: 18vh; }
.cut--scalloped, .cut--relief { grid-template-columns: auto auto; }
.cut--relief .cut__text { align-self: start; margin-top: 10vh; }
.cut--figure { grid-template-columns: auto auto auto; }
.cut--figure .cut__fig--low { align-self: start; margin-top: 8vh; }

.cuts__tail { flex: 0 0 auto; width: min(26rem, 70vw); display: grid; gap: 1.2rem; padding-right: var(--sc-gutter); }
.cuts__tail p { margin: 0; font-family: var(--sc-font-display); font-size: var(--t-h3); line-height: 1.1; }

@media (max-width: 860px) {
  .cuts__rail { gap: 2.2rem; padding-left: calc(100vw + var(--sc-gutter)); }
  .cuts__lead { width: calc(100vw - 2 * var(--sc-gutter)); }
  .cut { gap: .8rem 1rem; }
  .cut--split .cut__fig--low, .cut--ribbed .cut__fig--low, .cut--figure .cut__fig--low { margin-top: 4vh; }
  .cut--relief .cut__text { margin-top: 0; }
  .cut__fig--tall { width: 62vw; }
  .cut__fig--low { width: 34vw; }
  .cut__fig--wide { width: 74vw; }
  .cut__text { width: 68vw; }
  .cut--split, .cut--ribbed, .cut--figure { grid-template-columns: auto auto; }
  .cut--split .cut__text, .cut--ribbed .cut__text, .cut--figure .cut__text { grid-column: 1 / -1; }
  .cut--scalloped, .cut--relief { grid-template-columns: auto; }
  .cut--relief .cut__text { margin-top: 0; }
}

/* ---------- 4 · two voices ---------- */
.voices { background: var(--stone-deep); padding-block: var(--sc-section); }
.voices__title { margin: 0 0 .6rem; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--t-h2); line-height: 1; }
.voices__lede { margin: 0 0 clamp(2.5rem, 6vw, 5rem); max-width: 40ch; font-size: var(--t-lede); color: var(--ink-soft); }
.voices__cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.voices__seam { width: 1px; align-self: stretch; background: var(--ink); opacity: .35; }
.voice__macro { margin: 0 0 1.4rem; aspect-ratio: 7 / 5; overflow: hidden; }
.voice__macro img { width: 100%; height: 100%; object-fit: cover; }
.voice__who { margin: 0 0 .8rem; font-family: var(--sc-font-display); font-size: var(--t-h3); line-height: 1; }
.voice__text { margin: 0; max-width: 42ch; }
.voice__text p { margin: 0 0 .9rem; }
.voice--cut .voice__text { font-style: italic; }
@media (max-width: 860px) {
  .voices__cols { grid-template-columns: 1fr; }
  .voices__seam { width: auto; height: 1px; }
}

/* ---------- 5 · made to your drawing ---------- */
.drawing { background: var(--stone); padding-block: var(--sc-section); }
.drawing__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.5rem var(--sc-gutter); align-items: end; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.drawing__title { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--t-h2); line-height: 1; }
.drawing__lede { margin: 0; max-width: 48ch; font-size: var(--t-lede); color: var(--ink-soft); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.step { padding: 1.4rem 1.4rem 0 0; border-right: 1px solid color-mix(in oklab, var(--ink) 25%, transparent); margin-right: 1.4rem; }
.step:last-child { border-right: 0; margin-right: 0; }
.step__n { display: block; font-family: var(--sc-font-display); font-size: var(--t-h2); line-height: 1; margin-bottom: 2.2rem; color: var(--ink); }
.step__name { margin: 0 0 .5rem; font-weight: 500; font-size: var(--sc-t-lg); }
.step p { margin: 0; color: var(--ink-soft); max-width: 30ch; }
@media (max-width: 860px) {
  .drawing__head { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .step:nth-child(2n) { border-right: 0; margin-right: 0; }
}
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } .step { border-right: 0; margin-right: 0; } }

/* ---------- 6 · two doors ---------- */
.doors__stage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; background: var(--night); min-height: 100svh; }
.door { position: relative; display: grid; align-items: center; min-height: 0; }
.door__in { padding: clamp(5rem, 12vh, 8rem) var(--sc-gutter) clamp(3rem, 7vh, 5rem); max-width: 34rem; }
.door__kicker { margin: 0 0 .9rem; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); }
.door__title { margin: 0 0 1rem; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--t-h3); line-height: 1.12; }
.door__body { margin: 0 0 1.6rem; color: inherit; opacity: .78; max-width: 38ch; }
.door--etsy { background: var(--night); color: var(--bone); }
.door--trade { background: var(--stone); color: var(--ink); clip-path: var(--jag-seam, none); margin-left: -2vw; padding-left: 2vw; }
/* the door you reach for widens */
.doors__stage { grid-template-columns: var(--l, 1fr) var(--r, 1fr); transition: grid-template-columns .7s var(--ease); }
.doors__stage[data-open="etsy"]  { --l: 1.25fr; --r: 1fr; }
.doors__stage[data-open="trade"] { --l: 1fr; --r: 1.25fr; }

.note { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.note__field { display: grid; gap: .35rem; font-size: var(--sc-t-sm); }
.note__field:first-child, .note__field--wide { grid-column: 1 / -1; }
.note__field span { color: var(--ink-soft); }
.note input, .note select, .note textarea { font: inherit; font-size: var(--sc-t-base); padding: .6rem .7rem; border: 1px solid color-mix(in oklab, var(--ink) 35%, transparent); background: var(--bone); color: var(--ink); border-radius: 0; width: 100%; }
.note textarea { resize: vertical; min-height: 5.5rem; font-family: inherit; }
.note input:focus, .note select:focus, .note textarea:focus { outline: 2px solid var(--viola); outline-offset: 1px; border-color: transparent; }
.note__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; }
.note button.btn { border: 0; cursor: pointer; font: inherit; font-size: var(--sc-t-sm); }
.note__wa { font-size: var(--sc-t-sm); }

.foot { grid-column: 1 / -1; padding: 1.1rem var(--sc-gutter) 1.2rem; background: var(--night); color: var(--sc-ink-soft); font-size: var(--sc-t-xs); border-top: 1px solid color-mix(in oklab, var(--bone) 14%, transparent); }
.foot p { margin: 0; }
.foot__legal { max-width: 62ch; }
.foot a { color: var(--bone); }

@media (max-width: 860px) {
  .doors__stage { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; }
  .doors__stage[data-open] { grid-template-columns: 1fr; }
  .door--trade { clip-path: var(--jag-top, none); margin-left: 0; padding-left: 0; margin-top: -3vh; }
  .door__in { padding-top: clamp(3rem, 8vh, 5rem); padding-bottom: 2rem; }
  .door--etsy .door__in { padding-top: 5rem; }
  .note { grid-template-columns: 1fr; }
}

/* ---------- reduced motion / no JS: everything reads as a document ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .door, .doors__stage { transition: none; }
}

/* ---------- trust line (top of the claim): one sentence-strip, break-line glyph as separator ---------- */
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem; margin: 0 0 clamp(2.5rem, 6vw, 5rem); font-size: var(--sc-t-sm); font-weight: 400; color: var(--ink); }
.trust .glyph { width: .8rem; height: .8rem; fill: var(--viola); flex: 0 0 auto; }
@media (max-width: 860px) { .trust { gap: .45rem .7rem; } }

/* ---------- uses: who the workshop cuts for ---------- */
.uses { list-style: none; margin: 0 0 clamp(2.5rem, 6vw, 4.5rem); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem clamp(1.5rem, 3vw, 3rem); }
.use { display: grid; gap: .25rem; padding-left: .9rem; border-left: 1px solid var(--ink); }
.use__who { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.15; }
.use__what { color: var(--ink-soft); max-width: 30ch; }
@media (max-width: 860px) { .uses { grid-template-columns: 1fr; } }

/* ---------- etsy door assurances ---------- */
.door__assure { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: var(--sc-t-sm); opacity: .78; }
.door__assure li { position: relative; }
.door__assure li + li::before { content: ""; position: absolute; left: -.7rem; top: .55em; width: 3px; height: 3px; background: currentColor; transform: rotate(45deg); }

/* ---------- piece links go out to etsy ---------- */
.cut__pieces a { display: inline-flex; align-items: baseline; gap: .3rem; }
.cut__pieces .ext { width: .55em; height: .55em; flex: 0 0 auto; opacity: .55; transition: opacity .2s, transform .3s var(--ease); }
.cut__pieces a:hover .ext { opacity: 1; transform: translate(1px, -1px); }

/* ---------- footer as a brand ending: the word itself is split ---------- */
.foot { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 1rem 2rem; padding-top: clamp(2.5rem, 7vh, 5rem); }
.foot__end { grid-column: 1 / -1; line-height: .82; }
.foot__word { display: block; font-family: var(--sc-font-display); font-size: clamp(5rem, 22vw, 20rem); letter-spacing: .02em; color: var(--bone); clip-path: var(--jag-top-deep, none); margin-bottom: -.06em; }
.foot__line { grid-column: 1 / -1; margin: 0 0 1.6rem; font-family: var(--sc-font-display); font-size: var(--t-h3); color: var(--bone); }
.foot__id { margin: 0; }
.foot__legal { margin: 0; justify-self: end; text-align: right; }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr; } .foot__legal { justify-self: start; text-align: left; } }

/* ---- PLAIN ANSWERS ---------------------------------------------------
   The questions people send, on the stone ground. Same two-face grammar:
   the question is the raw edge, the answer is the polished one. */
.qa { background: var(--stone); color: var(--ink); padding-block: var(--sc-section); }
.qa__head { margin-bottom: clamp(2.2rem, 5vw, 4rem); }
.qa__title { margin: 0 0 .5rem; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--t-h2); line-height: 1; }
.qa__lede { margin: 0; max-width: 52ch; font-size: var(--t-lede); color: var(--ink-soft); }
.qa__list { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.qa__item { padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid rgba(30, 28, 25, .18); }
.qa__item:nth-child(odd) { border-right: 1px solid rgba(30, 28, 25, .18); padding-right: clamp(1.6rem, 4vw, 3rem); }
.qa__item:nth-child(even) { padding-left: clamp(1.6rem, 4vw, 3rem); }
.qa__q { margin: 0 0 .55rem; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--t-h3); line-height: 1.15; color: var(--ink); }
.qa__a { margin: 0; max-width: 46ch; color: var(--ink-soft); }
@media (max-width: 760px) {
  .qa__list { grid-template-columns: 1fr; }
  .qa__item, .qa__item:nth-child(odd), .qa__item:nth-child(even) { border-right: 0; padding-left: 0; padding-right: 0; }
}