/* The Last Warren · the diary site. Plain CSS, no build step.
   Three thirds: ① the book (story)  ② what we decided  ③ how it works.
   Handwriting is in-world; Alegreya / Alegreya SC is "typeset", for anything the system says.
   Three hands = three generations: Sorrel I (Reenie Beanie, graphite), II (Nanum Pen, brown), III (La Belle Aurore, blue-black). */

:root {
  --desk: #1f1109;
  --ink: #2a211a;        /* Sorrel I, graphite */
  --graphite: #5c4e3f;   /* margin notes, footnotes */
  --ink2: #5a2e14;       /* Sorrel II, brown */
  --ink3: #2b3a52;       /* Sorrel III, blue-black */
  --red: #9e3a2c;        /* the night's red: found, caught, costs */
  --cream: #e3d6bc;      /* type on the desk */
  --mute: #9b8a70;
  --h1: 'Reenie Beanie', cursive;
  --h2: 'Nanum Pen Script', cursive;
  --h3: 'La Belle Aurore', cursive;
  --ts: Alegreya, Georgia, serif;
  --sc: 'Alegreya SC', Alegreya, serif;
  --mono: 'Courier Prime', monospace;
  --pr: url(assets/page-right.jpg);   /* exact crops of the notebook photo's two pages */
  --pl: url(assets/page-left.jpg);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--desk); color: var(--cream); }
body { font-family: var(--ts); min-width: 1280px; }
a { color: #d2bb86; text-decoration: none; }
a:hover { color: #fff; }
input, button { font: inherit; }
:focus-visible { outline: 2px solid #d2bb86; outline-offset: 3px; }

/* ── the desk ─────────────────────────────────────────────────────────── */
.desk {
  position: relative; min-height: 100vh;
  background: var(--desk);
  background-image:
    repeating-linear-gradient(93deg, rgba(255,255,255,.015) 0 3px, transparent 3px 12px),
    repeating-linear-gradient(91deg, rgba(0,0,0,.18) 0 1px, transparent 1px 41px),
    linear-gradient(180deg, #2a170c, #1f1109 55%, #190d07);
}
.lamp {  /* warm lamplight from the top-left, with a slow flicker */
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 640px at 30% -8%, rgba(255,196,120,.16), transparent 68%);
  animation: lamp 9s ease-in-out infinite;
}
@keyframes lamp { 0%,100% { opacity: 1 } 42% { opacity: .93 } 47% { opacity: .98 } 71% { opacity: .9 } }
.wrap { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* ── header ───────────────────────────────────────────────────────────── */
.hdr { display: flex; align-items: baseline; gap: 26px; padding-top: 22px; font: 500 12px var(--sc); letter-spacing: .16em; color: var(--mute); }
.hdr .brand { color: var(--cream); font-size: 14px; }
.hdr nav { margin-left: auto; display: flex; gap: 20px; }
.hdr nav a { color: var(--mute); }
.hdr nav a:hover, .hdr nav a.studio { color: var(--cream); }
.tag { font-size: 10.5px; color: #d2bb86; border: 1px solid rgba(210,187,134,.5); padding: 3px 8px; }

/* ── ① the book ───────────────────────────────────────────────────────── */
.book {
  position: relative; width: 1280px; height: 685px; margin: 40px auto 0;
  perspective: 2600px;
  background: url(assets/notebook.jpg) center / 100% 100% no-repeat;
}
.book .vignette { position: absolute; inset: 0; pointer-events: none; z-index: 40; box-shadow: inset 0 0 70px 50px var(--desk); }

/* page geometry: the photo is 1715×917 shown at 1280 wide (×0.7464).
   spine x = 860 → 642px · page crop 640×790 at y 60 → 478×590 at top 45px.
   right page = [642, 1120] · left page = [164, 642]  (the crops are exactly these rectangles) */
.page { position: absolute; top: 45px; width: 478px; height: 590px; overflow: hidden; color: var(--ink); }
.page.left  { left: 164px; padding: 40px 36px 36px 54px; }   /* red margin line is 38px in on the left page */
.page.right { left: 642px; padding: 40px 40px 36px 78px; }   /* and 61px in on the right page */
.page .no { position: absolute; bottom: 20px; font: 500 11px var(--sc); color: var(--graphite); }
.page.right .no { right: 40px; }
.page.left .no { left: 40px; }

/* a sheet is a right page that turns: front = odd page, back = the next even page */
.sheet {
  position: absolute; left: 642px; top: 45px; width: 478px; height: 590px;
  transform-origin: 0 50%; transform-style: preserve-3d;
  transition: transform .95s cubic-bezier(.45,.05,.2,1);
  cursor: pointer;
}
.sheet.flipped { transform: rotateY(-180deg); }
.sheet .face { position: absolute; inset: 0; left: 0; top: 0; backface-visibility: hidden; }
.sheet .front { background: var(--pr) center / 100% 100%; box-shadow: inset 18px 0 24px -18px rgba(0,0,0,.35); }
.sheet .back  { transform: rotateY(180deg); background: var(--pl) center / 100% 100%; box-shadow: inset -18px 0 24px -18px rgba(0,0,0,.35); }
/* z order: unflipped sheets stack on the right, first on top; flipped ones stack on the left, last on top; the moving one is above all (set in JS) */

/* hands */
.hand  { font-family: var(--h1); color: var(--ink); }
.hand2 { font-family: var(--h2); color: var(--ink2); }
.hand3 { font-family: var(--h3); color: var(--ink3); }
.title  { font: 400 44px/1 var(--h1); }
.entry  { font: 400 27px/1.35 var(--h1); max-width: 330px; }
.entry + .entry { margin-top: 22px; }
.entry.big { font-size: 30px; line-height: 1.33; margin-top: 50px; max-width: none; }
.entry.h2 { font-family: var(--h2); color: var(--ink2); font-size: 22px; max-width: 320px; }
.entry.h3 { font-family: var(--h3); color: var(--ink3); font-size: 25px; line-height: 1.4; }
.caption { font: 400 26px/1.3 var(--h1); margin-top: 24px; max-width: 340px; }
.small-hand { font: 400 22px/1 var(--h1); color: var(--graphite); }
.struck { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--graphite); }
.alone { font: 400 44px/1.1 var(--h2); color: var(--ink2); margin-top: 150px; text-align: center; transform: rotate(-1.5deg); }

/* the night's own sentence, copied in: typeset, italic */
.sentence { font: italic 400 15px/1.45 var(--ts); margin: 8px 0 0; max-width: 330px; text-wrap: pretty; }
.footnote { font: italic 400 13px/1.45 var(--ts); color: var(--graphite); margin: 12px 0 0; max-width: 330px; text-wrap: pretty; }

/* margin notes */
.marg { position: absolute; width: 48px; font: 400 15px/1.5 var(--h1); color: var(--graphite); display: flex; flex-direction: column; gap: 16px; }
.page.right .marg, .front .marg { left: 14px; top: 120px; text-align: right; align-items: flex-end; }
.back .marg { right: 16px; top: 140px; width: 60px; text-align: left; }
.marg .red { color: var(--red); }
.marg .decision { color: var(--ink); text-decoration: underline; }
.tally { display: block; }

/* taped-in maps */
.map { position: relative; margin: 14px 0 0; width: 352px; height: 226px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.map.small { width: 252px; height: 162px; margin-top: 18px; }
.map .tape { position: absolute; top: -9px; width: 62px; height: 20px; background: rgba(236,219,160,.6); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.map .tape.l { left: -12px; transform: rotate(-8deg); }
.map .tape.r { right: -12px; transform: rotate(7deg); }
.smudge { position: absolute; right: 44px; bottom: 66px; width: 96px; height: 62px; border-radius: 50%; filter: blur(5px); transform: rotate(-20deg);
  background: radial-gradient(closest-side, rgba(50,35,20,.3), rgba(50,35,20,0)); }

/* last page */
.closing { font: 400 20px/1.6 var(--ts); margin: 26px 0 0; max-width: 20em; }
.closing-hand { font: 400 38px/1.2 var(--h3); color: var(--ink3); margin-top: 20px; }
.invite { font: italic 400 18px/1.5 var(--ts); margin: 56px 0 0; max-width: 20em; text-wrap: pretty; }
.btns { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.btn { font: 500 12px var(--sc); letter-spacing: .14em; padding: 12px 18px; background: var(--ink); color: #e9dcc2; border: 0; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 11px 18px; }
.btn:hover { background: #1a140f; color: #fff; }
.btn.ghost:hover { background: rgba(42,33,26,.08); color: var(--ink); }

/* turning controls */
.turn { width: 1120px; margin: 14px auto 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; font: 500 12.5px var(--sc); letter-spacing: .12em; color: var(--mute); }
.turn button { background: none; border: 0; color: var(--cream); cursor: pointer; padding: 6px 0; }
.turn button:disabled { opacity: .3; cursor: default; }
.turn .prev { justify-self: start; } .turn .next { justify-self: end; }
.dots { display: flex; gap: 9px; align-items: center; }
.dots button { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--cream); padding: 0; background: transparent; }
.dots button[aria-current="true"] { background: var(--cream); }
.hint { text-align: center; font: italic 400 14px var(--ts); color: var(--mute); margin-top: 6px; }

/* ── section heads on the desk ────────────────────────────────────────── */
.sec { padding-top: 110px; }
.sec-head { display: flex; align-items: baseline; gap: 22px; }
.sec-head .h { font: 400 52px/1 var(--h1); color: var(--cream); }
.sec-head .k { font: 500 12px var(--sc); letter-spacing: .16em; color: var(--mute); }

/* ── ② what we decided ────────────────────────────────────────────────── */
.torn3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px; margin-top: 30px; align-items: start; }
.torn {  /* a page torn from the book: same paper, ragged top */
  position: relative; background: var(--pl) center / cover; color: var(--ink);
  padding: 34px 28px 24px 56px; box-shadow: 0 14px 30px rgba(0,0,0,.45);
}
.torn.a { clip-path: polygon(0 14px,4% 6px,9% 15px,14% 4px,20% 12px,26% 3px,31% 11px,37% 5px,43% 13px,49% 2px,55% 10px,61% 4px,67% 12px,73% 3px,79% 9px,85% 2px,91% 11px,96% 5px,100% 12px,100% 100%,0 100%); transform: rotate(-.8deg); }
.torn.b { clip-path: polygon(0 8px,5% 14px,10% 3px,16% 12px,22% 5px,28% 13px,34% 2px,40% 10px,46% 4px,52% 12px,58% 3px,64% 11px,70% 5px,76% 13px,82% 3px,88% 10px,94% 4px,100% 9px,100% 100%,0 100%); transform: rotate(.5deg); margin-top: 14px; }
.torn.c { clip-path: polygon(0 11px,6% 3px,12% 13px,18% 5px,24% 12px,30% 2px,36% 10px,42% 4px,48% 14px,54% 3px,60% 9px,66% 5px,72% 13px,78% 2px,84% 11px,90% 4px,96% 12px,100% 6px,100% 100%,0 100%); transform: rotate(-.4deg); margin-top: 4px; }
.torn .side { position: absolute; left: 8px; top: 60px; width: 40px; font: 400 14px/1.4 var(--h1); color: var(--graphite); text-align: right; }
.torn .verb { font: 400 40px/1 var(--h1); }
.torn .line { font: 400 25px/1.35 var(--h1); margin-top: 18px; }
.torn .line + .line { margin-top: 14px; }
.torn .line.so { text-decoration: underline; text-decoration-thickness: 1.5px; }
.torn .line.red { color: var(--red); }
.rule { font: 400 13px/1.5 var(--ts); color: var(--graphite); margin: 26px 0 0; padding-top: 10px; border-top: 1px solid rgba(43,42,38,.18); text-wrap: pretty; }
.rule b { font-family: var(--sc); font-weight: 400; letter-spacing: .1em; }

.foldrow { display: grid; grid-template-columns: 720px 1fr; gap: 30px; margin-top: 40px; align-items: start; }
.foldout { position: relative; background: var(--pr) center / cover; padding: 22px 24px 18px; box-shadow: 0 16px 36px rgba(0,0,0,.5); transform: rotate(.4deg); color: var(--ink); }
.foldout .creases { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 49.6%, rgba(0,0,0,.1) 49.9%, rgba(255,255,255,.22) 50.2%, transparent 50.6%),
              linear-gradient(180deg, transparent 49.6%, rgba(0,0,0,.1) 49.9%, rgba(255,255,255,.22) 50.2%, transparent 50.6%); }
.foldout .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.foldout .head .h { font: 400 26px/1 var(--h1); }
.foldout .head .k { font: 500 11px var(--sc); letter-spacing: .12em; color: var(--graphite); }
.foldout .board { width: 672px; height: 432px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(43,42,38,.25); }
.foldout p { font: italic 400 14px/1.5 var(--ts); color: var(--graphite); margin: 12px 0 0; }

.slips { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 10px; }
.slip { position: relative; background: var(--pl) center / cover; color: var(--ink); padding: 20px 18px 16px; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.slip.a { clip-path: polygon(0 9px,8% 3px,17% 11px,26% 2px,35% 10px,44% 4px,53% 12px,62% 3px,71% 9px,80% 2px,89% 10px,100% 5px,100% 100%,0 100%); transform: rotate(-1deg); }
.slip.b { clip-path: polygon(0 4px,9% 12px,18% 3px,27% 10px,36% 2px,45% 11px,54% 4px,63% 12px,72% 3px,81% 9px,90% 2px,100% 10px,100% 100%,0 100%); transform: rotate(.9deg); margin-top: 16px; }
.slip.c { clip-path: polygon(0 12px,10% 3px,19% 10px,28% 2px,37% 11px,46% 4px,55% 12px,64% 3px,73% 9px,82% 2px,91% 11px,100% 4px,100% 100%,0 100%); transform: rotate(.6deg); margin-top: -6px; }
.slip.d { clip-path: polygon(0 6px,7% 13px,16% 2px,25% 10px,34% 4px,43% 12px,52% 3px,61% 9px,70% 2px,79% 11px,88% 4px,100% 9px,100% 100%,0 100%); transform: rotate(-.7deg); margin-top: 10px; }
.slip .head { display: flex; justify-content: space-between; align-items: baseline; }
.slip .verb { font: 400 30px/1 var(--h1); }
.slip .cost { font: 400 13px var(--mono); color: var(--red); }
.slip .line { font: 400 20px/1.3 var(--h1); margin-top: 12px; }
.slip p { font: 400 12px/1.45 var(--ts); color: var(--graphite); margin: 12px 0 0; }

/* ── ③ how it works ───────────────────────────────────────────────────── */
.spread { position: relative; margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; color: var(--ink); box-shadow: 0 24px 50px rgba(0,0,0,.55); }
.spread .gutter { position: absolute; left: 50%; top: 0; bottom: 0; width: 60px; margin-left: -30px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.16) 48%, rgba(0,0,0,.24) 50%, rgba(0,0,0,.16) 52%, transparent); }
.spread .pg { position: relative; padding: 44px 48px 44px 60px; }
.spread .pg.l { background: var(--pl) center / 100% 100%; }
.spread .pg.r { background: var(--pr) center / 100% 100%; padding: 44px 60px 44px 52px; }
.spread .pg .no { position: absolute; bottom: 18px; font: 500 11px var(--sc); color: var(--graphite); }
.spread .pg.l .no { left: 48px; } .spread .pg.r .no { right: 48px; }
.kicker { font: 500 12px var(--sc); letter-spacing: .18em; color: var(--red); }
.kicker + * { margin-top: 12px; }
.pg .kicker ~ .kicker { margin-top: 30px; }
.tick { font: 400 30px/1.1 var(--ts); margin-top: 14px; }
.aside { font: 400 18px/1.2 var(--h1); color: var(--graphite); margin-top: 6px; }
.verbs { display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; margin-top: 12px; font: 400 17px/1.45 var(--ts); }
.verbs b { font-family: var(--sc); font-weight: 700; letter-spacing: .08em; }
.verbs .dim { color: var(--graphite); }
.verbs .dim b { font-weight: 400; }
.cost { font-family: var(--mono); font-size: 13px; color: var(--red); }
.hunters { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 400 19px var(--ts); }
.hunters .arrow { color: var(--graphite); }
.hunters svg { width: 16px; height: 16px; fill: var(--red); }
.body { font: 400 17px/1.5 var(--ts); margin: 12px 0 0; text-wrap: pretty; }
.body.dim { font-size: 15px; color: var(--graphite); margin-top: 10px; }
.body.working { font-size: 14px; color: var(--graphite); }
.note { font: 400 17px/1.2 var(--h1); color: var(--graphite); margin-top: 8px; transform: rotate(-1.5deg); display: inline-block; }
.three { margin: 34px 0 0; padding: 18px 0; border-top: 1px solid rgba(43,42,38,.25); border-bottom: 1px solid rgba(43,42,38,.25); font: 400 22px/1.5 var(--ts); }
.chron { margin-top: 10px; font: 400 15px/1.5 var(--ts); }
.chron .row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(43,42,38,.18); }
.chron .row:last-child { border-bottom: 0; }
.chron .who { font-family: var(--sc); letter-spacing: .06em; }
.chron .dim { color: var(--graphite); }

/* money + letter */
.money { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; margin-top: 40px; align-items: start; }
.card { position: relative; color: var(--ink); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.card.five { background: var(--pl) center / cover; padding: 26px 30px 24px; transform: rotate(-.4deg);
  clip-path: polygon(0 10px,5% 3px,11% 12px,17% 4px,23% 11px,29% 2px,35% 9px,41% 4px,47% 13px,53% 3px,59% 10px,65% 4px,71% 12px,77% 2px,83% 9px,89% 3px,95% 11px,100% 5px,100% 100%,0 100%); }
.card.letter { background: var(--pr) center / cover; padding: 26px 28px 22px; transform: rotate(.6deg);
  clip-path: polygon(0 5px,7% 12px,14% 3px,21% 10px,28% 2px,35% 11px,42% 4px,49% 12px,56% 3px,63% 9px,70% 2px,77% 11px,84% 4px,91% 10px,100% 6px,100% 100%,0 100%); }
.card .head { display: flex; align-items: baseline; gap: 16px; }
.card .price { font: 400 56px/1 var(--h1); }
.card .per { font: 400 24px/1.1 var(--h1); color: var(--graphite); }
.card .free { margin-left: auto; font: 500 11px var(--sc); letter-spacing: .14em; color: var(--red); }
.card p { font: 400 16px/1.5 var(--ts); margin: 14px 0 0; text-wrap: pretty; }
.card .lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(43,42,38,.2); font: 400 14.5px/1.7 var(--ts); }
.card .lists b { font-family: var(--sc); font-weight: 400; letter-spacing: .1em; color: var(--graphite); }
.card .letter-h { font: 400 34px/1 var(--h1); }
.card .letter-p { font: 400 14px/1.5 var(--ts); color: var(--graphite); margin: 10px 0 16px; }
.card form { display: flex; gap: 0; }
.card input { flex: 1; font: italic 400 16px var(--ts); background: transparent; border: 0; border-bottom: 1px solid var(--ink); padding: 8px 4px; color: var(--ink); outline: none; }
.card input::placeholder { color: var(--graphite); }
.card .kit { font: 400 12.5px var(--ts); color: var(--graphite); margin-top: 10px; min-height: 1.4em; }

/* footer */
.foot { padding: 90px 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; font: 400 14px/1.6 var(--ts); color: var(--mute); }
.foot p { margin: 0; text-wrap: pretty; }
.foot .label { font-family: var(--sc); letter-spacing: .12em; color: var(--cream); }
.foot .right { text-align: right; }
.foot .name { font: 400 30px/1 var(--h1); color: var(--cream); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }