/* Port of Matt's approved Claude home prototype; static HTML, shared across routes. */
* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.55 var(--font-judgment); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,p,figure,dl,dd { margin: 0; }
h1,h2,h3,h4 { font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: clamp(3rem,6vw,4.5rem); }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
p { max-width: 66ch; text-wrap: pretty; }
p + p { margin-top: 1.15em; }
img,svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .15em; transition: opacity 180ms; }
a:hover { opacity: .7; }
a[href^="https://"]::after { content: ''; display: inline-block; width: 5px; height: 5px; border: 1px solid currentColor; vertical-align: super; margin-left: 5px; }
a:focus-visible,button:focus-visible,summary:focus-visible,audio:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
button,.button { display: inline-block; color: inherit; font: inherit; font-size: 1.0625rem; background: transparent; border: 1px solid currentColor; border-radius: 0; padding: .625rem 1.25rem; min-height: 44px; text-decoration: none; cursor: pointer; transition: opacity 180ms; }
button:hover,.button:hover { opacity: .7; }
[hidden] { display: none !important; }
.instrument,code,time { font-family: var(--font-instrument); font-size: .92em; font-weight: 400; font-variant-numeric: tabular-nums; }
code { overflow-wrap: anywhere; }
::selection { background: var(--ink); color: var(--paper); }
.page-shell,.nav,.footer,.wrap { width: min(1184px,calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.symbol-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.mark { width: 32px; height: 32px; color: var(--chart-blue); flex: 0 0 auto; }
.nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; padding-block: 26px 22px; border-bottom: 1px dashed var(--decorative-divider); }
.wordmark { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; letter-spacing: -.005em; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 17px; }
nav a { display: inline-flex; align-items: center; min-height: 32px; text-decoration-color: transparent; }
nav a[aria-current],nav a:hover,nav a:focus-visible { text-decoration-color: currentColor; }
.skip { position: absolute; top: -8rem; left: var(--gutter); z-index: 20; padding: .75rem; background: var(--paper); color: var(--ink); }
.skip:focus { top: 1rem; }
.reading-progress { position: fixed; inset: 0 0 auto; height: 4px; background: var(--paper); z-index: 10; pointer-events: none; }
.progress-fill { height: 100%; background: var(--chart-blue); transform: scaleX(0); transform-origin: left; }
.progress-tick { position: absolute; top: 4px; left: 0; padding: 0 .25rem; background: var(--paper); font-size: 11px; visibility: hidden; }
.reading-progress.has-progress .progress-tick { visibility: visible; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: center; gap: 40px; padding: 72px 0 80px; min-height: 712px; }
.hero-copy { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(3.375rem,8vw,6.75rem); line-height: 1.02; letter-spacing: -.02em; font-variation-settings: 'opsz' 72; margin-bottom: 32px; }
.hero-intro { font-size: 22px; line-height: 1.5; max-width: 34em; }
.hero-chart { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; justify-self: end; background: var(--chart-surface); }
a.hero-chart::after { display: none; }
a.hero-chart:hover { opacity: 1; }
.sector-sweep { width: 100%; height: 100%; display: block; overflow: visible; }
.chart-grid-line { fill: none; stroke: var(--chart-blue); stroke-opacity: .2; stroke-width: .35; }
.search-circle { fill: none; stroke: var(--chart-brass); stroke-opacity: .7; stroke-width: .4; stroke-dasharray: 1 2; }
.search-leg { fill: none; stroke: var(--chart-blue); stroke-width: 1.4; stroke-linecap: round; }
.true-datum { fill: none; stroke: var(--ink); stroke-opacity: .5; stroke-width: .25; stroke-dasharray: .6 .6; }
.search-datum { fill: var(--datum); }
.motion-control { font-size: 15px; padding: 6px 14px; border-color: var(--chart-blue); }
.hero > .motion-control { position: absolute; bottom: 100px; right: 0; background: var(--paper); }
.section { padding-block: 72px; border-top: 1px dashed var(--decorative-divider); }
.margin-grid { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 16px 40px; align-items: start; }
.margin-note { color: var(--chart-blue); font-size: 14px; line-height: 1.6; padding-top: 8px; }
.margin-note h2 { font: inherit; margin: 0 0 .5rem; }
.margin-note p { font-size: inherit; }
.chart-panel { min-width: 0; border: 1px solid var(--decorative-divider); padding: 36px; }
.experiment-panel { background: var(--chart-surface); }
.terrasol-home .chart-panel { background: var(--brass-surface); border-color: var(--brass); }
.terrasol-home .margin-note { color: var(--chart-brass); }
.chart-panel h2 { font-size: 32px; line-height: 1.15; margin-bottom: 18px; }
.project-intro { margin-bottom: 28px; }
.research-observation { border-top: 1px dashed var(--decorative-divider); padding-top: 24px; }
.assessment-example { border-top: 1px dashed var(--brass); padding-top: 24px; }
.eyebrow { display: block; font-size: 16px; margin-bottom: 12px; }
.research-observation > p { font-size: 22px; line-height: 1.5; }
.research-observation .observation-limit { font-size: 16px; line-height: 1.55; margin-top: 22px; }
.project-links,.writing-links,.social-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.project-panel .project-links { margin-top: 28px; font-size: 17px; }
.assessment-preview { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(180px,1fr); gap: 32px; align-items: center; }
.parcel-preview img { width: 100%; }
.parcel-preview a { display: block; }
.parcel-aside > div + div { margin-top: 22px; }
.parcel-aside dt { font-size: 15px; line-height: 1.4; margin-bottom: 5px; }
.parcel-aside dd { font-size: 19px; }
.parcel-aside > div:first-child dd { font-size: 25px; }
.writing > h2 { margin-bottom: 24px; }
.writing-intro { max-width: 66ch; margin-bottom: 48px; }
.essay-thread + .essay-thread { margin-top: 56px; }
.essay-thread h3 { margin-bottom: 8px; }
.thread-description { margin-bottom: 28px; }
.thread-essays { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
.essay { min-width: 0; }
.argument-figure { aspect-ratio: 240 / 130; border: 1px solid var(--decorative-divider); background: var(--chart-surface); }
.essay-3 .reveal-once [data-anim="fade"] { animation-duration: .8s; animation-delay: var(--artifact-delay,0s); }
.argument-diagram { display: block; width: 100%; height: 100%; overflow: hidden; }
.diagram-link { display: block; }
.diagram-link::after { display: none !important; }
.essay h4 { font-size: 20px; font-style: italic; line-height: 1.3; margin-top: 14px; letter-spacing: 0; }
.essay h4 a { text-decoration: none; }
.essay h4 a:hover { text-decoration: underline; }
.essay-credit { font-size: 13px; margin-top: 7px; line-height: 1.5; }
.essay-credit a { text-decoration-thickness: .5px; }
.writing-links { margin-top: 48px; }
.about h2 { margin-bottom: 24px; }
.about-body { max-width: 66ch; }
.career { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; list-style: none; margin: 56px 0 0; padding: 0; position: relative; }
.career::before { content: ''; position: absolute; top: 9px; left: 0; right: 0; border-top: 1px solid var(--brass); }
.career li { position: relative; padding-top: 32px; min-width: 0; }
.career li::before { content: ''; position: absolute; top: 6px; left: 0; width: 6px; height: 6px; background: var(--chart-blue); }
.career li > span { display: block; font-size: 17px; line-height: 1.35; margin-bottom: 6px; }
.career li p { font-size: 15px; line-height: 1.4; }
.contact { padding-bottom: 88px; }
.contact > p,.contact-copy > p { font-size: 22px; line-height: 1.45; max-width: 34em; }
.contact .button { margin-top: 28px; }
.footer { border-top: 1px dashed var(--decorative-divider); padding-block: 28px 64px; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; }
.footer-main { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.footer-main > a { overflow-wrap: anywhere; }
.footer .mark { width: 28px; height: 28px; }
.social-links { gap: 20px; font-size: 16px; }
.build-stamp { font-size: 13px; }
.build-stamp time,.build-stamp .instrument { margin-left: .4em; }
/* Interior pages inherit the prototype's reading column and margin. */
.detail-wrap { width: min(760px,calc(100% - var(--gutter) * 2 - 220px)); margin-left: calc(max(var(--gutter),(100% - 1184px) / 2) + 220px); }
.detail-opening { padding-block: 72px 48px; }
.detail-opening h1 { color: var(--chart-blue); font-size: clamp(3rem,4vw,3.75rem); }
.detail-opening p { font-size: 22px; line-height: 1.5; margin-top: 24px; }
.section-note { display: block; color: var(--chart-blue); font-size: 1rem; margin-bottom: .9rem; }
.detail-page .contact { padding-block: 48px 64px; margin-top: 32px; }
.detail-page .contact h2 { margin-bottom: 20px; }
/* Existing selections and the empty Log remain available without made-up entries. */
.lately { padding-block: 48px; }
.selection { margin-top: 28px; }
.selection-grid { display: block; }
.log-page main { min-height: 66vh; }
.log-content { width: min(1184px,calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.log-empty { max-width: 760px; margin: 0 0 40px 220px; padding: 32px; background: var(--chart-surface); border-left: 3px solid var(--brass); }
.log-entry { display: grid; grid-template-columns: 180px minmax(0,760px); gap: 40px; padding-block: 28px; border-top: 1px dashed var(--decorative-divider); }
.log-entry > time { grid-column: 1; grid-row: 1; color: var(--chart-blue); font-size: 13px; padding-top: 5px; }
.log-entry > div { grid-column: 2; }
.log-entry h2 { font-size: 24px; margin-bottom: 14px; }
.log-entry audio { display: block; width: 100%; max-width: 360px; margin-block: 16px; }
.log-entry .log-music { border-top: 1px dashed var(--brass); padding-top: 18px; margin-top: 24px; font-size: 16px; }
.log-music a { color: var(--chart-blue); }
.log-subscribe { margin-bottom: 64px; }
.log-excerpt h2 { margin-bottom: 24px; }
.log-all { display: inline-block; margin-left: 220px; }
.log-excerpt-entry { display: grid; grid-template-columns: 180px 1fr; gap: 40px; margin-bottom: 20px; }
.log-excerpt-entry time { grid-column: 1; grid-row: 1; font-size: 13px; }
.log-excerpt-entry p { grid-column: 2; grid-row: 1; }
/* Each supplied argument drawing reveals once, then keeps its final frame. */
.argument-diagram [data-anim="fadeout"],.argument-diagram [data-anim="exit"] { opacity: 0; }
.will-reveal [data-anim="draw"] { clip-path: inset(0 100% 0 0); }
.will-reveal [data-anim="fade"] { opacity: 0; }
.will-reveal [data-anim="outward"] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal-once [data-anim="draw"] { animation: diagram-line 1.4s ease-out both; }
.reveal-once [data-anim="outward"] { stroke-dasharray: 1; animation: graph-outward 1.2s ease-out both; }
.essay-6 .reveal-once [data-anim="fade"] { animation-delay: .75s; animation-duration: .45s; }
.reveal-once [data-anim="fade"] { animation: diagram-fill 1.1s ease-out both; }
.reveal-once [data-anim="fadeout"] { animation: diagram-resolve 1.4s ease-out both; }
.reveal-once [data-anim="exit"] { animation: process-exit 1.4s ease-in both; }
@keyframes diagram-line { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes graph-outward { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes diagram-fill { from { opacity: 0; } to { opacity: 1; } }
@keyframes diagram-resolve { from { opacity: .45; } to { opacity: 0; } }
@keyframes process-exit { from { transform: translateX(0); opacity: 1; } to { transform: translateX(160px); opacity: 0; } }
.motion-ready .search-leg { stroke-dasharray: 1; animation: var(--leg-cycle) 48s linear infinite; animation-play-state: paused; }
.motion-ready .search-datum { animation: datum-drift 48s ease-in-out infinite; animation-play-state: paused; }
.is-running .search-leg,.is-running .search-datum { animation-play-state: running; }
@keyframes datum-drift { 0%,88%,100% { transform: translate(0); } 94% { transform: translate(var(--datum-shift,.1px),var(--datum-shift,.1px)); } }
@media(max-width:1000px) {
 .margin-grid { grid-template-columns: 140px minmax(0,1fr); gap: 24px; }
 .hero { min-height: 560px; gap: 28px; }
 .hero h1 { font-size: clamp(3.375rem,7.5vw,6rem); }
 .assessment-preview { grid-template-columns: 1fr; }
 .parcel-aside { display: flex; flex-wrap: wrap; gap: 20px 28px; }
 .parcel-aside > div + div { margin-top: 0; }
 .parcel-aside > div:first-child dd { font-size: 19px; }
 .chart-panel { padding: 28px; }
 .detail-wrap { width: min(760px,calc(100% - var(--gutter) * 2)); margin-inline: auto; }
 .log-content { width: min(760px,calc(100% - var(--gutter) * 2)); }
 .log-empty { margin-left: 0; }
 .log-entry { display: flex; flex-direction: column; gap: 10px; }
 .log-entry > time { order: -1; }
}
@media(max-width:760px) {
 :root { --gutter: 24px; }
 .nav { gap: 14px; padding-top: 20px; }
 nav { width: 100%; gap: 6px 18px; font-size: 16px; }
 .hero { grid-template-columns: minmax(0,1fr); gap: 0; min-height: 0; padding-block: 48px; }
 .hero-copy { z-index: 1; }
 .hero h1 { font-size: clamp(3rem,11vw,5rem); margin-bottom: 24px; }
 .hero-intro { font-size: 20px; }
 .hero-chart { grid-area: 2 / 1; width: 100%; max-width: 520px; margin-top: 32px; justify-self: center; }
 .hero > .motion-control { position: relative; grid-area: 2 / 1; align-self: end; justify-self: end; bottom: auto; right: auto; margin-right: max(0px,calc((100% - 520px) / 2)); }
 .margin-grid { display: block; }
 .margin-note { padding: 0; margin-bottom: 20px; }
 .margin-note br { display: none; }
 .margin-note h2 { font-size: 18px; }
 .section { padding-block: 44px; }
 .chart-panel { padding: 24px; }
 .chart-panel h2 { font-size: 28px; }
 .research-observation > p { font-size: 20px; }
 .research-observation .observation-limit { font-size: 15px; }
 .parcel-aside { display: block; }
 .parcel-aside > div { display: flex; justify-content: space-between; gap: 16px; }
 .parcel-aside > div + div { margin-top: 16px; }
 .parcel-aside dt { max-width: 18ch; }
 .parcel-aside dd,.parcel-aside > div:first-child dd { font-size: 16px; white-space: nowrap; }
 .thread-essays { grid-template-columns: 1fr; gap: 32px; }
 .essay-thread + .essay-thread { margin-top: 44px; }
 .essay-thread .margin-note { display: none; }
 .writing-intro { margin-bottom: 32px; }
 .career { display: block; margin-top: 36px; padding-left: 22px; }
 .career::before { top: 8px; bottom: 20px; left: 0; right: auto; border-top: 0; border-left: 1px solid var(--brass); }
 .career li { padding: 0 0 24px; }
 .career li:last-child { padding-bottom: 0; }
 .career li::before { left: -24.5px; top: 7px; }
 .footer { padding-bottom: 36px; }
 .footer-grid,.footer-main { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
 .footer-main .mark { display: none; }
 .footer-main > a { font-size: 16px; }
 .contact > p,.contact-copy > p { font-size: 20px; }
 .detail-opening { padding-block: 44px 36px; }
 .detail-opening h1 { font-size: 48px; }
 .detail-opening p { font-size: 20px; }
 .log-empty { margin-left: 0; }
 .log-excerpt-entry { display: flex; flex-direction: column; gap: 8px; }
 .log-all { margin-left: 0; }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation: none !important; transition: none !important; }
 .motion-control { display: none !important; }
 .search-leg { stroke-dashoffset: 0 !important; }
 .argument-diagram [data-anim="draw"] { clip-path: none !important; }
 .argument-diagram [data-anim="outward"] { stroke-dashoffset: 0 !important; }
 .argument-diagram [data-anim="fade"] { opacity: 1 !important; }
 .argument-diagram [data-anim="fadeout"],.argument-diagram [data-anim="exit"] { opacity: 0 !important; }
}

.leg-1 { --leg-cycle: search-leg-1; }
@keyframes search-leg-1 { 0% { stroke-dashoffset: 1; } 3.33%, 99.99% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }

.leg-2 { --leg-cycle: search-leg-2; }
@keyframes search-leg-2 { 0%, 12.50% { stroke-dashoffset: 1; } 15.83%, 99.99% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }

.leg-3 { --leg-cycle: search-leg-3; }
@keyframes search-leg-3 { 0%, 25.00% { stroke-dashoffset: 1; } 28.33%, 99.99% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }

.leg-4 { --leg-cycle: search-leg-4; }
@keyframes search-leg-4 { 0%, 37.50% { stroke-dashoffset: 1; } 40.83%, 99.99% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }

.leg-5 { --leg-cycle: search-leg-5; }
@keyframes search-leg-5 { 0%, 50.00% { stroke-dashoffset: 1; } 53.33%, 99.99% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }

.leg-6 { --leg-cycle: search-leg-6; }
@keyframes search-leg-6 { 0%, 62.50% { stroke-dashoffset: 1; } 65.83%, 99.99% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }

.leg-7 { --leg-cycle: search-leg-7; }
@keyframes search-leg-7 { 0%, 75.00% { stroke-dashoffset: 1; } 78.33%, 99.99% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }