/* The website as a book: the cover that opens once a visit on the home page, the logo's gold ribbon
   that hangs from the header, and the contents page it opens. book-layer.js builds the ribbon and
   contents and adds .has-ribbon; without script none of this shows. Colours are the Hedgerow palette
   in styles.css, written out where a shade of it is needed.
   Design: docs/design/specs/2026-10-16-website-book-design.md */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --rib-right: clamp(16px, 5vw, 88px);
  --rib-w: 52px;
  --nav-h: 72px;
}

/* The ribbon replaces the header's links and menu, and the header's last button keeps clear of it. */
.has-ribbon :is(.nav-links, .nav-menu) { display: none !important; }
.has-ribbon .nav-signin { margin-left: auto; }
.has-ribbon .nav-row > :last-child { margin-right: max(0px, calc(var(--rib-right) + var(--rib-w) + 12px - var(--gutter))); }
/* On a phone Start free is hidden (styles.css), so Sign in is the last thing in the bar. */
@media (max-width: 767px) {
  .has-ribbon .nav-signin { margin-right: max(0px, calc(var(--rib-right) + var(--rib-w) + 12px - var(--gutter))); }
}

/* ---------- The cover ---------- */
/* The cover swings out towards the reader, so the eye sits further off than the page is wide. */
.cover-shade { position: fixed; inset: 0; z-index: 60; perspective: calc(100vw + 1200px); perspective-origin: 0% 50%; }
html:not(.book-closed):not(.book-opening) .cover-shade { display: none; }
.cover {
  position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d;
  transition: transform 1.3s var(--ease-in-out);
}
.cover-front, .cover-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cover-front {
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 90% at 60% 40%, #46663a, #3d5a32 55%, #33502b);
  box-shadow: inset clamp(28px, 6vw, 84px) 0 0 #22301f, inset calc(clamp(28px, 6vw, 84px) + 2px) 0 0 rgb(255 255 255 / 0.06);
}
/* The cover darkens as it turns edge-on to the light. */
.cover-front::after { content: ''; position: absolute; inset: 0; background: #0b1209; opacity: 0; transition: opacity 1.3s var(--ease-in-out); }
.cover-wee {
  font: italic 400 clamp(110px, 24vw, 300px)/1 'Fraunces', Georgia, serif; color: #f4efe3;
  transform: translateX(4%) rotate(-22deg); letter-spacing: -0.02em; user-select: none;
}
.cover-back { transform: rotateY(180deg); background: linear-gradient(90deg, #d9d1bb, #efe8d6 40%); }
/* The shadow the cover throws on the first page; it lifts as the cover opens. */
.cover-shadow { position: fixed; inset: 0; z-index: 59; pointer-events: none; background: linear-gradient(90deg, rgb(11 18 9 / 0.85), rgb(11 18 9 / 0.55)); transition: opacity 1.3s var(--ease-in-out); }
html:not(.book-closed):not(.book-opening) .cover-shadow { display: none; }

.book-opening .cover { transform: rotateY(-96deg); }
.book-opening .cover-front::after { opacity: 0.55; }
.book-opening .cover-shadow { opacity: 0; }
.book-done .cover-shade { opacity: 0; transition: opacity 0.2s ease-out; }

/* The cover takes the place of the hero's own opening. The headline rises as the cover clears. */
.hero-hi { --n: 0; } .hero .say { --n: 1; } .hero h1 { --n: 2; } .hero .actions { --n: 6; }
.book-used .hero :is(.hero-hi, .say, h1, .actions) { transition: opacity 0.6s ease-out, transform 0.6s var(--ease-out); transition-delay: calc(var(--n) * 70ms); }
.book-closed .hero :is(.hero-hi, .say, h1, .actions) { opacity: 0; transform: translateY(18px); }
/* The rest of the site's motion, such as the photograph that opens as you scroll, is left alone. Francie
   still acts in the opening, once the cover has cleared. */
.book-closed .hero-art * { animation-play-state: paused !important; }
.book-used .hero :not(.hero-art, .hero-art *, .caret), .book-used .hero > img, .book-used .nav-row, .book-used .peek-phone, .book-used .facts, .book-used .hero > .place { animation: none !important; }

/* ---------- The ribbon ---------- */
.ribbon-hang { position: fixed; top: 0; right: var(--rib-right); z-index: 61; filter: drop-shadow(0 6px 6px rgb(11 18 9 / 0.28)); pointer-events: none; }
.ribbon {
  pointer-events: auto; position: relative; display: block; width: var(--rib-w); height: calc(var(--nav-h) + 168px);
  margin-top: calc(-1 * var(--nav-h) - 40px); padding: 0; border: 0; cursor: pointer; color: #22301f;
  background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #c4952a, #e2b33c 28%, #f0d283 50%, #e2b33c 72%, #c4952a);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 20px), 0 100%);
  transform: translateY(var(--drop, var(--nav-h))) translateY(var(--pull, 0px));
  transition: transform 0.6s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
/* On the closed cover it lies where it is on the logo: from the top edge, nothing named. */
.book-closed .ribbon { --drop: 0px; }
.book-closed .ribbon-label { opacity: 0; }
.ribbon-label {
  position: absolute; left: 0; right: 0; bottom: 34px; display: grid; place-items: center;
  writing-mode: vertical-rl; font: 700 14px/1 'Bricolage Grotesque', system-ui, sans-serif; letter-spacing: 0.03em;
  white-space: nowrap; transition: opacity 0.3s ease-out 0.4s;
}
.ribbon:focus-visible { outline: none; }
.ribbon:focus-visible .ribbon-label { outline: 2px solid #22301f; outline-offset: 4px; border-radius: 4px; }
/* A small tug under the finger, and further when the contents are open. */
.ribbon:active { --pull: 10px; transition-duration: 0.12s; }
@media (hover: hover) and (pointer: fine) {
  .ribbon:hover { --pull: 8px; transition-duration: 0.2s; }
}
.ribbon[aria-expanded='true'] { --pull: 22px; }

/* ---------- The contents page ---------- */
.contents-shade { position: fixed; inset: 0; z-index: 40; background: rgb(11 18 9 / 0.32); opacity: 0; visibility: hidden; transition: opacity 0.2s ease-out, visibility 0s 0.2s; }
.contents {
  position: fixed; z-index: 41; top: calc(var(--nav-h) + 12px); right: calc(var(--rib-right) - 18px);
  width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - var(--nav-h) - 32px); overflow: auto;
  padding: 28px 92px 24px 32px; border-radius: 6px 6px 18px 18px;
  background: #f4efe3; color: #1e231b;
  box-shadow: inset 0 1px 0 #fff8, 0 1px 0 #dcd3be, 0 3px 0 #ebe4d2, 0 4px 0 #dcd3be, 0 24px 48px -16px rgb(11 18 9 / 0.5);
  transform-origin: calc(100% - 44px) 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.96);
  transition: opacity 0.18s ease-out, transform 0.18s var(--ease-out), visibility 0s 0.18s;
}
.contents-open .contents-shade { opacity: 1; visibility: visible; transition: opacity 0.2s ease-out; }
.contents-open .contents { opacity: 1; visibility: visible; transform: none; transition: opacity 0.24s ease-out, transform 0.24s var(--ease-out); }
/* While open, the ribbon lies across the corner of the page, as a bookmark would. */
.contents-open .ribbon-hang { z-index: 42; }

.contents h2 { margin: 0 0 12px; font: 600 28px/1.1 'Fraunces', Georgia, serif; }
.contents ol { list-style: none; margin: 0; padding: 0; }
.contents li { opacity: 0; transform: translateY(4px); transition: opacity 0.12s ease-out, transform 0.12s ease-out; }
.contents-open .contents li { opacity: 1; transform: none; transition: opacity 0.24s ease-out, transform 0.24s var(--ease-out); transition-delay: calc(60ms + var(--i) * 30ms); }
.contents a {
  position: relative; display: flex; align-items: baseline; gap: 10px; min-height: 48px; padding: 10px 0; color: inherit; text-decoration: none;
  font: 500 19px/1.2 'Fraunces', Georgia, serif;
}
.contents a::after { content: ''; order: 1; flex: 1; transform: translateY(-4px); border-bottom: 2px dotted #cfc5ad; }
.contents a b { order: 2; font: italic 400 16px 'Fraunces', Georgia, serif; color: #6b6a63; font-variant-numeric: oldstyle-nums; }
.contents a[aria-current] { color: #3d5a32; font-weight: 650; }
.contents a[aria-current]::before { content: ''; position: absolute; left: -18px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #e2b33c; }
@media (hover: hover) and (pointer: fine) { .contents a:hover { color: #3d5a32; } }
.contents a:focus-visible { outline: 2px solid #3d5a32; outline-offset: 2px; border-radius: 4px; }
.contents hr { margin: 14px 0 6px; border: 0; border-top: 1px solid #dcd3be; }
.contents .also a { font: 500 16px/1.2 'Bricolage Grotesque', system-ui, sans-serif; }
.contents .also a::after { display: none; }

@media (max-width: 640px) {
  .contents { left: 16px; right: 16px; width: auto; padding-right: 80px; }
}

/* ---------- Page numbers at the foot of each part of the home page ---------- */
/* Each sits on a small paper tab, so it reads on photographs and on paper alike. */
.folio {
  position: absolute; right: var(--gutter, 24px); bottom: 14px; z-index: 3; padding: 1px 9px; border-radius: 999px;
  background: rgb(244 239 227 / 0.92); color: #1e231b; font: italic 14px 'Fraunces', Georgia, serif; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ribbon, .contents, .contents li, .contents-shade { transition-property: opacity, visibility; transition-duration: 0.15s; }
  .contents, .contents li { transform: none; }
}

/* The photograph's place name moves clear of the ribbon. */
.has-ribbon .hero > .place { right: calc(var(--rib-right) + var(--rib-w) + 12px); }