/* Poster × Iro — gantry.world, round 5. Every colour is a Nippon colour (see NOTES.md).
   Structure from Poster Wall; colour, naming and kanji type from Iro. */
:root {
  --shironeri: #FCFAF2;  /* 白練 paper: the wall, every info band */
  --sumi: #1C1C1C;       /* 墨 ink + frame */
  --gofun: #FFFFFB;      /* 胡粉 inputs */
  --tape: #BDC0BA;       /* 白鼠 SHIRONEZUMI masking tape (v2: no beige/gold) */
  --fold-a: #D7C4BB;     /* 灰桜 HAIZAKURA folded strip */
  --fold-b: #BDC0BA;     /* 白鼠 SHIRONEZUMI back of a fold */
  --enji: #9F353A;       /* 燕脂 errors on paper */
  --benihi: #F75C2F;     /* 紅緋 list headline + button on SUMI */
  --bg: var(--shironeri);
  --ink: var(--sumi);
  --display: "Unbounded", "Arial Black", sans-serif;
  --serif: "Shippori Mincho", "Zen Old Mincho", "Noto Serif JP", serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --gut: 16px;
  --edge: 16px;
  --settle: 700ms;
}
@media (min-width: 760px) { :root { --gut: 24px; --edge: 40px; } }
@media (prefers-reduced-motion: reduce) {
  :root { --settle: 0ms; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto !important; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 500 17px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: clip; }
a { color: inherit; text-underline-offset: 3px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.04em; line-height: 0.94; margin: 0; }
p { margin: 0; }
.jp { font-family: var(--serif); font-weight: 500; letter-spacing: 0.02em; }
.mono { font-family: var(--mono); }

/* ---- sticky bar: settles into the colour of the section under it ---- */
.bar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--edge); background: var(--bar-bg, var(--shironeri)); color: var(--bar-ink, var(--sumi));
  border-bottom: 2px solid var(--sumi);
  transition: background-color var(--settle) ease, color var(--settle) ease;
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 800 17px/1 var(--display); letter-spacing: -0.035em; white-space: nowrap; }
.brand svg { width: 28px; height: 28px; --artifact: #E83015; } /* SYOJYOHI 猩猩緋: the only accent in the mark */
.brand i { font-style: normal; font-weight: 500; letter-spacing: -0.01em; }
.switch { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; font: 700 12px/1.3 var(--mono); }
.switch a { text-decoration: none; }
.switch a[aria-current] { text-decoration: underline; }
@media (max-width: 420px) { .switch .dot { display: none; } .brand { font-size: 15px; } .brand svg { width: 24px; height: 24px; } }

/* ---- dyed fields (Iro) ---- */
.fieldsec { background: var(--bg); color: var(--ink); padding: clamp(56px, 10vw, 128px) var(--edge); transition: background-color var(--settle) ease, color var(--settle) ease; }
.wrapw { max-width: 1280px; margin: 0 auto; }
.eyebrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 22px; font: 700 13px/1.3 var(--mono); letter-spacing: .04em; }
.eyebrow .jp { font-size: 30px; line-height: 1; letter-spacing: .06em; font-weight: 500; }
.fieldsec h2 { font-size: clamp(32px, 7vw, 64px); max-width: 15ch; }
.fieldsec .intro { max-width: 40ch; margin-top: 18px; font-size: 18px; }

/* ---- buttons + fields ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  font: 700 15px/1.1 var(--mono); border: 2px solid var(--sumi); background: var(--sumi); color: var(--shironeri);
  cursor: pointer; text-decoration: none; text-align: center; border-radius: 0;
}
.btn:hover { background: var(--shironeri); color: var(--sumi); }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn.ghost:hover { background: var(--ink); color: var(--bg); }
.btn.sm { min-height: 42px; padding: 0 12px; font-size: 14px; }
.btn:disabled { background: var(--shironeri); color: var(--sumi); border-style: dashed; cursor: default; }
.field label, .fld label { display: block; font: 700 14px/1.3 var(--mono); margin-bottom: 6px; }
.in, .field input[type=email], .field input[type=text], .field input[type=search] {
  width: 100%; min-height: 48px; padding: 0 12px; font: 400 16px var(--mono); color: var(--sumi);
  background: var(--gofun); border: 2px solid var(--sumi); border-radius: 0;
}
textarea.in { padding: 10px 12px; min-height: 150px; line-height: 1.5; resize: vertical; }
.err { color: var(--enji); font: 700 14px/1.4 var(--mono); margin-top: 6px; }
.err:empty { display: none; }
.field.bad input { border-color: var(--enji); outline: 2px solid var(--enji); }
.paper { background: var(--shironeri); color: var(--sumi); --bg: var(--shironeri); --ink: var(--sumi); }

/* ---- the poster: one constant frame (Poster Wall), printed in one Nippon colour (Iro) ---- */
.poster {
  position: relative; container-type: inline-size;
  background: var(--p-bg); color: var(--p-ink);
  border: 2px solid var(--sumi);
  display: grid; grid-template-rows: 1fr auto;
  aspect-ratio: 4 / 5; text-align: left;
  transition: background-color .45s ease, color .45s ease;
}
.poster .field-area { position: relative; overflow: hidden; padding: 7cqi; }
.poster .kw { font: 700 max(11px, 4.2cqi)/1.2 var(--mono); letter-spacing: 0.02em; position: relative; z-index: 2; display: block; max-width: 70%; }
.poster .word {
  position: absolute; font-family: var(--display); font-weight: 800; line-height: 0.84;
  letter-spacing: -0.06em; margin: 0; white-space: nowrap; font-size: var(--fs, 30cqi); z-index: 1;
}
.poster .vk { /* the colour's kanji, set vertically on the edge opposite the word */
  position: absolute; top: 6cqw; right: 6cqw; z-index: 2;
  font: 500 var(--vk, 12cqw)/1 var(--serif); writing-mode: vertical-rl; letter-spacing: .08em;
}
.c-vert .vk { right: auto; left: 6cqw; top: 18cqw; }
/* compositions — the only thing allowed to vary besides colour */
.c-crop .word { left: 5cqi; bottom: -4cqi; }
.poster[data-fit].c-crop .word { bottom: 5cqi; }
.c-lift .word { left: 5cqi; bottom: 26cqi; }
.c-bleed .word { left: -4cqi; bottom: 14cqi; }
.c-vert .word { right: calc(5cqi + 0.84em); bottom: 5cqi; transform-origin: 100% 100%; transform: rotate(90deg); }
.c-stack .word { left: 6cqi; bottom: 6cqi; white-space: normal; width: 6ch; }
.c-giant .word { right: -10cqi; bottom: -14cqi; }
.poster .band {
  background: var(--shironeri); color: var(--sumi); border-top: 2px solid var(--sumi);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px;
  padding: max(8px, 3.2cqi) max(10px, 4.2cqi);
  font: 700 max(11px, 3.5cqi)/1.3 var(--mono);
}
.poster .band .t { font-size: max(12px, 4.2cqi); display: block; }
.poster .band .s { font-weight: 400; display: block; }
.poster .band .spec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5em; font-weight: 400; margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--sumi); }
.poster .band .spec .jp { font-size: 1.3em; font-weight: 500; }
.poster .band .spec i { display: inline-block; width: .9em; height: .9em; background: var(--p-bg); border: 1px solid var(--sumi); align-self: center; }
.poster .band svg { width: max(26px, 10cqi); height: max(26px, 10cqi); color: var(--sumi); --artifact: var(--p-bg); align-self: start; }
.poster.soon .band .s::before { content: "Coming · "; font-weight: 700; }
/* narrow posters (2-up on a phone): band stays near a third of the sheet — one-line title and status, spec keeps kanji + romaji */
@container (max-width: 240px) {
  .poster .band { padding: 6px 8px; gap: 2px 6px; font-size: 11px; line-height: 1.25; }
  .poster .band .s, .poster .band .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .poster .band .tl { display: none; }
  .poster .band .ts { display: inline !important; }
  .poster .band .spec { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; margin-top: 2px; padding-top: 2px; }
  .poster .band .spec .hx, .poster .band .spec .mn { display: none; }
  .poster .band svg { width: 22px; height: 22px; }
  .poster .band .t { font-size: 12px; }
  .poster .vk { --vk: 10cqw; }
}
.poster .band .ts { display: none; }

/* masking tape */
.tape-strip { position: absolute; z-index: 3; width: min(26%, 150px); height: clamp(18px, 7cqi, 30px); background: var(--tape); opacity: .85; top: -12px; }
.tape-strip.l { left: -4%; transform: rotate(-8deg); }
.tape-strip.r { right: -4%; transform: rotate(7deg); }
.tape-strip.c { left: 37%; transform: rotate(-2deg); }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--sumi); color: var(--shironeri);
  padding: 12px 18px; font: 700 14px/1.3 var(--mono); transition: opacity .2s, transform .2s; z-index: 60; pointer-events: none; max-width: calc(100vw - 32px); border: 2px solid var(--shironeri); }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

footer.foot { background: var(--sumi); color: var(--shironeri); padding: 32px var(--edge) 48px; display: flex; flex-wrap: wrap; gap: 12px 32px; font: 400 14px/1.5 var(--mono); }
footer.foot a { font-weight: 700; }
footer.foot .jp { font-size: 20px; }