/* Guestbook — every note is the back of the postcard it was written on.
   Spacing scale 8 · 16 · 24 · 32 · 48 · 64 · 96. The site's type: 11px labels, 12–13px UI, 17px intro.
   The paper and ink come from the homepage scene (painted by gallery.js); the stamps are the only colour. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-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; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #fafafa; --text: #111; --text2: rgba(17,17,17,.72); --text3: rgba(17,17,17,.45); --border: rgba(17,17,17,.1);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --hand: 'Bradley Hand', 'Segoe Print', 'Apple Chancery', 'Noto Sans JP', cursive;
  /* the card back's paper before the texture is painted (also the skeleton) — the scene's own values */
  --pc-paper: #f3ebdd; --pc-ink: #2a2827;
  --sh: 0 0 0 .5px rgba(42,36,24,.08), 0 1px 2px rgba(42,36,24,.06), 0 6px 14px -8px rgba(42,36,24,.16);
  --sh-hi: 0 0 0 .5px rgba(42,36,24,.08), 0 2px 4px rgba(42,36,24,.06), 0 16px 30px -12px rgba(42,36,24,.24);
  --sh-lg: 0 0 0 .5px rgba(42,36,24,.08), 0 2px 6px rgba(42,36,24,.06), 0 30px 70px -20px rgba(42,36,24,.32);
  --dim: rgba(32,28,22,.10);
  --link: #C8DDD4; --link-hi: #a9c8bb;
  color-scheme: light;
}
html[data-tod="morning"] { --bg: #f4f6f7; --text: #101316; --text2: rgba(16,19,22,.75); --text3: rgba(16,19,22,.45); --border: rgba(16,19,22,.1); --pc-paper: #f1ede4; --pc-ink: #2b2d30; }
html[data-tod="golden"]  { --bg: #fbf3ea; --text: #1b1511; --text2: rgba(27,21,17,.75); --text3: rgba(27,21,17,.45); --border: rgba(27,21,17,.1); --pc-paper: #f6e6d0; --pc-ink: #36271e; }
html[data-theme="dark"] {
  --bg: #111; --text: #f1efeb; --text2: rgba(241,239,235,.72); --text3: rgba(241,239,235,.46); --border: rgba(255,255,255,.12);
  --pc-paper: #2a231c; --pc-ink: #f0e3cb;
  --sh: 0 0 0 .5px rgba(255,236,200,.05), 0 1px 2px rgba(0,0,0,.4), 0 8px 18px -8px rgba(0,0,0,.6);
  --sh-hi: 0 0 0 .5px rgba(255,236,200,.07), 0 2px 4px rgba(0,0,0,.4), 0 18px 34px -12px rgba(0,0,0,.75);
  --sh-lg: 0 0 0 .5px rgba(255,236,200,.07), 0 2px 6px rgba(0,0,0,.4), 0 34px 80px -20px rgba(0,0,0,.85);
  --dim: rgba(0,0,0,.32);
  color-scheme: dark;
}
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
html.is-locked { overflow: hidden; }
body { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; min-height: 100vh; transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out); }
html[data-lang="ja"] body { font-family: 'Plus Jakarta Sans', 'Hiragino Sans', 'Noto Sans JP', sans-serif; }
button { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 1.5px solid var(--text); outline-offset: 3px; border-radius: 3px; }
.g-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ----------
   Same column as the homepage .m-page. scrollbar-gutter would otherwise sit this box 7.5px left of it,
   so the 720 column is centered in the visual viewport (100vw), the way the timeline bar is. */
.g-shell { width: min(720px, 100%); max-width: none; margin-left: max(0px, calc((100vw - 720px) / 2)); margin-right: 0; padding: 80px 24px 0; }
.g-nav { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-bottom: 58px; }
.g-controls { display: flex; align-items: center; gap: 10px; }
.g-lang { position: relative; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 6px;
  border: 0; background: transparent; color: var(--text2); font-size: 12px; font-weight: 500; letter-spacing: .03em; cursor: pointer;
  transition: color 0.2s, transform 140ms var(--ease-out); }
.g-lang:hover { color: var(--text); }
.g-lang:active { transform: scale(.96); }
.g-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; }
.g-header h1 { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.g-count { font-size: 11px; letter-spacing: .04em; color: var(--text3); font-variant-numeric: tabular-nums; text-align: right; min-height: 1.5em; }
.g-intro { grid-column: 1 / -1; max-width: 610px; margin-top: 10px; color: var(--text2); font-size: 17px; line-height: 1.8; letter-spacing: .035em; text-wrap: pretty; }
.g-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; margin-top: 22px; }
.g-back, .g-shuffle { position: relative; display: inline-flex; align-items: center; min-height: 40px; font-size: 12px; text-decoration: none;
  border: 0; background: none; padding: 0; cursor: pointer; transition: color 160ms ease, transform 140ms var(--ease-out), opacity 160ms ease; }
.g-back { color: var(--text3); }
.g-shuffle { color: var(--text); }
.g-shuffle:disabled { opacity: .4; cursor: default; }
.g-back::after, .g-shuffle::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor;
  transform: scaleX(.35); transform-origin: left; opacity: .35; transition: transform 220ms var(--ease-out), opacity 160ms ease; }
.g-back:hover { color: var(--text); }
.g-back:hover::after, .g-shuffle:not(:disabled):hover::after { transform: none; opacity: .75; }
.g-back:active, .g-shuffle:not(:disabled):active, .g-shuffle.is-press { transform: scale(.96); }

/* ---------- the deck ---------- */
.g-grid { --cols: 1; max-width: 1232px; margin: 0 auto; padding: 48px 24px 120px; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 32px 24px; }
@media (min-width: 600px) { .g-grid { --cols: 2; } }
@media (min-width: 960px) { .g-grid { --cols: 3; } }
@media (min-width: 1280px) { .g-grid { --cols: 4; } }
@media (max-width: 640px) { .g-shell { padding: 28px 24px 0; } .g-nav { margin-bottom: 44px; } .g-header { grid-template-columns: 1fr; } .g-count { text-align: left; }
  .g-intro { font-size: 15px; line-height: 1.75; } .g-grid { padding: 32px 20px 96px; gap: 24px; } }
@media (max-width: 600px) { .g-controls { gap: 4px; margin-right: -6px; } }
@media (max-width: 359px) { .g-grid { padding-inline: 16px; } }

.gc { position: relative; display: block; aspect-ratio: 4 / 3; container-type: inline-size; border-radius: 5px; color: var(--pc-ink);
  background: var(--pc-paper) var(--paper-sm, none) var(--bp, 50% 50%) / 112% 112% no-repeat;
  rotate: var(--r, 0deg); box-shadow: var(--sh); text-decoration: none; -webkit-tap-highlight-color: transparent; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: translate 240ms var(--ease-out), box-shadow 240ms var(--ease-out), scale 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .gc:not(.gc-skel):hover { translate: 0 -3px; box-shadow: var(--sh-hi); }
}
.gc:not(.gc-skel):active, .gc.is-press { scale: .98; transition-duration: 240ms, 240ms, 90ms; }
.gc:focus-visible { outline: 1.5px solid var(--text); outline-offset: 4px; border-radius: 7px; }
.gc.is-src { visibility: hidden; }

/* the card back, scaled for the deck. Sizes follow the card (cqw) inside the site's type range. */
.gc-body { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 1px 28%; column-gap: 4.6cqw;
  padding: 6.4cqw 6.4cqw 5.4cqw; color: var(--pc-ink); --line: color-mix(in srgb, var(--pc-ink) 22%, transparent); pointer-events: none; text-align: left; }
.g-lab { font-size: 11px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; opacity: .55; white-space: nowrap; }
.gc-left { display: flex; flex-direction: column; min-width: 0; }
.gc-msg { --lh: 1.5em; font-family: var(--hand); font-size: clamp(15px, 6.1cqw, 21px); line-height: var(--lh); letter-spacing: 0; height: calc(var(--lh) * 3); flex: none;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), var(--line) calc(var(--lh) - 1px) var(--lh)); }
.gc-sig { position: relative; flex: 1 1 auto; min-height: 0; container-type: size; margin-top: 1.6cqw; }
.g-ink { position: absolute; left: 0; bottom: 6%; display: block; aspect-ratio: var(--ar, 3); width: min(calc(var(--fw, .6) * 100cqw), calc(88cqh * var(--ar, 3)));
  background: currentColor; -webkit-mask: var(--sig) center / 100% 100% no-repeat; mask: var(--sig) center / 100% 100% no-repeat; }
.gc-from, .gc-to { display: flex; align-items: baseline; gap: 2.2cqw; height: calc(clamp(15px, 6cqw, 20px) * 1.65); box-shadow: inset 0 -1px 0 var(--line); white-space: nowrap; overflow: hidden; flex: none; }
.gc-name, .gc-toname { font-family: var(--hand); font-size: clamp(14px, 5.7cqw, 19px); line-height: 1.65; letter-spacing: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.is-anon { opacity: .5; }
.gc-body .g-lab { letter-spacing: .12em; }
html[data-lang="ja"] .gc-toname { font-size: clamp(11px, 4.4cqw, 14px); }
.gc-rule { background: var(--line); margin: 2cqw 0; }
.gc-right { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.gc-mark { position: relative; align-self: flex-end; width: 23cqw; aspect-ratio: 1; margin: -1cqw -1cqw 0 0; }
.gc-mark .g-pm { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-pm { color: var(--pc-ink); opacity: .62; rotate: -9deg; overflow: visible; }
.g-pm text { font-family: Georgia, 'Times New Roman', serif; }
/* a stamp when the note knows where Raufan was: the scene in miniature, the postmark over its corner */
.g-stamp { position: absolute; right: 0; top: 0; width: 100%; aspect-ratio: 4 / 3.3; padding: 4.5%; background: #fbf8f1; rotate: 2deg;
  -webkit-mask: radial-gradient(circle at 3px 3px, transparent 1.7px, #000 2px) -3px -3px / 6px 6px round, linear-gradient(#000 0 0) 3px 3px / calc(100% - 6px) calc(100% - 6px) no-repeat;
          mask: radial-gradient(circle at 3px 3px, transparent 1.7px, #000 2px) -3px -3px / 6px 6px round, linear-gradient(#000 0 0) 3px 3px / calc(100% - 6px) calc(100% - 6px) no-repeat; }
html[data-theme="dark"] .g-stamp { background: #ebe2d1; }
.g-stamp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gc-mark.has-stamp .g-pm { inset: auto; width: 78%; height: auto; left: -38%; top: 46%; }

/* loading: blank paper in the same slots, so nothing moves when the notes arrive */
.gc-skel { cursor: default; background: var(--pc-paper); }
.gc-skel::before, .gc-skel::after { content: ''; position: absolute; opacity: .5; animation: g-pulse 1.6s ease-in-out infinite; }
.gc-skel::before { left: 6.4cqw; top: 6.4cqw; width: 52%; height: 27cqw;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(9cqw - 1px), color-mix(in srgb, var(--pc-ink) 18%, transparent) calc(9cqw - 1px) 9cqw); }
.gc-skel::after { right: 7cqw; top: 6cqw; width: 19cqw; aspect-ratio: 1; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--pc-ink) 22%, transparent); }
@keyframes g-pulse { 50% { opacity: .9; } }

/* the last slot: an unwritten card */
.gc-leave { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 5px; border: 1px dashed var(--border); color: var(--text3); font-size: 12px; text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, scale 120ms var(--ease-out); }
.gc-leave:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 24%, transparent); }
.gc-leave:active { scale: .98; }

/* empty / error */
.g-state { max-width: 720px; margin: 0 auto; padding: 48px 24px 120px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.g-state[hidden], .g-grid[hidden] { display: none; }
.g-shuffle.is-moot { visibility: hidden; }
.g-state .gc { width: min(320px, 100%); cursor: default; }
.g-state .gc::after { content: ''; position: absolute; right: 7cqw; top: 6cqw; width: 19cqw; aspect-ratio: 1; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--pc-ink) 30%, transparent); }
.g-state .gc::before { content: ''; position: absolute; left: 6.4cqw; top: 6.4cqw; width: 52%; height: 27cqw;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(9cqw - 1px), color-mix(in srgb, var(--pc-ink) 18%, transparent) calc(9cqw - 1px) 9cqw); }
.g-state.is-error .gc { opacity: .6; }
.g-state p { font-size: 13px; line-height: 1.6; letter-spacing: .01em; color: var(--text2); text-align: center; }
.g-link { font: inherit; letter-spacing: inherit; line-height: inherit; color: var(--text); border: 0; background: none; padding: 0; cursor: pointer; display: inline-block;
  text-decoration: underline dashed var(--link); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: transform 120ms var(--ease-out), text-decoration-color 160ms ease; }
.g-link:hover { text-decoration-color: var(--link-hi); }
.g-link:active { transform: translateY(1px); }
.g-link:focus-visible { outline: 1px dashed currentColor; outline-offset: 4px; border-radius: 2px; }
.g-dot { color: var(--text3); margin: 0 8px; }

/* ---------- the opened note ---------- */
.nv { position: fixed; inset: 0; z-index: 50; }
.nv[hidden] { display: none; }
.nv.is-closing { pointer-events: none; }
.nv.is-closing .nv-card { pointer-events: auto; }
.nv-dim { position: absolute; inset: 0; background: var(--dim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.nv-card { position: absolute; border-radius: 8px; overflow: hidden; color: var(--pc-ink); container-type: inline-size; touch-action: none; outline: none;
  background: var(--pc-paper) var(--paper-lg, none) center / 100% 100% no-repeat; box-shadow: var(--sh-lg); will-change: transform; }
.nv-a { position: absolute; left: 0; top: 0; transform-origin: 0 0; container-type: inline-size; pointer-events: none; }
.nv-a .gc-body { position: absolute; }
.nv-b { position: absolute; inset: 0; }
.nv-cap { position: absolute; left: 0; right: 0; display: flex; justify-content: center; align-items: baseline; font-size: 13px; line-height: 1.6; letter-spacing: .01em; color: var(--text2); white-space: nowrap; }
.nv-pos { font-variant-numeric: tabular-nums; color: var(--text3); }
.nv-cap .g-dot { margin: 0 8px; }

/* the large back: the homepage card, filled in */
.pb { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 1px clamp(170px, 32%, 230px); column-gap: clamp(20px, 4.4cqw, 32px);
  padding: 7.5% 7% 6.5%; font-size: 13px; line-height: 1.5; letter-spacing: 1px; --line: color-mix(in srgb, var(--pc-ink) 22%, transparent); }
.pb-left { display: flex; flex-direction: column; min-width: 0; }
.pb-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: clamp(14px, 3.6cqw, 26px); }
.pb-title { font-size: 13px; }
.pb-msg .g-lab, .pb-sig .g-lab, .pb-from .g-lab { display: block; margin-bottom: 2px; }
.pb-text { font-family: var(--hand); font-size: 23px; line-height: 34px; letter-spacing: 0; min-height: 68px; overflow-wrap: anywhere;
  background: repeating-linear-gradient(to bottom, transparent 0 33px, var(--line) 33px 34px); }
.pb-sig { flex: 1 1 auto; min-height: 56px; margin-top: clamp(10px, 2.6cqw, 20px); display: flex; flex-direction: column; }
.pb-sigbox { position: relative; flex: 1 1 auto; min-height: 0; container-type: size; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--pc-ink) 30%, transparent); }
.pb-sigbox .g-ink { bottom: 8%; }
.pb-from { margin-top: clamp(10px, 2.4cqw, 16px); }
.pb-name { display: block; font-family: var(--hand); font-size: 23px; line-height: 1.25; padding: 2px 0; letter-spacing: 0; box-shadow: inset 0 -1px 0 var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-rule { background: var(--line); margin: 4% 0; position: relative; }
.pb-credit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; padding: 0 10px; background: var(--pc-paper); font-size: 8px; letter-spacing: .3em; text-transform: uppercase; opacity: .5; }
.pb-right { display: flex; flex-direction: column; min-width: 0; position: relative; }
.pb-mark { position: relative; align-self: flex-end; width: clamp(64px, 15cqw, 104px); aspect-ratio: 4 / 3.3; }
.pb-mark .g-stamp { width: 100%; }
.pb-mark .g-pm { position: absolute; width: clamp(110px, 24cqw, 160px); right: -6%; top: 0; transform-origin: 62% 50%; }
.pb-mark.has-stamp .g-pm { right: 26%; top: 40%; width: clamp(96px, 22cqw, 150px); }
.pb-addr { margin-top: auto; }
.pb-addr > span { display: flex; align-items: baseline; gap: 10px; height: 38px; line-height: 38px; box-shadow: inset 0 -1px 0 var(--line); white-space: nowrap; overflow: hidden; }
.pb-toname { font-family: var(--hand); font-size: 24px; letter-spacing: 0; }
.pb-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: clamp(14px, 3cqw, 22px); }
.pb-close { font-size: 11px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--pc-ink); background: none; border: 0; padding: 7px 14px; margin-right: -14px;
  border-radius: 999px; cursor: pointer; opacity: .6; transition: opacity 160ms ease, background-color 160ms ease, transform 120ms var(--ease-out); }
.pb-close:hover { opacity: .9; background: color-mix(in srgb, var(--pc-ink) 8%, transparent); }
.pb-close:active { transform: scale(.96); }
.pb-close:focus-visible { outline: 1.5px solid var(--pc-ink); outline-offset: 2px; border-radius: 999px; }
html[data-lang="ja"] .pb-text, html[data-lang="ja"] .pb-name { font-size: 19px; }
/* the postmark comes down once when the card opens (homepage values) */
.nv .pb .g-pm { opacity: 0; transform: rotate(-5deg) scale(1.35); }
.nv .pb.is-stamped .g-pm { opacity: .62; transform: none; transition: opacity 90ms ease-out, transform 260ms cubic-bezier(0.25, 1.4, 0.5, 1); }
.nv .pb.is-still .g-pm { opacity: .62; transform: none; transition: none; }

/* phones: the homepage's one-column back */
@container (max-width: 520px) {
  .pb { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; column-gap: 12px; padding: 6.5% 7% 5%;
    grid-template-areas: "head mark" "msg msg" "sig sig" "from actions"; }
  .pb-left, .pb-right { display: contents; }
  .pb-rule, .pb-addr, .pb-title, .pb-msg .g-lab, .pb-sig .g-lab, .pb-from .g-lab { display: none; }
  .pb-head { grid-area: head; margin: 0 0 6px; }
  .pb-mark { grid-area: mark; width: 54px; align-self: start; }
  .pb-mark .g-pm { width: 112px; right: -16px; top: -8px; }
  .pb-mark .g-pm .pm-waves { display: none; }
  .pb-mark.has-stamp .g-pm { width: 64px; right: 24px; top: 10px; }
  .pb-msg { grid-area: msg; }
  .pb-text { font-size: 20px; line-height: 30px; min-height: 60px; background: repeating-linear-gradient(to bottom, transparent 0 29px, var(--line) 29px 30px); }
  .pb-sig { grid-area: sig; margin-top: 2px; min-height: 36px; }
  .pb-from { grid-area: from; margin-top: 6px; align-self: end; min-width: 0; }
  .pb-name { font-size: 20px; }
  .pb-actions { grid-area: actions; margin: 0; align-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .gc, .gc:hover { translate: none !important; transition: box-shadow 200ms ease-out; }
  .gc-skel::before, .gc-skel::after { animation: none; }
  .nv .pb .g-pm { opacity: .62; transform: none; transition: none; }
}