@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* One shared palette for every page, solver, generated diagram and calculator. */
:root {
  color-scheme: dark;
  --mid-bg: #0b101b;
  --mid-panel: #141e2c;
  --mid-raised: #1a2739;
  --mid-input: #0e1623;
  --mid-ink: #e9eef7;
  --mid-muted: #a4b3c9;
  --mid-accent: #a5bfff;
  --mid-line: #2c3b51;
  --mid-load: #d8b875;
  --mid-support: #a5bfff;
  --mid-deflection: #91c8b5;
  --mid-error: #ffd0b8;
  --navy: var(--mid-bg);
  --navy2: var(--mid-panel);
  --gold: var(--mid-accent);
  --ink: var(--mid-ink);
  --muted: var(--mid-muted);
  --line: var(--mid-line);
  --paper: #101927;
}
body { background: var(--mid-bg); color: var(--mid-ink); }
h1,h2,h3 { font-family: 'Space Grotesk', 'DM Sans', sans-serif; font-weight: 500; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline: 2px solid var(--mid-accent); outline-offset: 4px;
}
.site-header,.beam-page .site-header,.concrete-page .site-header {
  position: relative; background: var(--mid-bg); color: var(--mid-ink);
  border-bottom: 1px solid var(--mid-line);
}
.header-inner { gap: 24px; }
.wordmark { font: 500 22px 'Space Grotesk',sans-serif; letter-spacing: -.045em; white-space: nowrap; }
.wordmark span { color: var(--mid-ink); }
nav { gap: clamp(18px,2.5vw,36px); }
nav a { color: var(--mid-muted); font-size: 14px; }
nav a:hover,nav a[aria-current],.tools-page nav a[aria-current],.beam-page nav a[aria-current] { color: var(--mid-accent); }
.nav-login { border: 1px solid var(--mid-line); color: var(--mid-ink); background: var(--mid-panel); border-radius: 4px; }
.nav-login:hover { border-color: var(--mid-accent); }
.button { border-radius: 4px; font-size: 14px; font-weight: 500; }
.button-primary { background: var(--mid-accent); color: #101b31; border: 1px solid var(--mid-accent); }
.button-primary:hover { background: #bed0ff; border-color: #bed0ff; }
.text-link { color: var(--mid-ink); }
.eyebrow,.hero-bottom,.hero-intro,.tools-lead,.tools-note,.tool-choice-lead,.tool-choice-description,.tool-choice-back {
  color: var(--mid-muted);
}
.eyebrow,.section-label,.tool-choice-number,.card-field {
  font-size: 12px; font-weight: 500; letter-spacing: .13em;
}
.section-label,.card-field,.contact .section-label { color: var(--mid-accent); }
.hero { display: grid; grid-template-columns: 150px minmax(0,1fr); min-height: 650px; background: var(--mid-bg); }
.hero::after { content: none; }
.hero-grid,.tools-grid { display: none; }
.portfolio-index {
  grid-column: 1; grid-row: 1 / 3; position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 20px 30px; border-right: 1px solid var(--mid-line);
  font-size: 12px; color: var(--mid-muted);
}
.index-label { font-size: 10px; letter-spacing: .12em; margin-bottom: 27px; }
.portfolio-index nav { display: flex; flex-direction: column; gap: 22px; }
.portfolio-index nav a { font-size: 12px; }
.portfolio-index .index-location { line-height: 1.8; font-size: 11px; }
.hero .hero-inner {
  grid-column: 2; width: 100%; max-width: 1320px; margin: auto;
  display: grid; grid-template-columns: .95fr 1.05fr; align-items: center;
  gap: 0; min-height: 580px; padding: 32px 36px 10px;
}
.hero .hero-copy { max-width: 550px; min-width: 0; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(56px,6.1vw,88px); line-height: 1.04; letter-spacing: -.065em; margin: 18px 0 19px; }
.hero-role { font: 500 clamp(18px,1.8vw,25px)/1.45 'DM Sans',sans-serif; letter-spacing: -.025em; }
.hero-intro { font-size: 17px; max-width: 430px; line-height: 1.75; }
.hero .hero-actions { gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.hero .hero-fem-art.fea-art {
  grid-column: 2; position: relative; width: 112%; height: auto; max-width: none;
  top: auto; right: auto; margin: 0 0 0 -5%; opacity: 1;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.18));
}
.hero-bottom { grid-column: 2; width: calc(100% - 72px); padding: 0 0 25px; font-size: 11px; letter-spacing: .12em; }
.section { padding: 90px 0; }
.about { background: var(--mid-bg); }
.about::before,.work::before { filter: invert(1); opacity: .07; }
.body-copy p { color: var(--mid-muted); }
.work { background: var(--paper); }
.project-card { background: var(--mid-panel); border-color: var(--mid-line); border-radius: 5px; overflow: hidden; }
.project-card:hover { box-shadow: 0 15px 35px #0003; border-color: #4e6486; }
.card-no,.card-footer,.tag { color: var(--mid-muted); }
.tag { border-color: #43536b; }
.card-content h3 { font-size: 25px; font-weight: 500; }
.card-footer span { color: var(--mid-accent); }
.contact { background: var(--mid-panel); color: var(--mid-ink); }
.contact p:last-child,.linkedin-link { color: var(--mid-muted); }
.contact-link { font-family: 'Space Grotesk',sans-serif; font-weight: 500; }
.linkedin-link { border-color: #53647d; }
.linkedin-link:hover { color: var(--mid-ink); }
.footer { background: #080d16; color: var(--mid-muted); border-top: 1px solid var(--mid-line); }
.tools-page,.access-page { background: var(--mid-bg); color: var(--mid-ink); }
.tool-choice-main,.tools-main,.access-main { background: var(--mid-bg); }
.tool-choice-inner { padding-top: 65px; }
.tool-choice-inner h1 { font-size: clamp(42px,5vw,68px); font-weight: 500; }
.tool-choice-card { background: var(--mid-panel); border-color: var(--mid-line); border-radius: 5px; }
.tool-choice-card:hover,.tool-choice-card:focus-visible { background: var(--mid-raised); border-color: var(--mid-accent); }
.tool-choice-card strong { font: 500 clamp(23px,2.6vw,31px) 'Space Grotesk',sans-serif; letter-spacing: -.04em; }
.tool-choice-bottom { border-color: var(--mid-line); }
.choice-status,.choice-status.available { color: var(--mid-muted); }
.beam-symbol { background: var(--mid-support); box-shadow: 0 10px 0 -1px #a5bfff30; }
.beam-symbol::before,.beam-symbol::after { border-bottom-color: var(--mid-support); }
.beam-points { color: var(--mid-load); }
.tool-preview { background: var(--mid-panel); border-color: var(--mid-line); }
.preview-bar,.preview-overlay { color: var(--mid-muted); }
.access-main { min-height: calc(100vh - 80px); padding: 75px 0 90px; }
.access-card>p:not(.eyebrow),.contributors-intro,.contributor-material { color: var(--mid-muted); }
.access-layout .access-card h1 { font-size: clamp(40px,4.6vw,62px); line-height: 1.15; }
.contributors h2 { font-size: clamp(30px,3vw,42px); font-weight: 500; }
.contributor-card { background: var(--mid-panel); border-color: var(--mid-line); border-radius: 5px; }
.contributor-photo { border-color: #536783; }
.contributor-details h3 { font-family: 'Space Grotesk',sans-serif; font-weight: 500; }
.contributor-material svg { color: var(--mid-accent); }

/* Beam solver: inputs, workspace, diagrams, tables, messages and worked solution. */
.beam-page { background: var(--mid-bg); color: var(--mid-ink); --beam-line: var(--mid-line); --beam-muted: var(--mid-muted); --beam-blue: var(--mid-support); --beam-green: var(--mid-deflection); }
.beam-main { background: var(--mid-bg); }
.beam-heading h1 { font-weight: 500; }
.beam-panel,.beam-metrics>div { background: var(--mid-panel); border-radius: 5px; border-color: var(--mid-line); }
.model-view { background: var(--mid-panel); }
.beam-version { color: var(--mid-muted); }
.beam-version b { background: var(--mid-panel); border-color: var(--mid-line); color: var(--mid-deflection); }
.panel-heading h2 { font-family: 'Space Grotesk',sans-serif; font-weight: 500; }
.field { color: var(--mid-ink); }
.field>span { color: var(--mid-muted); }
.field input,.field select,.side-label select,.segment-select-label select,
.section-inspector .side-label input {
  background: var(--mid-input); color: var(--mid-ink); border-color: #3b4d66; border-radius: 4px;
}
.ei-value,.model-item { background: var(--mid-raised); border-color: var(--mid-line); border-radius: 4px; }
.remove-item,.subtle,.beam-method { color: var(--mid-muted); }
.remove-item:hover { color: var(--mid-error); }
.add-button { color: var(--mid-accent); border: 1px solid #405473; border-radius: 4px; background: var(--mid-bg); }
.add-button:hover { background: var(--mid-raised); }
.quiet-button { color: var(--mid-accent); }
.canvas-footer,.diagram-legend,.chart-heading span,.chart-heading strong span,
.beam-metrics small,.beam-metrics strong small,.beam-method,.subtle { color: var(--mid-muted); }
.canvas-footer,.diagram-legend,.reactions th,.reactions td,
.solution,.section-inspector { border-color: var(--mid-line); }
.beam-metrics strong,.section-values strong,.beam-method strong { color: var(--mid-ink); }
#beam-canvas text,.beam-chart text { fill: var(--mid-muted); }
.gold { background: var(--mid-load); }
.blue { background: var(--mid-support); }
.draggable:hover .drag-halo { fill: var(--mid-load); }
.section-inspector label { color: var(--mid-ink); }
.reactions th { color: var(--mid-muted); }
.reactions td:first-child { color: var(--mid-accent); }
#solution-content { color: var(--mid-muted); }
#solution-content h3 { color: var(--mid-ink); font-family: 'Space Grotesk',sans-serif; }
.equation { background: var(--mid-input); color: var(--mid-ink); border-color: var(--mid-accent); }
.beam-error { background: #30221f; border-color: #906044; color: var(--mid-error); }
.analysis-state.invalid,#section-position-error { color: var(--mid-error); }

/* Concrete tool: full dark treatment, including results, derivation and schematic. */
.concrete-main { background: var(--mid-bg); }
.tool-breadcrumb,.concrete-heading>p,.input-note,.method-note,.result-state,.section-diagram-caption { color: var(--mid-muted); }
.tool-breadcrumb:hover,.method-note a { color: var(--mid-accent); }
.concrete-heading h1 { color: var(--mid-ink); font-weight: 500; }
.analysis-form,.analysis-results { background: var(--mid-panel); border-color: var(--mid-line); border-radius: 5px; box-shadow: none; }
.mode-fieldset legend,.form-group h2,.result-title-row h2 { font-family: 'Space Grotesk',sans-serif; font-weight: 500; color: var(--mid-ink); }
.mode-options span { border-color: #405473; color: var(--mid-muted); background: var(--mid-input); border-radius: 4px; }
.mode-options input:checked+span { background: #263a5c; color: var(--mid-ink); border-color: var(--mid-accent); }
.input-grid label { color: var(--mid-ink); font-weight: 500; }
.input-grid label span { color: var(--mid-muted); }
.input-grid input { background: var(--mid-input); color: var(--mid-ink); border-color: #3b4d66; font-weight: 500; border-radius: 4px; }
.input-grid input:focus { outline-color: var(--mid-accent); }
.result-title-row span { color: var(--mid-accent); background: #21314a; border-radius: 3px; }
.result-primary { background: #1c2b42; color: var(--mid-ink); border: 1px solid #354b6a; border-radius: 4px; }
.result-primary>span,.result-primary p { color: var(--mid-muted); }
.result-primary strong { font-family: 'Space Grotesk',sans-serif; font-weight: 500; }
.result-primary p.exceeds { color: var(--mid-error); }
.result-metrics span { color: var(--mid-muted); }
.result-metrics strong,.calculation-steps summary,.calculation-steps li strong { color: var(--mid-ink); }
.calculation-steps li { color: var(--mid-muted); }
.input-error { color: var(--mid-error); border-color: #906044; background: #30221f; }
.result-visual svg text { fill: var(--mid-muted); }

/* Scientific calculator: panel, display, every keypad state, history and launcher. */
.sci-launcher,.sci-panel { color: var(--mid-ink); }
.sci-launcher { background: var(--mid-panel); border-color: #506688; border-radius: 6px; }
.sci-launcher svg { color: var(--mid-accent); }
.sci-launcher:hover { background: var(--mid-raised); border-color: var(--mid-accent); }
.sci-panel { background: var(--mid-panel); border-color: #405473; border-radius: 7px; }
.sci-header,.sci-expression,.sci-history,.sci-history li { border-color: var(--mid-line); }
.sci-drag-hint,.sci-mode-note,.sci-label,.sci-result-row>span,.sci-status,
.sci-help,.sci-history-empty { color: var(--mid-muted); }
.sci-close { color: var(--mid-ink); }
.sci-close:hover { background: var(--mid-raised); }
.sci-mode { background: #21314a; border-color: #405473; color: var(--mid-accent); }
.sci-text-button,.sci-history summary { color: var(--mid-accent); }
.sci-display { background: var(--mid-bg); border-color: var(--mid-line); }
.sci-expression { color: var(--mid-ink); }
.sci-expression::placeholder { color: #899bb6; }
.sci-result,.sci-history-item strong { color: #c6d6ff; }
.sci-status.sci-error,.sci-key.sci-clear { color: var(--mid-error); }
.sci-key { background: #1b2a40; border-color: #344965; color: var(--mid-ink); border-radius: 4px; }
.sci-key:hover { background: #2c405f; }
.sci-key.sci-number { background: #23344d; }
.sci-key.sci-number:hover { background: #344c70; }
.sci-key.sci-function { color: #c4d6ff; }
.sci-key.sci-operator { color: #d6e1fc; }
.sci-key.sci-equals { background: var(--mid-accent); border-color: var(--mid-accent); color: #101b31; }
.sci-key.sci-equals:hover { background: #bed0ff; }
.sci-ans { background: var(--mid-input); border-color: #344965; color: var(--mid-accent); }
.sci-history-item { color: var(--mid-muted); }
.sci-history-item:hover { background: var(--mid-raised); }
.sci-panel button:focus-visible,.sci-panel input:focus-visible,.sci-panel summary:focus-visible,.sci-launcher:focus-visible { outline-color: var(--mid-accent); }

@media(min-width:1500px) { .hero .hero-inner { padding-right: 50px; } }
@media(max-width:1100px) and (min-width:721px) {
  .hero { grid-template-columns: 125px minmax(0,1fr); }
  .portfolio-index { padding-left: 17px; padding-right: 13px; }
  .hero .hero-inner { padding-left: 28px; padding-right: 28px; }
  .hero h1 { font-size: clamp(50px,6vw,68px); }
  .hero-intro { font-size: 15px; }
  .hero-role { font-size: 18px; }
  .hero .hero-actions { gap: 18px; }
  .hero .hero-actions .button { padding: 14px 16px; gap: 15px; }
  .hero .hero-actions .text-link { font-size: 13px; }
  .header-inner { gap: 18px; }
  nav { gap: 20px; }
  nav a { font-size: 13px; }
}
@media(max-width:800px) {
  .beam-layout { grid-template-columns: minmax(0,1fr); }
  .beam-workspace { min-width: 0; }
}
@media(max-width:720px) {
  .header-inner { flex-direction: column; align-items: flex-start; gap: 17px; padding: 19px 0; }
  .wordmark { font-size: 22px; }
  .site-header nav { justify-content: flex-start; width: 100%; gap: 15px; row-gap: 16px; }
  .site-header nav a { font-size: 12px; }
  .hero { display: block; min-height: 0; }
  .portfolio-index { display: none; }
  .hero .hero-inner { display: flex; flex-direction: column; padding: 40px 18px 0; min-height: 0; }
  .hero .hero-copy { max-width: 560px; width: 100%; }
  .hero h1 { font-size: clamp(54px,12vw,76px); margin-top: 0; }
  .hero-role { font-size: 20px; }
  .hero-intro { font-size: 16px; }
  .hero .hero-fem-art.fea-art { width: min(112%,640px); max-width: none; margin: 25px auto 0; }
  .hero-bottom { width: calc(100% - 36px); padding-top: 18px; }
  .tool-choice-inner { padding-top: 45px; }
  .section { padding: 70px 0; }
  .access-main { padding: 48px 0 70px; }
  .access-layout .access-card h1 { font-size: 44px; }
  .concrete-heading h1 { font-size: clamp(34px,8vw,46px); }
}
@media(max-width:400px) {
  .site-header nav { column-gap: 13px; }
  .hero .hero-actions { gap: 22px; }
  .hero .hero-actions .button { padding: 14px 17px; gap: 20px; }
  .hero .hero-actions .text-link { font-size: 14px; }
  .access-layout .access-card h1 { font-size: 39px; }
}
@media(prefers-reduced-motion:reduce) { .project-card:hover,.tool-choice-card:hover { transform: none; } }