@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Shadows+Into+Light&display=swap');

:root {
  --cream: #f5f0e5;
  --paper: #eee6d6;
  --ink: #25342e;
  --forest: #29483d;
  --deep-forest: #182c29;
  --sage: #9baa8d;
  --olive: #777b53;
  --moss: #4e6b55;
  --bark: #604939;
  --clay: #b47759;
  --muted: #64706a;
  --blue: #587782;
  --line: rgba(40, 62, 51, .17);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
  --mono: 'DM Mono', Consolas, monospace;
  --hand: 'Shadows Into Light', cursive;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.65; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }

.skip-link { position: fixed; top: -100px; left: 16px; z-index: 1000; padding: 9px 14px; background: var(--cream); color: var(--ink); font-weight: 700; border: 1px solid var(--forest); transition: top .2s; }
.skip-link:focus { top: 16px; }
.film-grain { position: fixed; z-index: 20; inset: 0; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.page-loader { position: fixed; z-index: 999; inset: 0; display: grid; place-items: center; align-content: center; gap: 15px; background: #273e35; color: #e6dfc9; transition: opacity .6s var(--ease), visibility .6s; }
.page-loader span { width: 40px; height: 40px; border: 1px solid rgba(245,240,229,.45); border-top-color: #f5f0e5; border-radius: 50%; animation: spin 1.2s linear infinite; }
.page-loader i { font-family: var(--hand); font-size: 22px; font-style: normal; letter-spacing: .04em; }
.page-loader.loaded { opacity: 0; visibility: hidden; }

.site-header { position: fixed; z-index: 100; top: 16px; left: 50%; width: min(1360px, calc(100% - 36px)); min-height: 58px; transform: translateX(-50%); display: flex; align-items: center; padding: 7px 13px 7px 19px; border: 1px solid rgba(245,240,229,.36); border-radius: 5px; background: rgba(30, 51, 43, .25); backdrop-filter: blur(12px); color: #fffaf0; transition: background .35s, box-shadow .35s, border-color .35s; }
.site-header.scrolled { background: rgba(245,240,229,.9); border-color: rgba(42,72,61,.15); box-shadow: 0 10px 35px rgba(24,44,41,.1); color: var(--ink); }
.wordmark { margin-right: auto; font-family: var(--serif); font-size: 24px; letter-spacing: -.05em; font-weight: 600; }
.wordmark span { color: #bfd0a8; font-style: italic; }
.site-header.scrolled .wordmark span { color: var(--moss); }
.main-nav { display: flex; gap: clamp(12px, 1.4vw, 25px); align-items: center; }
.main-nav a { position: relative; font-size: 11px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; opacity: .74; transition: opacity .25s; }
.main-nav a::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: currentColor; transition: width .3s var(--ease); }
.main-nav a:hover, .main-nav a.is-active { opacity: 1; }
.main-nav a:hover::after, .main-nav a.is-active::after { width: 100%; }
.menu-toggle, .mobile-menu { display: none; }

.scene { position: relative; overflow: hidden; }
.section { padding: clamp(100px, 12vw, 180px) max(6vw, calc((100vw - 1210px) / 2)); }
.section-label { display: flex; align-items: center; gap: 13px; margin-bottom: clamp(42px, 6vw, 90px); font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.section-label::after { content: ''; width: 40px; height: 1px; background: currentColor; opacity: .6; }
.section-label span { color: var(--clay); }
.section-label.light { color: #d9ddc4; }
.section-label.light span { color: #e7b18d; }
.handwritten { margin-bottom: 1px; color: var(--clay); font: 26px/1.2 var(--hand); letter-spacing: .02em; transform: rotate(-3deg); }
.light-hand { color: #e5c4a5; }
.section h2 { margin-bottom: 26px; font: 600 clamp(42px, 6vw, 86px)/.99 var(--serif); letter-spacing: -.065em; }
.section h2 em { font-weight: 500; color: var(--moss); }
.section h2:not(.contact h2) em { font-style: italic; }
.lead { color: #384c43; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.55; }

/* Opening landscape */
.hero { min-height: min(860px, 100svh); height: 100svh; isolation: isolate; display: grid; align-items: center; padding: 110px max(6vw, calc((100vw - 1230px) / 2)) 128px; background: linear-gradient(180deg, #90adb0 0%, #c1c6b1 47%, #b3ac8d 100%); color: #f8f4ea; }
.hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(18,42,38,.3), transparent 58%), linear-gradient(0deg, rgba(37,65,52,.2), transparent 27%); }
.hero-sky { position: absolute; z-index: -3; inset: 0; overflow: hidden; }
.sun { position: absolute; top: 11%; right: 19%; width: clamp(130px, 17vw, 250px); aspect-ratio: 1; border-radius: 50%; background: #f4dea3; box-shadow: 0 0 0 36px rgba(247,225,175,.1), 0 0 90px rgba(255,239,181,.4); animation: breathe 8s ease-in-out infinite; }
.light-ray { position: absolute; top: 6%; right: 4%; width: 58vw; height: 95vh; transform: rotate(25deg); transform-origin: top; background: linear-gradient(90deg, rgba(255,246,209,.17), transparent 70%); filter: blur(10px); }
.ray-two { top: -5%; right: 35%; opacity: .4; transform: rotate(-16deg); }
.cloud { position: absolute; width: 240px; height: 42px; border-radius: 100%; background: rgba(244,243,225,.44); filter: blur(4px); opacity: .8; }
.cloud::before, .cloud::after { content: ''; position: absolute; bottom: 4px; border-radius: 50%; background: inherit; }
.cloud::before { width: 92px; height: 72px; left: 44px; }.cloud::after { width: 115px; height: 90px; right: 27px; }
.cloud-one { top: 17%; left: 9%; transform: scale(.65); animation: cloud-drift 28s linear infinite; }.cloud-two { top: 29%; right: 8%; transform: scale(.45); animation: cloud-drift 34s -13s linear infinite; }.cloud-three { top: 6%; left: 51%; transform: scale(.3); animation: cloud-drift 23s -7s linear infinite; }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff9df; opacity: .6; animation: twinkle 4s infinite alternate; }.star-one { top: 16%; left: 31%; }.star-two { top: 28%; left: 49%; animation-delay: -1s; }.star-three { top: 12%; left: 65%; animation-delay: -2s; }
.hero-copy { position: relative; z-index: 3; width: min(610px, 53%); transform: var(--move, translate(0, 0)); }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 27px; font: 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #edf1da; }
.leaf-mark { font-size: 12px; color: #ecc299; }
.hero-kicker { margin: 0 0 6px; color: #d1d8b3; font: 23px/1 var(--hand); transform: rotate(-2deg); }
.hero h1 { margin: 0 0 28px; font: 600 clamp(52px, 7.4vw, 105px)/.84 var(--serif); letter-spacing: -.075em; }
.hero h1 span, .hero h1 em, .hero h1 strong { display: block; }.hero h1 em { padding-left: clamp(22px, 5vw, 69px); color: #f0e2c6; font-weight: 500; }.hero h1 strong { padding-left: clamp(7px, 1.8vw, 28px); color: #cbd4ac; font-style: normal; }
.hero-intro { max-width: 530px; color: rgba(255,251,241,.91); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7; }.hero-intro b { color: #f5d9b1; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; gap: 24px; min-height: 51px; padding: 13px 16px 13px 20px; border: 1px solid transparent; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: transform .28s var(--ease), background .28s, color .28s, border-color .28s; }.button:hover { transform: translateY(-4px); }.button i { display: grid; place-items: center; width: 27px; aspect-ratio: 1; border-radius: 50%; font: 18px/1 var(--sans); font-style: normal; }
.button-forest { background: #f1ebd8; color: #29483d; }.button-forest i { background: var(--forest); color: #f1ebd8; }.button-forest:hover { background: #fffaf0; }.text-link { border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 4px; font: 500 12px/1 var(--mono); letter-spacing: .04em; transition: border .25s, color .25s; }.text-link:hover { border-color: #e9c097; color: #e9c097; }
.profile-composition { position: absolute; z-index: 2; right: max(5vw, calc((100vw - 1230px) / 2)); bottom: 9%; width: clamp(240px, 26vw, 398px); height: min(63vh, 570px); transform: var(--move, translate(0, 0)); }
.profile-backdrop { position: absolute; inset: 2% 0 7% 2%; background: #ecdfbd; clip-path: polygon(48% 0, 88% 8%, 100% 35%, 94% 82%, 65% 100%, 20% 92%, 0 58%, 11% 19%); transform: rotate(7deg); opacity: .88; }.profile-backdrop::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(70,87,58,.37); clip-path: inherit; }
.profile-frame { position: absolute; inset: 4% 9% 5% 6%; overflow: hidden; clip-path: polygon(47% 0, 85% 9%, 98% 33%, 93% 82%, 66% 100%, 23% 92%, 1% 58%, 11% 18%); border: 7px solid #f5f0e5; box-shadow: 0 20px 40px rgba(21,45,34,.2); background: var(--paper); }.profile-frame img { width: 100%; height: 100%; object-fit: cover; }
.profile-note { position: absolute; z-index: 2; right: -6%; top: 0; color: #fff3d9; font: 22px/1.05 var(--hand); text-align: center; transform: rotate(9deg); }.profile-caption { position: absolute; z-index: 3; left: 2%; bottom: -25px; display: flex; align-items: center; gap: 6px; padding: 7px 9px; color: #334d42; background: #e3d7bc; font: 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-3deg); }.profile-caption i { width: 7px; height: 7px; border-radius: 50%; background: #ad6951; }.scribble { position: absolute; z-index: 2; border: 1px solid rgba(245,240,229,.8); border-left: 0; border-bottom: 0; border-radius: 100%; }.scribble-one { width: 100px; height: 47px; left: -12%; top: 21%; transform: rotate(-26deg); }.floating-leaf { position: absolute; z-index: 4; color: #f4d7b0; font-size: 18px; animation: float 6s ease-in-out infinite; }.leaf-a { left: -8%; bottom: 25%; }.leaf-b { right: -2%; bottom: 6%; color: #dfe2bb; animation-delay: -2.3s; }
.hero-landscape { position: absolute; z-index: -2; inset: 0; pointer-events: none; }.mountain { position: absolute; bottom: 12%; clip-path: polygon(0 100%, 25% 35%, 43% 60%, 64% 0, 100% 100%); }.mountain-far { left: -8%; width: 78%; height: 51%; background: #607d70; opacity: .75; }.mountain-near { right: -8%; width: 75%; height: 48%; background: #476758; opacity: .88; transform: scaleX(-1); }.mountain::after { content: ''; position: absolute; top: 13%; left: 48%; width: 18%; height: 26%; background: rgba(243,237,212,.33); transform: skewX(-34deg) rotate(24deg); }.tree-line { position: absolute; z-index: 1; bottom: 8%; left: -2%; width: 104%; height: 22%; background: #315443; clip-path: polygon(0 100%,0 72%,2% 72%,3% 41%,4% 72%,6% 72%,7% 20%,8% 72%,10% 72%,12% 45%,13% 72%,15% 72%,16% 13%,18% 72%,20% 72%,22% 38%,23% 72%,25% 72%,27% 23%,29% 72%,31% 72%,34% 48%,35% 72%,37% 72%,39% 9%,42% 72%,44% 72%,46% 43%,47% 72%,50% 72%,52% 25%,54% 72%,56% 72%,58% 49%,59% 72%,61% 72%,63% 18%,65% 72%,67% 72%,69% 40%,70% 72%,72% 72%,75% 11%,77% 72%,79% 72%,81% 45%,82% 72%,85% 72%,87% 22%,89% 72%,91% 72%,93% 42%,94% 72%,97% 72%,98% 20%,100% 72%,100% 100%); }.trees-back { opacity: .66; bottom: 14%; transform: scaleX(1.2); }.trees-front { height: 29%; bottom: 5%; background: #29483d; }.hero-ground { position: absolute; bottom: -7%; left: -5%; width: 110%; height: 21%; border-radius: 50% 50% 0 0; background: #213f35; }.haze { position: absolute; z-index: 3; bottom: 14%; left: 0; width: 100%; height: 8%; background: linear-gradient(90deg, transparent, rgba(240,239,210,.24), transparent); filter: blur(13px); }
.scroll-cue { position: absolute; z-index: 4; bottom: 28px; left: 50%; display: grid; justify-items: center; gap: 9px; transform: translateX(-50%); color: rgba(255,255,255,.8); font: 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }.scroll-cue i { width: 1px; height: 36px; background: currentColor; transform-origin: top; animation: scroll-line 2s ease-in-out infinite; }

/* Story */
.story { min-height: 850px; background: #f3ede0; }.story::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(81,97,73,.12) 1px, transparent 1.5px); background-size: 19px 19px; mask-image: linear-gradient(90deg, black, transparent 70%); opacity: .4; }.story > * { position: relative; z-index: 1; }.story-layout { display: grid; grid-template-columns: 1.25fr .55fr .8fr; gap: clamp(35px, 5vw, 90px); align-items: center; }.story-heading p:not(.handwritten) { max-width: 625px; margin-bottom: 18px; color: #506058; }.story-heading .lead { color: #344b40; }.story-compass { align-self: center; text-align: center; }.compass-card { position: relative; display: grid; place-items: center; width: clamp(175px, 17vw, 235px); aspect-ratio: 1; margin: auto; border: 1px solid rgba(60,83,68,.36); border-radius: 50%; background: rgba(247,242,229,.6); box-shadow: inset 0 0 0 12px rgba(157,170,141,.11); }.compass-card::before, .compass-card::after { content: ''; position: absolute; background: rgba(59,79,65,.25); }.compass-card::before { width: 1px; height: 85%; }.compass-card::after { height: 1px; width: 85%; }.compass-letter { position: absolute; font: 11px var(--mono); color: var(--moss); }.north { top: 13px; }.east { right: 15px; }.south { bottom: 13px; }.west { left: 15px; }.compass-needle { position: absolute; width: 25px; height: 72%; background: linear-gradient(#b97559 49%, #617a68 49%); clip-path: polygon(50% 0, 68% 50%, 50% 100%, 32% 50%); transform: rotate(27deg); }.compass-center { position: relative; z-index: 1; display: grid; place-items: center; width: 35px; aspect-ratio: 1; border-radius: 50%; background: #f1e8d8; color: var(--bark); font: 600 20px var(--serif); }.story-compass p { color: var(--bark); font: 20px/1.05 var(--hand); transform: rotate(-5deg); }.story-compass em { font-family: var(--serif); font-size: 17px; }.story-notes { display: grid; gap: 17px; }.story-notes article { position: relative; padding: 17px 16px 15px 58px; border-left: 1px solid #b3ac91; }.story-notes article:nth-child(2) { margin-left: 22px; }.story-notes article:nth-child(3) { margin-left: 9px; }.note-number { position: absolute; top: 18px; left: 13px; color: var(--clay); font: 10px var(--mono); }.story-notes h3 { margin-bottom: 6px; font: 600 21px/1.1 var(--serif); }.story-notes p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }.paper-path { position: absolute; bottom: -12px; left: 0; width: 100%; height: 150px; background: #e6dac5; clip-path: polygon(0 54%,20% 40%,35% 64%,49% 47%,65% 61%,77% 30%,100% 52%,100% 100%,0 100%); }.paper-path span { position: absolute; border: 1px solid rgba(94,73,57,.28); border-radius: 50%; }.paper-path span:nth-child(1) { width: 126px; aspect-ratio: 1; left: 13%; bottom: -56px; }.paper-path span:nth-child(2) { width: 75px; aspect-ratio: 1; left: 48%; bottom: 17px; }.paper-path span:nth-child(3) { width: 189px; aspect-ratio: 1; right: 9%; bottom: -105px; }

/* Skills: a clearing at dusk */
.skills { color: #f3ede0; background: #2d4a40; padding-bottom: clamp(180px, 20vw, 250px); }.skills::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 8% 7%, rgba(221,190,130,.22), transparent 20%), radial-gradient(circle at 81% 28%, rgba(141,167,139,.12), transparent 21%); }.skills > * { position: relative; z-index: 1; }.skills-sun { position: absolute; top: 8%; right: 9%; width: clamp(140px, 20vw, 270px); aspect-ratio: 1; border-radius: 50%; background: #d9c090; opacity: .91; box-shadow: 0 0 100px rgba(224,195,135,.22); }.skills-sun::after { content: ''; position: absolute; inset: 19% 0 0 21%; border-radius: 50%; background: #2d4a40; }.skills-top { display: flex; justify-content: space-between; align-items: end; gap: 50px; }.skills h2 { margin: 0; color: #f4efdf; }.skills h2 em { color: #ced5b5; }.skills-top > p { width: min(345px, 34%); margin: 0 10% 9px 0; color: #d7dbca; font-size: 15px; }.skill-trail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(64px, 10vw, 150px); border-top: 1px solid rgba(236,233,209,.38); }.skill-cluster { position: relative; min-height: 285px; padding: 45px 27px 30px; border-right: 1px solid rgba(236,233,209,.3); transition: background .35s, transform .35s var(--ease); }.skill-cluster:first-child { border-left: 1px solid rgba(236,233,209,.3); }.skill-cluster:hover { z-index: 2; background: rgba(217,205,170,.13); transform: translateY(-12px); }.cluster-index { color: #d9b08f; font: 10px var(--mono); }.cluster-icon { display: grid; place-items: center; width: 47px; height: 47px; margin: 38px 0 23px; border: 1px solid rgba(230,224,195,.5); border-radius: 50%; color: #edf0d5; font: 19px var(--serif); }.code-icon { font: 15px var(--mono); }.skill-cluster h3 { margin-bottom: 11px; color: #f5efdf; font: 600 25px/1 var(--serif); }.skill-cluster p { margin: 0; color: #d4d8c5; font-size: 13px; line-height: 1.7; }.skills-forest { position: absolute; z-index: 0; bottom: -1px; left: -2%; width: 104%; height: 160px; opacity: .9; }.skills-forest i { position: absolute; bottom: 0; width: 20%; height: 100%; background: #1d3931; clip-path: polygon(0 100%, 42% 32%, 50% 7%, 58% 33%, 100% 100%); }.skills-forest i:nth-child(1) { left: 0; height: 83%; }.skills-forest i:nth-child(2) { left: 17%; height: 120%; }.skills-forest i:nth-child(3) { left: 39%; height: 68%; }.skills-forest i:nth-child(4) { left: 59%; height: 123%; }.skills-forest i:nth-child(5) { left: 82%; height: 85%; }

/* Projects */
.projects { background: #efe6d5; }.projects::after { content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 22%; background: #d5d6bd; clip-path: polygon(0 42%,15% 19%,35% 44%,52% 14%,72% 42%,86% 16%,100% 36%,100% 100%,0 100%); }.projects > * { position: relative; z-index: 1; }.projects-heading { width: min(800px, 100%); margin: 0 0 72px 14%; }.project-grid { display: grid; grid-template-columns: 1.22fr .78fr; gap: clamp(22px, 3.5vw, 53px); align-items: start; }.project-card { position: relative; overflow: hidden; box-shadow: 0 20px 50px rgba(67,62,45,.11); transition: transform .45s var(--ease), box-shadow .45s; }.project-card:hover { transform: translateY(-9px) rotate(.2deg); box-shadow: 0 28px 55px rgba(67,62,45,.18); }.bookverse { display: grid; grid-template-columns: 42% 58%; background: #355148; color: #f3eddd; }.planner { margin-top: 90px; background: #c78364; color: #fff4e5; }.project-visual { position: relative; overflow: hidden; min-height: 100%; }.library-visual { min-height: 435px; background: #eadbc0; }.library-visual::before { content: ''; position: absolute; inset: 15% 11% 12% 13%; border: 10px solid #496052; border-bottom-width: 24px; background: repeating-linear-gradient(0deg, transparent 0 86px, #496052 87px 95px), linear-gradient(90deg, #d4a566, #efdfb9); box-shadow: 0 10px 20px rgba(32,54,44,.2); }.library-visual::after { content: ''; position: absolute; right: -37%; bottom: -25%; width: 83%; aspect-ratio: 1; border-radius: 50%; background: #84976f; }.book { position: absolute; z-index: 2; bottom: 23%; width: 29px; border-radius: 2px 3px 1px 1px; transform-origin: bottom; box-shadow: 4px 3px 5px rgba(37,54,44,.18); }.b1 { left: 19%; height: 126px; background: #bb7058; transform: rotate(-3deg); }.b2 { left: 28%; height: 151px; background: #3e594e; transform: rotate(2deg); }.b3 { left: 38%; height: 104px; background: #c4a160; transform: rotate(-1deg); }.b4 { left: 47%; height: 142px; background: #76694e; transform: rotate(4deg); }.b5 { left: 57%; height: 90px; background: #9f5b51; transform: rotate(-5deg); }.b6 { left: 66%; height: 125px; background: #5c7466; transform: rotate(1deg); }.lamp { position: absolute; z-index: 4; right: 8%; top: 17%; width: 91px; height: 130px; }.lamp i { position: absolute; top: 0; left: 0; width: 73px; height: 49px; border-radius: 49% 49% 7px 7px; background: #6c5540; }.lamp i::after { content: ''; position: absolute; inset: 7px 9px; border-radius: inherit; background: #f2c56e; }.lamp b { position: absolute; top: 47px; left: 34px; width: 5px; height: 76px; background: #6c5540; }.lamp b::after { content: ''; position: absolute; left: -21px; bottom: 0; width: 47px; height: 7px; border-radius: 50%; background: #6c5540; }.library-glow { position: absolute; z-index: 3; right: 0; top: 6%; width: 43%; height: 48%; background: radial-gradient(circle, rgba(255,226,150,.38), transparent 65%); }.library-label { position: absolute; z-index: 5; bottom: 6%; left: 13%; color: #345145; font: 10px var(--mono); letter-spacing: .15em; }.project-copy { position: relative; z-index: 3; padding: 43px clamp(25px, 4vw, 60px) 45px; }.project-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 27px; color: #b8c6a5; font: 9px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; }.planner .project-meta { color: #f5d5ad; }.project-copy h3 { margin-bottom: 19px; font: 600 clamp(31px, 3vw, 47px)/1 var(--serif); letter-spacing: -.05em; }.project-copy h3 em { display: block; margin-top: 8px; color: #c8d2ab; font-size: .55em; font-style: italic; font-weight: 500; letter-spacing: -.03em; }.planner .project-copy h3 em { color: #f5d7ad; }.project-copy > p { color: rgba(249,246,229,.85); font-size: 14px; line-height: 1.72; }.project-copy .role-line { margin: 21px 0; padding-top: 16px; border-top: 1px solid rgba(239,232,213,.24); color: #e2e6d3; }.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 23px 0 0; padding: 0; list-style: none; }.tags li { padding: 5px 8px; border: 1px solid rgba(237,231,210,.38); font: 9px/1 var(--mono); letter-spacing: .04em; }.planner .tags li { border-color: rgba(255,244,227,.45); }.project-mark { position: absolute; right: 15px; bottom: 10px; color: rgba(255,255,255,.26); font: 100px/.7 var(--serif); }.planner-visual { height: 250px; background: #344a53; }.planner-visual::before { content: ''; position: absolute; inset: auto 0 0; height: 32%; background: #263c3a; clip-path: polygon(0 100%,0 46%,14% 36%,24% 51%,37% 18%,48% 53%,63% 38%,77% 61%,89% 28%,100% 54%,100% 100%); }.planner-moon { position: absolute; top: 22px; left: 32px; width: 94px; aspect-ratio: 1; border-radius: 50%; background: #ecd8a7; box-shadow: 0 0 50px rgba(237,216,165,.36); }.planner-moon::after { content: ''; position: absolute; top: -8px; left: 24px; width: 98%; height: 98%; border-radius: 50%; background: #344a53; }.planner-page { position: absolute; z-index: 2; right: 15%; bottom: 13%; width: 125px; height: 145px; padding: 23px 15px; background: #f0e5cd; transform: rotate(7deg); box-shadow: 8px 10px 0 rgba(16,34,35,.18); }.planner-page span { display: block; width: 85%; height: 5px; margin-bottom: 10px; background: #b8a981; }.planner-page span:nth-child(2) { width: 67%; }.planner-page span:nth-child(3) { width: 73%; }.planner-page b { position: absolute; bottom: 13px; right: 14px; color: #9e604d; font: 16px var(--hand); transform: rotate(-7deg); }.planner-star { position: absolute; z-index: 3; color: #e9c68b; }.s1 { top: 29px; right: 19%; }.s2 { top: 77px; right: 5%; font-size: 10px; }.planner-vine { position: absolute; z-index: 3; right: 1%; bottom: 0; width: 62px; height: 190px; border-left: 2px solid #76916b; border-radius: 50%; transform: rotate(15deg); }.planner-vine::before, .planner-vine::after { content: ''; position: absolute; width: 25px; height: 12px; border-radius: 100% 0 100% 0; background: #76916b; }.planner-vine::before { top: 58px; right: -16px; transform: rotate(28deg); }.planner-vine::after { top: 115px; left: -16px; transform: rotate(-18deg); }.project-footnote { width: min(650px, 80%); margin: 49px 4% 0 auto; color: #5c675e; font: 13px/1.5 var(--mono); }

/* Rainy experience */
.experience { color: #eef0e2; background: #29453f; }.experience::after { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 85% 18%, rgba(223,214,178,.17), transparent 18%), linear-gradient(135deg, rgba(20,36,34,.45), transparent 50%); }.experience > * { position: relative; z-index: 1; }.experience-heading { width: min(860px, 100%); margin-bottom: clamp(50px, 9vw, 110px); }.experience h2 { color: #f1f0df; }.experience h2 em { color: #cbd9b9; }.timeline { position: relative; width: min(1020px, 100%); margin: auto; }.timeline::before { content: ''; position: absolute; top: 10px; bottom: 18px; left: 21%; width: 1px; background: linear-gradient(transparent, rgba(226,226,199,.7) 5% 95%, transparent); }.timeline-item { display: grid; grid-template-columns: 20% 6% 1fr; gap: 0; position: relative; padding: 0 0 48px; }.timeline-date { padding-top: 5px; color: #e3bb98; font: 10px/1.55 var(--mono); letter-spacing: .08em; text-transform: uppercase; }.timeline-dot { position: relative; z-index: 2; width: 12px; height: 12px; margin-top: 7px; border: 3px solid #29453f; border-radius: 50%; background: #dfb991; box-shadow: 0 0 0 1px rgba(244,241,218,.5); }.timeline-card { max-width: 650px; padding: 4px 0 0 24px; }.timeline-type { margin-bottom: 8px; color: #aec1a1; font: 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }.timeline-card h3 { margin-bottom: 4px; color: #f2f0dd; font: 600 clamp(24px, 2.7vw, 34px)/1.1 var(--serif); letter-spacing: -.04em; }.timeline-card h4 { margin-bottom: 16px; color: #d8d5b9; font: 500 13px/1.4 var(--sans); }.timeline-card > p:last-child { margin-bottom: 0; color: #d8decd; font-size: 14px; }.rain-lines { position: absolute; inset: 0; opacity: .26; }.rain-lines i { position: absolute; top: -15%; width: 1px; height: 100%; background: linear-gradient(transparent, rgba(222,229,218,.8), transparent); transform: rotate(17deg); animation: rain 3.4s linear infinite; }.rain-lines i:nth-child(1) { left: 9%; animation-delay: -1.2s; }.rain-lines i:nth-child(2) { left: 29%; height: 78%; animation-delay: -.3s; }.rain-lines i:nth-child(3) { left: 48%; height: 92%; animation-delay: -2.1s; }.rain-lines i:nth-child(4) { left: 67%; height: 81%; animation-delay: -1.6s; }.rain-lines i:nth-child(5) { left: 84%; height: 105%; animation-delay: -.8s; }.rain-lines i:nth-child(6) { left: 95%; height: 60%; animation-delay: -2.6s; }

/* Education - warm landscape */
.education { background: #e7dec9; }.education::before { content: ''; position: absolute; z-index: 0; inset: 0; opacity: .35; background-image: linear-gradient(120deg, transparent 0 45%, rgba(108,120,82,.3) 45.2% 45.5%, transparent 45.7%); background-size: 100% 120px; }.education > * { position: relative; z-index: 1; }.education-header { display: flex; justify-content: space-between; align-items: end; gap: 50px; }.education-header > p { width: min(345px, 35%); margin-bottom: 8px; color: #53655a; }.education-layout { display: grid; grid-template-columns: 1.42fr .58fr; gap: clamp(22px, 4vw, 62px); margin-top: 80px; }.degree-card { position: relative; padding: clamp(32px, 5vw, 70px); overflow: hidden; background: #f6f0e3; box-shadow: 13px 14px 0 #c2bd9d; }.degree-card::before { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 80px 80px 0; border-color: transparent #dfd2b5 transparent transparent; }.degree-stamp { position: absolute; top: 39px; right: 32px; display: grid; place-items: center; width: 65px; aspect-ratio: 1; border: 1px solid #809277; border-radius: 50%; color: #63735d; font: 10px/1.1 var(--mono); letter-spacing: .06em; text-align: center; text-transform: uppercase; transform: rotate(10deg); }.degree-period { margin-bottom: 21px; color: #a46750; font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.degree-card h3, .education-side h3 { margin-bottom: 13px; font: 600 clamp(30px, 3.7vw, 50px)/1.03 var(--serif); letter-spacing: -.055em; }.degree-card h3 em { display: block; color: var(--moss); font-weight: 500; font-style: italic; }.degree-card h4, .education-side h4 { margin: 0 0 7px; color: #43594b; font: 600 15px/1.4 var(--sans); }.affiliation { color: var(--muted); font-size: 14px; }.coursework { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 25px; padding: 23px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.coursework b { width: 100%; margin-bottom: 4px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; }.coursework span { padding: 4px 7px; background: #e6ead6; color: #4e624f; font-size: 11px; }.scholarship { margin: 0; color: #9c674f; font: 13px/1.55 var(--sans); }.education-side { position: relative; padding: 35px 0 0 27px; }.education-side::before { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: rgba(73,100,77,.3); }.education-side article { position: relative; padding-bottom: 37px; }.education-side h3 { font-size: 33px; }.education-side article p:last-child { color: var(--muted); font-size: 13px; }.edu-sun { position: absolute; top: -34px; right: 0; width: 70px; aspect-ratio: 1; border-radius: 50%; background: #c88460; }.language-list { padding-top: 31px; border-top: 1px solid var(--line); }.language-list p { color: var(--bark); font: 12px var(--mono); letter-spacing: .09em; text-transform: uppercase; }.language-list span { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(69,89,73,.11); color: #405448; font-size: 14px; }.language-list b { color: #6c776b; font-size: 11px; font-weight: 400; }

/* Moonlit milestones */
.milestones { color: #efefe3; background: #1e3533; }.milestones::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 23% 7%, rgba(176,198,177,.21), transparent 24%), radial-gradient(ellipse at 74% 66%, rgba(186,129,92,.13), transparent 25%); }.milestones > * { position: relative; z-index: 1; }.milestones-heading { width: min(840px, 100%); margin-bottom: 68px; }.milestones h2 { color: #f0f0e3; }.milestones h2 em { color: #bbd0a8; }.milestone-constellation { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; align-items: start; }.milestone-card { position: relative; min-height: 236px; padding: 25px; border: 1px solid rgba(233,235,211,.31); background: rgba(234,231,207,.04); transition: background .35s, transform .35s var(--ease); }.milestone-card:hover { background: rgba(234,231,207,.1); transform: translateY(-8px); }.card-one { grid-column: 1 / 6; }.card-two { grid-column: 7 / 11; margin-top: 46px; }.card-three { grid-column: 2 / 6; margin-top: 18px; }.card-four { grid-column: 7 / 13; margin-top: -51px; }.card-five { grid-column: 4 / 8; margin-top: 25px; }.badge { display: grid; place-items: center; width: 35px; aspect-ratio: 1; margin-bottom: 32px; border: 1px solid #d5b588; border-radius: 50%; color: #e4bd91; font: 15px var(--serif); }.milestone-card > p { margin-bottom: 7px; color: #dbbd9a; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.milestone-card h3 { margin-bottom: 5px; color: #f5f0dd; font: 600 28px/1.05 var(--serif); letter-spacing: -.04em; }.milestone-card h4 { margin-bottom: 14px; color: #bed0b1; font: 500 12px/1.45 var(--sans); }.milestone-card p:last-child { margin: 0; color: #dce2d1; font-size: 12px; line-height: 1.6; }.training-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 73px; padding-top: 24px; border-top: 1px solid rgba(233,235,211,.31); }.training-strip div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }.training-strip span { color: #f1eddf; font: 500 15px var(--serif); }.training-strip b { color: #c6cfbb; font: 10px var(--mono); letter-spacing: .04em; font-weight: 400; }

/* Community */
.volunteer { background: #e2d9c4; padding-bottom: clamp(175px, 19vw, 245px); }.volunteer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(255,249,235,.7), transparent 48%); }.volunteer > * { position: relative; z-index: 1; }.volunteer-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10%; }.volunteer-title h2 { max-width: 580px; }.volunteer-list { padding-top: 17px; }.volunteer-list article { padding: 24px 0; border-top: 1px solid rgba(57,79,62,.26); }.volunteer-list article:last-child { border-bottom: 1px solid rgba(57,79,62,.26); }.volunteer-list span { display: block; margin-bottom: 9px; color: #a2644e; font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.volunteer-list h3 { margin-bottom: 9px; color: #354a40; font: 600 24px/1.15 var(--serif); }.volunteer-list p { margin: 0; color: #5a675d; font-size: 14px; }.volunteer-hills { position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 180px; }.volunteer-hills i { position: absolute; bottom: 0; width: 70%; height: 100%; border-radius: 50% 50% 0 0; background: #788c70; }.volunteer-hills i:nth-child(1) { left: -28%; height: 60%; background: #899875; }.volunteer-hills i:nth-child(2) { left: 18%; height: 90%; background: #657e68; }.volunteer-hills i:nth-child(3) { right: -20%; height: 69%; background: #4e6b58; }

/* Closing scene */
.contact { min-height: min(820px, 100svh); padding: clamp(125px, 13vw, 180px) max(6vw, calc((100vw - 1210px) / 2)) 63px; color: #f1eee0; background: #1d3034; isolation: isolate; }.night-sky { position: absolute; z-index: -4; inset: 0; background: radial-gradient(ellipse at 73% 26%, #556f76 0, #334f55 30%, #1d3034 72%); }.moon { position: absolute; top: 12%; right: 16%; width: clamp(95px, 12vw, 170px); aspect-ratio: 1; border-radius: 50%; background: #e7d9ae; box-shadow: 0 0 75px rgba(239,223,176,.25); }.moon::after { content: ''; position: absolute; top: -6px; left: 30px; width: 100%; height: 100%; border-radius: 50%; background: #516a70; }.moon-haze { position: absolute; top: 20%; right: 1%; width: 42%; height: 15%; border-radius: 50%; background: rgba(220,230,211,.11); filter: blur(23px); }.night-star { position: absolute; color: #f4e4ae; font-style: normal; animation: twinkle 3s infinite alternate; }.n1 { top: 12%; left: 11%; }.n2 { top: 33%; left: 41%; font-size: 11px; animation-delay: -.9s; }.n3 { top: 17%; left: 63%; font-size: 10px; animation-delay: -1.4s; }.n4 { top: 39%; right: 9%; animation-delay: -2.1s; }.contact-copy { width: min(620px, 62%); }.contact h2 { color: #f1eedf; }.contact h2 em { color: #d1ddbd; font-style: italic; }.contact-copy > p:not(.handwritten) { max-width: 485px; color: #d8ddd0; font-size: 16px; }.button-cream { margin-top: 15px; background: #f0ebd9; color: #243b34; }.button-cream i { background: #b57359; color: #fff5e6; }.phone-link { display: block; width: fit-content; margin: 22px 0 0 21px; padding-bottom: 3px; border-bottom: 1px solid rgba(244,241,225,.5); color: #e4e8d6; font: 11px var(--mono); letter-spacing: .08em; }.contact-socials { position: absolute; z-index: 3; right: max(7vw, calc((100vw - 1200px) / 2)); top: 50%; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: min(330px, 30vw); }.social-link { display: flex; align-items: center; gap: 9px; padding: 12px 13px; border: 1px solid rgba(242,239,222,.26); background: rgba(25,44,46,.25); backdrop-filter: blur(5px); color: #f3efe4; font: 10px var(--mono); letter-spacing: .03em; transition: transform .25s var(--ease), background .25s; }.social-link:hover { transform: translateY(-4px); background: rgba(245,240,222,.14); }.social-link svg { width: 19px; height: 19px; fill: currentColor; }.linkedin svg { color: #65a9dd; }.github svg { color: #f1f2ea; }.youtube svg { color: #ff6d5d; }.email svg { color: #d5bd7a; }.contact-room { position: absolute; z-index: -1; right: 4%; bottom: 13%; width: min(48vw, 600px); height: 58%; opacity: .93; }.window { position: absolute; right: 17%; top: 4%; width: 46%; height: 57%; border: 13px solid #223d3b; background: linear-gradient(140deg, #6f9192, #405f65); box-shadow: 0 0 30px rgba(225,224,180,.15); }.window::before, .window::after { content: ''; position: absolute; background: #223d3b; }.window::before { top: 0; left: 50%; width: 8px; height: 100%; }.window::after { top: 47%; left: 0; width: 100%; height: 8px; }.window i { position: absolute; z-index: 2; bottom: 0; width: 22%; height: 43%; background: #2a4841; clip-path: polygon(0 100%,17% 30%,29% 54%,42% 4%,55% 51%,71% 21%,100% 100%); }.window i:nth-child(1) { left: 0; }.window i:nth-child(2) { right: 0; transform: scaleX(-1); }.desk { position: absolute; z-index: 2; right: 0; bottom: 0; width: 83%; height: 28%; background: #513f34; }.desk::after { content: ''; position: absolute; bottom: -89%; left: 5%; width: 88%; height: 90%; border: 12px solid #513f34; border-top: 0; }.desk i:first-child { position: absolute; top: -68px; left: 43%; width: 104px; height: 69px; border-radius: 6px 6px 0 0; background: #dbd1b9; box-shadow: inset 0 -11px #9e9a87; transform: skew(-7deg); }.desk i:last-child { position: absolute; top: -80px; right: 9%; width: 58px; height: 78px; border-radius: 30px 30px 4px 4px; background: #4a3831; }.desk i:last-child::after { content: ''; position: absolute; top: 12px; left: 13px; width: 30px; height: 30px; border-radius: 50%; background: #f0c26e; box-shadow: 0 0 28px #f0c26e; }.plant { position: absolute; z-index: 3; right: 78%; bottom: 21%; width: 90px; height: 150px; }.plant::after { content: ''; position: absolute; bottom: 0; left: 23px; width: 43px; height: 39px; background: #9a7051; clip-path: polygon(0 0,100% 0,78% 100%,21% 100%); }.plant i { position: absolute; bottom: 29px; left: 42px; width: 29px; height: 88px; border-radius: 100% 0 100% 0; background: #57755e; transform-origin: bottom; }.plant i:nth-child(1) { transform: rotate(-42deg); }.plant i:nth-child(2) { transform: rotate(19deg); }.plant i:nth-child(3) { height: 66px; transform: rotate(54deg); }.lamp-glow { position: absolute; z-index: 1; right: -12%; bottom: 5%; width: 49%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(245,190,107,.21), transparent 66%); }.contact-forest { position: absolute; z-index: -1; bottom: 0; left: 0; width: 100%; height: 25%; background: #172c2c; clip-path: polygon(0 100%,0 48%,3% 39%,4% 0,6% 46%,9% 61%,12% 20%,14% 55%,17% 46%,19% 9%,21% 54%,25% 61%,28% 24%,30% 54%,35% 44%,38% 4%,41% 52%,46% 58%,49% 12%,52% 49%,56% 42%,60% 0,63% 53%,66% 58%,69% 17%,72% 54%,76% 45%,79% 2%,82% 54%,86% 63%,89% 26%,92% 54%,96% 44%,98% 11%,100% 43%,100% 100%); }.contact footer { position: absolute; bottom: 23px; left: max(6vw, calc((100vw - 1210px) / 2)); right: max(6vw, calc((100vw - 1210px) / 2)); display: flex; justify-content: space-between; color: rgba(233,237,224,.6); font: 9px var(--mono); letter-spacing: .07em; text-transform: uppercase; }.contact footer p { margin: 0; }.contact footer span { color: #dcb48a; }

/* Interaction */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }.reveal.in-view { opacity: 1; transform: none; }.skill-cluster:nth-child(2), .story-notes article:nth-child(2), .timeline-item:nth-child(2) { transition-delay: .08s; }.skill-cluster:nth-child(3), .story-notes article:nth-child(3), .timeline-item:nth-child(3) { transition-delay: .16s; }.skill-cluster:nth-child(4), .timeline-item:nth-child(4) { transition-delay: .24s; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes breathe { 50% { transform: scale(1.04); } } @keyframes cloud-drift { from { margin-left: -8vw; } to { margin-left: 10vw; } } @keyframes twinkle { to { opacity: .2; transform: scale(.6); } } @keyframes float { 50% { transform: translateY(-12px) rotate(13deg); } } @keyframes scroll-line { 0%,100% { transform: scaleY(.4); opacity: .25; } 50% { transform: scaleY(1); opacity: 1; } } @keyframes rain { to { transform: translateY(19% ) rotate(17deg); } }

@media (max-width: 1050px) { .main-nav { gap: 13px; }.main-nav a:nth-child(6), .main-nav a:nth-child(7) { display: none; }.story-layout { grid-template-columns: 1.2fr .6fr; }.story-notes { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }.story-notes article:nth-child(2), .story-notes article:nth-child(3) { margin-left: 0; }.project-grid { grid-template-columns: 1fr; }.planner { display: grid; grid-template-columns: 37% 63%; margin: 0 0 0 12%; }.planner-visual { height: auto; min-height: 100%; }.milestone-constellation { grid-template-columns: repeat(2, 1fr); }.card-one, .card-two, .card-three, .card-four, .card-five { grid-column: auto; margin-top: 0; }.contact-socials { right: 5%; }.contact-room { right: -7%; opacity: .62; } }
@media (max-width: 760px) { .site-header { top: 10px; width: calc(100% - 20px); min-height: 52px; padding: 5px 11px 5px 15px; }.main-nav { display: none; }.menu-toggle { display: flex; align-items: center; gap: 4px; position: relative; width: 77px; height: 38px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }.menu-toggle span { position: absolute; right: 40px; width: 20px; height: 1px; background: currentColor; transition: transform .3s, opacity .3s; }.menu-toggle span:nth-child(1) { top: 12px; }.menu-toggle span:nth-child(2) { top: 18px; }.menu-toggle span:nth-child(3) { top: 24px; }.menu-toggle b { position: absolute; right: 0; font: 9px var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; }.menu-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }.menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }.menu-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }.mobile-menu { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; padding: 12px; border: 1px solid rgba(36,61,49,.12); background: rgba(244,239,228,.97); box-shadow: 0 17px 34px rgba(27,44,36,.15); color: var(--ink); }.mobile-menu.is-open { display: grid; }.mobile-menu a { padding: 12px 8px; border-bottom: 1px solid rgba(45,68,56,.12); font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.mobile-menu a:last-child { border-bottom: 0; }.section { padding-right: 24px; padding-left: 24px; }.hero { min-height: 790px; height: 100svh; align-items: start; padding: 164px 24px 100px; }.hero-copy { width: min(100%, 570px); }.hero h1 { font-size: clamp(50px, 14vw, 78px); }.hero-intro { max-width: 94%; font-size: 14px; }.hero-actions { gap: 18px; }.profile-composition { right: -5px; bottom: 5%; width: min(49vw, 277px); height: min(47vh, 385px); opacity: .93; }.profile-note { display: none; }.hero-landscape { transform: scaleX(1.22); transform-origin: bottom; }.mountain-far { width: 110%; }.mountain-near { width: 90%; }.scroll-cue { display: none; }.story-layout { grid-template-columns: 1fr; }.story-compass { display: none; }.story-notes { grid-template-columns: 1fr; gap: 6px; }.story-notes article { padding-left: 52px; }.skills-top, .education-header { display: block; }.skills-top > p, .education-header > p { width: 100%; margin: 25px 0 0; }.skills-sun { top: 13%; right: -45px; }.skill-trail { grid-template-columns: repeat(2, 1fr); }.skill-cluster { min-height: 280px; padding: 27px 18px; }.cluster-icon { margin: 29px 0 19px; }.skill-cluster h3 { font-size: 22px; }.projects-heading { margin-left: 0; }.project-grid { gap: 22px; }.bookverse { grid-template-columns: 1fr; }.library-visual { min-height: 266px; }.planner { display: block; margin-left: 0; }.planner-visual { height: 210px; }.project-copy { padding: 31px 27px; }.project-copy h3 { font-size: 35px; }.project-mark { font-size: 80px; }.project-footnote { width: 100%; margin: 37px 0 0; }.timeline::before { left: 10px; }.timeline-item { grid-template-columns: 29px 1fr; padding-bottom: 42px; }.timeline-date { grid-column: 2; grid-row: 1; padding: 0 0 8px 20px; }.timeline-dot { grid-column: 1; grid-row: 1 / 3; }.timeline-card { grid-column: 2; grid-row: 2; padding: 0 0 0 20px; }.education-layout { grid-template-columns: 1fr; margin-top: 54px; }.degree-card { padding: 31px 24px; box-shadow: 8px 9px 0 #c2bd9d; }.degree-stamp { top: 21px; right: 18px; }.degree-card h3 { padding-right: 40px; font-size: 33px; }.education-side { padding-left: 20px; }.milestone-constellation { grid-template-columns: 1fr; }.milestone-card { min-height: 0; }.training-strip { grid-template-columns: 1fr; gap: 14px; margin-top: 38px; }.volunteer-layout { grid-template-columns: 1fr; gap: 24px; }.volunteer-hills { height: 100px; }.contact { min-height: 790px; padding: 129px 24px 82px; }.contact-copy { width: 100%; }.contact h2 { font-size: clamp(43px, 12.2vw, 71px); }.contact-copy > p:not(.handwritten) { max-width: 370px; font-size: 14px; }.contact-room { right: -26%; bottom: 20%; width: 92vw; height: 40%; opacity: .4; }.contact-socials { top: auto; bottom: 128px; left: 24px; right: auto; width: min(330px, calc(100% - 48px)); }.contact-forest { height: 19%; }.contact footer { left: 24px; right: 24px; bottom: 21px; }.contact footer p:last-child { display: none; } }
@media (max-width: 420px) { .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; }.profile-composition { bottom: 4%; width: 47vw; height: 33vh; }.eyebrow { font-size: 9px; }.hero h1 { font-size: 51px; }.section h2 { font-size: 40px; }.skill-trail { margin-right: -24px; margin-left: -24px; }.skill-cluster { padding: 22px 15px; }.skill-cluster p { font-size: 11px; }.project-meta { font-size: 8px; }.project-copy { padding: 28px 22px; }.project-copy h3 { font-size: 31px; }.project-copy > p { font-size: 13px; }.timeline-card h3 { font-size: 26px; }.timeline-card > p:last-child { font-size: 13px; }.contact-socials { grid-template-columns: 1fr 1fr; }.social-link { padding: 10px; }.contact-room { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }