/* ============================================================
   TOBIRA — WORK PAGE
   One work, one page. The left column carries the reading:
   name, what to look for, the copy control, then the prompt
   itself. The right column holds the work running, and stays
   put while the left scrolls — the prompt is long, and losing
   sight of what it builds would make it unreadable.
   ============================================================ */

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
}

body.work-body {
  min-height: 100vh;
  background: var(--tobira-bg-deep);
  color: var(--tobira-ink);
  font-family: var(--tobira-font-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- v2: the component page's skeleton, worn by a work ----------

   One scrolling page. The hero holds the running work beside a paper
   overview (lede, facts, the prompt readable in place); below it the
   page opens into full-width chapters: colors, parts, typefaces,
   stack, outline, and the nearest works. */

body.work-v2 .work-crumb { margin-bottom: var(--tobira-space-2xl); }

body.work-v2 .work-title {
  margin: 0;
  font-size: 48px;
  line-height: 1.06;
}

body.work-v2 .work-step {
  margin: var(--tobira-space-lg) 0 var(--tobira-space-2xl);
}

.work-v2-stage { min-height: 560px; }

.work-v2-stage .work-frame {
  height: 560px;
  aspect-ratio: auto;
}

.work-v2-overview {
  height: 560px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: var(--tobira-space-lg);
  padding: var(--tobira-space-2xl);
  border-radius: var(--tobira-radius-stage);
  background: var(--tobira-paper);
  color: var(--tobira-black, #000);
}

body.work-v2 .work-lede {
  margin: 0;
  max-width: none;
  color: rgba(10, 10, 10, .78);
  font-size: 14px;
  line-height: 1.85;
}

body.work-v2 .work-meta-list dt { color: rgba(10, 10, 10, .45); }
body.work-v2 .work-meta-list dd { color: rgba(10, 10, 10, .75); }

body.work-v2 .work-prompt {
  margin: 0;
  min-height: 0;
}

body.work-v2 .work-prompt-panel {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: var(--tobira-radius-media);
  background: rgba(255, 255, 255, .58);
  box-shadow:
    0 16px 34px rgba(18, 17, 14, .09),
    0 3px 9px rgba(18, 17, 14, .06);
}

body.work-v2 .work-prompt-bar {
  position: static;
  padding: var(--tobira-space-md) var(--tobira-space-md) 0 var(--tobira-space-xl);
  background: transparent;
  /* the bar must fold, not spill: the title stays whole and the copy
     control drops to its own line before anything gets clipped */
  flex-wrap: wrap;
  row-gap: var(--tobira-space-xs);
}

body.work-v2 .work-prompt-bar h2 { white-space: nowrap; }

/* the copy control shrinks to its icon and holds the panel's top-right
   corner; the done state swaps the glyph for a check */
body.work-v2 .work-copy {
  position: absolute;
  top: var(--tobira-space-md);
  right: var(--tobira-space-md);
  z-index: 2;
  width: var(--tobira-control-icon-sm);
  min-height: var(--tobira-control-icon-sm);
  padding: 0;
  justify-content: center;
}

body.work-v2 .work-prompt-bar {
  padding-right: calc(var(--tobira-control-icon-sm) + var(--tobira-space-lg));
}

body.work-v2 .work-copy .copy-done-glyph { display: none; }
body.work-v2 .work-copy.is-done .copy-glyph { display: none; }
body.work-v2 .work-copy.is-done .copy-done-glyph { display: block; }

/* a single bento row is too shallow for specimen + name + role once the
   grid runs full width — one taller row unit for the type cards only */
#fonts.bento { --fact-row: clamp(136px, 9.45vw, 220px); }

body.work-v2 .work-prompt-body {
  max-height: none;
  padding: var(--tobira-space-md) var(--tobira-space-xl) var(--tobira-space-xl);
}

.work-v2-facts { background: var(--tobira-bg); }
.work-v2-facts[hidden] { display: none; }

.work-v2-facts .work-fact {
  padding: var(--tobira-space-4xl) var(--component-work-gutter);
}

.work-v2-facts .work-fact[hidden] { display: none; }

.work-v2-facts .work-fact h3 {
  margin: 0 0 var(--tobira-space-xl);
  color: var(--tobira-ink);
  font-family: var(--tobira-font-japanese);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 42px;
  text-transform: none;
}

body.work-v2 .work-shots[hidden] { display: none; }

@media (max-width: 1100px) {
  .work-v2-stage,
  .work-v2-stage .work-frame,
  .work-v2-overview { height: auto; }
  .work-v2-stage .work-frame { aspect-ratio: 16 / 10; }
}

/* ---------- left: the reading ---------- */

.work-doc {
  min-width: 0;
  padding: var(--tobira-space-3xl) var(--tobira-space-5xl) var(--tobira-space-6xl);
}

@media (max-width: 1400px) {
  .work-doc { padding-inline: var(--tobira-space-3xl); }
}

.work-crumb {
  display: flex;
  min-height: var(--tobira-control-icon-touch);
  align-items: center;
  gap: var(--tobira-space-md);
  color: var(--tobira-ink-faint);
  font-size: 13px;
  letter-spacing: .04em;
}

.work-crumb a {
  color: var(--tobira-ink-dim);
  text-decoration: none;
}

.work-crumb a:hover { color: var(--tobira-ink); }

.work-crumb .sep { color: var(--tobira-ink-faint); }
.work-crumb .here { color: var(--tobira-ink); }

.work-rail-toggle {
  display: grid;
  width: var(--tobira-control-icon-sm);
  height: var(--tobira-control-icon-sm);
  padding: 0;
  border: 0;
  border-radius: var(--tobira-radius-media);
  background: var(--tobira-surface);
  color: var(--tobira-ink-dim);
  cursor: pointer;
  place-items: center;
  transition: background .2s var(--tobira-ease), color .2s var(--tobira-ease);
}

.work-rail-toggle:hover {
  background: var(--tobira-surface-warm);
  color: var(--tobira-ink);
}

.work-title {
  margin: var(--tobira-space-4xl) 0 0;
  font-family: var(--tobira-font-display);
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.04;
}

.work-meta {
  display: flex;
  margin-top: var(--tobira-space-lg);
  align-items: center;
  gap: var(--tobira-space-md);
  color: var(--tobira-ink-faint);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.work-step {
  display: flex;
  margin-top: var(--tobira-space-xl);
  gap: var(--tobira-space-xs);
}

.work-step button {
  display: grid;
  width: var(--tobira-control-icon-md);
  height: var(--tobira-control-icon-md);
  border: 0;
  border-radius: var(--tobira-radius-media);
  background: var(--tobira-surface);
  color: var(--tobira-ink-dim);
  cursor: pointer;
  place-items: center;
  transition: background .2s var(--tobira-ease), color .2s var(--tobira-ease);
}

.work-step button:hover {
  background: var(--tobira-surface-warm);
  color: var(--tobira-ink);
}

/* The way out to the real site lives with the stepping controls: all
   three answer the same question — "where can I go from here?" */

.work-live[hidden] { display: none; }

.work-live {
  display: inline-flex;
  min-height: var(--tobira-control-icon-md);
  margin-left: var(--tobira-space-md);
  padding: 0 var(--tobira-space-lg);
  align-items: center;
  border-radius: var(--tobira-radius-full);
  background: var(--tobira-surface);
  color: var(--tobira-ink-dim);
  font-size: 13px;
  font-weight: 600;
  gap: var(--tobira-space-xs);
  text-decoration: none;
  transition: background .2s var(--tobira-ease), color .2s var(--tobira-ease);
}

.work-live:hover {
  background: var(--tobira-surface-warm);
  color: var(--tobira-ink);
}

.work-lede {
  max-width: 46ch;
  margin: var(--tobira-space-2xl) 0 0;
  color: var(--tobira-ink-dim);
  font-size: 16px;
  line-height: 1.85;
}

/* design.md: counters and status text never use monospace — the body
   face with tabular figures keeps the numbers steady without the
   generic mono look. */
.work-size {
  color: var(--tobira-ink-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ---------- the prompt itself ---------- */

/* The prompt runs to tens of thousands of characters. Showing all of it
   would bury the page, and nobody reads a build prompt top to bottom —
   they take it. So the panel shows the opening and hands over the rest
   through the copy control sitting in its corner. */

.work-prompt {
  margin-top: var(--tobira-space-4xl);
  /* arriving at #prompt must not tuck the panel's own heading under the top
     edge — leave the breathing room the panel has when scrolled to by hand */
  scroll-margin-top: var(--tobira-space-2xl, 24px);
}

/* The paper panel is the 30 of the 60/30/10: the one light mass on a
   black page. It carries the prompt, so the thing you came to take is
   also the thing your eye lands on. */

.work-prompt-panel {
  position: relative;
  border-radius: var(--tobira-radius-panel);
  background: var(--tobira-paper);
  color: var(--tobira-bg);
  overflow: hidden;
}

.work-prompt-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  padding: var(--tobira-space-md) var(--tobira-space-md) var(--tobira-space-md) var(--tobira-space-xl);
  align-items: center;
  background: var(--tobira-paper);
  gap: var(--tobira-space-md);
}

.work-prompt-bar h2 {
  margin: 0;
  color: var(--tobira-bg);
  font-family: var(--tobira-font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}

.work-prompt-panel .work-size {
  color: rgba(10, 10, 10, .5);
}

.work-prompt-bar .work-size {
  margin-right: auto;
}

.work-copy {
  display: inline-flex;
  min-height: var(--tobira-control-icon-sm);
  padding: 0 var(--tobira-space-lg);
  align-items: center;
  border: 0;
  border-radius: var(--tobira-radius-full);
  background: var(--tobira-accent);
  color: #1a0d09;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  gap: var(--tobira-space-xs);
  white-space: nowrap;
  transition: filter 160ms var(--tobira-ease), transform 140ms cubic-bezier(.23, 1, .32, 1);
}

.work-copy:hover { filter: brightness(1.08); }
.work-copy:active { transform: scale(.98); }

.work-copy.is-done {
  background: var(--tobira-accent);
  color: #0a0a0a;
}

.work-copy-icon {
  display: block;
  overflow: visible;
}

.work-prompt-body {
  max-height: 30rem;
  margin: 0;
  padding: calc(var(--tobira-control-icon-sm) + var(--tobira-space-3xl)) var(--tobira-space-xl) var(--tobira-space-3xl);
  color: rgba(10, 10, 10, .82);
  font-family: var(--tobira-font-body);
  font-size: 13.5px;
  line-height: 1.95;
  overflow-y: auto;
  overflow-wrap: anywhere;
  scrollbar-color: rgba(10, 10, 10, .22) transparent;
  scrollbar-width: thin;
  white-space: pre-wrap;
}

.work-prompt-body::-webkit-scrollbar { width: 10px; }
.work-prompt-body::-webkit-scrollbar-track { background: transparent; }

.work-prompt-body::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--tobira-radius-full);
  background: rgba(10, 10, 10, .22);
  background-clip: content-box;
}

/* Without a prompt the panel has nothing to hand over: the copy control,
   the count, and the "more below" edge all go, and the panel closes down
   to the height of its one-line note. */

.work-prompt-panel.is-empty .work-copy,
.work-prompt-panel.is-empty .work-prompt-cut { display: none; }

.work-prompt-panel.is-empty .work-prompt-body {
  max-height: none;
  padding-top: calc(var(--tobira-control-icon-sm) + var(--tobira-space-lg));
  padding-bottom: var(--tobira-space-xl);
  color: rgba(10, 10, 10, .55);
  overflow: hidden;
}

.work-copy[hidden] { display: none; }

/* The shut door: a readable head, a blurred synthetic tail proving there is
   more, and a glass panel floating the price over the fade. The real body
   never reaches a non-member — the blurred lines are decoration only. */
.work-prompt-body.is-locked {
  position: relative;
  overflow: hidden;
}
.work-prompt-teaser { white-space: pre-wrap; }
.work-prompt-veil {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  margin-top: 1.4em;
  padding-bottom: 8.5rem;
  filter: blur(5px);
  opacity: .55;
  user-select: none;
  pointer-events: none;
}
.work-prompt-blur-line {
  height: .74em;
  border-radius: var(--tobira-radius-full);
  background: rgba(10, 10, 10, .32);
}
.work-prompt-glass {
  position: absolute;
  right: var(--tobira-space-xl);
  bottom: var(--tobira-space-xl);
  left: var(--tobira-space-xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tobira-space-md);
  padding: var(--tobira-space-xl);
  border-radius: var(--tobira-radius-lg);
  background: rgba(247, 246, 243, .78);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 12px 40px rgba(10, 10, 10, .16);
  white-space: normal;
}
.work-prompt-glass p { margin: 0; }
.work-prompt-paywall-link {
  display: inline-block;
  padding: 10px 22px;
  border-radius: var(--tobira-radius-full);
  background: #0a0a0a;
  color: #fff;
  font-family: var(--tobira-font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
}
.work-prompt-paywall-link:hover { opacity: .82; }
.work-prompt-paywall-note {
  color: rgba(10, 10, 10, .55);
  font-size: 12px;
  line-height: 1.8;
}
@media (prefers-reduced-transparency: reduce) {
  .work-prompt-glass { background: #f7f6f3; backdrop-filter: none; }
}

/* "About this work" — the honest signals block */
.work-meta-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
  margin: 0;
}
.work-meta-list dt {
  color: var(--tobira-ink-faint);
  font-size: 12px;
  letter-spacing: .04em;
}
.work-meta-list dd {
  margin: 0;
  color: var(--tobira-ink-dim);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* A soft edge at the bottom so the panel reads as "there is more below"
   rather than as text that happens to stop. */
.work-prompt-cut {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--tobira-space-3xl);
  background: linear-gradient(rgba(242, 239, 233, 0), var(--tobira-paper));
  pointer-events: none;
}

/* ---------- right: the work itself ---------- */

/* The motion sits at the top, then the page comes apart into stills so
   the layout can be studied a screen at a time. Both columns scroll. */

.work-stage {
  display: flex;
  min-width: 0;
  padding: var(--tobira-space-3xl) var(--tobira-space-3xl) var(--tobira-space-6xl) 0;
  flex-direction: column;
  gap: var(--tobira-space-lg);
}


.work-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--tobira-radius-stage);
  background: var(--tobira-surface);
  overflow: hidden;
}

.work-frame video,
.work-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.work-frame video[hidden],
.work-frame img[hidden] { display: none; }

/* A work with no stills has only the frame; centred, the column reads
   as a stage holding one thing rather than a page that stopped early.
   (Moot on one column, where the containers dissolve into the stack.) */
.work-stage.is-lone { justify-content: center; }

.work-shots {
  display: flex;
  flex-direction: column;
  gap: var(--tobira-space-lg);
}

.work-shots img {
  width: 100%;
  display: block;
  border-radius: var(--tobira-radius-media);
  background: var(--tobira-surface);
}

/* The stage stays black on purpose: works come in every ground colour,
   and a light one would lose its edges against a paper stage. */

/* ---------- what the work is made of ---------- */

/* Below the prompt, the page opens outward: the palette and type this
   work uses, the works nearest it, and the way through to the parts
   shelf. The column had empty room; this is what belongs in it. */

.work-facts {
  display: flex;
  margin-top: var(--tobira-space-4xl);
  flex-direction: column;
  gap: var(--tobira-space-3xl);
}

.work-fact h3 {
  margin: 0 0 var(--tobira-space-lg);
  color: var(--tobira-ink-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.fact-note {
  margin: 0 0 var(--tobira-space-md);
  color: var(--tobira-ink-dim);
  font-size: 14px;
  line-height: 1.8;
}

/* The prompt's own headings, shown as a reading order. */

.work-outline {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: outline;
}

.work-outline li {
  display: flex;
  gap: var(--tobira-space-lg);
  padding: var(--tobira-space-sm) 0;
  border-top: 1px solid var(--tobira-line);
  color: var(--tobira-ink-dim);
  font-size: 14px;
  line-height: 1.7;
}

.work-outline li:not(.is-rest)::before {
  counter-increment: outline;
  content: counter(outline, decimal-leading-zero);
  color: var(--tobira-ink-faint);
  font-family: var(--tobira-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 2.2;
}

.work-outline li.is-sub { padding-left: var(--tobira-space-xl); }
.work-outline li.is-rest { color: var(--tobira-ink-faint); font-size: 12px; }

/* Libraries the prompt builds with, read out of the prompt itself. */

.work-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tobira-space-xs);
}

.work-stack span {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--tobira-space-lg);
  border-radius: var(--tobira-radius-full);
  background: var(--tobira-surface);
  color: var(--tobira-ink-dim);
  font-family: var(--tobira-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Each tool's own mark, in its own colour — recognised before the name
   is read. The mark sits closer to the chip's edge than the name does,
   so the two do not read as one lump. */
.work-stack span.has-mark {
  padding-left: var(--tobira-space-sm);
  gap: var(--tobira-space-xs);
}

.work-stack svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* One grid serves all four blocks. Rows are a fixed height, so a cell
   spanning two rows measures exactly 2×row + gap — sizes are either
   identical or a whole step apart, never a few pixels off. */

.bento {
  /* The row tracks the viewport so cells keep their 1440px proportions on
     wide monitors — a fixed 104px row under ever-wider columns crushed the
     near-works covers into 5:1 ribbons. 7.25vw = 104px at 1440. */
  --fact-row: clamp(104px, 7.25vw, 168px);
  --fact-gap: var(--tobira-space-xs);

  display: grid;
  gap: var(--fact-gap);
  grid-auto-rows: var(--fact-row);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bento > * {
  border-radius: var(--tobira-radius-media);
  overflow: hidden;
}

.b-w2 { grid-column: span 2; }
.b-w4 { grid-column: span 4; }
.b-h2 { grid-row: span 2; }

/* On a phone, four columns make 85px cells and the labels no longer
   fit. Halving to two columns doubles every cell; the spans still sum
   to full rows, so each layout keeps closing as a rectangle. */
@media (max-width: 640px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-w4 { grid-column: span 2; }
}

/* ---- colours ---- */

/* Works are often near-black, and a near-black swatch on a black page
   disappears. The inset edge is what keeps every colour a legible
   object regardless of how close it sits to the ground. */

.chip {
  position: relative;
  display: flex;
  padding: var(--tobira-space-md);
  align-items: flex-end;
  box-shadow: inset 0 0 0 3px var(--tobira-line-strong);
  transition: transform .28s var(--tobira-ease), box-shadow .28s var(--tobira-ease);
}

.chip:hover {
  z-index: 2;
  box-shadow: inset 0 0 0 3px var(--tobira-ink-faint), 0 18px 48px rgba(0, 0, 0, .55);
  transform: scale(1.06);
}

.chip code {
  padding: 3px 8px;
  border-radius: var(--tobira-radius-full);
  background: rgba(6, 6, 6, .62);
  color: var(--tobira-ink);
  font-family: var(--tobira-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  letter-spacing: .04em;
  opacity: 0;
  text-transform: uppercase;
  transition: opacity .2s var(--tobira-ease);
}

.chip:hover code { opacity: 1; }

/* ---- typefaces ---- */

/* Specimens sit on paper: a typeface is judged as ink on a page, and
   the light mass is where the 30 of 60/30/10 lives on this column. */

.face {
  display: flex;
  padding: var(--tobira-space-lg);
  flex-direction: column;
  background: var(--tobira-paper);
  gap: var(--tobira-space-xs);
  justify-content: space-between;
}

.face .specimen {
  display: flex;
  flex: 1;
  align-items: center;
  color: var(--tobira-bg);
  font-size: 46px;
  line-height: 1;
}

.face .face-name {
  color: rgba(10, 10, 10, .78);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.face .face-role {
  color: rgba(10, 10, 10, .45);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---- near works ---- */

.near-cell {
  position: relative;
  display: block;
  background: var(--tobira-surface);
  color: inherit;
  text-decoration: none;
}

.near-cell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  will-change: transform;
}

/* Posters carry their own headlines, so the name needs a real scrim to
   win against them — and one line only, since a wrapped name over a
   busy image reads as two texts colliding. */
.near-cell span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--tobira-space-2xl) var(--tobira-space-md) var(--tobira-space-md);
  background: linear-gradient(rgba(6, 6, 6, 0), rgba(6, 6, 6, .55) 55%, rgba(6, 6, 6, .94));
  color: var(--tobira-ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- parts ---- */

/* Two columns, one card size. A card here names a motion and then runs
   it, so every card needs the same room to run in — a bigger cell would
   claim its motion matters more. The reading column holds two 260px
   cards; an odd count hands its last card both columns, so the grid
   still closes as a rectangle. */
.bento-parts {
  --fact-row: 192px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.part.is-wide { grid-column: span 2; }

@media (max-width: 640px) {
  .bento-parts { grid-template-columns: minmax(0, 1fr); }
  .part.is-wide { grid-column: span 1; }
}

.part {
  display: flex;
  padding: var(--tobira-space-lg);
  flex-direction: column;
  background: var(--tobira-paper);
  color: inherit;
  gap: var(--tobira-space-xs);
  justify-content: flex-end;
  text-decoration: none;
  transition: background .25s var(--tobira-ease);
}

.part:hover { background: #e6e2da; }

/* ---- the motion each part card runs ----

   The card is cream, so the moving shapes are the paper's own ink at
   two weights, with the accent marking the one thing each motion is
   about. Everything moves on transform and opacity only: eight of
   these can be on screen at once. */

.part {
  --part-mark: rgba(10, 10, 10, .14);
  --part-mark-soft: rgba(10, 10, 10, .09);
}

/* The name keeps its own height at the bottom; the motion takes all
   the room that is left, whatever size the card ends up. */
.part-motion {
  position: relative;
  display: block;
  flex: 1;
  min-height: 0;
  margin-bottom: var(--tobira-space-sm);
  overflow: hidden;
}

.part-motion i,
.part-motion u,
.part-motion b {
  display: block;
  border-radius: 3px;
  background: var(--part-mark);
}

/* hover — a wave crosses the field and each face lifts as it passes.
   The shadow is a second layer's opacity, not an animated box-shadow,
   which would repaint every frame. */
/* Six columns and three rows, both dividing the card. Letting the
   columns fall where they fit would leave the last row part-filled on
   a card of another width, and a field that stops mid-row reads as a
   mistake rather than as a field. */
.m-hover {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.m-hover b {
  position: relative;
  border-radius: 5px;
  background: var(--part-mark-soft);
  animation: part-lift 5s var(--tobira-ease) infinite;
  will-change: transform;
}

.m-hover b::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: var(--tobira-accent);
  box-shadow: 0 7px 14px rgba(0, 0, 0, .22);
  opacity: 0;
  animation: part-lift-face 5s var(--tobira-ease) infinite;
}

/* The offsets run in sevens against six columns, so each row starts one
   step later than the one above and the wave crosses the field on the
   diagonal. Offsets of six would land on the same column every row,
   and a column lighting up all at once reads as a blink. */
.m-hover b:nth-child(7n+2), .m-hover b:nth-child(7n+2)::after { animation-delay: .16s; }
.m-hover b:nth-child(7n+3), .m-hover b:nth-child(7n+3)::after { animation-delay: .32s; }
.m-hover b:nth-child(7n+4), .m-hover b:nth-child(7n+4)::after { animation-delay: .48s; }
.m-hover b:nth-child(7n+5), .m-hover b:nth-child(7n+5)::after { animation-delay: .64s; }
.m-hover b:nth-child(7n+6), .m-hover b:nth-child(7n+6)::after { animation-delay: .8s; }
.m-hover b:nth-child(7n+7), .m-hover b:nth-child(7n+7)::after { animation-delay: .96s; }

@keyframes part-lift {
  0%, 8% { transform: none; }
  16%, 26% { transform: translateY(-5px) scale(1.05); }
  38%, 100% { transform: none; }
}

@keyframes part-lift-face {
  0%, 8% { opacity: 0; }
  16%, 26% { opacity: 1; }
  38%, 100% { opacity: 0; }
}

/* marquee — three bands, the middle one running back the other way */
.m-marquee {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 6px;
}

.m-marquee .row {
  display: flex;
  flex: 1;
  align-items: stretch;
  overflow: hidden;
}

.m-marquee .track {
  display: flex;
  flex: none;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  animation: part-slide 9s linear infinite;
  will-change: transform;
}

.m-marquee .row.rev .track {
  animation-direction: reverse;
  animation-duration: 13s;
}

.m-marquee u {
  flex: none;
  width: 30px;
  height: 72%;
  max-height: 26px;
  margin-right: 10px;
}

.m-marquee u.on {
  width: 46px;
  background: var(--tobira-accent);
}

/* The run is doubled, so half of it is one seamless loop. */
@keyframes part-slide { to { transform: translateX(-50%); } }

/* scrolltrigger — each line rises into place as the page is sent on */
.m-scrolltrigger {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 5px;
}

.m-scrolltrigger i {
  flex: 1;
  max-height: 26px;
  opacity: 0;
  transform: translateY(9px);
  animation: part-rise 4s var(--tobira-ease) infinite;
  will-change: transform, opacity;
}

.m-scrolltrigger i:nth-child(1) { width: 78%; }
.m-scrolltrigger i:nth-child(2) { width: 54%; animation-delay: .2s; }
.m-scrolltrigger i:nth-child(3) { width: 68%; animation-delay: .4s; background: var(--tobira-accent); }
.m-scrolltrigger i:nth-child(4) { width: 44%; animation-delay: .6s; }
.m-scrolltrigger i:nth-child(5) { width: 62%; animation-delay: .8s; }

@keyframes part-rise {
  0%, 6% { opacity: 0; transform: translateY(9px); }
  24%, 70% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateY(-7px); }
}

/* parallax — three plates at three distances. The nearer plate is
   darker, larger and faster, and covers the one behind it; the speeds
   are roughly 1 : 3 : 6.5, which is the distance itself. */
.m-parallax .plate {
  position: absolute;
  border-radius: 6px;
  animation: 6s ease-in-out infinite alternate;
  will-change: transform;
}

.m-parallax .far {
  left: 2%;
  top: 6%;
  z-index: 1;
  width: 38%;
  height: 62%;
  background: rgba(10, 10, 10, .10);
  animation-name: part-depth-far;
}

.m-parallax .mid {
  left: 26%;
  top: 16%;
  z-index: 2;
  width: 40%;
  height: 70%;
  background: rgba(10, 10, 10, .21);
  animation-name: part-depth-mid;
}

.m-parallax .near {
  left: 54%;
  top: 10%;
  z-index: 3;
  width: 42%;
  height: 84%;
  background: var(--tobira-accent);
  animation-name: part-depth-near;
}

@keyframes part-depth-far { to { transform: translateY(-4%); } }
@keyframes part-depth-mid { to { transform: translateY(-12%); } }
@keyframes part-depth-near { to { transform: translateY(-26%); } }

/* timeline — a playhead crosses the track and each cue it passes
   stands up. Time passing, not lights blinking. */
.m-gsap {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.m-gsap .fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--tobira-accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: part-playhead 3.6s var(--tobira-ease) infinite;
  will-change: transform;
}

.m-gsap i {
  flex: 1;
  height: 100%;
  background: var(--part-mark-soft);
  transform: scaleY(.3);
  transform-origin: bottom;
  animation: part-cue 3.6s var(--tobira-ease) infinite;
}

.m-gsap i:nth-child(2) { animation-delay: .16s; }
.m-gsap i:nth-child(3) { animation-delay: .32s; }
.m-gsap i:nth-child(4) { animation-delay: .48s; }
.m-gsap i:nth-child(5) { animation-delay: .64s; }
.m-gsap i:nth-child(6) { animation-delay: .8s; }
.m-gsap i:nth-child(7) { animation-delay: .96s; }
.m-gsap i:nth-child(8) { animation-delay: 1.12s; }

@keyframes part-playhead {
  0% { opacity: 1; transform: scaleX(0); }
  62%, 84% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes part-cue {
  0%, 4% { transform: scaleY(.3); }
  14%, 74% { transform: scaleY(1); }
  92%, 100% { transform: scaleY(.3); }
}

/* sticky — the heading stays put while the body keeps going past it */
.m-sticky {
  display: flex;
  flex-direction: column;
}

.m-sticky .head {
  flex: none;
  width: 46%;
  height: 11px;
  margin-bottom: 8px;
  border-radius: 3px;
  background: var(--tobira-accent);
}

.m-sticky .body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.m-sticky .stream {
  display: flex;
  flex-direction: column;
  animation: part-stream 7s linear infinite;
  will-change: transform;
}

/* margin, not gap: gap does not fall between the two copies of the
   run, so sending it half its height would land a line short. */
.m-sticky .stream i {
  flex: none;
  height: 8px;
  margin-bottom: 7px;
}

@keyframes part-stream {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

/* reveal — a cover pulls back and the line is there */
.m-reveal {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 6px;
}

.m-reveal .line {
  position: relative;
  flex: 1;
  max-height: 30px;
  overflow: hidden;
}

.m-reveal .line:nth-child(1) { width: 84%; }
.m-reveal .line:nth-child(2) { width: 58%; }
.m-reveal .line:nth-child(3) { width: 70%; }
.m-reveal .line:nth-child(4) { width: 46%; }

.m-reveal .line i {
  position: absolute;
  inset: 0;
  background: var(--part-mark);
  transform: translateX(-101%);
  animation: part-wipe 4s var(--tobira-ease) infinite;
  will-change: transform;
}

.m-reveal .line:nth-child(2) i { background: var(--tobira-accent); animation-delay: .16s; }
.m-reveal .line:nth-child(3) i { animation-delay: .32s; }
.m-reveal .line:nth-child(4) i { animation-delay: .48s; }

@keyframes part-wipe {
  0%, 3% { transform: translateX(-101%); }
  17%, 84% { transform: none; }
  96%, 100% { transform: translateX(101%); }
}

/* carousel — one face is sent along, then it stops and waits */
.m-carousel {
  display: flex;
  align-items: stretch;
}

.m-carousel .rail {
  display: flex;
  gap: 8px;
  animation: part-rail 7.5s var(--tobira-ease) infinite;
  will-change: transform;
}

.m-carousel .rail b {
  flex: none;
  width: 62px;
  border-radius: 6px;
  background: var(--part-mark-soft);
}

.m-carousel .rail b:nth-child(2) { background: var(--tobira-accent); }

@keyframes part-rail {
  0%, 18% { transform: none; }
  30%, 48% { transform: translateX(-70px); }
  60%, 78% { transform: translateX(-140px); }
  90%, 100% { transform: none; }
}

/* With motion turned off, every shape has to be left in its finished
   state — stopping the animations alone would leave the covers down and
   the lines hidden, which reads as a broken card rather than a still
   one. */
@media (prefers-reduced-motion: reduce) {
  /* !important because each shape names its own animation through a
     more specific selector than this one can reach; without it the
     cards would keep running. */
  .part-motion *,
  .part-motion *::after {
    animation: none !important;
  }

  .m-scrolltrigger i,
  .m-reveal .line i {
    opacity: 1;
    transform: none;
  }

  .m-gsap i { transform: scaleY(1); }
  .m-gsap .fill { transform: scaleX(1); }
}

.part strong {
  color: var(--tobira-bg);
  font-family: var(--tobira-font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.part small {
  color: rgba(10, 10, 10, .48);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.part.is-all {
  align-items: center;
  background: var(--tobira-accent);
  color: #1a0d09;
  flex-direction: row;
  gap: var(--tobira-space-sm);
  justify-content: center;
}

.part.is-all strong {
  color: inherit;
  font-size: 14px;
  text-align: center;
  word-break: keep-all;
}
.part.is-all:hover { background: var(--tobira-accent); filter: brightness(1.08); }

.work-tools[hidden] { display: none; }

.work-tools {
  position: absolute;
  top: var(--tobira-space-lg);
  right: var(--tobira-space-lg);
  display: flex;
  padding: var(--tobira-space-2xs);
  border-radius: var(--tobira-radius-full);
  background: rgba(10, 10, 10, .58);
  backdrop-filter: blur(14px);
  gap: var(--tobira-space-2xs);
}

.work-tools button {
  display: grid;
  width: var(--tobira-control-icon-md);
  height: var(--tobira-control-icon-md);
  border: 0;
  border-radius: var(--tobira-radius-full);
  background: transparent;
  color: var(--tobira-ink-dim);
  cursor: pointer;
  place-items: center;
  transition: background .2s var(--tobira-ease), color .2s var(--tobira-ease);
}

.work-tools button:hover {
  background: rgba(242, 239, 233, .1);
  color: var(--tobira-ink);
}

/* ---------- the rail ---------- */

.work-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: 320px;
  padding: var(--tobira-space-3xl) var(--tobira-space-xl);
  background: var(--tobira-surface);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .4s var(--tobira-ease);
}

.work-rail.is-open { transform: translateX(0); }

.work-rail h2 {
  margin: 0 0 var(--tobira-space-xl);
  color: var(--tobira-ink-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.work-rail a {
  display: block;
  padding: var(--tobira-space-sm) var(--tobira-space-md);
  border-radius: var(--tobira-radius-media);
  color: var(--tobira-ink-dim);
  font-size: 14px;
  text-decoration: none;
  transition: background .2s var(--tobira-ease), color .2s var(--tobira-ease);
}

.work-rail a:hover { background: var(--tobira-surface-warm); color: var(--tobira-ink); }
.work-rail a.is-here { background: var(--tobira-surface-warm); color: var(--tobira-ink); }

.work-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(6, 6, 6, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--tobira-ease);
}

.work-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ============================================================
   The door after the reading (§18.6 entrance 2). The moment the
   full prompt ends is the moment "自分でも" is loudest, so one
   quiet line waits under the panel. Achromatic hairline only —
   no colored container, per the brand's no-ornament rule.
   ============================================================ */
.work-atelier-door {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tobira-space-xs) var(--tobira-space-lg);
  padding-top: var(--tobira-space-md);
  border-top: 1px solid rgba(10, 10, 10, .14);
  text-decoration: none;
}
.work-atelier-door[hidden] { display: none; }
.work-atelier-line {
  color: rgba(10, 10, 10, .78);
  font-size: 13px;
}
.work-atelier-action {
  color: var(--tobira-black, #000);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.work-atelier-door:hover .work-atelier-action { text-decoration: underline; }
.work-atelier-door:focus-visible { outline: 2px solid var(--tobira-accent); outline-offset: 3px; }

.part { --label-zone: 71px; }

.mini {
  position: absolute;
  inset: var(--tobira-space-lg) var(--tobira-space-lg) auto;
  height: calc(100% - var(--label-zone) - var(--tobira-space-lg));
  pointer-events: none;
  overflow: hidden;
}

.part { position: relative; }
.part strong, .part small { position: relative; z-index: 2; }

.mini i,
.mini u,
.mini b { display: block; border-radius: 3px; background: rgba(10, 10, 10, .14); }

/* hover — a field of cards, a wave of cursor passing over it. The shadow
   rides an ::after opacity; animating box-shadow itself repaints each frame. */
.m-hover { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); grid-auto-rows: minmax(22px, 1fr); gap: 6px; }
.m-hover b { position: relative; border-radius: 5px; background: rgba(10, 10, 10, .09); animation: mini-lift 5s var(--tobira-ease) infinite; will-change: transform; }
.m-hover b::after {
  content: ""; position: absolute; inset: 0; border-radius: 5px;
  background: var(--tobira-accent); opacity: 0;
  box-shadow: 0 7px 14px rgba(0, 0, 0, .22);
  animation: mini-lift-face 5s var(--tobira-ease) infinite;
}
.m-hover b:nth-child(6n+2), .m-hover b:nth-child(6n+2)::after { animation-delay: .18s; }
.m-hover b:nth-child(6n+3), .m-hover b:nth-child(6n+3)::after { animation-delay: .36s; }
.m-hover b:nth-child(6n+4), .m-hover b:nth-child(6n+4)::after { animation-delay: .54s; }
.m-hover b:nth-child(6n+5), .m-hover b:nth-child(6n+5)::after { animation-delay: .72s; }
.m-hover b:nth-child(6n+6), .m-hover b:nth-child(6n+6)::after { animation-delay: .9s; }
@keyframes mini-lift {
  0%, 8% { transform: none; }
  16%, 26% { transform: translateY(-5px) scale(1.05); }
  38%, 100% { transform: none; }
}
@keyframes mini-lift-face {
  0%, 8% { opacity: 0; }
  16%, 26% { opacity: 1; }
  38%, 100% { opacity: 0; }
}

/* marquee — the track carries its own margins because gap leaves nothing
   between the two copies, and the loop would jump by one gap each turn. */
.m-marquee { display: flex; flex-direction: column; justify-content: space-evenly; gap: 6px; }
.m-marquee .row { display: flex; flex: 1; align-items: stretch; overflow: hidden; }
.m-marquee .track { display: flex; flex: none; height: 100%; align-items: center; white-space: nowrap; animation: mini-slide 9s linear infinite; will-change: transform; }
.m-marquee .row.rev .track { animation-direction: reverse; animation-duration: 13s; }
.m-marquee u { width: 30px; height: 72%; max-height: 26px; margin-right: 10px; flex: none; }
.m-marquee u.on { width: 46px; background: var(--tobira-accent); }
@keyframes mini-slide { to { transform: translateX(-50%); } }

/* scrolltrigger — chapters standing up in order as the page is sent on */
.m-scroll { display: flex; flex-direction: column; justify-content: space-evenly; gap: 5px; }
.m-scroll i { flex: 1; max-height: 26px; opacity: 0; transform: translateY(9px); animation: mini-rise 4s var(--tobira-ease) infinite; will-change: transform, opacity; }
.m-scroll i:nth-child(1) { width: 78%; }
.m-scroll i:nth-child(2) { width: 54%; animation-delay: .2s; }
.m-scroll i:nth-child(3) { width: 68%; animation-delay: .4s; background: var(--tobira-accent); }
.m-scroll i:nth-child(4) { width: 44%; animation-delay: .6s; }
.m-scroll i:nth-child(5) { width: 62%; animation-delay: .8s; }
@keyframes mini-rise {
  0%, 6% { opacity: 0; transform: translateY(9px); }
  24%, 70% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateY(-7px); }
}

/* parallax — three plates. The overlap is the depth, not an accident: the
   near plate occludes the far one, and darkens and moves as it comes
   forward. Speeds run 1 : 3 : 6.5. */
.m-parallax .plate { position: absolute; border-radius: 6px; animation: 6s ease-in-out infinite alternate; will-change: transform; }
.m-parallax .far { left: 2%; top: 6%; width: 38%; height: 62%; z-index: 1; background: rgba(10, 10, 10, .10); animation-name: mini-depth-far; }
.m-parallax .mid { left: 26%; top: 16%; width: 40%; height: 70%; z-index: 2; background: rgba(10, 10, 10, .21); animation-name: mini-depth-mid; }
.m-parallax .near { left: 54%; top: 10%; width: 42%; height: 84%; z-index: 3; background: var(--tobira-accent); animation-name: mini-depth-near; }
@keyframes mini-depth-far { to { transform: translateY(-4%); } }
@keyframes mini-depth-mid { to { transform: translateY(-12%); } }
@keyframes mini-depth-near { to { transform: translateY(-26%); } }

/* timeline — a playhead runs the length and each cue stands as it passes.
   Blinking would show events; this shows time. */
.m-timeline { display: flex; align-items: flex-end; gap: 5px; }
.m-timeline .fill { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tobira-accent); transform-origin: left; transform: scaleX(0); animation: mini-playhead 3.6s var(--tobira-ease) infinite; will-change: transform; }
.m-timeline i { flex: 1; height: 100%; background: rgba(10, 10, 10, .09); transform-origin: bottom; transform: scaleY(.3); animation: mini-cue 3.6s var(--tobira-ease) infinite; will-change: transform; }
.m-timeline i:nth-child(2) { animation-delay: .16s; }
.m-timeline i:nth-child(3) { animation-delay: .32s; }
.m-timeline i:nth-child(4) { animation-delay: .48s; }
.m-timeline i:nth-child(5) { animation-delay: .64s; }
.m-timeline i:nth-child(6) { animation-delay: .8s; }
.m-timeline i:nth-child(7) { animation-delay: .96s; }
.m-timeline i:nth-child(8) { animation-delay: 1.12s; }
@keyframes mini-playhead { 0% { transform: scaleX(0); opacity: 1; } 62%, 84% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes mini-cue { 0%, 4% { transform: scaleY(.3); } 14%, 74% { transform: scaleY(1); } 92%, 100% { transform: scaleY(.3); } }

/* sticky — the heading holds while the body runs past it. One strip moved
   by transform: lines laid out in flow cannot collide, and no layout
   property is touched per frame. */
.m-sticky { display: flex; flex-direction: column; }
.m-sticky .head { width: 46%; height: 11px; flex: none; margin-bottom: 8px; border-radius: 3px; background: var(--tobira-accent); }
.m-sticky .body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.m-sticky .stream { display: flex; flex-direction: column; animation: mini-stream 7s linear infinite; will-change: transform; }
/* margin, not gap: gap leaves nothing between the two copies, so half the
   strip is one copy short and the loop jumps every turn */
.m-sticky .stream i { height: 8px; margin-bottom: 7px; flex: none; }
@keyframes mini-stream { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* reveal — a curtain drawn off each line */
.m-reveal { display: flex; flex-direction: column; justify-content: space-evenly; gap: 6px; }
.m-reveal .line { position: relative; flex: 1; max-height: 30px; overflow: hidden; }
.m-reveal .line:nth-child(1) { width: 84%; }
.m-reveal .line:nth-child(2) { width: 58%; }
.m-reveal .line:nth-child(3) { width: 70%; }
.m-reveal .line:nth-child(4) { width: 46%; }
.m-reveal .line i { position: absolute; inset: 0; transform: translateX(-101%); animation: mini-wipe 4s var(--tobira-ease) infinite; will-change: transform; }
.m-reveal .line:nth-child(2) i { background: var(--tobira-accent); animation-delay: .16s; }
.m-reveal .line:nth-child(3) i { animation-delay: .32s; }
.m-reveal .line:nth-child(4) i { animation-delay: .48s; }
@keyframes mini-wipe {
  0%, 3% { transform: translateX(-101%); }
  17%, 84% { transform: none; }
  96%, 100% { transform: translateX(101%); }
}

/* carousel — a face at a time, and a rest between each */
.m-carousel { display: flex; align-items: stretch; }
.m-carousel .rail { display: flex; gap: 8px; animation: mini-rail 7.5s var(--tobira-ease) infinite; will-change: transform; }
.m-carousel .rail b { width: 62px; flex: none; border-radius: 6px; background: rgba(10, 10, 10, .09); }
.m-carousel .rail b:nth-child(2) { background: var(--tobira-accent); }
@keyframes mini-rail {
  0%, 18% { transform: none; }
  30%, 48% { transform: translateX(-70px); }
  60%, 78% { transform: translateX(-140px); }
  90%, 100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mini * { animation: none !important; }
}


/* ============================================================
   FIGMA / 40 Layout · Work Detail
   The page is one continuous archive sheet: a 593 / 40 / 593 study grid,
   not two independently scrolling panes. Existing runtime IDs stay intact;
   only their composition changes here.
   ============================================================ */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.work-body {
  min-height: 100vh;
  background: var(--tobira-bg-deep);
  color: var(--tobira-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  overflow-x: hidden;
}

.work-body [hidden] { display: none !important; }

.work-page {
  min-height: 100vh;
  padding: 44px 0 1px;
}

.work-head,
.work-layout {
  width: min(1226px, calc(100% - 44px));
  margin-inline: auto;
}

.work-head {
  position: relative;
}

.work-crumb {
  min-height: 30px;
  gap: 12px;
  color: var(--tobira-ink-faint);
  font-size: 12px;
  letter-spacing: .16em;
}

.work-crumb .here {
  max-width: min(360px, 44vw);
  color: var(--tobira-ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-crumb a {
  color: var(--tobira-ink-dim);
  font-weight: 600;
  text-transform: none;
}

.work-rail-toggle {
  width: 30px;
  height: 30px;
  border: 1px solid var(--tobira-line-strong);
  border-radius: var(--tobira-radius-full);
  background: transparent;
}

.work-menu-bars {
  display: grid;
  width: 12px;
  gap: 3px;
}

.work-menu-bars i {
  display: block;
  width: 12px;
  height: 1.5px;
  border-radius: var(--tobira-radius-full);
  background: currentColor;
}

.work-title {
  width: min(853px, 100%);
  margin: 14px 0 0;
  color: var(--tobira-ink);
  font-family: var(--tobira-font-display), var(--tobira-font-japanese);
  font-size: clamp(40px, 3.34vw, 48px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.34;
}

.work-meta {
  min-height: 30px;
  margin-top: 0;
}

.work-fact-stack {
  display: block;
}

.work-stack {
  display: flex;
  min-height: 30px;
  flex-wrap: wrap;
  gap: 8px;
}

.work-stack span {
  display: inline-flex;
  min-height: 30px;
  padding: 0 18px;
  align-items: center;
  border-radius: var(--tobira-radius-full);
  background: var(--tobira-surface);
  color: var(--tobira-ink-dim);
  font-family: var(--tobira-font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.work-step[hidden] { display: none; }

.work-layout {
  display: grid;
  margin-top: 32px;
  align-items: start;
  gap: 40px;
  grid-template-columns: repeat(2, minmax(0, 593px));
}

.work-doc,
.work-stage {
  display: block;
  min-width: 0;
  height: auto;
  padding: 0;
  overflow: visible;
  overscroll-behavior: auto;
}

.work-stage.is-lone { justify-content: initial; }

.work-frame {
  width: 100%;
  aspect-ratio: 593 / 371;
  border-radius: 0;
  background: var(--tobira-surface);
}

.work-frame video,
.work-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-tools {
  top: 12px;
  right: 12px;
  opacity: 0;
  transition: opacity .2s var(--tobira-ease);
}

.work-frame:hover .work-tools,
.work-frame:focus-within .work-tools { opacity: 1; }

.work-prompt {
  margin: 0;
  scroll-margin-top: 24px;
}

.work-prompt-panel {
  height: 601px;
  border-radius: var(--tobira-radius-media);
  background: var(--tobira-paper);
}

.work-prompt-bar {
  height: 54px;
  padding: 0 12px 0 22px;
  gap: 12px;
}

.work-prompt-bar h2 {
  font-size: 14px;
  line-height: 18px;
}

.work-prompt-bar .work-size {
  font-family: var(--tobira-font-code);
  font-size: 12px;
  line-height: 14px;
}

.work-copy {
  display: grid;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
}

.work-prompt-body {
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 74px 22px 84px;
  color: rgba(10, 10, 10, .82);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
  font-size: 13.5px;
  line-height: 1.95;
  overflow: hidden;
}

.work-prompt-cut {
  height: 110px;
  background: linear-gradient(rgba(242, 239, 233, 0), var(--tobira-paper));
}

.work-prompt-panel.is-empty {
  height: auto;
  min-height: 132px;
}

.work-prompt-panel.is-empty .work-prompt-body {
  height: auto;
  padding: 74px 22px 24px;
}

.work-facts {
  display: block;
  margin: 0;
}

.work-fact-outline { display: none !important; }

.work-fact-colors {
  margin-top: 50px;
}

.work-fact-fonts {
  margin-top: 44px;
}

.work-fact-parts {
  margin-top: 35px;
}

.work-fact-near {
  margin-top: 35px;
}

.work-fact-near h2,
.work-fact-parts h2 {
  margin: 0 0 17px;
  color: var(--tobira-ink);
  font-family: var(--tobira-font-japanese);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.25;
}

.bento {
  --fact-row: 104px;
  --fact-gap: 8px;
}

/* Every palette occupies the same three-row study field. The number of
   extracted colours changes how its existing spans divide that field, not
   where the next section begins. */
#swatches {
  height: 328px;
  grid-auto-rows: minmax(0, 1fr);
}

#swatches .chip {
  padding: 12px;
  box-shadow: none;
}

#swatches .chip:hover {
  box-shadow: none;
  transform: none;
}

#swatches .chip code {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(10, 10, 10, .45);
  font-family: var(--tobira-font-code);
  font-size: 10px;
  line-height: 12px;
  opacity: 1;
  text-transform: lowercase;
}

#swatches .chip.is-dark code { color: rgba(242, 239, 233, .45); }

.face {
  padding: 18px 22px;
  border-radius: var(--tobira-radius-media);
  gap: 0;
}

.face .specimen {
  align-items: flex-start;
  font-size: 40px;
  font-weight: 700;
  line-height: 44px;
}

.face .face-name {
  color: rgba(10, 10, 10, .65);
  font-size: 12px;
}

.face .face-role {
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: none;
}

/* Type specimens share one 104px row for one through four families. Larger
   stacks stay at the same height and scroll horizontally instead of pushing
   the component section below its partner in the left column. */
#fonts {
  height: 104px;
  grid-auto-rows: 104px;
  grid-template-columns: repeat(var(--font-count, 1), minmax(0, 1fr));
}

#fonts.is-scroller {
  display: flex;
  gap: var(--fact-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#fonts.is-scroller::-webkit-scrollbar { display: none; }

#fonts.is-scroller .face {
  flex: 0 0 calc((100% - (3 * var(--fact-gap))) / 4);
  scroll-snap-align: start;
}

#fonts:empty { display: none; }

.work-fact-fonts .fact-none {
  display: flex;
  height: 104px;
  padding: 18px 22px;
  align-items: center;
  border-radius: var(--tobira-radius-media);
  background: var(--tobira-paper);
  color: rgba(10, 10, 10, .58);
}

#near {
  --fact-row: 216px;
  height: 216px;
  grid-auto-rows: 216px;
  grid-template-columns: repeat(var(--near-count, 2), minmax(0, 1fr));
}

#near .near-cell {
  height: 216px;
  min-height: 0;
}

#near.is-scroller {
  display: flex;
  padding: 0;
  gap: var(--fact-gap);
  cursor: grab;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -ms-overflow-style: none;
  scrollbar-width: none;
  touch-action: pan-y;
}

#near.is-scroller.is-dragging {
  cursor: grabbing;
  user-select: none;
}

#near.is-scroller::-webkit-scrollbar { display: none; }

#near.is-scroller .near-cell {
  flex: 0 0 calc((100% - var(--fact-gap)) / 2);
  height: 216px;
}

.near-cell span {
  padding: 56px 16px 16px;
  font-family: var(--tobira-font-japanese);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
}

#parts {
  --fact-row: 216px;
  display: grid;
  height: 216px;
  grid-auto-rows: 216px;
  grid-template-columns: minmax(0, 1fr);
}

#parts.has-parts { grid-template-columns: 216px minmax(0, 1fr); }
#parts[data-count="1"] { grid-template-columns: 130px minmax(0, 1fr); }
#parts[data-count="5"],
#parts[data-count="6"],
#parts[data-count="7"] { grid-template-columns: 292px minmax(0, 1fr); }

#parts > .part.is-all.is-wide { grid-column: auto !important; }

.work-parts-list {
  display: grid;
  min-width: 0;
  gap: var(--fact-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  border-radius: 0;
  overflow: visible;
}

#parts[data-count="1"] .work-parts-list {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

#parts[data-count="2"] .work-parts-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

#parts[data-count="5"] .work-parts-list,
#parts[data-count="6"] .work-parts-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#parts[data-count="7"] .work-parts-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.work-parts-list .part {
  --label-zone: 42px;
  min-width: 0;
  min-height: 0;
  padding: 10px;
}

.work-parts-list .part strong {
  font-size: 11px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-parts-list .part small { display: none; }

.work-parts-list .mini {
  inset: 10px 10px auto;
  height: calc(100% - var(--label-zone) - 10px);
}

.part {
  padding: 18px;
  border-radius: var(--tobira-radius-media);
}

.part strong {
  font-family: var(--tobira-font-japanese);
  font-size: 13px;
  letter-spacing: .02em;
  line-height: 18px;
}

.part small {
  font-family: var(--tobira-font-body);
  font-size: 10px;
  letter-spacing: .12em;
  line-height: 14px;
}

.part.is-all.is-wide {
  isolation: isolate;
  background: var(--tobira-paper);
}

.part.is-all.is-wide strong {
  z-index: 3;
  color: #c8452f;
  font-family: var(--tobira-font-japanese);
  font-size: 13px;
}

.part.is-all.is-wide strong::after { content: none; }

.work-parts-field {
  position: absolute;
  inset: 18px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(3, 48px);
  gap: 6px;
  opacity: .3;
  pointer-events: none;
}

.work-parts-field-tile {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(10, 10, 10, .28);
  border-radius: 6px;
  overflow: hidden;
}

.work-parts-field-tile .mini {
  position: absolute;
  inset: 2px;
  height: auto;
}

.work-parts-field-tile .m-hover {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 12px;
  gap: 3px;
}

.work-parts-field-tile .m-marquee { gap: 3px; }
.work-parts-field-tile .m-marquee u { width: 18px; margin-right: 6px; }
.work-parts-field-tile .m-timeline { gap: 2px; }
.work-parts-field-tile .m-sticky .head { height: 7px; margin-bottom: 4px; }
.work-parts-field-tile .m-sticky .stream i { height: 5px; margin-bottom: 4px; }
.work-parts-field-tile .m-carousel .rail { gap: 4px; }
.work-parts-field-tile .m-carousel .rail b { width: 26px; }

.work-component-wordmark {
  position: absolute;
  right: 9px;
  bottom: 4px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  color: var(--tobira-bg);
  font-family: var(--tobira-font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .118em;
  line-height: 13px;
  white-space: nowrap;
}

.work-component-wordmark .is-vowel { color: #c8452f; }

.work-component-door {
  display: inline-flex;
  width: 7px;
  height: 10px;
  margin: 0 2px 0 1px;
}

.work-component-door svg {
  width: 7px;
  height: 10px;
}

.work-shots { display: none; }

.work-page .site-footer.tobira-footer.tobira-footer--landing {
  width: min(1200px, calc(100% - 44px));
  margin: 52px auto 84px;
}

.work-page .tobira-footer--landing .footer-leaf { min-height: 566px; }

.work-copy:focus-visible,
.work-rail-toggle:focus-visible,
.work-tools button:focus-visible,
.near-cell:focus-visible,
.part:focus-visible {
  outline: 2px solid var(--tobira-accent);
  outline-offset: 3px;
}

@media (max-width: 1280px) {
  .work-head,
  .work-layout {
    width: min(100% - 44px, 1226px);
  }

  .work-layout {
    gap: 28px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .work-page { padding-top: 26px; }

  .work-head,
  .work-layout { width: min(100% - 36px, 593px); }

  .work-title {
    margin-top: 16px;
    font-size: clamp(34px, 10vw, 48px);
    line-height: 1.16;
  }

  .work-meta { margin-top: 12px; }

  .work-layout {
    display: flex;
    margin-top: 28px;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .work-doc,
  .work-stage { display: contents; }

  .work-frame { order: 1; }
  .work-prompt { order: 2; margin-top: 28px; }
  .work-fact-fonts { order: 3; }
  .work-fact-parts { order: 4; }
  .work-fact-colors { order: 5; }
  .work-fact-near { order: 6; }
  .work-shots { order: 7; }
  .work-facts { display: contents; }

  .work-prompt-panel { height: min(601px, 76vh); min-height: 520px; }

  .work-fact-colors,
  .work-fact-fonts,
  .work-fact-parts,
  .work-fact-near { margin-top: 28px; }

  .work-page .site-footer.tobira-footer.tobira-footer--landing {
    width: min(100% - 36px, 593px);
    margin-top: 40px;
  }

  .work-page .tobira-footer--landing .footer-leaf { min-height: 0; }
}

@media (max-width: 520px) {
  .work-crumb .here { display: none; }
  .work-crumb .sep { display: none; }

  .work-layout .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-layout .b-w4 { grid-column: span 2; }

  #near.is-scroller .near-cell {
    flex-basis: min(78vw, 280px);
  }

  #parts.is-single-part {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  #fonts.is-scroller .face {
    flex-basis: calc((100% - var(--fact-gap)) / 2);
  }

  #parts[data-count="5"],
  #parts[data-count="6"],
  #parts[data-count="7"] {
    height: 440px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, 216px);
  }

  .work-parts-field {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .work-parts-field-tile:nth-child(n + 13) { display: none; }
  .work-component-wordmark { font-size: 10px; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  #near .near-cell img { transform: none !important; }
}