@import url("../design/tokens.css");

@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-vf.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Cedarville Cursive"; src: url("../assets/fonts/cedarville-cursive.woff2") format("woff2");
  font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../assets/fonts/courier-prime.woff2") format("woff2");
  font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../assets/fonts/courier-prime-700.woff2") format("woff2");
  font-weight: 700; font-display: swap; }
@font-face { font-family: "VT323"; src: url("../assets/fonts/vt323.woff2") format("woff2"); font-display: block; }

:root {
  --img-paper: url("../assets/tex/paper-kraft.jpg");
  --img-paper-size: 512px;
  --img-map: url("../assets/tex/map-road-full.jpg");
  --img-map-size: cover;
  --img-topo: url("../assets/tex/topo-siegfried.png");
  --img-topo-size: 1400px;
  --img-notebook: url("../assets/tex/paper-album.jpg");
  --img-notebook-size: 512px;
  --img-card: url("../assets/tex/card-blue.jpg");
  --img-card-size: 256px;
  --img-frame: url("../assets/tex/wood-frame.jpg");
  --img-frame-size: 512px;

  --f-title: var(--font-title), "Iowan Old Style", Georgia, serif;
  --f-hand: var(--font-hand), "Segoe Script", cursive;
  --f-type: var(--font-type), "Courier New", monospace;
  --f-osd: "VT323", monospace;
  --gutter: 16px;
  --shadow-card: 0 1px 1px rgba(40, 30, 10, .28), 0 8px 16px -8px rgba(40, 30, 10, .45);
  --ease: cubic-bezier(.65, 0, .35, 1);
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--album-ink); background: var(--wall);
  font: 400 calc(17px * var(--type-scale))/28px var(--f-title);
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 14; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--map-edge); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Lettering: one-colour ink with grain and rough edges (filter #ink, parameters from tokens) */
.ink { color: var(--ink); filter: url(#ink);
  text-shadow: var(--misregister) calc(var(--misregister) * -.5) 0 color-mix(in srgb, var(--ink) 28%, transparent); }
.ink-svg { position: absolute; width: 0; height: 0; }

/* ---------- Landing: the catalogue cover ---------- */
.cover { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--kraft) var(--img-paper); background-size: var(--img-paper-size);
  text-decoration: none; color: var(--ink); overflow: hidden; }
.cover-title { flex: 0 0 auto; padding: max(14vh, 96px) var(--gutter) 32px; text-align: center; }
.cover-title h1 { margin: 0; font: 650 clamp(52px, 11vw, 132px)/.92 var(--f-title);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; letter-spacing: -.01em; }
.cover-title p { margin: 20px 0 0; font: 600 calc(18px * var(--type-scale))/24px var(--f-title);
  font-variation-settings: "SOFT" 100, "opsz" 24; }
.cover-topo { position: relative; flex: 1 1 auto; min-height: 46vh; margin-top: auto;
  background: var(--ink); -webkit-mask: var(--img-topo) 0 0 / var(--img-topo-size) repeat;
  mask: var(--img-topo) 0 0 / var(--img-topo-size) repeat; filter: url(#ink); }
.cover-topo::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--ink); }
.cover-enter { position: absolute; left: 50%; bottom: 24px; translate: -50% 0;
  padding: 8px 16px; background: var(--kraft) var(--img-paper); background-size: var(--img-paper-size);
  font: 600 16px/24px var(--f-title); font-variation-settings: "SOFT" 100; color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink); white-space: nowrap; }
.cover:hover .cover-enter { background: var(--ink); color: var(--kraft); }
@media (prefers-reduced-motion: no-preference) {
  .cover-title h1, .cover-title p { animation: rise 900ms var(--ease) both; }
  .cover-title p { animation-delay: 250ms; }
  .cover-topo { animation: print 2400ms var(--ease) 300ms both; }
  .cover-enter { animation: rise 700ms var(--ease) 1900ms both; }
}
@keyframes rise { from { clip-path: inset(100% 0 0 0); transform: translateY(12px); }
  to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Shared page chrome ---------- */
.menu { display: flex; gap: 4px; margin: 0; padding: 4px 8px; list-style: none;
  background: var(--border-white); box-shadow: var(--shadow-card); transform: rotate(-1.2deg);
  font: 700 15px/24px var(--f-type); }
.menu a { display: block; padding: 4px 8px; text-decoration: none; color: var(--album-ink); }
.menu a:hover { color: var(--map-red); }
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.menu-btn { display: none; }
.tag { display: inline-block; padding: 4px 12px 2px; background: var(--kraft) var(--img-paper);
  background-size: var(--img-paper-size); box-shadow: var(--shadow-card); text-decoration: none;
  font: 650 26px/32px var(--f-title); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72; }

/* ---------- Home: the framed map ---------- */
.home { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center;
  padding: var(--gutter); gap: 24px; }
.frame { --fw: clamp(12px, 2vw, 28px); position: relative; padding: var(--fw);
  width: min(100%, calc((100svh - 2 * var(--gutter) - 2 * var(--fw) - 8px) * 1.5 + 2 * var(--fw)));
  background: #D9BE95 var(--img-frame); background-size: var(--img-frame-size);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 20, .35), inset 3px 3px 0 rgba(255, 245, 225, .45),
    inset -3px -3px 0 rgba(90, 60, 20, .25), 0 2px 3px rgba(0, 0, 0, .18), 0 24px 40px -24px rgba(0, 0, 0, .45); }
.frame::after { content: ""; position: absolute; inset: calc(var(--fw) - 3px); pointer-events: none;
  box-shadow: inset 2px 2px 4px rgba(60, 40, 10, .45); }
.map { position: relative; aspect-ratio: 3 / 2; overflow: hidden; container-type: inline-size;
  background: #EDE4CC var(--img-map) center / var(--img-map-size); }
.map::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border: 10px solid var(--map-edge);
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Crect width='30' height='30' fill='%2324508A'/%3E%3Crect x='2' y='2' width='26' height='26' fill='none' stroke='%23EDE4CC' stroke-width='1'/%3E%3Cpath d='M11 4 L19 4 L15 9Z' fill='%23C23A2C'/%3E%3C/svg%3E") 10 round; }
.map-tag { position: absolute; left: 4%; top: 6%; z-index: 4; transform: rotate(-3deg); color: var(--ink); }
.map .menu { position: absolute; right: 3%; top: 5%; z-index: 4; }
.post-card { position: absolute; z-index: 2; left: calc(var(--x) * 100%); top: calc((0.5 + (var(--y) - 0.5) * var(--spread, 1)) * 100%);
  width: calc(var(--s) * 100%); transform: translate(-50%, -50%) rotate(calc(var(--t) * 1deg));
  padding: max(4px, 1.1cqi) max(4px, 1.1cqi) 0; background: var(--border-white);
  box-shadow: var(--shadow-card); text-decoration: none; color: var(--album-ink); }
.post-card.newest { z-index: 3; }
.post-card img { width: 100%; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; background: #ccc; }
.post-card span { display: block; padding: max(2px, .5cqi) 2px max(4px, .8cqi);
  font: 700 max(10px, 1.15cqi)/1.3 var(--f-type); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-card:hover span, .post-card:focus-visible span { color: var(--map-red); }
.post-card .osd { position: absolute; left: max(8px, 1.8cqi); top: max(6px, 1.6cqi); color: var(--osd);
  font: max(12px, 1.6cqi)/1 var(--f-osd); text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.wall-foot { display: flex; justify-content: center; padding: 8px 0 16px; }

/* ---------- Album pages: pins and posts ---------- */
.book { min-height: 100vh; padding: var(--gutter) var(--gutter) 48px; }
.book-head { max-width: 860px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.book-head .tag { color: var(--ink); transform: rotate(-2deg); }
.page { position: relative; max-width: 860px; margin: 0 auto; padding: 48px 40px 48px 64px;
  background: var(--album) var(--img-notebook); background-size: var(--img-notebook-size);
  box-shadow: -2px 0 0 #d8cfbd, -4px 0 0 #cfc5b1, -6px 0 0 #c7bca6, -8px 0 0 #6b4a2d, -12px 0 0 #5a3c22,
    0 18px 40px -20px rgba(0, 0, 0, .5); }
.page h1 { margin: 0 0 32px; font: 400 calc(40px * var(--type-scale))/48px var(--f-hand); color: var(--album-ink); }
.pin { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: center;
  padding: 24px 0; text-decoration: none; color: var(--album-ink); }
.pin + .pin { border-top: 1px solid transparent; }
.pin-photo { position: relative; padding: 10px; background: var(--border-white); box-shadow: var(--shadow-card); }
.pin-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.92); }
.pin-photo .osd { position: absolute; left: 20px; top: 16px; color: var(--osd); font: 20px/1 var(--f-osd);
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.pin-words { font: 400 calc(26px * var(--type-scale))/36px var(--f-hand); }
.pin-words b { display: block; font-weight: 400; }
.pin-words time { display: block; margin-top: 8px; font-size: .8em; }
.pin:hover .pin-words b { color: var(--map-red); }
.pin.is-pinned .pin-words b::after { content: "pinned to the map"; display: block; margin-top: 4px;
  font: 700 13px/20px var(--f-type); color: var(--ink); }
.empty { font: 400 26px/36px var(--f-hand); }

.post-media { position: relative; padding: var(--card-border) var(--card-border) calc(var(--card-border) * 3.2);
  background: var(--border-white); box-shadow: var(--shadow-card); }
.post-media > img, .post-media > video { width: 100%; max-height: 78vh; object-fit: contain; background: #111; }
.post-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 32px 0 8px; flex-wrap: wrap; }
.post-meta h1 { margin: 0; }
.post-meta time { font: 400 calc(24px * var(--type-scale))/32px var(--f-hand); }
.post-body { max-width: 62ch; font: 400 calc(18px * var(--type-scale))/30px var(--f-title);
  font-variation-settings: "SOFT" 100, "opsz" 16; }
.post-body a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; font: 700 15px/24px var(--f-type); }
.post-nav a { text-decoration: none; }
.post-nav a:hover { color: var(--map-red); }

/* ---------- Camcorder screen ---------- */
.vhs { position: relative; background: #0d0d0f; padding: 14px; border-radius: 6px;
  box-shadow: inset 0 0 0 2px #2a2a2e, inset 0 0 24px #000; }
.vhs-screen { position: relative; overflow: hidden; background: #000; container-type: inline-size; }
.vhs-screen video { width: 100%; max-height: 72vh; object-fit: contain; filter: saturate(1.3) contrast(1.06) brightness(1.04); }
.vhs-screen::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply;
  opacity: var(--vhs-scanlines);
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .55) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 50%, transparent 0 .6px, rgba(0, 0, 0, .35) 1.2px) 0 0 / 3px 3px; }
.vhs-screen::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 2px 0 0 rgba(255, 0, 60, .18), inset -2px 0 0 rgba(0, 200, 255, .18), inset 0 0 60px rgba(0, 0, 0, .55); }
.osd-top, .osd-bar { position: absolute; left: 4%; right: 4%; z-index: 2; display: flex; align-items: center;
  color: var(--osd); font: clamp(16px, 4.6cqi, 44px)/1 var(--f-osd); letter-spacing: .02em;
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 0 6px rgba(0, 0, 0, .6); }
.osd-top { top: 6%; justify-content: space-between; gap: 2%; }
.osd-top .bat { display: inline-flex; align-items: center; gap: .2em; }
.osd-top .bat::before { content: ""; width: 1.2em; height: .6em; border: 2px solid currentColor; border-radius: 1px;
  box-shadow: 2px 2px 0 #000, inset 0 0 0 2px #000; background: linear-gradient(90deg, currentColor 0 60%, transparent 60%); }
.osd-top .sp { padding: 0 .1em; border: 2px solid currentColor; font-size: .7em; }
.osd-bar { bottom: 6%; gap: 2.5%; }
.osd-bar button { flex: 1 1 0; min-width: 0; height: clamp(28px, 7cqi, 64px); padding: 0; border: 0; cursor: pointer;
  background: rgba(90, 100, 150, .7); color: var(--osd); font: inherit; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .6);
  text-shadow: inherit; }
.osd-bar button:hover { background: rgba(120, 130, 190, .85); }
.osd-bar button[aria-pressed="true"] { background: rgba(200, 200, 230, .85); color: #111; text-shadow: none; }
.vhs-screen.is-idle .osd-bar { visibility: hidden; }

/* ---------- Links: the map legend ---------- */
.legend-wall { min-height: 100vh; padding: var(--gutter); background: #EDE4CC var(--img-map) center / var(--img-map-size); }
.legend { position: relative; max-width: 520px; margin: 48px auto; padding: 32px; background: var(--border-white);
  border: 3px double var(--map-edge); box-shadow: var(--shadow-card); }
.legend h1 { margin: 0 0 8px; font: 700 26px/32px var(--f-type); color: var(--map-edge); }
.legend p { margin: 0 0 24px; font: 400 16px/24px var(--f-type); }
.legend ul { margin: 0; padding: 0; list-style: none; }
.legend li + li { border-top: 1px solid rgba(36, 80, 138, .25); }
.legend a { display: grid; grid-template-columns: 32px 1fr auto; gap: 16px; align-items: center; padding: 12px 0;
  text-decoration: none; font: 700 18px/24px var(--f-type); }
.legend a small { font-weight: 400; font-size: 14px; color: #555; }
.legend a:hover span { color: var(--map-red); }
.legend svg { width: 32px; height: 32px; }

/* ---------- Contact: book pocket ---------- */
.endpaper { min-height: 100vh; padding: 32px var(--gutter) 48px; background: var(--pocket) var(--img-notebook);
  background-size: var(--img-notebook-size); border: 14px solid var(--cloth); }
.pocket-wrap { position: relative; max-width: 460px; margin: 48px auto 0; padding-top: 168px; }
.card { position: absolute; left: 4%; right: 4%; top: 0; height: 300px; padding: 8px 20px;
  background: var(--card) var(--img-card); background-size: var(--img-card-size); color: #1f2340;
  background-blend-mode: multiply;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.card-line { display: flex; align-items: flex-end; height: 44px; border-bottom: 1px solid rgba(30, 30, 50, .55);
  font: 400 26px/36px var(--f-hand); white-space: nowrap; overflow: hidden; }
.card-line a { text-decoration: none; }
.card-line a:hover { color: var(--map-red); }
.card-print { margin-top: 12px; font: 700 17px/24px var(--f-type); letter-spacing: .14em; text-align: center; }
.pocket { position: relative; z-index: 1; padding: 112px 32px 32px; background: var(--pocket) var(--img-notebook);
  background-size: var(--img-notebook-size); box-shadow: 0 2px 3px rgba(0, 0, 0, .18), 0 1px 0 rgba(0, 0, 0, .1);
  -webkit-mask: radial-gradient(circle 64px at 50% 0, transparent 63px, #000 64px);
  mask: radial-gradient(circle 64px at 50% 0, transparent 63px, #000 64px);
  font: 400 16px/26px var(--f-title); font-variation-settings: "SOFT" 50, "opsz" 12; text-align: justify; }
.pocket h1 { margin: 0; font: 700 19px/28px var(--f-type); letter-spacing: .16em; text-align: center; }
.pocket hr { width: 96px; margin: 20px auto; border: 0; border-top: 1.5px solid currentColor; }
.pocket p { margin: 0 0 12px; text-indent: 2em; }
.pocket .keep { margin-top: 20px; text-indent: 0; text-align: center; font: 700 15px/24px var(--f-type); letter-spacing: .12em; }
.contact-menu { display: flex; justify-content: flex-end; max-width: 860px; margin: 0 auto; }

/* ---------- Seal footer ---------- */
.seal { display: block; width: 120px; height: auto; color: var(--seal); opacity: .9; }
.seal text { font-family: var(--f-hand); }
.foot { display: flex; justify-content: center; padding: 40px 0 8px; }

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  .map { aspect-ratio: 9 / 16; }
  .frame { width: 100%; }
  .map .menu { display: none; flex-direction: column; right: 4%; top: 15%; }
  .map .menu.is-open { display: flex; }
  .menu-btn { display: grid; place-items: center; position: absolute; right: 4%; top: 4%; z-index: 5;
    width: 44px; height: 44px; padding: 0; border: 0; background: var(--border-white); box-shadow: var(--shadow-card); cursor: pointer; }
  .menu-btn i, .menu-btn i::before, .menu-btn i::after { display: block; width: 20px; height: 2px; background: var(--album-ink); position: relative; content: ""; }
  .menu-btn i::before { position: absolute; top: -6px; } .menu-btn i::after { position: absolute; top: 6px; }
  .map-tag { font-size: 20px; line-height: 28px; }
  .post-card span { font-size: max(10px, 2.4cqi); }
  .page { padding: 32px 20px 32px 28px; }
  .pin { grid-template-columns: 1fr; gap: 12px; }
  .pin-words { font-size: 24px; line-height: 32px; }
  .legend { margin: 24px auto; padding: 24px 20px; }
  .endpaper { border-width: 8px; }
  .book-head .menu { flex-wrap: wrap; }
}
.osd-date { position: absolute; right: 4%; bottom: calc(6% + clamp(28px, 7cqi, 64px) + 3%); z-index: 2; color: var(--osd);
  font: clamp(14px, 3.6cqi, 36px)/1 var(--f-osd);
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 1px 0 #000; }
.post { max-width: 860px; margin: 0 auto; }
.seal-link { display: block; text-decoration: none; }
@media (max-width: 720px) { .map { --phone: 1.6; --spread: 1.3; } }
.post-card { width: calc(var(--s) * 100% * var(--phone, 1)); }
.post-media.is-cam { padding-bottom: var(--card-border); }