/* An illustrated Great Lakes story. Artwork lives in the HyperFrames stage. */
body { --ink:#263f43; --muted:#536967; --accent:#995f4b; --line:#263f4333; color:var(--ink); background:#f0eee3; }
#motion-surface { background:#f0eee3 url("./assets/shore-illustration.svg") center/cover no-repeat; filter:none; }
#motion-surface[data-chapter] { filter:none; }
#atmosphere { opacity:1; }
.vignette { background:transparent; transition:background .85s; }
body[data-chapter="about"] .vignette, body[data-chapter="experience"] .vignette, body[data-chapter="work"] .vignette { background:#f3efe4f0; }
body[data-chapter="contact"] .vignette { background:#f0eee34d; }
.grain { opacity:.018; }
.masthead { height:92px; padding:0 5%; }
.wordmark { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:27px; letter-spacing:-1.2px; }
.masthead-note { font-size:8px; letter-spacing:2.7px; }
.header-actions { gap:32px; }.text-button { font-size:11px; }
.chapter { inset:92px 0 76px; }
.intro-content { justify-content:flex-start; align-items:flex-start; padding:42px 10% 170px; text-align:left; }
.chapter-kicker { font-size:8px; letter-spacing:2.5px; margin-bottom:23px; gap:12px; }
.chapter-kicker .tiny-line:first-child { display:none; }.tiny-line { background:var(--accent); }
.hero-title { font-family:Georgia,'Times New Roman',serif; font-size:clamp(46px,5.8vw,82px); line-height:1.06; letter-spacing:-.04em; font-weight:400; text-transform:none; margin:0; width:auto; text-shadow:none; }
.title-band { overflow:clip; padding:0 .06em .09em 0; }
.title-band:nth-child(2) { color:#3d696b; }
.title-band:first-child::after { display:none; }
.chapter.is-active .title-band { animation:story-reveal 1.3s var(--ease) both; }.chapter.is-active .title-band:nth-child(2) { animation-delay:.14s; }
.intro-description { color:var(--muted); max-width:345px; font-size:13px; line-height:1.8; margin:20px 0 22px; text-shadow:none; }
.intro-actions { display:flex; align-items:center; }
.intro-actions .journey-button { padding:0 0 9px; border-bottom:1px solid var(--ink); font-size:8px; letter-spacing:2px; gap:34px; }
.journey-button > span:last-child { color:var(--accent); font-size:24px; line-height:1; transition:transform .3s; }.journey-button:hover > span:last-child { transform:translate(4px,-3px); }
.edge-note { color:var(--muted); left:3%; font-size:7px; letter-spacing:2px; }
.scene-caption { color:#163e48; right:5%; bottom:20px; font-size:8px; letter-spacing:1.7px; }
.navigation-bar { left:5%; right:5%; height:76px; background:transparent; border-color:#163e4844; }
.motion-button,.edit-button,#chapter-label { color:var(--ink); }.motion-bars i { background:var(--ink); }
.chapter-dot span { color:#315d65; }.chapter-dot i { background:#426b6e; }.chapter-dot.is-current span { color:var(--ink); }.chapter-dot.is-current i { background:var(--accent); }
.page-progress { background:transparent; }.page-progress span { background:var(--accent); opacity:.8; }
.chapter-layout { padding:34px 10%; gap:10%; }.display-title { font-family:Georgia,'Times New Roman',serif; font-size:clamp(36px,4.4vw,63px); line-height:1.12; font-weight:400; letter-spacing:-.035em; margin:24px 0 29px; }
.eyebrow { color:#995f4b; font-size:8px; letter-spacing:2.4px; }
.lead { font-size:clamp(17px,1.6vw,22px); line-height:1.65; }.muted { font-size:13px; line-height:1.8; }
.about-layout .profile-facts { display:none; }.about-layout .skills { gap:8px 17px; margin-top:24px; }.skills span { color:#3d696b; font-size:9px; }
.section-rule { background:#ad9060; width:56px; }
.section-description { font-size:14px; line-height:1.75; color:var(--muted); }
.experience-layout { grid-template-columns:1fr 1fr; gap:9%; }
.frontier-feature { padding:15px 0; }.frontier-number { display:flex; align-items:baseline; gap:15px; font-family:'Manrope',sans-serif; font-size:clamp(100px,12vw,170px); line-height:1.05; font-weight:200; letter-spacing:-.08em; color:#3d696b; margin:12px 0; }.frontier-number small { font-family:'DM Sans',sans-serif; font-size:12px; letter-spacing:2px; }
.frontier-caption { font-size:13px; line-height:1.8; color:var(--muted); margin:10px 0 24px; }.team-facts { display:flex; gap:38px; border-top:1px solid var(--line); padding-top:18px; }.team-facts span { font-size:10px; color:var(--muted); }.team-facts strong { display:block; color:var(--ink); font-size:29px; line-height:1.4; font-weight:300; }.mission-copy { font-size:11px; line-height:1.7; color:var(--muted); margin-top:17px; }
.work-layout { padding:30px 9% 40px; }.work-title { font-family:'Manrope',sans-serif; font-size:clamp(34px,4vw,56px); line-height:1.15; font-weight:300; letter-spacing:-.05em; }.work-header { margin-bottom:28px; }.work-hint { display:none; }.project-list { grid-template-columns:repeat(3,1fr); gap:25px; }.project-art { background:#e8d3ad; height:clamp(175px,25vh,280px); border:0; }.project-art::before,.project-art::after { display:none; }.project-art img { object-fit:cover; }.art-number { color:#164453; background:#f3eee2; padding:5px 7px; font-size:8px; }.art-caption { display:none; }.project-meta { gap:12px; align-items:start; }.project-meta h3 { font-size:19px; line-height:1.4; letter-spacing:-.4px; }.project-meta .eyebrow { font-size:7px; }.project-meta .project-arrow { flex-shrink:0; color:var(--accent); }
.contact-content { justify-content:flex-start; padding:55px 10% 160px; align-items:flex-start; text-align:left; }.contact-content .display-title { font-size:clamp(39px,5.2vw,70px); margin:22px 0; }.contact-description { color:var(--muted); font-size:14px; max-width:430px; }.contact-link { color:var(--ink); border-color:var(--line); font-size:19px; }.availability { font-size:10px; }
.scene-cut { position:fixed; inset:0; overflow:clip; pointer-events:none; z-index:19; visibility:hidden; }.scene-cut i { position:absolute; top:-50%; height:200%; width:50%; background:#f2dfb8; transform:skewX(-18deg) translateY(115%); }.scene-cut i:nth-child(1) { left:-20%; }.scene-cut i:nth-child(2) { left:27%; background:#2995a3; }.scene-cut i:nth-child(3) { left:74%; background:#164453; }.scene-cut.is-cutting { visibility:visible; }.scene-cut.is-cutting i { animation:diagonal-cut .95s cubic-bezier(.77,0,.18,1) both; }.scene-cut.is-cutting i:nth-child(2) { animation-delay:.06s; }.scene-cut.is-cutting i:nth-child(3) { animation-delay:.12s; }
dialog { --ink:#f5f0e2; --muted:#c9d6d5; --accent:#f0be87; --line:#f4eee033; color:var(--ink); color-scheme:dark; background:#163e48; }dialog::backdrop { background:#143a416b; backdrop-filter:blur(8px); }dialog .field-grid input,dialog .field-grid textarea { color:var(--ink); background:#13333c; border-color:#709295; }.resume-dialog p,.resume-dialog .company { color:var(--muted); }
.index-dialog { background:#163e48; }.index-links { max-width:1050px; margin:35px auto; display:block; }.index-links button { display:flex; align-items:center; width:100%; height:auto; padding:20px 0; border-bottom:1px solid var(--line); }.index-photo { display:none; }.index-links .index-number { width:70px; color:#ad9060; }.index-links .index-title { width:auto; color:var(--ink); font-family:Georgia,'Times New Roman',serif; font-size:clamp(25px,3.6vw,48px); font-weight:400; letter-spacing:-.025em; }.index-links button i { color:var(--muted); font-size:10px; }.index-links .index-arrow { width:30px; margin-left:25px; font-size:21px; color:#f0be87; }
.film-dialog { width:min(1220px,96vw); padding:20px; }.film-header { display:flex; justify-content:space-between; padding:5px 7px 18px; }.film-header h2 { font:300 23px 'Manrope',sans-serif; margin:6px 0 0; }#story-film { display:block; width:100%; aspect-ratio:16/9; overflow:clip; }.film-footer { display:flex; flex-wrap:wrap; gap:20px; font-size:10px; padding:18px 6px 0; }.film-footer>span { margin-right:auto; }.film-error { font-size:12px; }
.prelude { background:#f0eee3; color:#164453; }.prelude-caption { color:#48636b; }.prelude-ring { border-color:#3d696b22; border-top-color:#ad9060; }
@keyframes story-reveal { from { opacity:0; transform:translateY(18px); clip-path:inset(100% 0 0); } to { opacity:1; transform:none; clip-path:inset(0); } }
@keyframes diagonal-cut { 0% { transform:skewX(-18deg) translateY(115%); } 43% { transform:skewX(-18deg) translateY(0); } 100% { transform:skewX(-18deg) translateY(-115%); } }
@media (max-width:900px) { .chapter-layout { grid-template-columns:1fr; align-items:start; gap:24px; }.display-title { max-width:540px; }.project-list { grid-template-columns:1fr 1fr; }.project-art { height:200px; }.frontier-feature { max-width:550px; }.contact-content { padding-top:38px; } }
@media (max-width:650px) { .masthead { height:76px; padding:0 7%; }.wordmark { font-size:23px; }.header-actions { gap:22px; }.text-button { font-size:10px; }.chapter { inset:76px 0 70px; }.intro-content { padding:33px 7% 170px; }.chapter-kicker { font-size:7px; letter-spacing:1.8px; margin-bottom:20px; }.hero-title { font-size:clamp(44px,8.5vw,53px); line-height:1.08; letter-spacing:-.035em; }.intro-description { font-size:12px; line-height:1.75; max-width:300px; margin:16px 0 18px; }.scene-caption { font-size:7px; bottom:18px; right:7%; }.navigation-bar { height:70px; left:7%; right:7%; }.edit-button { font-size:6px; }.motion-button { font-size:7px; }.chapter-nav { gap:4px; }.chapter-dot { width:26px; }.chapter-dot.is-current i { width:25px; }.chapter-controls { gap:16px; }.chapter-layout,.work-layout { padding:24px 8% 40px; }.display-title { font-size:39px; }.lead { font-size:18px; }.muted { font-size:12px; }.project-list { grid-template-columns:1fr; gap:30px; }.project-art { height:225px; }.frontier-number { font-size:125px; }.contact-content { padding:30px 8% 150px; }.contact-content .display-title { font-size:42px; }.contact-link { font-size:16px; }.contact-description { font-size:13px; }.index-links button { padding:23px 0; }.index-links .index-number { width:35px; }.index-links .index-title { font-size:27px; }.index-links button i { display:none; }.index-links .index-arrow { margin-left:auto; }.film-dialog { padding:10px; } }
@media (max-height:650px) and (min-width:651px) { .intro-content { padding-top:10px; }.hero-title { font-size:48px; }.intro-description { margin:12px 0 16px; }.chapter-kicker { margin-bottom:12px; } }
@media (prefers-reduced-motion:reduce) { .scene-cut { display:none; }.chapter.is-active .title-band { animation:none; } }
body.motion-paused .scene-cut { display:none; }body.motion-paused .title-band { animation:none; }
@media print { body,#resume-dialog { --ink:#111; --muted:#333; --accent:#111; --line:#ccc; color:#111; background:#fff; } }

@media (max-height:800px) and (min-width:651px) { .intro-content { padding-top:10px; }.hero-title { font-size:58px; }.chapter-kicker { margin-bottom:16px; }.intro-description { margin:14px 0 17px; } }