/* The maker (wrapped/make/): the Mac app's flow on the web. One step at a time, its buttons in a
   dock at the foot of the window, and the site's chrome, faces and colours around it. */

.maker { --card: #f6f4f0; --card-line: #e9e5de; --radius: 10px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.08); }
.maker main.flow { padding: clamp(28px, 5vw, 56px) var(--gutter) 140px; }
.step { max-width: 860px; margin: 0 auto; animation: step-in .38s cubic-bezier(.2,.8,.2,1); }
.step-wide { max-width: 1120px; }
.step.is-back { animation-name: step-back; }
@keyframes step-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes step-back { from { opacity: 0; transform: translateX(-28px); } }
@media (prefers-reduced-motion: reduce) { .step, .step.is-back { animation: none; } }

.step-head { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; margin-bottom: 28px; }
.step-head h1 { grid-column: 1 / -1; font-size: clamp(38px, 5vw, 56px); line-height: 1.04; }
.step-icon + h1 { grid-column: 2; }
.step-icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: var(--oxblood); background: color-mix(in srgb, var(--oxblood) 11%, var(--paper)); }
.step-sub { grid-column: 1 / -1; margin: 10px 0 0; font-size: 20px; color: var(--muted); max-width: 34em; }
.muted { color: var(--muted); }
.small { color: var(--muted); font-size: 15px; margin: 8px 0 0; }
.eyebrow { font: 600 13px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; line-height: 1.45; cursor: pointer; }
.check input { margin: 5px 0 0; width: 18px; height: 18px; accent-color: var(--oxblood); flex: none; }
.status { margin: 0; min-height: 1.6em; }
.status.is-error, .small.is-error, .reading-note.is-error { color: var(--error, #8a1c1c); }

/* ── Start ── */
.drop { display: grid; gap: 18px; }
.drop-zone {
  display: grid; justify-items: center; gap: 8px; text-align: center; cursor: pointer;
  padding: clamp(32px, 6vw, 56px) 24px; border: 1.5px dashed var(--dash, #c9c4bb); border-radius: 14px; background: var(--card);
  transition: border-color .15s, background .15s, transform .15s;
}
.drop-zone:hover, .drop-zone.is-over { border-color: var(--oxblood); background: color-mix(in srgb, var(--oxblood) 4%, var(--card)); }
.drop-zone.is-over { transform: scale(1.01); }
.drop-zone:focus-within { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.drop-icon { color: var(--oxblood); }
.drop-title { font: 400 30px/1.1 var(--f-head); }
.drop-hint { color: var(--muted); font-size: 15px; }
.drop-or { margin: 10px 0 0; text-align: center; color: var(--muted); font-size: 15px; }
.samples { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sample {
  display: flex; align-items: center; gap: 14px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--card-line); background: var(--paper);
  transition: border-color .15s, box-shadow .15s;
}
.sample:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.sample { position: relative; }
.sample button { display: block; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; font-size: 17px; color: inherit; cursor: pointer; text-align: left; }
.sample button::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.sample button:focus-visible { outline: none; }
.sample button:focus-visible::after { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.sample small { display: block; }
.sample small { color: var(--muted); font-size: 15px; }
.sample-avatars { display: flex; flex: none; width: 76px; }
.sample-avatars i {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 400 17px/1 var(--f-head); font-style: normal;
  color: #fff; background: var(--oxblood); border: 2px solid var(--paper); margin-left: -8px;
}
.sample-avatars i:first-child { margin-left: 0; }
.sample-avatars i:nth-child(2) { background: #1f2a44; }
.sample-avatars i:nth-child(3) { background: #2f4a3a; }
.formats { margin-top: 28px; font-size: 16px; color: var(--muted); }
.formats summary { cursor: pointer; width: fit-content; }
.formats p { margin: 10px 0 0; max-width: 44em; }
@media (max-width: 560px) { .samples { grid-template-columns: 1fr; } .drop-title { font-size: 25px; } }

/* ── What we found ── */
.reading { max-width: 520px; }
.reading-bar { height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.reading-bar span { display: block; height: 100%; width: 0; background: var(--oxblood); transition: width .2s; }
.reading-bar.is-waiting span { width: 30% !important; animation: waiting 1.1s ease-in-out infinite alternate; }
@keyframes waiting { from { transform: translateX(-10%); } to { transform: translateX(240%); } }
.reading-note { margin: 12px 0 0; color: var(--muted); font-size: 16px; }

.assist, .pick { margin-top: 8px; padding: 24px; background: var(--card); border-radius: var(--radius); max-width: 44em; display: grid; gap: 12px; }
.assist h2, .pick h2 { font-size: 30px; }
.assist p, .pick p { margin: 0; }
.pick-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.pick-list button {
  width: 100%; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; text-align: left; font: inherit; color: inherit;
  padding: 14px 16px; background: var(--paper); border: 1px solid var(--card-line); border-radius: 8px; cursor: pointer;
}
.pick-list button:hover { border-color: var(--ink); }
.pick-list span { color: var(--muted); }

.me { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 22px; padding: 14px 16px; background: color-mix(in srgb, var(--oxblood) 6%, var(--paper)); border-radius: var(--radius); }
.me-q { margin: 0; font-weight: 600; }
.count { margin: 0 0 16px; display: flex; align-items: baseline; gap: 10px; }
.count-n { font: 600 44px/1 var(--f-body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.months { display: grid; grid-template-columns: repeat(auto-fill, 18px); gap: 5px; max-width: calc(24 * 23px); }
.months i { width: 18px; height: 18px; border-radius: 4px; background: var(--oxblood); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .3s cubic-bezier(.3,1.5,.5,1); }
.months i.is-on { transform: none; }
.timeline { margin-top: 26px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.chip {
  flex: none; display: inline-flex; align-items: baseline; gap: 8px; font: inherit; font-size: 15px; color: inherit; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; border: 0; background: var(--card); white-space: nowrap; transition: background .15s;
}
.chip:hover { background: var(--hover, #ece8e1); }
.chip small { color: var(--muted); font-size: 14px; }
.findings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.finding {
  position: relative; padding: 16px 16px 18px; background: var(--card); border-radius: var(--radius);
  opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s cubic-bezier(.2,.9,.3,1.2);
}
.finding.is-on { opacity: 1; transform: none; }
.finding .eyebrow { font-size: 11.5px; margin-bottom: 8px; padding-right: 28px; }
.finding h3 { font-size: 25px; line-height: 1.12; margin: 0 0 6px; }
.finding p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.45; }
.finding-share { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.finding-share:hover { background: var(--hover, #ece8e1); color: var(--ink); }
.found-note { margin: 22px 0 0; color: var(--muted); font-size: 16px; }
@media (max-width: 860px) { .findings { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .findings { grid-template-columns: 1fr; } .count-n { font-size: 38px; } .months { grid-template-columns: repeat(auto-fill, 14px); gap: 4px; } .months i { width: 14px; height: 14px; border-radius: 3px; } }

/* ── Segmented controls and option cards (the Mac's pickers) ── */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--seg, #ebe7e0); border-radius: 9px; }
.segmented button, .segmented span {
  display: inline-block; font: inherit; font-size: 15px; color: inherit; padding: 6px 14px; border: 0; border-radius: 7px; background: none; cursor: pointer;
}
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented input:checked + span, .segmented button[aria-checked="true"] { background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.segmented input:focus-visible + span { outline: 2px solid var(--oxblood); outline-offset: 1px; }

.options { display: grid; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 16px 18px; background: var(--card); border: 2px solid transparent; border-radius: var(--radius); transition: border-color .15s, background .15s;
}
.option:hover { background: var(--option-hover, #efece6); }
.option[aria-checked="true"] { border-color: var(--oxblood); background: var(--paper); }
.option strong { font-weight: 600; font-size: 18px; display: block; }
.option span { color: var(--muted); font-size: 15px; }
.option .option-main { flex: 1; min-width: 0; }
.option .option-price { text-align: right; flex: none; }
.option .option-price b { display: block; font: 400 26px/1 var(--f-head); color: var(--ink); }
.consent { display: grid; gap: 14px; margin-top: 28px; padding: 20px; border: 1px solid var(--card-line); border-radius: var(--radius); }
.consent-sample { margin: 28px 0 0; color: var(--muted); font-size: 16px; }

/* ── Title and cover ── */
.step[data-step="cover"] { max-width: 980px; }
.cover-step { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.cover-front { margin: 0; position: sticky; top: 96px; }
.cover-front-frame { aspect-ratio: 5 / 8; position: relative; border-radius: 3px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.cover-front-frame img { width: 100%; height: 100%; object-fit: cover; animation: fade .3s; }
@keyframes fade { from { opacity: 0; } }
.cover-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); font-size: 15px; text-align: center; padding: 20px; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--oxblood); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cover-side { display: grid; gap: 12px; }
.title-field input, .line-field input {
  width: 100%; font: inherit; color: inherit; border: 0; border-radius: 10px; background: var(--card); padding: 12px 16px;
}
.title-field input { font: italic 400 38px/1.15 "EB Garamond", var(--f-head); padding: 14px 18px; }
.line-field input { font-size: 17px; }
.title-field input:focus-visible, .line-field input:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 0; }
.gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 12px; margin-top: 10px; }
.design { display: grid; gap: 6px; justify-items: center; font: inherit; font-size: 14px; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.design-pic { width: 100%; aspect-ratio: 5 / 8; border-radius: 3px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.12); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .15s, transform .15s; overflow: hidden; }
.design-pic img { width: 100%; height: 100%; object-fit: cover; }
.design-pic.is-loading { background: linear-gradient(100deg, var(--card) 30%, var(--hover, #ece8e1) 50%, var(--card) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }
.design:hover .design-pic { transform: translateY(-2px); }
.design[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.design[aria-checked="true"] .design-pic { outline-color: var(--oxblood); }
.design:focus-visible { outline: none; }
.design:focus-visible .design-pic { outline-color: var(--ink); }
/* The Big Words design's phrases: set like the cover, condensed caps. */
.phrases { margin-top: 18px; }
.phrases-head { margin: 0 0 8px; font-size: 15px; color: var(--muted); }
.phrase-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.phrase {
  font: inherit; font-stretch: 62%; font-weight: 900; font-size: 17px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em;
  padding: 8px 10px 7px; border-radius: 6px; border: 1px solid var(--card-line, rgba(0,0,0,.12)); background: var(--card); color: inherit; cursor: pointer;
}
.phrase:hover { background: var(--hover, #ece8e1); }
.phrase:active { transform: translateY(1px); }
.phrase[aria-checked="true"] { background: #ffcf3f; border-color: #ffcf3f; color: #111; }
.cloths { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cloth { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); outline: 2px solid transparent; outline-offset: 2px; }
.cloth[aria-checked="true"] { outline-color: var(--ink); }
.cloth:disabled { opacity: .25; cursor: default; }
@media (max-width: 1000px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .cover-step { grid-template-columns: minmax(0, 1fr); }
  .cover-front { position: static; width: min(62%, 260px); margin: 0 auto; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .title-field input { font-size: 32px; }
}

/* ── Typeface ── */
.layouts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.layouts .option { display: grid; gap: 4px; align-content: start; }
.faces { display: grid; gap: 12px; }
.face { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; }
/* The left-hand page cropped to its text block (0.5 in outside margin, 3.75 in of text) with 0.15 in
   either side, from 0.88 in down: five or six lines at about the size they print. */
.face .page-crop { aspect-ratio: 4.05 / 1.25; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--card-line); }
.face .page-crop img { width: 123.457%; max-width: none; margin: -21.73% 0 0 -8.642%; }
.face .page-crop.is-loading { background: linear-gradient(100deg, #fff 30%, var(--card) 50%, #fff 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
@media (max-width: 640px) {
  .face { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .layouts { grid-template-columns: 1fr; }
}

/* ── Making ── */
.making { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; min-height: 46vh; }
.making-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; font-size: 21px; }
.making-lines li { display: flex; align-items: center; gap: 14px; color: var(--muted); transition: color .3s; }
.making-lines li.is-done { color: var(--ink); }
.making-lines .tick { width: 24px; height: 24px; flex: none; display: grid; place-items: center; }
.making-lines .tick svg { color: var(--oxblood); animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
.making-cover { width: 220px; border-radius: 3px; box-shadow: var(--shadow); animation: rise .6s cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from { opacity: 0; transform: translateY(16px) rotate(-2deg); } }
@media (max-width: 640px) { .making { grid-template-columns: 1fr; } .making-cover { width: 160px; } .making-lines { font-size: 18px; } }

/* ── The book's home ── */
.home { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 460px); gap: clamp(28px, 5vw, 56px); justify-content: center; align-items: start; }
.home-cover img { width: 100%; border-radius: 3px; box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 18px 40px rgba(0,0,0,.22); }
.home-title { font: italic 400 clamp(40px, 5vw, 52px)/1.05 "EB Garamond", var(--f-head); letter-spacing: -.01em; }
.home-dates { margin: 8px 0 0; font-size: 20px; color: var(--muted); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; margin: 22px 0 0; font-size: 17px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.home-actions { margin-top: 24px; }
.home-actions { flex-wrap: nowrap; }
.home-actions .site-btn-large { min-height: 48px; padding: 0 18px; white-space: nowrap; }
.order-note { margin-top: 18px; padding: 18px; border-radius: var(--radius); background: var(--card); }
.order-note p { margin: 0; font-size: 16px; }
.order-note .signup { margin-top: 12px; }
.more-pdfs { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 15px; }
.home hr { border: 0; border-top: 1px solid var(--rule); margin: 26px 0 8px; }
.home-links { list-style: none; margin: 0; padding: 0; }
.link-row { position: relative; display: grid; padding: 10px 0; }
.link-row button { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: inherit; text-align: left; cursor: pointer; }
.link-row button::after { content: ""; position: absolute; inset: 0; }
.link-row small { color: var(--muted); font-size: 15px; }
.link-row:hover button { text-decoration: underline; text-decoration-color: var(--oxblood); text-underline-offset: .3em; }
@media (max-width: 760px) {
  .home { grid-template-columns: minmax(0, 1fr); }
  .home-cover { width: min(64%, 260px); margin: 0 auto; }
  .home-actions { flex-wrap: wrap; }
  .home-actions .site-btn { flex: 1 1 auto; }
  .home-actions [data-order] { flex-basis: 100%; }
}

/* ── Turning the pages: a spread on a wide screen, one page on a phone ── */
.reader { margin-top: clamp(48px, 8vw, 88px); padding-top: clamp(32px, 5vw, 48px); border-top: 1px solid var(--rule); text-align: center; }
.reader h2 { font-size: clamp(32px, 4vw, 42px); }
.reader > .muted { margin: 8px 0 0; }
.book-view { --page-w: min(460px, 42vw); position: relative; margin: 32px auto 0; width: calc(2 * var(--page-w)); perspective: 2400px; outline: none; }
.book-view:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 10px; border-radius: 4px; }
.spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; filter: drop-shadow(0 18px 30px rgba(0,0,0,.14)); }
.spread::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 40px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(0,0,0,.07) 45%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.07) 55%, transparent); pointer-events: none; }
.spread.is-single::after { display: none; }
.leaf, .page { aspect-ratio: 5 / 8; background: #fff; position: relative; }
.page img { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.page.is-blank { background: transparent; box-shadow: none !important; }
.spread.is-opening::after { display: none; }
.page-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.page:nth-child(1) { box-shadow: inset -8px 0 18px -14px rgba(0,0,0,.35); }
.page:nth-child(2) { box-shadow: inset 8px 0 18px -14px rgba(0,0,0,.35); }
.leaf { position: absolute; top: 0; width: 50%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.45,.05,.3,1); z-index: 3; background: none; }
.leaf.on { left: 50%; transform-origin: left center; }
.leaf.back { left: 0; transform-origin: right center; }
.leaf.on.is-turning { transform: rotateY(-180deg); }
.leaf.back.is-turning { transform: rotateY(180deg); }
.leaf > div { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; overflow: hidden; }
.leaf > div img { width: 100%; height: 100%; }
.leaf > .leaf-under { transform: rotateY(180deg); }
.leaf > div::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .7s; }
.leaf.on > .leaf-top::after { background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 40%); }
.leaf.is-turning > div::after { opacity: 1; }
.turn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--paper) 88%, transparent); box-shadow: 0 1px 3px rgba(0,0,0,.18); color: var(--ink); display: grid; place-items: center; z-index: 5;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.turn:disabled { opacity: 0; pointer-events: none; }
.turn-back { left: -64px; }
.turn-on { right: -64px; }
.reader-bar { display: flex; align-items: center; gap: 16px; max-width: 560px; margin: 26px auto 0; }
.reader-bar input { flex: 1; accent-color: var(--oxblood); }
.reader-at { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 9em; text-align: right; }
@media (max-width: 900px) { .turn-back { left: -8px; } .turn-on { right: -8px; } }
@media (max-width: 640px) {
  .book-view { --page-w: min(100%, 360px); width: var(--page-w); }
  .spread { grid-template-columns: 1fr; }
  .leaf { width: 100%; }
  .leaf.on { left: 0; }
  .leaf.back { left: 0; transform-origin: left center; }
  .leaf.back { transform: rotateY(-180deg); }
  .leaf.back.is-turning { transform: rotateY(0deg); }
  .page:nth-child(1), .page:nth-child(2) { box-shadow: none; }
  .reader-at { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .leaf { transition-duration: .01s; } }

/* ── The Wrapped studio ── */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.studio-stage { display: grid; justify-items: center; min-width: 0; }
.studio-preview { width: min(100%, 380px); height: auto; border-radius: 6px; box-shadow: var(--shadow); }
.studio-preview.is-square { width: min(100%, 480px); }
.studio-strip { position: relative; display: flex; gap: 10px; overflow-x: auto; padding: 18px 2px 8px; max-width: 100%; overscroll-behavior-x: contain; }
.make-thumb { flex: none; display: grid; justify-items: center; gap: 6px; }
.make-thumb canvas { width: 64px; height: 114px; border-radius: 3px; display: block; }
.make-thumb.is-off canvas { opacity: .4; }
.make-thumb-show { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 3px; }
.make-thumb-show:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.make-thumb.is-focused canvas { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.make-thumb input { accent-color: var(--oxblood); }
.studio-controls { display: grid; gap: 22px; }
.studio-controls fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.studio-controls legend { font: 600 13px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; padding: 0; }
.studio-controls select, .studio-custom input { font: inherit; font-size: 16px; padding: 7px 10px; border: 0; border-radius: 8px; background: var(--card); color: inherit; }
.studio-select { display: grid; gap: 6px; font-size: 15px; color: var(--muted); }
.studio-custom { display: grid; gap: 6px; font-size: 15px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches label { position: relative; }
.swatches input { position: absolute; opacity: 0; }
.swatches span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--card); cursor: pointer; border: 1.5px solid transparent; }
.swatches span::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 55%, var(--b) 55%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.swatches input:checked + span { border-color: var(--ink); }
.swatches input:focus-visible + span { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.studio-colours { display: flex; flex-wrap: wrap; gap: 12px; font-size: 15px; }
.studio-save .actions { margin-top: 8px; }
.rewards { margin-top: 40px; padding: 20px 22px; border-radius: var(--radius); background: var(--card); }
.rewards summary { cursor: pointer; font: 400 26px/1.2 var(--f-head); }
.friends h2 { margin: 0 0 8px; font: 400 26px/1.2 var(--f-head); }
.friends p { margin: 0 0 12px; max-width: 40em; }
.friends b { font-family: "Geist Mono", ui-monospace, monospace; letter-spacing: 0.06em; }
.home-friends { margin-top: 20px; padding: 14px 16px; border-radius: var(--radius); background: var(--card); }
.home-friends p { margin: 0 0 10px; }
.home-friends .code { font-family: "Geist Mono", ui-monospace, monospace; letter-spacing: 0.06em; }
.unlock { margin: 16px 0 0; padding-left: 1.3em; max-width: 44em; }
.unlock li + li { margin-top: 6px; }
.claim { display: grid; gap: 12px; max-width: 34em; margin-top: 20px; }
.claim fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.claim legend { font-family: var(--f-head); font-size: 24px; padding: 0; margin-bottom: 6px; }
.claim > label:not(.check) { display: grid; gap: 4px; font-size: 16px; }
.claim input[type=url], .claim input[type=email], .claim input[type=text] { font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
.claim-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .studio { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .claim-numbers { grid-template-columns: 1fr; } }

/* ── The dock: progress dots, Back and the step's main button ── */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px);
  border-top: 1px solid var(--rule); padding-bottom: max(4px, env(safe-area-inset-bottom));
}
.dock-inner { max-width: 1120px; margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; gap: 16px; }
.dots { display: flex; gap: 6px; align-items: center; }
.dots i { height: 6px; width: 6px; border-radius: 3px; background: var(--dot, #d5d1ca); transition: width .3s, background .3s; }
.dots i.is-past { background: var(--oxblood); }
.dots i.is-now { width: 20px; background: var(--oxblood); }
.dock-buttons { margin-left: auto; display: flex; gap: 10px; }
.dock .site-btn { min-height: 46px; }
.dock .site-btn:disabled { opacity: .4; cursor: default; }
@media (max-width: 640px) {
  .dots { display: none; }
  .dock-inner { padding-top: 10px; padding-bottom: 10px; }
  .dock-buttons { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 8px; }
  .dock-buttons .site-btn { flex: 1 1 0; min-width: 0; padding: 0 12px; font-size: 16px; min-height: 44px; }
  .dock-buttons [data-back] { flex: 0 0 auto; }
  /* The step's main button gets the whole first row when there's an alternative beside Back. */
  .dock-buttons:has([data-alt]:not([hidden])) [data-next] { order: -1; flex-basis: 100%; }
}
.faces-note { margin: 0 0 12px; min-height: 1.4em; }
/* Each step's heading takes focus for screen readers when the step opens; it needs no ring. */
.step h1:focus { outline: none; }

/* Ordering a web book: shipping, an email, an optional code; an address only when a gift card pays it all. */
.order-form { display: grid; gap: 14px; margin-top: 18px; padding: 18px; border-radius: var(--radius); background: var(--card); }
.order-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.order-form legend { font: 600 13px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; padding: 0; }
.order-form label { display: grid; gap: 4px; font-size: 15px; color: var(--muted); }
.order-form input[type=email], .order-form input[type=text] { font: inherit; font-size: 16px; color: var(--ink); padding: 9px 12px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--paper); }
.ship { display: grid; gap: 6px; }
.ship .option { padding: 10px 14px; }
.ship .option strong { font-size: 16px; }
.address-row { display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: 8px; }
@media (max-width: 520px) { .address-row { grid-template-columns: 1fr 1fr; } .address-row label:first-child { grid-column: 1 / -1; } }
.order-form .option { background: var(--paper); border-color: var(--card-line); border-width: 1px; }
.order-form .option[aria-checked="true"] { border: 2px solid var(--oxblood); }
.text-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--oxblood); text-underline-offset: .25em; cursor: pointer; }

/* A book this browser made, to come back to. */
.resume { display: flex; align-items: center; gap: 18px; padding: 14px 18px; margin-bottom: 18px; border-radius: var(--radius); border: 1px solid var(--card-line); }
.resume img { width: 52px; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.resume > div { flex: 1; min-width: 0; }
.resume .eyebrow { margin: 0 0 4px; font-size: 11.5px; }
.resume-title { margin: 0; font: italic 400 24px/1.15 "EB Garamond", var(--f-head); }
.resume .small { margin: 2px 0 0; }
.me-select { font: inherit; font-size: 16px; padding: 7px 10px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--paper); color: inherit; }

/* Cover kinds: designs, your own, a photo, painted. */
.cover-tabs { margin-top: 6px; }
.cover-tabs button[aria-selected="true"] { background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.cover-panel { display: grid; gap: 12px; padding-top: 4px; }
.own-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; font-size: 15px; color: var(--muted); }
.own-row label { display: inline-flex; align-items: center; gap: 8px; }
.own-row input[type=color] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--card-line); border-radius: 8px; background: none; }
.own-row select { font: inherit; font-size: 15px; padding: 6px 10px; border: 0; border-radius: 8px; background: var(--card); color: var(--ink); }
.segmented button[aria-checked="true"] { background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.photo-drop { padding: 28px 18px; }
.photo-drop .drop-title { font-size: 24px; }
.paint-words { display: grid; gap: 6px; font-size: 15px; color: var(--muted); }
.paint-words textarea { font: inherit; font-size: 16px; color: var(--ink); padding: 10px 12px; border: 0; border-radius: 10px; background: var(--card); resize: vertical; }
.chip[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.picture-chip { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius); background: var(--card); font-size: 15px; }
.picture-chip img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.picture-chip span { flex: 1; }

/* The editor */
.editor-tabs { margin-bottom: 18px; }
.editor-tabs button[aria-selected="true"] { background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.edit-panel { display: grid; gap: 12px; max-width: 760px; }
.search input { width: 100%; font: inherit; font-size: 18px; padding: 12px 16px; border: 0; border-radius: 10px; background: var(--card); color: inherit; }
.found-list, .chapter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.moment { padding: 12px 14px; border-radius: var(--radius); background: var(--card); display: grid; gap: 6px; }
.moment.is-hidden .moment-text { text-decoration: line-through; color: var(--muted); }
.moment-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.moment-meta b { color: var(--ink); font-weight: 600; }
.moment-text { margin: 0; font: 400 18px/1.45 "EB Garamond", var(--f-head); white-space: pre-wrap; overflow-wrap: anywhere; }
.moment-text.is-me { text-align: left; }
.moment-text.is-bold { font-weight: 700; }
.moment-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14.5px; }
.moment textarea { font: 400 18px/1.45 "EB Garamond", var(--f-head); padding: 8px 10px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--paper); }
.moment .pin { width: 5.5em; font: inherit; font-size: 14.5px; padding: 3px 6px; border: 1px solid var(--card-line); border-radius: 6px; }
.tag { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--paper); border: 1px solid var(--card-line); color: var(--muted); }
.chapter-row { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: var(--radius); background: var(--card); }
.chapter-row .num { font: 400 20px/1 var(--f-head); color: var(--muted); text-align: right; }
.chapter-row input { width: 100%; font: italic 400 20px/1.2 "EB Garamond", var(--f-head); padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; }
.chapter-row input:hover, .chapter-row input:focus { border-color: var(--card-line); background: var(--paper); }
.chapter-row small { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.word-add { display: flex; gap: 8px; max-width: 30em; }
.word-add input, .edit-field input, .edit-field textarea { font: inherit; font-size: 16px; padding: 9px 12px; border: 0; border-radius: 10px; background: var(--card); color: inherit; }
.word-add input { flex: 1; min-width: 0; }
.edit-field { display: grid; gap: 6px; font-size: 15px; color: var(--muted); }
.edit-status { min-height: 1.4em; }
@media (max-width: 640px) { .chapter-row { grid-template-columns: 2em minmax(0, 1fr); } .chapter-row small { grid-column: 2; } }
.link-form { margin-top: 14px; }
.replace { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.replace label { display: grid; gap: 4px; font-size: 14.5px; color: var(--muted); flex: 1; min-width: 12em; }
.replace input { font: inherit; font-size: 16px; padding: 9px 12px; border: 0; border-radius: 10px; background: var(--card); color: var(--ink); }
.preview-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.preview-pages img { width: 100%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.preview-pages p { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--muted); }
.own-page { display: grid; gap: 6px; }
/* Keyboard focus on every choice, in the brand's ink. */
.option:focus-visible, .cloth:focus-visible, .chip:focus-visible, .segmented button:focus-visible,
[role="tab"]:focus-visible, .text-btn:focus-visible, .finding-share:focus-visible, .turn:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.volume-tabs { margin-top: 20px; }
.volume-tabs button[aria-selected="true"] { background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }

/* ── Groupchat Wrapped's skin ──
   html[data-skin="gcw"], set by index.html's first script on groupchatwrapped.com: the landing page's
   night, gold and Archivo condensed caps (public/wrapped/index.html). --oxblood is the accent the
   rules above use, so every ring, tick, bar and chosen thing turns gold. The book keeps its own faces:
   the title fields, the covers and the pages show what prints. */
.gcw-only { display: none; }
[data-skin="gcw"] .rr-only { display: none; }
[data-skin="gcw"] .gcw-only { display: block; }
[data-skin="gcw"] body.maker {
  color-scheme: dark;
  --paper: #0b0b0c; --ink: #f4f2ee; --soft: #d6d3cc; --muted: #9b988f; --rule: #262629; --tile: #151517; --oxblood: #ffcf3f;
  --card: #151517; --card-line: #2e2e33; --hover: #1f1f23; --option-hover: #1c1c20; --seg: #1c1c20; --dash: #3a3a40; --dot: #3a3a40;
  --error: #ff8f86; --radius: 12px; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
  --f-head: "Archivo", system-ui, sans-serif; --f-body: "Archivo", system-ui, sans-serif;
  font: 400 17px/1.5 var(--f-body); -webkit-font-smoothing: antialiased;
}
[data-skin="gcw"] .maker :is(h1, h2, .caps, .drop-title, .count-n, .option-price b) {
  font-family: var(--f-head); font-stretch: 62%; font-weight: 900; text-transform: uppercase; line-height: .88; letter-spacing: -.005em;
}
[data-skin="gcw"] .maker h3 { font-family: var(--f-body); font-weight: 700; letter-spacing: 0; }
[data-skin="gcw"] .step-head h1 { font-size: clamp(48px, 9vw, 92px); }
[data-skin="gcw"] .step-sub { color: var(--soft); font-size: 19px; }
[data-skin="gcw"] .drop-title { font-size: 40px; }
[data-skin="gcw"] .count-n { font-size: 64px; letter-spacing: 0; }
[data-skin="gcw"] .option-price b { font-size: 32px; }
[data-skin="gcw"] .reader h2 { font-size: clamp(40px, 6vw, 64px); }
[data-skin="gcw"] .assist h2, [data-skin="gcw"] .pick h2 { font-size: 40px; }
[data-skin="gcw"] .rewards summary, [data-skin="gcw"] .claim legend, [data-skin="gcw"] .friends h2 { font: 800 22px/1.2 var(--f-body); }
[data-skin="gcw"] .chapter-row .num { font-family: var(--f-body); font-weight: 800; }
[data-skin="gcw"] .maker :is(input, select, textarea) { color: var(--ink); }

/* Buttons: the landing page's, solid off-white with gold for the one that moves you on. */
[data-skin="gcw"] .site-btn { border-radius: 10px; font: 800 16px/1.1 var(--f-body); }
[data-skin="gcw"] .site-btn:hover { background: #fff; }
[data-skin="gcw"] .site-btn-quiet:hover { background: var(--ink); color: var(--paper); }
[data-skin="gcw"] .site-btn-quiet { background: transparent; }
[data-skin="gcw"] .site-btn-large { min-height: 56px; font-size: 17px; }
[data-skin="gcw"] .gcw-gold, [data-skin="gcw"] .dock [data-next] { background: #ffcf3f; color: #111; }
[data-skin="gcw"] .gcw-gold:hover, [data-skin="gcw"] .dock [data-next]:hover { background: #ffdb66; }
[data-skin="gcw"] .segmented input:checked + span, [data-skin="gcw"] .segmented button[aria-checked="true"],
[data-skin="gcw"] .cover-tabs button[aria-selected="true"], [data-skin="gcw"] .editor-tabs button[aria-selected="true"],
[data-skin="gcw"] .volume-tabs button[aria-selected="true"] { background: #ffcf3f; color: #111; box-shadow: none; }
[data-skin="gcw"] .sample-avatars i { color: #111; background: #ffcf3f; font: 800 15px/1 var(--f-body); }
[data-skin="gcw"] .sample-avatars i:nth-child(2) { background: #f4f2ee; }
[data-skin="gcw"] .sample-avatars i:nth-child(3) { background: #f7f4ee; color: #b3202a; }
[data-skin="gcw"] .making-lines .tick svg path { stroke: #111; }

/* The header: one plain bar, the wordmark in condensed caps and one gold button. */
.gcw-head { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--paper) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gcw-head-inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gcw-logo { font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 24px; letter-spacing: .01em; word-spacing: -.04em; text-decoration: none; white-space: nowrap; }
.gcw-head .site-btn { min-height: 40px; padding: 0 16px; font-size: 15px; }

/* The foot: Privacy, Terms and Rules, then the idiom line, as on the landing page. */
.gcw-foot { padding-bottom: 96px; }
.gcw-foot-links { display: flex; justify-content: center; gap: 24px; padding: 56px 24px 0; font-size: 14px; color: var(--muted); }
.gcw-foot-links a { text-decoration: none; }
.gcw-foot-links a:hover { color: var(--ink); }
.idiom-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px calc(env(safe-area-inset-bottom) + 32px); font: 400 11px/1.4 "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; color: var(--soft); }
.idiom-foot a { color: inherit; text-decoration: none; }
.idiom-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.idiom-foot span { font-size: 10.5px; color: var(--muted); }

/* What we found, for a group: the stat sheet on paper, and a gold player card for everyone. */
[data-skin="gcw"] .team { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: start; margin-top: 36px; }
.team-sheet { background: #f7f4ee; color: #141414; border-radius: 6px; box-shadow: 0 30px 70px rgba(0,0,0,.55); padding: 26px 28px 22px; transform: rotate(-1.2deg); }
.team-sheet header, .team-sheet footer { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b675f; }
.team-sheet h2 { margin: 14px 0 18px; font-size: 64px; color: #141414; }
.team-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid #141414; border-bottom: 2px solid #141414; }
.team-totals div { padding: 12px 0; min-width: 0; }
.team-totals div + div { padding-left: 12px; border-left: 1px solid #d5d0c6; }
.team-totals b { display: block; font-stretch: 62%; font-weight: 900; font-size: 32px; line-height: 1; }
.team-totals span { font-size: 12px; color: #6b675f; }
.team-awards { list-style: none; margin: 0 0 16px; padding: 0; }
.team-awards li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 10px 0; border-bottom: 1px solid #d5d0c6; }
.team-awards span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #b3202a; }
.team-awards b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-stretch: 75%; font-weight: 800; font-size: 22px; text-transform: uppercase; }
.team-awards i { font-style: normal; font-size: 14px; color: #4a463f; }
.team-sheet footer { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; }
.team-side h2 { font-size: clamp(40px, 5vw, 56px); }
.team-side > p { margin: 12px 0 20px; max-width: 34em; }
.players { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.player {
  display: grid; align-content: start; gap: 4px; min-width: 0; text-align: left; font: inherit; color: #111; cursor: pointer;
  padding: 14px 14px 16px; border: 0; border-radius: 6px; background: #ffcf3f; box-shadow: 0 12px 30px rgba(0,0,0,.4);
  transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
.player:nth-child(odd) { transform: rotate(-1deg); }
.player:nth-child(even) { transform: rotate(1deg); }
.player:hover { transform: rotate(0) translateY(-3px); }
.player:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.player small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #5a4a10; }
.player b { font-stretch: 62%; font-weight: 900; font-size: 40px; line-height: .9; text-transform: uppercase; overflow-wrap: anywhere; }
.player span { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.player i { font-style: normal; font-size: 13px; color: #5a4a10; }
@media (max-width: 860px) {
  [data-skin="gcw"] .team { grid-template-columns: minmax(0, 1fr); }
  .team-sheet { transform: none; padding: 22px 20px 18px; }
  .team-sheet h2 { font-size: 52px; }
  .team-totals b { font-size: 26px; }
}
@media (max-width: 420px) {
  .gcw-head-inner { height: 64px; gap: 12px; }
  .gcw-logo { font-size: 20px; }
  .gcw-head .site-btn { padding: 0 12px; font-size: 14px; }
  .players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player b { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .player { transition: none; } }
@media (max-width: 560px) { [data-skin="gcw"] .drop-title { font-size: 32px; } [data-skin="gcw"] .count-n { font-size: 52px; } }

/* Review round 1 (2026-10-15, 375 and 1440): states the first pass hadn't seen. */
[data-skin="gcw"] .step-icon { display: none; }                        /* the landing page has no icons; caps carry it */
[data-skin="gcw"] .pick h2 { display: none; }                          /* the step's heading already asks */
[data-skin="gcw"] .assist h2 { font-size: clamp(30px, 6vw, 40px); }
[data-skin="gcw"] .option strong { color: var(--ink); }                /* not the muted line under it */
[data-skin="gcw"] .pick-list button { display: grid; gap: 2px; justify-content: stretch; }
[data-skin="gcw"] .pick-list strong { font-size: 18px; }
[data-skin="gcw"] .pick-list span { font-size: 14px; }
[data-skin="gcw"] .cloth { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
[data-skin="gcw"] .home-title { font-style: normal; font-size: clamp(48px, 7vw, 72px); }
[data-skin="gcw"] .home-actions [data-order] { background: #ffcf3f; color: #111; }
[data-skin="gcw"] .home-actions [data-order]:hover { background: #ffdb66; }
[data-skin="gcw"] .more-pdfs a, [data-skin="gcw"] .formats a { text-decoration-color: #ffcf3f; text-underline-offset: .25em; }
/* Disabled reads as off, not as a dimmed gold. */
[data-skin="gcw"] .site-btn:disabled, [data-skin="gcw"] .dock .site-btn:disabled {
  opacity: 1; cursor: default; background: var(--card); color: var(--muted); box-shadow: inset 0 0 0 1px var(--card-line);
}

/* Review round 2: rhythm and alignment. */
[data-skin="gcw"] .step-sub { margin-top: 16px; }                     /* caps at .88 line height need the air */
[data-skin="gcw"] .step[data-step="found"] { max-width: 1120px; }       /* the sheet and the cards side by side, under the logo */
[data-skin="gcw"] .gcw-head-inner { max-width: calc(1120px + 2 * var(--gutter)); }  /* the logo on the wide steps' edge */
[data-skin="gcw"] .team { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
@media (max-width: 860px) { [data-skin="gcw"] .team { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  /* Tabs that wrap sit in an even grid, not a ragged row with an orphan. */
  [data-skin="gcw"] .cover-tabs, [data-skin="gcw"] .editor-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  [data-skin="gcw"] .cover-tabs button, [data-skin="gcw"] .editor-tabs button { text-align: center; }
  [data-skin="gcw"] .step-head h1 { font-size: 44px; }
}
@media (max-width: 560px) {
  [data-skin="gcw"] .resume { flex-wrap: wrap; }
  [data-skin="gcw"] .resume .site-btn { flex: 1 1 100%; }
}
[data-skin="gcw"] .step-icon + h1 { grid-column: 1 / -1; }           /* no icon, so no indent */

/* Deal Again and the whole timeline (2026-10-16). */
.timeline-long { margin: 10px 0 0; font-size: 15px; }
[data-skin="gcw"] .deal-note { min-height: 1.4em; }
[data-skin="gcw"] .team-side .actions { gap: 10px; }
[data-skin="gcw"] .studio-deal:not([hidden]) { display: grid; }
.deal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.deal-row .small { margin: 0; }
.studio-more { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
[data-skin="gcw"] .studio-more:not([hidden]) { display: flex; }

/* The Groupies on the group book's first step (Groupchat Wrapped): the landing page's gold band, as a
   panel beside the awards page the book prints after its contents. */
.groupies { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px 40px; align-items: start; margin: 32px 0 8px; padding: 28px; border-radius: 12px; background: #ffcf3f; color: #111; }
.groupies h2 { margin: 0 0 12px; font-size: clamp(44px, 7vw, 72px); color: #111; }
.groupies p { margin: 0; font-size: 18px; font-weight: 500; max-width: 30ch; }
.groupies-page { margin: 0; background: #f7f4ee; color: #141414; border-radius: 4px; padding: 18px 20px 14px; box-shadow: 0 16px 36px rgba(0,0,0,.28); }
.groupies-page figcaption { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b675f; margin-bottom: 8px; }
.groupies-page ol { list-style: none; margin: 0; padding: 0; }
.groupies-page li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #d5d0c6; font-size: 14px; }
.groupies-page li span { color: #b3202a; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; align-self: center; }
.groupies-page li b { font-stretch: 75%; font-weight: 800; text-transform: uppercase; text-align: right; }
@media (max-width: 720px) { .groupies { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; } }

/* ---------------------------------------------------------------------------------------------
   read receipts: html[data-skin="rr"], make/index.html on readreceipts.lol. The landing page's
   paper, ink and red bookmark (public/index.html): Archivo for the words, EB Garamond where the book
   speaks (numbers, prices, the book's title), ink pill buttons, the lower-case wordmark and the idiom
   foot. Always light, like the landing page: a site selling a book reads as paper. */
[data-skin="rr"] body.maker {
  --paper: #faf8f4; --ink: #1c1a17; --soft: #3d3934; --muted: #6a645b; --rule: #e4ddd2; --tile: #efe9df; --oxblood: #b3202a;
  --card: #ffffff; --card-line: #e4ddd2; --radius: 16px; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 34px rgba(60,40,20,.08);
  --f-head: "Archivo", system-ui, sans-serif; --f-body: "Archivo", system-ui, sans-serif; --f-book: "EB Garamond", Georgia, serif;
  font: 400 17px/1.55 var(--f-body); -webkit-font-smoothing: antialiased;
}
[data-skin="rr"] .maker :is(h1, h2) { font-family: var(--f-head); font-weight: 700; font-stretch: 85%; letter-spacing: -.02em; line-height: 1.02; }
[data-skin="rr"] .step-head h1 { font-size: clamp(38px, 5.4vw, 60px); }
[data-skin="rr"] .step-sub { color: var(--muted); font-size: 19px; max-width: 46ch; margin-top: 14px; }
[data-skin="rr"] .step-icon { display: none; }
[data-skin="rr"] .step-icon + h1 { grid-column: 1 / -1; }
[data-skin="rr"] :is(.drop-title, .count-n, .option-price b, .home-title, .resume-title) { font-family: var(--f-book); font-weight: 400; letter-spacing: -.01em; }
[data-skin="rr"] .drop-title { font-size: 32px; }
[data-skin="rr"] .count-n { font-size: 56px; }
[data-skin="rr"] .option-price b { font-size: 30px; }
[data-skin="rr"] .home-title { font-style: normal; }
[data-skin="rr"] .reader h2 { font-size: clamp(32px, 4vw, 44px); }
[data-skin="rr"] .site-btn { border-radius: 999px; background: var(--ink); color: #fff; font: 700 16px/1.1 var(--f-body); }
[data-skin="rr"] .site-btn:hover { background: #3d3934; }
[data-skin="rr"] .site-btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
[data-skin="rr"] .site-btn-quiet:hover { background: var(--ink); color: #fff; }
[data-skin="rr"] .site-btn:active { transform: translateY(1px); }
[data-skin="rr"] .site-btn:disabled, [data-skin="rr"] .dock .site-btn:disabled { opacity: 1; cursor: default; background: var(--tile); color: var(--muted); box-shadow: none; }
[data-skin="rr"] .sample-avatars i { background: #f3e3e1; color: #6e1a20; font: 500 17px/1 var(--f-book); }
[data-skin="rr"] .sample-avatars i:nth-child(2) { background: #23303d; color: #e9eef3; }
[data-skin="rr"] .dock { background: color-mix(in srgb, var(--paper) 94%, transparent); }

/* The header: the lower-case wordmark with its bookmark, the landing page's nav, one ink button. */
.rr-head { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--rule); }
.rr-head-inner { max-width: calc(1120px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rr-mark { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; font: 400 30px/1 "EB Garamond", Georgia, serif; letter-spacing: -.01em; white-space: nowrap; }
.rr-mark svg { flex: none; width: .3em; height: .43em; fill: #b3202a; }
.rr-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.rr-nav a:not(.site-btn) { text-decoration: none; }
.rr-nav a:not(.site-btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.rr-nav .site-btn { min-height: 40px; padding: 0 18px; font-size: 15px; }
@media (max-width: 760px) { .rr-nav a:not(.site-btn) { display: none; } .rr-mark { font-size: 26px; } }

.rr-foot { padding-bottom: 96px; }
.rr-foot-links { display: flex; justify-content: center; gap: 24px; padding: 56px 24px 0; font-size: 14px; color: var(--muted); }
.rr-foot-links a { text-decoration: none; }
.rr-foot-links a:hover { color: var(--ink); }
[data-skin="rr"] .formats p + p { margin-top: 10px; }
/* What we found reads in the book's voice: each moment's line in EB Garamond, like the landing's page. */
[data-skin="rr"] .finding h3 { font: 400 28px/1.12 var(--f-book); letter-spacing: -.005em; }
[data-skin="rr"] .chip { background: var(--card); }

/* The Groupies on the found step (Groupchat Wrapped): the awards read out one by one. */
.ceremony { margin: 36px 0 8px; }
.ceremony h2 { font-size: clamp(56px, 10vw, 104px); color: #ffcf3f; }
.ceremony-sub { margin: 8px 0 18px; font: italic 400 22px/1.2 "EB Garamond", Georgia, serif; color: var(--soft); }
.ceremony-list { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--rule); }
.ceremony-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ceremony-award { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #ffcf3f; }
.ceremony-list li:not(.is-on) .ceremony-award { color: var(--muted); }
.ceremony-winner { grid-row: 2; font-stretch: 62%; font-weight: 900; font-size: 40px; line-height: .95; text-transform: uppercase; }
.ceremony-list i { grid-row: 2; grid-column: 2; font-style: normal; font-size: 14px; color: var(--muted); text-align: right; }
.ceremony-list .text-btn { grid-row: 1; grid-column: 2; justify-self: end; font-size: 14px; }
.ceremony-list li.is-on .ceremony-winner { animation: award-in .5s cubic-bezier(.2,.8,.2,1); }
@keyframes award-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ceremony-list li.is-on .ceremony-winner { animation: none; } }
.ceremony-actions { gap: 10px; }
.ceremony-done { margin-top: 18px; display: grid; gap: 14px; }
.ceremony-code { margin: 0; font-size: 17px; }
.ceremony-code b { font: 900 22px/1 "Archivo", sans-serif; font-stretch: 75%; letter-spacing: .06em; color: #ffcf3f; }
@media (max-width: 560px) { .ceremony-winner { font-size: 32px; } .ceremony-list i { grid-row: 3; grid-column: 1; text-align: left; } }

/* "Which one is you?" when it's asked on the way to the book: plainly, not a silent bounce. */
.me.is-asking { outline: 2px solid var(--oxblood); outline-offset: 6px; border-radius: 8px; }

/* The library card on Groupchat Wrapped, in its caps, not the book's italic serif. */
[data-skin="gcw"] .resume-title { font: 900 28px/1 var(--f-head); font-stretch: 62%; text-transform: uppercase; font-style: normal; }

/* ── Polish pass (2026-10-17) ──
   read receipts: the paper's corners. Buttons at 3px and cards at 4px, as Fitzcarraldo Editions' shop
   does, in place of pills and 16px bubbles (pills are on the slop list). Labels in sentence case,
   not tracked capitals. The dock lines up with the step above it. */
[data-skin="rr"] body.maker { --radius: 4px; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 24px rgba(60,40,20,.07); }
[data-skin="rr"] .site-btn { border-radius: 3px; transition: background-color .15s, color .15s, box-shadow .15s; }
[data-skin="rr"] :is(.chip, .swatches span, .tag, .finding-share) { border-radius: 3px; }
[data-skin="rr"] :is(.segmented) { border-radius: 4px; }
[data-skin="rr"] :is(.segmented button, .segmented span) { border-radius: 3px; }
[data-skin="rr"] :is(.drop-zone, .studio-controls select, .studio-custom input, .order-form input[type=email], .order-form input[type=text]) { border-radius: 4px; }
[data-skin="rr"] :is(.eyebrow, .studio-controls legend, .order-form legend) {
  font: 600 14px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--soft);
}
[data-skin="rr"] .finding .eyebrow { font-size: 13.5px; }
[data-skin="rr"] .option strong { color: var(--ink); }
[data-skin="rr"] .friends h2 { font: 400 28px/1.15 var(--f-book); letter-spacing: -.005em; }
[data-skin="rr"] .friends b, [data-skin="rr"] .home-friends .code { font: 500 1em/1 var(--f-body); letter-spacing: .04em; }

/* The dock's dots and buttons sit on the step's own column, not 130px outside it. */
.dock-inner { max-width: calc(860px + 2 * var(--gutter)); }
body:has(.step-wide:not([hidden])) .dock-inner,
[data-skin="gcw"] body:has(.step[data-step="found"]:not([hidden])) .dock-inner { max-width: calc(1120px + 2 * var(--gutter)); }
/* Groupchat Wrapped: chips and swatches square up to the 10px of its buttons, not pills. */
[data-skin="gcw"] :is(.chip, .swatches span, .tag) { border-radius: 6px; }