:root {
  --ink: #20211f;
  --muted: #777871;
  --line: #dedfd9;
  --cream: #f6f6f0;
  --paper: #fcfcf8;
  --green: #c8d8c4;
  --green-dark: #273c31;
  --coral: #e5896c;
  --blue: #b8cfe0;
  --font-scale: 1;
  --line-height: 1.5;
  --letter-spacing: normal;
  --word-spacing: normal;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
html[data-theme="dark"] {
  --ink: #f3f5ef;
  --muted: #b7beb4;
  --line: #3d4942;
  --cream: #202a25;
  --paper: #111714;
  --green: #385746;
  --green-dark: #b8d7bd;
  --coral: #f19b7b;
  --blue: #365165;
}
html[data-theme="dark"] .button-primary { color: #142018; }
html[data-theme="dark"] .portrait-initials,
html[data-theme="dark"] .portrait-note,
html[data-theme="dark"] .portrait-code { color: #102017; }
html[data-theme="dark"] .main-nav a:hover,
html[data-theme="dark"] .main-nav a.active { color: var(--ink); border-color: var(--ink); }
html[data-theme="dark"] .main-nav { background: var(--paper); }
html[data-contrast="high"] { filter: contrast(1.25); }
html[data-monochrome="true"] { filter: grayscale(1); }
html[data-font="dyslexia"] body { font-family: Verdana, Arial, sans-serif; }
html[data-font="dyslexia"] h1,
html[data-font="dyslexia"] h2,
html[data-font="dyslexia"] .large-copy { font-family: Verdana, Arial, sans-serif; letter-spacing: .01em; }
html[data-letter-spacing="wide"] body { letter-spacing: .05em; }
html[data-word-spacing="wide"] body { word-spacing: .12em; }
html[data-line-height="high"] body { line-height: var(--line-height); }
html[data-line-width="narrow"] .site-shell { max-width: 900px; }
html[data-cursor="large"], html[data-cursor="large"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M3 2l7 25 5-9 9 5z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 2 2, auto; }
html[data-animations="off"] *, html[data-animations="off"] *::before, html[data-animations="off"] *::after { animation: none !important; transition: none !important; }
html[data-animations="off"] .reveal { opacity: 1 !important; transform: none !important; }
body { font-size: calc(1rem * var(--font-scale)); line-height: var(--line-height); letter-spacing: var(--letter-spacing); word-spacing: var(--word-spacing); }
a { color: inherit; text-decoration: none; }
.site-shell { max-width: 1320px; margin: auto; padding: 0 48px; }
.site-header { height: 96px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; background: var(--green-dark); color: white; border-radius: 50%; font: 500 11px "DM Mono", monospace; }
.main-nav { display: flex; align-items: center; gap: 34px; color: var(--muted); font-size: 14px; }
.main-nav a { padding: 8px 0; border-bottom: 1px solid transparent; transition: .2s; }
.main-nav button { padding: 8px 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.main-nav a:hover, .main-nav a.active { color: var(--ink); border-color: var(--ink); }
.menu-toggle { display: none; border: 0; background: none; font: 500 12px "DM Mono", monospace; text-transform: uppercase; }
.section-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8%; align-items: center; }
.hero { min-height: 620px; padding: 78px 0 88px; }
.eyebrow, .project-type, .watch-tag, .watch-date { font: 500 11px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { color: var(--muted); }
.dot { display: inline-block; width: 7px; height: 7px; margin-left: 8px; background: var(--coral); border-radius: 50%; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 710px; margin: 24px 0; font-size: clamp(46px, 6vw, 78px); line-height: .99; letter-spacing: -.055em; font-weight: 600; }
h1 em, .large-copy em { font-family: "Playfair Display", serif; font-weight: 500; }
.lede { max-width: 485px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin: 36px 0 46px; }
.button { display: inline-flex; gap: 22px; align-items: center; border: 0; cursor: pointer; padding: 17px 20px; font: 600 13px "DM Sans", sans-serif; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--green-dark); color: white; }
.text-link { padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-size: 13px; }
.text-link span { margin-left: 12px; }
.availability { color: var(--muted); font: 11px "DM Mono", monospace; }
.pulse { display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: #87aa7d; border-radius: 50%; box-shadow: 0 0 0 4px #e5eee2; }
.hero-visual { position: relative; max-width: 440px; justify-self: end; width: 100%; }
.portrait-card { height: 470px; position: relative; overflow: hidden; background: var(--green); }
.portrait-glow { position: absolute; width: 300px; height: 300px; background: #eff3dc; border-radius: 50%; top: 75px; left: 70px; }
.portrait-initials { position: absolute; inset: 0; display: grid; place-items: center; color: var(--green-dark); font: 600 135px "Playfair Display", serif; letter-spacing: -.1em; }
.portrait-note, .portrait-code { position: absolute; font: 10px "DM Mono", monospace; color: var(--green-dark); }
.portrait-note { left: 24px; bottom: 22px; }.portrait-code { right: 24px; top: 24px; display: flex; flex-direction: column; text-align: right; line-height: 1.5; }
.floating-tag { position: absolute; background: var(--paper); padding: 12px 15px; font: 10px "DM Mono", monospace; box-shadow: 0 8px 20px #263a3120; }
.tag-top { top: 35px; right: -30px; }.tag-bottom { bottom: 28px; left: -30px; }
.trusted { border-top: 1px solid var(--line); padding: 55px 0 76px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.service-card { min-height: 220px; padding: 25px; border: 1px solid var(--line); position: relative; }
.service-card-featured { background: var(--cream); border-color: var(--cream); }.service-number { color: var(--muted); font: 11px "DM Mono", monospace; }.service-icon { position: absolute; right: 25px; font-size: 25px; color: var(--coral); }
.service-card h2 { margin: 55px 0 11px; font-size: 18px; }.service-card p, .watch-item p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.site-footer { display: flex; justify-content: space-between; padding: 26px 0; border-top: 1px solid var(--line); color: var(--muted); font: 10px "DM Mono", monospace; }.site-footer a { color: var(--ink); }
.page-intro { padding: 100px 0 75px; }.page-intro h1 { font-size: clamp(48px, 6vw, 76px); }.intro-text { max-width: 380px; margin: 34px 0 0 auto; color: var(--muted); line-height: 1.65; }.page-intro-row { display: flex; justify-content: space-between; align-items: end; }
.about-layout { display: grid; grid-template-columns: 220px 1fr; gap: 12%; padding: 55px 0 85px; border-top: 1px solid var(--line); }.about-avatar { width: 145px; height: 145px; display: grid; place-items: center; background: var(--coral); color: white; font: 55px "Playfair Display", serif; }.signature { margin: 21px 0 4px; font-weight: 600; }.muted { color: var(--muted); font-size: 13px; line-height: 1.5; }
.about-content { max-width: 700px; }.large-copy { font: 500 28px/1.35 "Playfair Display", serif; }.about-content > p:not(.large-copy) { color: var(--muted); line-height: 1.7; max-width: 610px; }.facts-grid { display: flex; gap: 50px; border-top: 1px solid var(--line); margin-top: 45px; padding-top: 24px; }.facts-grid div { display: flex; gap: 12px; align-items: flex-start; }.facts-grid strong { font: 28px "Playfair Display", serif; }.facts-grid span { color: var(--muted); font: 11px/1.4 "DM Mono", monospace; }.skills-section { border-top: 1px solid var(--line); padding: 55px 0 85px; }.skills-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }.skills-list span { padding: 11px 15px; background: var(--cream); font: 11px "DM Mono", monospace; }
.projects-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 46px 24px; border-top: 1px solid var(--line); padding-top: 45px; }.project-main { grid-row: span 2; }.project-art { height: 250px; position: relative; overflow: hidden; }.project-main .project-art { height: 540px; }.art-sauge { background: #d2deca; }.art-blue { background: var(--blue); }.art-coral { background: var(--coral); }.art-label { position: absolute; top: 22px; left: 24px; font: 500 26px/1 "DM Mono", monospace; letter-spacing: -.1em; }.art-tech { position: absolute; right: 24px; bottom: 20px; font: 10px "DM Mono", monospace; }.art-shape { position: absolute; width: 310px; height: 310px; border: 45px solid var(--green-dark); border-radius: 50%; bottom: -120px; right: 12%; }.art-grid { position: absolute; inset: 20% 13%; background: repeating-linear-gradient(90deg, transparent 0 26px, #ffffff55 27px 28px), repeating-linear-gradient(0deg, transparent 0 26px, #ffffff55 27px 28px); transform: rotate(-15deg); }.art-circle { position: absolute; width: 230px; height: 230px; right: 12%; bottom: -40px; background: #f6ceb9; border-radius: 50%; }.project-meta { display: flex; justify-content: space-between; align-items: start; padding-top: 15px; }.project-type { color: var(--muted); }.project-meta h2 { margin: 8px 0; font-size: 20px; }.project-meta p { max-width: 470px; margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }.project-link { color: var(--green-dark); font: 11px "DM Mono", monospace; text-decoration: underline; text-underline-offset: 3px; }.arrow-circle { border: 1px solid var(--line); border-radius: 50%; padding: 8px 10px; }.project-card:hover .arrow-circle { background: var(--ink); color: white; }.cta-strip { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 35px 0; margin: 80px 0; }.cta-strip p { margin: 0; font: 22px "Playfair Display", serif; }
.watch-list { border-top: 1px solid var(--line); }.watch-item { display: grid; grid-template-columns: 115px 1fr 30px; gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--line); }.watch-date { color: var(--muted); padding-top: 4px; }.watch-tag { color: var(--coral); }.watch-item h2 { max-width: 620px; margin: 11px 0 8px; font: 500 24px "Playfair Display", serif; }.watch-item p { max-width: 620px; margin-bottom: 0; }.watch-arrow { font-size: 20px; }.newsletter { display: flex; justify-content: space-between; align-items: end; background: var(--cream); padding: 40px; margin: 75px 0; }.newsletter h2 { margin: 15px 0 0; font: 500 28px "Playfair Display", serif; }.newsletter-form { display: flex; border-bottom: 1px solid var(--ink); }.newsletter-form input { border: 0; background: none; width: 210px; padding: 14px 0; outline: 0; }.newsletter-form .button { padding: 14px 0 14px 16px; }.newsletter-form button:disabled { opacity: .7; }
.home-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: 13%; padding: 75px 0; border-top: 1px solid var(--line); }.home-story h2 { margin: 20px 0 0; font: 500 36px/1.1 "Playfair Display", serif; }.story-copy { max-width: 560px; color: var(--muted); line-height: 1.7; }.passion-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }.passion-tags span { padding: 9px 12px; border: 1px solid var(--line); color: var(--ink); font: 10px "DM Mono", monospace; }.home-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 34px 0 78px; }.home-metrics div { display: flex; gap: 14px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--line); }.home-metrics strong { font: 30px "Playfair Display", serif; }.home-metrics span { color: var(--muted); font: 11px/1.4 "DM Mono", monospace; }.interest-grid, .process-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 30px; }.interest-grid article, .process-grid article { padding: 24px; border: 1px solid var(--line); }.interest-code { color: var(--coral); font: 10px "DM Mono", monospace; }.interest-grid h2, .process-grid h2 { margin: 35px 0 10px; font-size: 19px; }.interest-grid p, .process-grid p, .watch-note > p { color: var(--muted); font-size: 14px; line-height: 1.6; }.project-process { border-top: 1px solid var(--line); padding: 55px 0 20px; }.process-grid { grid-template-columns: repeat(3, 1fr); }.process-grid strong { font: 12px "DM Mono", monospace; color: var(--coral); }.watch-note { display: grid; grid-template-columns: 1fr 1fr; gap: 13%; padding: 55px 0; border-top: 1px solid var(--line); }.watch-note h2 { margin-top: 18px; font: 500 30px/1.15 "Playfair Display", serif; }.watch-note > p { margin: 0; max-width: 500px; }.contact-note { border-top: 1px solid var(--line); padding: 50px 0 80px; }.contact-note-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }.contact-note-grid span { padding: 12px 15px; background: var(--cream); font: 11px "DM Mono", monospace; }.contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 13%; padding: 110px 0 150px; }.contact-copy h1 { font-size: clamp(50px, 6vw, 78px); }.contact-details { display: flex; flex-direction: column; gap: 12px; margin-top: 60px; font: 12px "DM Mono", monospace; }.contact-details a { text-decoration: underline; }.contact-form { display: flex; flex-direction: column; align-self: center; padding: 35px; background: var(--cream); }.contact-form label { margin-top: 20px; color: var(--muted); font: 11px "DM Mono", monospace; text-transform: uppercase; }.contact-form input, .contact-form textarea { margin-top: 8px; padding: 13px 0; background: transparent; border: 0; border-bottom: 1px solid #bbbdb5; color: var(--ink); font: 14px "DM Sans", sans-serif; outline: 0; resize: vertical; }.contact-form input:focus, .contact-form textarea:focus { border-color: var(--green-dark); }.contact-form .button { align-self: start; margin-top: 32px; }.form-status { min-height: 18px; margin: 15px 0 0; color: var(--green-dark); font-size: 12px; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes portfolio-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes portfolio-pulse { 0%, 100% { box-shadow: 0 0 0 4px #e5eee2; } 50% { box-shadow: 0 0 0 8px #e5eee200; } }
.hero-visual { animation: portfolio-float 5s ease-in-out infinite; }
.pulse { animation: portfolio-pulse 2.2s ease-in-out infinite; }
.theme-toggle, .accessibility-toggle { min-width: 44px; min-height: 44px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.theme-toggle { margin-left: 16px; }
.accessibility-toggle { position: fixed; z-index: 20; right: 20px; bottom: 20px; border-radius: 50%; box-shadow: 0 6px 18px #0003; }
.accessibility-panel { position: fixed; z-index: 19; right: 20px; bottom: 76px; width: min(360px, calc(100vw - 40px)); max-height: calc(100vh - 100px); overflow: auto; padding: 22px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 12px 32px #0004; }
.accessibility-panel[hidden] { display: none; }
.accessibility-panel h2 { margin: 0 0 15px; font-size: 20px; }
.accessibility-panel fieldset { margin: 0 0 14px; padding: 12px; border: 1px solid var(--line); }
.accessibility-panel legend { padding: 0 5px; font-weight: 600; }
.accessibility-panel label { display: block; margin: 9px 0; font-size: 14px; }
.accessibility-panel input, .accessibility-panel select { margin-right: 7px; }
.reading-guide { position: fixed; z-index: 18; left: 0; right: 0; height: 3px; pointer-events: none; background: var(--coral); box-shadow: 0 0 0 9999px #0001; }
.easter-egg-active { --coral: #b89cff; --green: #c9c1ef; --blue: #9dbbe8; }.easter-egg-active .portrait-glow { background: #e8ddff; }.easter-egg-active .hero-visual { animation-duration: 2.8s; }.easter-egg-notice { position: fixed; z-index: 30; right: 20px; bottom: 76px; padding: 14px 17px; background: var(--green-dark); color: white; box-shadow: 0 10px 24px #0003; font: 11px "DM Mono", monospace; animation: notice-in .25s ease-out; }@keyframes notice-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.timeline-section { border-top: 1px solid var(--line); }.timeline-item { display: grid; grid-template-columns: 150px 1fr; gap: 30px; padding: 30px 0; border-bottom: 1px solid var(--line); }.timeline-item time { color: var(--muted); font: 11px "DM Mono", monospace; }.timeline-item h2 { margin: 10px 0; font: 500 25px "Playfair Display", serif; }.timeline-item p, .career-grid p, .career-goal p { max-width: 650px; color: var(--muted); line-height: 1.65; }.career-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.career-grid article { padding: 30px; background: var(--cream); }.career-grid h2 { max-width: 360px; margin: 18px 0 12px; font-size: 23px; }.career-grid .skills-list { margin-top: 25px; }.career-goal { border-top: 1px solid var(--line); padding: 65px 0 85px; }.career-goal h2 { max-width: 680px; margin: 18px 0 12px; font: 500 38px/1.1 "Playfair Display", serif; }.career-goal .button { margin-top: 18px; }
.accessibility-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.reading-progress { position: fixed; z-index: 10; top: 0; left: 0; height: 4px; width: 0; background: var(--coral); }
.copy-code { padding: 6px 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font: 10px "DM Mono", monospace; }
@media (max-width: 760px) { .theme-toggle { margin-left: 8px; } .accessibility-toggle { right: 14px; bottom: 14px; } .accessibility-panel { right: 14px; bottom: 70px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media (max-width: 760px) {
  .site-shell { padding: 0 22px; }.site-header { height: 76px; }.menu-toggle { display: block; }.main-nav { display: none; position: absolute; z-index: 2; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 22px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }.main-nav.is-open { display: flex; }.main-nav a { padding: 13px 0; }.section-grid, .contact-layout, .about-layout, .home-story, .watch-note, .career-grid { grid-template-columns: 1fr; }.hero { padding: 58px 0 70px; }.hero-visual { justify-self: auto; margin-top: 25px; }.portrait-card { height: 360px; }.floating-tag { display: none; }.service-grid, .projects-grid, .process-grid, .interest-grid, .home-metrics { grid-template-columns: 1fr; }.project-main { grid-row: auto; }.project-main .project-art { height: 340px; }.page-intro, .page-intro-row { display: block; padding: 65px 0 50px; }.intro-text { margin: 24px 0 0; }.about-layout { gap: 40px; }.facts-grid { gap: 20px; flex-wrap: wrap; }.timeline-item { grid-template-columns: 1fr; gap: 12px; }.watch-item { grid-template-columns: 1fr 25px; gap: 12px; }.watch-date { grid-column: 1 / -1; }.newsletter { display: block; padding: 28px; }.newsletter-form { margin-top: 25px; }.newsletter-form input { width: 100%; }.contact-layout { padding: 65px 0 90px; gap: 50px; }.contact-form { padding: 25px; }.site-footer { gap: 12px; flex-wrap: wrap; }.site-footer span:nth-child(2) { display: none; }
}