/* Content flows with the document. The fixed navigation is styled separately. */
.view {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  min-height: 0;
  font-size:calc(var(--text-scale) * 16px);
  line-height: 1.6;
}
.view *, .view *::before, .view *::after { min-width: 0; }
.view :is(h1,h2,h3,h4,p,span,small,strong,dd,dt,button,a) { overflow-wrap: break-word; }
.view .micro { font:400 calc(var(--text-scale) * 12px)/1.65 var(--mono); letter-spacing: 1.5px; color: #bacddd; }
.view .bevel { --cut: 18px; border-radius: 12px; }
.view .short-rule { width: 26px; height: 2px; margin: 22px 0; }
.view :is(.person-name,h1,h2,.metric>strong) { transform: none; width: auto; }
.view :is(.side-note,.education-note) { display: none; }
.view .section-rail {
  position: relative; inset: auto; display: flex; align-items: center;
  gap: 15px; margin: 0 0 30px;
}
.view .section-rail > b { width: 35px; padding-bottom: 4px; border-bottom-width: 2px; font:600 calc(var(--text-scale) * 17px)/1.4 var(--display); }
.view .section-rail > span { margin: 0; padding: 0; border: 0; font:calc(var(--text-scale) * 12px)/1.5 var(--mono); letter-spacing: 2px; }
.view .section-rail > :is(i,.micro) { display: none; }
.view .hero, .view .work-hero, .view .experiments-hero {
  margin: 0; padding: 0; height: auto; max-width: 850px;
}
.view .hero::before, .view .experiments-hero::before { display: none; }
.view .person-name { font:400 calc(var(--text-scale) * clamp(22px,4vw,38px))/1.3 var(--display); letter-spacing: -.4px; }
.view h1 { font:600 calc(var(--text-scale) * clamp(39px,6.4vw,70px))/1.05 var(--display); letter-spacing: -1.3px; margin: 16px 0 0; }
.view h2 { font:600 calc(var(--text-scale) * clamp(36px,5.9vw,64px))/1.08 var(--display); letter-spacing: -1px; }
.view .hero-description, .view .work-hero > p:last-child, .view .experiments-hero > p {
  font:400 calc(var(--text-scale) * clamp(17px,2vw,21px))/1.6 var(--font); color: #d2dfed; margin: 18px 0 0;
}
.view.home .hero { padding: 40px 0 0; }
.view.home .hero-description { max-width: 640px; }
.view .metrics { grid-template-columns: 1fr; gap: 14px; margin: 36px 0 0; }
.view.home .metric {
  height: auto; min-height: 180px; padding: 24px;
  display: grid; grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 10px 14px; align-items: center;
}
.view .metric > svg { width: 36px; height: 36px; margin: 0; grid-column: 1; grid-row: 1; }
.view .metric h3 { min-height: 0; font:600 calc(var(--text-scale) * 14px)/1.4 var(--display); letter-spacing: .7px; grid-column: 2; grid-row: 1; }
.view .metric > strong { font:600 calc(var(--text-scale) * 48px)/1.15 var(--display); letter-spacing: -1px; margin: 0; grid-column: 3; grid-row: 1 / span 2; }
.view .segments { gap: 5px; margin: 4px 0; grid-column: 1 / span 2; }
.view .segments i { width: 27px; height: 5px; }
.view.home .metric > .micro { position: static; font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: 1px; grid-column: 1 / -1; }
.view .metric .micro::after { display: none; }
.view .metric .plus { display: none; }
.view .card-number { top: 10px; right: 14px; font:calc(var(--text-scale) * 12px)/1.5 var(--mono); }

/* Local time is a readable information panel, not a compressed toolbar. */
.view .clock-strip, .view .clock-strip.compact {
  margin: 24px 0 0; height: auto; min-height: 112px; padding: 20px;
  display: grid; grid-template-columns: 32px minmax(0,1fr) auto;
  gap: 12px; border-radius: 12px;
}
.view .clock-strip > svg { width: 30px; height: 30px; }
.view .clock-strip > svg:last-child { display: none; }
.view .clock-strip strong { font:600 calc(var(--text-scale) * 14px)/1.5 var(--display); letter-spacing: 1px; }
.view .clock-strip small { font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: 1px; }
.view .clock-strip .local-time { border: 0; font:400 calc(var(--text-scale) * 32px)/1.2 var(--display); letter-spacing: 1px; }
.view .clock-strip .date { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.view .clock-strip .local-date { font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: .5px; }

/* Profile: stack the portrait, timeline and capabilities instead of scaling them. */
.view.profile .profile-intro {
  margin: 0; height: auto; padding: 0; border: 0;
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start;
}
.view.profile .profile-lead { font:400 calc(var(--text-scale) * clamp(23px,3vw,31px))/1.3 var(--display); letter-spacing: -.2px; margin: 18px 0; }
.view.profile .profile-text > p:not(.profile-lead):not(.micro) { font:400 calc(var(--text-scale) * 17px)/1.65 var(--font); }
.view.profile .profile-text > .micro { font:calc(var(--text-scale) * 12px)/1.75 var(--mono); letter-spacing: 2px; }
.view.profile .profile-text .short-rule { margin: 24px 0 18px; }
.view .portrait { position: relative; inset: auto; width: 100%; max-width: 420px; height: auto; aspect-ratio: 338 / 340; justify-self: center; }
.view .timeline { margin: 28px 0 0; height: auto; padding: 24px; }
.view .panel-heading { gap: 16px; align-items: start; }
.view .panel-heading h3 { font:600 calc(var(--text-scale) * 18px)/1.4 var(--display); letter-spacing: 2px; border: 0; padding: 0; margin: 0; }
.view .panel-heading .micro { font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: 1px; }
.view .timeline .panel-heading > .micro { display: none; }
.view .timeline-sub { position: static; margin-top: 10px; font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: 1px; }
.view .timeline-arc { display: none; }
.view .milestones { position: relative; inset: auto; display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 24px; padding-left: 16px; }
.view .milestones > div { position: relative; padding: 0 0 26px 24px; border-left: 1px solid #3dcbbe90; }
.view .milestones > div:last-child { text-align: left; padding-bottom: 0; border-color: transparent; }
.view .milestones > div::before { content: ''; position: absolute; left: -6px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: #9effd0; border: 2px solid #173b38; box-shadow: 0 0 10px #4fffe078; }
.view .milestones > div:last-child::before { background: #d4a1ff; box-shadow: 0 0 12px #b96eff; }
.view .milestones b { font:600 calc(var(--text-scale) * 18px)/1.4 var(--display); }
.view .milestones .micro { margin-top: 4px; font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: 1px; }
.view .capabilities { margin: 20px 0 0; height: auto; padding: 22px 16px 16px; }
.view .capabilities > .panel-heading { margin: 0 8px 20px; }
.view .capabilities > .panel-heading > .micro { display: none; }
.view .cap-grid { grid-template-columns: 1fr; gap: 12px; }
.view .capability, .view .capability:nth-child(n+4) {
  grid-column: auto; height: auto; padding: 22px; --cut: 14px;
  grid-template-columns: 38px minmax(0,1fr); gap: 15px;
}
.view .capability > svg { width: 34px; height: 34px; }
.view .capability h3 { font:600 calc(var(--text-scale) * 15px)/1.4 var(--display); letter-spacing: 1.3px; }
.view .capability .plus { right: 14px; top: 8px; font-size:calc(var(--text-scale) * 18px); }
.view .tags { gap: 8px; }
.view .tags span { padding: 7px 10px; font:calc(var(--text-scale) * 14px)/1.3 var(--font); border-radius: 7px; }
.view .shortcut { margin: 20px 0 0; padding: 24px; height: auto; grid-template-columns: 1fr; gap: 20px; }
.view .shortcut > svg { width: 64px; height: 52px; }
.view .shortcut h3 { font:600 calc(var(--text-scale) * 18px)/1.4 var(--display); letter-spacing: 1.8px; margin-bottom: 14px; }
.view .shortcut p:not(.micro) { font:calc(var(--text-scale) * 16px)/1.7 var(--font); }
.view .shortcut > .micro { border-left: 0; border-top: 1px solid #789aaa50; padding: 18px 0 0; font:calc(var(--text-scale) * 12px)/1.7 var(--mono); letter-spacing: 1px; }

/* Projects become tappable cards on narrow screens. */
.view .work-hero .person-name { font:400 calc(var(--text-scale) * clamp(22px,3vw,32px))/1.3 var(--display); }
.view .work-hero h2 { margin-top: 10px; }
.view .work-caption { height: auto; margin: 30px 0 16px; display: flex; flex-wrap: wrap; gap: 12px; font:calc(var(--text-scale) * 12px)/1.5 var(--mono); letter-spacing: 1px; }
.view .work-caption small { display: block; font:calc(var(--text-scale) * 12px)/1.5 var(--mono); margin: 4px 0 0; letter-spacing: 1px; }
.view .work-caption button { min-height: 44px; font:calc(var(--text-scale) * 12px)/1.5 var(--mono); letter-spacing: .5px; padding: 10px 12px; border: 1px solid #7babb855; border-radius: 8px; }
.view .project-list { margin: 0; gap: 12px; }
.view .project-row {
  height: auto; min-height: 142px; padding: 18px; border-radius: 10px;
  grid-template-columns: 30px minmax(0,1fr) auto; gap: 10px 12px; font-size:calc(var(--text-scale) * 16px);
}
.view .project-row > strong { grid-column: 1; grid-row: 1; font:500 calc(var(--text-scale) * 22px)/1.3 var(--display); }
.view .project-row > .row-name { grid-column: 2; grid-row: 1; }
.view .project-row .row-name > b { font-size:calc(var(--text-scale) * 16px); line-height: 1.4; }
.view .project-row .row-name > small { font-size:calc(var(--text-scale) * 14px); line-height: 1.5; margin-top: 3px; }
.view .project-row > .code { grid-column: 1 / span 2; grid-row: 2; font:calc(var(--text-scale) * 12px)/1.5 var(--mono); letter-spacing: 1px; }
.view .project-row > .year { grid-column: 3; grid-row: 2; font:calc(var(--text-scale) * 13px)/1.5 var(--mono); }
.view .project-row > .sector { grid-column: 1 / -1; grid-row: 3; font:calc(var(--text-scale) * 12px)/1.5 var(--mono); letter-spacing: 1px; }
.view .project-row > .state { grid-column: 1 / -1; grid-row: 4; gap: 8px; font:calc(var(--text-scale) * 12px)/1.5 var(--mono); letter-spacing: .7px; white-space: normal; }
.view .project-row .state::before { width: 8px; height: 8px; flex-shrink: 0; }
.view .project-row > .bars { display: none; }
.view .project-row > span:last-child { grid-column: 3; grid-row: 1; font-size:calc(var(--text-scale) * 23px); }
.view .project-detail { margin: 24px 0 0; padding: 24px 18px; min-height: 0; }
.view .project-detail > header { height: auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.view .project-detail > header > b { font:500 calc(var(--text-scale) * 25px)/1.2 var(--display); }
.view .project-detail > header > span { font:calc(var(--text-scale) * 12px)/1.5 var(--mono); }
.view .project-detail > header > div { order: 2; flex-basis: 100%; margin: 2px 0 0; }
.view .project-detail > header h3 { font:600 calc(var(--text-scale) * 28px)/1.2 var(--display); white-space: normal; }
.view .project-detail > header p { font:calc(var(--text-scale) * 16px)/1.6 var(--font); margin-top: 8px; }
.view .project-detail .status-pill { font:calc(var(--text-scale) * 12px)/1.5 var(--mono); padding: 4px 10px; }
.view .project-detail > header button { order: 3; width: 100%; min-height: 44px; margin: 8px 0 0; border: 1px solid #7194a562; border-radius: 8px; padding: 10px 12px; text-align: left; font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: .7px; }
.view .dossier-intro { height: auto; grid-template-columns: 1fr; grid-template-rows: auto; gap: 22px; margin-top: 24px; }
.view .work-cover { width: 100%; aspect-ratio: 368 / 177; height: auto; min-height: 0; border-radius: 9px; }
.view .project-facts h4 { font:calc(var(--text-scale) * 12px)/1.5 var(--mono); letter-spacing: 1.7px; margin: 0 0 12px; }
.view .project-facts dl > div { grid-template-columns: minmax(70px,.75fr) minmax(0,1.6fr); padding: 11px 0; gap: 12px; font:calc(var(--text-scale) * 16px)/1.55 var(--font); }
.view .project-facts dt { color: #99b3c5; }
.view .dossier-intro blockquote { padding: 24px; font:italic calc(var(--text-scale) * 18px)/1.6 var(--font); }
.view .dossier-intro blockquote .micro { font:calc(var(--text-scale) * 12px)/1.65 var(--mono); letter-spacing: 1.3px; }
.view .dossier-intro blockquote .short-rule { margin: 18px 0; }
.view .small-heading { font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: 1.5px; margin: 30px 0 16px; }
.view .process { height: auto; margin: 0; grid-template-columns: 1fr; gap: 0; text-align: left; }
.view .process::before { display: none; }
.view .process > div { display: flex; align-items: start; gap: 16px; position: relative; padding: 0 0 20px; }
.view .process > div:not(:last-child)::before { content: ''; position: absolute; top: 30px; bottom: 0; left: 15px; width: 1px; background: #55958b90; }
.view .step { width: 32px; height: 32px; flex-shrink: 0; box-shadow: 0 0 0 3px #18212a; }
.view .step svg { width: 20px; height: 20px; }
.view .process p { font:calc(var(--text-scale) * 16px)/1.5 var(--font); margin: 3px 0 0; }
.view .deliverables { grid-template-columns: 1fr; height: auto; gap: 12px; margin: 0; grid-template-rows: auto; }
.view .deliverable { padding: 22px; height: auto; min-height: 120px; grid-template-columns: 38px minmax(0,1fr); gap: 10px 16px; }
.view .deliverable svg { width: 34px; height: 34px; }
.view .deliverable h4 { font:600 calc(var(--text-scale) * 16px)/1.45 var(--font); }
.view .deliverable > .micro { font:calc(var(--text-scale) * 12px)/1.55 var(--mono); letter-spacing: 1px; padding-right: 16px; }
.view .deliverable > span { bottom: 20px; right: 20px; font-size:calc(var(--text-scale) * 22px); }
.view .project-story { height: auto; grid-template-columns: 1fr; gap: 12px; margin: 0; }
.view .story { padding: 22px; }
.view .story h4 { font:600 calc(var(--text-scale) * 16px)/1.5 var(--font); gap: 14px; }
.view .story h4 > b { font:500 calc(var(--text-scale) * 18px)/1.5 var(--display); }
.view .story p { font:calc(var(--text-scale) * 16px)/1.65 var(--font); margin: 12px 0 0; letter-spacing: 0; }
.view .project-detail > footer { flex-direction: column; align-items: stretch; gap: 12px; margin: 24px 0 0; font:calc(var(--text-scale) * 12px)/1.65 var(--mono); }
.view .project-detail > footer > a { min-height: 48px; padding: 10px 0; gap: 12px; font:calc(var(--text-scale) * 12px)/1.5 var(--mono); }
.view .project-detail > footer svg { width: 24px; height: 24px; }

/* The interactive example gets its own vertical space, with readable feedback. */
.view .scenario, .view .telemetry, .view .story-data { height: auto; min-height: 0; margin: 0; padding: 24px 18px; }
.view .scenario > header, .view .telemetry > header { height: auto; padding: 0; flex-wrap: wrap; gap: 10px; font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: 1px; }
.view .scenario > header > .micro, .view .telemetry > header > .micro { font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: 1.5px; }
.view .scenario > header > span { position: static; font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: 1px; color: #a6c5d8; }
.view .scenario h2 { font:600 calc(var(--text-scale) * clamp(29px,4.2vw,44px))/1.15 var(--display); margin: 20px 0 0; letter-spacing: -.5px; }
.view .scenario-lead { font:calc(var(--text-scale) * 16px)/1.65 var(--font); margin-top: 14px; }
.view .scenario-grid { grid-template-columns: 1fr; height: auto; min-height: 0; gap: 20px; margin-top: 24px; }
.view .scenario-image { position: relative; display: block; height: auto; min-height: 0; padding: 0; background: #14242e; border-radius: 10px; overflow: hidden; }
.view .scenario-image::before { content: ''; display: block; width: 100%; aspect-ratio: 506 / 184; background: url('./assets/measure-reference.webp') 12.76% 17.47% / 185.6% auto no-repeat; }
.view .scenario-image > div { width: auto; margin: 12px; padding: 16px; font:calc(var(--text-scale) * 16px)/1.65 var(--font); border-radius: 9px; background: #15252ef5; }
.view .answers { padding: 0; gap: 12px; }
.view .answers > button { height: auto; min-height: 84px; padding: 16px; gap: 14px; font:calc(var(--text-scale) * 16px)/1.5 var(--font); border-radius: 10px; }
.view .answers > button > b { width: 34px; height: 36px; border-radius: 8px; font:600 calc(var(--text-scale) * 19px)/1 var(--display); }
.view .answers > button > i { font-size:calc(var(--text-scale) * 28px); }
.view .answers > button > span { flex: 1; }
.view .scenario-progress { min-height: 36px; margin-top: 4px; gap: 14px; font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: .8px; }
.view .scenario-progress > i { max-width: 145px; height: 9px; }
.view .telemetry { margin-top: 20px; }
.view .telemetry > header { margin-bottom: 20px; }
.view .telemetry > header > span { font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: .8px; }
.view .status-dot { width: 9px; height: 9px; margin-right: 6px; }
.view .data-cards { grid-template-columns: 1fr; height: auto; gap: 14px; }
.view .data-card { padding: 22px; border-radius: 12px; }
.view .data-card h3 { font:600 calc(var(--text-scale) * 15px)/1.4 var(--display); letter-spacing: .5px; }
.view .registered > div { gap: 18px; }
.view .registered > div > svg { width: 46px; height: 46px; border-width: 2px; padding: 8px; }
.view .registered > strong { font:600 calc(var(--text-scale) * 58px)/1.2 var(--display); margin: 16px 0 10px; }
.view .registered > strong small { font-size:calc(var(--text-scale) * 25px); }
.view .registered .micro { font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: 1px; }
.view .registered .short-rule { margin: 18px 0 0; }
.view .bar-row { gap: 12px; margin-top: 16px; font:calc(var(--text-scale) * 15px)/1.5 var(--font); }
.view .bar-row > b { width: 30px; height: 32px; border-radius: 8px; font:600 calc(var(--text-scale) * 18px)/32px var(--display); flex-shrink: 0; }
.view .bar-row > i { height: 14px; border-radius: 4px; }
.view .bar-row > span { width: 42px; }
.view .distribution > p { gap: 14px; margin-top: 20px; font:calc(var(--text-scale) * 12px)/1.7 var(--mono); letter-spacing: .7px; }
.view .distribution > p svg { width: 34px; height: 30px; }
.view .distribution small { font:calc(var(--text-scale) * 12px)/1.7 var(--mono); letter-spacing: 0; }
.view .time-card h3 { gap: 12px; white-space: normal; }
.view .time-card h3 svg { width: 30px; height: 30px; }
.view .time-card > div { margin: 22px 0 12px; gap: 14px; flex-wrap: wrap; }
.view .time-card strong { font:600 calc(var(--text-scale) * 42px)/1.2 var(--display); }
.view .time-card > div > span { font:calc(var(--text-scale) * 14px)/1.5 var(--font); padding: 8px 12px; border-radius: 8px; }
.view .time-card > p { font:calc(var(--text-scale) * 16px)/1.6 var(--font); }
.view .time-card .short-rule { margin: 22px 0 0; }
.view .time-card button { min-height: 44px; padding: 10px 12px; border: 1px solid #65dba966; border-radius: 8px; margin-top: 16px; font:calc(var(--text-scale) * 12px)/1.5 var(--mono); }
.view .progress-panel { height: auto; margin: 16px 0 0; padding: 20px 16px; }
.view .progress-panel > header { max-width: none; display: flex; flex-direction: column; align-items: start; gap: 12px; margin-bottom: 22px; }
.view .progress-panel > header p { font:calc(var(--text-scale) * 12px)/1.6 var(--font); }
.view .progress-panel > header p i { width: 8px; height: 8px; margin-right: 5px; }
.view .chart-layout { height: auto; display: grid; grid-template-columns: 1fr; gap: 22px; }
.view .chart { width: 100%; height: auto; aspect-ratio: 600 / 230; overflow: visible; }
.view .chart-labels { font-size:calc(var(--text-scale) * 20px); }
.view .chart-layout > aside { width: 100%; height: auto; margin: 0; padding: 22px; border-radius: 10px; }
.view .chart-layout > aside > p { font:calc(var(--text-scale) * 16px)/1.5 var(--font); gap: 16px; }
.view .chart-layout > aside svg { width: 30px; height: 32px; }
.view .chart-layout > aside > strong { font:600 calc(var(--text-scale) * 42px)/1.3 var(--display); margin-top: 16px; }
.view .chart-layout > aside > .micro { font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: 1px; margin-top: 8px; }
.view .demo-feedback { position: static; margin-top: 20px; white-space: normal; overflow: visible; font:calc(var(--text-scale) * 16px)/1.65 var(--font); color: #cee7f4; }
.view .story-data { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 20px; }
.view .story-data h2 { font:600 calc(var(--text-scale) * clamp(30px,4.2vw,43px))/1.15 var(--display); margin: 14px 0 24px; letter-spacing: -.5px; }
.view .signals { grid-template-columns: repeat(2,minmax(0,1fr)); height: auto; gap: 12px; }
.view .signals > div { padding: 16px; border-radius: 10px; }
.view .signals b { font:400 calc(var(--text-scale) * 30px)/1.1 var(--font); margin-bottom: 14px; }
.view .signals .micro { font:calc(var(--text-scale) * 12px)/1.65 var(--mono); letter-spacing: .5px; }
.view .signals span { font-size:calc(var(--text-scale) * 16px); }
.view .data-explanation { padding: 24px 0 0; border-left: 0; border-top: 1px solid #7096a762; font:calc(var(--text-scale) * 16px)/1.7 var(--font); }
.view .data-explanation > p + p { margin-top: 16px; }
.view .measure-closing { height: auto; margin: 36px 0 0; padding: 0 4px; }
.view .measure-closing .micro { font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: 1.5px; }
.view .measure-closing > p:not(.micro) { font:600 calc(var(--text-scale) * clamp(26px,3.5vw,38px))/1.2 var(--display); margin: 16px 0 0; }
.view .measure-closing .short-rule { width: 26px; margin: 22px auto 0; }

/* Art remains atmospheric while text has a stable, readable foreground. */
.view .experiments-hero { margin: 30px 0 0; }
.view .experiments-hero h2 { margin: 0; }
.view .experiment-grid { grid-template-columns: 1fr; margin: 30px 0 0; gap: 16px; }
.view .experiment-card { height: auto; min-height: 350px; padding: 24px; display: flex; flex-direction: column; align-items: start; }
.view .experiment-card > div.art { top: 1px; left: 1px; right: 1px; bottom: auto; height: auto; aspect-ratio: 394 / 225; background-size: 238.83% auto; mask-image: linear-gradient(#000 80%,transparent); }
.view .experiment-card.game .art { background-position: 10.05% 36.35%; }
.view .experiment-card.animation .art { background-position: 89.58% 36.35%; }
.view .experiment-card.graphic .art { background-position: 10.05% 55.29%; }
.view .experiment-card.code .art { background-position: 89.58% 55.29%; }
.view .experiment-card > div.art::after { background: linear-gradient(90deg,#13212af5,#14222abc 45%,#12242a10 100%); }
.view .experiment-card .card-number { left: 24px; top: 20px; font:calc(var(--text-scale) * 12px)/1.5 var(--mono); }
.view .experiment-card > svg { width: 40px; height: 40px; margin: 26px 0 20px; }
.view .experiment-card h3 { max-width: 75%; font:600 calc(var(--text-scale) * 27px)/1.15 var(--display); margin: 0 0 12px; }
.view .experiment-card > p:not(.micro) { width: 72%; font:calc(var(--text-scale) * 16px)/1.6 var(--font); }
.view .experiment-card > .micro { position: static; width: 72%; margin-top: 26px; font:calc(var(--text-scale) * 12px)/1.7 var(--mono); letter-spacing: 1px; }
.view .experiment-card > .micro::before { margin-bottom: 8px; }
.view .experiment-card .open-piece { right: 18px; bottom: 18px; width: 48px; height: 48px; min-width: 48px; min-height: 48px; font-size:calc(var(--text-scale) * 30px); border: 1px solid #b7e9f880; border-radius: 50%; background: #122332a8; }
.view .experiment-card.animation .play-piece { top: 22px; right: 22px; width: 48px; height: 48px; font-size:calc(var(--text-scale) * 24px); }
.view .experiment-card .code-art { font-size:calc(var(--text-scale) * 10px); line-height: 1.8; opacity: .55; width: 47%; right: 8px; top: 54px; }
.view .secret-card { height: auto; min-height: 335px; margin: 20px 0 0; padding: 28px 24px; grid-template-columns: 1fr; gap: 20px; overflow: hidden; }
.view .secret-card > svg { width: 46px; height: 56px; }
.view .secret-art { inset: 0 auto auto 50%; width: 100%; min-width: 700px; height: auto; aspect-ratio: 831 / 180; transform: translateX(-50%); background-size: 113.24% auto; background-position: 50% 72.25%; opacity: .6; mask-image: linear-gradient(#000 85%,transparent); }
.view .secret-art::after { background: linear-gradient(90deg,#191729ed,#182029a0 68%,transparent); }
.view .secret-card h3 { font:600 calc(var(--text-scale) * 28px)/1.2 var(--display); margin: 0 0 14px; }
.view .secret-card p:not(.micro) { font:calc(var(--text-scale) * 16px)/1.6 var(--font); }
.view .secret-card button { min-height: 48px; height: auto; width: min(100%,250px); padding: 12px 18px; margin: 24px 0 0; border-radius: 8px; font:600 calc(var(--text-scale) * 14px)/1.5 var(--display); letter-spacing: 1px; }
.view .secret-card button svg { width: 24px; height: 24px; }
.view .secret-card > .micro, .view .secret-card .door-inscription { display: none; }
.view .sample-caption { position: static; margin: 20px 0 0; font:calc(var(--text-scale) * 12px)/1.65 var(--mono); letter-spacing: .6px; color: #b6c7d0; }

/* Contact channels stay large enough to tap and never truncate the address. */
.view.contact .hero { height: auto; margin-top: 40px; }
.view.contact h2 { margin-top: 12px; font:600 calc(var(--text-scale) * clamp(48px,8vw,80px))/1.05 var(--display); letter-spacing: -1.5px; }
.view .contact-lead { font:400 calc(var(--text-scale) * clamp(21px,3vw,30px))/1.45 var(--font); margin-top: 20px; }
.view.contact .hero-description { font:calc(var(--text-scale) * 17px)/1.6 var(--font); margin: 0; }
.view.contact .short-rule { margin: 24px 0; }
.view .contact-grid { grid-template-columns: 1fr; gap: 16px; margin: 32px 0 0; }
.view .contact-card { height: auto; min-height: 245px; padding: 28px; }
.view .contact-card > svg { width: 40px; height: 42px; margin: 0 0 18px; }
.view .contact-card h3 { font:600 calc(var(--text-scale) * 15px)/1.4 var(--display); letter-spacing: 1.3px; margin-bottom: 10px; }
.view .contact-card > p:not(.micro), .view .contact-card:first-child > p:not(.micro) { font:calc(var(--text-scale) * 17px)/1.55 var(--font); letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
.view .contact-card .short-rule { margin: 22px 0 18px; }
.view .contact-card .micro { font:calc(var(--text-scale) * 12px)/1.6 var(--mono); letter-spacing: 1.2px; padding-right: 20px; }
.view .link-arrow { right: 24px; bottom: 24px; font:calc(var(--text-scale) * 30px)/1 var(--font); }
.view .contact-status { height: auto; padding: 24px; margin: 24px 0 0; grid-template-columns: 34px minmax(0,1fr); gap: 22px 18px; border-radius: 12px; }
.view .contact-status > svg { width: 30px; height: 30px; }
.view .contact-status > p:nth-child(2), .view .contact-status > p:nth-child(4) { border: 0; padding: 0; }
.view .contact-status strong { font:600 calc(var(--text-scale) * 15px)/1.4 var(--display); letter-spacing: 1px; }
.view .contact-status small { font:calc(var(--text-scale) * 12px)/1.7 var(--mono); letter-spacing: .7px; white-space: normal; margin-top: 5px; }
.view .contact-status .local-time { font:500 calc(var(--text-scale) * 29px)/1.2 var(--display); letter-spacing: 1px; }
.view .availability-orb { width: 31px; height: 31px; border-width: 4px; box-shadow: 0 0 22px #43ff6645,inset 0 0 0 3px #213c33; }
.view .contact-quote { height: auto; grid-template-columns: 36px minmax(0,1fr); gap: 20px; margin: 32px 4px 0; }
.view .contact-quote > b { font:600 calc(var(--text-scale) * 60px)/1 var(--font); align-self: start; }
.view .contact-quote > i, .view .contact-quote > .micro:last-child { display: none; }
.view .contact-quote > .micro { font:calc(var(--text-scale) * 12px)/1.7 var(--mono); letter-spacing: 1.7px; }

@media (min-width: 640px) {
  .view { padding: 30px 32px 50px; }
  .view.home .hero { padding-top: 80px; }
  .view .metrics { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
  .view.home .metric { padding: 25px; display: flex; flex-direction: column; align-items: start; min-height: 295px; gap: 16px; }
  .view .metric > svg { width: 40px; height: 40px; }
  .view .metric h3 { min-height: 40px; }
  .view .metric > strong { font-size:calc(var(--text-scale) * clamp(42px,6vw,66px)); }
  .view .segments { margin: 0; }
  .view.home .metric > .micro { margin-top: auto; }
  .view .clock-strip, .view .clock-strip.compact { grid-template-columns: 36px minmax(110px,1fr) minmax(110px,.75fr) minmax(150px,1fr); padding: 22px 26px; min-height: 100px; gap: 20px; }
  .view .clock-strip .date { grid-column: auto; display: block; }
  .view .clock-strip .local-time { border-left: 1px solid #819eac59; border-right: 1px solid #819eac59; font-size:calc(var(--text-scale) * 38px); }
  .view .cap-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .view .capability:last-child { grid-column: 1 / -1; }
  .view .process { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 18px; }
  .view .process > div:not(:last-child)::before { display: none; }
  .view .process > div { padding: 0; }
  .view .deliverables { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .view .dossier-intro { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .view .dossier-intro blockquote { grid-column: 1 / -1; }
  .view .data-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .view .time-card { grid-column: 1 / -1; }
  .view .time-card > div { justify-content: start; gap: 28px; }
  .view .signals { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .view .chart-labels { font-size:calc(var(--text-scale) * 14px); }
  .view .chart { aspect-ratio: 600 / 175; }
  .view .experiment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .view .secret-card { grid-template-columns: 55px minmax(0,1fr); padding: 36px; min-height: 280px; align-items: start; }
  .view .contact-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .view .contact-card:last-child { grid-column: 1 / -1; }
  .view .contact-status { grid-template-columns: 34px minmax(0,1fr) 34px minmax(0,1fr); }
}

@media (min-width: 960px) {
  .view { padding: 38px 44px 60px; }
  .view .section-rail { margin-bottom: 38px; }
  .view.home .hero { padding-top: 100px; }
  .view .metrics { margin-top: 48px; gap: 22px; }
  .view.home .metric { padding: 32px; min-height: 330px; }
  .view .metric > strong { font-size:calc(var(--text-scale) * 70px); }
  .view.profile .profile-intro { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 42px; align-items: center; }
  .view .portrait { width: 100%; max-width: none; }
  .view .timeline { padding: 30px; margin-top: 36px; }
  .view .timeline .panel-heading > .micro { display: block; }
  .view .milestones { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 0; margin-top: 28px; gap: 14px; }
  .view .milestones > div { padding: 20px 0 0; border: 0; border-top: 1px solid #3dcbbe90; }
  .view .milestones > div:last-child { border-top: 1px solid #b77bda90; }
  .view .milestones > div::before { top: -6px; left: 0; }
  .view .capabilities { padding: 28px; }
  .view .capabilities > .panel-heading { margin: 0 0 24px; }
  .view .capabilities > .panel-heading > .micro { display: block; }
  .view .cap-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .view .capability { grid-column: span 2; }
  .view .capability:nth-child(n+4) { grid-column: span 3; }
  .view .shortcut { grid-template-columns: 68px minmax(0,1fr) 180px; gap: 28px; padding: 30px; }
  .view .shortcut > .micro { border-top: 0; border-left: 1px solid #789aaa50; padding: 0 0 0 24px; }
  .view .project-row { grid-template-columns: 30px 58px minmax(0,1.5fr) minmax(0,1fr) 42px 120px 18px; gap: 12px; min-height: 84px; padding: 17px 20px; }
  .view .project-row > :is(strong,.code,.row-name,.sector,.year,.state), .view .project-row > span:last-child { grid-column: auto; grid-row: auto; }
  .view .project-row .row-name > b { font-size:calc(var(--text-scale) * 16px); }
  .view .project-row .row-name > small { font-size:calc(var(--text-scale) * 14px); }
  .view .project-row > .sector { font-size:calc(var(--text-scale) * 12px); }
  .view .project-row > .state { font-size:calc(var(--text-scale) * 12px); }
  .view .project-detail { padding: 30px; }
  .view .project-detail > header { flex-wrap: nowrap; gap: 15px; }
  .view .project-detail > header > div { order: initial; flex-basis: auto; margin: 0 auto 0 0; }
  .view .project-detail > header h3 { font-size:calc(var(--text-scale) * 29px); }
  .view .project-detail > header p { font-size:calc(var(--text-scale) * 14px); }
  .view .project-detail > header button { order: initial; width: 145px; flex-shrink: 0; margin: 0; text-align: center; }
  .view .dossier-intro { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 26px; }
  .view .dossier-intro blockquote { font-size:calc(var(--text-scale) * 19px); }
  .view .process { grid-template-columns: repeat(7,minmax(0,1fr)); gap: 12px; text-align: center; }
  .view .process > div { display: block; }
  .view .process p { font-size:calc(var(--text-scale) * 14px); margin-top: 12px; }
  .view .deliverables { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .view .deliverable { padding: 20px; grid-template-columns: 1fr; align-content: start; }
  .view .deliverable > .micro { grid-column: 1; }
  .view .project-story { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
  .view .story { padding: 22px; }
  .view .story h4 { align-items: start; }
  .view .project-detail > footer { flex-direction: row; align-items: center; }
  .view .scenario, .view .telemetry, .view .story-data { padding: 30px; }
  .view .scenario > header, .view .telemetry > header { flex-wrap: nowrap; }
  .view .scenario-grid { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 24px; align-items: stretch; }
  .view .scenario-image { min-height: 360px; }
  .view .answers > button { flex: 1; }
  .view .scenario-progress { flex-shrink: 0; }
  .view .data-cards { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.15fr); gap: 16px; }
  .view .data-card { padding: 24px; }
  .view .time-card { grid-column: auto; }
  .view .time-card > div { gap: 12px; }
  .view .chart-layout { grid-template-columns: minmax(0,2.3fr) minmax(0,1fr); gap: 24px; align-items: center; }
  .view .progress-panel > header { flex-direction: row; justify-content: space-between; }
  .view .chart { aspect-ratio: 600 / 185; }
  .view .chart-labels { font-size:calc(var(--text-scale) * 13px); }
  .view .chart-layout > aside { padding: 24px; }
  .view .story-data { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 30px; }
  .view .signals { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .view .data-explanation { border-top: 0; border-left: 1px solid #7096a762; padding: 0 0 0 28px; }
  .view .experiment-card { min-height: 360px; padding: 30px; }
  .view .experiment-card .card-number { left: 30px; }
  .view .experiment-card > p:not(.micro) { width: 66%; }
  .view .secret-card { min-height: 260px; padding: 36px; grid-template-columns: 70px minmax(0,1fr); gap: 28px; }
  .view .secret-art { opacity: 1; }
  .view.contact .hero { margin-top: 100px; }
  .view .contact-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
  .view .contact-card, .view .contact-card:last-child { grid-column: auto; padding: 30px; min-height: 310px; }
  .view .contact-status { grid-template-columns: 34px minmax(0,1.1fr) 34px minmax(0,1.1fr) 34px minmax(0,1fr); padding: 26px 30px; gap: 18px; }
  .view .contact-quote { grid-template-columns: 36px minmax(0,1fr) 1px 170px; gap: 26px; margin: 36px 8px 0; }
  .view .contact-quote > i { display: block; height: 60px; margin: 0; }
  .view .contact-quote > .micro:last-child { display: block; font:calc(var(--text-scale) * 12px)/1.7 var(--mono); letter-spacing: 1px; }
}

@media (max-width: 359px) {
  .view { padding-left: 16px; padding-right: 16px; }
  .view h1 { font-size:calc(var(--text-scale) * 35px); }
  .view .metric > strong { font-size:calc(var(--text-scale) * 40px); }
  .view.home .metric { padding: 22px 18px; gap: 10px; }
  .view .scenario, .view .telemetry, .view .story-data, .view .project-detail { padding-left: 14px; padding-right: 14px; }
  .view .data-card { padding: 18px; }
  .view .signals { grid-template-columns: 1fr 1fr; gap: 8px; }
  .view .signals > div { padding: 12px; }
  .view .contact-card { padding: 24px; }
}

/* Restore the reference composition while keeping every panel free to grow. */
.view { padding: 24px clamp(16px, 4vw, 44px) 38px; }
.view .section-rail { margin-bottom: 30px; }
.view .hero, .view .work-hero, .view .experiments-hero { max-width: none; }
.view .hero-description, .view .work-hero > p:last-child, .view .experiments-hero > p { line-height: 1.5; }
.view .hero-description br, .view .profile-text p br, .view .work-hero > p:last-child br,
.view .experiments-hero > p br, .view .shortcut p:not(.micro) br,
.view .contact-lead br, .view .secret-card p:not(.micro) br { display: none; }
.view h1 { font-size:calc(var(--text-scale) * clamp(34px,6.9vw,72px)); line-height: 1.07; letter-spacing: -.9px; }
.view h2 { font-size:calc(var(--text-scale) * clamp(34px,6vw,64px)); }
.view.home .hero { padding-top: 65px; }
.view .metrics { grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(9px,2vw,22px); margin-top: 30px; }
.view.home .metric { height: auto; min-height: 238px; padding: 26px 12px 19px; display: flex; flex-direction: column; align-items: start; gap: 14px; }
.view .metric > svg { width: 30px; height: 30px; margin: 0; }
.view .metric h3 { font:600 calc(var(--text-scale) * 12px)/1.4 var(--display); min-height: 50px; letter-spacing: .3px; }
.view .metric > strong { font-size:calc(var(--text-scale) * clamp(30px,8.4vw,72px)); line-height: 1.05; margin: 0; letter-spacing: -1px; }
.view .segments { width: 100%; margin: 0; gap: 4px; }
.view .segments i { width: 25%; max-width: 36px; height: 5px; }
.view.home .metric > .micro { font:calc(var(--text-scale) * 12px)/1.5 var(--mono); letter-spacing: .2px; margin-top: auto; overflow-wrap: anywhere; }
.view .card-number { top: 8px; right: 12px; font-size:calc(var(--text-scale) * 12px); }
.view .clock-strip, .view .clock-strip.compact { grid-template-columns: 28px minmax(0,1fr) auto; min-height: 86px; padding: 17px; gap: 8px 12px; margin-top: 20px; }
.view .clock-strip > svg { width: 26px; height: 26px; }
.view .clock-strip strong { font-size:calc(var(--text-scale) * 12px); letter-spacing: .5px; }
.view .clock-strip small { font-size:calc(var(--text-scale) * 12px); line-height: 1.4; letter-spacing: .3px; }
.view .clock-strip .local-time { font-size:calc(var(--text-scale) * 28px); border: 0; }
.view .clock-strip .date { grid-column: 2 / -1; display: flex; gap: 4px 12px; flex-wrap: wrap; }

/* Portrait and introduction form one composition, followed by the curved timeline. */
.view.profile .profile-intro { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 16px 20px; }
.view.profile .profile-text { display: contents; }
.view.profile .profile-text h2 { grid-column: 1; grid-row: 1; align-self: end; }
.view.profile .profile-lead { grid-column: 1; grid-row: 2; font:400 calc(var(--text-scale) * 17px)/1.45 var(--display); margin: 0; }
.view.profile .profile-text > p:not(.profile-lead):not(.micro) { grid-column: 1 / -1; font:400 calc(var(--text-scale) * 15px)/1.6 var(--font); }
.view.profile .profile-text .short-rule { grid-column: 1 / -1; margin: 0; }
.view.profile .profile-text > .micro { grid-column: 1 / -1; font-size:calc(var(--text-scale) * 12px); letter-spacing: 1.2px; }
.view .portrait { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 100%; max-width: none; }
.view .timeline { padding: 22px 16px; margin-top: 24px; }
.view .panel-heading h3 { font-size:calc(var(--text-scale) * 16px); letter-spacing: 1.5px; }
.view .timeline-sub { margin-top: 9px; font-size:calc(var(--text-scale) * 12px); letter-spacing: .5px; }
.view .timeline-arc { display: block; position: relative; inset: auto; width: 100%; height: 43px; margin: 22px 0 0; }
.view .milestones { position: relative; inset: auto; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 7px; padding: 0; }
.view .milestones > div, .view .milestones > div:last-child { padding: 0; border: 0; text-align: left; }
.view .milestones > div::before { display: none; }
.view .milestones > div:last-child { text-align: right; }
.view .milestones b { font-size:calc(var(--text-scale) * 15px); }
.view .milestones .micro { font:calc(var(--text-scale) * 12px)/1.45 var(--mono); letter-spacing: 0; overflow-wrap: anywhere; }
.view .capabilities { padding: 22px 12px 12px; margin-top: 16px; }
.view .capabilities > .panel-heading { margin: 0 4px 20px; }
.view .cap-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.view .capability, .view .capability:nth-child(n+4) { grid-column: auto; padding: 20px 13px 14px; grid-template-columns: 26px minmax(0,1fr); gap: 12px 8px; align-content: start; }
.view .capability:last-child { grid-column: 1 / -1; }
.view .capability > svg { width: 27px; height: 29px; }
.view .capability h3 { font-size:calc(var(--text-scale) * 12px); letter-spacing: .4px; }
.view .capability .plus { top: 5px; right: 10px; font-size:calc(var(--text-scale) * 16px); }
.view .tags { gap: 6px; }
.view .tags span { font:calc(var(--text-scale) * 12px)/1.35 var(--font); padding: 5px 7px; max-width: 100%; overflow-wrap: anywhere; }
.view .shortcut { padding: 24px 18px; grid-template-columns: 40px minmax(0,1fr); gap: 16px; }
.view .shortcut > svg { width: 39px; height: 40px; align-self: start; }
.view .shortcut h3 { font-size:calc(var(--text-scale) * 15px); letter-spacing: 1px; margin-bottom: 12px; }
.view .shortcut p:not(.micro) { font:calc(var(--text-scale) * 15px)/1.6 var(--font); }
.view .shortcut > .micro { grid-column: 2; font:calc(var(--text-scale) * 12px)/1.5 var(--mono); padding-top: 14px; letter-spacing: .4px; }

/* Rows remain a project index; dossier details use space according to their content. */
.view .work-caption { margin: 28px 0 14px; gap: 10px; }
.view .work-caption > span { flex: 1; }
.view .work-caption button { padding: 8px 10px; }
.view .project-list { gap: 7px; }
.view .project-row { min-height: 86px; padding: 13px 12px; grid-template-columns: 24px minmax(0,1fr) 44px 16px; gap: 5px 9px; }
.view .project-row > strong { grid-column: 1; grid-row: 1; font-size:calc(var(--text-scale) * 19px); }
.view .project-row > .row-name { grid-column: 2; grid-row: 1; }
.view .project-row .row-name > b { font-size:calc(var(--text-scale) * 15px); line-height: 1.3; }
.view .project-row .row-name > small { font-size:calc(var(--text-scale) * 12px); line-height: 1.4; }
.view .project-row > .year { grid-column: 3; grid-row: 1; font-size:calc(var(--text-scale) * 12px); }
.view .project-row > span:last-child { grid-column: 4; grid-row: 1; font-size:calc(var(--text-scale) * 22px); }
.view .project-row > .code { grid-column: 2; grid-row: 2; font-size:calc(var(--text-scale) * 12px); line-height: 1.4; letter-spacing: .5px; }
.view .project-row > .sector { display: none; }
.view .project-row > .state { grid-column: 2 / 5; grid-row: 3; font-size:calc(var(--text-scale) * 12px); line-height: 1.4; letter-spacing: .3px; }
.view .project-detail { padding: 24px 14px; margin-top: 20px; }
.view .project-detail > header { gap: 9px 12px; }
.view .project-detail > header h3 { font-size:calc(var(--text-scale) * 25px); }
.view .project-detail > header p { font-size:calc(var(--text-scale) * 15px); line-height: 1.5; margin-top: 6px; }
.view .project-detail > header button { min-height: 44px; font-size:calc(var(--text-scale) * 12px); width: auto; padding: 8px 12px; }
.view .dossier-intro { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
.view .project-facts h4 { margin-bottom: 10px; }
.view .project-facts dl > div { font:calc(var(--text-scale) * 15px)/1.5 var(--font); padding: 8px 0; grid-template-columns: 75px minmax(0,1fr); gap: 12px; }
.view .dossier-intro blockquote { grid-column: auto; padding: 18px; font:italic calc(var(--text-scale) * 16px)/1.5 var(--font); }
.view .dossier-intro blockquote br { display: none; }
.view .dossier-intro blockquote .micro { font-size:calc(var(--text-scale) * 12px); letter-spacing: .5px; }
.view .dossier-intro blockquote .short-rule { margin: 12px 0; }
.view .small-heading { margin: 24px 0 14px; letter-spacing: 1px; }
.view .process { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px 8px; text-align: center; }
.view .process > div { display: flex; flex-direction: column; align-items: center; padding: 0; gap: 9px; }
.view .process > div:not(:last-child)::before { display: none; }
.view .process p { font:calc(var(--text-scale) * 12px)/1.45 var(--font); margin: 0; }
.view .step { width: 28px; height: 28px; }
.view .step svg { width: 18px; height: 18px; }
.view .deliverables { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.view .deliverable { padding: 20px 12px; min-height: 145px; grid-template-columns: 28px minmax(0,1fr); gap: 12px 8px; align-content: start; }
.view .deliverable svg { width: 27px; height: 27px; }
.view .deliverable h4 { font:600 calc(var(--text-scale) * 13px)/1.4 var(--font); }
.view .deliverable > .micro { grid-column: 1 / -1; font:calc(var(--text-scale) * 12px)/1.45 var(--mono); letter-spacing: .1px; padding-right: 0; }
.view .deliverable > span { right: 12px; bottom: 7px; font-size:calc(var(--text-scale) * 19px); }
.view .project-story { grid-template-columns: 1fr; gap: 10px; }
.view .story { padding: 20px 16px; }
.view .story h4 { font:600 calc(var(--text-scale) * 15px)/1.5 var(--font); gap: 12px; }
.view .story p { font:calc(var(--text-scale) * 15px)/1.6 var(--font); margin-top: 10px; }
.view .project-detail > footer { gap: 8px; margin-top: 18px; }

/* Measurement preserves the visual hierarchy of scenario, telemetry and interpretation. */
.view .scenario, .view .telemetry, .view .story-data { padding: 24px 14px; }
.view .scenario h2 { font-size:calc(var(--text-scale) * clamp(27px,3.5vw,40px)); line-height: 1.2; margin-top: 14px; }
.view .scenario-lead { font:calc(var(--text-scale) * 15px)/1.5 var(--font); margin-top: 12px; }
.view .scenario-grid { grid-template-columns: 1fr; margin-top: 18px; gap: 14px; }
.view .scenario-image::before { aspect-ratio: 506 / 220; }
.view .scenario-image > div { font:calc(var(--text-scale) * 15px)/1.55 var(--font); padding: 14px; margin: 10px; }
.view .scenario-image > div br { display: none; }
.view .answers { gap: 9px; }
.view .answers > button { min-height: 72px; padding: 13px; gap: 12px; font:calc(var(--text-scale) * 15px)/1.5 var(--font); }
.view .answers > button > span br { display: none; }
.view .answers > button > b { width: 30px; height: 32px; font-size:calc(var(--text-scale) * 17px); }
.view .scenario-progress { font-size:calc(var(--text-scale) * 12px); letter-spacing: .4px; gap: 10px; }
.view .data-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.view .data-card { padding: 18px 12px; }
.view .data-card h3 { font-size:calc(var(--text-scale) * 12px); line-height: 1.5; letter-spacing: .2px; }
.view .registered { grid-column: 1; grid-row: 1; }
.view .registered > div { gap: 10px; flex-wrap: wrap; }
.view .registered > div > svg { width: 32px; height: 32px; padding: 5px; }
.view .registered > strong { font-size:calc(var(--text-scale) * 40px); margin: 14px 0 10px; white-space: nowrap; }
.view .registered > strong small { font-size:calc(var(--text-scale) * 18px); }
.view .registered .micro { font:calc(var(--text-scale) * 12px)/1.5 var(--mono); letter-spacing: 0; }
.view .registered .short-rule, .view .time-card .short-rule { margin: 14px 0 0; }
.view .time-card { grid-column: 2; grid-row: 1; }
.view .time-card h3 { gap: 8px; align-items: start; flex-wrap: wrap; }
.view .time-card h3 svg { width: 25px; height: 25px; }
.view .time-card > div { margin: 14px 0 10px; gap: 8px; }
.view .time-card strong { font-size:calc(var(--text-scale) * 34px); }
.view .time-card > div > span { font:calc(var(--text-scale) * 12px)/1.5 var(--font); padding: 4px 7px; }
.view .time-card > p { font:calc(var(--text-scale) * 13px)/1.5 var(--font); }
.view .time-card button { margin-top: 12px; padding: 8px; font-size:calc(var(--text-scale) * 12px); min-height: 44px; }
.view .distribution { grid-column: 1 / -1; }
.view .bar-row { margin-top: 12px; gap: 12px; }
.view .bar-row > b { width: 26px; height: 28px; font:600 calc(var(--text-scale) * 16px)/28px var(--display); }
.view .distribution > p { margin-top: 16px; gap: 12px; letter-spacing: .3px; }
.view .distribution > p svg { width: 30px; }
.view .progress-panel { margin-top: 12px; padding: 20px 12px; }
.view .progress-panel > header { gap: 8px; margin-bottom: 14px; }
.view .progress-panel > header > .micro { font-size:calc(var(--text-scale) * 12px); letter-spacing: .5px; }
.view .chart-layout { gap: 10px; }
.view .chart-layout > aside { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; padding: 16px; gap: 10px; }
.view .chart-layout > aside > p { font:calc(var(--text-scale) * 15px)/1.5 var(--font); gap: 10px; }
.view .chart-layout > aside > strong { font-size:calc(var(--text-scale) * 34px); margin: 0; }
.view .chart-layout > aside > .micro { grid-column: 1 / -1; margin: 0; font-size:calc(var(--text-scale) * 12px); letter-spacing: .4px; }
.view .demo-feedback { margin-top: 16px; font:calc(var(--text-scale) * 15px)/1.6 var(--font); }
.view .story-data { gap: 22px; }
.view .story-data h2 { font-size:calc(var(--text-scale) * clamp(28px,3.7vw,42px)); margin: 12px 0 20px; }
.view .signals { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.view .signals > div { padding: 14px 10px; }
.view .signals b { font-size:calc(var(--text-scale) * 28px); margin-bottom: 10px; }
.view .signals .micro { font:calc(var(--text-scale) * 12px)/1.4 var(--mono); letter-spacing: 0; }
.view .data-explanation { font:calc(var(--text-scale) * 15px)/1.6 var(--font); padding-top: 20px; }
.view .measure-closing > p:not(.micro) { font-size:calc(var(--text-scale) * clamp(25px,3.5vw,38px)); line-height: 1.25; }

/* Two-by-two experiments and three contact channels echo the reference panels. */
.view .experiments-hero { margin-top: 65px; }
.view .experiments-hero h2 { font-size:calc(var(--text-scale) * clamp(32px,6vw,66px)); letter-spacing: -.8px; }
.view .experiment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 26px; }
.view .experiment-card { min-height: 340px; padding: 22px 14px; }
.view .experiment-card > div.art { height: 100%; aspect-ratio: auto; background-size: auto 650%; mask-image: linear-gradient(#000 65%,transparent); }
.view .experiment-card > div.art::after { background: linear-gradient(180deg,#11212a40,#101e29ad 35%,#0d1b25eb 85%); }
.view .experiment-card .card-number { left: 14px; top: 12px; }
.view .experiment-card > svg { width: 31px; height: 31px; margin: 27px 0 16px; }
.view .experiment-card h3 { max-width: 100%; font-size:calc(var(--text-scale) * 22px); margin-bottom: 10px; }
.view .experiment-card > p:not(.micro) { width: 100%; font:calc(var(--text-scale) * 15px)/1.5 var(--font); }
.view .experiment-card > .micro { width: 100%; padding-right: 22px; margin-top: 20px; font:calc(var(--text-scale) * 12px)/1.5 var(--mono); letter-spacing: .2px; }
.view .experiment-card .open-piece { width: 44px; height: 44px; min-width: 44px; min-height: 44px; right: 7px; bottom: 7px; border: 0; background: #0a182785; font-size:calc(var(--text-scale) * 27px); }
.view .experiment-card.animation .play-piece { width: 44px; height: 44px; top: 16px; right: 10px; font-size:calc(var(--text-scale) * 22px); }
.view .experiment-card .code-art { display: none; }
.view .secret-card { min-height: 245px; padding: 27px 20px; grid-template-columns: 38px minmax(0,1fr); gap: 18px; align-items: start; }
.view .secret-card > svg { width: 36px; height: 47px; }
.view .secret-card h3 { font-size:calc(var(--text-scale) * 25px); margin-bottom: 12px; }
.view .secret-card p:not(.micro) { font:calc(var(--text-scale) * 15px)/1.55 var(--font); }
.view .secret-card button { margin-top: 20px; }
.view .secret-art { min-width: 600px; opacity: .75; }
.view.contact .hero { margin-top: 65px; }
.view.contact h2 { font-size:calc(var(--text-scale) * clamp(49px,8.5vw,90px)); }
.view .contact-lead { font-size:calc(var(--text-scale) * clamp(21px,3vw,31px)); line-height: 1.5; }
.view.contact .hero-description { font-size:calc(var(--text-scale) * 16px); line-height: 1.6; }
.view .contact-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 30px; }
.view .contact-card, .view .contact-card:last-child { grid-column: auto; min-height: 310px; padding: 30px 12px 45px; }
.view .contact-card > svg { width: 32px; height: 34px; margin-bottom: 18px; }
.view .contact-card h3 { font-size:calc(var(--text-scale) * 12px); letter-spacing: .4px; margin-bottom: 12px; }
.view .contact-card > p:not(.micro), .view .contact-card:first-child > p:not(.micro) { font:calc(var(--text-scale) * 15px)/1.5 var(--font); overflow-wrap: anywhere; }
.view .contact-card .short-rule { width: 20px; margin: 18px 0 14px; }
.view .contact-card .micro { font:calc(var(--text-scale) * 12px)/1.5 var(--mono); letter-spacing: 0; padding-right: 0; overflow-wrap: anywhere; }
.view .link-arrow { right: 13px; bottom: 14px; font-size:calc(var(--text-scale) * 25px); }
.view .contact-status { padding: 20px 16px; grid-template-columns: 28px minmax(0,1fr); gap: 16px; }
.view .contact-status strong { font-size:calc(var(--text-scale) * 13px); letter-spacing: .5px; }
.view .contact-status small { font-size:calc(var(--text-scale) * 12px); line-height: 1.5; letter-spacing: .2px; }
.view .contact-status > svg { width: 27px; height: 27px; }
.view .availability-orb { width: 28px; height: 28px; }
.view .contact-quote { margin-top: 28px; }

@media (min-width: 600px) {
  .view .hero, .view .work-hero { margin-left: 7%; margin-right: 4%; }
  .view.home .hero, .view.contact .hero { padding-top: 80px; margin-top: 0; }
  .view .metrics { margin-top: 38px; }
  .view.home .metric { padding: 30px 25px; min-height: 300px; gap: 20px; }
  .view .metric > svg { width: 40px; height: 40px; }
  .view .metric h3 { font-size:calc(var(--text-scale) * 15px); letter-spacing: .8px; min-height: 45px; }
  .view .metric > strong { font-size:calc(var(--text-scale) * clamp(48px,7.6vw,75px)); }
  .view.home .metric > .micro { letter-spacing: 1.3px; }
  .view .clock-strip, .view .clock-strip.compact { grid-template-columns: 32px minmax(0,1fr) minmax(110px,.9fr) minmax(130px,1fr); padding: 22px; gap: 18px; min-height: 85px; }
  .view .clock-strip .date { grid-column: auto; display: block; }
  .view .clock-strip .local-time { font-size:calc(var(--text-scale) * 38px); border-left: 1px solid #819eac59; border-right: 1px solid #819eac59; }
  .view.profile .profile-intro { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); align-items: center; gap: 26px; }
  .view.profile .profile-text { display: block; }
  .view.profile .profile-lead { font-size:calc(var(--text-scale) * clamp(21px,2.7vw,30px)); line-height: 1.35; margin: 16px 0; }
  .view.profile .profile-text > p:not(.profile-lead):not(.micro) { font-size:calc(var(--text-scale) * clamp(16px,1.85vw,21px)); line-height: 1.5; }
  .view.profile .profile-text .short-rule { margin: 18px 0; }
  .view .portrait { grid-row: auto; grid-column: auto; }
  .view .timeline { padding: 25px 26px; }
  .view .timeline .panel-heading > .micro { display: block; }
  .view .milestones { gap: 18px; }
  .view .milestones b { font-size:calc(var(--text-scale) * 17px); }
  .view .milestones .micro { font-size:calc(var(--text-scale) * 12px); letter-spacing: .5px; }
  .view .capabilities { padding: 24px 16px 16px; }
  .view .cap-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
  .view .capability { grid-column: span 2; grid-template-columns: 31px minmax(0,1fr); padding: 22px 15px 17px; gap: 15px 10px; }
  .view .capability:nth-child(n+4) { grid-column: span 3; }
  .view .capability h3 { font-size:calc(var(--text-scale) * 13px); letter-spacing: .5px; }
  .view .tags span { font-size:calc(var(--text-scale) * 13px); }
  .view .shortcut { grid-template-columns: 65px minmax(0,1fr); padding: 25px; }
  .view .shortcut > svg { width: 60px; height: 58px; }
  .view .shortcut > .micro { grid-column: 2; }
  .view .project-row { grid-template-columns: 27px 54px minmax(0,1.6fr) minmax(0,1fr) 42px 16px; gap: 7px 12px; min-height: 80px; padding: 13px 16px; }
  .view .project-row > strong { grid-column: 1; grid-row: 1 / span 2; }
  .view .project-row > .code { grid-column: 2; grid-row: 1 / span 2; }
  .view .project-row > .row-name { grid-column: 3; grid-row: 1 / span 2; }
  .view .project-row > .sector { display: block; grid-column: 4; grid-row: 1; font-size:calc(var(--text-scale) * 12px); }
  .view .project-row > .state { grid-column: 4; grid-row: 2; }
  .view .project-row > .year { grid-column: 5; grid-row: 1 / span 2; }
  .view .project-row > span:last-child { grid-column: 6; grid-row: 1 / span 2; }
  .view .project-detail { padding: 26px 22px; }
  .view .project-detail > header > div { order: 0; flex-basis: auto; flex: 1; min-width: 160px; margin: 0; }
  .view .project-detail > header button { order: initial; width: auto; margin: 0; }
  .view .dossier-intro { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 20px; align-items: start; }
  .view .work-cover { aspect-ratio: 368 / 220; }
  .view .project-facts dl > div { grid-template-columns: 70px minmax(0,1fr); gap: 8px; font-size:calc(var(--text-scale) * 15px); padding: 7px 0; }
  .view .dossier-intro blockquote { grid-column: 1 / -1; }
  .view .process { grid-template-columns: repeat(7,minmax(0,1fr)); gap: 10px; }
  .view .deliverables { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .view .deliverable { display: flex; flex-direction: column; align-items: start; gap: 12px; min-height: 180px; }
  .view .deliverable > .micro { margin-top: auto; }
  .view .project-story { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .view .story { padding: 20px 14px; }
  .view .story h4 { flex-wrap: wrap; gap: 6px 12px; }
  .view .scenario, .view .telemetry, .view .story-data { padding: 26px 20px; }
  .view .scenario-grid { grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); align-items: stretch; gap: 18px; }
  .view .scenario-image { display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; }
  .view .scenario-image::before { aspect-ratio: 506 / 250; }
  .view .scenario-image > div { margin: 10px; padding: 13px; }
  .view .answers > button { flex: 1; gap: 9px; padding: 12px; min-height: 84px; }
  .view .answers > button > b { width: 28px; height: 30px; }
  .view .scenario-progress { flex-wrap: wrap; min-height: 38px; }
  .view .data-cards { grid-template-columns: minmax(0,1fr) minmax(0,1.35fr) minmax(0,1.15fr); gap: 12px; }
  .view .registered, .view .distribution, .view .time-card { grid-column: auto; grid-row: auto; }
  .view .data-card { padding: 20px 14px; }
  .view .data-card h3 { font-size:calc(var(--text-scale) * 13px); }
  .view .time-card > p { font-size:calc(var(--text-scale) * 14px); }
  .view .distribution > p { font-size:calc(var(--text-scale) * 12px); }
  .view .bar-row { gap: 8px; }
  .view .bar-row > span { width: 36px; }
  .view .chart-layout { grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 18px; }
  .view .chart-layout > aside { display: block; padding: 18px; }
  .view .chart-layout > aside > strong { display: block; margin: 14px 0; }
  .view .chart-labels { font-size:calc(var(--text-scale) * 16px); }
  .view .signals { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .view .experiment-card { min-height: 290px; padding: 26px; }
  .view .experiment-card > div.art { background-size: 238.83% auto; }
  .view .experiment-card > div.art::after { background: linear-gradient(90deg,#14222af2,#13222ac7 38%,#12212a08); }
  .view .experiment-card > p:not(.micro) { width: 70%; }
  .view .experiment-card > .micro { width: 70%; letter-spacing: 1px; }
  .view .experiment-card .card-number { left: 26px; top: 18px; }
  .view .experiment-card > svg { width: 36px; height: 36px; margin-bottom: 18px; }
  .view .experiment-card h3 { font-size:calc(var(--text-scale) * 27px); max-width: 85%; }
  .view .experiment-card .code-art { display: block; }
  .view .experiment-card .open-piece { right: 14px; bottom: 14px; }
  .view .secret-card { padding: 30px; grid-template-columns: 60px minmax(0,1fr); }
  .view .secret-card > svg { width: 48px; height: 60px; }
  .view .secret-art { opacity: 1; }
  .view .contact-grid { gap: 18px; }
  .view .contact-card, .view .contact-card:last-child { padding: 30px 24px 46px; min-height: 300px; }
  .view .contact-card > svg { width: 42px; height: 44px; }
  .view .contact-card h3 { font-size:calc(var(--text-scale) * 15px); letter-spacing: .8px; }
  .view .contact-card > p:not(.micro), .view .contact-card:first-child > p:not(.micro) { font-size:calc(var(--text-scale) * 17px); }
  .view .contact-card .micro { font-size:calc(var(--text-scale) * 12px); letter-spacing: 1px; }
  .view .contact-status { grid-template-columns: 28px minmax(0,1fr) 28px minmax(0,1fr); padding: 24px; }
}

@media (min-width: 960px) {
  .view { padding-top: 34px; }
  .view .section-rail { margin-bottom: 34px; }
  .view.home .hero, .view.contact .hero { padding-top: 130px; }
  .view .person-name { font-size:calc(var(--text-scale) * 44px); }
  .view .hero-description { font-size:calc(var(--text-scale) * 24px); }
  .view.home .metric { padding: 32px; min-height: 330px; }
  .view .metric h3 { font-size:calc(var(--text-scale) * 16px); }
  .view .clock-strip, .view .clock-strip.compact { grid-template-columns: 42px minmax(0,1fr) minmax(180px,1.1fr) minmax(170px,1fr) 32px; padding: 25px 32px; }
  .view .clock-strip > svg:last-child { display: block; width: 30px; height: 30px; }
  .view .clock-strip strong { font-size:calc(var(--text-scale) * 14px); }
  .view.profile .profile-intro { margin-top: 20px; gap: 40px; }
  .view .timeline { padding: 26px 34px; }
  .view .timeline-arc { height: 54px; }
  .view .capabilities { padding: 24px 18px 18px; }
  .view .capabilities > .panel-heading > .micro { display: block; }
  .view .capability, .view .capability:nth-child(n+4) { padding: 24px; grid-template-columns: 36px minmax(0,1fr); gap: 14px; }
  .view .capability h3 { font-size:calc(var(--text-scale) * 14px); }
  .view .capability > svg { width: 36px; height: 37px; }
  .view .tags span { font-size:calc(var(--text-scale) * 14px); }
  .view .shortcut { grid-template-columns: 90px minmax(0,1fr) 190px; gap: 24px; padding: 28px; }
  .view .shortcut > svg { width: 80px; height: 70px; }
  .view .shortcut > .micro { grid-column: auto; border-top: 0; border-left: 1px solid #789aaa50; padding: 0 0 0 22px; }
  .view .work-hero { padding-top: 25px; }
  .view .project-row { grid-template-columns: 27px 54px minmax(0,1.65fr) minmax(0,1fr) 42px 113px 72px 16px; gap: 12px; min-height: 65px; }
  .view .project-row > :is(strong,.code,.row-name,.sector,.year,.state,.bars), .view .project-row > span:last-child { grid-column: auto; grid-row: auto; }
  .view .project-row > .bars { display: flex; gap: 3px; }
  .view .project-row .bars i { width: 10px; height: 4px; }
  .view .project-detail { padding: 28px 22px; }
  .view .project-detail > header { gap: 18px; }
  .view .project-detail > header h3 { font-size:calc(var(--text-scale) * 29px); }
  .view .dossier-intro { grid-template-columns: minmax(0,1.4fr) minmax(0,1.2fr) minmax(0,.8fr); }
  .view .dossier-intro blockquote { grid-column: auto; }
  .view .work-cover { aspect-ratio: 368 / 220; min-height: 200px; }
  .view .process { margin-top: 22px; position: relative; }
  .view .process::before { content: ''; display: block; position: absolute; top: 14px; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg,#66fca0 65%,#809ba766 65%); }
  .view .process > div { position: relative; }
  .view .process p { font-size:calc(var(--text-scale) * 13px); }
  .view .deliverable { display: grid; grid-template-columns: 32px minmax(0,1fr); padding: 24px 18px; min-height: 135px; }
  .view .deliverable h4 { font-size:calc(var(--text-scale) * 14px); }
  .view .deliverable > .micro { grid-column: 1 / -1; margin-top: 0; }
  .view .story { padding: 22px; }
  .view .story h4 { flex-wrap: nowrap; align-items: start; }
  .view .project-detail > footer { flex-direction: row; align-items: center; }
  .view .scenario, .view .telemetry, .view .story-data { padding: 28px 24px; }
  .view .scenario > header, .view .telemetry > header { flex-wrap: nowrap; }
  .view .scenario-grid { grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 20px; }
  .view .scenario-image { min-height: 310px; }
  .view .scenario-image::before { aspect-ratio: 506 / 184; }
  .view .answers > button { min-height: 80px; padding: 16px; font-size:calc(var(--text-scale) * 16px); }
  .view .registered > div, .view .time-card h3 { flex-wrap: nowrap; }
  .view .data-card { padding: 22px 20px; }
  .view .data-card h3 { font-size:calc(var(--text-scale) * 14px); }
  .view .registered > strong { font-size:calc(var(--text-scale) * 60px); }
  .view .registered > strong small { font-size:calc(var(--text-scale) * 24px); }
  .view .time-card strong { font-size:calc(var(--text-scale) * 42px); }
  .view .time-card > p { font-size:calc(var(--text-scale) * 15px); }
  .view .progress-panel > header { flex-direction: row; align-items: center; }
  .view .chart-layout { grid-template-columns: minmax(0,2.5fr) minmax(0,1fr); }
  .view .story-data { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 24px; }
  .view .signals { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .view .signals > div { padding: 14px 9px; }
  .view .signals .micro { font-size:calc(var(--text-scale) * 12px); line-height: 1.45; }
  .view .data-explanation { border-top: 0; border-left: 1px solid #7096a762; padding: 0 0 0 24px; }
  .view .experiments-hero { margin: 120px 3% 0; }
  .view .experiment-card { min-height: 295px; padding: 28px; }
  .view .experiment-card > p:not(.micro) { width: 60%; }
  .view .experiment-card > .micro { width: 65%; }
  .view .experiment-card .code-art { font-size:calc(var(--text-scale) * 11px); }
  .view .secret-card { grid-template-columns: 70px minmax(0,1fr) 145px; padding: 32px; gap: 28px; }
  .view .secret-card > .micro { display: block; font-size:calc(var(--text-scale) * 12px); letter-spacing: 1.5px; }
  .view .contact-card, .view .contact-card:last-child { padding: 36px 30px 45px; }
  .view .contact-status { grid-template-columns: 32px minmax(0,1.1fr) 30px minmax(0,1.1fr) 30px minmax(0,1fr); gap: 18px; padding: 25px 28px; }
  .view .contact-status > p:nth-child(2), .view .contact-status > p:nth-child(4) { border-right: 1px solid #8ca1ac5c; padding-right: 15px; }
  .view .contact-quote { grid-template-columns: 38px minmax(0,1fr) 1px 190px; gap: 26px; }
  .view .contact-quote > i, .view .contact-quote > .micro:last-child { display: block; }
}

@media (max-width: 359px) {
  .view { padding-left: 14px; padding-right: 14px; }
  .view h1 { font-size:calc(var(--text-scale) * 32px); }
  .view.home .metric { padding: 25px 9px 18px; gap: 12px; }
  .view .metric > strong { font-size:calc(var(--text-scale) * 29px); }
  .view .metric h3 { font-size:calc(var(--text-scale) * 12px); letter-spacing: 0; }
  .view.profile .profile-intro { column-gap: 13px; }
  .view.profile .profile-lead { font-size:calc(var(--text-scale) * 16px); }
  .view .timeline { padding-left: 12px; padding-right: 12px; }
  .view .milestones { gap: 6px; }
  .view .capability, .view .capability:nth-child(n+4) { padding: 22px 11px 14px; grid-template-columns: 1fr; }
  .view .tags { grid-column: auto; }
  .view .capability:last-child { grid-template-columns: 26px minmax(0,1fr); }
  .view .capability:last-child .tags { grid-column: 1 / -1; }
  .view .contact-grid { gap: 8px; }
  .view .contact-card, .view .contact-card:last-child { padding: 30px 9px 42px; }
  .view .contact-card h3 { font-size:calc(var(--text-scale) * 12px); letter-spacing: 0; }
  .view .experiment-card { min-height: 375px; padding: 22px 12px 44px; }
  .view .experiment-card > .micro { padding-right: 0; }
  .view .signals { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .view .data-card { padding-left: 11px; padding-right: 11px; }
  .view .registered > strong { font-size:calc(var(--text-scale) * 36px); }
}