:root{color-scheme:dark;--bg:#0b1018;--panel:#141d28;--panel-2:#1a2632;--line:#34424c;--ink:#f1f5f1;--muted:#aab8b6;--accent:#d8fa6a;--accent-ink:#16210b;--max:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.skip{position:absolute;top:-5rem;left:1rem;background:var(--accent);color:var(--accent-ink);padding:.5rem 1rem;z-index:50}.skip:focus{top:1rem}
.site-header,.wrap,.site-footer{width:min(calc(100% - 3rem),var(--max));margin-inline:auto}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.8rem;font-weight:800;letter-spacing:-.04em}.brand-mark{display:grid;place-items:center;width:2.4rem;height:2.4rem;background:var(--accent);color:var(--accent-ink);font-size:.8rem;border-radius:.35rem}.brand-name{font-size:.96rem}
.nav{display:flex;flex-wrap:wrap;gap:.3rem}.nav a{font-size:.9rem;padding:.55rem .85rem;color:var(--muted);border-radius:999px}.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);background:var(--panel-2)}
.eyebrow{display:flex;align-items:center;gap:.7rem;color:var(--accent);font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.eyebrow:before{content:"";display:block;width:1.35rem;height:1px;background:currentColor}
h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.055em;line-height:1.08}h1{font-size:clamp(3.15rem,7vw,6.6rem);max-width:13ch;margin-bottom:1.5rem}h2{font-size:clamp(2.25rem,4.5vw,4.1rem);margin-bottom:1.2rem}h3{font-size:1.5rem;margin-bottom:.7rem}.lead{font-size:clamp(1.12rem,1.6vw,1.4rem);line-height:1.55;color:#d6dfdc;max-width:38rem}.muted{color:var(--muted)}
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr);gap:clamp(2rem,5vw,5rem);align-items:end;padding:clamp(4rem,8vw,8rem) 0 5rem}.hero h1 em{font-style:normal;color:var(--accent)}.hero-copy{padding-bottom:1rem}.hero-visual{position:relative;min-height:27rem;border:1px solid var(--line);background:linear-gradient(145deg,#1f3040,#101923);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:1.7rem;border-radius:1.1rem}.hero-visual:before{content:"";position:absolute;width:21rem;height:21rem;border:1px solid #648178;border-radius:50%;right:-6rem;top:2.5rem;box-shadow:0 0 0 4.2rem #1b2c37,0 0 0 4.28rem #648178,0 0 0 8.3rem #1a2933,0 0 0 8.38rem #648178;opacity:.45}.hero-visual>*{position:relative}.visual-top{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}.visual-bottom{font-size:clamp(2rem,4vw,3.7rem);line-height:1.05;letter-spacing:-.06em;font-weight:800;max-width:9ch}.visual-bottom span{color:var(--accent)}
.button-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}.button{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.75rem 1.15rem;border-radius:.4rem;font-weight:700;font-size:.94rem;border:1px solid var(--line);transition:transform .18s,background .18s}.button:hover{transform:translateY(-2px)}.button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.button.secondary{background:#17222d}
.section{padding:4.5rem 0;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:2rem}.section-heading p{max-width:28rem;color:var(--muted);margin-bottom:.25rem}.two-up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.feature{min-height:18rem;padding:2rem;background:var(--panel);border:1px solid var(--line);border-radius:.8rem;display:flex;flex-direction:column;justify-content:space-between}.feature:hover{border-color:#708b79}.feature-index{font-weight:800;color:var(--accent);font-size:.85rem}.feature p{color:var(--muted);max-width:30rem}.text-link{display:inline-block;color:var(--accent);font-weight:700;margin-top:.7rem}.text-link:hover{text-decoration:underline}
.contact-band{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:end;background:var(--accent);color:var(--accent-ink);border-radius:1rem;padding:clamp(2rem,4vw,3.3rem);margin:4rem 0}.contact-band .eyebrow{color:#365114}.contact-band h2{max-width:12ch}.contact-band p{max-width:33rem}.contact-list{display:grid;gap:.7rem}.contact-item{border-top:1px solid #90af42;padding-top:.75rem;font-weight:700}.contact-item small{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.page-head{padding:clamp(4rem,8vw,7rem) 0 3.5rem}.page-head h1{max-width:13ch}.page-head .lead{max-width:45rem}.meta-line{margin-top:2rem;color:var(--muted);font-size:.86rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem 0 4rem}.stat{padding:1.5rem;background:var(--panel);border:1px solid var(--line);border-radius:.6rem}.stat-value{display:block;color:var(--accent);font-size:clamp(1.6rem,3vw,2.6rem);font-weight:800;letter-spacing:-.05em}.stat-label{color:var(--muted);font-size:.89rem}
.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.game-card{background:var(--panel);border:1px solid var(--line);border-radius:.8rem;overflow:hidden}.game-art{aspect-ratio:4/3;display:grid;place-items:center;padding:1.5rem;text-align:center;background:repeating-linear-gradient(135deg,#1a2935 0,#1a2935 2px,#1d2d38 2px,#1d2d38 16px);color:#94aaa9;border-bottom:1px solid var(--line);font-size:.85rem}.game-body{padding:1.4rem}.game-body h3{margin-bottom:.5rem}.game-body p{color:var(--muted);font-size:.95rem}.game-meta{padding-top:1rem;margin-top:1rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--accent);font-weight:700}
.story{display:grid;grid-template-columns:.75fr 1.25fr;gap:3rem}.story>p{color:var(--muted)}.story .big-copy{font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.4;letter-spacing:-.025em;color:var(--ink)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.step{padding:1.6rem;background:var(--panel);border-top:2px solid var(--accent);border-radius:0 0 .6rem .6rem}.step-num{color:var(--accent);font-weight:800;font-size:.8rem;margin-bottom:3rem}.step p{color:var(--muted);margin-bottom:0}
.note{border:1px dashed #728075;border-radius:.6rem;padding:1.2rem 1.4rem;color:var(--muted);margin-top:2rem}.note strong{color:var(--ink)}
.site-footer{display:flex;justify-content:space-between;gap:1.5rem;padding:2rem 0 3rem;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem}.site-footer a:hover{color:var(--accent)}
@media(max-width:800px){.hero,.contact-band,.story{grid-template-columns:1fr}.hero{padding-top:4rem}.hero-visual{min-height:19rem}.game-grid,.steps{grid-template-columns:1fr 1fr}.section-heading{display:block}.section-heading p{margin-top:1rem}.contact-band{margin:2rem 0}}
@media(max-width:560px){.site-header{align-items:flex-start;flex-direction:column}.nav{width:100%;justify-content:space-between}.nav a{padding:.5rem .65rem}.site-header,.wrap,.site-footer{width:min(calc(100% - 2rem),var(--max))}.hero{padding-bottom:3rem}.hero-visual{min-height:17rem}.two-up,.game-grid,.steps,.stat-grid{grid-template-columns:1fr}.feature{min-height:15rem}.section{padding:3rem 0}.site-footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}
.hero-visual.photo{margin:0;padding:0;min-height:31rem;aspect-ratio:4/5;background:#1e2f3a}.hero-visual.photo:before{display:none}.hero-visual.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 64%}.photo-caption{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;gap:1rem;align-items:end;width:100%;padding:3.5rem 1.5rem 1.4rem;background:linear-gradient(transparent,rgba(7,13,20,.85));font-size:.73rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.photo-caption span:last-child{color:var(--accent);text-align:right}
.contact-item{overflow-wrap:anywhere}.contact-item:hover{text-decoration:underline}.snapshot .stat-grid{margin:0}.game-card{display:flex;flex-direction:column}.game-art{aspect-ratio:1/1;padding:0;display:block;overflow:hidden}.game-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}.game-art:hover img{transform:scale(1.035)}.game-body{display:flex;flex-direction:column;flex:1}.game-body p{min-height:3rem}.game-metrics{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem}.game-metrics span{min-width:6rem}.game-metrics strong{display:block;color:var(--ink);font-size:1.35rem;line-height:1.2}.game-body .text-link{margin-top:1rem}.next-panel{margin-top:1rem;padding:1.6rem;border:1px solid var(--line);border-radius:.7rem;background:var(--panel-2)}.next-panel h3{margin:.7rem 0 .3rem}.next-panel p{color:var(--muted);margin:0}.stage-row{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2rem}.stage-pill{padding:.5rem .8rem;border:1px solid var(--line);background:var(--panel);border-radius:999px;font-size:.82rem;font-weight:700;color:var(--accent)}
@media(max-width:800px){.hero-visual.photo{min-height:23rem;aspect-ratio:3/2}}
@media(max-width:560px){.hero-visual.photo{min-height:22rem;aspect-ratio:5/4}.photo-caption{font-size:.65rem}.game-metrics span{min-width:7rem}}
@media(prefers-reduced-motion:reduce){.game-art img{transition:none}}
@media(max-width:650px){.stat-grid{grid-template-columns:1fr;margin-bottom:3rem}.stat{padding:1.25rem}.stat-value{font-size:2rem}}
.roadmap{grid-template-columns:repeat(4,minmax(0,1fr))}.roadmap .step-num{margin-bottom:2.5rem}.roadmap h3{font-size:1.35rem}.deck-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.deck-highlight{display:flex;flex-direction:column;gap:1rem;min-height:18rem;padding:1.7rem;background:var(--panel);border:1px solid var(--line);border-radius:.7rem}.deck-highlight strong{display:block;font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.05;letter-spacing:-.055em}.deck-highlight p{color:var(--muted);margin:auto 0 0}.deck-links{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.3rem}
@media(max-width:1000px){.roadmap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.deck-highlights{grid-template-columns:1fr}.deck-highlight{min-height:0}.deck-highlight p{margin:0}}
@media(max-width:560px){.roadmap{grid-template-columns:1fr}}

/* A warm editorial identity for the personal portfolio. */
:root{color-scheme:light;--bg:#f6f3ed;--panel:#fffdf9;--panel-2:#e8eae2;--line:#d9ddd5;--ink:#172c2a;--muted:#5f6b68;--accent:#bd5b3c;--accent-ink:#fff}
body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
body:before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:51rem;background:radial-gradient(ellipse at 80% 10%,#f6ded1 0,transparent 49%),radial-gradient(ellipse at 0 38%,#e7eee7 0,transparent 44%);pointer-events:none}
.site-header{padding:1.4rem 0}.brand-mark{border-radius:50%;background:var(--ink);color:#f1bd85}.nav a{font-weight:700}.nav a:hover,.nav a[aria-current="page"]{background:var(--ink);color:#fff}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.055em}h1{font-size:clamp(3.6rem,7.8vw,7.6rem);max-width:11ch}h2{font-size:clamp(2.5rem,4.9vw,4.7rem);max-width:15ch}h3{letter-spacing:-.035em}.lead{color:#394d49}
.hero{grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);align-items:center;gap:clamp(2.5rem,6vw,6rem);padding:clamp(4rem,8vw,7rem) 0 6rem}.hero h1 em{font-style:italic}.hero-copy:after{content:"";display:block;width:5rem;height:1px;margin-top:3rem;background:var(--accent)}
.hero-visual.photo{aspect-ratio:4/5;min-height:31rem;border:0;border-radius:13rem 13rem .6rem .6rem;background:#d8d6ce;box-shadow:22px 24px 0 #e6e4da,0 25px 70px #243b3125}.hero-visual.photo img{object-position:center 61%}.photo-caption{background:linear-gradient(transparent,#0c1e1ddc);color:#fff}.photo-caption span:last-child{color:#ffd3a7}
.button{border-radius:999px;border-color:var(--ink);font-weight:800}.button.primary{background:var(--ink);border-color:var(--ink);color:#fff}.button.primary:hover{background:#30504a}.button.secondary{background:transparent}.button.secondary:hover{background:#f4d8c7;border-color:var(--accent)}
.feature,.stat,.game-card,.step{background:var(--panel);box-shadow:0 12px 30px #22352b0a}.feature{min-height:20rem;border-radius:1.1rem;transition:transform .22s,box-shadow .22s}.feature:hover{transform:translateY(-4px);box-shadow:0 20px 35px #22352b18}.feature:nth-child(2){background:var(--panel-2)}.feature h3{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.9rem,3vw,2.5rem);font-weight:500}.feature-index{letter-spacing:.11em}.text-link:after{content:"↗";margin-left:.4rem}
.stat{position:relative;min-height:10rem;border-radius:.9rem}.stat:before{content:"";position:absolute;top:0;left:1.5rem;width:2.5rem;height:3px;background:var(--accent)}.stat-value{margin:.5rem 0 .35rem;color:var(--ink);font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,3vw,3rem);font-weight:500}.stat-label{color:var(--muted)}
.contact-band{background:var(--ink);color:#fff;box-shadow:0 24px 45px #0e2b2a22}.contact-band .eyebrow{color:#f0bc8f}.contact-band p{color:#c6d4ce}.contact-item{border-color:#55706b}.contact-item:hover{color:#f0bc8f}
.game-card{border-radius:1rem;transition:transform .2s,box-shadow .2s}.game-card:hover{transform:translateY(-4px);box-shadow:0 22px 36px #22352b18}.game-art{background:#e3e8de}.game-card:hover .game-art img{transform:scale(1.04)}.game-metrics strong{color:var(--ink);font-family:Georgia,"Times New Roman",serif;font-size:1.5rem;font-weight:500}.next-panel{background:var(--panel-2);border-radius:.9rem}
.story .big-copy{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.42}.stage-pill{background:var(--panel-2);color:#38584f}.step{border-top:3px solid var(--accent);border-radius:.35rem .35rem .9rem .9rem}.deck-highlight{background:var(--panel-2);border-radius:.9rem}.deck-highlight strong{font-family:Georgia,"Times New Roman",serif;font-weight:500}
@media(max-width:800px){.hero{grid-template-columns:1fr}.hero-visual.photo{width:min(100%,37rem);min-height:0;aspect-ratio:4/4;margin:0 auto}}
@media(max-width:560px){.hero h1{font-size:clamp(3.3rem,14vw,5.2rem)}.hero-visual.photo{aspect-ratio:5/5;border-radius:9rem 9rem .6rem .6rem;box-shadow:10px 12px 0 #e6e4da}.feature{min-height:16rem}.stat{min-height:0}}