/* acaciodomar.com — v0.1
   The book is drawn at a fixed design size (578 × 731 per page) and scaled to
   the window with --s, so the cover always looks the same at any size.
   Below about 900 × 640 (or when the scale would drop under 0.7), app.js adds
   .is-compact and the book is laid out at real size instead (see the end). */

/* Inter Tight (SIL Open Font License 1.1), variable, Latin subset from Google Fonts. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-tight-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 {
  --ink: #141414;
  --muted: #4a4a4a;
  --faint: #666;
  --accent: #FAA319;
  --paper-a: #fcfbf8;
  --paper-b: #f2f0eb;
  --ease-open: cubic-bezier(0.65, 0, 0.25, 1);
  --ease-flip: cubic-bezier(0.6, 0, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #d6ccbf;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
p { margin: 0; }
.defs { position: absolute; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Stage ---------- */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  --s: var(--s-closed, 1);
  --shift: 0px;
}
.stage.is-open { --s: var(--s-open, 1); --shift: 289px; }

.backdrop { position: absolute; inset: -24px; transition: opacity 1200ms ease; }
.backdrop video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 74% 40%;
  /* Blur, brightness and saturation are baked into the file (tools/encode-video.swift). */
}
.veil {
  position: absolute; inset: 0;
  background: radial-gradient(70% 85% at 48% 45%, rgba(255,255,255,0.46), rgba(255,255,255,0.10));
}
.daylight {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1200ms ease;
  background: radial-gradient(1100px 700px at 50% 45%, #ffffff 0%, #f1f1ef 70%, #e9e9e6 100%);
}
.is-unlocked .backdrop { opacity: 0; }
.is-unlocked .daylight { opacity: 1; }

/* ---------- Book ---------- */

.book-group {
  position: absolute;
  left: 50%; top: 50%;
  width: 584px; height: 816px;
  transform: translate(-50%, -50%) scale(var(--s)) translateX(var(--shift));
}
/* Only animate once the first layout has run, so the book doesn't grow in on load. */
.is-ready .book-group { transition: transform 1300ms var(--ease-open), opacity 600ms ease; }

.shadow { position: absolute; inset: 0; pointer-events: none; transition: opacity 1000ms ease; }
.shadow span { position: absolute; border-radius: 50%; }
.shadow-closed .contact { left: 20px; top: 706px; width: 560px; height: 56px; background: radial-gradient(closest-side, rgba(28,22,16,0.42), rgba(28,22,16,0)); filter: blur(14px); }
.shadow-closed .ambient { left: -50px; top: 634px; width: 700px; height: 170px; background: radial-gradient(closest-side, rgba(28,22,16,0.16), rgba(28,22,16,0)); filter: blur(30px); }
.shadow-open { opacity: 0; }
.shadow-open .contact { left: -550px; top: 706px; width: 1100px; height: 60px; background: radial-gradient(closest-side, rgba(28,22,16,0.36), rgba(28,22,16,0)); filter: blur(16px); }
.shadow-open .ambient { left: -640px; top: 624px; width: 1280px; height: 190px; background: radial-gradient(closest-side, rgba(28,22,16,0.14), rgba(28,22,16,0)); filter: blur(34px); }
.is-open .shadow-closed { opacity: 0; }
.is-open .shadow-open { opacity: 1; }

.book {
  position: absolute; left: 0; top: 0;
  width: 578px; height: 731px;
  perspective: 2600px;
  perspective-origin: 0% 50%;
  transform-style: preserve-3d;
}

.edge { position: absolute; }
.edge-right {
  left: 576px; top: 5px; width: 8px; height: 729px;
  border-radius: 0 6px 6px 0;
  background: repeating-linear-gradient(90deg, #f6f4ef 0 1px, #dedbd4 1px 2px);
  box-shadow: 2px 1px 3px rgba(28,22,16,0.12);
}
.edge-bottom {
  left: 5px; top: 729px; width: 577px; height: 7px;
  border-radius: 0 0 6px 2px;
  background: repeating-linear-gradient(180deg, #f6f4ef 0 1px, #dedbd4 1px 2px);
  box-shadow: 1px 2px 3px rgba(28,22,16,0.14);
}

.leaf {
  position: absolute; inset: 0;
  transform-origin: 0% 50%;
  transform-style: preserve-3d;
}
.leaf-pw { transform: rotateY(0deg) translateZ(1px); transition: transform 1100ms var(--ease-flip); }
.is-unlocked .leaf-pw { transform: rotateY(-180deg) translateZ(1px); }
.leaf-cover { transform: rotateY(0deg) translateZ(2px); transition: transform 1300ms var(--ease-open), opacity 400ms ease 900ms; }
.is-open .leaf-cover { transform: rotateY(-180deg) translateZ(2px); }

.face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.face-back { transform: rotateY(180deg); }

/* Safari doesn't hide the backs of a face's own layers (canvas, blended SVG),
   so each face is also swapped by visibility at the moment its leaf is
   edge-on: 601ms into the cover's ease, 509ms into the page flip. */
.leaf-cover .cover { transition: visibility 0s linear 600ms; }
.is-open .leaf-cover .cover { visibility: hidden; }
.leaf-cover .endpaper { visibility: hidden; transition: visibility 0s linear 600ms; }
.is-open .leaf-cover .endpaper { visibility: visible; }
.leaf-pw .pw-page { transition: visibility 0s linear 510ms; }
.is-unlocked .leaf-pw .pw-page { visibility: hidden; }
.leaf-pw .page-left { visibility: hidden; transition: visibility 0s linear 510ms; }
.is-unlocked .leaf-pw .page-left { visibility: visible; }

/* ---------- Pages ---------- */

.page {
  position: absolute; inset: 0;
  background: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
}
.page-right, .pw-page { border-radius: 0 6px 6px 0; padding: 56px 56px 48px 68px; }
.page-left { border-radius: 6px 0 0 6px; padding: 56px 68px 48px 56px; }
.page-right::before, .pw-page::before, .page-left::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 48px; pointer-events: none;
}
.page-right::before, .pw-page::before { left: 0; background: linear-gradient(90deg, rgba(0,0,0,0.07), rgba(0,0,0,0)); }
.page-left::before { right: 0; background: linear-gradient(270deg, rgba(0,0,0,0.07), rgba(0,0,0,0)); }

.lift-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(28,22,16,0.22), rgba(28,22,16,0) 70%);
  transition: opacity 1300ms ease;
}
.is-open .lift-shade { opacity: 0; }

/* ---------- Cover ---------- */

.cover {
  overflow: hidden;
  border-radius: 3px 7px 7px 3px;
  background: linear-gradient(135deg, var(--paper-a) 0%, var(--paper-b) 100%);
  box-shadow: 0 0 0 1px rgba(28,22,16,0.04), 0 2px 2px rgba(28,22,16,0.06), 0 8px 14px -2px rgba(28,22,16,0.08), 0 26px 44px -10px rgba(28,22,16,0.16), 0 64px 110px -24px rgba(28,22,16,0.24);
  padding: 40px 44px 44px 64px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.cover::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 28px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, transparent 26px, rgba(0,0,0,0.08) 26px 27px, rgba(255,255,255,0.8) 27px 28px),
    linear-gradient(90deg, rgba(0,0,0,0.09), rgba(0,0,0,0.02) 70%, rgba(0,0,0,0));
}
.linen {
  position: absolute; inset: 0; width: 100%; height: 100%;
  mix-blend-mode: multiply; opacity: 0.6; pointer-events: none;
}
.dashes {
  position: absolute; left: 0; top: 0; width: 578px; height: 731px;
  mix-blend-mode: multiply; pointer-events: none;
}
.masthead {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 16px; font-weight: 500; letter-spacing: 0.01em;
}
.cover-foot { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 18px; }
.title {
  margin: 0 0 0 -6px;
  font-size: 112px; font-weight: 500; line-height: 0.84; letter-spacing: -0.035em;
}
.rule { height: 1px; background: var(--ink); }
.caption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 17px; }
.caption .strong { font-weight: 500; }
.caption .muted { color: var(--muted); }
.gloss {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(118deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 70%, rgba(28,22,16,0.04) 100%);
}

.endpaper {
  overflow: hidden;
  border-radius: 7px 3px 3px 7px;
  background: linear-gradient(225deg, #fbfaf6 0%, #f0eee8 100%);
  padding: 56px 64px 48px 56px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.endpaper::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40px;
  background: linear-gradient(270deg, rgba(0,0,0,0.08), rgba(0,0,0,0));
}
.endpaper-name, .dedication { position: relative; font-size: 16px; }
.endpaper-name { font-weight: 500; color: #555; }
.dedication { max-width: 380px; line-height: 1.6; color: #555; }

/* ---------- Password ---------- */

.pw-page { gap: 32px; }
.positioning { position: relative; max-width: 420px; font-size: 20px; line-height: 1.45; color: var(--ink); }
.pw-form { position: relative; display: flex; flex-direction: column; gap: 8px; }
.pw-form label { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
.field {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1.5px solid var(--ink);
  transition: box-shadow 150ms ease;
}
.field:focus-within { box-shadow: 0 1px 0 0 var(--ink); }
.field input {
  flex: 1; min-width: 0; width: 100%;
  border: 0; border-radius: 0; background: transparent;
  padding: 10px 0;
  font: inherit; font-size: 22px; letter-spacing: 0.12em; color: var(--ink);
}
.field input:focus, .field input:focus-visible { outline: 2px solid transparent; outline-offset: 4px; } /* shows in forced colors */
.go {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  padding: 0; border: 0; background: transparent;
  color: var(--ink); cursor: pointer;
  transition: color 200ms ease, opacity 200ms ease;
}
/* Grey until something is typed, but never disabled: autofill and Enter must always work. */
.is-empty .go { color: #949494; }
.field:has(input:autofill) .go { color: var(--ink); }
.go:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 2px; border-radius: 999px; }
.is-busy .go { opacity: 0.4; }
.hint { font-size: 16px; line-height: 1.45; color: var(--muted); }
.hint a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hint a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.error { min-height: 24px; font-size: 16px; color: #8a3200; }
.error:empty { min-height: 0; }
.contact-row { position: relative; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.contact-row a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 18px; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.contact-row a:hover { text-decoration-thickness: 2px; }
.contact-row a:focus-visible, .noscript a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }

/* ---------- Inside pages (content arrives after unlock) ---------- */

.running-head { font-size: 16px; font-weight: 500; color: #555; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.inside-title { margin: 0; font-size: 72px; font-weight: 500; line-height: 0.92; letter-spacing: -0.045em; }
.inside-title:focus { outline: none; }
.lede { max-width: 400px; font-size: 18px; line-height: 1.5; color: var(--muted); }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.links li { border-top: 1px solid #e3e3e3; }
.links li:last-child { border-bottom: 1px solid #e3e3e3; }
.links a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 20px 0;
  font-size: 28px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.links a span { font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--faint); }
.links a:hover, .links a:focus-visible { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.location { font-size: 16px; line-height: 1.45; color: var(--muted); }
.folio { font-size: 16px; color: var(--faint); }
#inside-right .folio { align-self: flex-end; }

/* ---------- Controls ---------- */

.book-hit {
  position: absolute; left: 0; top: 0; width: 584px; height: 737px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: 3px 7px 7px 3px;
}
.book-hit:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
.is-open .book-hit { display: none; }

.open-pill {
  position: absolute; left: 50%; top: 760px;
  height: 44px; padding: 0 26px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.75);
  background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.28));
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(0,0,0,0.05), 0 12px 32px rgba(20,20,20,0.16), 0 2px 6px rgba(20,20,20,0.08);
  font: inherit; font-size: 16px; font-weight: 500; color: #111;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.is-idle .open-pill { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.is-open .open-pill { display: none; }

/* ---------- Phones: one page at a time ---------- */

.inside-mobile {
  position: fixed; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff;
  padding: 40px 24px 56px;
  display: flex; flex-direction: column; gap: 56px;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}
.inside-mobile section { display: flex; flex-direction: column; gap: 28px; }
.inside-mobile .inside-title { font-size: 48px; }
.inside-mobile .links a { font-size: 22px; }
.is-compact.is-unlocked .inside-mobile { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 600ms ease; }
.is-compact.is-unlocked .book-group { opacity: 0; pointer-events: none; visibility: hidden; }

.noscript {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.85);
  font-size: 16px;
}
.noscript a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; }
}

/* ---------- Compact: real size below ~900 × 640 ----------
   No scaling and no 3D. The cover and the password page share one grid cell
   and crossfade, the stage scrolls when the page is taller than the window,
   and after unlock the single-column .inside-mobile takes over. */

.is-compact {
  /* The cover keeps its proportions and shrinks to fit the window's height, down to 300px wide. */
  --cover-w: min(100%, max(300px, calc((100svh - 136px) * 578 / 731)));
  overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; align-items: center; padding: 24px 16px 88px; }
.is-compact .backdrop, .is-compact .daylight { position: fixed; }
.is-compact .book-group {
  position: relative; left: auto; top: auto; flex: none;
  width: 100%; max-width: 578px; height: auto; margin: auto 0;
  transform: none;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.is-compact .book, .is-compact .book-hit { grid-area: 1 / 1; }
.is-compact .shadow, .is-compact .edge, .is-compact .lift-shade,
.is-compact .face-back, .is-compact #inside-right { display: none; }
.is-compact .book { position: relative; width: 100%; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); perspective: none; transform-style: flat; }
.is-compact .leaf { position: relative; inset: auto; grid-area: 1 / 1; transform: none; transform-style: flat; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.is-compact .face { position: relative; inset: auto; grid-area: 1 / 1; }
.is-compact .leaf-cover { width: var(--cover-w); justify-self: center; align-self: center; transition: none; }
.is-compact.is-ready .leaf-cover { transition: opacity 500ms ease, visibility 0s linear 500ms; }
.is-compact.is-open .leaf-cover { opacity: 0; visibility: hidden; }
.is-compact .leaf-cover .cover, .is-compact.is-open .leaf-cover .cover { visibility: inherit; transition: none; }

.is-compact .cover {
  container-type: inline-size;
  aspect-ratio: 578 / 731;
  padding: 24px 24px 28px 44px;
}
.is-compact .linen, .is-compact .dashes { width: 100%; height: 100%; }
.is-compact .title { margin-left: -3px; font-size: min(112px, calc(100cqi / 3.6)); }
.is-compact .caption { font-size: 16px; flex-wrap: wrap; }
.is-compact .gloss { border-radius: inherit; }

.is-compact .pw-page {
  min-height: 100%;
  padding: 32px 24px 28px 32px;
  border-radius: 6px;
  box-shadow: 0 2px 2px rgba(28,22,16,0.06), 0 26px 44px -10px rgba(28,22,16,0.16);
  visibility: hidden; opacity: 0;
  transition: none;
}
.is-compact.is-open .pw-page { visibility: visible; opacity: 1; }
.is-compact.is-ready.is-open .pw-page { transition: opacity 500ms ease; }
.is-compact .pw-page::before { display: none; }
.is-compact .positioning { font-size: 18px; }
.is-compact .field input { font-size: 20px; }

.is-compact .book-hit { position: relative; left: auto; top: auto; width: var(--cover-w); height: auto; aspect-ratio: 578 / 731; justify-self: center; align-self: center; }
.is-compact .open-pill {
  position: relative; left: auto; top: auto; display: block;
  grid-area: 2 / 1; justify-self: center;
  margin-top: 24px;
  opacity: 1; pointer-events: auto; transform: none;
}
.is-compact.is-open .open-pill { display: none; }
/* Until app.js has decided, don't flash the full-size book on a small screen. */
@media (max-width: 899px), (max-height: 639px) {
  .stage:not(.is-ready) .book-group { visibility: hidden; }
}

/* ---------- 404 ---------- */

body.lost { overflow: auto; background: radial-gradient(1100px 700px at 50% 45%, #ffffff 0%, #f1f1ef 70%, #e9e9e6 100%); }
.lost-page {
  min-height: 100vh; max-width: 640px; margin: 0 auto;
  padding: 56px 24px 48px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
}
.back-link { font-size: 18px; font-weight: 500; color: var(--ink); text-underline-offset: 6px; text-decoration-thickness: 1px; }