/* ==========================================================================
   BLUEPRINT — cyanotype engineering drawing portfolio
   Ground: deep blueprint blue. Linework: 1px white/ice. Mono annotations.
   ========================================================================== */

:root {
    --bg-base: #0D3B66;
    --bg-deep: #0A2F52;
    --bg-panel: #0C3459;
    --panel-glass: rgba(9, 42, 74, 0.35);
    --ink: #EAF3FB;
    --ink-body: #D9E8F5;
    --ink-dim: #A9C7E0;
    --line: rgba(234, 243, 251, 0.82);
    --line-mid: rgba(234, 243, 251, 0.38);
    --line-soft: rgba(234, 243, 251, 0.18);
    --line-faint: rgba(234, 243, 251, 0.10);
    --grid-minor: rgba(234, 243, 251, 0.045);
    --grid-major: rgba(234, 243, 251, 0.09);
    --accent: #9FDBFF;
    --font-head: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-padding-top: 96px;
    scrollbar-color: rgba(234, 243, 251, 0.35) #0A2F52;
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    font-family: var(--font-head);
    font-weight: 400;
    color: var(--ink-body);
    background-color: var(--bg-base);
    background-image: radial-gradient(ellipse 120% 90% at 50% -10%, #114571 0%, var(--bg-base) 52%, var(--bg-deep) 100%);
    background-attachment: fixed;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Drafting grid: 10px minor / 100px major */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(var(--grid-major) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
        linear-gradient(var(--grid-minor) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 10px 10px, 10px 10px;
}

main, footer, nav { position: relative; z-index: 1; }

img { max-width: 100%; }

a { color: var(--ink); text-decoration: none; }

:focus-visible {
    outline: 2px dashed var(--accent);
    outline-offset: 3px;
}

::selection { background: var(--ink); color: var(--bg-base); }

/* Skip-to-content: hidden until keyboard focus, in drafting voice */
.skip-link {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%) translateY(-64px);
    z-index: 120;
    background: var(--bg-deep);
    color: var(--ink);
    border: 1px solid var(--line);
    padding: 12px 22px;
    font-size: 11px;
}

.skip-link:focus-visible {
    transform: translateX(-50%) translateY(0);
    outline-offset: 5px;
}

main:focus { outline: none; }

.mono {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* ==========================================================================
   Sheet border + registration marks
   ========================================================================== */

.sheet-border {
    position: fixed;
    inset: 12px;
    border: 1px solid rgba(234, 243, 251, 0.28);
    pointer-events: none;
    z-index: 90;
}

.sheet-border::after {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px dashed rgba(234, 243, 251, 0.12);
}

.reg-mark {
    position: fixed;
    width: 18px;
    height: 18px;
    stroke: rgba(234, 243, 251, 0.5);
    stroke-width: 1;
    fill: none;
    pointer-events: none;
    z-index: 95;
}

.reg-tl { top: 4px;  left: 4px; }
.reg-tr { top: 4px;  right: 4px; }
.reg-bl { bottom: 4px; left: 4px; }
.reg-br { bottom: 4px; right: 4px; }

/* ==========================================================================
   Navigation
   ========================================================================== */

.navbar {
    position: fixed;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 80;
    background: rgba(11, 50, 87, 0.90);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line-mid);
}

.nav-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 40px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--ink);
    flex: none;
}

.brand-name {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.03em;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-dwg {
    font-size: 10px;
    color: var(--ink-dim);
    border-left: 1px solid var(--line-soft);
    padding-left: 14px;
    white-space: nowrap;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
}

.nav-link {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    color: var(--ink-dim);
    border-bottom: 1px dashed transparent;
    padding-bottom: 3px;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.nav-link .nav-idx { opacity: 0.5; margin-right: 5px; }

.nav-link:hover { color: var(--ink); border-color: var(--line-mid); }

.nav-link:active { color: var(--accent); border-bottom-style: solid; }

.brand:hover .brand-mark { background: rgba(234, 243, 251, 0.1); }

.brand:active .brand-mark { background: var(--ink); color: var(--bg-base); }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--line-mid);
    cursor: pointer;
    padding: 9px;
}

.nav-toggle span {
    display: block;
    height: 1px;
    width: 100%;
    background: var(--ink);
}

.nav-toggle:hover { border-color: var(--line); background: rgba(234, 243, 251, 0.08); }

.nav-toggle:active { background: rgba(234, 243, 251, 0.16); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 40px;
}

.section {
    padding: 96px 0;
    scroll-margin-top: 90px;
    /* Below-the-fold sections skip layout/paint until near the viewport.
       `auto` keeps the last rendered size, avoiding scroll-anchor jumps. */
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

.fig-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 52px;
}

.fig-no {
    font-size: 11px;
    color: var(--ink-dim);
    border: 1px solid var(--line-mid);
    padding: 7px 12px;
    white-space: nowrap;
    flex: none;
}

.fig-title {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(1.4rem, 3vw, 2rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink);
    line-height: 1.15;
    text-wrap: balance;
}

.fig-rule {
    flex: 1;
    min-width: 40px;
    height: 8px;
    display: block;
}

.fig-rule line {
    stroke: var(--line-mid);
    stroke-width: 1;
}

/* ==========================================================================
   Hero — FIG. 00
   ========================================================================== */

.hero {
    padding: 182px 0 100px;
    position: relative;
}

.hero .container { position: relative; }

/* Vertical construction line */
.hero .container::before {
    content: '';
    position: absolute;
    top: -40px;
    bottom: -60px;
    left: 8px;
    width: 1px;
    background: repeating-linear-gradient(180deg, var(--line-soft) 0 6px, transparent 6px 12px);
    pointer-events: none;
}

.hero-dwg {
    font-size: 11px;
    color: var(--ink-dim);
    letter-spacing: 0.22em;
    margin-bottom: 40px;
}

.dim-wrap {
    width: fit-content;
    max-width: 100%;
}

.dim-bar {
    display: flex;
    align-items: center;
    height: 20px;
}

.dim-tick {
    width: 1px;
    height: 15px;
    background: var(--line);
    flex: none;
}

.dim-line {
    flex: 1;
    min-width: 24px;
    height: 1px;
    background: var(--line);
    position: relative;
}

.dim-arrow-l::before,
.dim-arrow-r::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

.dim-arrow-l::before {
    left: 0;
    border-right: 7px solid var(--line);
}

.dim-arrow-r::before {
    right: 0;
    border-left: 7px solid var(--line);
}

.dim-label {
    font-size: 10.5px;
    color: var(--ink-dim);
    letter-spacing: 0.22em;
    padding: 0 16px;
    white-space: nowrap;
}

.hero-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(3rem, 9.5vw, 7.2rem);
    line-height: 1.0;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 12px 0;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
}

.hero-title {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
    color: var(--ink-dim);
    margin-top: 22px;
    letter-spacing: 0.01em;
}

.hero-title::before {
    content: '— ';
    color: var(--line-mid);
}

.note-box {
    margin-top: 38px;
    max-width: 660px;
    border: 1px dashed var(--line-mid);
    background: var(--panel-glass);
    padding: 20px 24px 22px;
}

.note-tab {
    display: inline-block;
    font-size: 10.5px;
    color: var(--ink-dim);
    letter-spacing: 0.24em;
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 6px;
    margin-bottom: 12px;
}

.note-box p {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--ink-body);
    text-wrap: pretty;
}

.hero-meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    margin-top: 32px;
}

.hero-meta li {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    color: var(--ink);
}

.hero-meta .meta-label {
    color: var(--ink-dim);
    opacity: 0.85;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-right: 9px;
}

.hero-meta .meta-label::after { content: ' ▸'; opacity: 0.5; }

.hero-meta a {
    border-bottom: 1px dashed transparent;
    overflow-wrap: anywhere;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.hero-meta a:hover { color: var(--accent); border-color: var(--line-mid); }

.hero-meta a:active { border-bottom-style: solid; border-color: var(--accent); }

.hero-meta span.meta-value { overflow-wrap: anywhere; }

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 42px;
}

.btn {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11.5px;
    padding: 14px 28px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: transparent;
    position: relative;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary { background: rgba(234, 243, 251, 0.08); }

.btn-primary:hover {
    background: var(--ink);
    color: var(--bg-base);
}

.btn-secondary { border-color: var(--line-mid); color: var(--ink-dim); }

.btn-secondary:hover { border-color: var(--line); color: var(--ink); }

.btn:active { background: var(--accent); border-color: var(--accent); color: var(--bg-deep); }

/* corner ticks on primary buttons */
.btn-primary::before,
.btn-primary::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    pointer-events: none;
}

.btn-primary::before {
    top: -4px;
    left: -4px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.btn-primary::after {
    bottom: -4px;
    right: -4px;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.hero-readouts {
    margin-top: 64px;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--line-soft);
    border-left: 1px solid var(--line-soft);
    background: var(--panel-glass);
}

.readout {
    flex: 1 1 150px;
    padding: 20px 22px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    min-width: 0;
}

.readout-value {
    display: block;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.9rem;
    letter-spacing: 0.04em;
    color: var(--ink);
    line-height: 1.1;
}

.readout-label {
    display: block;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--ink-dim);
    margin-top: 8px;
}

/* ==========================================================================
   About — General Notes
   ========================================================================== */

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    gap: 64px;
    align-items: start;
}

.about-notes {
    list-style: none;
    counter-reset: note;
}

.about-notes li {
    counter-increment: note;
    position: relative;
    padding-left: 52px;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 22px;
    text-wrap: pretty;
}

.about-notes li::before {
    content: counter(note, decimal-leading-zero) '.';
    position: absolute;
    left: 0;
    top: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--ink-dim);
}

.about-specs {
    border: 1px solid var(--line-soft);
    background: var(--panel-glass);
    padding: 6px 22px;
}

.about-specs .spec-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line-soft);
}

.about-specs .spec-row:last-child { border-bottom: none; }

.about-specs dt {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    color: var(--ink-dim);
    flex: none;
}

.about-specs dd {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--ink);
    text-align: right;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Experience — FIG. 01 Service Record
   ========================================================================== */

.datum-strip {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 56px;
    overflow: visible;
}

.datum-line {
    stroke: var(--line);
    stroke-width: 1;
}

.datum-ext {
    stroke: var(--line-mid);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.datum-tick {
    stroke: var(--line);
    stroke-width: 1;
}

.datum-node {
    fill: var(--bg-base);
    stroke: var(--line);
    stroke-width: 1;
}

.datum-sta {
    fill: var(--ink-dim);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.datum-co {
    fill: var(--ink);
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.datum-span {
    fill: var(--ink-dim);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
}

.role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 34px;
}

.role {
    position: relative;
    border: 1px solid var(--line-soft);
    border-top-color: var(--line-mid);
    background: var(--panel-glass);
    padding: 30px 28px 26px;
}

/* node tick on each role card */
.role::after {
    content: '';
    position: absolute;
    top: -4px;
    left: calc(50% - 4px);
    width: 7px;
    height: 7px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--bg-base);
}

@media (min-width: 720px) {
    .role::before {
        content: '';
        position: absolute;
        top: -56px;
        left: 50%;
        width: 1px;
        height: 52px;
        background: repeating-linear-gradient(180deg, var(--line-soft) 0 5px, transparent 5px 10px);
    }
}

.role-head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--ink-dim);
    margin-bottom: 16px;
}

.role-position {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: 6px;
    text-wrap: balance;
}

.role-org {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--ink-dim);
    margin-bottom: 16px;
}

.role-summary {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 16px;
    text-wrap: pretty;
}

.role-details {
    list-style: none;
    margin-bottom: 8px;
}

.role-details li {
    position: relative;
    padding-left: 22px;
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 10px;
}

.role-details li::before {
    content: '▸';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ink-dim);
    font-size: 0.8rem;
}

.role-tech {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--ink-dim);
    border-top: 1px dashed var(--line-soft);
    padding-top: 15px;
    margin-top: 8px;
    line-height: 1.9;
}

/* ==========================================================================
   Projects — FIG. 02 Schematics
   ========================================================================== */

.schematic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
    padding: 8px;
}

.schematic {
    position: relative;
    border: 1px solid var(--line-soft);
    background: var(--panel-glass);
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.schematic:hover { border-color: var(--line-mid); }

.schematic:active { border-color: var(--line); }

/* Hover lift uses `translate` (not transform) so it composes with the
   scroll-driven reveal animation, which owns `transform` while filling. */
@media (prefers-reduced-motion: no-preference) {
    .schematic { transition: border-color 0.25s ease, translate 0.25s ease; }
    .schematic:hover { translate: 0 -3px; }
    .schematic:active { translate: 0 -1px; }
    .crop { transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease; }
}

.crop {
    position: absolute;
    width: 14px;
    height: 14px;
    opacity: 0.75;
    pointer-events: none;
}

/* crop marks extend and sharpen when the schematic is examined */
.schematic:hover .crop { width: 20px; height: 20px; opacity: 1; }

.crop-tl { top: -7px; left: -7px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.crop-tr { top: -7px; right: -7px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.crop-bl { bottom: -7px; left: -7px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.crop-br { bottom: -7px; right: -7px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }

.schematic-head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--ink-dim);
}

.schematic-name {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--ink);
    margin: 16px 0 10px;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.schematic-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    flex: 1;
    text-wrap: pretty;
}

.schematic-spec {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--ink-dim);
    margin-top: 16px;
    line-height: 1.9;
}

.schematic-links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--line-soft);
}

.schematic-links a {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink);
    border-bottom: 1px dashed transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.schematic-links a:hover { color: var(--accent); border-color: var(--line-mid); }

.schematic-links a:active { border-bottom-style: solid; border-color: var(--accent); }

/* ==========================================================================
   Tables — FIG. 03 Parts Schedule / FIG. 04 Revision History
   ========================================================================== */

.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--line-mid);
    background: var(--panel-glass);
}

.bp-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.bp-table th {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-align: left;
    color: var(--ink-dim);
    padding: 13px 18px;
    border-bottom: 1px solid var(--line-mid);
    background: rgba(9, 42, 74, 0.55);
    white-space: nowrap;
}

.bp-table td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--line-soft);
    border-right: 1px dashed var(--line-faint);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--ink-body);
    vertical-align: top;
}

.bp-table td:last-child { border-right: none; }

.bp-table tbody tr:last-child td { border-bottom: none; }

.bp-table tbody tr:hover td { background: rgba(234, 243, 251, 0.04); }

.bp-table .cell-mono {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-dim);
    white-space: nowrap;
}

.bp-table .cell-strong { color: var(--ink); font-weight: 500; }

.bp-table .th-num, .bp-table .td-num { text-align: right; }

.table-note {
    font-size: 10.5px;
    color: var(--ink-dim);
    letter-spacing: 0.18em;
    margin-top: 16px;
}

.table-note::before { content: '— '; opacity: 0.6; }

/* ==========================================================================
   Contact — FIG. 05
   ========================================================================== */

.contact-sub {
    max-width: 580px;
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 40px;
    text-wrap: pretty;
}

/* The email sits on its own datum edge — extension ticks top and bottom,
   like a dimensioned feature pulled off the drawing. */
.email-row {
    position: relative;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 26px;
    border-left: 1px solid var(--line);
    padding: 8px 0 10px 26px;
}

.email-row::before,
.email-row::after {
    content: '';
    position: absolute;
    left: -6px;
    width: 13px;
    height: 1px;
    background: var(--line);
}

.email-row::before { top: 0; }
.email-row::after { bottom: 0; }

.email-hint {
    font-size: 9.5px;
    letter-spacing: 0.24em;
    color: var(--ink-dim);
}

.contact-email {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(1.5rem, 4.5vw, 2.9rem);
    letter-spacing: -0.01em;
    color: var(--ink);
    border-bottom: 1px dashed var(--line-mid);
    padding-bottom: 8px;
    max-width: 100%;
    overflow-wrap: anywhere;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.contact-email:hover { color: var(--accent); border-bottom-style: solid; border-color: var(--accent); }

.contact-email:active { color: var(--ink); border-color: var(--ink); }

.contact-grid {
    margin-top: 44px;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--line-soft);
    border-left: 1px solid var(--line-soft);
    background: var(--panel-glass);
}

.contact-cell {
    flex: 1 1 200px;
    padding: 18px 22px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    min-width: 0;
}

.contact-cell .cell-label {
    display: block;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--ink-dim);
}

.contact-cell .cell-value {
    display: block;
    font-size: 0.98rem;
    color: var(--ink);
    margin-top: 8px;
    overflow-wrap: anywhere;
}

.contact-channels {
    list-style: none;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.contact-channels a {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    color: var(--ink);
    border-bottom: 1px dashed transparent;
    overflow-wrap: anywhere;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.contact-channels a:hover { color: var(--accent); border-color: var(--line-mid); }

.contact-channels a:active { border-bottom-style: solid; border-color: var(--accent); }

.contact-channels .ch-label {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-dim);
    margin-right: 10px;
}

/* ==========================================================================
   Footer — title block
   ========================================================================== */

.footer {
    border-top: 1px solid var(--line-mid);
    padding: 72px 0 96px;
    margin-top: 48px;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 48px;
}

.footer-colophon p {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-dim);
    line-height: 2.2;
}

.title-block {
    width: min(560px, 100%);
    margin-left: auto;
    border: 1.5px solid var(--line);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line-soft);
}

.tb-cell {
    background: var(--bg-panel);
    padding: 11px 14px;
    min-width: 0;
}

.tb-wide { grid-column: 1 / -1; }

.tb-label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.24em;
    color: var(--ink-dim);
    margin-bottom: 5px;
}

.tb-value {
    display: block;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--ink);
    overflow-wrap: anywhere;
    text-transform: none;
}

.tb-value a { border-bottom: 1px dashed transparent; }

.tb-value a:hover { color: var(--accent); border-color: var(--line-mid); }

.tb-value a:active { border-bottom-style: solid; }

/* ==========================================================================
   Motion — gated behind html.motion-ok (set by JS only when the user has
   no reduced-motion preference). Without it, everything is fully visible.
   ========================================================================== */

html.motion-ok .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

html.motion-ok .reveal.revealed {
    opacity: 1;
    transform: none;
}

html.motion-ok .draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.5s ease 0.15s;
}

html.motion-ok .revealed .draw,
html.motion-ok .draw.revealed {
    stroke-dashoffset: 0;
}

/* Scroll-driven reveals: when view() timelines exist, simple fades run as
   pure CSS (main.js skips the IntersectionObserver path for .reveal).
   Line-draw stays on the JS path everywhere — it is the signature move. */
@supports (animation-timeline: view()) {
    @keyframes bp-reveal {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: none; }
    }

    html.motion-ok .reveal {
        opacity: 1;
        transform: none;
        transition: none;
        animation: bp-reveal linear both;
        animation-timeline: view();
        animation-range: entry 5% entry 45%;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .container, .nav-inner { padding-left: 32px; padding-right: 32px; }
    .about-grid { grid-template-columns: 1fr; gap: 44px; }
    .about-specs { max-width: 560px; }
}

@media (max-width: 860px) {
    .nav-toggle { display: flex; }
    .brand-dwg { display: none; }

    .nav-menu {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: rgba(10, 47, 82, 0.98);
        border-bottom: 1px solid var(--line-mid);
        padding: 8px 32px 18px;
        display: none;
    }

    .navbar.open .nav-menu { display: flex; }

    .nav-menu li { width: 100%; }

    .nav-link {
        display: block;
        padding: 13px 0;
        border-bottom: 1px dashed var(--line-faint);
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .section { padding: 72px 0; }
    .hero { padding: 150px 0 80px; }
    .fig-head { flex-wrap: wrap; gap: 12px 14px; margin-bottom: 40px; }
    .fig-rule { flex-basis: 100%; }
    .hero .container::before { display: none; }
    .role-grid, .schematic-grid { gap: 28px; }
    .schematic-grid { padding: 8px 0; }
    .crop-tl, .crop-bl { left: -4px; }
    .crop-tr, .crop-br { right: -4px; }
    .footer-inner { flex-direction: column; align-items: stretch; }
    .title-block { margin-left: 0; }
}

@media (max-width: 719px) {
    .datum-strip { display: none; }
}

/* Parts schedule / revision history collapse from tables into stacked
   record cards on narrow screens — no horizontal scrolling at 390px.
   Screen-only: paper is wide enough for the real table. */
@media screen and (max-width: 640px) {
    .table-scroll {
        overflow-x: visible;
        border: none;
        background: none;
    }

    .bp-table,
    .bp-table tbody,
    .bp-table tr,
    .bp-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .bp-table thead { display: none; }

    .bp-table tr {
        border: 1px solid var(--line-soft);
        border-top-color: var(--line-mid);
        background: var(--panel-glass);
        margin-bottom: 16px;
        padding: 4px 0;
    }

    .bp-table tr:last-child { margin-bottom: 0; }

    .bp-table td {
        border-right: none;
        border-bottom: 1px dashed var(--line-faint);
        padding: 11px 16px;
    }

    /* every cell keeps its dashed rule (the base sheet blanks the last row),
       then each card's final cell drops its own */
    .bp-table tbody tr:last-child td { border-bottom: 1px dashed var(--line-faint); }

    .bp-table tbody tr td:last-child { border-bottom: none; }

    .bp-table td::before {
        content: attr(data-label);
        display: block;
        font-family: var(--font-mono);
        font-size: 9.5px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--ink-dim);
        margin-bottom: 5px;
    }

    .bp-table .td-num { text-align: left; }

    .bp-table tbody tr:hover td { background: none; }
}

/* ==========================================================================
   Accessibility hardening
   ========================================================================== */

/* High Contrast / forced colors: keep the linework legible. Decorative
   grid and rgba lines vanish with backgrounds, so redraw the essentials. */
@media (forced-colors: active) {
    .sheet-border, .reg-mark, .crop, .hero .container::before { display: none; }

    .dim-line, .dim-tick, .email-row::before, .email-row::after, .nav-toggle span {
        background: CanvasText;
    }

    .dim-arrow-l::before { border-right-color: CanvasText; }
    .dim-arrow-r::before { border-left-color: CanvasText; }

    .note-box, .role, .schematic, .readout, .contact-cell, .about-specs,
    .table-scroll, .title-block, .tb-cell, .fig-no, .brand-mark, .btn {
        border-color: CanvasText;
    }

    .datum-line, .datum-tick, .datum-node { stroke: CanvasText; }
    .datum-sta, .datum-co, .datum-span { fill: CanvasText; }
    .fig-rule line { stroke: CanvasText; }
}

/* Users asking for more contrast get the muted tokens stepped up. */
@media (prefers-contrast: more) {
    :root {
        --ink-dim: #CBDFF1;
        --ink-body: #E7F1FA;
        --line-soft: rgba(234, 243, 251, 0.34);
        --line-faint: rgba(234, 243, 251, 0.22);
    }
}

@media (max-width: 480px) {
    .container, .nav-inner { padding-left: 20px; padding-right: 20px; }
    .sheet-border { inset: 6px; }
    .sheet-border::after { display: none; }
    .reg-mark { width: 12px; height: 12px; }
    .navbar { top: 6px; left: 6px; right: 6px; }
    .nav-menu { top: 52px; padding: 6px 20px 14px; }
    .nav-inner { height: 52px; }
    .brand-mark { width: 28px; height: 28px; }
    .hero { padding: 128px 0 64px; }
    .hero-dwg { margin-bottom: 28px; }
    .dim-label { font-size: 9px; letter-spacing: 0.14em; padding: 0 10px; }
    .hero-name { font-size: clamp(2.4rem, 12vw, 3.4rem); }
    .readout { flex-basis: 130px; padding: 16px 18px; }
    .readout-value { font-size: 1.6rem; }
    .btn { width: 100%; text-align: center; }
    .about-notes li { padding-left: 40px; }
}

/* ==========================================================================
   Portfolio additions — portrait (FIG. 00-A), role logos, project figures
   ========================================================================== */

/* Three-word full name: a smaller cap keeps "Vishnu Krishnakumar" on one line */
.hero-name {
    font-size: clamp(3rem, 6vw, 5.2rem);
}

.hero-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 64px;
    align-items: start;
}

.hero-photo {
    margin-top: 30px;
}

.photo-frame {
    position: relative;
    border: 1px solid var(--line-mid);
    padding: 10px;
    background: var(--panel-glass);
}

.photo-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid var(--line-soft);
}

.photo-frame .crop { opacity: 1; }

.hero-photo .dim-bar { margin-top: 14px; }

.hero-photo figcaption {
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-top: 10px;
    text-align: center;
}

.role-id {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* A stamped part label: the company mark on a light tile */
.role-logo {
    flex: none;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    border: 1px solid var(--line);
    outline: 1px dashed var(--line-mid);
    outline-offset: 3px;
    margin: 3px 4px 0 3px;
}

.role-logo img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    display: block;
}

.schematic-fig {
    margin: 18px 0 0;
    border: 1px solid var(--line-soft);
    background: var(--bg-deep);
}

.schematic-fig img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Earlier title at the same company: a dashed sub-record inside the role card */
.role-earlier {
    border-top: 1px dashed var(--line-soft);
    padding-top: 16px;
    margin-top: 6px;
}

.role-sub {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--ink-dim);
    margin-bottom: 12px;
}

.role-sub span:first-child { color: var(--ink); }

/* With highlights, the list (not the description) absorbs the card's spare height */
.schematic-desc:has(+ .schematic-points) { flex: none; }

.schematic-points {
    margin-top: 14px;
    flex: 1;
}

.schematic-points li { font-size: 0.88rem; }

/* Footer box holds only name / role / location / email: two columns, so
   the wide name and email rows never break mid-word */
.title-block { grid-template-columns: repeat(2, 1fr); }

/* The full name needs the drawing-number slot back before the menu collapses */
@media (max-width: 1180px) and (min-width: 861px) {
    .brand-dwg { display: none; }
}

@media (max-width: 900px) {
    .hero-body { grid-template-columns: 1fr; gap: 12px; }
    .hero-photo { max-width: 320px; }
}

@media (forced-colors: active) {
    .photo-frame, .role-logo, .schematic-fig { border-color: CanvasText; }
}