/* LittleTale — implements web_plan/ART_DIRECTION.md.
 *
 * One continuous cream ground. No section is a coloured band, because the
 * illustrations already carry this site's changes of colour, and quiet ground
 * is what makes them legible. The four section joins are four different
 * decisions, not one reusable separator.
 *
 * The palette is deliberately not inverted for the OS colour preference: these
 * colours are the art-directed presentation of the books.
 */

/* Fraunces and Karla (SIL Open Font License), self-hosted: latin, plus
   latin-ext only when a name needs it. Preloaded in the page head. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/fonts/fraunces-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/fonts/fraunces-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/karla-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/karla-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


:root{
  /* One paper. There used to be three near-identical whites stacked on each
     other -- #faf6ee, #fff8e8 and #ffffff -- close enough that no one could
     tell them apart and different enough that every panel edge showed a seam.
     --cream, --surface and --paper are now deliberately the same colour, and
     --linen is the only other ground: it is what a surface sits ON, so it
     marks cover mounts, the upload area and disabled controls. Colour on this
     site comes from the illustrations. */
  --cream:#faf6ee; --surface:#faf6ee; --border:#d8cbb4;
  /* One corner. 2px in fifteen places and 6px in two is not a decision. */
  --radius:2px;
  /* The paper itself. Used wherever cream sits on a dark ground — the reader,
     and the book passage on how-it-works. It was referenced six times before
     it was ever declared, so every one of those colours silently fell back. */
  --paper:#faf6ee;
  --muted-ink:#716044;
  --primary:#6b4f00; --ink:#3d2c00; --muted:#7a6535;
  --gold:#feb700; --coral:#e85d75;
  --linen:#eee5d5; --error:#8c3146; --green:#2f6b4a;
  /* Hairlines, not text colours. An input border was --muted (#7a6535) at
     full strength, which is why the form read as a 1998 field. */
  --rule:rgba(61,44,0,.14); --rule-strong:rgba(61,44,0,.30);
  --lead-shadow:0 8px 20px -12px rgba(61,44,0,.25);
  --ease-out:cubic-bezier(.2,0,0,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:"Karla",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:26px;-webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;font-synthesis-style:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-weight:400;font-optical-sizing:auto;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
a{color:var(--primary)}
/* An author `display` beats the UA stylesheet's [hidden]{display:none}, so
   any element given a display here stays on screen when hidden is set. */
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
/* The step heading is focused so a screen reader announces the new step.
   It is not something anyone tabbed to, so it gets no ring. */
.flow h1[tabindex]:focus,.flow h1[tabindex]:focus-visible{outline:none}

/* ---- widths and grid ------------------------------------------------- */
.wrap{width:100%;margin:0 auto;padding:0 20px}
@media(max-width:359px){.wrap{padding:0 16px}}
@media(min-width:768px){.wrap{max-width:1056px;padding:0 32px}}
@media(min-width:1200px){.wrap{max-width:1168px;padding:0}}

/* ---- type roles ------------------------------------------------------ */
.t-opening{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:40px;line-height:42px;letter-spacing:-.025em}
.t-page{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:36px;line-height:40px;letter-spacing:-.025em}
.t-section{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:30px;line-height:34px}
/* One card title, one size. The first card of every shelf used to be set
   larger for no reason the composition supports, which put the two titles in
   a row on different baselines. */
.t-lead-book,.t-book{font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:20px;line-height:24px}
/* Italic, and a step below the section headings. At 40px it tied exactly
   with "Twenty-five stories, already written." — decoration weighing the
   same as the heading it sits under. */
.t-excerpt{font-family:"Fraunces",Georgia,serif;font-weight:400;font-style:italic;
  font-size:26px;line-height:36px;max-width:30ch}
.t-price{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:32px;
  line-height:36px}
.t-lead{font-size:17px;line-height:26px;max-width:52ch}
.t-support{font-size:15px;line-height:22px}
.t-cap{font-size:14px;line-height:21px;color:var(--muted)}
.marker{font-weight:600;font-size:12px;line-height:16px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--muted)}
@media(max-width:359px){
  .t-opening{font-size:36px;line-height:39px}
  .t-page{font-size:32px;line-height:36px}
}
@media(min-width:768px){
  .t-opening{font-size:56px;line-height:58px}
  .t-page{font-size:44px;line-height:48px}
  .t-section{font-size:36px;line-height:40px}
  .t-lead-book{font-size:20px;line-height:24px}
  .t-excerpt{font-size:28px;line-height:40px}
  .t-lead{font-size:18px;line-height:28px}
}
@media(min-width:1200px){
  .t-opening{font-size:72px;line-height:72px}
  .t-page{font-size:48px;line-height:52px}
  .t-section{font-size:40px;line-height:44px}
  .t-lead-book{font-size:20px;line-height:24px}
  .t-excerpt{font-size:32px;line-height:44px}
  .t-support{font-size:16px;line-height:24px}
}

/* ---- controls -------------------------------------------------------- */
/* Two buttons and one link, and nothing else may look clickable.
   There were five affordances competing here -- a fill, an outline, a shine
   sweep, an underline and a bare coloured word -- so nothing on any page said
   which action moved the purchase forward. Filled = go on; outlined = change
   or fetch something; underlined text = leave or cancel. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 20px;border-radius:var(--radius);
  border:1px solid var(--primary);
  background:var(--primary);color:var(--paper);
  font-family:inherit;font-weight:600;font-size:16px;line-height:22px;
  text-decoration:none;text-align:center;cursor:pointer;box-shadow:none;
  transition:background 160ms var(--ease-soft),border-color 160ms var(--ease-soft)}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn.sec{background:transparent;color:var(--primary);font-weight:600}
.btn.sec:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled=true]{background:var(--linen);border-color:var(--border);
  color:var(--muted);cursor:not-allowed}
@media(hover:hover){
  .brand:hover{opacity:.82}
}
.quiet{display:inline-flex;align-items:center;min-height:44px;
  font-size:16px;font-weight:600;color:var(--primary);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:4px;
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
.quiet:hover{color:var(--ink)}

label{display:block;font-weight:600;font-size:14px;line-height:21px;margin-bottom:8px}
input[type=text],input[type=email]{width:100%;min-height:52px;padding:0 12px;
  border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--cream);color:var(--ink);
  font-family:inherit;font-size:16px;line-height:20px}
input:focus{border-color:var(--primary)}
.err{color:var(--error);font-size:15px;line-height:22px;margin-top:8px;display:none}
input.bad{border-color:var(--error)}

/* ---- covers ---------------------------------------------------------- */
/* 896:1200 exactly. No crop, no rotation, no fake spine, no border. */
/* One mount for all twenty-five. The covers are exported with different
   amounts of blank margin, so fitting the FILES to a slot left some artwork
   floating inside a mat and others bleeding to the edge. A shared paper
   surface and a shared inset makes them read as one set. */
.cover{display:block;border-radius:var(--radius);aspect-ratio:56/75;object-fit:contain;
  background:var(--linen);width:100%;padding:8px;box-sizing:border-box;
  border:1px solid var(--border)}
.cover.lead{box-shadow:var(--lead-shadow)}

/* ---- header and footer ----------------------------------------------- */
.site-head{border-bottom:1px solid var(--border)}
.site-head .wrap{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;
  font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:20px;
  color:var(--ink);text-decoration:none}
.brand img{width:auto;height:40px;aspect-ratio:498/512;flex:none}
.site-head nav{display:flex;gap:20px}
.site-head nav a{font-size:16px;color:var(--muted);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.site-head nav a:hover{color:var(--ink)}
.site-head nav a[aria-current]{color:var(--ink)}
.site-head nav a{position:relative}
.site-head nav a::after{content:"";position:absolute;left:0;right:0;bottom:7px;
  height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform 180ms var(--ease-soft)}
.site-head nav a:hover::after,.site-head nav a:focus-visible::after{transform:scaleX(1)}
.site-head nav a[aria-current]::after{transform:scaleX(1);background:var(--primary)}

.site-foot{margin-top:96px;border-top:1px solid var(--border);padding:32px 0 64px}
@media(max-width:767px){.site-foot{margin-top:64px}}
.site-foot nav{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:16px}
.site-foot a{font-size:14px;line-height:21px;color:var(--muted)}
.site-foot p{font-size:14px;line-height:21px;color:var(--muted)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:12px;z-index:20;background:var(--surface);
  padding:12px 16px;border-radius:var(--radius)}
.proto{background:var(--linen);color:var(--muted);font-size:14px;line-height:21px;
  padding:10px 20px;text-align:center}
.proto b{color:var(--ink);font-weight:600}

/* ======================================================================
   HOME — four joins, four different decisions
   ====================================================================== */

/* 1 · Opening ---------------------------------------------------------- */
.opening{padding-top:32px}
.opening .t-lead{margin-top:16px}
.opening .btn{margin-top:24px}
.opening .facts{margin-top:12px;font-size:14px;line-height:21px;color:var(--muted)}
.open-art{margin:32px 0 0 auto;width:min(336px,100%)}
.open-art figcaption{margin-top:8px;font-size:14px;line-height:21px;color:var(--muted)}
.open-art a{color:var(--muted)}

@media(min-width:768px){
  .opening{padding-top:48px}
  .opening .inner{display:grid;grid-template-columns:repeat(8,1fr);gap:24px;
    align-items:center}
  .opening .inner{align-items:end}
  .opening .words{grid-column:1/6;padding-top:0;padding-bottom:0}
  .open-art{grid-column:6/9;margin:0;width:100%}
}
@media(min-width:1200px){
  .opening .inner{grid-template-columns:repeat(12,1fr)}
  .opening .words{grid-column:1/8;max-width:640px}
  .opening .t-lead{max-width:560px}
  .open-art{grid-column:8/13;justify-self:end;width:min(448px,100%);
    position:relative;z-index:1}
}

/* The first join: a 1px rule below the opening, across the content width.
   It used to be pulled 96px upwards so the cover crossed it — that was the
   original composition, but on a wide screen it reads as the picture
   colliding with the line rather than crossing it. */
.join-rule{height:1px;background:var(--border);margin-top:32px;position:relative;z-index:0}
@media(min-width:768px){.join-rule{margin-top:48px}}

/* 2 · Made from one photo --------------------------------------------- */
.made{padding-top:32px}
@media(min-width:768px){.made{padding-top:48px}}
.made .inner{display:grid;gap:32px}
@media(min-width:768px){
  .made .inner{grid-template-columns:repeat(8,1fr);gap:24px}
  .made .words{grid-column:1/5}
  .made .demo{grid-column:5/9;padding-top:112px}
}
@media(min-width:1200px){
  .made .inner{grid-template-columns:repeat(12,1fr)}
  .made .words{grid-column:1/6}
  .made .demo{grid-column:7/13;padding-top:160px}
}
.made .t-section{margin-top:12px}
.steps{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:24px}
.steps li{display:grid;grid-template-columns:20px 1fr;gap:16px;align-items:baseline}
.steps .n{font-weight:600;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.steps b{display:block;font-weight:600;font-size:17px;line-height:24px}
.steps .d{display:block;font-size:15px;line-height:22px;color:var(--muted);margin-top:4px}
.made .quiet{margin-top:24px}

/* the comparison — one small moment of craft.
   Phone: portrait, then a row of the small photo beside the button.
   Desktop: the two pictures share a baseline, the button sits under the large
   one, and the whole 560px group is right-aligned. A grid does both without
   moving anything in the markup. */
.compare{display:flex;flex-direction:column}
.compare .pair{display:grid;gap:16px 12px;
  grid-template-columns:64px 1fr;
  grid-template-areas:"big big" "small btn";
  align-items:center}
.compare .bigwrap{grid-area:big;width:min(320px,100%);margin:0 auto}
.compare .small{grid-area:small;margin:0;width:64px}
.compare .foot{grid-area:btn}
.compare .small img{width:64px;height:64px;object-fit:contain;border-radius:var(--radius);
  background:var(--surface)}
.compare .small figcaption{margin-top:8px;font-size:14px;line-height:21px;
  color:var(--muted);white-space:nowrap}
.compare .big{position:relative;aspect-ratio:1/1;width:100%}
.compare .big img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  border-radius:var(--radius);transition:opacity 220ms cubic-bezier(.4,0,.2,1)}
.compare .big img.off{opacity:0}
.compare .bigcap{margin-top:8px;font-size:14px;line-height:21px;color:var(--muted)}
.compare .foot .btn{width:100%}
.compare .samplecap{margin-top:8px;font-size:14px;line-height:21px;color:var(--muted)}

@media(min-width:768px){
  .compare{align-items:flex-end}
  .compare .pair{grid-template-columns:80px minmax(0,432px);
    grid-template-areas:"small big" ".     btn";
    gap:12px;align-items:end;justify-content:end}
  .compare .small{width:80px}
  .compare .small img{width:80px;height:80px}
  .compare .bigwrap{width:100%;margin:0}
  .compare .foot{margin-top:0}
  .compare .foot .btn{width:auto}
  /* aligned with the large image, not the group's left edge */
  .compare .samplecap{align-self:flex-end;width:100%;max-width:432px}
}
@media(min-width:1200px){
  .compare .pair{grid-template-columns:112px minmax(0,432px);gap:16px;max-width:560px}
  .compare .small{width:112px}
  .compare .small img{width:112px;height:112px}
}

/* 3 · The story excerpt ------------------------------------------------ */
/* No rule, no ground change, no heading: the jump in type scale announces
   the change from instructions to reading. */
.excerpt{padding-top:64px}
@media(min-width:768px){.excerpt{padding-top:96px}}
/* This is the page's one deliberate act of scale. Everywhere else on the site
   a picture is large and the words are polite; here that is reversed -- a
   small cover sits in the margin like a plate in a book review and 64px of
   Fraunces takes the page. It is the only place the product's actual writing
   is allowed to speak at full volume, and it is what stops the home page
   reading as a competent template. Upright, not italic: at this size italic
   is a mannerism, and the passage is prose, not an aside. */
.excerpt .inner{display:grid;gap:24px}
.excerpt figure{margin:0;width:112px}
.excerpt .marker{display:block;margin-bottom:24px}
.excerpt .t-excerpt{margin:0;max-width:none;font-style:normal;
  font-size:36px;line-height:40px;letter-spacing:-.025em;text-wrap:pretty}
.excerpt .quiet{margin-top:24px}
@media(min-width:768px){
  .excerpt .inner{grid-template-columns:144px minmax(0,1fr);gap:40px;
    align-items:start}
  .excerpt figure{grid-column:auto;width:144px}
  .excerpt .words{grid-column:auto}
  .excerpt .t-excerpt{font-size:48px;line-height:54px}
}
@media(min-width:1200px){
  .excerpt .inner{grid-template-columns:176px minmax(0,1fr);gap:64px}
  .excerpt figure{width:176px}
  .excerpt .t-excerpt{font-size:64px;line-height:68px}
}

/* 4 · Four books on the table ----------------------------------------- */
.selected{padding-top:64px}
@media(min-width:1200px){.selected{padding-top:96px}}
.selected .rule{height:1px;background:var(--border)}
.selected .marker{display:block;margin-top:32px}
@media(min-width:1200px){.selected .marker{margin-top:48px}}
.selected .t-section{margin-top:12px}
.selected .t-lead{margin-top:16px}
.four{display:grid;gap:24px 16px;margin-top:40px;grid-template-columns:1fr 1fr}
.four .is-lead{grid-column:1/-1}
@media(min-width:768px){
  .four{grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;align-items:end}
  .four .is-lead{grid-column:auto}
}
.selected .btn{margin-top:32px}

.book{display:block;text-decoration:none;color:inherit}
.book .cover{transition:transform 220ms var(--ease-soft),
  box-shadow 220ms var(--ease-soft)}
.book .t-book,.book .t-lead-book{display:block;margin-top:12px}
.book .hook{margin-top:6px}
.book .hook{display:block;font-size:14px;line-height:20px;color:var(--muted)}
@media(hover:hover){
  .book:hover .cover{transform:none;box-shadow:none}
  .book:hover .t-book,.book:hover .t-lead-book{text-decoration:underline;
    text-underline-offset:4px}
}

/* ======================================================================
   CATALOGUE — five edited shelves
   ====================================================================== */
.shelves{padding-top:32px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.filters button{min-height:44px;padding:8px 16px;border:0;background:none;
  font-family:inherit;font-size:16px;color:var(--muted);cursor:pointer}
.filters button[aria-selected=true]{color:var(--ink);font-weight:600;
  text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:2px;text-decoration-color:var(--primary)}
@media(max-width:599px){
  .filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;
    padding-bottom:12px;border-bottom:1px solid var(--rule)}
  .filters button{padding:8px 4px;font-size:14px}
  .book .t-book,.book .t-lead-book{font-size:18px;line-height:23px}
}
.shelf{margin-top:48px}
.shelf .marker{display:block}
/* No size override. This pinned every shelf heading at 30px with no media
   query, so the same role rendered at 30, 36 and 40 depending on the page. */
.shelf .t-section{margin-top:12px}
.shelf .baseline{height:1px;background:var(--border);margin-top:16px}
.rack{display:grid;gap:24px 16px;margin-top:24px;grid-template-columns:1fr 1fr}
/* Two, then five. Every shelf holds exactly five stories, so a four-column
   band left an orphan card beside three empty cells, five times down the
   page, at every width from 768 to 1199. */
@media(min-width:1024px){.rack{grid-template-columns:repeat(5,1fr);gap:32px 24px}}
.rack .book{transition:opacity 140ms var(--ease-out)}
/* Finish an odd shelf with a compact full-width book, not an empty cell. */
@media(max-width:1023px){
  .shelf .rack > .book:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])){grid-column:1/-1;
    display:grid;grid-template-columns:minmax(88px,112px) minmax(0,1fr);
    grid-template-rows:min-content 1fr;
    column-gap:16px;align-content:start;align-items:start;
    padding-top:20px;border-top:1px solid var(--rule)}
  .shelf .rack > .book:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) .cover{grid-row:1/3}
  .shelf .rack > .book:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) .t-book,
  .shelf .rack > .book:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) .t-lead-book{margin-top:0}
  .shelf .rack > .book:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) .hook{grid-column:2}
}

/* ======================================================================
   STORY DETAIL — the first page that shows a price
   ====================================================================== */
.story{padding-top:24px}
.story .crumb{margin-bottom:16px;font-size:14px;line-height:21px}
.story .inner{display:grid;gap:32px}
.story figure{margin:0}
.story .t-page{margin-bottom:16px}
@media(min-width:768px){
  .story .inner{grid-template-columns:repeat(8,1fr);gap:24px;align-items:start}
  .story .inner>figure{grid-column:1/4}
  .story .inner>.words{grid-column:4/9}
}
@media(min-width:1200px){
  .story .inner{grid-template-columns:repeat(12,1fr)}
  .story .inner>figure{grid-column:1/6}
  .story .inner>.words{grid-column:7/13}
}
.story .premise{margin-top:16px;max-width:52ch;font-size:18px;line-height:28px}
/* The synopsis is the one substantial thing on this page that differs between
   the twenty-five, so it reads as body copy and not as a footnote. The
   reading note sits under it as an aside, which is what it is. */
.story .synopsis{margin-top:20px;max-width:56ch;font-size:17px;line-height:27px;
  color:var(--ink)}
.story .suits{margin-top:12px;max-width:52ch;font-size:15px;line-height:23px;
  font-style:italic;color:var(--muted)}
.story .deliver{margin-top:32px;font-size:16px;line-height:24px;color:var(--muted)}
/* The questions, below the fold of the buying column. A question heading with
   its answer in the very next sentence is the shape an assistant quotes; the
   same words as a wall of prose get summarised instead. */
.story .asked{margin-top:56px;max-width:62ch}
.story .t-ask{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:26px;line-height:32px;letter-spacing:-.01em;margin:32px 0 0}
.story .asked > .t-ask:first-child{margin-top:0}
.story .answer{margin-top:10px;font-size:17px;line-height:27px;max-width:58ch}
/* One plain sentence of the form "X is ...", which is what gets lifted
   verbatim into an answer. Set quietly: it is for machines and for anyone
   skimming, not a pull quote. */
.story .define{margin-top:40px;padding-top:18px;border-top:1px solid var(--rule);
  max-width:62ch;font-size:15px;line-height:24px;color:var(--muted)}
@media(min-width:900px){
  .story .asked,.story .define{margin-left:calc(448px + 56px)}
}
.story .t-price{margin-top:16px}
.story .tax{margin-top:8px;font-size:14px;line-height:21px;color:var(--muted)}
.story .btn{margin-top:24px}
.story .promise{margin-top:12px;font-size:15px;line-height:22px;color:var(--muted);
  max-width:42ch}

/* ======================================================================
   SHARED PAGE FURNITURE
   ====================================================================== */
.page{padding-top:32px}
.page .t-lead{margin-top:16px}
/* Ordinary page copy. Karla, a readable measure, real space between a
   heading and the paragraph it belongs to — several headings used to run
   straight into the text above them. */
.prose{max-width:640px;font-size:18px;line-height:29px}
.prose p + p{margin-top:16px}
.prose h2,.prose h3{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:28px;line-height:34px;color:var(--ink);margin:40px 0 12px}
.prose > :first-child{margin-top:0}
@media(max-width:767px){.prose{font-size:17px;line-height:27px}}
.qa{margin-top:40px}
.qa details{padding:0}
.qa summary{min-height:64px;padding:16px;gap:24px}
.qa .a{padding:0 16px 24px}
.qa .a p{margin-top:0}
details{border-top:1px solid var(--border);padding:16px 0}
details:last-of-type{border-bottom:1px solid var(--border)}
summary{cursor:pointer;font-weight:600;font-size:17px;line-height:26px;
  list-style:none;display:flex;justify-content:space-between;gap:16px;
  min-height:44px;align-items:center}
summary::-webkit-details-marker{display:none}
/* A drawn cross, not a typed "+". The glyph was a text character sitting hard
   against the container edge, at whatever weight and baseline Karla felt like
   giving it; two 2px bars are the same mark at the same size on every row,
   and the row itself is the target. */
.faq-mark{position:relative;width:16px;height:16px;flex:0 0 16px;
  color:var(--primary)}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;
  background:currentColor}
.faq-mark::before{width:12px;height:2px;left:2px;top:7px}
.faq-mark::after{width:2px;height:12px;left:7px;top:2px}
details[open] .faq-mark::after{display:none}
details p{margin-top:12px;color:var(--muted);font-size:16px;line-height:24px;max-width:60ch}

/* ======================================================================
   PURCHASE — its own shell and progress line
   ====================================================================== */
/* Left-aligned like every other page, not centred: a checkout that jumps to
   the middle of the window reads as a different website at the exact moment
   somebody is deciding whether to trust this one. The 560px measure stays --
   that is about the form, not about the page. */
.flow{padding-top:32px;width:100%;max-width:560px;margin:0}
@media(min-width:768px){.flow{padding-top:48px}}
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  margin:0 0 32px;padding:0}
.stages li{list-style:none;font-size:14px;line-height:21px;color:var(--muted);
  padding-bottom:6px;border-bottom:2px solid transparent}
.stages li[aria-current]{color:var(--ink);border-bottom-color:var(--gold)}
.stages li.done::before{content:"\2713\00a0";color:var(--green)}
.stage-phone{font-size:14px;line-height:21px;color:var(--muted);margin-bottom:24px}
@media(min-width:768px){.stage-phone{display:none}}
@media(max-width:767px){.stages{display:none}}

.ctx{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px}
.ctx img{width:72px;flex:none;border-radius:var(--radius)}
.ctx-meta{min-width:0}
.ctx-title,.ctx-style{display:block}
.ctx .style{margin-top:8px;font-size:15px;line-height:22px;color:var(--muted)}
.share-actions{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:399px){.share-actions > *{width:100%}}

.receipt{border-top:1px solid var(--border);padding-top:20px;margin-top:32px}
.receipt .what{font-size:17px;line-height:26px}
.receipt .detail{font-size:15px;line-height:22px;color:var(--muted);margin-top:4px}
.receipt .total{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:16px;gap:16px}
.receipt .amount{font-family:"Fraunces",Georgia,serif;font-size:24px;line-height:28px}
.receipt .tax{margin-top:8px;font-size:14px;line-height:21px;color:var(--muted)}

.field{margin-top:24px}
.hint{font-size:15px;line-height:22px;color:var(--muted);margin-top:8px}
.protect{margin-top:16px;font-size:16px;line-height:24px;max-width:42ch}
.dropzone{border:1px solid var(--muted);border-radius:var(--radius);background:var(--surface);
  min-height:148px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:16px;text-align:center;cursor:pointer}
.dropzone .sym{font-size:24px;line-height:1}
.hidden-file{position:absolute;width:1px;height:1px;opacity:0;
  clip:rect(0 0 0 0);white-space:nowrap;overflow:hidden}
.chosen{display:none;gap:16px;align-items:flex-start}
.chosen img{width:112px;height:148px;object-fit:contain;background:var(--surface);
  border-radius:var(--radius);flex:none}
.sample-name{font-family:"Fraunces",Georgia,serif;font-size:18px;line-height:27px;margin-top:8px}
.sample-line{font-size:15px;line-height:22px;color:var(--muted);margin-top:4px}

.portrait{margin-top:24px;width:100%;max-width:432px}
/* The character sheet arrives from the server, so the space it will occupy is
   reserved before it loads. Without this the page has no portrait-shaped hole
   and everything below jumps up, which reads as a missing picture. */
.portrait img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--surface);
  border-radius:var(--radius);animation:arrive 360ms var(--ease-soft) both}
@keyframes arrive{from{opacity:0}to{opacity:1}}
.decide{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.source-small{display:flex;gap:12px;align-items:flex-end;margin-top:16px}
.source-small img{width:112px;height:112px;object-fit:cover;object-position:center top;
  border-radius:var(--radius);background:var(--surface)}
.refund-link{color:var(--error)}

.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:24px}
.slots i{display:block;aspect-ratio:56/75;background:var(--linen);border-radius:var(--radius)}
.slots i.on{background:var(--gold);animation:slot 240ms ease-out both}
@keyframes slot{from{opacity:.4}to{opacity:1}}
.made-count{margin-top:16px;font-size:15px;line-height:22px;color:var(--muted)}

.linkfield{margin-top:24px;border:1px solid var(--border);background:var(--surface);
  border-radius:var(--radius);padding:16px}
.linkfield .lbl{font-weight:600;font-size:14px;line-height:21px}
.linkfield code{display:block;margin-top:8px;font-family:ui-monospace,Menlo,monospace;
  font-size:14px;line-height:21px;word-break:break-all}
.linkfield .btn{margin-top:12px}
.exports{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;align-items:start}
.exports figure{margin:0}
.exports img{width:100%;border-radius:var(--radius);background:var(--linen)}
.exports .s9{aspect-ratio:9/16;object-fit:cover}
.exports .s45{aspect-ratio:4/5;object-fit:cover}
.exports figcaption{margin-top:8px;font-size:14px;line-height:21px;color:var(--muted)}
.ok{color:var(--green)}

/* ======================================================================
   READER
   ====================================================================== */
/* The plain answers, laid out as the questions they answer. Ordinary visible
   HTML on purpose: an assistant quotes what a reader can see, and a fact
   hidden in metadata is a fact nobody can check. */
.facts-block{padding:0 0 8px}
/* The price, where someone looking for the price will look. It used to sit
   under a paragraph telling them to find it on another page. */
.amount-block{margin-top:32px}
.amount-big{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:48px;line-height:52px;color:var(--ink);margin:0}
.amount-sub{margin:8px 0 0;font-size:16px;line-height:24px;color:var(--muted)}
.receipt{margin-top:24px}

.facts-list{margin:32px 0 0;display:grid;gap:24px}
@media(min-width:900px){.facts-list{grid-template-columns:1fr 1fr;gap:28px 48px}}
.facts-list h3{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:19px;
  line-height:26px;color:var(--ink);margin:0}
.facts-list p{margin:6px 0 0;font-size:16px;line-height:26px;color:var(--muted);
  max-width:52ch}
/* The answer directly under its question, at reading size. */
.answer{margin:14px 0 0;font-size:18px;line-height:29px;color:var(--ink);
  max-width:58ch}

/* The sample book. A cover proves nothing about the writing or whether the
   character survives twelve pages, so this shows the photograph, the
   character, and real interior pages at a size you can actually read. */
.face-pair{display:grid;gap:24px;margin-top:28px;grid-template-columns:1fr 1fr;
  max-width:620px}
.face-pair figure{margin:0}
/* contain, not cover: the character sheet is a full-body front-and-back view,
   and squaring it by cropping cuts the face off — which is the one thing this
   picture exists to show. The photograph is already square, so it is unharmed. */
.face-pair img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  border-radius:var(--radius);background:var(--paper);box-shadow:none}
.face-pair figcaption{margin-top:10px;font-size:14px;color:var(--muted)}

.spread-list{display:grid;gap:44px;margin-top:28px}
@media(min-width:900px){.spread-list{grid-template-columns:1fr 1fr;gap:48px 40px}}
.spread{margin:0;background:var(--paper);border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--border);box-shadow:none}
.spread img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  background:var(--linen)}
.spread figcaption{padding:20px 22px 24px}
.spread .folio-n{display:block;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(60,40,22,.45);margin-bottom:8px}
.spread figcaption p{margin:0;font-family:"Fraunces",Georgia,serif;
  font-size:17px;line-height:1.55;color:var(--ink)}
.sample-face,.sample-pages{margin-top:64px}
.longer{margin-top:64px}
.longer .prose h3{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:22px;line-height:29px;color:var(--ink);margin:32px 0 0}
.longer .prose h3:first-child{margin-top:16px}
.longer .prose p{margin:10px 0 0;max-width:62ch}
/* Ordinary text links read as links, at one weight everywhere. */
.prose a,.longer a{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}
@media(max-width:767px){
  .site-foot nav a{display:inline-flex;align-items:center;min-height:44px}
}
/* Astra: a visitor deciding should be able to inspect the result without
   leaving the decision. */
.byline{margin-top:12px;font-size:15px;line-height:22px;color:var(--muted)}
.byline a{color:var(--primary);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}

.see-inside{margin-top:14px;font-size:15px}
.see-inside a{color:var(--primary);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
.also{margin-top:64px}
/* Capped, so three suggestions cannot carry more visual weight than the book
   the page is actually selling. */
.also .rack{display:grid;grid-template-columns:repeat(3,minmax(0,240px));gap:24px;
  margin-top:24px;justify-content:start}
@media(max-width:719px){.also .rack{grid-template-columns:repeat(2,1fr);gap:16px}}

.see-sample{margin-top:16px;font-size:15px}
.see-sample a{color:var(--primary)}

/* ── the reader ──────────────────────────────────────────────────────────
   A book, not a column of pictures. The page sits on a dark reading surface
   so the paper is the brightest thing on the screen; the leaves carry their
   own gutter shadow, and turning one swings it across the spine.
   Deliberately single-theme: this is a lit room, in either OS setting. */
.reading{background:#171310;color:var(--paper)}
.reading .site-head{background:transparent;border-bottom-color:rgba(250,246,238,.10)}
.reading .site-head .brand{color:#f3ece0}
.reading .site-head nav a{color:rgba(243,236,224,.72)}
.reading .site-foot{background:transparent;border-top-color:rgba(250,246,238,.10)}

.reader{position:relative;min-height:calc(100vh - 76px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;padding:24px 16px 32px;
  background:radial-gradient(120% 90% at 50% 42%,#241d18 0%,#171310 62%,#100d0b 100%)}
.reader .who{font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(243,236,224,.55);margin:0;text-align:center}

/* The spread is two 4:5 leaves side by side. Sized from the viewport height
   first so the whole book is always visible without scrolling. */
/* .bookspread, NOT .book — that class already belongs to a story card in
   the catalogue, and giving the reader's two-leaf spread the same name
   applied 1094px and an 8:5 aspect ratio to every card on the site. */
.bookspread{position:relative;display:grid;grid-template-columns:1fr 1fr;
  width:min(94vw,calc(76vh * 8 / 5),1280px);aspect-ratio:8/5;
  /* Weak perspective on purpose. A short focal length magnifies the near edge
     of the turning sheet until it is visibly larger than the book it came out
     of; this keeps the sheet the size of the leaf it is. */
  perspective:4200px;perspective-origin:50% 50%;
  filter:drop-shadow(0 28px 46px rgba(0,0,0,.55))}
.leaf{position:relative;min-width:0}
.paper{position:absolute;inset:0;background:#faf6ee;overflow:hidden;
  display:flex;flex-direction:column}
.leaf-l .paper{border-radius:var(--radius) 0 0 3px}
.leaf-r .paper{border-radius:0 3px 3px 0}

/* Gutter shading. Paper curves into the spine, so it darkens towards it —
   this one detail is most of what makes a flat rectangle read as a book.

   It belongs to the sheet, not to the slot the sheet is sitting in: a page
   being turned has the same shading as one lying flat. That is why there is
   no lighting trick here any more. The page used to be drawn without it
   while turning and gain it the instant it landed, which is exactly the jump
   that needed papering over. */
.paper.gut-r::after,.paper.gut-l::after{content:"";position:absolute;
  top:0;bottom:0;width:13%;pointer-events:none}
.paper.gut-r::after{right:0;background:linear-gradient(to right,
  rgba(60,40,22,0) 0%,rgba(60,40,22,.16) 72%,rgba(60,40,22,.30) 100%)}
.paper.gut-l::after{left:0;background:linear-gradient(to left,
  rgba(60,40,22,0) 0%,rgba(60,40,22,.16) 72%,rgba(60,40,22,.30) 100%)}

.leaf-l img{width:100%;height:100%;object-fit:cover;display:block;
  background:var(--linen)}


.leaf-r .paper{padding:min(7%,52px) min(9%,58px)}
/* .leaf-prose, NOT .prose — that class is ordinary page copy everywhere else
   on the site, and this rule comes later, so About, Pricing and the legal
   pages were all being set in the display serif at a 34ch measure. */
.leaf-prose{font-family:"Fraunces",Georgia,serif;font-weight:400;color:var(--ink);
  margin:auto 0;max-width:34ch;
  font-size:clamp(15px,1.55vw,24px);line-height:1.62;text-wrap:pretty}
.folio{position:absolute;bottom:16px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(60,40,22,.42);font-variant-numeric:tabular-nums}
.leaf-l .folio{left:20px}
.leaf-r .folio{right:20px}

/* The turning sheet. Its front is the page you were reading; its back is the
   illustration that becomes the next left-hand page. */
.turner{position:absolute;top:0;right:0;width:50%;height:100%;
  transform-style:preserve-3d;transform-origin:left center;
  transition:transform 820ms cubic-bezier(.44,.02,.24,1),
             opacity 820ms cubic-bezier(.36,.06,.3,1);
  pointer-events:none;z-index:3;visibility:hidden}
.turner.back-turn{right:auto;left:0;transform-origin:right center}
.turner.live{visibility:visible}
.bookspread.dragging{cursor:grabbing}
/* touch-action:none, not pan-y. With pan-y the browser claims the gesture as
   a possible scroll and fires pointercancel before the first move arrives, so
   a finger drag never reaches the page at all. The book fits the screen, and
   anywhere outside it still scrolls. */
.bookspread{cursor:grab;touch-action:none}
/* Nothing in the book is selectable or draggable by the browser. A drag that
   opens the cover sweeps across the title page with the button held; left
   selectable, that selected the title, and the next drag started the
   browser's own text drag instead of turning the page (pointercancel). */
.bookspread{-webkit-user-select:none;user-select:none}
.bookspread img{-webkit-user-drag:none;user-drag:none}
.face{position:absolute;inset:0;backface-visibility:hidden;
  -webkit-backface-visibility:hidden}
.face.back{transform:rotateY(180deg)}
.face .paper{padding:min(7%,52px) min(9%,58px)}
.face .paper img{width:100%;height:100%;object-fit:cover;display:block}
.face .paper.bleed{padding:0}

/* The cover, the endpapers and the title page. The book opens closed, on its
   typeset cover, centred where the spread will be; opening swings the board
   across the spine to lie on the left as the endpaper, and the book slides
   over to make room for it. Closing is the same motion backwards. */
.bookspread{transition:transform 900ms cubic-bezier(.44,.02,.24,1)}
.bookspread.closed{transform:translateX(-25%);cursor:pointer}
.bookspread.closed .leaf-l{visibility:hidden}
.coverleaf{position:absolute;top:0;right:0;width:50%;height:100%;z-index:2;
  transform-style:preserve-3d;transform-origin:left center;pointer-events:none;
  transition:transform 900ms cubic-bezier(.44,.02,.24,1),opacity 900ms cubic-bezier(.36,.06,.3,1)}
.coverleaf[hidden]{display:none}
.coverleaf.open{transform:rotateY(-180deg)}
.coverleaf.gone{visibility:hidden}
.coverleaf .face.front{background:#eee5d5;border-radius:0 3px 3px 0;overflow:hidden}
/* object-position left: the cover's gold rule and its title are on the left,
   and a leaf is wider for its height than the board, so the crop is taken
   from the right, where there is only cloth. */
.coverleaf .face.front img{width:100%;height:100%;object-fit:cover;
  object-position:left center;display:block}
.coverleaf .face.front::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(40,26,8,.32),rgba(255,250,240,.10) 3%,
    rgba(40,26,8,.06) 6%,rgba(40,26,8,0) 11%)}
.endpaper{position:absolute;inset:0;background-color:#3b2a17;
  background-image:radial-gradient(circle at 24px 24px,rgba(254,183,0,.5) 2.4px,rgba(254,183,0,0) 3.6px),
    radial-gradient(circle at 0 0,rgba(254,183,0,.26) 1.4px,rgba(254,183,0,0) 2.8px);
  background-size:48px 48px}
.endpaper[hidden],.titlepage[hidden]{display:none}
.titlepage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:14px;padding:8%;background:#faf6ee;color:var(--ink)}
/* The owl is a small mark, not a page picture. Stated with weight because
   three older rules size every image in the book to fill its page (the left
   leaf, a turning sheet, and on a phone the 4:5 leaf), and each of them
   caught it: a full-page owl mid-turn, and a full-page owl on the phone. */
.bookspread .titlepage img{width:clamp(44px,5vw,72px)!important;height:auto!important;
  aspect-ratio:auto!important;object-fit:contain!important;background:none!important;
  margin-bottom:10px}
/* The phone's title page lives in the left leaf; on a spread the right leaf
   has its own, and the left one must never show (it did, mid-opening). */
@media(min-width:900px){.phone-title{display:none!important}}
.titlepage b{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:clamp(24px,2.6vw,42px);line-height:1.1;text-wrap:balance}
.titlepage .tp-rule{display:block;width:56px;height:2px;background:#feb700;margin:6px 0}
.titlepage i{font-family:"Fraunces",Georgia,serif;font-size:clamp(14px,1.3vw,19px);color:#6b4f00}
.titlepage small{position:absolute;bottom:7%;left:0;right:0;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(60,40,22,.5)}

/* Paging. The whole outer third of each side is the target, which is how you
   turn a page in life; the chevron only appears when you point at it. */
/* Never over the page. They used to be full-height strips laid across the
   book, which on a phone covered two thirds of it and swallowed every attempt
   to drag it. They live in the rail now; on a wide screen they lift out of it
   to sit either side of the book, where a hand would be. */
.edge{border:0;background:none;cursor:pointer;padding:0;display:flex;
  align-items:center;justify-content:center;width:48px;height:48px}
/* The chevrons sit in the rail unless there is measured room beside the book
   for them, in which case the script lifts them out and sets the offsets from
   the space that actually exists. This used to be a CSS formula repeating the
   book's own width expression; when the window got narrow the space went
   negative, the offsets clamped, and the buttons ended up on top of the
   story. Nothing here duplicates the book's geometry any more. */
.reader.side-controls .edge{position:absolute;z-index:4;width:56px;height:56px;
  top:50%;transform:translateY(-50%)}
/* Always visible. A control you have to go looking for is not a control. */
.edge span{display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;font-size:26px;line-height:1;
  color:rgba(250,246,238,.66);background:rgba(250,246,238,.07);
  border:1px solid rgba(250,246,238,.16);
  transition:background 180ms ease-out,color 180ms ease-out,
             border-color 180ms ease-out,transform 180ms ease-out}
.edge:hover:not(:disabled) span,.edge:focus-visible span{
  color:#f7f1e6;background:rgba(250,246,238,.14);
  border-color:rgba(250,246,238,.34)}
.edge:active:not(:disabled) span{transform:scale(.94)}
.edge:disabled{cursor:default}
.edge:disabled span{color:rgba(250,246,238,.16);background:transparent;
  border-color:rgba(250,246,238,.08)}

.rail{display:flex;align-items:center;gap:20px}
/* Chevron, count, chevron, then the file — a book's controls read in the
   order you use them. On a wide screen the chevrons lift out to the sides,
   where order no longer applies. */
.rail .back-edge{order:1}
.rail .n{order:2}
.rail .fwd-edge{order:3}
.rail .quiet,.rail .binding{order:4}
.rail .n{font-size:13px;letter-spacing:.14em;color:rgba(243,236,224,.55);
  font-variant-numeric:tabular-nums}
.rail .quiet{color:rgba(243,236,224,.62);font-size:13px}
.rail .quiet:hover{color:#f3ece0}

/* The same wait, wherever it happens. A button that has been pressed and is
   working looks like the button it replaced, with a thread running through. */
.prep{display:inline-flex;align-items:center;gap:12px;cursor:default;
  color:var(--muted);border-color:var(--border)}
.prep i{display:block;width:52px;height:2px;border-radius:var(--radius);flex:none;
  background:rgba(91,68,19,.16);position:relative;overflow:hidden}
.prep i::after{content:"";position:absolute;inset:0;width:40%;border-radius:var(--radius);
  background:linear-gradient(90deg,rgba(214,168,74,0),#d6a84a 45%,#b8862c 60%,
    rgba(214,168,74,0));
  animation:stitch 1150ms cubic-bezier(.5,.05,.4,.95) infinite}
@media(prefers-reduced-motion:reduce){.prep i::after{animation:none;width:100%}}

/* Binding. A 2K book is a real file to assemble, so the wait gets a thread
   drawn through it rather than a spinner borrowed from somewhere else. */
.binding{display:flex;align-items:center;gap:12px}
.binding em{font-style:normal;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(243,236,224,.62)}
.binding i{display:block;width:64px;height:2px;border-radius:var(--radius);
  background:rgba(250,246,238,.14);position:relative;overflow:hidden}
.binding i::after{content:"";position:absolute;inset:0;width:40%;
  border-radius:var(--radius);background:linear-gradient(90deg,
    rgba(214,168,74,0),#d6a84a 45%,#f0d9a3 60%,rgba(214,168,74,0));
  animation:stitch 1150ms cubic-bezier(.5,.05,.4,.95) infinite}
@keyframes stitch{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@media(prefers-reduced-motion:reduce){
  .binding i::after{animation:none;width:100%;opacity:.55}}

/* One leaf on a phone or a tablet held upright: the illustration above its
   own sentence, which is how a picture book falls open when it is too small
   to lie flat.

   The leaf is NOT forced to 4:5 here. It used to be, which meant the words
   took their share out of the picture and object-fit cropped a 4:5
   illustration into a landscape slot — on a phone the art came out 367x241,
   a letterbox cut from a portrait painting. The picture now keeps its own
   shape and the leaf is as tall as picture-plus-words needs; the width is
   chosen so that total still fits the screen. */
@media(max-width:899px){
  /* The 420px is the room the rest of the screen needs: header, title, the
     sentence under the picture, and the rail. The picture takes what is left,
     so the whole book and its controls sit on one screen without scrolling. */
  .bookspread{grid-template-columns:1fr;aspect-ratio:auto;height:auto;
    width:min(94vw,calc((100vh - 420px) * 4 / 5),640px)}
  .reader{padding:12px 12px 16px;gap:12px;min-height:calc(100vh - 68px)}
  .leaf-r{display:none}
  .leaf-l{position:static}
  .leaf-l .paper{position:relative;inset:auto;display:block;border-radius:var(--radius)}
  .leaf-l .paper::after{display:none}
  .leaf-l img,.face .paper img{width:100%;height:auto;aspect-ratio:4/5;
    object-fit:cover;display:block}
  .face .paper{display:block;padding:0}
  /* box-sizing so the reserved height below includes its own padding. */
  .phone-prose{font-family:"Fraunces",Georgia,serif;color:var(--ink);margin:0;
    box-sizing:border-box;
    padding:14px 18px 18px;font-size:clamp(14px,3.9vw,18px);line-height:1.52;
    background:#faf6ee;text-wrap:pretty}
  .turner{width:100%}
  .coverleaf{width:100%}
  .coverleaf.open{opacity:0}
  /* A phone's leaf is much taller for its width than the board, so cropping
     to fill it cut long titles off at the right ("The Last One Awa"). The
     whole cover is shown instead, on cloth of its own colour. */
  .coverleaf .face.front{background:#eee4d3}
  .coverleaf .face.front img{object-fit:contain;object-position:center top}
  .bookspread.closed{transform:none}
  .bookspread.closed .leaf-l{visibility:visible}
  .phone-title{z-index:1}
  .edge span{width:48px;height:48px;font-size:24px}
  .rail{gap:14px}
}
@media(min-width:900px){.phone-prose{display:none}}

@media(prefers-reduced-motion:reduce){
  .bookspread,.coverleaf{transition:none}
  .turner{transition:none;display:none}
  .bookspread{cursor:default}
}

.centred{max-width:42ch;margin:64px auto;text-align:center}
.centred .btn{margin-top:24px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0ms!important;transition-duration:0ms!important}
}
@media (forced-colors:active){
  .btn{border:1px solid}
}

/* ── how it works ────────────────────────────────────────────────────────
   Astra's redesign. Three passages, three grounds: linen while you compare a
   face with its drawing, the reader's dark brown while you are inside the
   book, cream again when it is time to choose. The stylesheet used to say
   every public section stays cream; that instruction is superseded here, on
   purpose — the change of ground is what stops the page reading as one flat
   scroll of blocks. */
.how-page .site-foot{margin-top:0}

.how-proof{background:var(--linen);padding:64px 0}
.how-proof .wrap{max-width:1168px}
.how-proof h1{text-align:center}
.how-lead{font-size:18px;line-height:28px;color:var(--muted);max-width:600px;
  margin:16px auto 0;text-align:center}

/* Equal windows, and the faces inside them normalised to the same scale and
   the same eye line — equal boxes alone do not make two faces comparable. */
.how-pair{display:grid;grid-template-columns:minmax(0,1fr) clamp(24px,5vw,80px) minmax(0,1fr);
  justify-content:center;align-items:start;margin:40px auto 0;max-width:880px}
.how-face{margin:0}
.how-face figcaption{font-weight:600;font-size:14px;line-height:20px;
  color:var(--ink);margin-bottom:8px}
.how-face .win{width:100%;aspect-ratio:1;height:auto;border-radius:var(--radius);overflow:hidden;
  background:var(--surface)}
/* contain: the photograph is square and the character sheet is 3:4, and
   neither should lose anything to a crop. */
.how-face .win img{width:100%;height:100%;object-fit:contain;display:block}
.how-bridge{display:flex;align-items:center;justify-content:center;
  align-self:stretch;padding-top:28px}


.how-disclose{margin:32px auto 0;max-width:600px;text-align:center;
  font-size:14px;line-height:21px;color:var(--muted)}
.how-reassure{margin:16px auto 0;max-width:600px;text-align:center;
  font-weight:600;font-size:17px;line-height:26px;color:var(--ink)}

/* The book, on the ground the reader already uses. */
.how-book{background:#171310;padding:72px 0 80px}
.how-book .wrap{max-width:1168px}
/* On the dark ground everything inherits the cream, headings included —
   .t-section sets its own brown and would otherwise leave the heading and the
   book's title almost invisible against #171310. */
.how-book,.how-book h2,.how-book .t-section,.how-book .mt{color:var(--paper)}
.how-book .t-section{color:var(--paper)}
.how-book .how-lead{color:#f3ece0;margin:16px 0 0;text-align:left}
.how-book-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:48px}
.how-meta{display:flex;gap:16px;align-items:flex-start;width:300px;flex:none}
.how-meta img{width:84px;height:auto;border-radius:var(--radius);flex:none}
.how-meta .mt{display:block;font-family:"Fraunces",Georgia,serif;font-size:19px;
  line-height:25px;color:var(--paper)}
.how-meta .ms{display:block;margin-top:6px;font-size:14px;line-height:20px;
  color:rgba(243,236,224,.6)}

/* The embedded reader is the real one, told to sit in a section rather than
   fill a screen. */
.how-reader.reader{min-height:0;padding:0;background:transparent;margin-top:40px;
  gap:20px}
.how-book .bookspread{width:min(960px,100%);touch-action:pan-y}
.how-book .rail{margin-top:0}

.page-index{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;
  max-width:min(960px,100%);width:100%;margin-top:4px}
.page-index button{border:0;background:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px}
.page-index img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);
  display:block;background:var(--linen)}
.page-index span{font-size:14px;line-height:20px;color:rgba(243,236,224,.55);
  font-variant-numeric:tabular-nums}
.page-index button[aria-current="page"] img{outline:2px solid var(--paper);
  outline-offset:3px}
.page-index button[aria-current="page"] span{color:var(--paper)}
.how-pdf{margin-top:20px}
.how-pdf a{color:rgba(243,236,224,.72);font-size:15px;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
.how-pdf a:hover{color:#f3ece0}

.how-rest{background:var(--cream);padding:48px 0 0}
.how-rest .wrap{max-width:1168px}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  list-style:none;margin:0;padding:0}

/* minmax(0,1fr), not a fixed 752px. Astra's numbers are the 1440px case; a
   fixed pair adds up to 1168px and overflowed every window between 900 and
   1200 where the mobile stack had not yet taken over. */
.how-questions{margin-top:64px;display:grid;
  grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:96px}
@media(max-width:1199px){.how-questions{gap:48px}}
.how-questions .qa{margin:0}
.how-questions details{border-top:1px solid var(--border);padding:16px 0}
.how-questions details{padding:0}
.how-questions summary{min-height:64px;padding:16px;gap:24px;
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;font-weight:600;font-size:18px;line-height:26px;color:var(--ink)}
.how-questions .a{margin-top:0;padding:0 16px 24px}
.how-questions .a p{margin:0;font-size:17px;line-height:26px;color:var(--muted);
  max-width:60ch}

.how-invitation{margin-top:80px;padding:40px 0;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.how-invitation h2{margin:0}

@media(max-width:899px){
  .how-proof{padding:32px 0}
  .how-proof h1{text-align:left}
  .how-lead{text-align:left;margin-left:0;font-size:17px;line-height:26px}
  .how-pair{max-width:640px;margin:28px 0 0}
  .how-bridge svg{width:22px}
  .how-disclose,.how-reassure{text-align:left;margin-left:0}
  .how-book{padding:40px 0 48px}
  .how-book-head{flex-direction:column;gap:24px}
  .how-meta{width:auto}
  .how-meta img{width:56px}
  .how-reader.reader{margin-top:24px}
  .how-book .bookspread{width:min(640px,100%)}
  .how-book .phone-prose{font-size:18px;line-height:28px;padding:24px 24px 28px}
  .page-index{grid-template-columns:repeat(6,1fr);gap:12px 10px}
  .how-rest{padding:32px 0 0}
  .how-steps{grid-template-columns:1fr;gap:20px}
  .how-questions{grid-template-columns:1fr;gap:24px;margin-top:48px}
  .how-invitation{flex-direction:column;align-items:stretch;margin-top:48px;
    padding:32px 0}
  .how-invitation .btn{width:100%;min-height:52px}
}
@media(max-width:359px){.page-index{grid-template-columns:repeat(4,1fr)}}

/* ── home: the before and after, and eight stories ──────────────────────── */
.made .home-pair{display:grid;
  grid-template-columns:minmax(0,1fr) clamp(24px,4vw,64px) minmax(0,1fr);
  align-items:start;gap:0;margin-top:32px;max-width:880px}
.made .home-three{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr)
  56px minmax(0,1fr);max-width:1168px;gap:0}

/* Three equal cells with the connectors in reserved gutters. The third panel
   used to be a rotated stack of leaves whose dark protruding edges were
   stronger than its own shadow and which sat against its own caption. All
   three reviewers named it. One upright page instead. */
.made .home-pair figure{margin:0}
/* A portrait slot for all three, and no mat colour behind them. The images
   have three different native ratios, so a square slot with a cream panel
   behind gave each one a different visible edge — the photograph bled to its
   corners, the character floated in a block of #fff8e8, the page had bands.
   Transparent, and the leftover space is simply the page. No shadow either:
   a shadow on a contained image outlines the box, not the picture. */
.made .home-pair img{width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;
  background:transparent;border-radius:var(--radius);display:block}
/* One rule for three different kinds of picture: a rectangular image gets a
   hairline because it has an edge of its own, and a cut-out does not because
   it has none. The photograph bleeds to its corners and the finished page is
   a white sheet on cream paper -- both are objects sitting on the page. The
   character sheet is a figure standing ON the page, so a box around it would
   be drawing an edge that is not there. */
.made .home-pair #home-photo,
.made .home-pair #home-page{box-shadow:0 0 0 1px var(--border)}
.made .home-pair figcaption{margin-top:10px;font-size:14px;line-height:20px;
  color:var(--muted)}
/* The arrow belongs in the gutter, level with the pictures. Centring it on
   the figure put it a caption-height too low. */
.home-bridge{display:flex;align-items:center;justify-content:center;
  align-self:stretch;padding-bottom:30px}
.home-bridge svg{width:32px;height:12px}
.home-see{margin-top:24px}
/* Below 900px the three panels used to become one tall column of full-width
   pictures with two arrows between them -- a desktop layout stacked, so
   understanding "photograph becomes character becomes book" meant scrolling
   through the whole explanation. At 768px that made the page 4608px tall,
   TALLER than the same page at 1024px. Two on a row with the finished page
   beneath reads as one composition at a glance, and the arrows go: the
   reading order already says what they said. */
@media(max-width:899px){
  .made .home-pair.home-three{display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;
    max-width:min(360px,100%);margin:32px auto 0}
  .home-three .home-bridge{display:none}
  .home-three > figure{margin:0;min-width:0}
  .home-three > figure:nth-of-type(-n+2) img{width:100%;height:auto;
    aspect-ratio:1;object-fit:contain}
  .home-three > figure:last-of-type{grid-column:1/-1;width:240px;
    max-width:100%;justify-self:center}
  .home-three > figure:last-of-type img{width:100%;height:auto;
    object-fit:contain}
}
@media(max-width:719px){
  .made .home-pair{grid-template-columns:1fr;gap:16px;max-width:280px}
}

/* Two rows of four, then the catalogue. */
.eight{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;
  margin-top:32px}
@media(max-width:899px){.eight{grid-template-columns:repeat(3,1fr);gap:24px 16px}}
@media(max-width:599px){.eight{grid-template-columns:repeat(2,1fr);gap:24px 16px}}

/* A slow night sky behind the book, and nowhere else on the site. Two fields
   of points drifting at different speeds, plus one warm wash near the top —
   pure CSS, no image and no library, so it costs a gradient and not a
   request. It stops dead for anyone who has asked for less motion. */
.how-book{position:relative;overflow:hidden;isolation:isolate}
.how-book > .wrap{position:relative;z-index:1}
.how-book::before,.how-book::after{content:"";position:absolute;
  inset:-25% -15%;pointer-events:none;z-index:0}
.how-book::before{
  background-image:
    radial-gradient(1.6px 1.6px at 55.9% 91.6%,rgba(255,247,230,0.63),transparent 62%),
    radial-gradient(1.7px 1.7px at 58.6% 19.1%,rgba(255,247,230,0.66),transparent 62%),
    radial-gradient(1.9px 1.9px at 78.7% 10.2%,rgba(255,247,230,0.53),transparent 62%),
    radial-gradient(1.1px 1.1px at 80.3% 69.0%,rgba(255,247,230,0.38),transparent 62%),
    radial-gradient(2.4px 2.4px at 95.5% 65.1%,rgba(255,247,230,0.72),transparent 62%),
    radial-gradient(1.2px 1.2px at 2.5% 52.8%,rgba(255,247,230,0.39),transparent 62%),
    radial-gradient(1.3px 1.3px at 24.7% 3.9%,rgba(255,247,230,0.63),transparent 62%),
    radial-gradient(1.6px 1.6px at 83.6% 51.9%,rgba(255,247,230,0.73),transparent 62%),
    radial-gradient(1.7px 1.7px at 65.9% 45.8%,rgba(255,247,230,0.52),transparent 62%),
    radial-gradient(2.4px 2.4px at 98.6% 83.3%,rgba(255,247,230,0.77),transparent 62%),
    radial-gradient(1.4px 1.4px at 23.5% 29.3%,rgba(255,247,230,0.39),transparent 62%),
    radial-gradient(2.1px 2.1px at 40.2% 84.0%,rgba(255,247,230,0.58),transparent 62%),
    radial-gradient(2.3px 2.3px at 84.0% 1.1%,rgba(255,247,230,0.48),transparent 62%),
    radial-gradient(2.3px 2.3px at 47.1% 97.1%,rgba(255,247,230,0.59),transparent 62%),
    radial-gradient(1.1px 1.1px at 62.7% 77.3%,rgba(255,247,230,0.51),transparent 62%),
    radial-gradient(1.1px 1.1px at 33.6% 95.5%,rgba(255,247,230,0.8),transparent 62%),
    radial-gradient(1.2px 1.2px at 25.1% 10.9%,rgba(255,247,230,0.39),transparent 62%),
    radial-gradient(2.1px 2.1px at 18.4% 55.8%,rgba(255,247,230,0.62),transparent 62%),
    radial-gradient(1.3px 1.3px at 72.7% 13.8%,rgba(255,247,230,0.74),transparent 62%),
    radial-gradient(1.2px 1.2px at 42.2% 21.9%,rgba(255,247,230,0.51),transparent 62%),
    radial-gradient(2.4px 2.4px at 79.7% 30.8%,rgba(255,247,230,0.88),transparent 62%),
    radial-gradient(1.3px 1.3px at 39.6% 84.7%,rgba(255,247,230,0.74),transparent 62%),
    radial-gradient(1.1px 1.1px at 98.0% 21.9%,rgba(255,247,230,0.5),transparent 62%),
    radial-gradient(2.1px 2.1px at 33.2% 30.0%,rgba(255,247,230,0.39),transparent 62%),
    radial-gradient(1.1px 1.1px at 58.1% 24.8%,rgba(255,247,230,0.71),transparent 62%),
    radial-gradient(1.5px 1.5px at 45.4% 95.0%,rgba(255,247,230,0.64),transparent 62%),
    radial-gradient(1.8px 1.8px at 85.9% 18.9%,rgba(255,247,230,0.44),transparent 62%),
    radial-gradient(2.3px 2.3px at 81.1% 25.5%,rgba(255,247,230,0.46),transparent 62%),
    radial-gradient(2.0px 2.0px at 93.2% 20.3%,rgba(255,247,230,0.92),transparent 62%),
    radial-gradient(2.2px 2.2px at 60.1% 42.3%,rgba(255,247,230,0.41),transparent 62%),
    radial-gradient(1.1px 1.1px at 95.3% 24.4%,rgba(255,247,230,0.77),transparent 62%),
    radial-gradient(1.4px 1.4px at 81.7% 59.5%,rgba(255,247,230,0.53),transparent 62%),
    radial-gradient(1.2px 1.2px at 71.6% 7.7%,rgba(255,247,230,0.49),transparent 62%),
    radial-gradient(1.8px 1.8px at 84.5% 61.2%,rgba(255,247,230,0.52),transparent 62%);
  animation:driftA 120s linear infinite alternate, twinkle 6s ease-in-out infinite}
.how-book::after{
  background-image:
    radial-gradient(70% 46% at 50% 4%,rgba(214,168,74,.10),transparent 72%),
    radial-gradient(1.2px 1.2px at 34.9% 83.8%,rgba(255,247,230,0.52),transparent 62%),
    radial-gradient(1.2px 1.2px at 34.7% 41.7%,rgba(255,247,230,0.93),transparent 62%),
    radial-gradient(0.9px 0.9px at 44.6% 23.0%,rgba(255,247,230,0.56),transparent 62%),
    radial-gradient(1.6px 1.6px at 33.3% 60.6%,rgba(255,247,230,0.6),transparent 62%),
    radial-gradient(1.4px 1.4px at 44.8% 17.7%,rgba(255,247,230,0.61),transparent 62%),
    radial-gradient(1.1px 1.1px at 78.7% 56.1%,rgba(255,247,230,0.47),transparent 62%),
    radial-gradient(1.3px 1.3px at 30.2% 51.2%,rgba(255,247,230,0.48),transparent 62%),
    radial-gradient(1.1px 1.1px at 78.0% 51.5%,rgba(255,247,230,0.8),transparent 62%),
    radial-gradient(1.4px 1.4px at 58.5% 64.2%,rgba(255,247,230,0.59),transparent 62%),
    radial-gradient(1.3px 1.3px at 77.2% 10.7%,rgba(255,247,230,0.91),transparent 62%),
    radial-gradient(1.1px 1.1px at 14.6% 15.7%,rgba(255,247,230,0.55),transparent 62%),
    radial-gradient(0.9px 0.9px at 40.0% 41.7%,rgba(255,247,230,0.74),transparent 62%),
    radial-gradient(1.2px 1.2px at 92.7% 65.6%,rgba(255,247,230,0.54),transparent 62%),
    radial-gradient(1.5px 1.5px at 69.5% 95.8%,rgba(255,247,230,0.79),transparent 62%),
    radial-gradient(1.6px 1.6px at 21.1% 28.3%,rgba(255,247,230,0.93),transparent 62%),
    radial-gradient(0.8px 0.8px at 91.5% 90.2%,rgba(255,247,230,0.43),transparent 62%),
    radial-gradient(0.9px 0.9px at 90.8% 95.1%,rgba(255,247,230,0.87),transparent 62%),
    radial-gradient(1.4px 1.4px at 75.5% 31.2%,rgba(255,247,230,0.35),transparent 62%),
    radial-gradient(1.3px 1.3px at 87.5% 94.0%,rgba(255,247,230,0.66),transparent 62%),
    radial-gradient(0.8px 0.8px at 18.1% 45.0%,rgba(255,247,230,0.49),transparent 62%),
    radial-gradient(0.8px 0.8px at 19.9% 50.0%,rgba(255,247,230,0.43),transparent 62%),
    radial-gradient(0.9px 0.9px at 17.2% 4.3%,rgba(255,247,230,0.82),transparent 62%),
    radial-gradient(1.5px 1.5px at 20.8% 63.1%,rgba(255,247,230,0.88),transparent 62%),
    radial-gradient(1.0px 1.0px at 33.7% 87.4%,rgba(255,247,230,0.81),transparent 62%),
    radial-gradient(1.3px 1.3px at 78.8% 57.2%,rgba(255,247,230,0.54),transparent 62%),
    radial-gradient(1.3px 1.3px at 77.8% 6.4%,rgba(255,247,230,0.54),transparent 62%);
  animation:driftB 170s linear infinite alternate,
            twinkle 9.5s ease-in-out infinite reverse}
@keyframes driftA{from{transform:translate3d(0,0,0)}
                  to{transform:translate3d(-4%,3%,0)}}
@keyframes driftB{from{transform:translate3d(0,0,0)}
                  to{transform:translate3d(3.5%,-2%,0)}}
@keyframes twinkle{0%,100%{opacity:.65}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .how-book::before,.how-book::after{animation:none;opacity:.85}
}

/* The upload glyph is an svg camera now; it was a hollow square that read as a
   broken icon, on the one control the whole product depends on. */
.dropzone .sym{color:var(--primary);opacity:.85}
/* Said plainly beside the button, because the step bar shows Payment before
   Character and never says so in words. */
.order-note{margin-top:12px;font-size:14px;line-height:21px;color:var(--muted);
  max-width:46ch}

/* The comparison table: this story beside the three it sits with. Five
   columns do not fit a phone, so the table scrolls inside its own box rather
   than pushing the page sideways. */
.compare-wrap{margin-top:22px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-top:1px solid var(--rule)}
table.compare{display:table}
.compare{border-collapse:collapse;width:100%;min-width:640px;font-size:15px;
  line-height:23px;text-align:left}
.compare th,.compare td{padding:13px 18px 13px 0;vertical-align:top;
  border-bottom:1px solid var(--rule)}
.compare thead th{font-family:"Karla",system-ui,sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding-bottom:9px;white-space:nowrap}
.compare tbody th{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:17px;line-height:24px;color:var(--ink);min-width:180px}
.compare td{color:var(--muted)}
.compare tbody a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule-strong)}
.compare tbody a:hover{border-bottom-color:var(--gold)}
/* The row the reader is already on is stated, not just styled — the marker
   still reads when the colour does not. */
.compare .this-one th,.compare .this-one td{background:var(--linen)}
.compare .here{display:block;font-family:"Karla",system-ui,sans-serif;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* On a phone the five columns became a sideways-scrolling box with nothing
   to say it scrolled, so the Mood column read as cut off mid-word. Below
   700px each story is a short card: its name, then each column as a
   labelled line. */
@media(max-width:699px){
  .compare-wrap{overflow:visible}
  table.compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;min-width:0}
  .compare thead{display:none}
  .compare tr{padding:14px 12px;border-bottom:1px solid var(--rule)}
  .compare th,.compare td{padding:0;border:0}
  .compare tbody th{min-width:0;margin-bottom:6px}
  .compare td{margin-top:6px}
  .compare td::before{content:attr(data-label);display:block;font-family:"Karla",system-ui,sans-serif;
    font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
    line-height:18px}
  .compare .this-one{background:var(--linen)}
}
.also .t-ask{margin-top:52px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ---- waiting, so nothing looks stalled --------------------------------
   Three states take real time: confirming a payment, drawing the character,
   illustrating twelve pages. Each one now says what is happening and shows
   that it is still happening. */
.working{display:flex;align-items:center;gap:14px;margin-top:24px;
  font-size:15px;line-height:22px;color:var(--muted)}
.working .bar{position:relative;flex:none;width:120px;height:3px;
  background:var(--linen);border-radius:var(--radius);overflow:hidden}
.working .bar i{position:absolute;inset:0;width:38%;border-radius:var(--radius);
  background:var(--gold);animation:sweep 1.6s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
.working .what{min-height:22px}

/* The photograph, with the light passing over it while the drawing happens. */
.drawing-stage{display:flex;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.shimmer{position:relative;overflow:hidden;border-radius:var(--radius);flex:none}
.shimmer img{display:block;width:132px;height:132px;object-fit:cover;object-position:center top;
  border-radius:var(--radius)}
.shimmer::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-100%);animation:pass 2.2s ease-in-out infinite}
@keyframes pass{to{transform:translateX(100%)}}
.arrowto{flex:none;width:34px;height:2px;background:var(--rule-strong);position:relative}
.arrowto::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;
  border-left-color:var(--rule-strong)}
.pending{flex:none;width:132px;height:132px;border-radius:var(--radius);background:var(--linen);
  border:1px dashed var(--border);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;padding:8px}
.pending .pen{width:26px;height:26px;border-radius:50%;border:2px solid var(--gold);
  border-top-color:transparent;animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pending .t-cap{font-size:12px;line-height:16px;color:var(--muted)}
.slots i.next{background:var(--linen);position:relative;overflow:hidden}
.slots i.next::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(254,183,0,.45) 50%,transparent 65%);
  transform:translateX(-100%);animation:pass 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .working .bar i,.shimmer::after,.pending .pen,.slots i.next::after{animation:none}
  .working .bar i{width:100%;opacity:.5}
}

/* ---- the finished book ------------------------------------------------
   What they bought on the left, what they can show people on the right. */
/* The flow is a 560px column because every step before this one is a single
   decision. The finished book is the one page with two things to look at, so
   it takes the room it needs -- and the steps above it stay put. */
@media(min-width:980px){
  #v-done{width:940px;max-width:calc(100vw - 48px)}
  #v-done .t-lead{max-width:62ch}
}
.done-grid{display:grid;gap:32px;margin-top:28px;align-items:start}
@media(min-width:980px){.done-grid{grid-template-columns:minmax(0,1fr) 360px;gap:56px}}
.got{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.got li{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--rule)}
.got b{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:17px;line-height:24px;color:var(--ink)}
.got span{font-size:14px;line-height:20px;color:var(--muted)}
.clipcard{background:var(--linen);border-radius:var(--radius);padding:20px}
.clipcard .marker{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:12px}
.clipframe{position:relative;width:100%;aspect-ratio:9/16;background:var(--ink);
  border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 28px -18px rgba(61,44,0,.55)}
.clipframe video{width:100%;height:100%;object-fit:cover;display:block;background:var(--ink)}
.clipwait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;color:var(--cream);font-size:14px;text-align:center;padding:16px}
.clipwait i{width:26px;height:26px;border-radius:50%;border:2px solid var(--gold);
  border-top-color:transparent;animation:spin 900ms linear infinite}
/* The two things they can take away, each under its own picture. */
.shareables{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:start}
.shareables figure{margin:0;display:flex;flex-direction:column;gap:10px}
.share-still img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);
  background:var(--surface);box-shadow:0 10px 24px -18px rgba(61,44,0,.5)}
.shareables .btn{width:100%;padding-left:8px;padding-right:8px}
@media(max-width:420px){.shareables{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.clipwait i{animation:none}}
.donehead{margin-top:24px;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.donehead::after{content:"";display:block;width:64px;height:2px;background:var(--gold);
  margin-top:20px}

/* ---- gift pages -------------------------------------------------------
   A gift page is a landing page: somebody arrives from a search with one
   question ("is this any good?"), so the proof comes before anything else. */
.gift{max-width:900px}
.ghead{max-width:62ch}
.ghead .deliver{margin-top:18px}
.ghead .btn{margin-top:20px}

.gsample{margin-top:48px;padding-top:32px;border-top:1px solid var(--rule)}
.gpair{display:flex;align-items:center;gap:20px;margin-top:22px;flex-wrap:wrap}
.gpair figure{margin:0;flex:0 1 220px}
.gpair img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;
  border-radius:var(--radius);background:var(--linen)}
.gpair img.gchar{object-fit:contain;background:var(--surface)}
.gpair figcaption{margin-top:8px;font-size:14px;line-height:20px;color:var(--muted)}
.gbridge{flex:0 0 auto;width:30px;height:2px;background:var(--rule-strong);position:relative}
.gbridge::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;
  border-left-color:var(--rule-strong)}
.gspreads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.gspreads figure{margin:0}
.gspreads img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);
  background:var(--linen);box-shadow:0 12px 28px -22px rgba(61,44,0,.5)}
@media(max-width:700px){.gspreads{grid-template-columns:1fr 1fr}
  .gspreads figure:last-child{display:none}}
.gsample .hint{margin-top:14px}

.gmore{margin-top:48px;padding-top:32px;border-top:1px solid var(--rule)}
.gchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.gchip{display:inline-block;padding:8px 14px;border:1px solid var(--border);
  border-radius:var(--radius);font-size:15px;color:var(--ink);text-decoration:none;
  background:var(--surface)}
.gchip:hover{border-color:var(--gold)}

.gifts-index{max-width:1040px}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:24px;
  margin-top:32px}
.gcard{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:8px}
.gcard img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);
  background:var(--linen);box-shadow:0 12px 28px -22px rgba(61,44,0,.5);
  transition:box-shadow 160ms ease}
.gcard:hover img{box-shadow:0 16px 32px -20px rgba(61,44,0,.62)}
.gcard .t-book{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gcard-h{font-family:"Fraunces",Georgia,serif;font-size:17px;line-height:23px}
.gifts-index .asked{margin-top:56px;padding-top:32px;border-top:1px solid var(--rule)}
/* Four picks, four columns: a 3+1 row reads as one story left over. */
@media(min-width:900px){.gift .also .rack{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gift .asked{margin-top:48px;padding-top:32px;border-top:1px solid var(--rule)}
.gift .asked .t-ask:first-child{margin-top:0}
/* Gift links on the home page and story pages: in the content, so a crawler
   that reads the page meets them, and quiet, so a reader is not sold to. */
.homegifts{padding-block:8px 16px}
.homegifts .gchips{margin-top:20px}
.giftfor{margin-top:28px;font-size:15px;line-height:24px;color:var(--muted)}
.giftfor a{color:var(--ink)}

/* ══ Redesign, 2026-09 ═══════════════════════════════════════════════════
   The founder's approved canvas, built. Everything below is additive: the
   pages it styles were rewritten in build.py (page_home, page_story,
   page_how) and the header gained a phone menu. Motion is CSS only, about
   four kilobytes with the few lines of script, and all of it stops for a
   visitor whose device asks for reduced motion. */

/* ---- header: a menu button on a phone -------------------------------- */
.menu-btn{display:none}
.site-head .nav-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;
  background:var(--ink);color:var(--paper);border-radius:var(--radius);font-weight:600;
  transition:background 160ms var(--ease-soft)}
.site-head .nav-cta:hover{background:var(--primary);color:var(--paper)}
/* It points at /stories/, so the "you are here" marker claimed it on every
   story page and set its text in ink, on its own ink background. */
.site-head nav .nav-cta[aria-current]{color:var(--paper)}
.site-head .nav-cta::after{display:none}
.site-head nav{align-items:center}
@media(max-width:767px){
  .site-head{position:relative}
  .site-head .wrap{height:64px}
  .brand{font-size:21px}
  .brand img{height:34px}
  .menu-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:44px;height:44px;border:1px solid var(--border);border-radius:var(--radius);
    background:transparent;cursor:pointer;padding:0}
  .menu-btn span{display:block;width:18px;height:1.5px;background:var(--ink);
    transition:transform 200ms var(--ease-soft),opacity 200ms}
  .site-head.open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .site-head.open .menu-btn span:nth-child(2){opacity:0}
  .site-head.open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .site-head nav{display:none;position:absolute;left:0;right:0;top:64px;z-index:30;
    flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;
    background:var(--cream);border-bottom:1px solid var(--border);
    box-shadow:0 18px 30px -24px rgba(61,44,0,.45)}
  .site-head.open nav{display:flex}
  .site-head nav a{padding:14px 0;border-bottom:1px solid var(--rule);font-size:18px;color:var(--ink)}
  .site-head nav a::after{display:none}
  .site-head nav .nav-cta{justify-content:center;margin-top:16px;border:0;min-height:52px}
  .reading .menu-btn{border-color:rgba(250,246,238,.2)}
  .reading .menu-btn span{background:#f3ece0}
  .reading .site-head nav{background:#171310}
  .reading .site-head nav a{color:#f3ece0}
}

/* ---- shared ---------------------------------------------------------- */
.btn.big{min-height:56px;padding:14px 26px;font-size:17px;gap:10px;background:var(--ink);
  border-color:var(--ink);box-shadow:0 10px 24px -14px rgba(61,44,0,.8);
  transition:background 160ms var(--ease-soft),transform 220ms var(--ease-soft),box-shadow 220ms}
.btn.big:hover{background:var(--primary);border-color:var(--primary);transform:translateY(-2px);
  box-shadow:0 16px 28px -16px rgba(61,44,0,.85)}
.btn .arr{display:inline-block;transition:transform 260ms var(--ease-soft)}
.btn:hover .arr{transform:translateX(4px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  margin-bottom:36px}
.sec-head .t-section{margin-top:12px}
.rise{animation:rise 900ms var(--ease-soft) both}
.h-words .rise:nth-child(2){animation-delay:80ms}.h-words .rise:nth-child(3){animation-delay:160ms}
.h-words .rise:nth-child(4){animation-delay:240ms}.h-words .rise:nth-child(5){animation-delay:320ms}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
/* Sections rise as they come into view: driven by the scroll itself where
   the browser can, and simply there where it cannot. */
/* Only a lift, never a fade: content that starts invisible is blank to
   anything that reads the page without scrolling it (a full-page capture, a
   link preview, a crawler), and a section must never depend on that. */
@keyframes lift{from{transform:translateY(28px)}}
@supports (animation-timeline: view()){
  .h-same-in,.h-promise-in,.h-name-in,.hw-step{
    animation:lift linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}

/* ---- front page: the opening ------------------------------------------ */
.h-open{padding:40px 0 56px;overflow:hidden}
.h-open-in{display:grid;gap:40px;align-items:center}
@media(min-width:1024px){.h-open{padding:56px 0 72px}
  .h-open-in{grid-template-columns:minmax(0,1fr) 560px;gap:48px}}
.h-words .t-opening{margin-top:16px}
.drawn-under{font-style:italic;position:relative;white-space:nowrap}
.drawn-under svg{position:absolute;left:0;bottom:-10px;width:100%;height:16px;overflow:visible}
.drawn-under path{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:520;stroke-dashoffset:520;animation:draw 1.5s .5s cubic-bezier(.6,.1,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.h-words .t-lead{margin-top:26px;max-width:46ch}
.h-ctas{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:28px}
.h-trust{list-style:none;padding:0;margin:32px 0 0;display:flex;flex-wrap:wrap;gap:12px 24px;
  font-size:15px;line-height:22px;color:var(--muted-ink)}
.h-trust li{display:flex;align-items:center;gap:8px}
.h-trust svg{color:var(--primary);flex:none}

/* photo -> character -> page, one nine-second loop */
.h-stage{position:relative;height:440px;max-width:560px;width:100%;margin:0 auto}
@media(min-width:1024px){.h-stage{height:560px}}
.st-a{position:absolute;left:4%;top:6%;width:55%;margin:0;background:#fff;padding:10px 10px 0;
  box-shadow:0 30px 56px -30px rgba(61,44,0,.6),0 2px 6px rgba(61,44,0,.12);
  transform:rotate(-4deg);animation:stA 9s ease-in-out infinite}
.st-frame{position:relative;aspect-ratio:1;overflow:hidden;background:var(--linen)}
.st-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The wipe from photo to drawing, made of transforms only: a window slides
   in from the right while the drawing inside it slides the other way, so
   the drawing stays put and is uncovered. It used to animate clip-path and
   `left`, which the browser repaints every frame -- the front page kept a
   laptop's processor a third busy doing nothing, a slow phone's 86%. */
.st-wipe{position:absolute;inset:0;overflow:hidden;transform:translateX(100%);
  animation:stWipe 9s ease-in-out infinite;will-change:transform}
.st-wipe img{transform:translateX(-100%);animation:stWipeIn 9s ease-in-out infinite;will-change:transform}
.st-pen{position:absolute;inset:-6px 0;transform:translateX(100%);opacity:0;
  animation:stPen 9s ease-in-out infinite;will-change:transform,opacity}
.st-pen b{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);
  box-shadow:0 0 16px 4px rgba(254,183,0,.55)}
.st-a figcaption{position:relative;height:42px;font-family:"Fraunces",Georgia,serif;font-style:italic;
  font-size:17px;color:var(--muted-ink)}
.st-a figcaption span{position:absolute;left:4px;top:10px}
.st-a .c1{animation:stC1 9s infinite}.st-a .c2{opacity:0;animation:stC2 9s infinite}
.st-b{position:absolute;right:2%;top:4%;width:52%;margin:0;background:#fff;padding:8px;opacity:0;
  box-shadow:0 36px 64px -28px rgba(40,26,0,.7),0 2px 8px rgba(61,44,0,.15);
  animation:stB 9s ease-in-out infinite}
.st-b img{width:100%;display:block}
.st-tag{position:absolute;left:-12px;bottom:28px;background:var(--ink);color:var(--paper);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 11px}
.st-steps{position:absolute;left:4%;bottom:0;display:flex;gap:22px;list-style:none;margin:0;padding:0;
  font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--ink)}
.st-steps li{opacity:.38}
.st-steps li{display:flex;align-items:center;gap:8px}
.st-steps li::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.st-steps .s1{animation:stS1 9s infinite}.st-steps .s2{animation:stS2 9s infinite}
.st-steps .s3{animation:stS3 9s infinite}
@keyframes stA{0%,52%{transform:translate(0,0) rotate(-4deg) scale(1)}
  64%,92%{transform:translate(-4%,-6%) rotate(-9deg) scale(.86)}100%{transform:translate(0,0) rotate(-4deg) scale(1)}}
@keyframes stWipe{0%,16%{transform:translateX(100%);opacity:1}38%,93%{transform:translateX(0);opacity:1}
  97%{transform:translateX(0);opacity:0}98%,100%{transform:translateX(100%);opacity:0}}
@keyframes stWipeIn{0%,16%{transform:translateX(-100%)}38%,97%{transform:translateX(0)}98%,100%{transform:translateX(-100%)}}
@keyframes stPen{0%,15%{transform:translateX(100%);opacity:0}17%{transform:translateX(100%);opacity:1}
  38%{transform:translateX(0);opacity:1}41%,100%{transform:translateX(0);opacity:0}}
@keyframes stC1{0%,30%{opacity:1}34%,96%{opacity:0}100%{opacity:1}}
@keyframes stC2{0%,30%{opacity:0}34%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes stB{0%,50%{opacity:0;transform:translate(14%,22%) rotate(11deg) scale(.82)}
  64%,90%{opacity:1;transform:translate(0,0) rotate(3deg) scale(1)}
  97%,100%{opacity:0;transform:translate(14%,22%) rotate(11deg) scale(.82)}}
@keyframes stS1{0%,33%{opacity:1}36%,100%{opacity:.38}}
@keyframes stS2{0%,33%{opacity:.38}36%,58%{opacity:1}61%,100%{opacity:.38}}
@keyframes stS3{0%,58%{opacity:.38}61%,94%{opacity:1}97%,100%{opacity:.38}}
/* paused while off screen (the script marks what is in view) */
[data-anim]:not(.is-live),[data-anim]:not(.is-live) *{animation-play-state:paused!important}

/* ---- front page: same face, every page -------------------------------- */
.h-same{background:#f3ecdf;padding:64px 0}
.h-same-in{display:grid;gap:40px;align-items:center}
@media(min-width:1024px){.h-same{padding:88px 0}.h-same-in{grid-template-columns:420px minmax(0,1fr);gap:56px}}
.h-same .t-section{margin-top:12px}
.h-same .t-lead{margin-top:16px;max-width:40ch}
.h-same-art{position:relative;height:500px;max-width:680px;width:100%;margin:0 auto}
.snap{position:absolute;margin:0;background:#fff;padding:7px 7px 26px;
  box-shadow:0 18px 32px -18px rgba(61,44,0,.55)}
.snap img{width:100%;height:100%;object-fit:cover;display:block}
.snap figcaption{position:absolute;left:9px;bottom:5px;font-family:"Fraunces",Georgia,serif;
  font-style:italic;font-size:13px;color:var(--muted-ink)}
.snap-photo{left:0;top:10px;width:150px;height:222px;transform:rotate(-5deg)}
.snap-char{left:26px;top:262px;width:160px;height:212px;transform:rotate(4deg);background:#fffdf8}
.snap-char img{object-fit:contain}
.snap-arrow{position:absolute;left:176px;top:130px}
.snap-arrow path{fill:none;stroke:#b8a57e;stroke-width:1.6;stroke-dasharray:4 6}
.snap-arrow path+path{stroke-dasharray:none}
.fan{position:absolute;left:260px;top:40px;width:400px;height:330px}
.fan img{position:absolute;left:100px;top:20px;width:200px;height:252px;object-fit:cover;background:#fff;
  padding:7px;box-shadow:0 24px 40px -22px rgba(61,44,0,.6);transition:transform 700ms var(--ease-soft)}
.fan .f1{transform:rotate(-9deg) translateX(-60px)}
.fan .f2{transform:translateY(-8px);z-index:2}
.fan .f3{transform:rotate(9deg) translateX(60px)}
.fan:hover .f1{transform:rotate(-13deg) translateX(-118px) translateY(8px)}
.fan:hover .f2{transform:translateY(-20px) scale(1.04)}
.fan:hover .f3{transform:rotate(13deg) translateX(118px) translateY(8px)}
.fan-cap{position:absolute;left:260px;width:400px;top:440px;text-align:center;
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:16px;color:var(--muted-ink)}
/* The spread-out composition needs its full 680px; below 1200 the column is
   narrower (516px at 1024, where the fan ran 150px off the page), so it
   stacks instead. */
@media(max-width:1199px){
  .h-same-art{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .snap,.snap-arrow{position:relative;left:auto;top:auto}
  .snap{width:auto;height:240px;transform:none}
  .snap-arrow{display:none}
  .fan{position:relative;left:auto;top:auto;grid-column:1/3;height:290px;width:100%}
  .fan img{left:calc(50% - 90px);width:180px;height:226px}
  .fan .f1{transform:rotate(-8deg) translateX(-70px)}
  .fan .f3{transform:rotate(8deg) translateX(70px)}
  .fan-cap{position:relative;left:auto;top:auto;width:auto;grid-column:1/3}
}

/* ---- front page: the book --------------------------------------------- */
.h-book-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.h-book-head .marker{color:#c9a86a}
.h-book-head .t-section{margin-top:12px;color:var(--paper)}
.h-book-head p{max-width:44ch;color:rgba(243,236,224,.72);font-size:16px;line-height:25px}
.h-book-head i{font-family:"Fraunces",Georgia,serif}
.how-book .reader .rail .quiet{color:rgba(243,236,224,.62)}

/* ---- front page: the shelf; covers become books ----------------------- */
.h-shelf{padding:72px 0 40px}
.h-shelf .eight{perspective:1200px}
.h-shelf .book .cover,.also .rack .book .cover{padding:0;border:0;object-fit:cover;background:var(--linen);
  /* the cover files carry uneven blank margins; trim them where the browser can */
  object-view-box:inset(3.5% 3.5% 3.5% 3.5%);
  transform:rotateY(-8deg);transform-origin:left center;
  box-shadow:12px 16px 26px -14px rgba(61,44,0,.55),inset 10px 0 0 -6px rgba(0,0,0,.18);
  transition:transform 600ms var(--ease-soft)}
.h-shelf .book,.also .rack .book{perspective:900px}
.h-shelf .book:hover .cover,.also .rack .book:hover .cover{transform:rotateY(-22deg) translateY(-8px);
  box-shadow:22px 26px 32px -16px rgba(61,44,0,.5),inset 10px 0 0 -6px rgba(0,0,0,.2)}

/* ---- front page: the promise ------------------------------------------ */
.h-promise{background:var(--linen);padding:56px 0}
.h-promise-in{display:grid;gap:32px;align-items:center}
@media(min-width:900px){.h-promise-in{grid-template-columns:minmax(0,1fr) 240px}}
.h-promise-line{font-family:"Fraunces",Georgia,serif;font-size:32px;line-height:38px;
  letter-spacing:-.015em;margin:14px 0 14px;max-width:24ch;text-wrap:balance}
@media(min-width:1024px){.h-promise-line{font-size:44px;line-height:50px}}
.seal{position:relative;width:200px;height:200px;justify-self:center}
.seal svg{width:100%;height:100%;animation:spin 34s linear infinite}
.seal circle{fill:none;stroke:var(--primary);stroke-width:1.5}
.seal text{font-family:"Karla",sans-serif;font-size:14px;font-weight:700;fill:var(--primary)}
.seal img{position:absolute;left:30%;top:30%;width:40%;height:40%;object-fit:contain}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- front page: gift tiles ------------------------------------------- */
.h-gifts{padding:72px 0 24px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:899px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--linen);
  border-radius:var(--radius);text-decoration:none}
.tile img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;
  transition:transform 1.2s var(--ease-soft)}
.tile:hover img{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,17,11,0) 42%,rgba(23,17,11,.8))}
.tile-lbl{position:absolute;left:18px;right:64px;bottom:14px;z-index:1;color:var(--paper)}
.tile-lbl b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:26px;line-height:30px}
.tile-lbl span{display:block;font-size:13px;opacity:.85;margin-top:2px}
.tile-go{position:absolute;right:16px;bottom:16px;z-index:1;width:40px;height:40px;border-radius:50%;
  background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(8px);transition:opacity 300ms var(--ease-soft),transform 300ms var(--ease-soft)}
.tile:hover .tile-go,.tile:focus-visible .tile-go{opacity:1;transform:none}
@media(max-width:599px){.tile-lbl b{font-size:20px;line-height:24px}.tile-lbl{left:12px;bottom:10px}}
.h-gifts .gchips{margin-top:20px}

/* ---- front page: questions -------------------------------------------- */
.h-faq{padding:64px 0;border-top:1px solid var(--rule);margin-top:48px}
.h-faq-in{display:grid;gap:24px}
@media(min-width:1024px){.h-faq-in{grid-template-columns:360px minmax(0,1fr);gap:56px}}
.h-faq .t-section{margin-top:12px}
.h-faq .asked{margin:0}
.h-faq .t-ask{font-family:"Fraunces",Georgia,serif;font-size:22px;line-height:28px;
  padding-top:22px;border-top:1px solid var(--border);margin-top:22px}
.h-faq .t-ask:first-child{margin-top:0}
.h-faq .answer{margin-top:10px;max-width:60ch;color:var(--muted-ink)}

/* ---- front page: your name -------------------------------------------- */
.h-name{background:#f3ecdf;padding:64px 0;overflow:hidden}
.h-name-in{display:grid;gap:40px;align-items:center}
@media(min-width:1024px){.h-name{padding:88px 0}.h-name-in{grid-template-columns:minmax(0,1fr) 420px;gap:56px}}
.h-name-t{margin:12px 0 28px}
@media(min-width:1024px){.h-name-t{font-size:52px;line-height:56px}}
.h-name input,.buy input{max-width:420px;min-height:56px;font-family:"Fraunces",Georgia,serif;
  font-size:20px;background:#fffdf8;border:1.5px solid #c9b58c;transition:border-color .2s,box-shadow .2s}
.h-name input:focus,.buy input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(254,183,0,.25)}
.pagecard{margin:0;background:#fffdf8;padding:12px 12px 20px;max-width:400px;justify-self:center;
  box-shadow:0 36px 56px -30px rgba(40,26,0,.55);transform:rotate(2deg);animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:rotate(1deg) translateY(-8px)}}
.pagecard img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top}
.pagecard-line{font-family:"Fraunces",Georgia,serif;font-size:20px;line-height:30px;margin:16px 8px 10px}
.nm{color:var(--primary);font-style:italic}
.pagecard figcaption{margin:0 8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#a8956d;font-weight:700}

/* ---- story page -------------------------------------------------------- */
.s-top{display:grid;gap:40px}
@media(min-width:900px){.s-top{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:48px;align-items:start}}
@media(min-width:1200px){.s-top{grid-template-columns:448px minmax(0,1fr);gap:56px}}
.s-stage{perspective:1400px;display:flex;justify-content:center;padding:12px 0 8px}
.s-book{position:relative;width:min(340px,76%);transform:rotateY(-12deg);transform-style:preserve-3d;
  box-shadow:26px 36px 60px -28px rgba(40,26,0,.65);transition:transform 800ms var(--ease-soft)}
.s-stage:hover .s-book{transform:rotateY(-22deg)}
.s-book img{width:100%;display:block}
.s-book::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6%;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.18) 45%,rgba(0,0,0,.08))}
.s-book::after{content:"";position:absolute;left:100%;top:3px;bottom:3px;width:18px;
  background:repeating-linear-gradient(90deg,#f4eddf 0 1px,#dccfb4 1px 2px);
  transform:rotateY(72deg);transform-origin:left}
.s-inside-t{margin-top:40px}
.peek{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.peek a{display:block;background:#fff;padding:6px;box-shadow:0 14px 26px -16px rgba(61,44,0,.5);
  transition:transform 450ms var(--ease-soft)}
.peek a:nth-child(1){transform:rotate(-2deg)}.peek a:nth-child(3){transform:rotate(2deg)}
.peek a:hover{transform:translateY(-8px)}
.peek img{width:100%;aspect-ratio:4/5;object-fit:cover}
.s-world{margin:36px 0 0}
.s-world img{width:62%;margin:0 auto;border-radius:var(--radius);box-shadow:var(--lead-shadow)}
.s-world figcaption{text-align:center;margin-top:10px;font-size:13px;color:var(--muted)}
.story .words .marker{display:block;margin-bottom:10px}
.s-chips{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.s-chips li{padding:6px 12px;background:var(--linen);font-size:14px;line-height:20px;color:var(--muted-ink)}
.buy{margin-top:28px;background:#fffdf8;border:1px solid #e0d4bd;padding:24px;
  box-shadow:0 28px 56px -44px rgba(61,44,0,.6)}
@media(min-width:768px){.buy{padding:28px}}
.buy label{color:var(--muted-ink)}
.s-preview{margin-top:14px}
.s-line{display:block;font-family:"Fraunces",Georgia,serif;font-size:18px;line-height:28px;color:var(--ink)}
.s-line-cap{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.s-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-top:22px}
.s-price .t-price{margin:0;font-size:40px;line-height:44px}
.s-price .tax{margin:0}
.buy .btn{margin-top:18px}
.s-promise{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding-top:18px;border-top:1px solid #eadfcb;color:var(--primary)}
.s-promise p{font-size:15px;line-height:22px;color:var(--muted-ink)}
.s-promise b{color:var(--ink)}
.story .words .synopsis{margin-top:32px}

/* ---- how it works ------------------------------------------------------ */
.hw-top{padding:48px 0 8px}
.hw-top .t-lead{margin-top:14px;max-width:50ch}
.hw-flow{padding:24px 0 72px}
.hw-steps{list-style:none;margin:0;padding:0}
.hw-step{display:grid;gap:24px;align-items:center;padding:40px 0;border-top:1px solid var(--rule)}
.hw-step:first-child{border-top:0}
@media(min-width:900px){.hw-step{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;padding:56px 0}
  .hw-step:nth-child(even) .hw-txt{order:2}}
.hw-n{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  border:1.5px solid var(--gold);font-family:"Fraunces",Georgia,serif;font-size:17px;color:var(--primary);
  margin-bottom:14px}
.hw-txt h2{font-family:"Fraunces",Georgia,serif;font-size:30px;line-height:34px}
@media(min-width:1024px){.hw-txt h2{font-size:38px;line-height:42px}}
.hw-txt p{margin-top:14px;max-width:44ch;font-size:17px;line-height:27px;color:var(--muted-ink)}
.hw-txt .quiet{margin-top:10px}
.hw-art{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center}
.hw-covers{display:flex;justify-content:center}
.hw-covers img{width:34%;border-radius:var(--radius);box-shadow:0 20px 34px -20px rgba(61,44,0,.6);
  margin:0 -3%;transition:transform 500ms var(--ease-soft)}
.hw-covers img:nth-child(1){transform:rotate(-6deg) translateY(10px)}
.hw-covers img:nth-child(2){transform:translateY(-6px);z-index:1}
.hw-covers img:nth-child(3){transform:rotate(6deg) translateY(10px)}
.hw-covers:hover img:nth-child(1){transform:rotate(-9deg) translate(-12px,12px)}
.hw-covers:hover img:nth-child(3){transform:rotate(9deg) translate(12px,12px)}
.hw-photo{margin:0;background:#fff;padding:10px 10px 36px;width:min(300px,80%);transform:rotate(-3deg);
  box-shadow:0 24px 40px -22px rgba(61,44,0,.6)}
.hw-photo img{width:100%;aspect-ratio:1;object-fit:cover}
.hw-approve{position:relative;width:min(320px,86%);background:#fffdf8;padding:10px;
  box-shadow:0 24px 40px -22px rgba(61,44,0,.6)}
.hw-approve img{width:100%;aspect-ratio:1;object-fit:cover}
.hw-choice{display:flex;gap:8px;margin-top:10px}
.hw-choice span{flex:1;text-align:center;padding:11px 8px;font-size:14px;font-weight:600;border-radius:var(--radius)}
.hw-choice .yes{background:var(--ink);color:var(--paper)}
.hw-choice .no{border:1px solid var(--rule-strong);color:var(--ink)}
.hw-fan{position:relative;left:auto;top:auto;width:100%;max-width:420px;height:320px}
.hw-fan img{left:calc(50% - 90px);width:180px;height:230px}
.how-book .h-book-head .hw-n{border-color:#c9a86a;color:#f3ece0}
.hw-rest{padding:72px 0 24px}
.hw-go{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  margin-top:72px;padding-top:40px;border-top:1px solid var(--rule)}

@media(prefers-reduced-motion:reduce){
  .rise,.drawn-under path,.st-a,.st-wipe,.st-wipe img,.st-pen,.st-b,.st-a .c1,.st-a .c2,.st-steps li,.seal svg,
  .pagecard,.h-same-in,.h-shelf .eight,.h-gifts .tiles,.h-promise-in,.h-name-in,.hw-step{animation:none!important}
  .drawn-under path{stroke-dashoffset:0}
  .st-wipe,.st-wipe img{transform:none}.st-b{opacity:1}.st-a .c1{opacity:0}.st-a .c2{opacity:1}
}

/* ---- the gallery ------------------------------------------------------- */
.peek a,.s-world a{cursor:zoom-in}
.s-world a{display:block}
dialog.gallery{border:0;padding:0;margin:0;background:transparent;width:100vw;height:100vh;
  max-width:none;max-height:none;overflow:hidden}
dialog.gallery[open]{display:flex;align-items:center;justify-content:center;gap:12px}
dialog.gallery::backdrop{background:rgba(23,17,11,.9)}
/* No double-tap zoom inside the gallery. Without this, after a swipe the
   browser held the next tap as a possible double-tap and never turned it into
   a click, so the close button did nothing. It also removes the tap delay. */
dialog.gallery,dialog.gallery button{touch-action:manipulation}
dialog.gallery figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  animation:gIn 320ms var(--ease-soft)}
@keyframes gIn{from{opacity:0;transform:scale(.96)}}
dialog.gallery img{max-width:min(86vw,760px);max-height:82vh;width:auto;height:auto;
  background:#fff;padding:8px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);touch-action:pan-y pinch-zoom;user-select:none;
  -webkit-user-drag:none}
.g-n{font-size:13px;letter-spacing:.14em;color:rgba(243,236,224,.6)}
.g-prev,.g-next,.g-close{border:1px solid rgba(250,246,238,.25);background:rgba(250,246,238,.08);
  color:#f3ece0;width:48px;height:48px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:none;transition:background 160ms}
.g-prev:hover,.g-next:hover,.g-close:hover{background:rgba(250,246,238,.18)}
.g-close{position:absolute;top:16px;right:16px}
dialog.gallery.single .g-prev,dialog.gallery.single .g-next{display:none}
@media(max-width:599px){
  dialog.gallery[open]{gap:0}
  .g-prev,.g-next{position:absolute;bottom:22px}
  .g-prev{left:calc(50% - 60px)}.g-next{right:calc(50% - 60px)}
  dialog.gallery img{max-width:92vw;max-height:72vh}
}
@media(prefers-reduced-motion:reduce){dialog.gallery figure{animation:none}}

/* The closing page of the front page's book: a hand-over, not a page. */
.titlepage.endpage b{font-size:clamp(28px,3vw,46px)}
.titlepage.endpage .btn{margin-top:10px;position:relative;z-index:2}
.titlepage .tp-note{font-size:13px;line-height:18px;color:rgba(60,40,22,.55);margin-top:4px}

/* How it works: the fan's pages have no placeholder picture (it cost 333 KB
   and was replaced at once); they stay invisible until the real page arrives. */
.hw-fan img:not([src]){visibility:hidden}

/* ======================================================================
   GUIDES -- long answers to the questions asked before buying. Same type
   and paper as the rest of the site: a contents column that stays in view
   on wide screens, one real sample picture, and prose at reading width.
   ====================================================================== */
.guide{padding-top:24px}
.g-head{max-width:780px;margin:8px 0 32px}
.g-head .marker{display:block;margin-bottom:10px}
.g-meta{margin-top:14px;font-size:14px;line-height:20px;color:var(--muted)}
.g-grid{display:grid;gap:28px}
@media(min-width:1000px){
  .g-grid{grid-template-columns:220px minmax(0,1fr);gap:64px}
  .g-side{position:sticky;top:96px;align-self:start}
}
@media(max-width:999px){.g-side{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0}}
.g-toc{list-style:none;padding:0;margin:12px 0 0;counter-reset:toc}
.g-toc li{counter-increment:toc;display:flex;gap:10px;margin:0 0 10px;font-size:15px;line-height:21px}
.g-toc li::before{content:counter(toc,decimal-leading-zero);font-family:"Fraunces",Georgia,serif;color:var(--gold);flex:0 0 auto}
.g-toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.g-toc a:hover{border-bottom-color:var(--gold)}
.g-main{max-width:720px;min-width:0}
.g-fig{margin:0 0 12px}
.g-page img{display:block;width:min(340px,100%);height:auto;background:#fff;padding:8px;
  box-shadow:0 18px 34px -20px rgba(61,44,0,.55);transform:rotate(-1.2deg)}
.g-page figcaption{margin-top:14px;font-size:14px;line-height:20px;color:var(--muted)}
.gpair.g-fig{margin-top:0}
.g-body{margin-top:8px}
.g-body h2{font-size:28px;line-height:34px;margin:48px 0 12px;scroll-margin-top:90px}
@media(max-width:767px){.g-body h2{font-size:24px;line-height:30px}}
.g-body ul,.g-body ol{margin:14px 0 0;padding-left:22px}
.g-body li{margin:0 0 10px}
.g-body li b{font-weight:600}
.g-body ul.checks{list-style:none;padding-left:0}
.g-body ul.checks li{position:relative;padding-left:30px}
.g-body ul.checks li::before{content:"";position:absolute;left:4px;top:8px;width:12px;height:6px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.g-body ol.ideas{padding-left:0;list-style:none;counter-reset:idea}
.g-body ol.ideas li{counter-increment:idea;position:relative;padding-left:44px;margin-bottom:16px}
.g-body ol.ideas li::before{content:counter(idea);position:absolute;left:0;top:-2px;width:30px;height:30px;
  border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;
  font-family:"Fraunces",Georgia,serif;font-size:15px;color:var(--ink)}
.g-body .compare-wrap{margin-top:18px}
.g-faq{margin-top:52px;padding-top:8px;border-top:1px solid var(--rule)}
.g-cta{margin-top:36px}
.g-more-h{margin-top:40px}
.g-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
@media(min-width:760px){.g-list{grid-template-columns:1fr 1fr;gap:10px 32px}}
.g-list a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.g-list a:hover{border-bottom-color:var(--gold)}
.g-also{margin-top:28px;font-size:16px;line-height:25px;color:var(--muted)}
.g-also a{color:var(--ink)}

.guides-index{padding-top:32px;padding-bottom:24px}
.g-cards{display:grid;gap:18px;margin-top:32px}
@media(min-width:760px){.g-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.g-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.g-card{display:flex;flex-direction:column;gap:12px;padding:26px 24px;background:var(--paper);
  border:1px solid var(--rule);color:var(--ink);text-decoration:none;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.g-card:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px rgba(61,44,0,.45)}
.g-card-h{font-family:"Fraunces",Georgia,serif;font-size:22px;line-height:28px}
.g-card-d{font-size:15px;line-height:23px;color:var(--muted)}
.g-card-go{margin-top:auto;padding-top:6px;font-size:14px;font-weight:600}
/* guide polish: the pair stays side by side on a phone, and questions breathe */
.g-fig.gpair{flex-wrap:nowrap;gap:14px}
.g-fig.gpair figure{flex:1 1 0;min-width:0;max-width:240px}
.g-fig.gpair .gbridge{width:22px}
.g-main > .hint{margin:12px 0 0;font-size:14px;line-height:20px;color:var(--muted)}
.g-body{margin-top:36px}
.g-body > h2:first-child{margin-top:0}
.g-faq .t-ask{margin-top:30px}
.g-faq .t-ask:first-child{margin-top:24px}
@media(min-width:1000px){.guide .also .rack{grid-template-columns:repeat(4,minmax(0,220px))}}

/* The review under a buyer's book: quiet, one card, stars you can tap. */
.review{max-width:560px;margin:56px auto 24px;padding:28px 24px 24px;background:var(--paper);
  border:1px solid var(--rule)}
.review .t-section{font-size:28px;line-height:34px}
.review-lead{margin-top:8px;color:var(--muted);font-size:16px;line-height:24px}
.review form{display:grid;gap:10px;margin-top:18px}
.review label{font-size:15px;line-height:21px;font-weight:600}
.review .opt{font-weight:400;color:var(--muted);font-size:13px;margin-left:6px}
.review textarea,.review input[type=text]{font:inherit;font-size:16px;line-height:24px;padding:10px 12px;
  border:1px solid var(--rule-strong);background:#fffdf8;color:var(--ink);border-radius:2px;width:100%}
.review textarea:focus,.review input[type=text]:focus{outline:2px solid var(--gold);outline-offset:1px}
.stars{border:0;padding:0;margin:0 0 6px;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.stars input{position:absolute;opacity:0;width:1px;height:1px}
.stars label{cursor:pointer;width:44px;height:44px;display:grid;place-items:center}
.stars svg{width:32px;height:32px;fill:none;stroke:var(--gold);stroke-width:1.5;
  transition:fill .15s var(--ease-out),transform .15s var(--ease-out)}
.stars input:checked ~ label svg,.stars label:hover svg,.stars label:hover ~ label svg{fill:var(--gold)}
.stars label:hover svg{transform:scale(1.08)}
.stars input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px}
.review-ok{display:flex;gap:10px;align-items:flex-start;font-weight:400 !important;color:var(--muted)}
.review-ok input{margin-top:3px;width:18px;height:18px;accent-color:var(--primary)}
.review .btn{justify-self:start;margin-top:6px}
.review-status{min-height:22px;font-size:15px;line-height:22px;color:var(--muted)}

/* Real reviews on the front page -- shown only once there are enough. */
.h-reviews{padding:72px 0 8px}
.rv-cards{display:grid;gap:18px;margin-top:28px}
@media(min-width:760px){.rv-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rv-card{margin:0;padding:22px 22px 20px;background:var(--paper);border:1px solid var(--rule);
  display:flex;flex-direction:column;gap:12px}
.rv-stars{margin:0;letter-spacing:2px;font-size:18px;color:var(--rule-strong)}
.rv-stars .on{color:var(--gold)}
.rv-card blockquote{margin:0;font-family:"Fraunces",Georgia,serif;font-size:19px;line-height:28px;color:var(--ink)}
.rv-card figcaption{margin-top:auto;font-size:14px;line-height:20px;color:var(--muted)}
.review{color:var(--ink)}
.review .t-section,.review label{color:var(--ink)}

/* Gift pages: why it suits the person, why each story, and ways to give it. */
.g-why{margin-top:56px;max-width:720px}
.g-why-p{margin-top:14px;font-size:19px;line-height:30px;color:var(--ink)}
@media(max-width:767px){.g-why-p{font-size:17px;line-height:27px}}
.g-picks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px;max-width:760px}
.g-picks li{padding-left:22px;position:relative;font-size:16px;line-height:25px;color:var(--muted)}
.g-picks li::before{content:"";position:absolute;left:2px;top:10px;width:8px;height:8px;border-radius:50%;
  background:var(--gold)}
.g-picks a{color:var(--ink);font-family:"Fraunces",Georgia,serif;font-size:17px;text-decoration:none;
  border-bottom:1px solid var(--rule-strong)}
.g-picks a:hover{border-bottom-color:var(--gold)}
.g-give{margin-top:56px;max-width:720px}
.g-give-l{list-style:none;padding:0;margin:18px 0 0;counter-reset:give;display:grid;gap:14px}
.g-give-l li{counter-increment:give;position:relative;padding-left:46px;font-size:17px;line-height:27px}
.g-give-l li::before{content:counter(give);position:absolute;left:0;top:-1px;width:30px;height:30px;
  border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;
  font-family:"Fraunces",Georgia,serif;font-size:15px}
.gift .asked .t-ask{margin-top:30px}
.gift .asked .t-ask:first-child{margin-top:0}

.gifts-intro,.cat-intro{max-width:720px;margin-top:14px;font-size:17px;line-height:27px;color:var(--muted)}
.g-sources{margin-top:44px;padding-top:18px;border-top:1px solid var(--rule)}
.g-sources ol{margin:10px 0 0;padding-left:20px;font-size:14px;line-height:21px;color:var(--muted)}
.g-sources li{margin:0 0 6px}
.g-sources a{color:var(--muted)}

.receipt .total.later{margin-top:6px;opacity:.85}
.receipt .total.later .amount{font-size:inherit}
#approveerr{display:none}
/* In season: the holiday gift pages, above the full list. */
.g-season{margin:28px 0 8px;padding:22px 24px;background:var(--paper);border:1px solid var(--rule)}
.g-season .t-section{font-size:26px;line-height:32px}
.g-season-p{margin-top:8px;font-size:16px;line-height:24px;color:var(--muted);max-width:620px}
.g-season .gchips{margin-top:14px}
.gifts-index .asked .t-ask{margin-top:30px}
.gifts-index .asked .t-ask:first-child{margin-top:0}
/* Phones: two gift cards per row. One per row made the page 12,700px tall
   once there were twenty-one gift pages. */
@media(max-width:599px){
  .gcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .gcard .t-book{font-size:12px;letter-spacing:.05em}
  .gcard-h{font-size:15px;line-height:20px}
}

/* ---- the gift --------------------------------------------------------- */
.giftopt{margin:24px 0 8px;padding:16px;border:1px solid var(--rule-strong);border-radius:var(--radius);
  background:var(--paper)}
.g-toggle{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:16px;line-height:22px;cursor:pointer}
.g-toggle input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--primary)}
.giftopt .g-fields .field:first-child{margin-top:16px}
.g-fields textarea{width:100%;padding:12px;border:1px solid var(--rule-strong);border-radius:var(--radius);
  background:var(--cream);color:var(--ink);font-family:inherit;font-size:16px;line-height:24px;resize:vertical}
.g-fields textarea:focus{border-color:var(--primary);outline:none}
.g-count{float:right;font-weight:400;color:var(--muted)}
.g-when{border:0;padding:0;margin-left:0;margin-right:0}
.g-when legend{font-weight:600;font-size:14px;line-height:21px;margin-bottom:8px;padding:0}
.g-radio{display:flex;gap:10px;align-items:center;font-weight:400;font-size:16px;margin:0 0 8px;cursor:pointer}
.g-radio input{width:20px;height:20px;margin:0;accent-color:var(--primary)}
.g-at{width:100%;min-height:52px;padding:0 12px;margin-top:4px;border:1px solid var(--rule-strong);
  border-radius:var(--radius);background:var(--cream);color:var(--ink);font-family:inherit;font-size:16px}
.giftpanel{margin-top:36px;padding-top:28px;border-top:1px solid var(--rule-strong)}
.g-h{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:24px;line-height:30px;margin:0 0 8px}
.g-status{margin:0 0 16px;font-size:16px;line-height:24px}
.g-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.g-actions [hidden]{display:none}
.g-card{margin-top:20px;font-size:15px;line-height:22px;color:var(--muted)}
.g-card a{color:var(--primary);font-weight:600}
.gift-note{max-width:560px;margin:0 auto 20px;padding:18px 22px;background:#faf6ee;color:#3d2c00;
  border:1px solid var(--rule-strong);border-left:3px solid var(--gold);border-radius:var(--radius);
  text-align:left}
.gift-note .gn-k{color:#7a6535!important;display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gift-note p{margin:8px 0 0;color:#3d2c00;font-family:Fraunces,Georgia,serif;font-style:italic;font-size:19px;
  line-height:28px;white-space:pre-line}

/* ---- gift pages: short top, one-frame transformation ---------------- */
.gtop{display:grid;gap:18px;margin:8px 0 40px}
.gh-words .t-page{margin:0}
.gh-words .t-lead{margin:10px 0 0;max-width:34ch}
.gh-go{display:flex;flex-direction:column;gap:10px;max-width:420px}
.gh-how{margin:0;font-size:15px;line-height:22px;color:var(--muted)}
.morph{margin:0;width:100%;max-width:420px}
.mf{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#fffdf8;
  box-shadow:0 22px 44px -26px rgba(61,44,0,.55)}
.mf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mw{position:absolute;inset:0;clip-path:inset(0 0 0 100%)}
.m1{animation:mfA 10s infinite}
.m2{animation:mfB 10s infinite}
.mpen{position:absolute;top:0;bottom:0;width:3px;left:100%;background:var(--gold);opacity:0;
  box-shadow:0 0 12px rgba(254,183,0,.8)}
.mpen.p1{animation:mfP1 10s infinite}.mpen.p2{animation:mfP2 10s infinite}
.morph figcaption{position:relative;height:30px;margin-top:10px;font-family:"Fraunces",Georgia,serif;
  font-style:italic;font-size:18px;color:var(--muted)}
.morph figcaption span{position:absolute;left:2px;top:2px;opacity:0}
.morph .c0{animation:mfC0 10s infinite}.morph .c1{animation:mfC1 10s infinite}.morph .c2{animation:mfC2 10s infinite}
@keyframes mfA{0%,14%{clip-path:inset(0 0 0 100%)}30%,96%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes mfB{0%,50%{clip-path:inset(0 0 0 100%)}66%,96%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes mfP1{0%,13%{left:100%;opacity:0}14%{left:100%;opacity:1}30%{left:0;opacity:1}31%,100%{left:0;opacity:0}}
@keyframes mfP2{0%,49%{left:100%;opacity:0}50%{left:100%;opacity:1}66%{left:0;opacity:1}67%,100%{left:0;opacity:0}}
@keyframes mfC0{0%,12%{opacity:1}16%,97%{opacity:0}100%{opacity:1}}
@keyframes mfC1{0%,26%{opacity:0}30%,48%{opacity:1}52%,100%{opacity:0}}
@keyframes mfC2{0%,62%{opacity:0}66%,94%{opacity:1}98%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .m1,.m2{animation:none;clip-path:inset(0 0 0 0)}.mpen{display:none}
  .morph .c0,.morph .c1{animation:none;opacity:0}.morph .c2{animation:none;opacity:1}
}
@media (min-width:860px){
  .gtop{grid-template-columns:minmax(0,1fr) minmax(0,420px);grid-template-areas:"words art" "go art";
    column-gap:56px;align-items:start}
  .gh-words{grid-area:words;align-self:end}.gh-go{grid-area:go;align-self:start}.morph{grid-area:art}
}
@media (max-width:859px){.morph{max-width:min(320px,82vw)}}

/* approval: the character big, the photo pinned to its corner like a snapshot */
#v-approve .portrait{position:relative;margin:24px 0 34px}
.portrait .pin{position:absolute;left:-8px;bottom:-22px;width:30%;max-width:132px;margin:0;background:#fff;
  padding:6px 6px 2px;border-radius:6px;transform:rotate(-5deg);box-shadow:0 12px 26px -12px rgba(61,44,0,.55)}
.portrait .pin img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 25%;
  border-radius:3px;animation:none;background:var(--linen)}
.portrait .pin figcaption{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:13px;
  color:var(--muted);text-align:center;padding:3px 0 2px}