/*
 * 絵巻 EMAKI - the site as a handscroll.
 *
 * A handscroll is read by unrolling it: the right hand feeds paper out, the left hand takes it up,
 * and the story crosses the reader rather than the reader descending the story. That is the whole
 * reason this page goes sideways, and it is why the rollers at the edges thicken and thin as you
 * go - the page is not a gimmick with a horizontal scrollbar, it is a scroll being opened.
 *
 * The mechanism is the ordinary one turned ninety degrees. The document stays as tall as the track
 * is wide, so the wheel, the trackpad, a finger, Page Down, Home and End all keep working exactly
 * as they were built to; the track is translated by the scroll offset. Nothing is intercepted.
 *
 * The palette is the game's, and nothing outside it:
 *
 *     ink        #050710   the night everything sits on
 *     ink raised #0b101c   a card
 *     bone       #f4ecdc   type
 *     gold       #e0b877   what is being pointed at
 *     gold deep  #a9834a   rules, borders, gold under bone type
 *     shu        #c1352a   the seal, once
 */

:root {
  --ink: #050710;
  --ink-raised: #0b101c;
  --ink-line: #1a2130;
  --bone: #f4ecdc;
  --bone-dim: #cfc6b2;
  --ash: #a1937a;
  --gold: #e0b877;
  --gold-deep: #a9834a;
  --shu: #c1352a;

  --panel-pad: clamp(2.5rem, 6vw, 7rem);
  --roller: clamp(18px, 2.2vw, 34px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { cursor: url('../image/cursor.png') 0 0, auto; scroll-behavior: auto; }
a, button, [role="button"] { cursor: url('../image/cursor.png') 0 0, pointer; }
@media (pointer: coarse) { html, a, button, [role="button"] { cursor: auto; } }

body {
  font-family: 'Quicksand', system-ui, sans-serif;
  background: var(--ink);
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
}

/* height: auto, or an intrinsic height attribute fights a css width and the picture squashes. */
img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--gold); color: #150f04; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ============================================================================
   The sky behind the paper
   ========================================================================= */

/*
 * Fixed, so it does not travel with the track. The moon is at infinity and the mountains are not,
 * which is the only parallax on the page and the only one it needs.
 */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 14% 12%, #1b2333 0%, #0a0f1b 55%, transparent 100%),
    linear-gradient(to bottom, #04050c 0%, #070a14 46%, #0b0f1a 100%);
}

/*
 * 無 - nothing, and the first character of the player's name. A watermark, not a logo: the alpha is
 * in the colour so it stays one flat layer.
 */
.mu {
  position: fixed;
  right: -4vw;
  bottom: -14vh;
  font-family: 'Yuji Boku', serif;
  font-size: clamp(22rem, 46vw, 60rem);
  line-height: 1;
  color: rgba(217, 178, 119, 0.045);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* ============================================================================
   The rollers
   ========================================================================= */

/*
 * The two ends of the scroll. The left is what has been read and the right is what has not, and
 * their widths are driven from the scroll position - so the paper visibly moves from one to the
 * other as you go. Lacquered wood: a warm dark core with a gold band at each end.
 */
.roller {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--roller);
  z-index: 40;
  pointer-events: none;
  background:
    linear-gradient(to right, #0a0a0c 0%, #241a10 22%, #3a2a17 50%, #241a10 78%, #0a0a0c 100%);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.75);
}

.roller.left  { left: 0;  transform: scaleX(var(--rolled, 0.3)); transform-origin: left; }
.roller.right { right: 0; transform: scaleX(var(--unrolled, 1.4)); transform-origin: right; }

/* The gold caps, so the roller reads as a turned rod rather than a dark stripe. */
.roller::before,
.roller::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(26px, 3vh, 44px);
  background: linear-gradient(to right, #6b5220, var(--gold-deep), #6b5220);
}
.roller::before { top: 0; }
.roller::after  { bottom: 0; }

/* ============================================================================
   The track
   ========================================================================= */

/*
 * The document is as tall as the track is wide. Scrolling down moves the track left, which is the
 * whole trick: every input that already knew how to scroll a page still works, and none of them had
 * to be intercepted to do it.
 */
.scroll {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 10;
}

.track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
  will-change: transform;
}

.panel {
  position: relative;

  /*
   * Sized, not left to work it out. A flex item with an auto basis takes its width from its content,
   * and content that sizes itself as a percentage of the item then has nothing to resolve against -
   * so a panel of images came out three screens wide and pushed everything after it off the path.
   */
  flex: 0 0 auto;
  width: 100vw;

  height: 100%;
  padding: clamp(4rem, 9vh, 7rem) var(--panel-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/*
 * The seam between two sheets of paper. A handscroll is not one sheet - it is a dozen pasted end to
 * end, and the joins are visible. Here they are what tells you a section has ended.
 */
.panel + .panel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--gold-deep) 18%, var(--gold-deep) 82%, transparent);
  opacity: 0.55;
}

/*
 * A panel that is read down rather than across.
 *
 * The panel keeps the frame's height and clips; the sheet inside it is as tall as its content and
 * is translated. One gesture crosses to it, descends it, and carries on across, and the wheel never
 * changes what it means.
 */
/*
 * Given a width rather than left to find one. The sheet inside it is sized as a percentage of the
 * panel, and a percentage against an auto-width flex item resolves to auto - so the grid inside
 * sized itself to the intrinsic width of its images and the panel came out three screens wide.
 */
.panel-tall { justify-content: flex-start; padding: 0; }

.panel-inner {
  width: 100%;
  max-width: 1560px;
  margin-left: auto;
  margin-right: auto;

  /*
   * A quarter screen of nothing at the foot.
   *
   * Without it the vertical segment ends on the exact pixel the last block finishes, so the page
   * leaves sideways the instant that block arrives - and reading it means stopping the wheel on one
   * pixel. The trailing room is the beat that lets you finish a sentence before the paper moves on.
   */
  padding: clamp(4rem, 9vh, 7rem) var(--panel-pad) calc(clamp(4rem, 9vh, 7rem) + 15vh);
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 10vh, 7rem);
  will-change: transform;
}

/*
 * A block is a screenful.
 *
 * Without a height of its own the sheet is only as tall as its prose, and a panel that overhangs
 * the frame by three hundred pixels is a panel you fall through before you have read it. Each block
 * holding a frame is what makes the descent a descent.
 */
.block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: calc(100vh - 2 * clamp(4rem, 9vh, 7rem));
}

.block.flip > *:first-child { order: 1; }

/* The tell that this one goes down. Said once, at the head of the sheet. */
.descend {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ash);
}

.descend svg { width: 12px; height: 30px; stroke: var(--gold); fill: none; stroke-width: 2; animation: nudge-down 2.4s ease-in-out infinite; }
@keyframes nudge-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* The vertical name of the section, running down the seam the way a scroll is labelled. */
.panel-mark {
  position: absolute;

  /* Clear of the roller at its widest, and still inside the panel's own margin. */
  left: calc(var(--roller) * 1.5 + 0.4rem);

  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: 'Yuji Boku', serif;
  font-size: clamp(0.9rem, 1.3vw, 1.35rem);
  letter-spacing: 0.4em;
  color: var(--gold-deep);
  user-select: none;
}

/* ============================================================================
   Type
   ========================================================================= */

h1, h2, h3 { font-weight: 700; line-height: 1.1; }

.eyebrow {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.eyebrow .jp {
  font-family: 'Yuji Boku', serif;
  letter-spacing: 0.2em;
  margin-right: 0.9em;
  color: var(--bone-dim);
}

h2 {
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  color: var(--bone);
  margin-bottom: 1.4rem;
}

/* The rule under a heading, which is the same gold rule the game's own screens use. */
h2 + .rule, .rule {
  width: clamp(120px, 12vw, 210px);
  height: 2px;
  background: var(--gold-deep);
  margin-bottom: 1.8rem;

  /* Cut rather than faded in, which is what the game's own rules do. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) 0.15s;
}

.rule.seen, .seen .rule, .seen.rule { transform: scaleX(1); }

p {
  font-size: clamp(0.98rem, 1.15vw, 1.16rem);
  line-height: 1.75;
  color: var(--bone-dim);
  max-width: 46ch;
}

p + p { margin-top: 1.1rem; }

/* ============================================================================
   Panel: the mark
   ========================================================================= */

/*
 * The mark and the trailer, side by side.
 *
 * The right of this panel was empty, and the one thing a stranger wants in the first five seconds
 * is to see the game move. Putting the trailer anywhere else is asking them to travel for it.
 */
/*
 * The mark and the trailer, side by side inside a measure.
 *
 * The panel is as wide as the frame, and the frame can be very wide. Laying the two columns out
 * against the panel itself means either fixed tracks - which leave half a 4K display empty - or
 * proportional ones, which drag the pair apart until the gutter is a hundred and fifty pixels of
 * nothing. The pair gets a measure of its own and is centred in whatever the frame turns out to be.
 */
.panel-title { display: flex; align-items: center; justify-content: center; }

.title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  width: 100%;
  max-width: 1460px;
}

.title-col { display: flex; flex-direction: column; align-items: flex-start; }

/* Held to the left of its own column, so the gap reads as one gutter and not two. */
.title-media { display: flex; flex-direction: column; gap: 1rem; width: 100%; }

.title-media .eyebrow { margin-bottom: 0; }

.title-lockup {
  width: clamp(300px, 34vw, 620px);
  margin-bottom: 2.2rem;
}

.coming {
  font-size: 0.78rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 2.4rem;
}

.cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/*
 * Gold with ink in it is what "chosen" looks like everywhere in this game, so the primary action is
 * the only gold thing in the panel and the secondary is the outline of one.
 */
.btn {
  display: inline-block;
  padding: 0.85rem 1.9rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--gold-deep);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn-primary { background: var(--gold); border-color: var(--gold); color: #150f04; }
.btn-primary:hover { background: #ecc788; border-color: #ecc788; }

.btn-outline { background: transparent; color: var(--gold); }
.btn-outline:hover { background: var(--gold); border-color: var(--gold); color: #150f04; }

/*
 * The stack on the title panel, which is the game's own main menu.
 *
 * A row is type in the dark until it is pointed at, and then a stroke of gold leaf is painted under
 * it left to right with the label sitting in it as ink. It is the piece of the interface worth
 * carrying onto a web page, because it is the piece nobody has seen anywhere else.
 */
.stack { display: flex; flex-direction: column; align-items: flex-start; margin-top: 2rem; }

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.45rem 1.6rem 0.45rem 1.4rem;
  background: none;
  border: 0;
  font: inherit;
  text-decoration: none;
  color: inherit;
  transition: transform 0.16s cubic-bezier(0.2, 1.4, 0.5, 1);
}

/*
 * The stroke, drawn with scaleX off its left edge. Scaling keeps the ragged tip at the leading edge,
 * which is where a brush tip is; a wipe would slide a finished stroke into place instead.
 */
.row::before {
  content: '';
  position: absolute;
  left: -1.9rem;
  top: 0.1rem;
  bottom: 0.1rem;
  width: calc(100% + 5rem);
  z-index: -1;
  background: url('../image/brush.png') left center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.row:hover, .row:focus-visible { transform: translateX(14px); outline: none; }
.row:hover::before, .row:focus-visible::before { transform: scaleX(1); }

.row-jp {
  font-family: 'Yuji Boku', serif;
  font-size: 1.05rem;
  color: var(--gold-deep);
  width: 1.6em;
  transition: color 0.16s ease;
}

.row-en {
  font-size: clamp(1.05rem, 1.4vw, 1.42rem);
  font-weight: 700;
  color: var(--bone-dim);
  transition: color 0.16s ease;
}

/*
 * Ink on gold leaf. The label carries its own patch of the stroke's mid tone, sized to the words,
 * so the type stays readable where the brush thins out.
 */
.row:hover .row-en, .row:focus-visible .row-en { color: #150f04; background: #ddb985; }
.row:hover .row-jp, .row:focus-visible .row-jp { color: #4a3413; }

/* The hint that the page goes sideways. It has to be said once, plainly. */
.unroll {
  position: absolute;
  right: clamp(2rem, 5vw, 6rem);
  bottom: clamp(2.5rem, 6vh, 5rem);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ash);
}

.unroll svg { width: 30px; height: 12px; stroke: var(--gold); fill: none; stroke-width: 2; }

.unroll svg { animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }

/* ============================================================================
   Panel: prose and a picture
   ========================================================================= */

.panel-title { width: max(100vw, 1420px); }
.panel-about { width: max(100vw, 1340px); }

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* A picture on this site is a card: ink, a gold hairline, and nothing else. */
.card {
  background: var(--ink-raised);
  border: 1px solid rgba(169, 131, 74, 0.4);
  overflow: hidden;
}

.card img { width: 100%; height: auto; }

/* ============================================================================
   Panel: features
   ========================================================================= */

.panel-feature { width: max(100vw, 1280px); }

.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.feature-grid.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.feature-grid.flip .feature-text { order: -1; }

h3 {
  font-size: clamp(1.35rem, 2vw, 2.05rem);
  color: var(--bone);
  margin-bottom: 0.9rem;
}

/* ============================================================================
   Video and gallery
   ========================================================================= */

.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-raised);
  border: 1px solid rgba(169, 131, 74, 0.4);
  overflow: hidden;
}

.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; transition: opacity 0.25s ease; }
.video-facade:hover img { opacity: 0.92; }
.video-facade iframe { width: 100%; height: 100%; border: 0; }

/*
 * The play mark is two borders on a rotated square rather than a triangle glyph, for the same
 * reason the game draws its chevrons that way: a missing glyph renders as nothing at all.
 */
.play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(56px, 5vw, 84px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(5, 7, 16, 0.55);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.video-facade:hover .play { background: var(--gold); transform: translate(-50%, -50%) scale(1.06); }

.play span {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid var(--gold);
}

.video-facade:hover .play span { border-left-color: #150f04; }

/*
 * Wider than it needs to be, on purpose. The screens are looked at rather than read, so the panel
 * carries extra paper either side of them: it costs a little more scroll to leave, which is what
 * makes it feel like somewhere you stopped rather than somewhere you passed.
 */
.panel-gallery { width: max(100vw, 1500px); }

.gallery {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(0.8rem, 1.4vw, 1.4rem);
}

.shot {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ink-raised);
  border: 1px solid rgba(169, 131, 74, 0.32);
  overflow: hidden;
}

.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter 0.3s ease; filter: saturate(0.9); }
.shot:hover img { transform: scale(1.04); filter: saturate(1.05); }

/* ============================================================================
   Panel: the end of the scroll
   ========================================================================= */

.panel-end { align-items: flex-start; }

.seal { width: clamp(64px, 6vw, 104px); margin-bottom: 1.8rem; }

.socials { display: flex; gap: 1.1rem; margin-top: 2rem; }

.socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(169, 131, 74, 0.45);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.socials svg { width: 20px; height: 20px; fill: var(--gold); transition: fill 0.2s ease; }
.socials a:hover { background: var(--gold); border-color: var(--gold); }
.socials a:hover svg { fill: #150f04; }

.colophon {
  margin-top: 3rem;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ash);
}

.colophon a { color: var(--gold); text-decoration: none; }
.colophon a:hover { text-decoration: underline; }

/* ============================================================================
   Chrome
   ========================================================================= */

.brand {
  position: fixed;
  left: calc(var(--roller) + clamp(1.2rem, 2.5vw, 2.5rem));
  top: clamp(1.2rem, 3vh, 2.2rem);
  z-index: 56;
}

.brand img { width: clamp(96px, 9vw, 140px); opacity: 0.9; }

.menu {
  position: fixed;
  right: calc(var(--roller) + clamp(1.2rem, 2.5vw, 2.5rem));
  top: clamp(1.2rem, 3vh, 2.2rem);
  z-index: 50;
  display: flex;
  gap: clamp(1rem, 2vw, 2.2rem);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.menu a {
  color: var(--bone-dim);
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.menu a:hover, .menu a.here { color: var(--bone); border-bottom-color: var(--gold); }

/*
 * How much of the scroll is open. A rule with a mark on it, which is what a handscroll gives you by
 * how thick each roller has become - this is the same reading for anyone who cannot see the rollers.
 */
.progress {
  position: fixed;
  left: calc(var(--roller) + 2rem);
  right: calc(var(--roller) + 2rem);
  bottom: clamp(1rem, 2.4vh, 1.8rem);
  height: 2px;
  background: var(--ink-line);
  z-index: 50;
}

.progress i {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--gold-deep);
}

.progress b {
  position: absolute;
  top: 50%;
  left: var(--progress, 0%);
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  background: var(--gold);
}

/*
 * The bar that takes over once the title is off the paper.
 *
 * The title panel carries the menu, the way the game's own title screen does - so this is not a
 * second navigation, it is the same one following you once the first is out of sight. It arrives on
 * the same trigger as the roll-up and marks the section you are in with the gold rule that marks
 * everything else in this interface.
 */
.topbar {
  position: fixed;
  left: var(--roller);
  right: var(--roller);
  top: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1rem, 2vw, 2.2rem);
  padding: 0.85rem clamp(1.5rem, 3vw, 3rem) 0.85rem clamp(9rem, 14vw, 15rem);
  background: linear-gradient(to bottom, rgba(5, 7, 16, 0.95) 0%, rgba(5, 7, 16, 0.82) 70%, rgba(5, 7, 16, 0) 100%);
  border-bottom: 1px solid rgba(169, 131, 74, 0);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.topbar.up {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  border-bottom-color: rgba(169, 131, 74, 0.4);
}

.topbar a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.topbar a .jp {
  font-family: 'Yuji Boku', serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
  text-transform: none;
  transition: color 0.18s ease;
}

.topbar a:hover { color: var(--bone); border-bottom-color: rgba(169, 131, 74, 0.6); }
.topbar a:hover .jp { color: var(--gold); }

/* Where you are, marked the way everything chosen is marked. */
.topbar a.here { color: var(--bone); border-bottom-color: var(--gold); }
.topbar a.here .jp { color: var(--gold); }

/*
 * Back to the start, once there is a start to go back to. A handscroll is rolled up from the end
 * you finished at, and this is that with one press.
 */
.to-top {
  position: fixed;
  /* Right, where the paper is still coming from. The left is where the prose sets its margin. */
  right: calc(var(--roller) + clamp(1.2rem, 2.5vw, 2.5rem));
  bottom: clamp(2.6rem, 6vh, 4.5rem);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1.2rem;
  background: rgba(11, 16, 28, 0.85);
  border: 1px solid rgba(169, 131, 74, 0.45);
  color: var(--gold);
  font-family: 'Quicksand', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, color 0.2s ease;
}

.to-top.up { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--gold); color: #150f04; border-color: var(--gold); }
.to-top .jp { font-family: 'Yuji Boku', serif; letter-spacing: 0.1em; font-size: 0.95rem; }

/* ============================================================================
   Lightbox
   ========================================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  background: rgba(5, 7, 16, 0.94);
  padding: clamp(1rem, 5vw, 5rem);
}

.lightbox.open { display: grid; }
.lightbox img { max-width: 100%; max-height: 86vh; border: 1px solid rgba(169, 131, 74, 0.5); }

.lightbox button {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(169, 131, 74, 0.5);
  color: var(--gold);
  font-size: 1.4rem;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}

.lightbox button:hover { background: var(--gold); color: #150f04; }

.lb-close { top: clamp(1rem, 3vh, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb-prev  { left: clamp(1rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-next  { right: clamp(1rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }

/* ============================================================================
   Arriving
   ========================================================================= */

[data-in] { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-in].seen { opacity: 1; transform: none; }

/* ============================================================================
   Narrow, and no script
   ========================================================================= */

/*
 * A scroll needs a table to be opened on. On a phone there is not one, so the paper is cut into
 * pages and stacked - which is what happened to the handscroll historically as well.
 */
@media (max-width: 900px), (max-height: 520px) {
  .scroll { position: static; overflow: visible; }
  .track { position: static; display: block; height: auto; transform: none !important; }
  /*
   * Every panel gives up the width it was given for the track. Stated one by one, because each of
   * them names itself to be wider than the frame and a bare .panel rule is the same specificity -
   * on a phone that left the title panel fourteen hundred pixels wide inside a three-ninety window,
   * and everything on it ran off the right edge.
   */
  .panel,
  .panel-title,
  .panel-about,
  .panel-feature,
  .panel-features,
  .panel-gallery,
  .panel-end,
  .panel-tall {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    padding: clamp(3rem, 10vw, 5rem) clamp(1.25rem, 6vw, 3rem);
  }

  /* A logo pinned over the top-left corner of a phone screen is a logo over the title. */
  .brand { position: static; padding: clamp(1.5rem, 6vw, 3rem) clamp(1.25rem, 6vw, 3rem) 0; }

  /* No track to measure, so nothing to report. */
  .progress { display: none; }

  .title-media { max-width: 100%; }
  .cta { width: 100%; }
  .btn { flex: 1 1 auto; text-align: center; }
  .panel + .panel::before { left: clamp(1.25rem, 6vw, 3rem); right: clamp(1.25rem, 6vw, 3rem); top: 0; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(to right, transparent, var(--gold-deep) 18%, var(--gold-deep) 82%, transparent); }
  .panel-mark { display: none; }
  .roller { display: none; }
  .about-grid, .feature-grid, .feature-grid.flip { grid-template-columns: 1fr; }
  .feature-grid.flip .feature-text { order: 0; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu, .topbar { display: none; }
  .unroll, .descend { display: none; }
  .panel-tall { padding: clamp(3rem, 10vw, 5rem) clamp(1.25rem, 6vw, 3rem); }
  .panel-inner { padding: 0; transform: none !important; }
  .block, .block.flip { grid-template-columns: 1fr; min-height: 0; }
  .panel-title { display: flex; flex-direction: column; }
  .title-row { grid-template-columns: 1fr; }
  .block.flip > *:first-child { order: 0; }
  .to-top { left: auto; right: 1.25rem; bottom: 1.25rem; }
  .mu { font-size: 26rem; }
}

html.no-js .scroll { position: static; overflow: visible; }
html.no-js .track { position: static; display: block; height: auto; }
html.no-js .panel { min-width: 0; width: 100%; height: auto; }
html.no-js [data-in] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .unroll svg, .descend svg { animation: none; }
  [data-in] { transition: none; }
}

/* ============================================================================
   Press kit
   ========================================================================= */

/*
 * The one page that is not a scroll.
 *
 * A press kit is read by somebody with a deadline, on a laptop, who wants the factsheet and the
 * download links and nothing between them. Making it unroll sideways would be the handscroll
 * getting in the way of the only page whose job is to be skimmed - so it is an ordinary document in
 * the same ink, the same bone and the same gold.
 */
body.pk {
  background: var(--ink);
  overflow: visible;
}

.pk-wrap {
  position: relative;
  z-index: 10;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 5vw, 3rem) clamp(4rem, 9vw, 7rem);
}

.pk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgba(169, 131, 74, 0.35);
}

.pk-top img { width: clamp(96px, 9vw, 132px); }

.pk-back {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
}

.pk-back:hover { border-bottom-color: var(--gold); }

.pk-head { display: flex; align-items: flex-end; gap: clamp(1rem, 3vw, 2.4rem); margin: clamp(2.4rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem); flex-wrap: wrap; }
.pk-head img { width: clamp(240px, 30vw, 420px); }
.pk-head .seal { width: clamp(52px, 5vw, 76px); margin: 0; }

/* Two columns: the facts you cite, and the copy you quote. */
.pk-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.pk-facts {
  position: sticky;
  top: 2rem;
  background: var(--ink-raised);
  border: 1px solid rgba(169, 131, 74, 0.4);
  padding: clamp(1.4rem, 2.5vw, 2rem);
}

.pk-facts h2 { font-size: 1.1rem; letter-spacing: 0.06em; }
.pk-facts dl { margin-top: 1.2rem; }
.pk-facts dt { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-top: 1.1rem; }
.pk-facts dt:first-of-type { margin-top: 0; }
.pk-facts dd { font-size: 0.95rem; color: var(--bone); margin-top: 0.3rem; }
.pk-facts dd a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--gold-deep); }
.pk-facts dd a:hover { color: var(--gold); }
.pk-facts .jp { font-family: 'Yuji Boku', serif; color: var(--bone-dim); }

.pk-main section { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.pk-main h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); margin-bottom: 0.9rem; }
.pk-main p { max-width: 62ch; }
.pk-main p + p { margin-top: 0.9rem; }

.pk-main ul { list-style: none; margin-top: 0.6rem; }
.pk-main li { position: relative; padding-left: 1.5rem; margin-top: 0.65rem; color: var(--bone-dim); line-height: 1.6; max-width: 62ch; }
.pk-main li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 2px; background: var(--gold-deep); }
.pk-main li strong { color: var(--bone); }

.pk-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-top: 1rem; }

.pk-asset { background: var(--ink-raised); border: 1px solid rgba(169, 131, 74, 0.32); }
.pk-asset img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.pk-asset.contain img { object-fit: contain; padding: 1.2rem; background: #0a0e18; }

.pk-asset a {
  display: block;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid rgba(169, 131, 74, 0.32);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  text-align: center;
}

.pk-asset a:hover { background: var(--gold); color: #150f04; }

.pk-mail { font-size: 1.05rem; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-deep); }
.pk-mail:hover { color: var(--bone); }

.pk-foot {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(169, 131, 74, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ash);
}

@media (max-width: 860px) {
  .pk-grid { grid-template-columns: 1fr; }
  .pk-facts { position: static; }
}