/* Foxsight holding page. Two looks that follow the system: The Opening (light: a book spread on a night table)
   and Night and vellum (dark: the head on the night, the work on torn vellum leaves). Tokens are sampled from the prototype. */

/* fallback faces fitted to the web faces, so the late font swap moves no line */
@font-face { font-family: 'EBG fb'; src: local('Palatino Linotype'), local('Palatino LT'), local('Book Antiqua'); font-weight: 100 549; size-adjust: 85.6%; ascent-override: 118%; descent-override: 35%; line-gap-override: 0%; }
@font-face { font-family: 'EBG fb'; src: local('Palatino Linotype Bold'), local('Book Antiqua Bold'); font-weight: 550 1000; size-adjust: 89%; ascent-override: 113.5%; descent-override: 33.7%; line-gap-override: 0%; }
@font-face { font-family: 'EBG fb'; src: local('Palatino Linotype Italic'), local('Book Antiqua Italic'); font-style: italic; font-weight: 100 1000; size-adjust: 90.3%; ascent-override: 111.8%; descent-override: 33.2%; line-gap-override: 0%; }
@font-face { font-family: 'EBG fb2'; src: local('Georgia'); size-adjust: 86%; ascent-override: 117.4%; descent-override: 34.9%; line-gap-override: 0%; }
@font-face { font-family: 'Uncial fb'; src: local('Georgia'); size-adjust: 127.7%; ascent-override: 77.5%; descent-override: 25.8%; line-gap-override: 0%; }

:root {
  --night: #12100d; --night-2: #1c1914;
  --paper: #ece4d2; --paper-2: #b3a892; --paper-rule: rgba(236, 228, 210, .18);
  --ink: #1d1813; --ink-2: #4f463a;
  --verm: #9c2716; --verm-n: #e0644a;
  --lapis: #233f8c; --lapis-n: #8ea6e8; --gold: #d1aa55;
  --vellum: #e4dcc6; --verso: #dcd2b9; --wash: rgba(236, 229, 210, .5);
  --tex: url(/art/vellum.webp);
  --gutter: rgba(70, 48, 18, .3); --gutter-0: rgba(70, 48, 18, 0); --ruleg: rgba(110, 82, 23, .75); --ruler: rgba(156, 39, 22, .55);
  --shadow: 0 26px 46px -18px rgba(0, 0, 0, .7), 0 3px 6px rgba(0, 0, 0, .4);
  --leafshadow: drop-shadow(0 14px 16px rgba(0, 0, 0, .5)) drop-shadow(0 2px 2px rgba(0, 0, 0, .42));
  --lift: 0 4px 5px rgba(28, 16, 4, .32);
  --f-book: 'EB Garamond', 'EBG fb', 'EBG fb2', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-init: 'Uncial Antiqua', 'Uncial fb', 'EB Garamond', serif;
  --f-versal: 'Cinzel Decorative', 'EB Garamond', serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --tm: clamp(12px, 1.4vw, 22px);        /* the table around the book */
  --px: clamp(22px, 4vw, 56px);          /* the page's inner side margin */
  --edge: 16px;                          /* a torn leaf's deckled edge */
  --wm: clamp(50px, 7.6vw, 76px);
  --init: clamp(62px, 7vw, 86px);
  /* light (The Opening): text on vellum */
  --fg: var(--ink); --fg-2: var(--ink-2); --rub: var(--verm); --link: var(--lapis); --rule: var(--ruleg);
  --head-fg: var(--ink); --head-fg-2: var(--ink-2);
  color-scheme: light dark;
}

* { box-sizing: border-box; }
html { background: var(--night); scrollbar-color: #5a5045 var(--night); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; display: flex; background: var(--night); color: var(--fg); font: 400 19px/1.45 var(--f-book); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--rub); }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
::selection { background: var(--verm); color: #fff7ea; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--night); }
::-webkit-scrollbar-thumb { background: #5a5045; border: 2px solid var(--night); }

/* ---- the book: phone first. Every look stacks head, line, plate, then the rest ---- */
.book { position: relative; isolation: isolate; width: 100%; max-width: 1180px; margin: auto; padding: var(--tm);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "open" "plate" "leaf"; align-content: start; }
.head { grid-area: head; padding: 30px var(--px) 0; }
.open { grid-area: open; padding: clamp(28px, 4.4vw, 52px) var(--px) 0; }
.plate { grid-area: plate; margin: 0; display: grid; justify-items: center; align-content: start; gap: 12px; padding: 30px var(--px) 8px; }
.leaf { grid-area: leaf; display: flex; flex-direction: column; padding: 6px var(--px) 28px; }

/* light: the recto lies under the whole phone page; the verso exists from 720 px up */
.book::before { content: none; }
.book::after { content: ""; grid-column: 1 / -1; grid-row: 1 / -1; z-index: -1; box-shadow: var(--shadow);
  background-color: var(--vellum); background-image: linear-gradient(var(--wash), var(--wash)), var(--tex); background-size: 100% 100%, 512px auto; }

/* the wordmark: the illuminated versal F, then Foxsight in black letter */
.wordmark { display: inline-flex; align-items: center; gap: .03em; font: 600 var(--wm)/1 'Grenze Gotisch', var(--f-book); letter-spacing: .004em; white-space: nowrap; color: var(--head-fg); text-decoration: none; }
.wordmark .w { line-height: 1; padding-top: .04em; }
.versal { display: inline-grid; place-items: center; min-width: 1.02em; height: 1.08em; padding: .08em .14em 0; font: 700 calc(var(--wm) * 1.02)/1 var(--f-versal); color: #f6ecd6; background: var(--lapis);
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 5.5px #a3271a, var(--lift); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.strap { margin: 12px 0 0; font: italic 400 clamp(19px, 2.2vw, 23px)/1.3 var(--f-book); color: var(--head-fg-2); }

/* the opening: a book-face heading whose second line is set in rubric, then one plain sentence;
   the gold initial opens the first paragraph of the text, where a manuscript puts it. Its 76 px span three lines. */
.leaf p.first .init { --init: 76px; margin: 6px 12px 0 0; } /* 6 + 76 stays inside three 27.5 px lines */
.init { float: left; width: var(--init); height: var(--init); margin: 4px 14px 0 0; padding-top: calc(var(--init) * .03); display: grid; place-items: center; overflow: hidden;
  font: 700 calc(var(--init) * .66)/.9 var(--f-versal); color: #fff6e0; background: #6e5217 url(/art/gold-leaf.webp) 0 0 / 330px auto; border: 2px solid #2a1f0e; text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 0 1px #000; }
h1 { margin: 0; font: 500 clamp(40px, 4.6vw, 60px)/1.04 var(--f-book); letter-spacing: -.012em; color: var(--head-fg); text-wrap: balance; }
h1 em { display: block; font-style: italic; color: var(--rub); }
.lead { margin: 14px 0 0; max-width: 34em; font: 400 clamp(19px, 1.6vw, 22px)/1.4 var(--f-book); color: var(--head-fg-2); text-wrap: balance; }
.leaf p { margin: 0 0 .75em; max-width: 34em; text-wrap: pretty; }
.leaf p.first { margin-top: 18px; }
.leaf p.first + p { text-wrap: balance; }

/* the quiet state: a rubric line, ruled off */
.status { margin: auto 0 0 !important; padding-top: 16px; border-top: 1px solid var(--rule); font: italic 400 19px/1.35 var(--f-book); color: var(--rub); max-width: none !important; }
.status .j { font: 400 1.3em/0 var(--f-init); margin-right: .02em; }
/* the live block number turns like a page when a new block lands */
.status .now { display: inline-block; font-variant-numeric: oldstyle-nums proportional-nums; transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.status .now.turn { opacity: 0; transform: translateY(-.25em); }
@media (prefers-reduced-motion: reduce) { .status .now { transition: none; } }
.leaf .gap { flex: 1 0 22px; }

/* the plate: the month's page, flat paint in its ruled frame */
.plate img { width: min(100%, 360px); height: auto; aspect-ratio: 1138 / 1875; box-shadow: 0 0 0 3px var(--verso), 0 0 0 4.5px var(--ruleg), 0 0 0 7px var(--verso), 0 0 0 8px var(--ruler); margin: 8px; }
.plate figcaption { font: italic 400 13px/1.35 var(--f-book); color: var(--ink-2); text-align: center; text-wrap: balance; }

/* the one arrival: the page opens, the lunette already showing and the scene unrolling beneath it */
@keyframes unroll { from { clip-path: inset(-10px -10px 60% -10px); } to { clip-path: inset(-10px); } }
.plate img { animation: unroll 1100ms var(--ease) 120ms backwards; }

/* 404 */
.leaf .back { margin-top: 6px; font: italic 500 20px/1.3 var(--f-book); }

/* ---- The Opening, 720 px up: a spread. The verso (plate) left, the recto (page) right, the gutter shaded ---- */
@media (min-width: 720px) {
  /* the recto's text block sits in the middle of its page, as the plate does on the verso */
  .book { min-height: min(100svh, 940px); grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: "plate ." "plate head" "plate open" "plate leaf" "plate ."; }
  .book::before { content: ""; grid-column: 1; grid-row: 1 / -1; z-index: -1; box-shadow: var(--shadow);
    background-color: var(--verso); background-image: linear-gradient(270deg, rgba(70, 48, 18, .34) 0, rgba(70, 48, 18, .1) 22px, var(--gutter-0) 70px), linear-gradient(var(--wash), var(--wash)), var(--tex);
    background-size: 100% 100%, 100% 100%, 512px auto; background-position: 0 0, 0 0, 137px 61px; }
  .book::after { grid-column: 2; background-image: linear-gradient(90deg, var(--gutter) 0, rgba(70, 48, 18, .1) 26px, var(--gutter-0) 64px), linear-gradient(var(--wash), var(--wash)), var(--tex);
    background-size: 100% 100%, 100% 100%, 512px auto; box-shadow: var(--shadow), inset -1px 0 0 rgba(70, 48, 18, .18); }
  .head { padding-top: clamp(30px, 4vw, 54px); }
  .leaf .gap { flex-basis: 34px; }
  .plate { align-content: center; padding: clamp(28px, 3vw, 44px) clamp(20px, 2.6vw, 40px); }
  .plate img { width: min(calc(100% - 16px), calc((min(100svh, 940px) - 2 * var(--tm) - 130px) * .6069)); max-width: none; max-height: none; }
  .leaf { padding-bottom: clamp(28px, 3vw, 44px); }
}

/* ---- Night and vellum (dark): the night is the room; the head reads on it, the work lies on torn leaves ---- */
@media (prefers-color-scheme: dark) {
  :root { --head-fg: var(--paper); --head-fg-2: var(--paper-2); --rub: var(--verm-n); }
  .book::before, .book::after { content: none; }
  .book { padding-inline: max(var(--tm), 16px); }
  .head, .open { padding-inline: 0; }
  .head { padding-top: clamp(24px, 4vw, 48px); }
  .strap { color: var(--paper-2); }
  ::selection { background: var(--gold); color: var(--night); }
  .plate, .leaf { --fg: var(--ink); --fg-2: var(--ink-2); --rub: var(--verm); --link: var(--lapis); --rule: var(--ruleg); color: var(--ink); }
  /* a leaf: vellum with real texture, a deckled head and foot, lit from the upper left */
  .plate, .leaf { position: relative; isolation: isolate; filter: var(--leafshadow);
    background-color: var(--vellum); background-image: linear-gradient(var(--wash), var(--wash)), var(--tex); background-size: 100% 100%, 512px auto; }
  .plate::before, .plate::after, .leaf::before, .leaf::after { content: ""; position: absolute; left: 0; right: 0; height: var(--edge); pointer-events: none; z-index: -1;
    background-color: var(--vellum); background-image: linear-gradient(var(--wash), var(--wash)), var(--tex); background-size: 100% 100%, 512px auto;
    -webkit-mask: url(/art/page-edge.webp) 0 0 / 459px 100% repeat-x; mask: url(/art/page-edge.webp) 0 0 / 459px 100% repeat-x; }
  .plate::before, .leaf::before { top: calc(1px - var(--edge)); }
  .plate::after, .leaf::after { bottom: calc(1px - var(--edge)); transform: scaleY(-1); -webkit-mask-position: 211px 0; mask-position: 211px 0; }
  /* the torn edge rises 16 px above a leaf, so the margin clears it with room to spare */
  .plate { margin: calc(var(--edge) + 26px) 0 var(--edge); padding: 26px 22px 20px; }
  .leaf { margin: calc(var(--edge) + 26px) 0 var(--edge); padding: 24px clamp(20px, 3vw, 34px) 24px; }
  .plate img { box-shadow: 0 0 0 3px var(--vellum), 0 0 0 4.5px var(--ruleg), 0 0 0 7px var(--vellum), 0 0 0 8px var(--ruler); }
}
@media (prefers-color-scheme: dark) and (min-width: 720px) {
  .book { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: clamp(36px, 5vw, 72px); padding-inline: clamp(24px, 4vw, 56px);
    grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". plate" "head plate" "open plate" "leaf plate" ". plate"; align-content: stretch; }
  .plate { align-self: center; margin-top: calc(var(--edge) + 24px); margin-bottom: calc(var(--edge) + 24px); padding: 28px 24px 22px; }
  .plate img { width: calc(100% - 16px); margin: 8px; }
  .leaf { align-self: start; margin-top: calc(var(--edge) + 28px); }
  .head { padding-top: 0; }
}

/* ---- phone ---- */
@media (max-width: 719px) {
  .plate img { width: min(100%, 300px); }
  .init { margin-right: 12px; }
  .leaf p.first { margin-top: 8px; }
}

/* ---- reduced motion: the page is simply there ---- */
@media (prefers-reduced-motion: reduce) { .plate img { animation: none; } }