/* ===========================================================
   STUDIO3C — homepage, pop-up paper book
   Each section is a sheet of cardstock on the table. Cards are hinged
   at their bottom edge: they lie back flat, then stand up as you scroll
   (--p goes 0 → 1, set by paper3d.js). Words are printed on the sheet
   and never move.
   =========================================================== */
:root {
  --table:  #ece3d4;
  --page:   #f3ede1;
  --cardst: #f8f3ea;
  --edge-1: #e2d7c5;
  --edge-2: #d6c9b3;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .33 0 0 0 .5 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

body.paper { background: var(--table); }
body.paper::after { opacity: .03; }          /* the shared noise layer, a touch stronger on the table */
.book { padding: 128px 32px 0; display: grid; gap: 14vh; }
.btn:focus-visible, a:focus-visible, .pop-card:focus-visible { outline: 2px solid var(--clay-dk); outline-offset: 4px; }

/* ---------- a sheet of cardstock ---------- */
.sheet {
  position: relative; width: 100%; max-width: 1240px; margin: 0 auto;
  background: var(--page) var(--grain); background-size: 220px;
  border-radius: 3px; padding: 64px 64px 56px;
  box-shadow:                                   /* stacked page edges, then the cast shadow */
    0 1px 0 var(--edge-1), 0 2px 0 #f6f1e7, 0 3px 0 var(--edge-1), 0 4px 0 #f4eee3, 0 5px 0 var(--edge-2),
    0 30px 44px -26px rgba(34,27,20,.38), 0 2px 10px rgba(34,27,20,.05);
}
.sheet::before {                                 /* long paper fibres */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: var(--fibres); background-size: 400px; opacity: .12; mix-blend-mode: multiply;
}
.sheet > * { position: relative; }
.sheet.single { max-width: 1040px; }

/* the gutter: a soft crease where the two pages meet */
.spread::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 120px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, rgba(34,27,20,0) 0%, rgba(34,27,20,.035) 38%, rgba(34,27,20,.11) 49.4%, rgba(255,252,246,.6) 50.4%, rgba(34,27,20,.04) 58%, rgba(34,27,20,0) 100%);
}
.spread { display: grid; grid-template-columns: 1fr 1fr; column-gap: 112px; }
.spread > .sheet-head, .spread > .pops, .spread > .sheet-foot { grid-column: 1 / -1; }

.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 40px; }
.sheet-head h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; max-width: 16ch; }
.sheet-head p { color: var(--muted); }
.sheet-foot { margin-top: 44px; text-align: right; }      /* keep clear of the gutter crease */

/* ---------- hero spread ---------- */
.hero-spread { min-height: min(78vh, 720px); align-items: center; padding-top: 72px; padding-bottom: 72px; }
.land-meta { display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin-bottom: 26px; }
.land-meta b { color: var(--clay); font-weight: 600; }
.hero-spread h1 { font-size: clamp(2.8rem, 5.6vw, 5.4rem); font-weight: 700; letter-spacing: -.045em; line-height: .98; }
.hero-spread .lead { margin-top: 24px; max-width: 30em; color: var(--ink-2); font-size: 1.08rem; }
.hero-spread .lead a { color: var(--clay-dk); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.actions { margin-top: 32px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.actions.center { justify-content: center; }
.page-art { display: flex; justify-content: center; align-items: center; }

/* the mark as three layers of cut paper on paper stands */
.logo-pop { position: relative; width: min(100%, 400px); aspect-ratio: 200 / 230; perspective: 1700px; perspective-origin: 50% -30%; transform-style: preserve-3d; }
.logo-pop .layer { position: absolute; inset: 0; transform-origin: 50% 100%; transform-style: preserve-3d;
  transform: translateZ(var(--z, 0px)) rotateX(calc((1 - var(--p, 1)) * 84deg + var(--p, 1) * 4deg)); }
.logo-pop svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 calc(var(--p, 1) * 10px) calc(var(--p, 1) * 12px) rgba(34,27,20,.2)); }
.layer-a { --z: 0px; }
.layer-b { --z: 34px; }
.layer-c { --z: 64px; }
.logo-shadow { position: absolute; left: 12%; right: 12%; bottom: -14px; height: 26px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(34,27,20,.22), transparent); opacity: var(--p, 1); }
.logo-pop::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(34,27,20,.16); }   /* the fold line */

/* ---------- pop-up cards ---------- */
.pops { display: grid; gap: 30px 24px; }
.pops.four { grid-template-columns: repeat(4, 1fr); column-gap: 28px; }
.pops.three { grid-template-columns: repeat(3, 1fr); }
.pop { --p: 1; perspective: 1500px; perspective-origin: 50% -60%; display: flex; flex-direction: column; }
.pop-card {
  position: relative; display: block; flex: 1; transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--p)) * 76deg));
  background: var(--cardst) var(--grain); background-size: 220px;
  border-radius: 2px; color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 -1px 0 var(--edge-1), 0 1px 0 var(--edge-2);
}
.pop-card::after {                               /* lying back = in its own shade */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(to top, rgba(34,27,20,.1), rgba(34,27,20,.26)); opacity: calc(1 - var(--p));
}
.pop-floor { position: relative; height: 18px; flex: none; }
.pop-floor::before { content: ''; position: absolute; left: -6px; right: -6px; top: 0; height: 1px; background: rgba(34,27,20,.14); }   /* hinge crease */
.pop-shadow { position: absolute; left: 4%; right: 4%; top: 0; height: 18px; transform-origin: top; transform: scaleY(var(--p));
  background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(34,27,20,.26), transparent 100%); opacity: var(--p); }

/* a faint centre fold, like a V-folded pop-up card */
.fold { background-image: linear-gradient(90deg, rgba(34,27,20,.012) 0, rgba(34,27,20,0) 49.7%, rgba(34,27,20,.035) 49.9%, rgba(255,255,255,.55) 50.15%, rgba(255,255,255,0) 50.6%, rgba(34,27,20,.02) 100%), var(--grain); background-size: 100% 100%, 220px; }

.text-card { padding: 28px 26px 26px; }
.text-card .num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--clay); color: var(--cream); font-weight: 700; font-size: .86rem;
  box-shadow: 0 1px 0 var(--clay-dk), 0 4px 8px -3px rgba(148,101,72,.55); }
.text-card h3 { font-size: 1.24rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 20px 0 10px; }
.text-card p { color: var(--ink-2); font-size: .95rem; }
.text-card ul { list-style: none; margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(34,27,20,.18); display: grid; gap: 4px; font-size: .88rem; color: var(--muted); }
.text-card li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--clay); margin-right: 10px; vertical-align: middle; }

.quote { margin: 0; }
.quote blockquote { font-size: 1.06rem; line-height: 1.6; color: var(--ink-2); }
.quote blockquote::before { content: '“'; display: block; font-weight: 700; font-size: 2.8rem; line-height: .7; color: var(--clay); margin-bottom: 12px; }
.quote figcaption { margin-top: 18px; font-size: .84rem; font-weight: 600; color: var(--muted); }
#words .page { display: flex; flex-direction: column; gap: 30px; }
#words .sheet-head { margin-bottom: 4px; }

/* work: a screenshot printed on card */
.work-card { padding: 10px 10px 14px; transition: box-shadow .3s; }
.work-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: 1px; box-shadow: 0 0 0 1px rgba(34,27,20,.08); }
.wc-name { display: block; font-weight: 600; font-size: .95rem; letter-spacing: -.01em; margin: 12px 4px 0; line-height: 1.25; }
.wc-type { display: block; font-size: .78rem; color: var(--muted); margin: 3px 4px 0; }
@media (pointer: fine) {
  .pop:has(.work-card:hover) { --lift: 1; }
  .work-card { transform: rotateX(calc((1 - var(--p)) * 76deg - var(--lift, 0) * 5deg)) translateZ(calc(var(--lift, 0) * 8px)); transition: transform .35s var(--ease); }
}
@media (min-width: 1001px) { .work-pops .pop:nth-child(13) { grid-column: 2; } }

/* ---------- back cover ---------- */
.cover { background: var(--dark); padding: 96px 64px 88px; display: flex; justify-content: center;
  box-shadow: 0 1px 0 #3a2e24, 0 3px 0 #17110c, 0 30px 44px -26px rgba(34,27,20,.5); }
.cover::before { opacity: .12; mix-blend-mode: screen; }
.cta-pop { width: min(100%, 640px); }
.cta-card { padding: 52px 48px 46px; text-align: center; }
.cta-card h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.cta-card p { margin: 18px auto 0; max-width: 28em; color: var(--ink-2); }
.cover .pop-floor::before { background: rgba(243,237,225,.12); }
.cover .pop-shadow { background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(0,0,0,.55), transparent 100%); }

.paper-foot { max-width: 1240px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 0 4px 40px; font-size: .84rem; color: var(--muted); }
.paper-foot a:hover { color: var(--clay-dk); }

/* ---------- smaller screens ---------- */
@media (max-width: 1000px) {
  .pops.four { grid-template-columns: repeat(2, 1fr); }
  .spread { column-gap: 64px; }
}
@media (max-width: 760px) {
  .book { padding: 104px 14px 0; gap: 9vh; }
  .sheet, .cover { padding: 34px 22px 30px; }
  .spread { grid-template-columns: 1fr; }
  .spread::after { display: none; }                  /* one page per sheet on phones */
  .hero-spread { min-height: 0; padding-top: 30px; }
  .page-art { order: -1; margin-bottom: 26px; }
  .logo-pop { width: min(62vw, 240px); }
  .hero-spread h1 { font-size: clamp(2.5rem, 12vw, 3.3rem); }
  .pops.three { grid-template-columns: 1fr; }
  .pops.four:not(.work-pops) { grid-template-columns: 1fr; }
  .pops.four.work-pops { gap: 22px 14px; }
  #words .page + .page { margin-top: 30px; }
  .work-card { padding: 7px 7px 11px; }
  .wc-name { font-size: .86rem; margin-top: 9px; }
  .wc-type { font-size: .72rem; }
  .cta-card { padding: 36px 22px 32px; }
}

/* ---------- reduced motion: a still, flat book ---------- */
html.flat .pop, html.flat .logo-pop .layer { --p: 1 !important; }
html.flat .work-card { transition: none; }

/* ===========================================================
   v2 enhancements: coloured cardstock and slightly richer paper.
   No new motion. Everything above this line is the original.
   =========================================================== */

/* ---------- richer paper: a hint of page-edge stack on the outer side, softer two-part shadow ---------- */
.sheet {
  box-shadow:
    0 1px 0 var(--edge-1), 0 2px 0 #f6f1e7, 0 3px 0 var(--edge-1), 0 4px 0 #f4eee3, 0 5px 0 var(--edge-2),
    1px 0 0 var(--edge-1), 2px 1px 0 #f6f1e7, 3px 2px 0 var(--edge-2),
    0 34px 48px -30px rgba(34,27,20,.36), 0 10px 16px -12px rgba(34,27,20,.16), 0 2px 10px rgba(34,27,20,.04);
}
/* the crease catches a little more light */
.spread::after {
  background: linear-gradient(90deg, rgba(34,27,20,0) 0%, rgba(34,27,20,.035) 38%, rgba(34,27,20,.12) 49.3%, rgba(255,252,246,.75) 50.2%, rgba(255,252,246,.2) 51%, rgba(34,27,20,.04) 58%, rgba(34,27,20,0) 100%);
}

/* ---------- coloured cardstock ---------- */
.tone-espresso { --page: #221b14; color: var(--cream); }
.tone-espresso, .tone-clay, .tone-deep { background: var(--page) var(--grain); background-size: 220px; }
.tone-espresso::before { background-image: var(--fibres); mix-blend-mode: screen; opacity: .06; }
.tone-espresso::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;   /* light grain so dark stock still reads as paper */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .9 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px; }
.tone-espresso { box-shadow: 0 1px 0 #3a2e24, 0 2px 0 #17110c, 0 3px 0 #3a2e24, 0 4px 0 #17110c, 1px 0 0 #3a2e24, 2px 1px 0 #17110c,
  0 34px 48px -30px rgba(34,27,20,.5), 0 10px 16px -12px rgba(34,27,20,.25); }
.tone-espresso .sheet-head h2 { color: var(--cream); }
.tone-espresso .pop-floor::before { background: rgba(243,237,225,.14); }
.tone-espresso .pop-shadow { background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(0,0,0,.55), transparent 100%); }

.tone-clay { --page: #b07a5e; --edge-1: #9c6a50; --edge-2: #8a5c44; }
.tone-clay .sheet-head h2 { color: var(--ink); }                  /* ink on clay ≈ 4.6:1 */
.tone-clay .sheet-head p { color: var(--ink); }
.tone-clay.spread::after { background: linear-gradient(90deg, rgba(34,27,20,0) 0%, rgba(34,27,20,.06) 38%, rgba(34,27,20,.2) 49.3%, rgba(255,236,222,.4) 50.2%, rgba(34,27,20,.06) 58%, rgba(34,27,20,0) 100%); }
.tone-clay .pop-floor::before { background: rgba(34,27,20,.22); }

.tone-deep { --page: #e3d5bf; --edge-1: #d3c3a9; --edge-2: #c6b499; }
.tone-deep .sheet-head p, .tone-deep .wc-type { color: #5c5144; }   /* AA on the deeper stock */

/* ---------- hero mark: printed flat into the page (no stand, no rise) ---------- */
.logo-printed { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.logo-print { width: min(78%, 340px); height: auto; display: block; }
.logo-printed figcaption { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.lp-word { font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; color: var(--ink); }
.lp-word span { color: var(--clay-dk); }
.lp-line { font-size: .92rem; color: #6b6052; }

/* ---------- AA for small muted text on cards ---------- */
.quote figcaption, .wc-type { color: #6b6052; }

/* ---------- hero headline: always exactly two lines ---------- */
.hero-spread h1 .nw { white-space: nowrap; }
.hero-spread .page-words { container-type: inline-size; }
/* sized from the text column itself: "means business." is ~6.7× the font size wide, so 14cqi always fits */
.hero-spread h1 { font-size: clamp(1.9rem, 14cqi, 4.6rem); }

/* ---------- splash intro (copied from the live homepage) ---------- */
body.intro-active { overflow: hidden; }
#intro { position: fixed; inset: 0; z-index: 5000; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; transition: transform 1s cubic-bezier(.76,0,.24,1), opacity .5s ease; }
#intro.done { transform: translateY(-100%); }
.intro-svg { width: min(56vw, 280px); height: auto; overflow: visible; }
.i-dot2 { transform-box: fill-box; transform-origin: center; transition: transform .9s cubic-bezier(.34,1.56,.64,1), opacity .5s ease; }
.intro-word { font-weight: 700; font-size: clamp(1.6rem,5vw,2.4rem); letter-spacing: -.03em; opacity: 0; animation: fadeUp .7s var(--ease) 2s forwards; }
.intro-word span { color: var(--clay); }
.intro-line { width: 0; height: 2px; background: var(--clay); animation: lineGrow .6s var(--ease) 2.3s forwards; }
.intro-tag { font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); opacity: 0; animation: fadeUp .7s var(--ease) 2.5s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lineGrow { to { width: 90px; } }
@media (max-width: 760px) { .logo-print { width: min(52vw, 220px); } .logo-printed { gap: 14px; } }

/* services + process sheets match the hero sheet's size (Cara 2026-10-11) */
#services.sheet.single, #process.sheet.single { max-width: 1240px; min-height: min(78vh, 720px); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 760px) { #services.sheet.single, #process.sheet.single { min-height: 0; } }

/* client labels describe the actual work; a touch larger so they read (Cara 2026-10-11) */
.wc-type { font-size: .86rem; line-height: 1.4; }
@media (max-width: 760px) { .wc-type { font-size: .82rem; } }

/* footer town links (same as the live homepage) */
.paper-foot .land-areas { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 12px; min-width: 0; }
.paper-foot .land-areas-lab { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.paper-foot .land-areas-links { display: flex; flex-wrap: wrap; gap: 3px 12px; }
.paper-foot .land-areas-links a { color: var(--muted); transition: color .2s; }
.paper-foot .land-areas-links a:hover { color: var(--clay); }

/* Google star rating (shown only when live reviews load) */
.g-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: .95rem; color: var(--ink); }
.g-num { font-weight: 700; font-size: 1.15rem; }
.g-count { color: var(--ink); }
.g-leave { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.stars { position: relative; display: inline-block; font-size: 1.05rem; letter-spacing: 2px; line-height: 1; }
.stars-off { color: rgba(34,27,20,.22); }
.stars-on { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--ink); }
.card-stars { display: block; width: max-content; margin-bottom: 10px; font-size: .95rem; }
.card-stars .stars-on { color: var(--clay-dk); }

/* reviews: one row of cards you scroll through (Cara 2026-10-11) */
#words .words-head { align-items: flex-end; }
#words .words-head h2 { max-width: none; }
.g-rating { margin: 0; }
.spread > .rv { grid-column: 1 / -1; min-width: 0; }   /* without min-width the card row widens the whole sheet on phones */
.rv { position: relative; }
.rv-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); column-gap: 24px; align-items: start;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 2px;
  padding: 6px 2px 22px; scrollbar-width: none; outline-offset: 6px;
}
.rv-track::-webkit-scrollbar { display: none; }
.rv-card { margin: 0; scroll-snap-align: start; background: #f8f3ea; border-radius: 4px; padding: 26px 26px 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 0 #d9ccb6, 0 18px 30px -18px rgba(34,27,20,.55); }
.rv-card .card-stars { display: block; margin-bottom: 12px; }
.rv-text { margin: 0; max-height: calc(1.62em * 8); overflow: hidden; position: relative; font-size: 1rem; line-height: 1.62; color: var(--ink-2); }
.rv-text p + p { margin-top: .6em; }
.rv-card:not(.open) .rv-text { -webkit-mask-image: linear-gradient(#000 calc(100% - 2.4em), transparent); mask-image: linear-gradient(#000 calc(100% - 2.4em), transparent); }
.rv-card.open .rv-text, .rv-card .rv-text:not(:has(+ .rv-more:not([hidden]))) { -webkit-mask-image: none; mask-image: none; }
.rv-card.open .rv-text { max-height: min(56vh, calc(1.62em * 16)); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.rv-more { margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: .9rem; font-weight: 600; color: var(--clay-dk); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rv-card figcaption { margin-top: 16px; font-size: .86rem; font-weight: 600; color: #5c5144; }
.rv-nav { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.rv-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #f8f3ea; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 0 #d9ccb6, 0 8px 16px -10px rgba(34,27,20,.6); transition: transform .15s var(--ease), opacity .2s; }
.rv-btn:hover:not(:disabled) { transform: translateY(-2px); }
.rv-btn:disabled { opacity: .4; cursor: default; }
.rv-count { min-width: 5.5em; text-align: center; font-size: .92rem; font-weight: 600; color: var(--ink); }
.rv-google { margin-left: auto; font-size: .92rem; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 1000px) { .rv-track { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 760px) {
  .rv-track { grid-auto-columns: 86%; column-gap: 16px; }
  .rv-card { padding: 22px 20px 18px; }
  #words .words-head { align-items: flex-start; }
}

/* two reviews stacked per page; pages line up with the book's pages so nothing crosses the fold */
.rv-track { grid-auto-columns: calc((100% - 112px) / 2); column-gap: 112px; scroll-snap-type: x mandatory; align-items: stretch; padding-left: 0; padding-right: 0; }
.rv-page { display: grid; grid-template-rows: 1fr 1fr; gap: 22px; scroll-snap-align: start; min-width: 0; }
.rv-page .rv-card { scroll-snap-align: none; }
.rv-text { max-height: calc(1.62em * 6); }
@media (max-width: 1000px) { .rv-track { grid-auto-columns: calc((100% - 64px) / 2); column-gap: 64px; } }
@media (max-width: 760px) { .rv-track { grid-auto-columns: 100%; column-gap: 24px; } }
@media (max-width: 760px) { .rv-nav { flex-wrap: wrap; } .rv-google { margin-left: 0; flex-basis: 100%; } }

/* shorter review boxes (Cara 2026-10-11): 4 lines, tighter padding */
.rv-card { padding: 18px 22px 16px; }
.rv-card .card-stars { margin-bottom: 8px; }
.rv-text { max-height: calc(1.55em * 4); line-height: 1.55; font-size: .97rem; }
.rv-card:not(.open) .rv-text { -webkit-mask-image: linear-gradient(#000 calc(100% - 1.6em), transparent); mask-image: linear-gradient(#000 calc(100% - 1.6em), transparent); }
.rv-more { margin-top: 4px; }
.rv-card figcaption { margin-top: 10px; }
.rv-page { gap: 18px; }

/* site screenshots use the same corner radius as the buttons (Cara 2026-10-11) */
.work-card img { border-radius: var(--btn-radius, 4px); }

/* phones: the first page fills the screen edge to edge, everything centered (Cara 2026-10-11) */
@media (max-width: 760px) {
  .book { padding-top: 0; }
  .hero-spread {
    margin: 0 -14px; border-radius: 0; box-shadow: none;
    min-height: 100vh; min-height: 100svh;
    padding: 96px 26px 44px;                       /* clears the fixed menu bar */
    align-content: center; justify-items: center; text-align: center;
  }
  .hero-spread::before { border-radius: 0; }
  .hero-spread .page-words { width: 100%; }
  .hero-spread .land-meta { justify-content: center; }
  .hero-spread .lead { margin-left: auto; margin-right: auto; }
  .hero-spread .actions { justify-content: center; }
  .hero-spread .page-art { margin-bottom: 22px; }
  .hero-spread .logo-print { width: min(40vw, 170px); }
  .hero-spread .logo-printed figcaption { display: none; }   /* the menu bar already says Studio3C */
}
@media (max-width: 760px) {
  .hero-spread { width: calc(100% + 28px); max-width: none; }
}
@media (max-width: 760px) and (max-height: 760px) {                 /* short phones (iPhone SE etc.): keep it to one screen */
  .hero-spread { padding-top: 84px; padding-bottom: 28px; }
  .hero-spread .page-art { margin-bottom: 14px; }
  .hero-spread .logo-print { width: min(30vw, 120px); }
  .hero-spread .land-meta { margin-bottom: 14px; }
  .hero-spread .lead { margin-top: 14px; font-size: .98rem; }
  .hero-spread .actions { margin-top: 20px; }
}

/* phones: centered details (Cara 2026-10-11) */
@media (max-width: 760px) {
  .hero-spread .land-meta { gap: 4px 14px; font-size: .8rem; }
  .hero-spread .land-meta span { white-space: nowrap; }
  .sheet-foot { text-align: center; }
  .wc-name, .wc-type { text-align: center; }
  .rv-nav { justify-content: center; }
  .rv-google { text-align: center; }
  .paper-foot { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .paper-foot .land-areas, .paper-foot .land-areas-links { justify-content: center; }
}
@media (max-width: 760px) { .paper-foot a { white-space: nowrap; } }
@media (max-width: 760px) {                     /* one client per row on phones (Cara 2026-10-11) */
  .pops.four.work-pops { grid-template-columns: 1fr; gap: 26px; }
  .work-card { padding: 10px 10px 14px; }
  .wc-name { font-size: 1rem; }
  .wc-type { font-size: .86rem; }
}

/* intro covers the whole phone screen: same color as the page/Safari bars (theme-color #ece3d4),
   and as tall as the largest viewport so nothing shows when the toolbars slide away (Cara 2026-10-11) */
#intro { background: var(--table); top: 0; left: 0; right: 0; bottom: auto; height: 100vh; height: 100lvh; }

/* not launched yet: no link, "Coming soon" over the screenshot on hover (always shown on touch) */
.wc-shot { position: relative; display: block; }
.wc-soon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--btn-radius, 4px); background: rgba(34,27,20,.62); color: var(--cream); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .3s var(--ease); }
.is-soon { cursor: default; }
.is-soon:hover .wc-soon { opacity: 1; }
@media (hover: none) { .wc-soon { opacity: 1; inset: 8px 8px auto auto; padding: 5px 10px; border-radius: 100px; font-size: .64rem; } }