/* Hallmark · shape: Drawing sheet (one rail, three bands, a title block) · genre: modern-minimal · theme: custom · job: hire · idea: "An engineering drawing of the lab itself: pencil on vellum by day, blueprint by night, one routed trace joining part, code and place." · vibe: "exact, quiet, drafted, engineer-run, two-sided"
 * paper: oklch(96.5% 0.004 250) / oklch(25% 0.065 258) · accent: oklch(43% 0.13 255) / oklch(90% 0.05 220) · display: IBM Plex Sans KR 600 · body: IBM Plex Sans KR 400 · hero: routed trace field behind a left-set headline, the sheet's title block at bottom right · nav: edge-aligned, wordmark, four links, two controls · footer: a mast, the wordmark, the role, the links · imagery: none, a generative trace field drawn from the lab's own material · signature: the title block, a drawing's own identity card, filled with the lab's facts
 * axes: light/grotesk-sans/chromatic-blue · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R4 V4 · weakest: E, the three axes read as one list; the band rail and the facing English line give each its own line and width */
/* Hallmark · answered 64: IBM Plex Mono is used only in the title block and the status cells; the drawing's title block is the mono material */
/* Hallmark · waive 77 · the brief sets contact as one mailto and no form · the address is set at display size as the section's statement */
/* Hallmark · waive 44a · custom run, direction.md leaves 44a free · the headline sits on columns 1 to 8 and the title block at the sheet's corner */
@import url("./tokens.css");
@import url("./base.css");

/* Layout */
.container { max-width: var(--container); }
.skip { position: absolute; left: var(--gutter); top: -100px; padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-paper); z-index: var(--z-toast); border-radius: var(--radius-card); }
.skip:focus-visible { top: var(--space-xs); }

body { font-weight: 400; word-break: keep-all; }
h1, h2, h3 { font-weight: 600; color: var(--color-ink); letter-spacing: var(--tracking-display); }

/* Header */
.top { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 88%, transparent); backdrop-filter: blur(8px); border-bottom: var(--rule-hair) solid var(--color-rule); }
.top-row { display: flex; align-items: center; gap: var(--space-lg); min-height: 60px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.mark { color: var(--color-accent); }
.top-nav { display: flex; gap: var(--space-lg); margin-left: auto; }
.top-nav a, .foot-nav a { text-decoration: none; color: var(--color-ink-2); font-size: var(--text-sm); padding: var(--space-xs) 0; border-bottom: 2px solid transparent; transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.top-nav a:hover, .foot-nav a:hover { color: var(--color-ink); border-color: var(--color-rule); }
.top-nav a:active, .foot-nav a:active { color: var(--color-accent); }
.controls { display: flex; gap: var(--space-xs); }
.ctl { text-decoration: none; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: transparent; color: var(--color-ink); cursor: pointer; font-size: var(--text-sm); font-weight: 600; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.ctl:hover { background: var(--color-paper-2); border-color: var(--color-muted); }
.ctl:active { background: var(--color-paper-3); }
.ctl[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }

/* Hero */
.hero { position: relative; min-height: calc(100svh - 60px); display: grid; align-items: end; padding-block: var(--space-2xl) var(--space-xl); isolation: isolate; }
.field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.hero-copy { grid-column: 1 / 9; }
.hero h1 { font-size: var(--text-display); line-height: 1.08; max-width: 18ch; }
.lead { margin-top: var(--space-lg); font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); max-width: 42ch; font-weight: 300; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-card); text-decoration: none; font-weight: 600; font-size: var(--text-md); border: var(--rule-hair) solid transparent; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"], .btn:disabled, .ctl:disabled, .pause:disabled { background: var(--color-paper-2); color: var(--color-muted); border-color: var(--color-rule); cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in oklab, var(--color-accent) 86%, var(--color-ink)); }
.btn-quiet { background: color-mix(in oklab, var(--color-paper) 70%, transparent); color: var(--color-ink); border-color: var(--color-rule); }
.btn-quiet:hover { border-color: var(--color-ink-2); background: var(--color-paper); }

/* The title block: a drawing's identity card. Mono is its material. */
.titleblock { grid-column: 9 / 13; justify-self: end; align-self: end; border-collapse: collapse; font-family: var(--font-outlier); font-size: var(--text-xs); min-width: 240px; background: color-mix(in oklab, var(--color-paper) 82%, transparent); border: var(--rule-hair) solid var(--color-ink-2); }
.titleblock th, .titleblock td { padding: var(--space-xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-ink-2); text-align: left; vertical-align: top; }
.titleblock tr:last-child th, .titleblock tr:last-child td { border-bottom: 0; }
.titleblock th { font-weight: 400; color: var(--color-muted); border-right: var(--rule-hair) solid var(--color-ink-2); width: 5.5em; }
.titleblock td { color: var(--color-ink); white-space: nowrap; }

.pause { position: absolute; right: var(--gutter); top: var(--space-md); z-index: 2; min-height: 36px; padding: 0 var(--space-sm); font-size: var(--text-xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-paper) 82%, transparent); color: var(--color-ink-2); cursor: pointer; }
.pause:hover { color: var(--color-ink); border-color: var(--color-muted); }

/* Sections share one rhythm. */
.build, .principles, .contact { padding-block: var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.section-head { font-size: var(--text-section); line-height: 1.15; max-width: 22ch; }

/* What we build: three bands on one rail. */
.section-lead { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); font-weight: 300; max-width: 40ch; }
.axes { list-style: none; margin: var(--space-xl) 0 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.axis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); padding-block: var(--space-2xl); min-height: 300px; align-content: start; border-bottom: var(--rule-hair) solid var(--color-rule); position: relative; }
.axis::before { content: ""; position: absolute; left: 0; top: calc(var(--space-2xl) + 0.55em); width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--color-accent); background: var(--color-paper); }
/* English runs longer than Korean: taller bands keep a screen to two of them (Floor 13). */
:lang(en) .axis { min-height: 460px; }
.axis h3 { grid-column: 1 / 6; grid-row: 1; font-size: var(--text-xl); line-height: 1.2; padding-left: var(--space-lg); }
.axis-en { grid-column: 1 / 6; grid-row: 2; padding-left: var(--space-lg); color: var(--color-muted); font-size: var(--text-md); font-weight: 300; }
.axis-body { grid-column: 6 / 10; grid-row: 1 / 3; font-size: var(--text-xl); line-height: 1.5; color: var(--color-ink-2); font-weight: 300; }
.nouns { grid-column: 10 / 13; grid-row: 1 / 3; list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.nouns li { padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md); border-left: var(--rule-hair) solid var(--color-rule); }
.nouns a { color: var(--color-accent); }

/* Principles: five short sentences, set large. */
.principles .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.principles .section-head { grid-column: 1 / 5; }
.rules { grid-column: 5 / 13; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rules li { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display); font-size: var(--text-display-s); line-height: 1.15; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); }
.rules li:first-child { border-top: 0; }
.rules li:nth-child(even) { color: var(--color-ink-2); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.contact-grid .section-head { grid-column: 1 / 7; }
.contact-body { grid-column: 7 / 13; display: grid; gap: var(--space-lg); justify-items: start; }
.contact-body p { font-size: var(--text-lg); color: var(--color-ink-2); font-weight: 300; }
.mail { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display); font-size: clamp(1.5rem, 3.2vw, 3.75rem); white-space: nowrap; line-height: 1.1; color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.12em; overflow-wrap: anywhere; transition: color var(--dur-micro) var(--ease-out); }
.mail:hover { color: var(--color-accent); }

/* Footer */
.foot { border-top: var(--rule-hair) solid var(--color-ink-2); padding-block: var(--space-2xl); }
.foot-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); align-items: start; }
.foot-mark { grid-column: 1 / 7; font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display); font-size: var(--text-3xl); line-height: 1; }
.foot-role { grid-column: 7 / 10; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }
.foot-nav { grid-column: 10 / 13; display: grid; gap: var(--space-2xs); justify-items: start; }

/* Responsive */
@media (max-width: 60rem) {
  .top-nav { display: none; }
  .axis { min-height: 0; padding-block: var(--space-xl); }
  .axis-body { font-size: var(--text-lg); }
  .hero-copy { grid-column: 1 / -1; }
  .titleblock { grid-column: 1 / -1; justify-self: start; margin-top: var(--space-lg); }
  .axis h3, .axis-en { grid-column: 1 / 7; }
  .axis-body { grid-column: 7 / 13; grid-row: 1 / 3; }
  .nouns { grid-column: 1 / 13; grid-row: 3; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); padding-left: var(--space-lg); }
  .nouns li { border-left: 0; padding: 0; }
  .nouns li + li::before { content: "/"; color: var(--color-rule); margin-right: var(--space-md); }
  .principles .section-head, .rules { grid-column: 1 / -1; }
  .contact-grid .section-head, .contact-body { grid-column: 1 / -1; }
  .foot-mark { grid-column: 1 / -1; }
  .foot-role { grid-column: 1 / 7; }
  .foot-nav { grid-column: 7 / 13; }
}
@media (max-width: 40rem) {
  .hero { min-height: auto; padding-block: var(--space-2xl) var(--space-xl); }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.75rem); }
  .lead { font-size: var(--text-lg); }
  .actions .btn { flex: 1 1 auto; }
  .titleblock { min-width: 0; width: 100%; }
  .mail { font-size: clamp(1.25rem, 7.2vw, 2.25rem); white-space: nowrap; }
  .axis h3, .axis-en, .axis-body { grid-column: 1 / -1; }
  .axis::before { top: calc(var(--space-xl) + 0.55em); }
  .axis h3 { grid-row: 1; } .axis-en { grid-row: 2; } .axis-body { grid-row: 3; padding-left: var(--space-lg); font-size: var(--text-md); }
  .nouns { grid-row: 4; }
  }

/* Motion: the field is drawn by script; without it the hero is type on paper, which is the drawing anyway. */
@media (prefers-reduced-motion: reduce) { .pause { display: none; } }