/* ─────────────────────────────────────────────────────────────
   SWC Partnership · manga
   One manga page, six panels, a camera that pans between them.
   Tokens: SWC charcoal / teal / paper / tinted panel stocks
   ───────────────────────────────────────────────────────────── */

:root {
  --ink: #141210;
  --ink-soft: #2a2622;
  --paper: #e9e6df;
  --paper-bright: #f6f4ee;
  --tint-pink: #eccdcd;
  --tint-yellow: #ecdf9c;
  --tint-green: #cfddbd;
  --tint-blue: #c5d5e1;
  --hanko: #c8332b;
  --desk: #191715;

  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-hand: "Shantell Sans", "Comic Sans MS", cursive;
  --font-jp: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --display-weight: 400;   /* Anton has one weight; a piece using Lato sets 900 */

  --world-w: 4200px;
  --world-h: 2500px;
  --rule: 9px;             /* panel border weight */
  --gutter-slant: 90px;    /* how far the slanted gutters lean */
}

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

html, body {
  height: 100%;
  margin: 0;
  overflow: clip; /* clip, not hidden: a hidden box can still be scrolled to an anchor */
  overscroll-behavior: none;
}

body {
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font-hand);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

kbd {
  font: inherit;
  padding: 0 .35em;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

/* ───────────── stage + world (the camera) ───────────── */

.stage {
  position: fixed;
  inset: 0;
  overflow: clip;
  cursor: grab;
  /* faint desk grain so the area beyond the page reads as a surface */
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.06), transparent 60%),
    repeating-linear-gradient(94deg, transparent 0 18px, rgba(255,255,255,.022) 18px 21px, transparent 21px 47px, rgba(0,0,0,.25) 47px 49px),
    var(--desk);
}
.stage.is-dragging { cursor: grabbing; }
.stage.is-shaking { animation: shake .28s cubic-bezier(.36,.07,.19,.97) both; }

.world {
  position: absolute;
  top: 0; left: 0;
  width: var(--world-w);
  height: var(--world-h);
  transform-origin: 0 0;
  will-change: transform;
  background: var(--paper);
  /* the page: a hairline trim and a soft newsprint texture of dots */
  background-image:
    radial-gradient(rgba(20,18,16,.06) .8px, transparent 1px);
  background-size: 5px 5px;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.6),
    0 40px 80px rgba(0,0,0,.55);
}

/* hand-lettered page number in the outer margin of the spread */
.world::after {
  content: var(--footer-text, "SWC Partnership · manga · vol.01 · p.01–06");
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font: 400 18px/1 var(--font-mono);
  letter-spacing: .12em;
  color: rgba(20,18,16,.55);
}

@keyframes shake {
  10%, 90% { transform: translate(-1px, 0); }
  20%, 80% { transform: translate(2px, 0); }
  30%, 50%, 70% { transform: translate(-4px, 1px); }
  40%, 60% { transform: translate(4px, -1px); }
}

/* ───────────── panels ───────────── */

.panel {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.panel-inner {
  position: absolute;
  inset: 0;
  padding: 56px;
  background: var(--paper-bright);
  clip-path: polygon(
    var(--rule) var(--rule),
    calc(100% - var(--rule)) var(--rule),
    calc(100% - var(--rule)) calc(100% - var(--rule)),
    var(--rule) calc(100% - var(--rule))
  );
  overflow: hidden;
}

/* tinted newsprint stocks, one per panel, like the coloured pages of a weekly */
.tint-paper  .panel-inner { background: var(--paper-bright); }
.tint-pink   .panel-inner { background: var(--tint-pink); }
.tint-yellow .panel-inner { background: var(--tint-yellow); }
.tint-green  .panel-inner { background: var(--tint-green); }
.tint-blue   .panel-inner { background: var(--tint-blue); }

/* slanted gutter between STORY and COVER — both edges lean the same way */
.panel-cover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--gutter-slant) 100%);
}
.panel-cover .panel-inner {
  clip-path: polygon(
    var(--rule) var(--rule),
    calc(100% - var(--rule)) var(--rule),
    calc(100% - var(--rule)) calc(100% - var(--rule)),
    calc(var(--gutter-slant) + var(--rule)) calc(100% - var(--rule))
  );
}
.panel-story {
  clip-path: polygon(0 0, calc(100% - var(--gutter-slant)) 0, 100% 100%, 0 100%);
}
.panel-story .panel-inner {
  clip-path: polygon(
    var(--rule) var(--rule),
    calc(100% - var(--gutter-slant) - var(--rule)) var(--rule),
    calc(100% - var(--rule)) calc(100% - var(--rule)),
    var(--rule) calc(100% - var(--rule))
  );
}
/* studio loses a corner, the way a panel does when a caption bleeds over it */
.panel-studio {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 140px 100%, 0 calc(100% - 140px));
}
.panel-studio .panel-inner {
  clip-path: polygon(
    var(--rule) var(--rule),
    calc(100% - var(--rule)) var(--rule),
    calc(100% - var(--rule)) calc(100% - var(--rule)),
    calc(140px + var(--rule)) calc(100% - var(--rule)),
    var(--rule) calc(100% - 140px - var(--rule))
  );
}

/* the current panel gets a hanko in its corner, everything else stays quiet */
.panel::after {
  content: var(--current-text, "現在");
  position: absolute;
  top: 26px; right: 26px;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border: 4px solid var(--hanko);
  border-radius: 50%;
  color: var(--hanko);
  font: 900 20px/1 var(--font-jp);
  letter-spacing: .05em;
  transform: rotate(-12deg) scale(0);
  opacity: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 3;
}
.panel.is-current::after {
  animation: stamp .35s cubic-bezier(.2, 1.6, .4, 1) .55s both;
}
@keyframes stamp {
  from { transform: rotate(-12deg) scale(1.8); opacity: 0; }
  60%  { transform: rotate(-12deg) scale(.92); opacity: .95; }
  to   { transform: rotate(-12deg) scale(1);   opacity: .9; }
}

.panel-heading {
  position: absolute;
  top: 34px; left: 40px;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: var(--emph-gap, 14px);
  padding: 8px 22px 10px 18px;
  background: var(--ink);
  color: var(--paper-bright);
  font: var(--display-weight, 400) 40px/1 var(--font-display);
  letter-spacing: var(--display-tracking, .06em);
  text-transform: uppercase;
  z-index: 2;
}
/* emphasis slots: the frame's Japanese labels, or a brand's italic word set
   beside its caps partner. A piece can set --emph-ratio (size relative to
   the partner), --emph-style, --emph-transform, --emph-weight and
   --emph-tracking; without them each slot keeps its own bespoke size. */
.panel-heading [data-emphasis], .burst-jp, .toc-title [data-emphasis], .toc-jp, .card-jp,
.ch-num, .ch-title [data-emphasis], .send [data-emphasis], .stamp [data-emphasis],
.tab > span:first-child, .turn-btn [data-emphasis], .sfx-jp, .cover-vertical {
  font-family: var(--font-jp);
  font-weight: var(--emph-weight, 900);
  font-style: var(--emph-style, normal);
  text-transform: var(--emph-transform, none);
  letter-spacing: var(--emph-tracking, 0);
  line-height: 1;
  vertical-align: baseline;
}
.panel-heading [data-emphasis] {
  font-size: calc(40px * var(--emph-ratio, .55));
  color: var(--tint-yellow);
}

/* ───────────── art slots (to be drawn / generated later) ───────────── */

.art {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-color: var(--paper-bright);
  /* screentone: dots that thin out toward the top-left, crosshatch in the corner */
  background-image:
    radial-gradient(circle, var(--ink) 1.2px, transparent 1.5px),
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(20,18,16,.18) 9px 10px);
  background-size: 7px 7px, auto;
  border: var(--rule) solid var(--ink);
  border-width: 5px;
}
.art::before {
  /* fade the tone: heavy at the bottom-right, paper at the top-left */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--paper-bright) 20%, rgba(246,244,238,.65) 55%, transparent 100%);
}
.art::after {
  /* 絵 mark: this is where the picture goes */
  content: "絵";
  position: absolute;
  top: 12px; left: 14px;
  font: 900 26px/1 var(--font-jp);
  color: var(--ink);
  opacity: .55;
}
.rough {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  margin: 0;
  padding: 6px 10px;
  background: rgba(246,244,238,.92);
  border: 2px solid rgba(20,18,16,.35);
  font: italic 400 15px/1.35 var(--font-mono);
  color: var(--ink-soft);
}
.rough [data-emphasis] {
  font-style: normal;
  font-family: var(--font-jp);
  font-weight: 900;
  margin-right: .4em;
}

/* drop an <img> (or <video>) into a .art figure and the placeholder gets out of the way */
.art > img,
.art > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15);
}
/* a piece whose theme says artFilter: "color" shows its pictures as rendered */
:root[data-art="color"] .art > :is(img, video),
:root[data-art="color"] .world[data-zoom] .art > :is(img, video) { filter: none; }
:root[data-art="color"] .world[data-zoom="far"] .art > :is(img, video) { filter: blur(1.2px); }
:root[data-art="color"] .world[data-zoom="mid"] .art > :is(img, video) { filter: blur(.5px); }
/* screentone aliases into a checker pattern when the camera is far out;
   a touch of blur before the downscale reads as smooth grey instead */
.world[data-zoom="far"] .art > :is(img, video) { filter: grayscale(1) contrast(1.1) blur(1.2px); }
.world[data-zoom="mid"] .art > :is(img, video) { filter: grayscale(1) contrast(1.15) blur(.5px); }
.art:has(> img, > video)::before,
.art:has(> img, > video)::after,
.art:has(> img, > video) .rough { display: none; }

/* overlays placed on a generated picture after review: positioned by percentage
   of the image, so they can be moved to wherever the approved picture leaves room.
   <p class="over balloon" style="--ox:62%; --oy:18%" data-tail="bl">…</p>
   --ox/--oy is the anchor point; data-tail picks which way the balloon's tail points. */
.art .over {
  position: absolute;
  left: var(--ox, 50%);
  top: var(--oy, 50%);
  transform: translate(-50%, -50%);
  width: max-content;
  z-index: 2;
}
.art .over.caption { max-width: 60%; }
.art .over.balloon { max-width: 55%; }
.art .over[data-tail="br"]::before, .art .over[data-tail="br"]::after { left: auto; right: 20%; transform: skewX(25deg); }
.art .over[data-tail="tl"]::before, .art .over[data-tail="tl"]::after { bottom: auto; top: -30px; border-top: 0; border-bottom: 34px solid var(--ink); transform: skewX(25deg); }
.art .over[data-tail="tl"]::after { top: -20px; border-bottom: 28px solid var(--paper-bright); }
.art .over[data-tail="none"]::before, .art .over[data-tail="none"]::after { display: none; }

/* ───────────── captions, balloons, bursts ───────────── */

.caption {
  position: absolute;
  margin: 0;
  padding: 16px 22px;
  max-width: 440px;
  background: var(--paper-bright);
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  font: 600 23px/1.3 var(--font-hand);
  text-transform: uppercase;
  letter-spacing: .01em;
  z-index: 2;
}

.balloon {
  position: absolute;
  margin: 0;
  padding: 40px 68px;
  width: max-content;
  max-width: 480px;
  background: var(--paper-bright);
  border: 4px solid var(--ink);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  font: 700 25px/1.25 var(--font-hand);
  text-align: center;
  text-wrap: balance;
  z-index: 2;
}
.balloon::before,
.balloon::after {
  content: "";
  position: absolute;
  bottom: -30px; left: 20%;
  width: 0; height: 0;
  border-left: 18px solid transparent;
  border-right: 6px solid transparent;
  border-top: 34px solid var(--ink);
  transform: skewX(-25deg);
}
.balloon::after {
  bottom: -20px;
  border-top-color: var(--paper-bright);
  border-top-width: 28px;
  border-left-width: 15px;
  border-right-width: 4px;
  margin-left: 3px;
}

/* the one red thing: a cover burst */
.burst {
  position: absolute;
  margin: 0;
  min-width: 250px; min-height: 250px;
  padding: 70px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  place-items: center;
  text-align: center;
  background: var(--hanko);
  color: var(--paper-bright);
  clip-path: polygon(
    50% 0%, 61% 12%, 76% 5%, 80% 22%, 96% 23%, 91% 40%, 100% 50%, 91% 60%,
    96% 77%, 80% 78%, 76% 95%, 61% 88%, 50% 100%, 39% 88%, 24% 95%, 20% 78%,
    4% 77%, 9% 60%, 0% 50%, 9% 40%, 4% 23%, 20% 22%, 24% 5%, 39% 12%
  );
  transform: rotate(-8deg);
  z-index: 4;
}
.burst-jp {
  font-size: calc(28px * var(--emph-ratio, 1.07));
}
.burst-en {
  font: var(--display-weight, 400) 28px/1.05 var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--display-tracking, .04em);
  max-width: 130px;
  text-wrap: balance;
}
.burst-small { min-width: 200px; min-height: 200px; padding: 56px; }
.burst-small .burst-jp { font-size: calc(21px * var(--emph-ratio, 1.05)); }
.burst-small .burst-en { font-size: 21px; max-width: 110px; }

/* ───────────── COVER ───────────── */

.panel-cover .panel-inner { padding: 0; }

.art-cover {
  position: absolute;
  inset: 0;
  border: 0;
  background-color: var(--tint-blue);
  background-size: 9px 9px, auto;
}
.art-cover::before {
  background:
    linear-gradient(180deg, rgba(197,213,225,.2) 0%, rgba(197,213,225,.85) 45%, var(--tint-blue) 100%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(20,18,16,.08) 34px 35px);
}
.art-cover::after { top: 40px; left: 46px; }
.art-cover .rough { left: 60px; right: auto; top: 600px; bottom: auto; max-width: 620px; }
.panel-cover::after { top: auto; right: 60px; bottom: 60px; }

.cover-vertical {
  position: absolute;
  top: 40px; right: 40px;
  margin: 0;
  writing-mode: vertical-rl;
  font-size: 92px;
  letter-spacing: var(--emph-tracking, .12em);
  color: var(--ink);
  /* same keyline as the title, so it reads over the artwork */
  paint-order: stroke fill;
  -webkit-text-stroke: 10px var(--paper-bright);
  z-index: 1;
}

.cover-title {
  position: absolute;
  left: 90px; top: 110px;
  margin: 0;
  font: var(--display-weight, 400) var(--title-size, 380px)/0.9 var(--font-display);
  letter-spacing: var(--display-tracking, -.02em);
  color: var(--ink);
  z-index: 2;
  /* the classic keyline: black type, thick white stroke, over the art */
  paint-order: stroke fill;
  -webkit-text-stroke: 18px var(--paper-bright);
}
.cover-title-word { display: block; transform: skewX(-6deg); }

.cover-tag {
  position: absolute;
  left: 60px; top: 520px;
  margin: 0;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper-bright);
  font: 600 30px/1.2 var(--font-hand);
  text-transform: uppercase;
  z-index: 2;
}

.panel-cover .burst {
  left: 600px; top: 540px;
}

/* the contents list, which is also the menu */
.toc {
  position: absolute;
  left: 150px; bottom: 72px;
  width: 720px;
  padding: 28px 36px 24px;
  background: var(--paper-bright);
  border: var(--rule) solid var(--ink);
  z-index: 3;
}
.toc-title {
  margin: 0 0 14px;
  font: var(--display-weight, 400) 34px/1 var(--font-display);
  letter-spacing: var(--display-tracking, .1em);
  text-transform: uppercase;
}
.toc-title [data-emphasis] {
  font-size: calc(34px * var(--emph-ratio, .76));
  margin-right: var(--emph-gap, 12px);
  color: var(--hanko);
}
.toc-list {
  list-style: none;
  margin: 0; padding: 0;
}
.toc-list a {
  display: flex;
  align-items: baseline;
  gap: var(--emph-gap, 14px);
  padding: 9px 10px;
  margin: 0 -10px;
  color: var(--ink);
  text-decoration: none;
  font: 700 30px/1.1 var(--font-hand);
  text-transform: uppercase;
  border-radius: 4px;
  transition: background .15s;
}
.toc-list a:hover,
.toc-list a:focus-visible {
  background: var(--ink);
  color: var(--paper-bright);
  outline: none;
}
.toc-jp {
  font-size: calc(30px * var(--emph-ratio, .8));
  /* kanji labels line up in a column; a brand's italic word flows into its caps instead */
  min-width: var(--emph-column, 110px);
  color: var(--ink-soft);
}
.toc-list a:hover .toc-jp,
.toc-list a:focus-visible .toc-jp { color: var(--tint-yellow); }
.toc-dots {
  flex: 1;
  border-bottom: 3px dotted currentColor;
  transform: translateY(-8px);
  opacity: .6;
}
.toc-page { font: 400 22px/1 var(--font-mono); }
.toc-note {
  margin: 16px 0 0;
  font: 400 16px/1.4 var(--font-mono);
  color: var(--ink-soft);
  letter-spacing: .04em;
}

/* ───────────── STORY ───────────── */

.art-story {
  position: absolute;
  left: 56px; right: 140px; top: 130px; bottom: 100px;
}
.panel-story .cap-1 { left: 140px; top: 120px; }
.panel-story .cap-2 { right: 90px; top: 460px; }
.panel-story .cap-3 { left: 120px; bottom: 300px; }
.balloon-story { right: 120px; bottom: 110px; max-width: 360px; }

/* ───────────── CAST ───────────── */

.cast-grid {
  list-style: none;
  margin: 0; padding: 0;
  position: absolute;
  inset: 120px 56px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 32px;
}
.card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.card .art {
  flex: 1;
  min-height: 0;
  margin-bottom: 12px;
}
.card .rough { font-size: 13px; }
.card-name {
  margin: 0;
  font: var(--display-weight, 400) 40px/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--display-tracking, .02em);
}
.card-jp {
  margin: 2px 0 6px;
  font-size: calc(40px * var(--emph-ratio, .45));
  color: var(--hanko);
}
.card-role {
  margin: 0;
  font: 700 20px/1.2 var(--font-hand);
}
.card-stat {
  margin: 4px 0 0;
  font: 400 14px/1.3 var(--font-mono);
  color: var(--ink-soft);
}

/* ───────────── CHAPTERS ───────────── */

.panel-chapters .burst { right: 130px; top: 30px; z-index: 3; }

.chapter-table {
  position: absolute;
  left: 56px; top: 150px;
  width: calc(100% - 112px);
  border-collapse: collapse;
  font: 600 24px/1.2 var(--font-hand);
}
.chapter-table th {
  text-align: left;
  padding: 0 16px 10px;
  font: 400 16px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 4px solid var(--ink);
}
.chapter-table td {
  padding: 18px 16px;
  border-bottom: 2px solid rgba(20,18,16,.25);
  vertical-align: middle;
}
.chapter-table tbody tr:hover td { background: rgba(255,255,255,.35); }
.ch-num { font-size: calc(34px * var(--emph-ratio, .65)); white-space: nowrap; }
.ch-title { font: var(--display-weight, 400) 34px/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--display-tracking, .03em); }
.ch-title [data-emphasis] { font-size: calc(34px * var(--emph-ratio, .53)); margin-left: 14px; color: var(--ink-soft); }
.read, .soon {
  display: inline-block;
  padding: 8px 18px;
  font: 700 18px/1 var(--font-hand);
  text-transform: uppercase;
  text-decoration: none;
  border: 3px solid var(--ink);
  color: var(--ink);
  background: var(--paper-bright);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.read:hover, .read:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
  outline: none;
}
.soon {
  color: var(--hanko);
  border-color: var(--hanko);
  box-shadow: none;
  background: transparent;
}
.is-next td { background: rgba(255,255,255,.4); }
.cap-chapters { left: 56px; bottom: 56px; max-width: 760px; font-size: 20px; }

/* ───────────── STUDIO ───────────── */

.art-studio {
  position: absolute;
  left: 56px; top: 130px;
  width: 500px; height: 380px;
}
.panel-studio .caption { left: 56px; top: 550px; max-width: 500px; }
.tools {
  position: absolute;
  right: 56px; top: 150px;
  width: 330px;
  margin: 0;
}
/* one grid for the whole list, so every description starts on the same line
   whatever the longest label is */
.tools { display: grid; grid-template-columns: max-content 1fr; column-gap: 18px; align-items: baseline; }
.tools > div { display: contents; }
.tools dt, .tools dd { padding: 12px 0; border-bottom: 2px solid rgba(20,18,16,.3); }
.tools dt {
  font: 400 15px/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tools dd { margin: 0; font: 600 19px/1.4 var(--font-hand); }
html[data-piece="swc"] .tools dt { border-bottom: 0; }

/* ───────────── LETTERS ───────────── */

.balloon-letters { left: 60px; top: 130px; max-width: 480px; }
.balloon-letters::before, .balloon-letters::after { left: 70%; }

.letter {
  position: absolute;
  left: 56px; right: 56px; top: 350px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}
.field { display: block; }
.field-letter { grid-column: 1 / -1; }
.field-label {
  display: block;
  margin-bottom: 6px;
  font: 400 15px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.letter input,
.letter textarea {
  width: 100%;
  padding: 12px 14px;
  border: 4px solid var(--ink);
  background: var(--paper-bright);
  font: 600 22px/1.3 var(--font-hand);
  color: var(--ink);
  resize: none;
}
.letter input:focus-visible,
.letter textarea:focus-visible {
  outline: 4px solid var(--hanko);
  outline-offset: 2px;
}
.send {
  justify-self: start;
  align-self: center;
  padding: 14px 28px;
  border: 4px solid var(--ink);
  background: var(--ink);
  color: var(--paper-bright);
  font: 700 22px/1 var(--font-hand);
  text-transform: uppercase;
  box-shadow: 6px 6px 0 var(--hanko);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.send [data-emphasis] { font-size: calc(22px * var(--emph-ratio, .82)); margin-left: 8px; color: var(--tint-yellow); }
.send:hover, .send:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--hanko);
  outline: none;
}
.stamp {
  margin: 0;
  align-self: center;
  justify-self: end;
  display: inline-grid;
  place-items: center;
  align-content: center;
  text-align: center;
  /* a ring that grows with its words: the padding keeps the text inside the curve */
  min-width: 124px;
  max-width: 180px;
  aspect-ratio: 1;
  padding: 16px 20px;
  border: 5px solid var(--hanko);
  border-radius: 50%;
  color: var(--hanko);
  font: 400 13px/1.2 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-wrap: balance;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: rotate(-14deg) scale(1.6);
  pointer-events: none;
}
.stamp > span { display: block; }
.stamp [data-emphasis] { font-size: calc(var(--x-stamp-size, 13px) * var(--emph-ratio, 2)); line-height: 1; margin-bottom: 4px; }
/* an empty emphasis slot takes no room, so a plain caps label stays centred */
.send [data-emphasis]:empty, .stamp [data-emphasis]:empty { display: none; }
.letter.is-sent .stamp { animation: stamp .3s cubic-bezier(.2, 1.6, .4, 1) both; }
.letter.is-sent .send { opacity: .4; pointer-events: none; }
.letters-note {
  position: absolute;
  left: 56px; bottom: 56px;
  margin: 0;
  font: italic 400 16px/1.4 var(--font-mono);
  color: var(--ink-soft);
}

/* SWC's confirmation stays inside its stamp; the live status carries the text. */
html[data-piece="swc"] .letter .stamp {
  width: 180px; height: 180px;
  min-width: 0; max-width: none; aspect-ratio: auto;
  padding: 18px;
  border-width: 5px;
  box-shadow: inset 0 0 0 5px var(--paper-bright), inset 0 0 0 7px var(--hanko);
  visibility: hidden;
}
html[data-piece="swc"] .letter .stamp [data-emphasis] {
  font-size: 27px; line-height: 1;
  margin-bottom: 6px;
  letter-spacing: 0;
}
html[data-piece="swc"] .letter .stamp-word {
  font: 700 12px/1.25 var(--font-mono);
  letter-spacing: .16em;
  max-width: 12ch;
}
html[data-piece="swc"] .letter.is-sent .stamp { visibility: visible; }
.form-status {
  grid-column: 1 / -1;
  min-height: 24px;
  margin: 0;
  font: 400 17px/1.4 var(--font-hand);
  color: var(--ink-soft);
}
.form-status:focus { outline: none; }
.form-status a { color: inherit; text-decoration: underline; }
.letter:is([data-state="error"], [data-state="invalid"]) .form-status {
  color: var(--ink);
  font-weight: 700;
  padding-left: 14px;
  border-left: 6px solid var(--hanko);
}
.letter[data-state="sent"] .form-status { color: var(--ink); font-weight: 700; }
.send:disabled {
  opacity: .55;
  cursor: default;
  transform: none;
  box-shadow: 6px 6px 0 var(--hanko);
}
.letter[data-state="sending"] .send { cursor: progress; }
.letter [aria-invalid="true"] { border-color: var(--hanko); }
.letter.is-connected[data-state="sent"] :is(input, textarea) { color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .letter.is-sent .stamp { animation: none; transform: rotate(-14deg); opacity: .9; }
}

/* ───────────── persistent chrome ───────────── */

.chrome {
  position: fixed;
  left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px;
  pointer-events: none;
  color: var(--paper);
}
.chrome > * { pointer-events: auto; }
.chrome-top { top: 0; }
.chrome-bottom { bottom: 0; align-items: flex-end; }

.masthead {
  display: inline-flex;
  align-items: center;
  color: var(--paper);
  text-decoration: none;
  padding: 0; /* the logo file carries its own clearspace */
  background: rgba(20,18,16,.75);
  border: 2px solid var(--paper);
}
.masthead-logo { display: block; height: 72px; width: auto; }
.masthead:focus-visible { outline: 3px solid var(--hanko); }

.folio {
  margin: 0;
  padding: 8px 12px;
  background: rgba(20,18,16,.75);
  border: 2px solid var(--paper);
  font: 400 14px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.folio-label { opacity: .6; margin-right: 8px; }
#folio-num { font: var(--display-weight, 400) 22px/1 var(--font-display); margin-right: 4px; }
.folio-of { opacity: .6; }

/* thumb-index tabs down the right edge, the spine side of a manga */
.tabs {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 12px 10px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border: 2px solid var(--paper);
  border-right: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateX(10px);
  transition: transform .15s, background .15s;
}
.tab > span:first-child { font-size: calc(11px * var(--emph-ratio, 1.18)); letter-spacing: var(--emph-tracking, .1em); }
.tab > span:last-child { font: 400 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.tab:hover, .tab:focus-visible { transform: translateX(0); outline: none; }
.tab.is-current {
  background: var(--hanko);
  border-color: var(--hanko);
  transform: translateX(0);
}
.tab.is-current > span:last-child { opacity: 1; }

.turn { display: flex; gap: 6px; }
.turn-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(20,18,16,.85);
  color: var(--paper);
  border: 2px solid var(--paper);
  font: 700 14px/1 var(--font-hand);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.turn-btn [data-emphasis] { font-size: calc(14px * var(--emph-ratio, .86)); opacity: .7; margin-left: 4px; }
.turn-btn:hover, .turn-btn:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
.turn-btn[aria-pressed="true"] { background: var(--hanko); border-color: var(--hanko); }
.turn-arrow { font-size: 12px; }

.hint {
  margin: 0;
  padding: 6px 10px;
  background: rgba(20,18,16,.75);
  font: 400 12px/1.6 var(--font-mono);
  letter-spacing: .04em;
  color: rgba(233,230,223,.85);
  text-align: right;
}

/* ───────────── transition effects ───────────── */

.lines {
  position: fixed;
  inset: -20%;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  --angle: 90deg;
  background:
    repeating-linear-gradient(var(--angle), transparent 0 7px, var(--ink) 7px 9px, transparent 9px 23px, var(--ink) 23px 24px, transparent 24px 41px),
    repeating-linear-gradient(var(--angle), transparent 0 13px, var(--paper-bright) 13px 15px, transparent 15px 29px);
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, transparent 30%, #000 75%);
          mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, transparent 30%, #000 75%);
  mix-blend-mode: normal;
}

.sfx {
  position: fixed;
  left: 50%; top: 50%;
  z-index: 11;
  pointer-events: none;
  display: grid;
  justify-items: center;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-14deg) scale(.6);
  transform-origin: center;
}
.sfx-jp {
  font-size: calc(var(--sfx-base, clamp(28px, 4vw, 44px)) * var(--emph-ratio, 5.9));
  color: var(--paper-bright);
  paint-order: stroke fill;
  -webkit-text-stroke: 14px var(--ink);
  letter-spacing: var(--emph-tracking, -.04em);
}
.sfx-ro {
  margin-top: -.2em;
  font: var(--display-weight, 400) var(--sfx-base, clamp(28px, 4vw, 44px))/1 var(--font-display);
  letter-spacing: var(--display-tracking, .3em);
  text-transform: uppercase;
  color: var(--paper-bright);
  paint-order: stroke fill;
  -webkit-text-stroke: 6px var(--ink);
}

/* ───────────── reduced motion, small screens ───────────── */

@media (prefers-reduced-motion: reduce) {
  .lines, .sfx { display: none; }
  .stage.is-shaking { animation: none; }
  .panel.is-current::after { animation: none; transform: rotate(-12deg); opacity: .9; }
  .tab, .turn-btn, .read, .send { transition: none; }
}

@media (max-width: 720px) {
  .hint { display: none; }
  .chrome { padding: 12px 10px; }
  .turn-btn { padding: 9px 10px; font-size: 12px; }
  .masthead-logo { height: 56px; }
  .folio-label { display: none; }
  .tabs { gap: 2px; }
  .tab { padding: 8px 6px 8px 8px; }
  .tab > span:last-child { display: none; }
  .turn-word [data-emphasis] { display: none; }
}

/* ───────────── SWC REWORK: reading direction, cover subtitle, case-study modal ───────────── */

/* a piece can read left to right: the spread is mirrored, panel by panel */
html[data-dir="ltr"] #cover    { --x: 80px !important; }
html[data-dir="ltr"] #story    { --x: 1790px !important; }
html[data-dir="ltr"] #cast     { --x: 3100px !important; }
html[data-dir="ltr"] #chapters { --x: 80px !important; }
html[data-dir="ltr"] #studio   { --x: 2000px !important; }
html[data-dir="ltr"] #letters  { --x: 3100px !important; }
html[data-dir="ltr"] .panel-cover {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--gutter-slant)) 100%, 0 100%);
}
html[data-dir="ltr"] .panel-cover .panel-inner {
  clip-path: polygon(
    var(--rule) var(--rule),
    calc(100% - var(--rule)) var(--rule),
    calc(100% - var(--gutter-slant) - var(--rule)) calc(100% - var(--rule)),
    var(--rule) calc(100% - var(--rule))
  );
}
html[data-dir="ltr"] .panel-story {
  clip-path: polygon(var(--gutter-slant) 0, 100% 0, 100% 100%, 0 100%);
}
html[data-dir="ltr"] .panel-story .panel-inner {
  clip-path: polygon(
    calc(var(--gutter-slant) + var(--rule)) var(--rule),
    calc(100% - var(--rule)) var(--rule),
    calc(100% - var(--rule)) calc(100% - var(--rule)),
    var(--rule) calc(100% - var(--rule))
  );
}
html[data-dir="ltr"] .panel-studio {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 140px), calc(100% - 140px) 100%, 0 100%);
}
html[data-dir="ltr"] .panel-studio .panel-inner {
  clip-path: polygon(
    var(--rule) var(--rule),
    calc(100% - var(--rule)) var(--rule),
    calc(100% - var(--rule)) calc(100% - 140px - var(--rule)),
    calc(100% - 140px - var(--rule)) calc(100% - var(--rule)),
    var(--rule) calc(100% - var(--rule))
  );
}
html[data-dir="ltr"] .turn-arrow { display: inline-block; transform: scaleX(-1); }
/* the story panel's slant is now on its left: keep the heading and picture clear of it */
html[data-dir="ltr"] .panel-story .panel-heading { left: calc(40px + var(--gutter-slant)); }
html[data-dir="ltr"] .art-story { left: 140px; right: 56px; }

/* the cover's second word sits under the title instead of down the edge */
.sub-below .cover-vertical {
  writing-mode: horizontal-tb;
  top: 430px; right: auto; left: 100px;
  font-size: 96px;
  letter-spacing: var(--emph-tracking, 0);
  -webkit-text-stroke: 8px var(--paper-bright);
}
.sub-below .cover-tag { top: 560px; }
.sub-below .panel-cover .burst { top: 600px; left: 660px; }
.sub-below .burst-en { max-width: 190px; }

/* the contents title runs its two words the other way round: caps first */
.toc-flip .toc-title { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: var(--emph-gap, 12px); }
.toc-flip .toc-title [data-emphasis] { margin-right: 0; }

/* client names set in the plain face, not the emphasis face */
.clients-plain .ch-num {
  font-family: var(--font-hand);
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  text-transform: none;
  letter-spacing: 0;
}

/* bursts slap down a beat after the panel arrives */
.panel.is-current .burst { animation: slap .45s cubic-bezier(.2, 1.5, .4, 1) var(--slap-delay, 1.4s) both; }
@keyframes slap {
  from { transform: rotate(-8deg) scale(0); opacity: 0; }
  60%  { transform: rotate(-8deg) scale(1.12); opacity: 1; }
  to   { transform: rotate(-8deg) scale(1); opacity: 1; }
}

/* a link back to the main site in the bottom bar */
.turn-btn.site { text-decoration: none; }

/* case-study modal: a one-page mini comic over a darkened page */
.case {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: 4vh 4vw;
  background: rgba(20,18,16,.8);
  animation: case-in .25s ease-out both;
}
.case[hidden] { display: none; }
@keyframes case-in { from { opacity: 0; } to { opacity: 1; } }
.case-card {
  position: relative;
  width: min(1120px, 100%);
  max-height: 92vh;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(260px, 40%) 1fr;
  background: var(--paper-bright);
  color: var(--ink);
  border: var(--rule) solid var(--ink);
  box-shadow: 16px 16px 0 var(--hanko);
  animation: case-card-in .35s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes case-card-in { from { transform: scale(.92) rotate(-1deg); } to { transform: none; } }
.case-art { margin: 0; position: relative; border-right: var(--rule) solid var(--ink); background: var(--paper); min-height: 320px; }
.case-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-body { padding: 34px 40px 40px; display: flex; flex-direction: column; gap: 16px; }
.case-kicker { margin: 0; font: 400 13px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.case-client { margin: 0; font: var(--display-weight, 400) 42px/1.05 var(--font-display); letter-spacing: var(--display-tracking, .04em); text-transform: uppercase; }
.case-logo { display: block; height: 52px; width: auto; max-width: 240px; object-fit: contain; object-position: left center; margin: 2px 0 4px; }
.case-title { margin: 0; font: 700 22px/1.25 var(--font-hand); }
.case-caption {
  margin: 0; padding: 14px 18px;
  background: var(--paper-bright); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  font: 600 18px/1.35 var(--font-hand); text-transform: uppercase;
}
.case-result {
  margin: 6px 0 0; padding: 18px 22px;
  background: var(--hanko); color: var(--paper-bright);
  font: var(--display-weight, 400) 26px/1.15 var(--font-display); letter-spacing: var(--display-tracking, .03em); text-transform: uppercase;
}
.case-result small { display: block; margin-top: 6px; font: 600 15px/1.3 var(--font-hand); text-transform: none; letter-spacing: 0; opacity: .9; }
.case-quote {
  position: relative; margin: 8px 0 0; padding: 22px 30px;
  background: var(--paper-bright); border: 4px solid var(--ink); border-radius: 50% / 40%;
  font: 700 18px/1.3 var(--font-hand); text-align: center;
}
.case-quote cite { display: block; margin-top: 8px; font: 400 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--ink-soft); }
.case-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid var(--ink); background: var(--paper-bright); color: var(--ink);
  font: 900 22px/1 var(--font-hand); cursor: pointer;
}
.case-close:hover, .case-close:focus-visible { background: var(--ink); color: var(--paper-bright); outline: none; }
@media (max-width: 760px) { .case-card { grid-template-columns: 1fr; } .case-art { border-right: 0; border-bottom: var(--rule) solid var(--ink); min-height: 220px; } }
@media (prefers-reduced-motion: reduce) { .panel.is-current .burst, .case, .case-card { animation: none; } }

/* The animated Global Reach map. */
.art > canvas.reach {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1;
}
.art.fx-reach > img, .art.fx-reach > canvas.reach {
  transform-origin: var(--reach-x, 50%) var(--reach-y, 50%);
  animation: reach-zoom 28s ease-in-out infinite alternate;
}
@keyframes reach-zoom { from { transform: scale(1); } to { transform: scale(var(--reach-zoom, 1.3)); } }
@media (prefers-reduced-motion: reduce) { .art.fx-reach > img, .art.fx-reach > canvas.reach { animation: none; } }

/* Rendered scene loops share the image crop, colour treatment and panel camera. */
.art > video.art-motion { visibility: hidden; pointer-events: none; }
.art[data-motion-ready] > video.art-motion { visibility: visible; }
.motion-toggle { margin-left: auto; margin-right: 12px; min-height: 42px; font-size: 12px; }
.motion-toggle[hidden] { display: none; }
.motion-symbol { display: inline-block; width: 16px; text-align: center; }
@media (max-width: 720px) {
  .motion-toggle { min-width: 42px; margin-right: 8px; padding: 10px; }
  .motion-toggle .motion-word { display: none; }
}
/* ── case modal as a native dialog; close stays put while the card scrolls ── */
.case { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; background: transparent; }
.case:not([open]) { display: none; }
.case[open] { display: grid; }
.case::backdrop { background: rgba(20,18,16,.8); }
.case-card { display: flex; flex-direction: column; overflow: hidden; max-height: 92vh; max-height: 92dvh; }
.case-scroll {
  min-height: 0; overflow: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: minmax(260px, 40%) 1fr;
}
.case-art { max-height: 520px; }
.case-art img { height: 100%; }

/* ── summary beats: three numbered ink panels under the hero ── */
.case-summary {
  grid-column: 1 / -1;
  padding: 24px 40px 32px;
  border-top: var(--rule) solid var(--ink);
  background: var(--paper);
}
.case-beats {
  list-style: none; margin: 0; padding: 0;
  counter-reset: beat;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.case-beat {
  position: relative; counter-increment: beat;
  padding: 26px 18px 18px;
  background: var(--paper-bright); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
.case-beat::before {
  content: counter(beat);
  position: absolute; top: -14px; left: 12px;
  min-width: 28px; height: 28px; padding: 0 6px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper-bright);
  font: 700 14px/1 var(--font-mono);
}
.case-beat h3 { margin: 0 0 8px; font: 700 20px/1.1 var(--font-hand); text-transform: uppercase; }
.case-beat p { margin: 0; font: 400 15px/1.45 var(--font-hand); }
.case-beat-outcome { box-shadow: 6px 6px 0 var(--hanko); }
.case-beat-outcome::before { background: var(--hanko); }
.case-source {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; margin-top: 22px; padding: 10px 18px;
  border: 4px solid var(--ink); background: var(--paper-bright); color: var(--ink);
  font: 700 16px/1.2 var(--font-hand); text-decoration: none;
}
.case-source span { font-size: 24px; line-height: 1; }
.case-source:hover, .case-source:focus-visible { background: var(--ink); color: var(--paper-bright); outline: none; }
.case-source:focus-visible { box-shadow: 0 0 0 4px var(--hanko); }

@media (max-width: 760px) {
  .case-scroll { grid-template-columns: 1fr; }
  .case-art { height: min(44vh, 320px); max-height: none; min-height: 0; }
  .case-summary { padding: 22px 18px 24px; }
  .case-beats { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 420px) {
  .case { padding: 0; }
  .case-card { max-height: 100dvh; box-shadow: none; }
  .case-body { padding: 26px 18px 24px; }
}

/* ── animated SWC cover: keep her hair and shoulder clear of the title and burst ── */
html[data-piece="swc"] .panel-cover .cover-title { --title-size: 330px; top: 90px; -webkit-text-stroke: 12px var(--paper-bright); }
html[data-piece="swc"] .panel-cover .burst {
  left: 1300px; top: 300px;
  min-width: 210px; min-height: 210px; padding: 56px;
}
html[data-piece="swc"] .panel-cover .burst-en { font-size: 22px; max-width: 150px; }

.no-script { position: fixed; top: 80px; left: 16px; right: 16px; z-index: 60; padding: 16px; background: var(--paper-bright); color: var(--ink); font: 16px/1.4 var(--font-hand); }