:root {
  color-scheme: dark;
  --background: #070b12;
  --surface: #101722;
  --text: #f3f6fa;
  --muted: #9ba8b8;
  --accent: #3eb8ff;
  --accent-bright: #86d4ff;
  --border: rgba(173, 193, 214, 0.18);
  --max-width: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--background); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
body::before { position: fixed; z-index: -1; inset: 0; background: radial-gradient(circle at 74% 7%, rgba(24, 97, 145, 0.2), transparent 29rem); content: ""; pointer-events: none; }
a { color: inherit; }
.site-header, main, .site-footer { width: min(calc(100% - 4rem), var(--max-width)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.8rem 0; }
.site-header::before { position: absolute; top: 0; left: 50%; z-index: -1; width: 100vw; height: 100%; content: ""; transform: translateX(-50%); transition: background-color 180ms ease, backdrop-filter 180ms ease, box-shadow 180ms ease; }
.site-header.is-scrolled::before { background: rgba(3, 8, 14, 0.86); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); }
.brand { color: var(--text); text-decoration: none; }
.brand-name { display: block; white-space: nowrap; font-size: 1.26rem; font-weight: 800; letter-spacing: 0.05em; line-height: 1; text-transform: uppercase; }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2rem; }
.main-nav a { position: relative; color: var(--muted); font-size: 0.88rem; text-decoration: none; transition: color 160ms ease; }
.main-nav a:hover, .main-nav a.active { color: var(--text); }
.main-nav a.active::after { position: absolute; right: 0; bottom: -0.75rem; left: 0; height: 2px; background: var(--accent); box-shadow: 0 0 9px rgba(62, 184, 255, 0.75); content: ""; }
.hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr); align-items: start; gap: 3rem; min-height: auto; padding: 2.75rem 0 2rem; }
.hero-copy { max-width: 690px; }
.hero-title { max-width: none; margin-bottom: 0.7rem; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -0.045em; }
.hero-subtitle { max-width: 610px; margin-bottom: 1.45rem; color: var(--text); font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.1; letter-spacing: -0.03em; }
.eyebrow { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1.1rem; color: var(--accent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.eyebrow-line { display: inline-block; width: 2.8rem; height: 1px; background: var(--accent); opacity: 0.7; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -0.05em; }
h1 { max-width: 700px; margin-bottom: 1.4rem; font-size: clamp(3.2rem, 7.4vw, 6.5rem); line-height: 0.94; }
h1 span, h2 span { color: var(--accent); }
h2 { margin-bottom: 1.4rem; font-size: clamp(2.2rem, 4.4vw, 4.4rem); line-height: 0.98; }
h3 { margin-bottom: 0.2rem; font-size: 1.15rem; }
.intro { max-width: 570px; margin-bottom: 0; color: var(--muted); font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2.1rem; }
.button { display: inline-flex; align-items: center; gap: 0.65rem; border-radius: 999px; padding: 0.82rem 1.2rem; font-size: 0.88rem; font-weight: 750; text-decoration: none; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--accent); color: #04111c; }
.button-primary:hover { background: var(--accent-bright); }
.press-kit-download-button { background: #1687e8; color: #ffffff; box-shadow: 0 0.5rem 1.4rem rgba(22, 135, 232, 0.25); }
.press-kit-download-button:hover { background: #45b2ff; color: #04111c; }
.button-secondary { border: 1px solid var(--border); background: transparent; }
.button-secondary:hover { border-color: var(--accent); color: var(--accent); }
.text-link { color: var(--text); font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.text-link span { margin-left: 0.35rem; color: var(--accent); transition: margin 160ms ease; }
.text-link:hover span { margin-left: 0.6rem; }
.hero-visual { position: relative; min-height: 390px; overflow: hidden; border: 1px solid rgba(118, 194, 232, 0.24); border-radius: 1rem; background: radial-gradient(circle at 62% 48%, rgba(35, 128, 177, 0.22), transparent 42%), linear-gradient(145deg, #14334a, #07101c 58%, #241b3e); box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.35), 0 0 80px rgba(33, 139, 194, 0.12); }
.hero-collage { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(123, 207, 244, 0.12), transparent 38%); }
.hero-collage::after { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(4, 12, 21, 0.12), transparent 42%, rgba(8, 10, 28, 0.22)); content: ""; pointer-events: none; }
.hero-collage-item, .hero-collage img { position: absolute; width: 30%; aspect-ratio: 1; border: 1px solid rgba(185, 216, 234, 0.48); border-radius: 0.72rem; object-fit: cover; box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.3), 0 0 1.6rem rgba(62, 184, 255, 0.14); }
.hero-collage-item { display: grid; place-items: center; background: linear-gradient(145deg, #2a6e91, #10243a 62%, #38265b); color: var(--text); }
.hero-collage-item svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.25; }
.hero-collage > :nth-child(1) { top: 5%; right: 14%; transform: rotate(7deg); }
.hero-collage > :nth-child(2) { top: 20%; left: 7%; transform: rotate(-9deg); }
.hero-collage > :nth-child(3) { top: 7%; left: 38%; transform: rotate(-3deg); }
.hero-collage > :nth-child(4) { top: 42%; right: 6%; transform: rotate(10deg); }
.hero-collage > :nth-child(5) { bottom: 7%; left: 17%; transform: rotate(-6deg); }
.hero-collage > :nth-child(6) { bottom: 12%; left: 49%; transform: rotate(4deg); }
.hero-collage > :nth-child(7) { top: 31%; left: 32%; z-index: 5; width: 36%; transform: rotate(-2deg); }
.visual-glow { position: absolute; top: 16%; right: 4%; width: 18rem; height: 18rem; border-radius: 50%; background: rgba(51, 170, 232, 0.2); filter: blur(45px); }
.visual-frame { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(105, 203, 255, 0.35); transform: translate(-50%, -50%) rotate(-18deg); }
.visual-frame-one { width: 80%; height: 44%; }
.visual-frame-two { width: 65%; height: 72%; transform: translate(-50%, -50%) rotate(24deg); }
.visual-panel { position: absolute; top: 50%; left: 50%; display: grid; width: 11rem; height: 11rem; place-content: center; border: 1px solid var(--accent); border-radius: 50%; background: rgba(8, 21, 34, 0.75); box-shadow: 0 0 60px rgba(62, 184, 255, 0.18); text-align: center; transform: translate(-50%, -50%); }
.visual-panel span { color: var(--accent); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em; }
.visual-panel strong { margin-top: 0.35rem; font-size: 1.1rem; line-height: 1.05; }
.visual-label { position: absolute; color: var(--muted); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em; }
.visual-label-top { top: 8%; left: 50%; transform: translateX(-50%); }
.visual-label-right { top: 49%; right: 5%; }
.visual-label-bottom { bottom: 8%; left: 50%; transform: translateX(-50%); }
.capability-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 2.5rem; color: var(--muted); }
.capability-item { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.95rem; font-weight: 700; white-space: nowrap; }
.capability-icon { display: inline-grid; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; place-items: center; border: 1px solid rgba(185, 216, 234, 0.6); border-radius: 0.4rem; color: var(--text); }
.capability-icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.capability-item:nth-child(2) .capability-icon svg { transform: translateY(-0.15rem); }
.section { padding: 7rem 0; border-top: 1px solid var(--border); }
.about-preview { display: grid; grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1.35fr); align-items: center; gap: 3rem; padding: 4.5rem 0; }
.about-photo { display: grid; width: min(85%, 300px); aspect-ratio: 1; min-height: 0; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; background: radial-gradient(circle at 50% 28%, rgba(111, 171, 198, 0.35), transparent 22%), linear-gradient(145deg, #324758, #101b29 60%, #4c2f45); color: rgba(255, 255, 255, 0.65); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.15em; line-height: 1.4; text-align: center; }
.about-photo img, .about-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-preview-copy { max-width: 660px; }
.about-preview-copy h2 { max-width: 620px; font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.about-preview-copy > p:not(.eyebrow) { max-width: 600px; margin-bottom: 1.75rem; color: var(--muted); font-size: 1.05rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.section-heading h2 { max-width: 650px; margin-bottom: 0; }
.projects-section .section-heading h2, .experience-section .section-heading h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.project-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.home-content-section { margin-top: 1.25rem; border: 1px solid var(--border); border-radius: 0.85rem; background: rgba(16, 31, 46, 0.78); padding: 1.5rem; }
.home-content-section.section { border-top: 1px solid var(--border); padding: 1.5rem; }
.detail-hero.home-about-hero { background: transparent; border-color: transparent; }
.detail-hero.home-about-hero { padding-right: calc(1.5rem + 1px); padding-left: calc(1.5rem + 1px); }
.detail-hero.home-about-hero::before { display: none; }
.detail-hero.about-detail-hero { background: transparent; border-color: transparent; }
.detail-hero.about-detail-hero { padding-right: calc(1.5rem + 1px); padding-left: calc(1.5rem + 1px); }
.detail-hero.about-detail-hero::before { display: none; }
.project-card { display: flex; flex-direction: column; overflow: hidden; min-width: 0; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); padding-bottom: 1.25rem; text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.project-card:hover { border-color: rgba(62, 184, 255, 0.8); transform: translateY(-4px); }
.project-art { position: relative; display: grid; min-height: 240px; place-items: center; overflow: hidden; margin-bottom: 1.2rem; }
.project-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wordsee-art { background: linear-gradient(135deg, #184c72, #101d3d 58%, #3a1952); }
.powerless-art { background: linear-gradient(135deg, #292d44, #0c1223 65%, #443c78); }
.tappy-art { background: linear-gradient(135deg, #10394f, #101c36 65%, #193d68); }
.meteor-art { background: linear-gradient(135deg, #263d67, #151936 60%, #8c4e3d); }
.art-label { position: relative; z-index: 1; color: rgba(255,255,255,0.86); font-size: clamp(1.4rem, 3vw, 2.5rem); font-weight: 900; letter-spacing: -0.06em; line-height: 0.86; text-align: center; }
.art-shape { position: absolute; border: 1px solid rgba(134, 212, 255, 0.5); border-radius: 50%; }
.art-shape-one { width: 70%; height: 170%; transform: rotate(35deg); }
.art-shape-two { width: 55%; height: 130%; transform: rotate(-35deg); }
.bolt { color: var(--accent-bright); font-size: 5rem; text-shadow: 0 0 35px var(--accent); }
.tappy-dot { position: absolute; width: 7rem; height: 7rem; border: 1px solid var(--accent); border-radius: 50%; box-shadow: 0 0 0 1rem rgba(62,184,255,0.12), 0 0 0 2rem rgba(62,184,255,0.08); }
.project-card h3, .project-card p { margin-inline: 1.25rem; }
.project-card h3 { margin-bottom: 0.2rem; }
.project-card p { margin-bottom: 1rem; color: var(--muted); font-size: 0.9rem; }
.project-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: auto 1.25rem 0; }
.project-tags span { border: 1px solid rgba(173, 193, 214, 0.2); border-radius: 999px; background: rgba(173, 193, 214, 0.1); padding: 0.25rem 0.65rem; color: var(--text); font-size: 0.68rem; font-weight: 700; }
.statement-section { display: grid; grid-template-columns: 0.55fr 1.45fr; column-gap: 3rem; }
.statement-section h2 { max-width: 800px; grid-column: 2; font-size: clamp(2.7rem, 5.5vw, 5.8rem); }
.statement-bottom { display: flex; grid-column: 2; align-items: center; justify-content: space-between; gap: 2rem; max-width: 740px; margin-top: 1.5rem; }
.statement-bottom p { max-width: 430px; margin-bottom: 0; color: var(--muted); }
.experience-section { display: block; }
.experience-section .section-heading { width: 100%; margin-bottom: 2.5rem; }
.experience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bodyswaps-art { background: linear-gradient(135deg, #4b2c18, #142c3d 55%, #0b1724); }
.laing-art { background: linear-gradient(135deg, #152b39, #0c1620 58%, #526878); }
.amplified-art { background: linear-gradient(135deg, #202020, #0b0e12 60%, #f2f2f2); }
.other-art { background: linear-gradient(135deg, #324d69, #14253b 58%, #8c6d48); }
.orbit-art { background: linear-gradient(135deg, #162c50, #0b1428 58%, #375a85); }
.hyper-art { background: linear-gradient(135deg, #542b72, #17142d 58%, #d36d39); }
.loop-art { background: linear-gradient(135deg, #174f62, #101b2d 58%, #7554a3); }
.medical-art { background: linear-gradient(135deg, #164b5f, #101c2c 58%, #315b66); }
.dunky-art { background: linear-gradient(135deg, #77472d, #201522 58%, #d18e52); }
.knuckles-art { background: linear-gradient(135deg, #542a30, #151522 58%, #8b3c50); }
.word-runner-art { background: linear-gradient(135deg, #2c5c77, #121b2e 58%, #bb6d55); }
.narratio-art { background: linear-gradient(135deg, #46336e, #13152c 58%, #4e90a3); }
.naked-art { background: linear-gradient(135deg, #7a4935, #171b2a 58%, #b2a065); }
.university-art { background: linear-gradient(135deg, #315b72, #101a2c 58%, #684b83); }
.apps-art { background: linear-gradient(135deg, #24586b, #13212d 58%, #3f6d82); }
.orbit-dot, .loop-ring, .medical-cross, .dunky-ball, .knuckle-shape, .runner-line, .dash-line { position: absolute; }
.orbit-dot { width: 6rem; height: 6rem; border: 2px solid var(--accent); border-radius: 50%; box-shadow: 0 0 0 1rem rgba(62,184,255,0.12); }
.loop-ring { width: 7rem; height: 4rem; border: 2px solid rgba(134,212,255,0.75); border-radius: 50%; transform: rotate(-25deg); }
.medical-cross { color: rgba(255,255,255,0.75); font-size: 7rem; font-weight: 200; }
.dunky-ball { width: 5rem; height: 5rem; border-radius: 50%; background: rgba(236,188,116,0.75); box-shadow: 0 0 0 1rem rgba(236,188,116,0.12); }
.knuckle-shape { width: 8rem; height: 4rem; border: 3px solid rgba(245,188,171,0.65); border-radius: 45% 55% 42% 58%; transform: rotate(-18deg); }
.runner-line, .dash-line { width: 75%; height: 2px; background: var(--accent-bright); box-shadow: 0 0 20px var(--accent); transform: rotate(-15deg); }
.dash-line { width: 65%; transform: rotate(22deg); }
.narratio-mark, .naked-mark, .university-mark, .apps-mark { color: rgba(255,255,255,0.78); font-size: 5rem; font-weight: 800; }
.art-person { position: absolute; bottom: -22%; width: 8rem; height: 75%; border-radius: 48% 48% 0 0; background: linear-gradient(110deg, #b67a50, #263642 55%); opacity: 0.85; }
.art-grid { position: absolute; width: 80%; height: 70%; border: 1px solid rgba(134, 212, 255, 0.45); background: linear-gradient(135deg, transparent 48%, rgba(134, 212, 255, 0.22) 49%, transparent 51%); transform: rotate(-8deg); }
.art-robot { color: rgba(255,255,255,0.86); font-size: 4rem; font-weight: 900; letter-spacing: -0.08em; }
.experience-list { border-top: 1px solid var(--border); }
.experience-item { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--border); }
.experience-year { color: var(--accent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.experience-item h3, .experience-item p { margin-bottom: 0; }
.experience-item p { color: var(--muted); font-size: 0.9rem; }
.contact-section { padding-bottom: 8rem; }
.contact-section h2 { max-width: 850px; font-size: clamp(3rem, 7vw, 7rem); }
.page-shell { min-height: 70vh; padding: 8rem 0; }
.page-shell h1 { margin-bottom: 1.5rem; }
.page-intro { max-width: 620px; color: var(--muted); font-size: 1.15rem; }
.page-intro a { color: var(--accent); }
.contact-page { padding-top: 1.5rem; }
.contact-detail-hero { min-height: 330px; }
.contact-detail-hero .detail-hero-content { max-width: 650px; }
.contact-page .contact-layout { margin-top: 2rem; }
.contact-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.25rem; }
.contact-card { border: 1px solid rgba(173, 193, 214, 0.12); border-radius: 0.85rem; background: rgba(16, 31, 46, 0.78); padding: 1.25rem; }
.contact-form { display: grid; gap: 0.8rem; }
.form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.1rem; margin: 0; color: var(--muted); font-size: 0.75rem; }
.form-field { display: grid; gap: 0.35rem; }
.form-field label { color: var(--text); font-size: 0.76rem; font-weight: 700; }
.form-field input, .form-field textarea { width: 100%; border: 1px solid rgba(173, 193, 214, 0.16); border-radius: 0.55rem; background: rgba(173, 193, 214, 0.08); padding: 0.75rem 0.8rem; color: var(--text); font: inherit; font-size: 0.85rem; outline: none; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #8493a4; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(62, 184, 255, 0.12); }
.contact-form .button { justify-self: start; margin-top: 0.1rem; border: 0; cursor: pointer; }
.contact-details h2 { margin-bottom: 1.5rem; font-size: 1.25rem; letter-spacing: -0.02em; }
.contact-list { display: grid; gap: 1.25rem; }
.contact-item { display: flex; align-items: center; gap: 0.9rem; color: var(--text); text-decoration: none; }
.contact-item:hover strong { color: var(--accent); }
.contact-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border: 1px solid var(--accent); border-radius: 0.35rem; color: var(--accent); font-size: 0.9rem; font-weight: 800; }
.contact-item strong, .contact-item small { display: block; }
.contact-item strong { margin-bottom: 0.15rem; font-size: 0.82rem; }
.contact-item small { color: var(--muted); font-size: 0.75rem; }
.about-page { padding-top: 0; }
.about-intro-grid { display: grid; grid-template-columns: minmax(280px, 300px) minmax(0, 1fr); align-items: start; gap: 2rem; }
.about-portrait { display: grid; width: 100%; aspect-ratio: 1; min-height: 0; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 0.85rem; background: radial-gradient(circle at 50% 28%, rgba(111, 171, 198, 0.4), transparent 22%), linear-gradient(145deg, #7d6a59, #263747 58%, #1b2637); color: rgba(255, 255, 255, 0.72); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.15em; line-height: 1.4; text-align: center; }
.about-copy h1 { margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 3.4rem); }
.about-copy p { max-width: 650px; color: var(--muted); font-size: 1.02rem; }
.about-copy .eyebrow { margin-bottom: 0.45rem; color: var(--accent); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.about-section { margin-top: 1.25rem; border: 1px solid var(--border); border-radius: 0.85rem; background: rgba(16, 31, 46, 0.78); padding: 1.5rem; }
.about-section > h2 { margin-bottom: 0.85rem; font-size: 1.45rem; }
.about-story { max-width: none; }
.about-story p { max-width: 800px; color: var(--muted); }
.about-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.about-card, .about-link-card, .about-education-card { border: 1px solid var(--border); border-radius: 0.7rem; background: rgba(7, 17, 31, 0.42); padding: 1.25rem; }
.about-card, .about-link-card { height: 100%; }
.about-card h3, .about-link-card h3, .about-education-card h3 { margin-bottom: 0.55rem; font-size: 1rem; }
.about-card p, .about-link-card p, .about-education-card p { margin-bottom: 0; color: var(--muted); font-size: 0.9rem; }
.about-selected-work .section-heading { margin-bottom: 1rem; }
.about-section .section-heading h2 { font-size: 1.45rem; }
.about-selected-work .section-heading p { margin: 0; color: var(--muted); }
.about-links-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.about-link-card { display: block; color: var(--text); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.about-link-card:hover, .about-link-card:focus-visible { border-color: rgba(62, 184, 255, 0.8); transform: translateY(-2px); outline: none; }
.about-link-card span { display: inline-block; margin-top: 1rem; color: var(--accent); font-size: 0.82rem; font-weight: 800; }
.skill-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid rgba(185, 216, 234, 0.6); border-radius: 0.4rem; color: var(--text); font-size: 0.9rem; font-weight: 800; }
.skill-icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.skill-icon-text { font-size: 0.82rem; letter-spacing: -0.05em; }
.skill-icon-git { color: #ff6538; }
.about-education-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.about-education-card strong { color: var(--accent); font-size: 0.9rem; }
.about-education { display: block; color: var(--text); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.about-education:hover, .about-education:focus-visible { border-color: rgba(62, 184, 255, 0.8); transform: translateY(-2px); outline: none; }
.about-story-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); gap: 1.25rem; }
.about-story-row .about-section { margin-top: 1.25rem; }
.about-links .about-link-list { display: grid; gap: 0.75rem; }
.about-links a { color: var(--accent); font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.about-links a:hover { color: var(--text); }
.projects-page, .experience-page { padding-top: 1.5rem; }
.page-heading-hero { padding: 1.5rem 0 2.25rem; }
.page-heading-hero h1 { margin-bottom: 0.35rem; font-size: clamp(2rem, 4vw, 3.6rem); }
.page-heading-hero .detail-subtitle { margin-top: 0.65rem; margin-bottom: 1.3rem; font-weight: 400; }
.page-heading-hero .detail-description { margin-bottom: 0; }
.experience-page .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.experience-page .project-art { min-height: 180px; }
.experience-timeline { position: relative; margin-top: 0.75rem; padding-left: 0.25rem; }
.experience-timeline::before { display: none; }
.timeline-entry { position: relative; display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: start; gap: 1rem; margin-bottom: 2.5rem; border: 1px solid var(--border); border-radius: 0.85rem; background: rgba(16, 31, 46, 0.78); padding: 1.25rem; }
.timeline-entry { cursor: pointer; transition: border-color 160ms ease, transform 160ms ease; }
.timeline-entry:hover, .timeline-entry:focus-visible { border-color: rgba(62, 184, 255, 0.8); transform: translateY(-2px); outline: none; }
.timeline-entry:not(:last-child)::after { position: absolute; bottom: -2.1rem; left: 50%; height: 1.7rem; border-left: 2px dotted rgba(62, 184, 255, 0.5); content: ""; }
.timeline-entry:last-child { margin-bottom: 0; }
.timeline-dot { display: none; }
.timeline-logo { display: grid; width: 100%; aspect-ratio: 1; min-height: 0; place-items: center; border: 1px solid var(--border); border-radius: 0.65rem; background: linear-gradient(145deg, #20374b, #0d1724); color: rgba(255,255,255,0.82); font-size: 1.35rem; font-weight: 900; letter-spacing: -0.06em; }
.timeline-logo img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
.bodyswaps-logo { background: linear-gradient(145deg, #f4f2e9, #c7bda9); color: #e65125; }
.laing-logo { background: linear-gradient(145deg, #14191e, #050607); color: #d7aa42; font-size: 0.75rem; letter-spacing: 0.02em; }
.amplified-logo { background: #f1f1ee; color: #242424; font-size: 1.6rem; }
.narratio-logo { background: linear-gradient(145deg, #45316f, #15162c); }
.apps-logo { background: linear-gradient(145deg, #24586b, #13212d); }
.naked-logo { background: linear-gradient(145deg, #7a4935, #171b2a); }
.timeline-content h2 { margin: 0 0 0.15rem; font-size: 1.1rem; letter-spacing: -0.02em; }
.timeline-content h2 a { color: inherit; text-decoration: none; }
.timeline-content h2 a:hover { color: var(--accent); }
.timeline-content strong { display: block; margin-bottom: 0.35rem; color: var(--text); font-size: 0.88rem; }
.timeline-content p { max-width: 720px; margin-bottom: 0.65rem; color: var(--muted); font-size: 0.88rem; }
.timeline-date { padding-top: 0.35rem; color: var(--text); font-size: 0.82rem; white-space: nowrap; }
.timeline-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.timeline-tags span { border: 1px solid rgba(173, 193, 214, 0.2); border-radius: 999px; background: rgba(173, 193, 214, 0.1); padding: 0.22rem 0.6rem; color: var(--text); font-size: 0.65rem; font-weight: 700; }
.timeline-read-more { position: absolute; right: 1.25rem; bottom: 1.25rem; display: inline-flex; align-items: center; color: var(--text); font-size: 0.88rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.timeline-read-more span { margin-left: 0.35rem; color: var(--accent); transition: margin 160ms ease; }
.timeline-read-more:hover span { margin-left: 0.6rem; }
.project-filters { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1.75rem; }
.filter-pill { border: 1px solid var(--border); border-radius: 999px; background: rgba(173, 193, 214, 0.08); padding: 0.5rem 1rem; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 700; }
.filter-pill:hover, .filter-pill.is-active { border-color: var(--accent); background: var(--accent); color: #04111c; }
.projects-page .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.projects-page .project-art { min-height: 180px; }
.projects-page .project-card[hidden] { display: none; }
.project-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 1.25rem 0.2rem; }
.project-card-heading h3 { margin: 0; }
.project-card-heading + p { margin-bottom: 1rem; }
.project-detail { padding: 4rem 0 7rem; }
.back-link { display: inline-block; margin-bottom: 4rem; color: var(--accent); font-size: 0.85rem; text-decoration: none; }
.back-link:hover { color: var(--text); }
.project-detail h1 { margin-bottom: 0.5rem; }
.detail-lead { margin-bottom: 2rem; color: var(--muted); font-size: 1.25rem; }
.detail-art { min-height: 340px; margin: 2rem 0 4rem; }
.detail-art img { display: block; width: 100%; height: 100%; max-height: 340px; object-fit: contain; }
.detail-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.detail-copy h2 { margin-bottom: 0.75rem; font-size: 1.4rem; }
.detail-copy p { color: var(--muted); }
.detail-page-main { padding-top: 1.5rem; padding-bottom: 6rem; }
.detail-back { display: inline-block; margin-bottom: 1.25rem; color: var(--accent); font-size: 0.85rem; font-weight: 700; text-decoration: none; }
.detail-back:hover { color: var(--text); }
.detail-hero { position: relative; display: flex; min-height: 430px; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; background: var(--detail-gradient, linear-gradient(135deg, #134b62, #17203e 58%, #71445b)); }
.detail-hero::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(4, 10, 18, 0.99) 0%, rgba(7, 17, 31, 0.97) 27%, rgba(7, 17, 31, 0.8) 50%, rgba(7, 17, 31, 0.45) 72%, rgba(7, 17, 31, 0.18) 90%, rgba(7, 17, 31, 0.12) 100%); content: ""; }
.detail-hero-image { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: min(46%, 500px); height: 100%; object-fit: contain; object-position: right center; opacity: 0.92; }
.detail-hero-content { position: relative; z-index: 2; max-width: 620px; padding: 3rem; }
.experience-detail-hero, .project-detail-hero, .contact-detail-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr); gap: 3rem; padding: 3rem; background: var(--detail-gradient, linear-gradient(135deg, #134b62, #17203e 58%, #71445b)); }
.experience-detail-hero, .project-detail-hero { --detail-gradient: linear-gradient(135deg, #2b7e9e, #173d63 58%, #356f95) !important; }
.experience-detail-hero::before, .project-detail-hero::before, .contact-detail-hero::before { display: block; }
.experience-detail-hero .detail-hero-content, .project-detail-hero .detail-hero-content, .contact-detail-hero .detail-hero-content { grid-column: 1; grid-row: 1; max-width: 690px; padding: 0; }
.experience-detail-hero .detail-hero-image, .project-detail-hero .detail-hero-image, .contact-detail-hero .detail-hero-image { position: relative; z-index: 2; top: auto; right: auto; bottom: auto; grid-column: 2; grid-row: 1; width: min(100%, 360px); height: auto; aspect-ratio: 1; justify-self: end; border: 1px solid var(--border); border-radius: 1rem; object-fit: cover; opacity: 1; }
.detail-hero-content h1 { margin-bottom: 0.35rem; font-size: clamp(2rem, 4vw, 3.6rem); }
.detail-subtitle { margin-top: 0.3rem; margin-bottom: 1rem; color: var(--text); font-size: 1.35rem; font-weight: 700; }
.project-detail-hero .detail-subtitle { margin-top: 0.65rem; margin-bottom: 1.3rem; font-weight: 400; }
.detail-description { max-width: 560px; margin-bottom: 1.25rem; color: var(--muted); font-size: 1rem; }
.detail-meta { margin: -0.35rem 0 1.25rem; color: var(--text); font-size: 0.92rem; font-weight: 700; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.25rem; }
.detail-tags span { border: 1px solid rgba(173, 193, 214, 0.2); border-radius: 999px; background: rgba(173, 193, 214, 0.1); padding: 0.28rem 0.7rem; color: var(--text); font-size: 0.7rem; font-weight: 700; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.detail-actions.has-store-badges { width: max-content; flex-wrap: nowrap; gap: 0.35rem; }
.detail-actions.has-store-badges .store-badge { flex: 0 0 auto; }
.detail-actions .store-badge { display: inline-flex; align-items: center; gap: 0.7rem; min-width: 12rem; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 0.7rem; background: #050505; padding: 0.55rem 0.85rem; color: #fff; text-align: left; }
.detail-actions .store-badge:hover { border-color: #fff; background: #111; color: #fff; transform: translateY(-2px); }
.store-badge-icon { flex: 0 0 auto; width: 1.75rem; height: 2rem; }
.store-badge-play { width: 2rem; height: 2rem; }
.store-badge span { display: flex; flex-direction: column; line-height: 1; }
.store-badge small { margin-bottom: 0.18rem; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.04em; }
.store-badge strong { font-size: 1.18rem; letter-spacing: -0.03em; }
.detail-actions .store-badge { min-width: 0; border: 0; background: transparent; padding: 0; }
.detail-actions .store-badge:hover { border-color: transparent; background: transparent; }
.detail-actions .store-badge-image { display: block; width: 10.125rem; height: auto; }
.detail-actions .powerless-steam-badge .store-badge-image { width: 12rem; }
.detail-gallery { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 0.9rem; margin: 1.25rem 0 3.5rem; }
.wordsee-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wordsee-gallery .gallery-placeholder { min-height: 0; aspect-ratio: 0.462; background: linear-gradient(145deg, #233b68, #131a32 58%, #5c4777); }
.wordsee-gallery .gallery-placeholder img { object-fit: contain; padding: 0.35rem; }
.gallery-placeholder { display: grid; min-height: 155px; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 0.75rem; background: linear-gradient(145deg, #254e67, #101a2c 58%, #674a79); color: rgba(255,255,255,0.62); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-align: center; }
.gallery-placeholder img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-placeholder:first-child { min-height: 205px; }
.wordsee-gallery-wrap { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0 3.5rem; border: 1px solid var(--border); border-radius: 0.85rem; background: rgba(16, 31, 46, 0.78); padding: 1.5rem; }
.wordsee-gallery { display: flex; flex: 1; gap: 0.9rem; min-width: 0; margin: 0; padding: 0.5rem 0.15rem 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.wordsee-gallery-item { flex: 0 0 clamp(145px, 13vw, 180px); min-height: 0; aspect-ratio: 0.462; padding: 0; cursor: zoom-in; scroll-snap-align: start; font: inherit; }
.wordsee-gallery-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.wordsee-gallery-item:focus-visible, .wordsee-carousel-button:focus-visible, .wordsee-lightbox-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wordsee-carousel-button { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(16, 31, 46, 0.9); color: var(--text); cursor: pointer; font-size: 1.1rem; }
.wordsee-carousel-button:hover { border-color: var(--accent); color: var(--accent); }
.wordsee-lightbox { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 2rem; }
.wordsee-lightbox[hidden] { display: none; }
.wordsee-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.84); }
.wordsee-lightbox-dialog { position: relative; z-index: 1; display: grid; place-items: center; max-width: 92vw; max-height: 92vh; }
.wordsee-lightbox-image { display: block; max-width: 88vw; max-height: 88vh; width: auto; height: auto; border: 1px solid var(--border); border-radius: 1rem; background: #07101c; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45); object-fit: contain; }
.bodyswaps-lightbox .wordsee-lightbox-image { width: min(92vw, 1400px); max-width: none; max-height: 88vh; }
.wordsee-lightbox-close { position: absolute; z-index: 2; top: -0.8rem; right: -0.8rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: #04111c; box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.35); cursor: pointer; font-size: 1.4rem; line-height: 1; }
.wordsee-lightbox-close:hover { background: var(--text); border-color: var(--text); }
body.wordsee-lightbox-open { overflow: hidden; }
.store-gallery { display: flex; gap: 0.9rem; overflow-x: auto; border: 1px solid var(--border); border-radius: 0.85rem; background: rgba(16, 31, 46, 0.78); padding: 1.5rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.store-gallery-item { flex: 0 0 clamp(145px, 13vw, 180px); min-height: 0; aspect-ratio: 0.5625; background: linear-gradient(145deg, #233b68, #131a32 58%, #5c4777); cursor: zoom-in; scroll-snap-align: start; }
.store-gallery-item img { object-fit: contain; padding: 0.35rem; }
.bodyswaps-gallery-carousel { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0 3.5rem; border: 1px solid var(--border); border-radius: 0.85rem; background: rgba(16, 31, 46, 0.78); padding: 1.5rem; }
.bodyswaps-gallery-carousel .store-gallery { flex: 1; min-width: 0; margin: 0; }
.store-gallery-carousel { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0 3.5rem; border: 1px solid var(--border); border-radius: 0.85rem; background: rgba(16, 31, 46, 0.78); padding: 1.5rem; }
.store-gallery-carousel .store-gallery { flex: 1; min-width: 0; margin: 0; }
.bodyswaps-gallery .store-gallery-item { flex-basis: clamp(280px, 28vw, 360px); aspect-ratio: 16 / 9; }
.bodyswaps-gallery .store-gallery-item img { object-fit: cover; padding: 0; }
.detail-hero + .detail-info-grid { margin-top: 2rem; border-top: 0; padding-top: 0; }
.experience-detail-hero + .detail-info-grid { gap: 1.25rem; }
.detail-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.experience-info-grid { grid-template-columns: 13fr 7fr; gap: 1.25rem; }
.experience-info-grid .experience-selected-work { grid-column: 1; grid-row: 3; }
.experience-info-grid .experience-tech-links { grid-column: 2; grid-row: 1 / span 3; }
.experience-links-block { margin-bottom: 1.75rem; }
.experience-tech-stack { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; }
.experience-tech-stack span { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0.3rem 0.6rem; border: 1px solid rgba(62, 184, 255, 0.25); border-radius: 999px; background: linear-gradient(135deg, rgba(62, 184, 255, 0.12), rgba(62, 184, 255, 0.03)); color: var(--text); font-size: 0.75rem; line-height: 1.2; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.experience-tech-stack span::before { width: 0.3rem; height: 0.3rem; margin-right: 0.4rem; border-radius: 50%; background: var(--accent); content: ""; box-shadow: 0 0 0 2px rgba(62, 184, 255, 0.12); }
.experience-tech-stack span:hover { border-color: rgba(62, 184, 255, 0.7); background: rgba(62, 184, 255, 0.18); transform: translateY(-1px); }
.experience-tech-catalog { display: grid; gap: 1rem; }
.experience-tech-catalog h3 { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.experience-timeline-list { position: relative; display: grid; gap: 0.7rem; margin: 0 0 1.75rem; padding: 0 0 0 1.15rem; list-style: none; }
.experience-timeline-list::before { display: none; }
.experience-timeline-list li { position: relative; display: grid; gap: 0.15rem; }
.experience-timeline-list li:not(:last-child)::after { position: absolute; top: 0.85rem; bottom: -0.7rem; left: -0.93rem; border-left: 1px solid rgba(62, 184, 255, 0.45); content: ""; }
.experience-timeline-list li::before { position: absolute; top: 0.3rem; left: -1.15rem; width: 0.5rem; height: 0.5rem; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px rgba(62, 184, 255, 0.35); content: ""; }
.experience-timeline-list strong { color: var(--text); font-size: 0.78rem; }
.experience-timeline-list span { color: var(--muted); font-size: 0.84rem; }
.detail-page-main > .detail-info-grid { margin-top: 1.25rem; }
.detail-info-grid > div { border: 1px solid var(--border); border-radius: 0.85rem; background: rgba(16, 31, 46, 0.78); padding: 1.5rem; }
.detail-info-grid > .detail-links-panel { grid-column: 2; grid-row: 2; }
.project-info-grid { grid-template-columns: minmax(0, 7fr) minmax(220px, 3fr); column-gap: 1.25rem; align-items: start; }
.project-info-grid > .project-main-column { display: grid; gap: 1.25rem; min-width: 0; border: 0; background: transparent; padding: 0; }
.project-main-column > div { border: 1px solid var(--border); border-radius: 0.85rem; background: rgba(16, 31, 46, 0.78); padding: 1.5rem; }
.project-main-column > .project-main-panel { border: 1px solid var(--border); border-radius: 0.85rem; background: rgba(16, 31, 46, 0.78); padding: 1.5rem; }
.press-kit-project-layout .project-main-panel h2 { margin-bottom: 0.85rem; font-size: 1.45rem; }
.project-info-grid > .project-links-sidebar { align-self: stretch; min-width: 0; border: 1px solid var(--border); border-radius: 0.85rem; background: rgba(16, 31, 46, 0.78); padding: 1.5rem; }
.project-links-sidebar > .detail-links-panel { margin: 0; }
.detail-info-grid h2 { margin-bottom: 0.85rem; font-size: 1.45rem; }
.experience-links-block h2 { margin-bottom: 0.45rem; }
.detail-info-grid p { color: var(--muted); }
.feature-list { display: grid; gap: 0.55rem; padding: 0; color: var(--muted); list-style: none; }
.feature-list li::before { margin-right: 0.6rem; color: var(--accent); content: "◆"; font-size: 0.6rem; }
.detail-links { display: grid; gap: 0.5rem; margin-top: 0; }
.detail-link-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.detail-link-group + .detail-link-group { margin-top: 1rem; }
.detail-link-group h3 { margin: 0; color: var(--text); font-size: 0.82rem; }
.detail-links a { display: block; margin: 0; color: var(--accent); font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.detail-links a:hover { color: var(--text); }
.project-press-kits { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 2rem; }
.project-press-kits h2 { margin-bottom: 0.45rem; }
.project-press-kits p { margin-bottom: 1rem; color: var(--muted); }
.project-press-kits .detail-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-policy-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1rem; color: var(--accent); font-size: 0.82rem; font-weight: 800; text-decoration: none; }
.detail-policy-link:hover { color: var(--text); }
.policy-page { padding-top: 1.5rem; padding-bottom: 6rem; }
.policy-hero { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; background: linear-gradient(135deg, #113b53, #101c32 58%, #4c3e6c); padding: 3rem; }
.press-kit-hero { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1.5rem; align-items: center; min-height: 432px; }
.press-kit-art { display: grid; min-height: 190px; place-items: center; border: 1px solid var(--border); border-radius: 1rem; background: linear-gradient(145deg, #2b7e9e, #173d63 58%, #638d54); color: var(--text); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-align: center; }
.press-kit-art img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.press-kit-hero-copy { min-width: 0; }
.press-kit-hero-copy h1 span { font-size: .558em; font-weight: 400; }
.press-kit-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: .75rem; width: min(100%, 760px); }
.press-kit-actions .button { justify-content: center; min-height: 3.4rem; }
.press-kit-actions .button-copy { display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; }
.press-kit-actions .button-copy strong { line-height: 1.1; }
.press-kit-actions small { display: block; margin-top: .2rem; color: inherit; font-size: .7rem; font-weight: 500; opacity: .8; }
.wordsee-press-kit-hero { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); grid-template-rows: 1fr auto; min-height: 432px; background: linear-gradient(135deg, #2b7e9e, #173d63 58%, #638d54); }
.wordsee-press-kit-hero::before { position: absolute; z-index: 1; inset: 0; display: block; background: linear-gradient(90deg, rgba(4, 10, 18, 0.99) 0%, rgba(7, 17, 31, 0.97) 27%, rgba(7, 17, 31, 0.8) 50%, rgba(7, 17, 31, 0.45) 72%, rgba(7, 17, 31, 0.18) 90%, rgba(7, 17, 31, 0.12) 100%); content: ""; }
.wordsee-press-kit-hero .press-kit-hero-copy { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.wordsee-press-kit-hero .press-kit-art { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; width: min(100%, 360px); min-height: 0; aspect-ratio: 1; }
.wordsee-press-kit-hero .press-kit-hero-copy, .wordsee-press-kit-hero .press-kit-art { position: relative; z-index: 2; }
.wordsee-press-kit-hero .press-kit-hero-copy h1 { margin-bottom: 0.35rem; font-size: clamp(2rem, 4vw, 3.6rem); }
.wordsee-press-kit-hero .detail-description { max-width: 560px; margin-bottom: 1.25rem; color: var(--muted); font-size: 1rem; }
.wordsee-press-kit-hero .detail-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.wordsee-press-kit-hero .detail-actions .button { min-height: 3.2rem; }
.wordsee-press-kit-hero .detail-subtitle { margin-top: 0.65rem; margin-bottom: 1.3rem; color: var(--text); font-size: 1.35rem; font-weight: 400; }
.wordsee-policy-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 3rem; align-items: center; min-height: 432px; background: linear-gradient(135deg, #2b7e9e, #173d63 58%, #914f7c); }
.wordsee-policy-hero::before { position: absolute; z-index: 1; inset: 0; display: block; background: linear-gradient(90deg, rgba(4, 10, 18, 0.99) 0%, rgba(7, 17, 31, 0.97) 27%, rgba(7, 17, 31, 0.8) 50%, rgba(7, 17, 31, 0.45) 72%, rgba(7, 17, 31, 0.18) 90%, rgba(7, 17, 31, 0.12) 100%); content: ""; }
.wordsee-policy-hero .policy-hero-copy, .wordsee-policy-hero .policy-hero-art { position: relative; z-index: 2; }
.wordsee-policy-hero .policy-hero-copy { grid-column: 1; }
.wordsee-policy-hero .policy-hero-copy h1 { margin-bottom: 0.35rem; font-size: clamp(2rem, 4vw, 3.6rem); }
.wordsee-policy-hero .detail-subtitle { margin-top: 0.65rem; margin-bottom: 1.3rem; color: var(--text); font-size: 1.35rem; font-weight: 400; }
.wordsee-policy-hero .detail-description { max-width: 560px; margin-bottom: 1.25rem; color: var(--muted); font-size: 1rem; }
.wordsee-policy-hero .policy-hero-art { grid-column: 2; justify-self: end; width: min(100%, 360px); aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; }
.wordsee-policy-hero .policy-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wordsee-policy-hero .policy-nav { position: relative; z-index: 2; grid-column: 1; margin-top: 0.5rem; }
.policy-hero h1 { max-width: 700px; margin-bottom: 0.5rem; font-size: clamp(2rem, 4vw, 3.6rem); }
.policy-hero h1 span { display: block; margin-top: 1.2rem; color: var(--text); font-size: 0.54em; font-weight: 400; }
.policy-hero p { max-width: 650px; color: var(--muted); }
.policy-nav { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }
.policy-nav a { border: 1px solid var(--border); border-radius: 999px; padding: 0.65rem 1rem; color: var(--text); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.policy-nav a:first-child, .policy-nav a:hover { border-color: var(--accent); background: var(--accent); color: #04111c; }
.policy-layout { display: grid; grid-template-columns: minmax(0, 1fr) 308px; gap: 1.25rem; margin-top: 1.25rem; }
.policy-content, .policy-sidebar-card { border: 1px solid var(--border); border-radius: 0.85rem; background: rgba(16, 31, 46, 0.78); padding: 1.5rem; }
.policy-layout > .policy-content { align-self: start; }
.policy-content h2 { margin-bottom: 0.75rem; font-size: 1.45rem; }
.policy-content h3 { margin-top: 1.4rem; font-size: 1rem; }
.policy-content p, .policy-content li, .policy-sidebar-card p { color: var(--muted); font-size: 0.9rem; }
.policy-content ul { padding-left: 1.25rem; }
.policy-sidebar { display: grid; align-content: start; gap: 1.25rem; }
.policy-sidebar-card h2 { margin-bottom: 0.7rem; font-size: 1.2rem; }
.policy-sidebar-card a { color: var(--accent); text-decoration: none; }
.policy-sidebar-card a:hover { color: var(--text); }
.press-kit-project-layout #downloads h2 { font-size: 1.45rem; }
.press-kit-project-layout #downloads .button-primary { color: #04111c; }
.press-kit-project-layout #downloads .button-primary:hover { color: #04111c; }
.policy-sidebar-card p:has(a) { margin: 0; }
.policy-sidebar-card p + p { margin-top: 0.5rem; }
.policy-sidebar-card p a::before { margin-right: 0.35rem; color: var(--accent); content: "◉"; font-size: 0.72em; }
.policy-sidebar-card ul { margin: 0; padding: 0; list-style: none; }
.policy-sidebar-card li + li { margin-top: 0.5rem; }
.policy-sidebar-card li::before { margin-right: 0.35rem; color: var(--accent); content: "◉"; font-size: 0.72em; }
.press-screenshots-section { grid-column: 1 / -1; margin-top: 1.25rem; }
.press-screenshots-section .wordsee-gallery-wrap { margin-top: 0; }
.press-kit-project-layout { margin-top: 1.25rem; }
.press-kit-project-layout .project-links-sidebar .policy-sidebar-card { border: 0; border-radius: 0; background: transparent; padding: 0; }
.press-kit-project-layout .project-links-sidebar .policy-sidebar-card:first-child h2 { margin-bottom: 0.85rem; font-size: 1.45rem; }
.press-kit-project-layout .project-links-sidebar .policy-sidebar-card h3 { margin: 1rem 0 0.45rem; color: var(--text); font-size: 0.82rem; font-weight: 700; }
.press-kit-project-layout .project-links-sidebar .policy-sidebar-card:not(:first-child) h2 { margin-bottom: 0.45rem; font-size: 0.82rem; }
.policy-draft { border-left: 3px solid var(--accent); padding-left: 0.9rem; }
.site-footer { display: flex; justify-content: space-between; gap: 2rem; padding: 1.5rem 0 3rem; color: var(--muted); font-size: 0.78rem; }
@media (max-width: 800px) {
  .site-header, main, .site-footer { width: min(calc(100% - 2rem), var(--max-width)); }
  .site-header { align-items: center; flex-direction: column; }
  .site-header::before { background: rgba(3, 8, 14, 0.96); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); }
  .main-nav { width: 100%; justify-content: center; gap: 0.7rem 1rem; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 4rem 0 5rem; }
  .hero-visual { min-height: 310px; }
  .about-preview, .project-grid, .experience-grid { grid-template-columns: 1fr; }
  .projects-page .project-grid { grid-template-columns: 1fr; }
  .project-press-kits .detail-links { grid-template-columns: 1fr; }
  .experience-page .project-grid { grid-template-columns: 1fr; }
  .timeline-entry { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem; }
  .timeline-date { grid-column: 2; grid-row: 1; justify-self: end; padding-top: 0.1rem; font-size: 0.72rem; }
  .timeline-content { grid-column: 2; }
  .timeline-logo { grid-column: 1; grid-row: 1 / span 2; min-height: 4.5rem; }
  .about-intro-grid { grid-template-columns: 1fr; }
  .about-story-row { grid-template-columns: 1fr; }
  .about-card-grid, .about-links-grid { grid-template-columns: 1fr; }
  .about-education-card { align-items: flex-start; flex-direction: column; }
  .contact-layout { grid-template-columns: 1fr; }
  .detail-hero-content { max-width: none; padding: 2rem 1.5rem; }
  .detail-actions.has-store-badges { width: 100%; flex-wrap: wrap; }
  .experience-detail-hero, .project-detail-hero, .contact-detail-hero { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.5rem; }
  .experience-detail-hero .detail-hero-content, .project-detail-hero .detail-hero-content, .contact-detail-hero .detail-hero-content { grid-column: 1; grid-row: 1; padding: 0; }
  .experience-detail-hero .detail-hero-image, .project-detail-hero .detail-hero-image, .contact-detail-hero .detail-hero-image { grid-column: 1; grid-row: 2; justify-self: start; width: min(100%, 360px); }
  .detail-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-placeholder:first-child { grid-column: 1 / -1; }
  .wordsee-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wordsee-gallery .gallery-placeholder:first-child { grid-column: auto; }
  .wordsee-gallery-wrap { gap: 0.45rem; padding: 1rem; }
  .wordsee-gallery { grid-template-columns: none; }
  .wordsee-gallery-item { flex-basis: 145px; }
  .wordsee-carousel-button { flex-basis: 2.15rem; width: 2.15rem; height: 2.15rem; }
  .detail-info-grid { grid-template-columns: 1fr; gap: 2rem; }
  .press-kit-project-layout { grid-template-columns: 1fr !important; width: 100%; max-width: 100%; }
  .press-kit-project-layout > .project-main-column { min-width: 0; width: 100%; }
  .press-kit-project-layout > .project-links-sidebar { grid-column: 1 !important; grid-row: auto !important; min-width: 0; width: 100%; }
  .press-kit-project-layout .project-main-panel { min-width: 0; max-width: 100%; }
  .experience-detail-hero + .detail-info-grid { gap: 1.25rem; }
  .experience-info-grid .experience-tech-links { grid-column: 1; grid-row: auto; }
  .experience-info-grid .experience-selected-work, .experience-info-grid .experience-links { grid-column: 1; }
  .detail-info-grid > .detail-links-panel { grid-column: 1; grid-row: auto; }
  .project-info-grid { grid-template-columns: 1fr; }
  .store-gallery { padding: 1rem; }
  .store-gallery-item { flex-basis: 145px; }
  .policy-layout { grid-template-columns: 1fr; }
  .policy-hero { padding: 2rem 1.5rem; }
  .press-kit-hero { grid-template-columns: 1fr; }
  .press-kit-art { min-height: 150px; }
  .press-kit-actions { grid-template-columns: 1fr; }
  .wordsee-press-kit-hero { grid-template-columns: 1fr; grid-template-rows: auto; }
  .wordsee-press-kit-hero .press-kit-hero-copy, .wordsee-press-kit-hero .press-kit-art { grid-column: 1; grid-row: auto; }
  .wordsee-press-kit-hero .press-kit-art { position: relative; top: auto; right: auto; width: min(100%, 360px); transform: none; }
  .wordsee-policy-hero { grid-template-columns: 1fr; gap: 2rem; }
  .wordsee-policy-hero .policy-hero-copy, .wordsee-policy-hero .policy-hero-art, .wordsee-policy-hero .policy-nav { grid-column: 1; }
  .wordsee-policy-hero .policy-hero-art { justify-self: start; width: min(100%, 360px); }
  .statement-section { display: block; }
  .statement-section h2 { margin-top: 2rem; }
  .statement-bottom { align-items: flex-start; flex-direction: column; }
  .experience-section > .text-link { grid-column: auto; }
  .capability-row { justify-content: flex-start; }
}
@media (max-width: 500px) {
  .section { padding: 5rem 0; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .project-art { min-height: 200px; }
  .brand-name { font-size: 1.14rem; }
  .detail-copy { grid-template-columns: 1fr; gap: 1rem; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
}
@media (min-width: 501px) and (max-width: 800px) {
  .wordsee-press-kit-hero .press-kit-art { justify-self: start; }
}