/* CreatorStudio decks. Black and white, spec-plate world.
   Signature object: the code plate (.plate), the thing a creator actually gets.
   Every slide is one plate: title register at the top, data centered in the
   frame, a closing line on the bottom edge, registration marks at the corners. */

:root {
  --ink: #111;
  --paper: #fff;
  --mute: #555;
  --hair: #dcdcdc;
  --bar: 3.4rem;
  --pad: 4.2rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: #111;
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, "Noto Sans JP", "Hiragino Sans", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}

html.js, html.js body { overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
html.js body:has(.cover.on) :focus-visible { outline-color: #fff; }

html[lang="en"] .l-ja,
html:not([lang="en"]) .l-en { display: none; }

/* ---------- stage ---------- */

.stage {
  width: min(100vw, calc(100svh * 1.414));
  height: min(100svh, calc(100vw / 1.414));
  margin: 0 auto;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
html.js .stage { width: 100vw; height: 100svh; }
.deck { height: 100%; }

.slide {
  display: none;
  position: relative;
  height: 100%;
  flex-direction: column;
  padding: calc(var(--bar) + 1.6rem) var(--pad) 2.2rem;
}
.slide.on { display: flex; }
html:not(.js) .slide {
  display: flex;
  min-height: 100svh;
  border-bottom: 1px solid var(--ink);
}

/* registration marks: the corners of the plate */
.slide:not(.cover)::before {
  content: "";
  position: absolute;
  inset: calc(var(--bar) + 0.7rem) 2.15rem 1.25rem;
  pointer-events: none;
  background:
    linear-gradient(#c9c9c9, #c9c9c9) left    top    / 1px 10px no-repeat,
    linear-gradient(#c9c9c9, #c9c9c9) left    top    / 10px 1px no-repeat,
    linear-gradient(#c9c9c9, #c9c9c9) right   top    / 1px 10px no-repeat,
    linear-gradient(#c9c9c9, #c9c9c9) right   top    / 10px 1px no-repeat,
    linear-gradient(#c9c9c9, #c9c9c9) left    bottom / 1px 10px no-repeat,
    linear-gradient(#c9c9c9, #c9c9c9) left    bottom / 10px 1px no-repeat,
    linear-gradient(#c9c9c9, #c9c9c9) right   bottom / 1px 10px no-repeat,
    linear-gradient(#c9c9c9, #c9c9c9) right   bottom / 10px 1px no-repeat;
}

/* the centre register: data sits in the middle of the frame */
.mid {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.7rem;
  margin-top: 1.35rem;
}

.mid > .spec,
.mid > .info,
.mid > .terms,
.mid > .money {
  flex: 0 0 auto;
}
.mid > .matrix { flex: 0 0 auto; }

/* ---------- top rail ---------- */

.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bar);
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 1.6rem 0 1.8rem;
  z-index: 4;
  gap: 1rem;
}
.bar .mark { font-size: 0.94rem; font-weight: 500; letter-spacing: 0.04em; }
.bar .who {
  font-size: 0.76rem;
  color: rgba(255,255,255,.55);
  padding-left: 0.7rem;
  margin-left: 0.15rem;
  border-left: 1px solid rgba(255,255,255,.25);
}
.bar .spacer { flex: 1; }
.bar .count {
  font-size: 0.79rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.55);
  min-width: 3.2rem;
  text-align: right;
}
.bar .count b { color: #fff; font-weight: 500; }

/* the one authored motion: the rail reports position and eases to it */
.progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: #fff;
  transition: width .46s var(--ease);
}

.lang, .move { display: flex; }
.lang button, .move button {
  appearance: none;
  border: 1px solid rgba(255,255,255,.35);
  background: transparent;
  color: rgba(255,255,255,.72);
  font: inherit;
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  height: 1.7rem;
  min-width: 2.2rem;
  padding: 0 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .16s linear, color .16s linear, border-color .16s linear;
}
.lang button + button, .move button + button { border-left: 0; }
html:not([lang="en"]) .lang [data-lang="ja"],
html[lang="en"] .lang [data-lang="en"] {
  background: #fff;
  color: #111;
  border-color: #fff;
}
.lang button:hover, .move button:hover:not(:disabled) {
  background: #fff;
  color: #111;
  border-color: #fff;
}
.move button:disabled { opacity: 0.26; cursor: default; }
.move button { min-width: 2.25rem; padding: 0; }
.move button svg { width: 12px; height: 12px; display: block; }

@media (min-width: 861px) {
  html.js body:has(.cover.on) .bar { background: transparent; }
  html.js body:has(.cover.on) .bar .mark,
  html.js body:has(.cover.on) .bar .who,
  html.js body:has(.cover.on) .progress { visibility: hidden; }
}

/* ---------- type ---------- */

h1 {
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
}
h2 {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.42rem;
}
.lead {
  font-size: clamp(0.95rem, 1.5vw, 1.18rem);
  line-height: 1.55;
  color: var(--mute);
  max-width: 52em;
}

.head {
  font-size: 0.92rem;
  font-weight: 500;
  margin-bottom: 0.78rem;
}
.cap {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--mute);
  margin-top: 0.75rem;
}
.note {
  margin-top: 1.15rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--mute);
}
.foot {
  margin-top: 1.15rem;
  font-size: 0.84rem;
  color: var(--mute);
}

/* ---------- cover ---------- */

.cover {
  background: #111;
  color: #fff;
  padding: calc(var(--bar) + 1.6rem) var(--pad) 3.1rem;
  justify-content: flex-end;
}
.cover h1 {
  font-size: clamp(2.8rem, 8.2vw, 7.2rem);
  margin-bottom: 0.85rem;
}
.cover .sub {
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  color: rgba(255,255,255,.78);
}
.cover .meta {
  margin-top: 0.32rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,.55);
}

/* Wordmark and plate share one baseline along the bottom, the index holds the
   upper register. Nothing is stranded at an opposite rim. */
.cover-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: end;
  gap: 3rem;
  min-height: 0;
}
.cover-grid > .lock { grid-column: 1; grid-row: 2; }
.cover-grid > .plate { grid-column: 2; grid-row: 2; }

.toc {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  width: min(31rem, 100%);
}
.toc a {
  display: flex;
  gap: 1.1rem;
  padding: 0.44rem 0;
  font-size: 0.84rem;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  transition: color .16s linear;
}
.toc a:hover { color: #fff; }
.toc a i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.36);
  min-width: 1.4rem;
}

/* ---------- the code plate: signature object ---------- */

.plate {
  position: relative;
  aspect-ratio: 400 / 250;
  width: min(29rem, 33vw);
  color: #fff;
  flex: none;
}
.plate .cut {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.plate .cut path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.plate-in {
  position: absolute;
  inset: 0;
  padding: 7.5% 11% 10% 12%;
  display: flex;
  flex-direction: column;
}
.plate-k {
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  opacity: .7;
}
.plate-mid {
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-height: 0;
}
/* The slot is a signature rule, not a form field: the name goes on the line. */
.plate-slot {
  width: 100%;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.42rem;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.plate-ticks {
  margin-top: 0.85rem;
  height: 9px;
  opacity: .55;
  background-image:
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 40px);
  background-size: 100% 4px, 100% 9px;
  background-position: left bottom, left bottom;
  background-repeat: repeat-x;
}
.plate-n {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  opacity: .66;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.plate.on-paper { color: var(--ink); }
.plate.on-paper .plate-k,
.plate.on-paper .plate-n { opacity: .58; }

/* ---------- columns ---------- */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 2.8rem;
  align-items: start;
  width: 100%;
}
.cols.split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 3.6rem;
  align-items: start;
}
.cols.split > .vr,
.cols.three > .vr { display: none; }
.cols.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2.6rem;
  align-items: start;
}

.node { display: flex; flex-direction: column; }
.node p {
  font-size: clamp(0.94rem, 1.45vw, 1.1rem);
  line-height: 1.55;
  color: var(--mute);
}

/* what each side puts in and takes out, anchored to the foot of its column */
.flow {
  margin-top: auto;
  padding-top: 1.1rem;
}
.flow > div {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.28rem 0;
  font-size: 0.92rem;
  line-height: 1.4;
}
.flow dt { color: var(--mute); }

/* ---------- people ---------- */

.person .name {
  font-size: clamp(1.2rem, 2.15vw, 1.6rem);
  font-weight: 500;
  margin-bottom: 0.14rem;
}
.person .role {
  font-size: 0.92rem;
  color: var(--mute);
  margin-bottom: 0.6rem;
}

/* ---------- lists ---------- */

.person ul, .list { list-style: none; }

/* Two marks drawn for this system: the filled square that means yes in the
   matrix, and the same square cut on the plate's own diagonal for no. */
.list.yes li, .list.no li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 0 0.95rem;
  align-items: center;
}
.list.yes li::before, .list.no li::before {
  content: "";
  width: 10px;
  height: 10px;
}
.list.yes li::before { background: var(--ink); }
.list.no li::before {
  border: 1px solid #b9b9b9;
  background: linear-gradient(to bottom right,
    transparent calc(50% - 0.5px), #b9b9b9 calc(50% - 0.5px),
    #b9b9b9 calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.person li, .list li {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  line-height: 1.5;
  padding: 0.38rem 0;
}

/* ---------- spec rows ---------- */

.spec { width: 100%; }
.spec > div {
  display: grid;
  grid-template-columns: 2.6rem 9.5rem minmax(0, 1fr);
  gap: 1.3rem;
  align-items: baseline;
  padding: 0.55rem 0;
  font-size: clamp(0.97rem, 1.5vw, 1.16rem);
}
.spec .n {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 0.8em;
}
.spec b { font-weight: 500; }
.spec > div > span:last-child { color: var(--mute); }

/* ---------- gantt with a real ruler ---------- */

.tl { width: 100%; }
.tl-bar {
  display: grid;
  grid-template-columns: 20fr 60fr 10fr;
  min-height: 3.4rem;
  border: 1px solid var(--ink);
}
.tl-bar > span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.3;
  padding: 0.4rem 0.5rem;
  border-right: 1px solid var(--ink);
  word-break: keep-all;
}
html[lang="en"] .tl-bar > span { word-break: normal; }
.tl-bar > span:last-child { border-right: 0; }
.tl-bar .run { background: var(--ink); color: #fff; }
.tl-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.tl-axis span { position: relative; padding-top: 0.48rem; }
.tl-axis span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 4px;
  background: #aaa;
}
.tl-axis span:last-child::before { left: auto; right: 0; }

/* ---------- responsibility matrix ---------- */

.matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.94rem, 1.46vw, 1.12rem);
}
.matrix th, .matrix td {
  padding: 0.55rem 0.6rem 0.55rem 0;
  text-align: left;
  vertical-align: middle;
  font-weight: 400;
}
.matrix thead th {
  font-weight: 500;
  font-size: 0.82rem;
  padding-bottom: 0.7rem;
  color: var(--mute);
}
.matrix th:not(:first-child),
.matrix td:not(:first-child) {
  width: 9rem;
  text-align: center;
  padding-right: 0;
}
.mark-y, .mark-n {
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 auto;
}
.mark-y { background: var(--ink); }
.mark-n { border: 1px solid #c2c2c2; }

/* ---------- the chain ---------- */

.chain {
  display: grid;
  grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr;
  align-items: center;
  width: 100%;
}
.chain > div {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.4rem;
  text-align: center;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.35;
  word-break: keep-all;
}
html[lang="en"] .chain > div { word-break: normal; }
.chain > i { height: 1px; background: #c2c2c2; }
.chain.five { grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr; }

/* ---------- selection funnel ---------- */

.funnel { width: 100%; }
/* the label sits at the end of its own bar, not off in a distant column */
.funnel .step {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
/* the stages stack flush so the outline reads as one tapering form */
.funnel .step + .step .lvl { margin-top: -1px; }
.funnel .lvl { flex: none; }
.funnel .lvl { height: 2.1rem; border: 1px solid var(--ink); position: static; }
.funnel .step:last-child .lvl { background: var(--ink); }
.funnel .lb { font-size: 0.9rem; white-space: nowrap; }

/* ---------- allocation bars ---------- */

.alloc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.4rem;
  width: 100%;
  align-items: start;
}
.alloc .bars {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 7.2rem;
  border-bottom: 1px solid var(--ink);
}
.alloc i {
  flex: 1;
  min-width: 0;
  background: var(--ink);
  display: block;
}
.alloc i.off { background: #c9c9c9; }

/* ---------- money tracks ---------- */

.money { width: 100%; }
.money .row {
  display: grid;
  grid-template-columns: 8.6rem minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
  padding: 0.7rem 0;
}
.money .k { font-size: 0.9rem; color: var(--mute); word-break: keep-all; }
.money .v {
  font-size: 0.9rem;
  text-align: right;
  white-space: nowrap;
  padding-left: 0.5rem;
}
.track {
  display: flex;
  height: 1.25rem;
  border: 1px solid var(--ink);
}
.track > i { display: block; }
.track .all { flex: 1; background: var(--ink); }
.track .keep { flex: 7; background: var(--ink); }
.track .rest { flex: 3; background: var(--paper); }

/* ---------- headline terms ---------- */

.terms { width: 100%; }
.terms > div {
  display: grid;
  grid-template-columns: 6.4rem 8rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: baseline;
  padding: 0.7rem 0;
}
.terms .k { font-size: 0.88rem; color: var(--mute); }
.terms b {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
}
.terms > div > span:last-child {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--mute);
}

/* ---------- definition rows ---------- */

.info { width: 100%; }
.info > div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1.8rem;
  padding: 0.55rem 0;
  font-size: clamp(0.98rem, 1.52vw, 1.2rem);
  align-items: baseline;
}
.info dt { font-weight: 500; }
.info dd { color: var(--mute); }

/* ---------- mobile ---------- */

@media (max-width: 860px) {
  html.js, html.js body { overflow: auto; }
  html.js .stage, html.js .deck { height: auto; width: 100%; }
  html.js .stage { overflow: visible; }
  html.js .slide {
    display: flex !important;
    height: auto;
    min-height: 100svh;
    padding: 4.7rem 1.35rem 2.4rem;
    border-bottom: 1px solid var(--ink);
  }
  .slide:not(.cover)::before { display: none; }
  .cover {
    min-height: 100svh;
    padding: 5rem 1.35rem 2.6rem;
    justify-content: flex-end;
  }
  .mid { flex: none; justify-content: flex-start; gap: 1.5rem; margin-top: 1.5rem; }
  .chain > div { min-height: 0; }
  /* rows are as tall as their wrapped text here, never a fixed band */
  .mid > .spec > div,
  .mid > .info > div,
  .mid > .terms > div,
  .mid > .money > .row { flex: none; max-height: none; }

  .bar { padding: 0 0.9rem 0 1.1rem; }
  .bar .count, .bar .who { display: none; }
  html.js body.at-cover .bar { background: transparent; }
  html.js body.at-cover .bar .mark,
  html.js body.at-cover .progress { visibility: hidden; }

  .cover-grid {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2rem;
  }
  .toc { order: 1; width: 100%; }
  .toc a { padding: 0.52rem 0; }
  .plate { order: 2; width: min(20rem, 80vw); }
  .cover-grid > .lock { order: 3; }

  .cols, .cols.split, .cols.three, .alloc { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .cols.split > .vr, .cols.three > .vr { display: none; }
  .cols.split > :first-child,
  .cols.split > :last-child,
  .cols.three > :not(.vr) { padding: 0; }

  .spec > div { grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.25rem 1rem; }
  .spec b { grid-column: 2; }
  .spec > div > span:last-child { grid-column: 2; }

  .tl-bar { grid-template-columns: 1fr; min-height: 0; }
  .tl-bar > span {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
    justify-content: flex-start;
    text-align: left;
  }
  .tl-bar > span:last-child { border-bottom: 0; }

  .matrix th:not(:first-child),
  .matrix td:not(:first-child) { width: 4.8rem; }

  .chain, .chain.five { grid-template-columns: 1fr; }
  .chain > i { height: 14px; width: 1px; margin: 0 auto; }

  .funnel .step { gap: 0.9rem; }
  .money .row, .terms > div { grid-template-columns: 1fr; gap: 0.3rem; }
  .money .v { text-align: left; padding-left: 0; }
  .info > div { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 1rem; }

  html.js .move { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .progress, .lang button, .move button, .toc a { transition: none; }
}

/* ---------- print: A4 landscape, one slide per page ---------- */

@media print {
  @page { size: A4 landscape; margin: 0; }
  html, html.js, body, html.js body {
    background: #fff;
    height: auto !important;
    overflow: visible !important;
  }
  html.js .stage, html.js .deck {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  html.js .slide, .slide {
    display: flex !important;
    height: 206mm;
    padding: 17mm 18mm 15mm;
    break-after: page;
    page-break-after: always;
    border: 0;
  }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .slide:not(.cover)::before { inset: 8mm 6mm 6mm; }
  .cover { height: 206mm; }
  .bar { display: none !important; }
  .toc a { color: rgba(255,255,255,.8); }
}