@import url('./fonts/faces.css');

/* Reedwright — light oak workshop.
   Hard edges only: no corner radius anywhere, no shadow, no gradient except the
   vertical wood grain on walnut panels. Numerals are always Cutive Mono, so the
   specification tables line up without any tabular-figure trickery. */

:root {
  --oak-linen: #E3E5D9;
  --oak-walnut: #4E2C22;
  --oak-straw: #BAAA7C;
  --oak-taupe: #96685E;
  --oak-olive: #968C3A;
  --oak-rule: 2px;
  --oak-shell: 1180px;
  --oak-serif: 'Rufina', 'Iowan Old Style', 'Songti SC', Georgia, serif;
  --oak-sans: 'Commissioner', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --oak-mono: 'Cutive Mono', 'Cascadia Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--oak-linen);
  color: var(--oak-walnut);
  font-family: var(--oak-sans);
  font-size: 17px;
  line-height: 1.62;
}

a { color: var(--oak-walnut); text-decoration: none; border-bottom: 1px solid var(--oak-straw); }
a:hover { border-bottom-color: var(--oak-walnut); background: rgba(186, 170, 124, .22); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: var(--oak-rule) solid var(--oak-olive);
  outline-offset: 2px;
}

h1, h2, h3, h4 { font-family: var(--oak-serif); font-weight: 400; line-height: 1.14; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
h3 { font-size: 1.16rem; }
p { margin: 0 0 1.05em; }
code, kbd, samp, .num { font-family: var(--oak-mono); font-size: .95em; }

.shell { max-width: var(--oak-shell); margin: 0 auto; padding: 0 26px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 40; background: var(--oak-linen); padding: 8px 12px; border: var(--oak-rule) solid var(--oak-walnut); }

/* ---------------------------------------------------------------- masthead */
.masthead { background: var(--oak-walnut); color: var(--oak-linen); border-bottom: var(--oak-rule) solid var(--oak-walnut); }
.masthead__grain {
  background-image: repeating-linear-gradient(90deg, rgba(227, 229, 217, .06) 0 1px, transparent 1px 5px);
}
.masthead__row { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; padding: 14px 0 12px; }
.masthead__brand { font-family: var(--oak-serif); font-size: 1.5rem; color: var(--oak-linen); border: 0; letter-spacing: .01em; }
.masthead__brand:hover { background: none; color: var(--oak-straw); }
.masthead__tag { font-family: var(--oak-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oak-straw); }
.masthead__nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.masthead__nav a { color: var(--oak-linen); border-bottom: 1px solid rgba(227, 229, 217, .35); font-size: .9rem; }
.masthead__nav a:hover { border-bottom-color: var(--oak-straw); background: none; }
.masthead__lang { font-family: var(--oak-mono); }

/* room bar: eight equal segments, current one inverted */
.room-bar { display: grid; grid-template-columns: repeat(8, 1fr); border-top: 1px solid rgba(227, 229, 217, .28); }
.room-bar__seg {
  padding: 9px 6px 10px; text-align: center; color: var(--oak-linen); border: 0;
  border-right: 1px solid rgba(227, 229, 217, .22); font-size: .82rem; letter-spacing: .01em;
}
.room-bar__seg:last-child { border-right: 0; }
.room-bar__seg:hover { background: rgba(227, 229, 217, .14); }
.room-bar__seg.is-here { background: var(--oak-linen); color: var(--oak-walnut); }
.room-bar__code { display: block; font-family: var(--oak-mono); font-size: .68rem; letter-spacing: .12em; color: var(--oak-straw); }
.room-bar__seg.is-here .room-bar__code { color: var(--oak-taupe); }

/* rung rail: four ticks on a single 2px line */
.level-scale { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--oak-straw); border-bottom: var(--oak-rule) solid var(--oak-walnut); }
.level-scale__tick {
  position: relative; padding: 8px 8px 9px; border: 0; border-right: var(--oak-rule) solid rgba(78, 44, 34, .35);
  color: var(--oak-walnut); font-family: var(--oak-mono); font-size: .78rem; letter-spacing: .06em; text-align: center;
}
.level-scale__tick:last-child { border-right: 0; }
.level-scale__tick:hover { background: rgba(227, 229, 217, .55); }
.level-scale__tick.is-here { background: var(--oak-walnut); color: var(--oak-linen); }
.level-scale__tick.is-dormant { color: rgba(78, 44, 34, .62); border-bottom: 0; }
.level-scale__name { display: block; font-family: var(--oak-sans); font-size: .72rem; letter-spacing: .02em; }

/* ------------------------------------------------------------------ layout */
.main { padding: 34px 0 10px; }
.standfirst { font-size: 1.08rem; max-width: 62ch; color: var(--oak-taupe); }
.rule { border: 0; border-top: var(--oak-rule) solid var(--oak-walnut); margin: 30px 0; }
.rule--soft { border-top-width: 1px; border-top-color: var(--oak-straw); }
.eyebrow { font-family: var(--oak-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oak-taupe); margin: 0 0 .35em; }

/* ------------------------------------------------------------------ matrix */
.room-matrix { border: var(--oak-rule) solid var(--oak-walnut); }
.matrix-head { display: grid; grid-template-columns: 210px repeat(4, 1fr); background: var(--oak-linen); border-bottom: var(--oak-rule) solid var(--oak-walnut); }
.matrix-head__cell { padding: 10px 10px 11px; border-right: 1px solid var(--oak-straw); }
.matrix-head__cell:last-child { border-right: 0; }
.matrix-head__cell a { border: 0; display: block; }
.matrix-head__cell a:hover { background: rgba(186, 170, 124, .3); }
.matrix-head__code { font-family: var(--oak-mono); font-size: .82rem; letter-spacing: .08em; }
.matrix-head__name { display: block; font-size: .74rem; color: var(--oak-taupe); }
.room-row { display: grid; grid-template-columns: 210px repeat(4, 1fr); border-bottom: 1px solid var(--oak-straw); }
.room-row:last-child { border-bottom: 0; }
.room-row__head { padding: 12px 10px; border-right: var(--oak-rule) solid var(--oak-walnut); }
.room-row__head a { border: 0; display: block; }
.room-row__head a:hover { background: rgba(186, 170, 124, .3); }
.room-row__name { font-family: var(--oak-serif); font-size: 1.02rem; }
.room-row__meta { font-family: var(--oak-mono); font-size: .7rem; color: var(--oak-taupe); display: block; margin-top: 2px; }
.matrix-cell { border-right: 1px solid var(--oak-straw); padding: 9px; min-height: 74px; }
.matrix-cell:last-child { border-right: 0; }
.matrix-cell a { display: block; border: 0; height: 100%; }
.matrix-cell a:hover { background: rgba(186, 170, 124, .28); }
.matrix-cell--empty { border-left: 3px dotted var(--oak-straw); }
.matrix-cell--empty .carrier-chip__code { color: var(--oak-taupe); }
.matrix-cell--empty a:hover { background: rgba(150, 104, 94, .14); }

.carrier-chip { display: block; }
.carrier-chip__code { font-family: var(--oak-mono); font-size: .94rem; letter-spacing: .1em; }
.carrier-chip__days { display: block; font-family: var(--oak-mono); font-size: .72rem; color: var(--oak-taupe); margin-top: 3px; }
.carrier-chip__title { display: block; font-size: .74rem; line-height: 1.3; margin-top: 5px; color: var(--oak-walnut); }
.carrier-chip--pending .carrier-chip__title { color: var(--oak-taupe); font-style: italic; }

.filter-strip { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; padding: 10px 0 12px; border-bottom: 1px solid var(--oak-straw); }
.filter-strip__state { font-family: var(--oak-mono); font-size: .78rem; letter-spacing: .04em; }
.filter-strip__form { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-left: auto; }
.filter-strip label { font-family: var(--oak-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oak-taupe); }

/* ------------------------------------------------------------- now band */
.now-band { background: var(--oak-walnut); color: var(--oak-linen); border: var(--oak-rule) solid var(--oak-walnut); padding: 16px 18px; display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; }
.now-band__label { font-family: var(--oak-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oak-straw); }
.now-band__room { font-family: var(--oak-serif); font-size: 1.3rem; color: var(--oak-linen); border-bottom: 1px solid rgba(227, 229, 217, .4); }
.now-band__room:hover { background: none; color: var(--oak-straw); border-bottom-color: var(--oak-straw); }
.now-band__note { font-size: .92rem; color: rgba(227, 229, 217, .88); max-width: 52ch; }
.now-band__clock { margin-left: auto; font-family: var(--oak-mono); font-size: .74rem; color: var(--oak-straw); }

/* --------------------------------------------------------------- two column */
.plan-split { display: grid; grid-template-columns: 40% 1fr; gap: 34px; align-items: start; }
.plan-left { position: sticky; top: 18px; }
.plan-right { min-width: 0; }
.plan-right h2 { border-top: var(--oak-rule) solid var(--oak-walnut); padding-top: 14px; margin-top: 26px; }
.plan-right h2:first-child { margin-top: 0; }
.plan-right h3 { font-family: var(--oak-sans); font-weight: 700; font-size: .98rem; letter-spacing: .01em; margin-top: 1.4em; }
.plan-right ul, .plan-right ol { padding-left: 1.25em; }
.plan-right li { margin-bottom: .45em; }
.plan-right table { margin: 1.1em 0; }
.plan-right blockquote { margin: 1.1em 0; padding: 2px 0 2px 16px; border-left: var(--oak-rule) solid var(--oak-straw); color: var(--oak-taupe); }

/* ------------------------------------------------------------ data tables */
.vent-table { width: 100%; border-collapse: collapse; border: var(--oak-rule) solid var(--oak-walnut); }
.vent-table caption { text-align: left; font-family: var(--oak-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oak-taupe); padding-bottom: 6px; }
.vent-table th, .vent-table td { border-bottom: 1px solid var(--oak-straw); border-right: 1px solid var(--oak-straw); padding: 7px 10px; text-align: left; vertical-align: top; }
.vent-table th { background: rgba(186, 170, 124, .34); font-family: var(--oak-mono); font-weight: 400; font-size: .78rem; letter-spacing: .04em; }
.vent-table tr:last-child th, .vent-table tr:last-child td { border-bottom: 0; }
.vent-table td:last-child, .vent-table th:last-child { border-right: 0; }
.vent-table td.num, .vent-table th.num { font-family: var(--oak-mono); white-space: nowrap; }
.vent-table--compact th { width: 42%; }

/* ---------------------------------------------------------------- figures */
.field-pair { display: grid; gap: 12px; }
.field-pair img { display: block; width: 100%; height: auto; border: var(--oak-rule) solid var(--oak-walnut); }
.field-pair figcaption { font-family: var(--oak-mono); font-size: .7rem; letter-spacing: .04em; color: var(--oak-taupe); }
.decay-note { font-size: .84rem; color: var(--oak-taupe); border-left: var(--oak-rule) solid var(--oak-straw); padding-left: 12px; margin-top: 10px; }
.figure-single img { display: block; width: 100%; height: auto; border: var(--oak-rule) solid var(--oak-walnut); }

/* ------------------------------------------------------------- calculator */
.gear-box { border: var(--oak-rule) solid var(--oak-walnut); padding: 14px 16px 16px; margin-top: 20px; }
.gear-box h2 { font-size: 1.06rem; margin-bottom: .35em; }
.gear-box__intro { font-size: .86rem; color: var(--oak-taupe); }
.gear-row { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; }
.gear-row label { font-family: var(--oak-mono); font-size: .74rem; letter-spacing: .06em; min-width: 132px; }
.gear-row input[type="number"], .gear-row select {
  font-family: var(--oak-mono); font-size: .9rem; color: var(--oak-walnut); background: #EFF0E7;
  border: var(--oak-rule) solid var(--oak-walnut); border-radius: 0; padding: 5px 8px; min-width: 104px;
}
.gear-submit {
  font-family: var(--oak-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--oak-walnut); color: var(--oak-linen); border: var(--oak-rule) solid var(--oak-walnut);
  border-radius: 0; padding: 7px 14px; cursor: pointer;
}
.gear-submit:hover { background: var(--oak-olive); border-color: var(--oak-olive); }
.gear-out { border-top: var(--oak-rule) solid var(--oak-walnut); margin-top: 14px; padding-top: 12px; }
.gear-out__row { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--oak-straw); padding: 6px 0; }
.gear-out__row:last-child { border-bottom: 0; }
.gear-out__key { font-size: .84rem; }
.gear-out__val { font-family: var(--oak-mono); font-size: .92rem; }
.gear-out__basis { font-size: .78rem; color: var(--oak-taupe); margin-top: 10px; }

/* --------------------------------------------------------------- breadcrumb */
.crumbs { font-family: var(--oak-mono); font-size: .74rem; letter-spacing: .04em; color: var(--oak-taupe); margin-bottom: 12px; }
.crumbs a { border-bottom-color: var(--oak-straw); }
.crumbs span { padding: 0 6px; }

/* ------------------------------------------------------------------ racks */
.rack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: var(--oak-rule) solid var(--oak-walnut); }
.rack__item { border-right: 1px solid var(--oak-straw); border-bottom: 1px solid var(--oak-straw); padding: 14px 16px; }
.rack__item:nth-child(3n) { border-right: 0; }
.rack__item a { border: 0; }
.rack__item a:hover { background: rgba(186, 170, 124, .26); }
.rack__code { font-family: var(--oak-mono); font-size: .72rem; letter-spacing: .12em; color: var(--oak-taupe); }
.rack__title { font-family: var(--oak-serif); font-size: 1.06rem; display: block; margin: 4px 0 6px; }
.rack__meta { font-family: var(--oak-mono); font-size: .74rem; color: var(--oak-taupe); }
.rack__item--pending { background: rgba(150, 104, 94, .08); }
.rack__item--pending .rack__title { color: var(--oak-taupe); }

/* ------------------------------------------------------------- record hdr */
.record-head { border-bottom: var(--oak-rule) solid var(--oak-walnut); padding-bottom: 16px; margin-bottom: 26px; }
.record-head__intro { font-size: 1.06rem; color: var(--oak-taupe); max-width: 68ch; }
.record-head__stamp { font-family: var(--oak-mono); font-size: .76rem; letter-spacing: .06em; color: var(--oak-taupe); }
/* The desk byline sits on the stamp line, ahead of the publish date. It keeps
   the stamp's own type so the two read as one line, and the rule under the name
   is the same hairline the register uses for every other in-text link. */
.record-head__byline { color: inherit; border-bottom: 1px solid var(--oak-straw); }
.record-head__byline:hover { color: var(--oak-walnut); border-bottom-color: var(--oak-walnut); background: none; }
.record-head__sep { margin: 0 .55em; color: var(--oak-straw); }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; padding: 0; list-style: none; }
.tag-row li { font-family: var(--oak-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--oak-taupe); padding: 3px 8px; }
.tag-row a { border: 0; }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--oak-walnut); color: var(--oak-linen); margin-top: 44px; border-top: var(--oak-rule) solid var(--oak-walnut); }
.foot__grain { background-image: repeating-linear-gradient(90deg, rgba(227, 229, 217, .06) 0 1px, transparent 1px 5px); padding: 30px 0 34px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 30px; }
.foot a { color: var(--oak-linen); border-bottom-color: rgba(227, 229, 217, .4); }
.foot a:hover { color: var(--oak-straw); background: none; }
.foot h2 { font-size: .82rem; font-family: var(--oak-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--oak-straw); margin-bottom: .7em; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .4em; font-size: .9rem; }
.foot__note { font-size: .86rem; color: rgba(227, 229, 217, .84); max-width: 46ch; }
.foot__count { font-family: var(--oak-mono); font-size: .74rem; color: var(--oak-straw); }
.foot__sig { border-top: 1px solid rgba(227, 229, 217, .3); margin-top: 24px; padding-top: 14px; font-family: var(--oak-mono); font-size: .72rem; color: rgba(227, 229, 217, .76); }

/* ----------------------------------------------------------------- legal */
.legal-body { max-width: 74ch; }
.legal-body h2 { border-top: var(--oak-rule) solid var(--oak-walnut); padding-top: 13px; margin-top: 28px; }
.legal-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal-body ul { padding-left: 1.2em; }
.legal-body li { margin-bottom: .4em; }

/* ------------------------------------------------------------------- misc */
.drip-note { border: var(--oak-rule) solid var(--oak-straw); padding: 12px 14px; font-size: .88rem; color: var(--oak-taupe); }
.drip-note strong { color: var(--oak-walnut); }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.two-up--wide { grid-template-columns: 1.2fr 1fr; }
.stack-sm > * + * { margin-top: 16px; }
.mono { font-family: var(--oak-mono); }
.pending { color: var(--oak-taupe); font-style: italic; }

@media (max-width: 900px) {
  .shell { padding: 0 16px; }
  .plan-split, .two-up, .two-up--wide, .foot__grid { grid-template-columns: 1fr; gap: 22px; }
  .plan-left { position: static; }
  .matrix-head, .room-row { grid-template-columns: 132px repeat(4, 1fr); }
  .room-bar { display: flex; overflow-x: auto; }
  .room-bar__seg { min-width: 104px; }
  .level-scale { position: sticky; top: 0; z-index: 20; }
  .rack { grid-template-columns: 1fr; }
  .rack__item { border-right: 0; }
}