/* The Vinterface page — a library at night, close to the hearth, snowing outside.
   The palette and the type are the Vinterface's own (Playfair Display + Crimson Pro,
   gold on dark wood, parchment pages), so walking in from the home feels like
   walking into the app. */

@view-transition { navigation: auto; }

:root {
  --night: #0e0a05;
  --wood-1: #2a170b;
  --wood-2: #22130a;
  --wood-3: #1a0e06;
  --gold: #e0b855;
  --gold-soft: rgba(224,184,85,.72);
  --ember: #ffb84a;
  --paper: linear-gradient(160deg, #f0e4c4 0%, #e8d8aa 50%, #deccaa 100%);
  --ink: #2a1806;
  --ink-strong: #3d2508;
  --ink-soft: rgba(80,50,15,.62);
  --display: 'Playfair Display', Georgia, serif;
  --text: 'Crimson Pro', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  color: var(--gold);
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.6;
  overflow-x: hidden;
  /* Wood panelling: vertical planks with a little grain. */
  background:
    radial-gradient(ellipse 120% 70% at 50% 110%, rgba(255,140,40,.20), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 138px, rgba(0,0,0,.45) 138px 141px, transparent 141px 142px),
    repeating-linear-gradient(90deg, rgba(255,200,140,.025) 0 2px, transparent 2px 23px),
    linear-gradient(90deg, var(--wood-2), var(--wood-1) 30%, var(--wood-2) 60%, var(--wood-1) 85%, var(--wood-2));
  background-color: var(--wood-2);
  background-attachment: fixed;
}
a { color: inherit; }

/* The hearth glow, breathing at the bottom of the screen */
.hearth {
  position: fixed; left: 50%; bottom: -42vh; z-index: 0;
  width: 150vw; height: 90vh; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 70%, rgba(255,150,40,.32) 0%, rgba(200,90,20,.14) 38%, transparent 68%);
  pointer-events: none;
  animation: breathe 6s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: .7; transform: translateX(-50%) scale(.97); } to { opacity: 1.1; transform: translateX(-50%) scale(1.06); } }
main, header, footer { position: relative; z-index: 1; }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 12px var(--gutter); background: linear-gradient(180deg, rgba(14,10,5,.92), rgba(14,10,5,.6)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid rgba(224,184,85,.18); }
.bar a, .bar span { font-family: var(--display); font-style: italic; font-size: 16px; text-decoration: none; }
.bar .back { color: var(--gold); }
.bar .back:hover { text-shadow: 0 0 12px rgba(255,190,80,.7); }
.langs { display: flex; gap: 6px; font-family: var(--mono) !important; }
.langs > * { padding: 3px 10px; border: 1px solid rgba(224,184,85,.35); border-radius: 3px; font-style: normal !important; font-family: var(--mono) !important; font-size: 13px !important; }
.langs [aria-current] { background: rgba(224,184,85,.16); }
.langs span { opacity: .45; }

/* ---------- the room: window, title, cocoa ---------- */
.room { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 8vh, 88px) var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }

/* A window with mullions; snow falls on the other side. */
.window {
  position: relative; aspect-ratio: 3 / 4; border-radius: 120px 120px 6px 6px;
  border: 14px solid #4a2a14;
  box-shadow: inset 0 0 0 3px #2a1608, 0 0 0 3px #1a0e06, 0 20px 50px rgba(0,0,0,.6);
  overflow: hidden;
  background: linear-gradient(180deg, #0d1626 0%, #1b2a40 60%, #2b3c55 100%);
}
.window::before, .window::after { content: ''; position: absolute; background: #4a2a14; z-index: 2; box-shadow: 0 0 0 2px #2a1608; }
.window::before { left: 50%; top: 0; bottom: 0; width: 10px; transform: translateX(-50%); }
.window::after { top: 46%; left: 0; right: 0; height: 10px; }
.window .view { position: absolute; inset: 0; width: 100%; height: 100%; }
.flake { position: absolute; top: -10px; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .85; z-index: 1; animation: fall linear infinite; }
@keyframes fall { to { transform: translate(var(--sway, 20px), 110vh); } }
.sill { height: 22px; margin: -4px -24px 0; background: linear-gradient(180deg, #5a3416, #3a2010); border-radius: 4px; box-shadow: 0 10px 24px rgba(0,0,0,.6); position: relative; z-index: 3; }

.title-block { text-align: center; }
.ornament { font-family: var(--display); color: var(--gold-soft); letter-spacing: 10px; }
.title-block h1 {
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: clamp(46px, 8vw, 96px); line-height: 1; margin: 12px 0 10px;
  color: var(--gold);
  animation: glow 4.5s ease-in-out infinite;
}
@keyframes glow { 0%, 100% { text-shadow: 0 2px 22px rgba(220,140,20,.45), 0 0 6px rgba(255,180,60,.15); } 50% { text-shadow: 0 2px 44px rgba(255,170,40,.85), 0 0 18px rgba(255,200,90,.45); } }
.tagline { font-family: var(--display); font-style: italic; letter-spacing: .35em; text-transform: uppercase; font-size: 15px; color: var(--gold-soft); }
.lede { margin: 26px auto 0; max-width: 520px; font-size: 21px; color: #ead6a6; }
.status { display: inline-block; margin-top: 22px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; padding: 4px 12px; border: 1px solid rgba(224,184,85,.4); border-radius: 3px; color: var(--gold-soft); }

/* A mug of cocoa with steam, on the corner of the desk */
.cocoa { display: block; width: 92px; margin: 34px auto 0; }
.steam path { animation: steam 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.steam path:nth-child(2) { animation-delay: -1.1s; }
.steam path:nth-child(3) { animation-delay: -2.2s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(6px) scaleY(.8); } 40% { opacity: .55; } 100% { opacity: 0; transform: translateY(-14px) scaleY(1.1); } }

/* ---------- the portrait: a picture of the real site on the wall ---------- */
.portrait { max-width: 1000px; margin: clamp(40px, 8vh, 96px) auto 0; padding: 0 var(--gutter); text-align: center; }
.frame {
  position: relative; display: block; padding: clamp(10px, 2vw, 22px);
  background: linear-gradient(135deg, #8a5a1c, #c9a04a 20%, #6b4512 45%, #c9a04a 70%, #7a4e16);
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,230,160,.35), inset 0 0 18px rgba(0,0,0,.6);
}
.canvas { display: block; aspect-ratio: 16 / 10; overflow-y: auto; overscroll-behavior: contain; border: 3px solid #2a1608; background: #0e0a05; scrollbar-width: thin; scrollbar-color: #c9a04a #1a0e06; }
.canvas img { display: block; width: 100%; height: auto; }
.canvas:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.plaque { display: inline-block; margin-top: 18px; padding: 6px 18px; font-family: var(--display); font-style: italic; font-size: 15px; color: #2a1806; background: linear-gradient(180deg, #e2c27a, #b38a3a); border-radius: 3px; box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,245,210,.6); }

/* ---------- the book: how it works ---------- */
.book { max-width: 860px; margin: clamp(56px, 10vh, 120px) auto 0; padding: 0 var(--gutter); }
.how-to { text-align: center; margin-bottom: 26px; font-family: var(--display); font-style: italic; font-size: 18px; color: #ead6a6; }
.how-to b { color: var(--ember); font-weight: 600; }
.page {
  position: relative; background: var(--paper); color: var(--ink);
  border: 1px solid rgba(160,110,40,.3); border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,240,180,.3);
  padding: clamp(28px, 6vw, 60px) clamp(22px, 7vw, 72px);
  margin-bottom: 36px;
}
.page::after { /* the page edges, stacked */ content: ''; position: absolute; left: 10px; right: 10px; bottom: -7px; height: 7px; background: #cdb98a; border-radius: 0 0 4px 4px; box-shadow: 0 4px 0 -1px #b8a476; z-index: -1; }
.chapter { font-family: var(--display); font-style: italic; text-align: center; color: var(--ink-strong); }
.chapter small { display: block; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); font-style: normal; margin-bottom: 4px; }
.chapter span { font-size: clamp(24px, 3.4vw, 32px); }
.chapter em { display: block; font-size: 15px; color: var(--ink-soft); margin-top: 2px; }
.rule { width: 90px; height: 1px; margin: 18px auto 26px; background: rgba(120,80,20,.4); }
.pair + .pair { margin-top: 30px; }
.pt { font-size: clamp(18px, 2.3vw, 20.5px); line-height: 1.65; text-align: justify; hyphens: auto; color: var(--ink); }
.en { margin-top: 10px; padding-left: 16px; border-left: 2px solid rgba(120,80,20,.25); font-style: italic; font-size: clamp(16.5px, 2vw, 18.5px); line-height: 1.6; color: rgba(42,24,6,.55); transition: color .3s; }
.en:hover, .en:focus-within { color: rgba(42,24,6,.8); }

/* A word the engine can explain */
.w { cursor: pointer; border-radius: 3px; transition: background .15s, color .15s; }
.w:hover, .w.on { background: rgba(180,120,20,.2); color: #7c3a00; }
.w.name { text-decoration: underline dotted rgba(124,58,0,.5); text-underline-offset: 3px; }

/* The dictionary card — the same card the app uses */
.dict {
  position: fixed; z-index: 100; width: min(290px, calc(100vw - 32px));
  background: var(--paper); color: var(--ink);
  border: 1px solid rgba(160,110,40,.5); border-radius: 6px 2px 6px 6px;
  box-shadow: 4px 8px 28px rgba(0,0,0,.65); padding: 12px 14px;
  animation: pop .18s ease-out;
}
.dict[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } }
.dict-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dict-word { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 18px; color: var(--ink-strong); }
.dict-close { background: none; border: 0; font-size: 15px; color: var(--ink-soft); cursor: pointer; padding: 4px; }
.dict-line { height: 1px; background: rgba(120,80,20,.3); margin: 8px 0; }
.dict-kind { font-size: 12px; font-style: italic; letter-spacing: 1px; text-transform: uppercase; color: rgba(120,70,15,.85); margin-bottom: 3px; }
.dict-def { font-size: 17px; line-height: 1.4; }
.dict-src { margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }

/* ---------- the shelf of numbers ---------- */
.tomes { max-width: 980px; margin: 24px auto 0; padding: 0 var(--gutter); }
.tomes-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }
.tome { padding: 22px 14px 18px; border-radius: 4px 4px 2px 2px; text-align: center; color: #f3dfa8; box-shadow: inset 0 0 0 2px rgba(201,160,74,.55), inset 0 0 0 5px rgba(0,0,0,.25), 0 8px 18px rgba(0,0,0,.5); }
.tome:nth-child(1) { background: linear-gradient(90deg, #3a0f0f, #5a1818 40%, #3a0f0f); min-height: 190px; }
.tome:nth-child(2) { background: linear-gradient(90deg, #0b1230, #1a2148 40%, #0b1230); min-height: 220px; }
.tome:nth-child(3) { background: linear-gradient(90deg, #0d2615, #1f4628 40%, #0d2615); min-height: 175px; }
.tome:nth-child(4) { background: linear-gradient(90deg, #2a1608, #4a2a14 40%, #2a1608); min-height: 205px; }
.tome b { display: block; font-family: var(--display); font-style: italic; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.05; color: var(--gold); }
.tome span { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.3; }
.shelf-board { height: 20px; margin: 0 -10px; background: linear-gradient(180deg, #6b3e1c, #3a2010); border-radius: 2px; box-shadow: 0 12px 26px rgba(0,0,0,.6); }

/* ---------- brass tags, the workshop note, the footer ---------- */
.made { max-width: 860px; margin: 80px auto 0; padding: 0 var(--gutter); text-align: center; }
.made h2, .note h2 { font-family: var(--display); font-style: italic; font-weight: 600; font-size: clamp(26px, 3.6vw, 34px); color: var(--gold); }
.made p { margin: 12px auto 18px; max-width: 640px; color: #ead6a6; }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; }
.tags li { font-family: var(--mono); font-size: 13px; color: #2a1806; padding: 3px 12px; border-radius: 3px; background: linear-gradient(180deg, #e2c27a, #b38a3a); box-shadow: 0 2px 5px rgba(0,0,0,.4); }

.note { max-width: 620px; margin: 90px auto 0; padding: 30px 30px 26px; background: var(--paper); color: var(--ink); border-radius: 3px; transform: rotate(-1.2deg); box-shadow: 0 16px 40px rgba(0,0,0,.6); position: relative; }
.note::before { content: ''; position: absolute; top: -10px; left: 50%; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f0d48a, #8a5a1c); box-shadow: 0 3px 5px rgba(0,0,0,.5); transform: translateX(-50%); }
.note h2 { color: var(--ink-strong); }
.note p { margin: 10px 0 14px; }
.note ul { margin: 0 0 18px 1.1em; }
.note .button { display: inline-block; padding: 11px 22px; border-radius: 3px; background: linear-gradient(180deg, #6b3a12, #3a1c0c); color: #f3dfa8; text-decoration: none; font-family: var(--display); font-style: italic; font-size: 18px; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.note small { display: block; margin-top: 12px; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }

.end { text-align: center; padding: 90px var(--gutter) 70px; }
.end a { font-family: var(--display); font-style: italic; font-size: 20px; text-decoration: none; color: var(--gold); }
.end a:hover { text-shadow: 0 0 12px rgba(255,190,80,.7); }
.clawd-by-fire { display: block; width: 74px; margin: 0 auto 18px; cursor: pointer; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.seen { opacity: 1; transform: none; }

::view-transition-group(*) { animation-duration: .6s; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }

@media (max-width: 820px) {
  .room { grid-template-columns: 1fr; }
  .room > div:first-child { order: 2; }
  .window { max-width: 240px; margin: 0 auto; aspect-ratio: 4 / 5; border-width: 11px; }
  .sill { max-width: 280px; margin: -4px auto 0; }
  .tomes-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tome { min-height: 150px !important; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hearth, .title-block h1, .steam path, .flake { animation: none !important; }
  .flake { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* The world card on the home page grows into this full-screen layer: entering a world. */
.vt-portal { position: fixed; inset: 0; pointer-events: none; }