/* The homepage ghostwriters (home.css "03-writers"), for the page templates: _inc/partials/writers-showcase.php with
   assets/js/writers.js. Copied 27 Oct 2026 so the Ghostwriters page matches the homepage; keep the two in step. */

/* ---- the hero box: the chosen writer's print, their voice typed out ---------- */
.lp .gw-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: stretch; min-height: 440px; border-radius: var(--r-stage); background: var(--page-3); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(24 21 31 / .04), 0 40px 80px -48px rgb(60 36 110 / .28); touch-action: pan-y; }
/* the column is as tall as the tallest writer's (set by script), so switching never moves the page */
.lp .gw-in { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; width: min(54%, 620px); min-height: var(--gw-in-h, 0px); padding: 52px 56px 56px; color: var(--ink); }
.lp .gw-text { align-self: flex-start; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; animation: gw-text .55s var(--ease-out); }
/* a hairline down the column's left edge: with the text it makes the quiet zone full height */
.lp .gw-quiet { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 1px; pointer-events: none; }
.lp .gw-probe { position: absolute; inset-inline-start: 0; top: 0; z-index: -1; visibility: hidden; pointer-events: none; min-height: 0; }
.lp .gw-probe .gw-text { animation: none; }
@keyframes gw-text { from { opacity: 0; transform: translateY(6px); } }
.lp .gw-name { display: flex; align-items: center; gap: 12px; font-size: 44px; line-height: 1.05; font-weight: 400; letter-spacing: -.03em; color: var(--ink); }
.lp .gw-name .badge { letter-spacing: .02em; transform: translateY(2px); }
.lp .gw-name .badge-violet { background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px var(--violet-line); }
.lp .gw-role { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: .9375rem; line-height: 1.4; color: var(--text-soft); }
.lp .gw-best { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--muted); }
.lp .gw-best .ic { width: 15px; height: 15px; }
.lp .gw-best > span { margin-inline-end: 1px; }
.lp .gw-desc { margin-top: 14px; max-width: 42ch; font-size: .9375rem; line-height: 1.55; color: var(--text-soft); text-wrap: pretty; }
.lp .gw-sample { position: relative; display: grid; margin-top: 18px; max-width: 470px; font-size: 23px; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.lp .gw-sample > * { grid-area: 1 / 1; }
.lp .gw-ghost { visibility: hidden; }
.lp .gw-caret { display: inline-block; width: 2px; height: 1.05em; margin-inline-start: 2px; vertical-align: -.16em; border-radius: 1px; background: var(--violet); animation: gw-blink 1s steps(1) infinite; }
@keyframes gw-blink { 50% { opacity: 0; } }
.lp .gw-btns { padding-top: 28px; }
.lp .gw-btns .btn-secondary { background: rgb(255 255 255 / .82); }
.lp .gw-btns .btn-secondary:hover { background: #fff; }

/* prev / next, bottom right; the ring round "next" is the autoplay timer */
.lp .gw-nav { position: absolute; z-index: 2; inset-inline-end: 20px; bottom: 20px; display: flex; gap: 8px; }
.lp .gw-next { position: relative; }
.lp .gw-ring { position: absolute; left: -4px; top: -4px; width: 48px; height: 48px; max-width: none; transform: rotate(-90deg); pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
.lp .gw-ring circle { fill: none; stroke: var(--violet); stroke-width: 1.75; stroke-linecap: round; stroke-dasharray: 138.3; stroke-dashoffset: 138.3; }
.lp .gw-hero.is-auto .gw-ring { opacity: 1; }
.lp .gw-hero.is-auto .gw-ring circle { animation: gw-ring 8s linear forwards; }
.lp .gw-hero.is-held .gw-ring circle { animation-play-state: paused; }
@keyframes gw-ring { to { stroke-dashoffset: 0; } }

/* ---- the cast: every writer as a printed card ---------------------------------- */
.lp .gw-cast {
  --pad: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  --fade: min(64px, var(--pad));
  display: grid; grid-auto-flow: column; grid-auto-columns: 104px; gap: 10px;
  margin-top: 12px; padding: 8px var(--pad) 14px; scroll-padding-inline: var(--pad);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.lp .gw-cast::-webkit-scrollbar { display: none; }
.lp .gw-cast.is-drag { scroll-snap-type: none; cursor: grabbing; }
.lp .gw-cast.is-drag .gw-card { pointer-events: none; }
.lp .gw-card { position: relative; display: block; padding: 0; border-radius: 14px; overflow: hidden; text-align: start; background: var(--card); scroll-snap-align: center; box-shadow: 0 1px 2px rgb(24 21 31 / .05); transition: transform .25s var(--ease-out), box-shadow .15s var(--ease); -webkit-tap-highlight-color: transparent; }
.lp .gw-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgb(24 21 31 / .05), 0 10px 20px -12px rgb(40 24 70 / .3); }
.lp .gw-card.on { box-shadow: 0 0 0 2px var(--ink); }
.lp .gw-card:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 14px; }
.lp .gw-card .byl-card { border-radius: 14px; }
.lp .gw-card-l { position: absolute; inset: auto 0 0 0; z-index: 3; display: flex; flex-direction: column; gap: 1px; padding: 22px 9px 8px; background: linear-gradient(to top, rgb(255 255 255 / .94), rgb(255 255 255 / .62) 62%, transparent); }
.lp .gw-card-l b { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; line-height: 16px; color: var(--ink); }
.lp .gw-card-l b .ic { width: 12px; height: 12px; }
.lp .gw-card-l small { font-size: 11px; line-height: 14px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "+ Your own writer": the last tile, two cards wide */
.lp .gw-own { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px 12px; background: rgb(255 255 255 / .55); border: 1.5px dashed rgb(127 86 217 / .38); box-shadow: none; color: var(--ink); }
.lp .gw-own:hover { background: #fff; border-color: rgb(127 86 217 / .6); box-shadow: none; }
.lp .gw-own-plus { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--card); color: var(--violet-ink); box-shadow: var(--shadow-chip); }
.lp .gw-own-plus .ic { width: 18px; height: 18px; }
.lp .gw-own .badge { position: absolute; top: 12px; inset-inline-end: 12px; }
.lp .gw-own-l { display: flex; flex-direction: column; gap: 2px; }
.lp .gw-own-l b { font-size: 13px; font-weight: 600; line-height: 16px; }
.lp .gw-own-l small { font-size: 11.5px; line-height: 15px; color: var(--muted); }

/* see all: the strip opens into a grid of the whole cast */
.lp .gw-cast.is-all { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-columns: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.lp .gw-cast.is-all .gw-card { animation: gw-pop .5s var(--ease-out) both; animation-delay: calc(var(--i) * 14ms); }
@keyframes gw-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---- one line from six of them (the app's compare grid) ------------------------ */
.lp .gw-more { margin-top: clamp(56px, 6vw, 88px); }
.lp .gw-more-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 20px; }
.lp .gw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp .gw-line { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 22px; border-radius: var(--r-card); background: var(--card); text-align: start; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(24 21 31 / .04); transition: box-shadow var(--d-fast) var(--ease), transform .25s var(--ease-out); }
.lp .gw-line:hover { box-shadow: 0 0 0 1px var(--line-2), 0 12px 24px -16px rgb(40 24 70 / .28); transform: translateY(-1px); }
.lp .gw-line[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--ink), 0 12px 24px -16px rgb(40 24 70 / .28); }
.lp .gw-line-who { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--muted); }
.lp .gw-line-who b { font-weight: 500; color: var(--ink); }
.lp .gw-line-who .byl { --bs: 22px; margin-inline-end: 2px; }
.lp .gw-line-who .gw-lock { width: 13px; height: 13px; color: var(--subtle); }
.lp .gw-line-who .gw-best { margin-inline-start: auto; gap: 5px; color: var(--subtle); }
.lp .gw-line-who .gw-best > span { display: none; }
.lp .gw-line-who .gw-best .ic { width: 14px; height: 14px; }
.lp .gw-line-q { font-size: 18px; line-height: 1.42; letter-spacing: -.005em; color: var(--ink); text-wrap: pretty; }

/* ---- the closing line ------------------------------------------------------------ */
.lp .gw-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.lp .gw-foot p { display: flex; align-items: center; gap: 12px; font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.lp .gw-marks { display: inline-flex; flex: none; }
.lp .gw-marks .byl { --bs: 24px; box-shadow: 0 0 0 2px var(--page-2); }
.lp .gw-marks .byl + .byl { margin-inline-start: -7px; }

/* ---- smaller screens -------------------------------------------------------------- */
@media (max-width: 1079px) {
  .lp .gw-in { width: min(60%, 560px); padding: 44px 40px 48px; }
  .lp .gw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  /* stacked, as the app's phone rule: the words on top, the print in the room below */
  .lp .gw-hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .lp .gw-in { width: 100%; padding: 32px 32px 300px; }
  .lp .gw-in { justify-content: flex-start; }
  .lp .gw-quiet { display: none; }
}
@media (max-width: 719px) {
  .lp .gw-hero { margin-inline: calc(var(--gutter) * -1 + 8px); border-radius: var(--r-panel); }
  .lp .gw-in { padding: 26px 20px 268px; }
  .lp .gw-name { font-size: 34px; gap: 10px; }
  .lp .gw-desc { margin-top: 10px; }
  .lp .gw-sample { margin-top: 14px; font-size: 19px; line-height: 1.42; }
  .lp .gw-btns { padding-top: 22px; width: 100%; }
  .lp .gw-btns .btn { flex: 1 1 100%; }
  .lp .gw-nav { inset-inline-end: 12px; bottom: 12px; }
  .lp .gw-cast { grid-auto-columns: 92px; gap: 8px; margin-top: 8px; --fade: 14px; }
  .lp .gw-card:hover { transform: none; box-shadow: 0 1px 2px rgb(24 21 31 / .05); }
  .lp .gw-card.on, .lp .gw-card.on:hover { box-shadow: 0 0 0 2px var(--ink); }
  .lp .gw-cast.is-all { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .lp .gw-cast.is-all .gw-own { grid-column: span 1; padding: 10px; }
  .lp .gw-cast.is-all .gw-own .badge { top: 10px; inset-inline-end: 10px; }
  /* the six lines scroll sideways on a phone */
  .lp .gw-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .lp .gw-grid::-webkit-scrollbar { display: none; }
  .lp .gw-line { scroll-snap-align: start; }
  .lp .gw-line:hover { transform: none; }
  .lp .gw-foot { flex-direction: column; align-items: flex-start; }
  .lp .gw-foot p { align-items: flex-start; }
}

/* a lone last line (19 writers in rows of three) takes the whole row */
@media (min-width: 1080px) { .lp .gw-grid > .gw-line:last-child:nth-child(3n+1) { grid-column: 1 / -1; } }
@media (min-width: 720px) and (max-width: 1079px) { .lp .gw-grid > .gw-line:last-child:nth-child(2n+1) { grid-column: 1 / -1; } }