/* ============================================================
   bcbjapan.com — 図面一式 (the drawing set)
   Extends css/styles.css (設計図). Every sheet of the site loads
   styles.css first, then this file. One world: cyanotype that
   develops into a white working drawing; shu (朱) marks the action.
   ============================================================ */

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

/* ============================================================
   図面リスト · the sheet index (site navigation)
   ============================================================ */
.sheets { background: var(--cyan-2); color: var(--pale); border-bottom: 1.5px solid var(--pale-line); }
.sheets__in { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: auto 1fr; }
.sheets__home {
  display: grid; align-content: center; padding: 6px 14px; min-height: 52px;
  border-right: 1px solid var(--pale-line); text-decoration: none; line-height: 1.2;
}
.sheets__home b { font-family: var(--mincho); font-size: 18px; letter-spacing: .06em; }
.sheets__home span { font-size: 11px; letter-spacing: .2em; color: var(--pale-2); }
.sheets ol { position: relative; list-style: none; display: flex; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.sheets ol::-webkit-scrollbar { display: none; }
.sheets li { flex: 0 0 auto; border-right: 1px solid var(--pale-line); }
.sheets li a {
  display: grid; align-content: center; min-height: 52px; padding: 6px 14px;
  text-decoration: none; white-space: nowrap; line-height: 1.3;
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  transition: background .18s var(--ease);
}
.sheets li a small { font-size: 11px; font-weight: 400; letter-spacing: .14em; color: var(--pale-2); }
.sheets a:hover { background: rgba(222, 234, 247, .08); }
.sheets a[aria-current="page"] { background: var(--pale); color: var(--cyan-2); }
.sheets a[aria-current="page"] small { color: var(--ink-2); }
.sheets a:focus-visible { outline: 3px solid var(--exit-bright); outline-offset: -3px; }
@media (min-width: 760px) {
  .sheets li a { padding: 6px 18px; }
  .sheets__home { padding: 6px 20px; }
}

/* the frame's date cell before JS fills it */
#today:empty::before { content: "\00a0"; }

/* ============================================================
   Heroes · home and program sheets
   ============================================================ */
.hero--home .wrap { gap: 24px; }
.hero--home .probe__wrap { margin-top: 0; }
.hero--sub { padding: 36px 0 52px; }
.hero--sub .wrap { gap: 22px; }
.hero--sub .lede { margin-bottom: 0; }
.hero__side { display: grid; gap: 18px; align-content: start; }
@media (min-width: 760px) {
  .hero--home .wrap {
    grid-template-rows: auto auto auto auto auto 1fr;
    grid-template-areas: "h1 sheet" "lede sheet" "cta sheet" "probe sheet" "badges sheet" ". sheet";
  }
  .hero--home .probe__wrap { grid-area: probe; }
  .hero--sub { padding: 48px 0 68px; }
  .hero--sub .wrap {
    grid-template-columns: 1.05fr .95fr; grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "h1 side" "lede side" "cta side" ". side";
  }
  .hero--sub .hero__side { grid-area: side; }
}

/* secondary action on the cyanotype: outlined in drafting white */
.probe--cyan { background: transparent; color: var(--pale); border-color: var(--pale-line); }
.probe--cyan:hover { background: rgba(222, 234, 247, .08); border-color: var(--pale); }
.probe--cyan:focus-visible { outline-color: var(--exit-bright); }
.probe--cyan .probe__fig { stroke: var(--exit-bright); }
.probe__sub--cyan { color: var(--pale-2); }

/* section drawing vocabulary additions (cyan) */
.ghost-floor { fill: url(#hatch); fill-opacity: .55; stroke: var(--pale-2); stroke-width: 1.2; stroke-dasharray: 5 3; }
.col { fill: rgba(222, 234, 247, .26); stroke: var(--pale); stroke-width: 1.6; }
.gl { stroke: var(--pale); stroke-width: 1.5; }
.gap { stroke: none; }

/* ink drawings on the white sheet */
.i-wall { fill: none; stroke: var(--ink); stroke-width: 2; }
.i-part { stroke: var(--ink-line); stroke-width: 1.2; }
.i-base { stroke: var(--ink); stroke-width: 2.5; }
.i-ghost { fill: url(#hatchInk); fill-opacity: .6; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 5 3; }
.i-col { fill: rgba(18, 33, 59, .16); stroke: var(--ink); stroke-width: 1.5; }
.i-door { fill: none; stroke: var(--exit); stroke-width: 1.6; stroke-dasharray: 4 3; }
.tick--ink { stroke: var(--ink-2); }

/* ============================================================
   Titleblock variants
   ============================================================ */
.titleblock--cyan { border-color: var(--pale-line); background: rgba(10, 33, 57, .55); margin: 0; }
.titleblock--cyan > div { border-bottom-color: var(--pale-line); }
.titleblock--cyan dt { color: var(--pale-2); }
.titleblock--cyan dd { color: var(--pale); }
.titleblock--cyan dd span { color: var(--pale-2); }
.titleblock dd a { text-decoration-thickness: 1px; }
@media (min-width: 760px) {
  .titleblock--one { grid-template-columns: 1fr; }
  .titleblock--one > div:nth-child(odd) { border-right: 0; }
  .titleblock--one > div:nth-last-child(2) { border-bottom: 1px solid var(--ink-line); }
  .titleblock--cyan > div:nth-last-child(2) { border-bottom-color: var(--pale-line); }
}

/* ============================================================
   Sections on the white sheet
   ============================================================ */
.sec { padding: 52px 0 56px; border-top: 1px solid var(--ink-line); }
.sec--rule { padding: 60px 0 64px; border-top: 1.5px solid var(--ink); }
.day > .sec:first-child { border-top: 0; }
.sec .lede { margin-bottom: 22px; }

/* the three walls as a defect list on cyan (revtable variant) */
.revtable--walls td b { font-family: var(--gothic); }
.revtable--walls .revtable__src { white-space: normal; min-width: 9.5em; }
.revtable--walls .revtable__src a { display: block; color: var(--pale); line-height: 1.9; text-decoration-color: var(--pale-line); }
.revtable--walls .revtable__src a:hover { text-decoration-color: var(--pale); }
@media (max-width: 599px) {
  .revtable--walls .revtable__src::before { content: "扱う図面"; display: block; font-size: 11px; letter-spacing: .14em; }
  .revtable--walls .revtable__src { padding-bottom: 16px; }
  .revtable--walls .revtable__src a { display: inline; margin-right: 1em; }
}

/* an inline link with a drawn arrow */
.go {
  display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 8px;
  font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-line);
  text-decoration-thickness: 1px; min-height: 44px; transition: text-decoration-color .18s var(--ease);
}
.go:hover { text-decoration-color: var(--ink); }
.go svg { width: 22px; height: 22px; fill: none; stroke: var(--exit-ink); stroke-width: 1.6; transition: transform .18s var(--ease); }
.go:hover svg { transform: translateX(3px); }
.cyan .go { color: var(--pale); text-decoration-color: var(--pale-line); }
.cyan .go svg { stroke: var(--exit-bright); }

/* ============================================================
   四枚一式 · the ladder of sheets
   ============================================================ */
.ladder { list-style: none; border-top: 1.5px solid var(--ink); border-bottom: 3px solid var(--ink); }
.ladder > li {
  display: grid; grid-template-columns: 3.4em 1fr; column-gap: 12px;
  padding: 22px 0 24px; border-bottom: 1px solid var(--ink-line);
}
.ladder > li:last-child { border-bottom: 0; }
.ladder__n { font-size: 12px; letter-spacing: .1em; color: var(--ink-2); padding-top: .4em; font-variant-numeric: tabular-nums; line-height: 1.5; }
.ladder__n b { display: block; font-size: 22px; letter-spacing: -.01em; color: var(--ink); }
.ladder__stage { font-size: 12px; letter-spacing: .14em; color: var(--exit-ink); }
.ladder h3 { font-family: var(--mincho); font-size: clamp(1.25rem, 4.6vw, 1.55rem); line-height: 1.4; margin: 2px 0 8px; }
.ladder__body > p { color: var(--ink-2); font-size: .96em; max-width: 34em; }
.ladder__span { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin: 14px 0 12px; max-width: 30em; }
.dimbar { display: block; position: relative; height: 14px; width: calc(var(--u, 1) * 25%); border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); }
.dimbar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--ink); }
.dimbar--open { width: 100%; border-right: 0; }
.dimbar--open::before { border-top-style: dashed; border-top-color: var(--ink-2); }
.ladder__span span { font-size: 12px; letter-spacing: .12em; color: var(--ink-2); white-space: nowrap; }
.ladder__spec { border-top: 1px solid var(--ink-line); margin-bottom: 8px; }
.ladder__spec > div { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ink-line); font-size: .92em; line-height: 1.7; }
.ladder__spec dt { font-size: 11.5px; letter-spacing: .12em; color: var(--ink-2); padding-top: .3em; }
@media (min-width: 760px) {
  .ladder > li { grid-template-columns: 5em 1.05fr 1fr; column-gap: 28px; }
  .ladder__aside { padding-top: 26px; }
}
@media (max-width: 759px) {
  .ladder__aside { grid-column: 2; }
}

/* ============================================================
   現場写真 · photographs attached to the sheet
   ============================================================ */
.photo { margin: 0; border: 1.5px solid var(--ink); background: #fff; padding: 6px; }
.photo img { display: block; width: 100%; height: auto; }
.photo figcaption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px;
  padding: 8px 2px 2px; font-size: 12px; letter-spacing: .08em; line-height: 1.6; color: var(--ink-2);
}
.cyan .photo { border-color: var(--pale-line); background: var(--cyan-2); }
.cyan .photo figcaption { color: var(--pale-2); }
/* a photograph not yet supplied is drawn as undrawn: dashed, hatched, labelled */
.photo__pending {
  display: grid; place-items: center; aspect-ratio: 4 / 5;
  border: 1.5px dashed var(--ink-line);
  background-image: repeating-linear-gradient(45deg, var(--ink-grid-2) 0 1px, transparent 1px 7px);
  color: var(--ink-2); font-size: 13px; letter-spacing: .16em; text-align: center; line-height: 1.6;
}

/* ============================================================
   設計者 · people
   ============================================================ */
.people { display: grid; gap: 22px; }
.person {
  display: grid; grid-template-columns: 116px 1fr; grid-template-areas: "ph head" "facts facts";
  column-gap: 16px; row-gap: 14px; padding: 16px;
  border: 1.5px solid var(--ink); background: rgba(255, 255, 255, .5);
}
.person > .photo { grid-area: ph; padding: 4px; border-width: 1px; align-self: start; }
.person > .photo figcaption { display: none; }
.person__head { grid-area: head; align-self: center; }
.person__name { font-family: var(--mincho); font-weight: 700; font-size: 1.45em; line-height: 1.3; letter-spacing: .02em; }
.person__name span { display: block; font-family: var(--gothic); font-weight: 400; font-size: .5em; letter-spacing: .12em; color: var(--ink-2); margin-top: 2px; }
.person__role { margin-top: 8px; font-size: .9em; line-height: 1.65; }
.person > .facts { grid-area: facts; }
@media (min-width: 1000px) {
  .people { grid-template-columns: repeat(3, 1fr); }
  .person { grid-template-columns: 1fr; grid-template-areas: "ph" "head" "facts"; align-content: start; padding: 18px; }
  .person > .photo { max-width: 220px; }
}

.facts { border-top: 1px solid var(--ink-line); }
.facts > div { display: grid; grid-template-columns: 5.6em 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ink-line); font-size: .9em; line-height: 1.7; }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-size: 11.5px; letter-spacing: .12em; color: var(--ink-2); padding-top: .3em; }
.facts .src { display: block; font-size: 12px; letter-spacing: .04em; color: var(--ink-2); margin-top: 2px; }
.facts dd.is-pending { color: var(--ink-2); }
.facts dd.is-pending span {
  display: inline-block; padding: 0 .6em; border: 1px dashed var(--ink-line); font-size: 12.5px; letter-spacing: .12em;
  background-image: repeating-linear-gradient(45deg, var(--ink-grid-2) 0 1px, transparent 1px 6px);
}

/* ============================================================
   Spotlight · 個別設計 × Authority Institute
   ============================================================ */
.spot__grid { display: grid; gap: 24px; }
.spot__grid .lede { margin-bottom: 18px; }
@media (min-width: 760px) {
  .spot__grid { grid-template-columns: .9fr 1.1fr; column-gap: 48px; align-items: start; }
}

/* three walls, each with its own small drawing */
.wall3 { list-style: none; border-top: 1.5px solid var(--ink); }
.wall3 li { display: grid; grid-template-columns: 96px 1fr; column-gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--ink-line); }
.wall3 svg { display: block; width: 100%; height: auto; border: 1px solid var(--ink-line); background: rgba(255, 255, 255, .55); }
.wall3__k { font-size: 12px; letter-spacing: .14em; color: var(--exit-ink); }
.wall3__k i { font-style: normal; color: var(--ink-2); margin-left: .6em; }
.wall3 h3 { margin: 2px 0 6px; line-height: 1.55; }
.wall3 p { color: var(--ink-2); font-size: .95em; }
@media (min-width: 760px) {
  .wall3 { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 28px; border-bottom: 1px solid var(--ink-line); }
  .wall3 li { grid-template-columns: 1fr; row-gap: 12px; border-bottom: 0; align-content: start; }
  .wall3 svg { max-width: 150px; }
}

/* Business H.E.L.M. drawn as a building: roof, six pillars, two foundations */
.helm { border: 1.5px solid var(--ink); background: rgba(255, 255, 255, .5); padding: 14px 14px 16px; }
.helm__roof { position: relative; height: 70px; }
.helm__roof svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.helm__roof polygon { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.helm__roof p { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--mincho); font-weight: 700; font-size: 1.05em; line-height: 1.2; }
.helm__roof small { font-family: var(--gothic); font-weight: 400; font-size: 11.5px; letter-spacing: .12em; color: var(--ink-2); margin-left: .5em; }
.helm__cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; padding: 8px 6px 0; border-top: 3px solid var(--ink); }
.helm__p {
  appearance: none; -webkit-appearance: none; font: inherit; color: var(--ink); cursor: pointer;
  min-height: 188px; padding: 12px 0; border: 1.5px solid var(--ink); border-radius: 0;
  background: rgba(255, 255, 255, .7); display: grid; place-items: center;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.helm__p span { writing-mode: vertical-rl; font-weight: 700; font-size: 16px; letter-spacing: .14em; line-height: 1; }
.helm__p:hover { background: rgba(209, 67, 46, .05); }
.helm__p[aria-pressed="true"] { background: var(--exit-tint); color: var(--exit-ink); border-color: var(--exit-ink); }
.helm__p:focus-visible { outline: 3px solid var(--exit); outline-offset: 2px; }
.helm__base { border-top: 3px solid var(--ink); margin-top: 0; }
.helm__base > div { display: grid; grid-template-columns: 6.6em 1fr; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--ink-line); font-size: .88em; line-height: 1.7; }
.helm__base dt { font-size: 11.5px; letter-spacing: .12em; color: var(--ink-2); padding-top: .3em; }
.helm__read { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--ink-line); background: rgba(255, 255, 255, .6); min-height: 9.5em; }
.helm__read b { display: block; font-size: 1.1em; }
.helm__read p { color: var(--ink-2); font-size: .95em; margin-top: 4px; }
.helm__read .helm__map { color: var(--ink); font-size: 13.5px; margin-top: 8px; letter-spacing: .04em; }
.helm__letters { margin-top: 12px; font-size: 13px; line-height: 1.8; color: var(--ink-2); }
@media (min-width: 760px) {
  .helm__wrap { display: grid; grid-template-columns: 1.15fr .85fr; column-gap: 32px; align-items: start; }
  .helm__read { margin-top: 0; }
}

/* ============================================================
   工程表 · module schedule for 基礎編 / 実行編 (2 days each)
   ============================================================ */
.sched__wrap { overflow-x: auto; }
.sched { width: 100%; border-collapse: collapse; border: 1.5px solid var(--ink); background: rgba(255, 255, 255, .55); font-size: .95em; }
.sched caption { text-align: left; font-size: 12px; letter-spacing: .14em; color: var(--ink-2); padding: 0 0 8px; }
.sched th { font-size: 11.5px; letter-spacing: .12em; font-weight: 400; color: var(--ink-2); text-align: left; padding: 8px 10px; border-bottom: 1.5px solid var(--ink); }
.sched th.sched__dh { text-align: center; width: 3em; padding: 8px 0; border-left: 1px solid var(--ink-line); white-space: nowrap; }
.sched td { padding: 14px 10px; vertical-align: top; border-bottom: 1px solid var(--ink-line); }
.sched tbody tr:last-child td { border-bottom: 0; }
.sched__k { width: 3.4em; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sched td b { display: block; font-size: 1.04em; line-height: 1.5; }
.sched td p { color: var(--ink-2); font-size: .93em; margin-top: 4px; line-height: 1.7; }
.sched td p.sched__out { color: var(--ink); font-size: 13.5px; margin-top: 8px; letter-spacing: .02em; }
.sched td p.sched__out i { font-style: normal; font-size: 11.5px; letter-spacing: .12em; color: var(--ink-2); margin-right: .6em; }
.sched td.sched__d { position: relative; padding: 0; border-left: 1px solid var(--ink-line); }
/* the day's bar runs through every module held that day, like a column in a Gantt chart */
.sched td.sched__d.is-on::before { content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 8px; transform: translateX(-50%); background: var(--ink); }
.sched tr.sched__cap td { background: var(--exit-tint); }
.sched tr.sched__cap .sched__k { color: var(--exit-ink); }
.sched tr.sched__cap td.sched__d.is-on::before { background: var(--exit); }
@media (max-width: 419px) {
  .sched td { padding: 12px 8px; }
  .sched th.sched__dh { width: 2.4em; font-size: 11px; letter-spacing: .04em; }
  .sched__k { width: 2.8em; }
}

/* what the course does not teach: out of scope, hatched head */
.xout { border: 1.5px solid var(--ink); background: rgba(255, 255, 255, .55); }
.xout__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1.5px solid var(--ink); font-weight: 700;
  background-image: repeating-linear-gradient(45deg, var(--ink-grid-2) 0 1px, transparent 1px 7px);
}
.xout__head span { font-size: 11.5px; font-weight: 400; letter-spacing: .14em; color: var(--ink-2); }
.xout ul { list-style: none; }
.xout li { position: relative; padding: 12px 14px 12px 40px; border-bottom: 1px solid var(--ink-line); }
.xout li:last-child { border-bottom: 0; }
/* a drawn cross: two 1.5px strokes */
.xout li::before, .xout li::after { content: ""; position: absolute; left: 15px; top: 1.35em; width: 14px; height: 1.5px; background: var(--ink); }
.xout li::before { transform: rotate(45deg); }
.xout li::after { transform: rotate(-45deg); }
.xout li small { display: block; font-size: 12.5px; color: var(--ink-2); letter-spacing: .04em; }

/* rules of the course, ruled list with ink ticks */
.rules { list-style: none; border-top: 1.5px solid var(--ink); }
.rules li { position: relative; padding: 14px 0 14px 22px; border-bottom: 1px solid var(--ink-line); max-width: 44em; }
.rules li::before { content: ""; position: absolute; left: 0; top: 1.55em; width: 12px; height: 1px; background: var(--ink); }

/* next sheet in the set */
.nextsheet {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px;
  max-width: 34em; padding: 14px 16px; margin: 6px 0 30px;
  border: 1.5px solid var(--ink); background: rgba(255, 255, 255, .6);
  text-decoration: none; transition: background .18s var(--ease);
}
.nextsheet span { font-size: 11.5px; letter-spacing: .14em; color: var(--ink-2); }
.nextsheet b { display: block; font-size: 1.08em; line-height: 1.5; }
.nextsheet small { display: block; font-size: 13px; color: var(--ink-2); }
.nextsheet svg { grid-column: 2; grid-row: 1 / span 3; width: 30px; height: 30px; fill: none; stroke: var(--exit-ink); stroke-width: 1.6; transition: transform .18s var(--ease); }
.nextsheet:hover { background: #fff; }
.nextsheet:hover svg { transform: translateX(3px); }
.nextsheet > * { grid-column: 1; }

/* diagnosis sheet and legal tables */
.spec { width: 100%; border-collapse: collapse; border: 1.5px solid var(--ink); background: rgba(255, 255, 255, .6); }
.spec caption { text-align: left; font-size: 12px; letter-spacing: .14em; color: var(--ink-2); padding: 0 0 8px; }
.spec thead th { font-size: 11.5px; letter-spacing: .12em; font-weight: 400; color: var(--ink-2); text-align: left; padding: 8px 12px; border-bottom: 1.5px solid var(--ink); }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid var(--ink-line); line-height: 1.75; }
.spec tbody tr:last-child > * { border-bottom: 0; }
.spec tbody th { width: 30%; font-size: .95em; }
.spec td { font-size: .95em; }
.spec__n { width: 2.6em; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 700; }
.spec__m { font-size: 13px !important; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 599px) {
  .spec--stack tbody tr { display: grid; border-bottom: 1px solid var(--ink-line); }
  .spec--stack tbody tr:last-child { border-bottom: 0; }
  .spec--stack tbody th { width: auto; border-bottom: 0; padding-bottom: 0; }
  .spec--stack tbody td { border-bottom: 0; }
  .spec__m { white-space: normal; }
}
.todo {
  display: inline-block; padding: 0 .6em; margin: 0 .2em; border: 1px dashed var(--ink-2);
  font-size: 12.5px; letter-spacing: .12em; color: var(--ink-2); font-weight: 400; line-height: 1.8;
  background-image: repeating-linear-gradient(45deg, var(--ink-grid-2) 0 1px, transparent 1px 6px);
}

/* two co-instructors on the 1日体験 sheet */
@media (min-width: 1000px) {
  .people--two { grid-template-columns: repeat(2, 1fr); }
}

/* legal documents */
.legalhead { padding: 40px 0 44px; }
.legalhead .h2 { margin-bottom: 8px; }
.legalhead .lede { margin-bottom: 0; }
.doc .wrap > * { max-width: 46em; }
.doc h2 { font-family: var(--mincho); font-weight: 700; font-size: clamp(1.15rem, 4vw, 1.45rem); line-height: 1.5; margin: 38px 0 10px; }
.doc h2:first-of-type { margin-top: 30px; }
.doc p, .doc li { font-size: .97em; }
.doc p + p { margin-top: 10px; }
.doc ol, .doc ul { padding-left: 1.4em; margin-top: 8px; }
.doc li + li { margin-top: 6px; }
.doc__draft {
  padding: 12px 14px; border: 1.5px dashed var(--ink-2); font-size: 14px; line-height: 1.75;
  background-image: repeating-linear-gradient(45deg, var(--ink-grid) 0 1px, transparent 1px 7px);
}

/* closing section extras */
.last .probe__wrap { margin-top: 18px; }
.last .nextsheet { margin-top: 0; }

/* ============================================================
   Footer · 表題欄 with the set index and the operator line
   ============================================================ */
.frame-bottom__nav {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--ink-line); border: 1px solid var(--ink-line); margin-bottom: 18px;
}
.frame-bottom__nav li { background: var(--paper-2); }
.frame-bottom__nav a { display: grid; align-content: center; min-height: 46px; padding: 8px 12px; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.45; transition: background .18s var(--ease); }
.frame-bottom__nav a small { font-size: 11px; letter-spacing: .12em; color: var(--ink-2); }
.frame-bottom__nav a:hover { background: var(--paper); }
.frame-bottom__op { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ink-line); color: var(--ink); line-height: 1.85; }
.frame-bottom__op a { color: var(--ink); }
@media (min-width: 760px) {
  .frame-bottom__nav { grid-template-columns: repeat(4, 1fr); }
}

/* reveal stagger for the site's lists */
.ladder > li.rv.in:nth-child(2), .wall3 li.rv.in:nth-child(2), .person.rv.in:nth-child(2) { transition-delay: .08s; }
.ladder > li.rv.in:nth-child(3), .wall3 li.rv.in:nth-child(3), .person.rv.in:nth-child(3) { transition-delay: .16s; }
.ladder > li.rv.in:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .go svg, .nextsheet svg, .helm__p { transition: none; }
}

/* ---- fix round 1 ---- */
/* Latin names are lettered in Gothic: BIZ UDMincho's Latin reads as a typewriter */
.lat { font-family: var(--gothic); letter-spacing: -.01em; }
.person__name--lat { font-family: var(--gothic); font-size: 1.32em; letter-spacing: 0; }
.sheets__home b { font-family: var(--gothic); letter-spacing: .1em; }
/* styles.css gives every .titleblock grid-area: tb at ≥760px; inside the hero side it must flow */
.hero__side > .titleblock { grid-area: auto; }
.revtable--walls .revtable__src a { white-space: nowrap; }
/* inline-block so the row can break between links (the markup has no whitespace between anchors) */
@media (max-width: 599px) { .revtable--walls .revtable__src a { display: inline-block; } }
@media (min-width: 600px) { .revtable--walls .revtable__src { min-width: 11.5em; } }
@media (max-width: 599px) {
  .titleblock--one > div, .ladder__spec > div { grid-template-columns: 1fr; gap: 0; }
  .titleblock--one dt, .ladder__spec dt { padding-top: 0; }
  .spot__grid > .photo { max-width: 300px; }
}
.sched th.sched__dh { width: 4.6em; }
@media (max-width: 419px) { .sched th.sched__dh { width: 3.4em; letter-spacing: 0; } }
.wall3__k i { display: block; margin-left: 0; }

/* ============================================================
   コラム · the column (Read mode inside the drawing set)
   ============================================================ */
.sheets a[aria-current="true"] { background: var(--pale); color: var(--cyan-2); }
.sheets a[aria-current="true"] small { color: var(--ink-2); }

/* breadcrumb, drawn as a title-block path */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; font-size: 12.5px; letter-spacing: .06em; line-height: 1.8; color: var(--pale-2); margin-bottom: 14px; }
.crumbs li + li::before { content: "／"; margin: 0 .4em; color: var(--pale-line); }
.crumbs a { color: var(--pale); text-decoration-color: var(--pale-line); }
.crumbs a:hover { text-decoration-color: var(--pale); }

/* article and index heads on the cyanotype */
.arthead { padding: 28px 0 44px; }
.arthead .h1 { margin: 4px 0 16px; font-size: clamp(1.55rem, 6.2vw, 2.55rem); max-width: 24em; }
.arthead .lede { margin-bottom: 22px; }
.artmeta { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 46em; border: 1.5px solid var(--pale-line); background: rgba(10, 33, 57, .55); }
.artmeta > div { padding: 8px 12px; border-right: 1px solid var(--pale-line); border-bottom: 1px solid var(--pale-line); min-width: 0; }
.artmeta > div:nth-child(2n) { border-right: 0; }
.artmeta > div:nth-last-child(-n+2) { border-bottom: 0; }
.artmeta dt { font-size: 11px; letter-spacing: .14em; color: var(--pale-2); }
.artmeta dd { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 760px) {
  .artmeta { grid-template-columns: repeat(3, 1fr); }
  .artmeta > div { border-right: 1px solid var(--pale-line); border-bottom: 1px solid var(--pale-line); }
  .artmeta > div:nth-child(3n) { border-right: 0; }
  .artmeta > div:nth-last-child(-n+3) { border-bottom: 0; }
}

/* the article body */
.article { padding: 44px 0 20px; }
.prose { max-width: 40em; }
.prose > p { margin: 0 0 1.1em; }
.prose h2 {
  font-family: var(--mincho); font-weight: 700; font-size: clamp(1.3rem, 4.8vw, 1.8rem); line-height: 1.45;
  letter-spacing: -.01em; text-wrap: balance; margin: 2.2em 0 .8em; padding-top: .9em; border-top: 1px solid var(--ink-line);
}
.prose .steps, .prose .floors, .prose .figs, .prose .rules { margin: 1.2em 0 1.4em; }
.prose .steps__b p + p { margin-top: .7em; }
.steps__b { grid-area: p; }
@media (max-width: 599px) {
  .prose .steps li { grid-template-columns: 1fr; grid-template-areas: "n" "h" "p"; }
  .prose .steps__n { padding-top: 0; }
}
.floors--static li { cursor: default; }
.floors--static li:hover { background: transparent; }

.keypoints { margin: 1.6em 0 .4em; }
.keypoints__h { font-size: 12px; letter-spacing: .14em; color: var(--ink-2); margin-bottom: 6px; }
.keypoints .titleblock { margin: 0; }

/* figures on the white sheet */
.figs--ink { border-color: var(--ink); background: rgba(255, 255, 255, .55); }
.figs--ink .fig { border-color: var(--ink-line); }
.figs--ink .fig dt, .figs--ink .fig .src { color: var(--ink-2); }
/* inside the 40em reading measure four columns crush the units: stay 2×2 at every width */
@media (min-width: 760px) {
  .figs--ink { grid-template-columns: 1fr 1fr; }
  .figs--ink .fig { border-right: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }
  .figs--ink .fig:nth-child(2n) { border-right: 0; }
  .figs--ink .fig:nth-last-child(-n+2) { border-bottom: 0; }
}
.artfig { margin: 1.4em 0 1.6em; border: 1.5px solid var(--ink); background: rgba(255, 255, 255, .5); padding: 8px 6px 4px; }
.artfig svg { display: block; width: 100%; height: auto; }
.artfig figcaption { font-size: 13px; line-height: 1.7; color: var(--ink-2); padding: 6px 6px 4px; }

.pull { margin: 1.6em 0; padding: 18px 0 16px 22px; position: relative; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink-line); }
.pull::before { content: ""; position: absolute; left: 0; top: 2.1em; width: 12px; height: 1px; background: var(--ink); }
.pull blockquote p { font-family: var(--mincho); font-size: 1.08em; line-height: 1.95; }
.pull figcaption { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }

/* the one-sheet worksheet, drawn blank */
.worksheet__wrap { margin: 1.2em 0 1.6em; }
.worksheet { width: 100%; table-layout: fixed; border-collapse: collapse; border: 2px solid var(--ink); background: #fff; }
.worksheet caption { text-align: left; font-weight: 700; padding-bottom: 8px; line-height: 1.6; }
.worksheet caption span { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-2); letter-spacing: .04em; }
.worksheet th { text-align: left; vertical-align: top; padding: 10px; font-size: 14px; line-height: 1.5; border-bottom: 1.5px solid var(--ink); border-right: 1px solid var(--ink-line); }
.worksheet th small { display: block; font-size: 11.5px; font-weight: 400; letter-spacing: .12em; color: var(--ink-2); }
.worksheet td { height: 46px; border-right: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }
.worksheet th:last-child, .worksheet td:last-child { border-right: 0; }
.worksheet tbody tr:last-child td { border-bottom: 0; }

.artcta { max-width: 40em; margin: 2.4em 0 1em; padding: 18px 16px 20px; border: 1.5px solid var(--ink); background: rgba(255, 255, 255, .6); }
.artcta > p { margin-bottom: 14px; }
.artcta .cta__sub { color: var(--ink-2); }
.artabout { max-width: 40em; font-size: 14px; line-height: 1.8; color: var(--ink-2); margin-top: 14px; }

.sources { list-style: none; border-top: 1.5px solid var(--ink); max-width: 44em; }
.sources li { padding: 10px 0; border-bottom: 1px solid var(--ink-line); font-size: .93em; line-height: 1.75; }
.sources li small { display: block; font-size: 12.5px; color: var(--ink-2); }
.sources a { color: var(--ink); text-decoration-color: var(--ink-line); overflow-wrap: anywhere; }

/* post list (home and the column index) */
.postlist { list-style: none; border-top: 1.5px solid var(--ink); margin-bottom: 14px; }
.post { position: relative; padding: 18px 0 20px; border-bottom: 1px solid var(--ink-line); transition: background .18s var(--ease); }
.post:hover { background: rgba(255, 255, 255, .55); }
.post__meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; letter-spacing: .08em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.post__t { font-family: var(--mincho); font-weight: 700; font-size: clamp(1.15rem, 4.2vw, 1.45rem); line-height: 1.5; margin: 6px 0 6px; text-wrap: balance; }
.post__t a { text-decoration: underline; text-decoration-color: var(--ink-line); text-decoration-thickness: 1px; text-underline-offset: .28em; }
.post__t a::after { content: ""; position: absolute; inset: 0; }
.post:hover .post__t a { text-decoration-color: var(--ink); }
.post__x { color: var(--ink-2); font-size: .95em; max-width: 40em; }
.post__t a:focus-visible { outline: none; }
.post:focus-within { outline: 3px solid var(--exit); outline-offset: 2px; }

@media print {
  .frame-top, .sheets, .frame-bottom, .skip, .bar, .artcta, .crumbs { display: none !important; }
  .cyan, .day { background: #fff !important; color: #000 !important; }
  .day.pre::before { display: none; }
}


/* ============================================================
   brandkit v2 (2026-09-20): tile logo in the sheet index, Latin in IBM Plex
   ============================================================ */
.sheets__home { grid-template-columns: auto auto; column-gap: 10px; align-items: center; }
.sheets__tile { width: 30px; height: 30px; display: block; }
.sheets__wm { display: grid; line-height: 1.2; }
.sheets__home b { font-family: var(--latin); font-weight: 600; letter-spacing: .04em; }
.sheets__home .sheets__wm > span { font-family: var(--latin); }
.lat, .person__name--lat { font-family: var(--latin); }
.sheets__home .sheets__wm { font-size: inherit; letter-spacing: normal; color: inherit; }
.sheets__home .sheets__wm > span { font-size: 11px; letter-spacing: .2em; color: var(--pale-2); }
.sheets__home[aria-current="page"] .sheets__wm > span { color: var(--ink-2); }

/* home hero: the tile replaces the section drawing (partner review 2026-09-18) */
.hero__sheet--tile { display: flex; align-items: center; justify-content: flex-start; }
.tilemark { width: min(240px, 58vw); margin: 6px 0 26px; }
.tilemark svg { display: block; width: 100%; height: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
@media (min-width: 900px) { .hero__sheet--tile { justify-content: center; } .tilemark { width: 300px; margin: 0; } }