/* The same illustrated shoreline, followed through four chapters. */
:root { color-scheme: light; }
html { background:#f0eee3; overflow:clip; }
body { overflow:clip; }
.sr-only { top:0; left:0; margin:0; }
body:not([data-chapter="intro"]) #motion-surface { opacity:0; }
body:not([data-chapter="intro"]) .vignette { background:transparent; }
.story-spread { min-height:100%; width:min(1560px,100%); margin:auto; padding:28px 6.5% 40px; display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:5%; }
.story-copy { max-width:510px; min-width:0; }
.story-copy .display-title { font-size:clamp(38px,3.8vw,58px); margin:18px 0 24px; line-height:1.13; }
.story-lead { color:var(--ink); font-size:15px; line-height:1.85; margin:0 0 18px; }
.story-note { color:var(--muted); font-size:12px; line-height:1.9; margin:0 0 26px; }
.story-actions { display:flex; flex-direction:column; align-items:flex-start; gap:15px; margin-top:28px; }
.story-next { display:inline-flex; align-items:center; gap:34px; padding:10px 0; font-size:10px; letter-spacing:.6px; border-bottom:1px solid var(--line); text-align:left; }
.story-next span { color:var(--accent); font-size:24px; line-height:1; transition:translate .3s; }
.story-next:hover span { translate:4px -3px; }
.quiet-link { color:var(--muted); font-size:10px; padding:6px 0; border-bottom:1px solid transparent; }
.quiet-link:hover { border-color:var(--line); color:var(--accent); }
.chapter-art { margin:0; min-width:0; width:100%; }
.chapter-art svg { display:block; width:100%; height:auto; overflow:visible; }
.chapter-art figcaption { display:flex; align-items:center; justify-content:center; gap:12px; color:var(--muted); font-size:7px; letter-spacing:1.8px; margin:8px 0 0; }
.chapter-art figcaption span { width:30px; height:1px; background:#c98564; }
.story-reverse { grid-template-columns:1fr 1.18fr; padding-left:9%; gap:3%; }
.story-reverse .chapter-art { grid-column:2; grid-row:1; }
.story-reverse .story-copy { grid-column:1; grid-row:1; }
.growth-spread { gap:4%; }
.growth-spread .display-title { font-size:clamp(36px,3.4vw,49px); margin:12px 0 17px; }
.growth-intro { font-size:13px; line-height:1.75; margin-bottom:18px; }
.milestone-instruction { color:var(--muted); font-size:10px; margin:0 0 10px; }
.career-tabs { display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:20px; overflow-x:auto; scrollbar-width:thin; }
.career-tabs button { position:relative; flex:1; min-width:60px; padding:12px 7px 14px; font-size:12px; font-weight:400; color:var(--muted); border-bottom:2px solid transparent; }
.career-tabs button[aria-selected="true"] { color:var(--accent); border-color:var(--accent); }
.career-tabs button:hover { color:var(--ink); }
.career-tabs button:focus-visible { outline-offset:-4px; }
.career-panel { min-height:228px; }
.career-panel .eyebrow { font-size:7px; letter-spacing:1.6px; }
.career-panel h3 { font:400 27px/1.2 Georgia,'Times New Roman',serif; letter-spacing:-.5px; white-space:pre-line; margin:10px 0 13px; }
.career-panel p { font-size:12px; line-height:1.8; color:var(--muted); margin:0 0 12px; }
.career-panel .milestone-note { font-size:9px; line-height:1.65; color:var(--ink); }
.career-beacon { opacity:.45; transition:opacity .6s; }
.career-beacon.is-current { opacity:1; }
.career-beacon.is-current .beacon-light { animation:chapter-glow 3s ease-in-out infinite; }
.ai-selection { display:flex; gap:16px; align-items:center; border-top:1px solid var(--line); padding-top:19px; margin:23px 0 17px; }
.ai-selection p { font-size:12px; line-height:1.65; color:#3d696b; max-width:320px; margin:0; }
.selection-mark { color:#995f4b; font-size:39px; line-height:1; font-weight:300; }
.story-copy .contact-link { font-size:clamp(14px,1.5vw,19px); gap:20px; overflow-wrap:anywhere; }
/* Individual transform properties preserve each SVG group's drawn transform. */
.chapter-art .drift-cloud { animation:chapter-cloud 15s ease-in-out infinite alternate; }
.chapter-art .ripple { animation:chapter-ripple 6s ease-in-out infinite alternate; }
.chapter-art .ripple:nth-child(even) { animation-delay:-3s; animation-duration:8s; }
.chapter-art .sway { transform-box:fill-box; transform-origin:center bottom; animation:chapter-sway 5s ease-in-out infinite alternate; }
.chapter-art .sway:nth-child(even) { animation-delay:-2s; animation-duration:6.5s; }
.chapter-art .boat-drift { animation:chapter-boat 7s ease-in-out infinite alternate; }
.chapter-art .signal-pulse { animation:chapter-glow 5s ease-in-out infinite; }
.chapter[hidden] .chapter-art *, body.motion-paused .chapter-art *, body.page-hidden .chapter-art * { animation-play-state:paused !important; }
@keyframes chapter-cloud { from { translate:-4px 0; } to { translate:5px 0; } }
@keyframes chapter-ripple { from { translate:-3px 0; opacity:.7; } to { translate:4px 1px; opacity:1; } }
@keyframes chapter-sway { from { rotate:-1deg; } to { rotate:1.4deg; } }
@keyframes chapter-boat { from { translate:0 -2px; rotate:-.35deg; } to { translate:2px 2px; rotate:.35deg; } }
@keyframes chapter-glow { 0%,100% { opacity:.6; } 50% { opacity:1; } }
/* The index, résumé and editor belong to the same light visual world. */
dialog { --ink:#263f43; --muted:#536967; --accent:#995f4b; --line:#263f4333; color:var(--ink); color-scheme:light; background:#f3efe4; border-color:var(--line); box-shadow:0 24px 100px #163e4829; }
dialog::backdrop { background:#234c5545; backdrop-filter:blur(8px); }
dialog .field-grid input, dialog .field-grid textarea { color:var(--ink); background:#fcfaf3; border-color:#729396; }
dialog .underlined-button { border-color:var(--line); }
dialog .solid-button { background:#3d696b; color:#fff9eb; }
dialog .solid-button:hover { background:#163e48; }
.index-dialog { background:#f0eee3; }
.index-links .index-title { font-size:clamp(25px,3.4vw,46px); }
.index-links .index-number, .index-links .index-arrow { color:var(--accent); }
.index-links button i { color:var(--muted); }
.index-footer .underlined-button { font-size:10px; }
@media (min-width:1600px) { .story-lead { font-size:17px; }.story-note { font-size:14px; }.growth-intro { font-size:15px; }.career-panel p { font-size:14px; }.career-panel { min-height:255px; } }
@media (max-width:1050px) and (min-width:761px) { .story-spread { gap:2%; padding-left:4%; padding-right:6%; grid-template-columns:1fr 1fr; }.story-reverse { padding-left:7%; padding-right:3%; }.story-copy .display-title { font-size:36px; }.story-lead { font-size:13px; }.story-note { font-size:11px; }.career-panel { min-height:250px; } }
@media (max-width:760px) {
  .story-spread,.story-reverse { display:flex; flex-direction:column; align-items:stretch; padding:25px 7% 34px; gap:20px; }
  .story-copy { display:contents; }
  .story-copy > * { order:2; }
  .story-copy > .eyebrow, .story-copy > .display-title { order:0; }
  .chapter-art { max-width:440px; width:100%; margin:-8px auto 0; order:1; }
  .story-copy .display-title { font-size:clamp(36px,6.4vw,44px); margin:-7px 0 0; }
  .story-lead { font-size:14px; line-height:1.8; margin:0; }
  .story-note { font-size:12px; margin:0; }
  .story-actions { gap:10px; margin-top:0; }
  .chapter-art figcaption { margin-top:-6px; font-size:6px; }
  .growth-spread { gap:13px; }
  .growth-spread .story-copy { display:contents; }
  .growth-spread .story-copy > * { order:0; margin-left:0; margin-right:0; }
  .growth-spread .display-title { margin:0; }
  .growth-spread .growth-intro { margin:0; }
  .growth-spread .chapter-art { order:1; max-width:390px; margin:-10px auto -4px; }
  .growth-spread .chapter-art svg { height:220px; }
  .growth-spread .chapter-art figcaption { display:none; }
  .growth-spread .milestone-instruction { order:2; margin:0; }
  .growth-spread .career-tabs { order:3; margin:0 0 5px; }
  .growth-spread .career-panel { order:4; min-height:0; }
  .growth-spread .story-next { order:5; align-self:flex-start; }
  .career-panel h3 { font-size:28px; }
  .career-panel p { font-size:13px; }
  .career-panel .milestone-note { font-size:10px; }
  .ai-selection { margin:22px 0 17px; }
  .story-reverse .chapter-art { margin-top:-6px; }
  .index-links .index-title { font-size:clamp(22px,5vw,32px); }
  .index-links button { gap:5px; }
  .index-links .index-number { flex-shrink:0; width:25px; }
  .index-links .index-arrow { margin-left:auto; }
}
@media (max-height:740px) and (min-width:1060px) { .story-spread { padding-top:12px; padding-bottom:20px; }.chapter-art { max-width:590px; }.story-copy .display-title { font-size:39px; margin:12px 0 18px; }.story-lead { font-size:13px; }.growth-intro { font-size:12px; }.career-panel { min-height:225px; }.career-panel h3 { font-size:24px; }.career-tabs { margin-bottom:15px; } }
@media (prefers-reduced-motion:reduce) { .chapter-art * { animation:none !important; } }
@media print { html,body { overflow:visible; } #resume-dialog { --ink:#111; --muted:#333; --accent:#111; --line:#ccc; background:white; color:#111; box-shadow:none; } }