@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#141616;--panel:#1d2020;--text:#f0f2e9;--muted:#a5aaa6;--line:#333837;--accent:#f2a366}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',Arial,sans-serif;font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--accent);outline-offset:7px}.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}.header{display:flex;align-items:center;justify-content:space-between;padding-block:30px;border-bottom:1px solid var(--line)}.brand{font-family:'Space Grotesk',sans-serif;font-size:25px;font-weight:700;letter-spacing:-1px}.brand>span:first-child{color:var(--muted)}.brand-mark{display:inline-grid;place-items:center;background:var(--accent);color:var(--bg);font-size:18px;margin-left:9px;width:22px;height:25px;border-radius:3px}.header nav{display:flex;align-items:center;gap:34px;font-size:14px}.header nav a:hover,.footer a:hover{color:var(--accent)}.nav-contact{border:1px solid #515650;border-radius:5px;padding:9px 17px}.nav-contact span{margin-left:20px}.hero{padding-top:65px}.eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:2px;font-weight:600;margin:0 0 28px;color:var(--muted)}.line{width:30px;height:2px;background:var(--accent)}.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:center}.intro{margin:0 0 18px;font-size:18px}.intro span{color:var(--accent)}h1,h2,h3{font-family:'Space Grotesk',Arial,sans-serif;font-weight:500;line-height:1.08;margin:0;letter-spacing:-2px}h1{font-size:clamp(46px,5.3vw,76px)}h1 em{font-style:normal;color:var(--accent)}.lead{max-width:465px;color:var(--muted);margin:27px 0;line-height:1.8}.button{display:inline-flex;gap:36px;align-items:center;background:var(--accent);color:#141616;border-radius:4px;padding:14px 21px;font-weight:600;transition:background .2s,transform .2s}.button:hover{background:#ffb982;transform:translateY(-2px)}.code-panel{background:var(--panel);border:1px solid #443a33;border-radius:10px;transform:rotate(-2deg);box-shadow:18px 20px 0 #292019;min-width:0}.code-top{display:flex;justify-content:space-between;align-items:center;padding:19px 24px;border-bottom:1px solid var(--line);font-family:monospace;font-size:14px}.code-language{color:var(--accent)}.code-body{padding:28px 20px;font-family:Consolas,monospace;font-size:14px;line-height:2.2}.code-body>div{display:flex;gap:20px}.ln{color:#787f78;width:19px;flex-shrink:0;text-align:right}.code-body b{font-weight:400;color:#c6acf2}.code-body i{font-style:normal;color:var(--accent)}.code-comment{color:#929b8f;margin-top:15px}.code-bottom{display:flex;gap:10px;align-items:center;padding:14px 22px;border-top:1px solid var(--line);font-family:monospace;font-size:12px;color:var(--muted)}.small-square{height:7px;width:7px;background:#a18b7a}.cursor{margin-left:auto;color:var(--accent)}.hero-footer{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);margin-top:67px;padding-bottom:24px;font-size:12px;color:var(--muted);letter-spacing:1px}.hero-footer a{letter-spacing:0;font-size:14px}.hero-footer a span{margin-left:15px}.section{padding-block:80px}.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:42px}h2{font-size:clamp(32px,3.5vw,47px)}h2>span{color:var(--accent)}.section-heading p:last-child{color:var(--muted);font-size:14px;margin:0}.section-heading .eyebrow{margin-bottom:18px}.project{border-top:1px solid var(--line);display:grid;grid-template-columns:65px 1fr 180px;gap:20px;padding:33px 0}.project:last-child{border-bottom:1px solid var(--line)}.project-number{font-family:monospace;font-size:16px;color:var(--muted);padding-top:6px}.tag{font-size:12px;letter-spacing:1.5px;color:var(--accent)}h3{font-size:27px;letter-spacing:-.7px;margin:11px 0}.project-main>p{max-width:620px;color:var(--muted);margin:15px 0 20px}.stack{display:flex;gap:9px;flex-wrap:wrap}.stack span{font-size:12px;color:#c5cbc1;border:1px solid var(--line);border-radius:4px;padding:4px 10px}.project-category{font-size:12px;letter-spacing:1px;color:var(--muted);text-align:right;padding-top:7px}.about{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;padding-top:28px}.about-content>p{color:var(--muted);margin-top:0}.about-content .about-intro{font-size:23px;color:var(--text);line-height:1.55}.skills{margin-top:38px}.skills h3{font-size:21px;letter-spacing:-.4px}.skill-note{color:var(--muted);font-size:14px}.skill-row{display:grid;grid-template-columns:24px 1fr;gap:6px 12px;border-top:1px solid var(--line);padding:17px 0}.skill-row>span{font:12px monospace;color:var(--accent);padding-top:6px}.skill-row strong{font-size:16px;font-weight:500}.skill-row p{grid-column:2;margin:0;font-size:14px;color:var(--muted)}.contact{padding:45px 45px 40px;background:var(--accent);color:#241810;border-radius:8px}.contact .eyebrow{color:#59331d}.contact h2{font-size:clamp(44px,5.8vw,78px)}.contact h2 span{color:#64381f}.contact-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-top:30px}.contact-bottom p{margin:0;color:#50301d}.contact-placeholder{font-size:clamp(16px,2vw,25px);border-bottom:1px solid #64381f;padding-bottom:7px;overflow-wrap:anywhere}.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:38px;color:var(--muted);font-size:14px}.footer .brand{font-size:20px;color:var(--text)}.skip{position:fixed;top:-100px;left:15px;padding:10px;background:var(--accent);color:var(--bg);z-index:10}.skip:focus{top:10px}section{scroll-margin-top:25px}@media(min-width:1400px){.hero{padding-top:80px}}@media(max-width:900px){.wrap{width:calc(100% - 48px)}.hero-grid{gap:30px;grid-template-columns:1.1fr 1fr}.code-body{padding:20px 12px;font-size:12px}.code-body>div{gap:10px}.about{gap:35px}.project{grid-template-columns:40px 1fr}.project-category{grid-column:2;text-align:left}.section-heading{align-items:flex-start;flex-direction:column;gap:20px}}@media(max-width:650px){.wrap{width:calc(100% - 36px)}.header{padding-block:21px}.header nav{gap:16px}.nav-contact{padding:0;border:0}.nav-contact span{display:none}.brand{font-size:21px}.brand-mark{display:none}.hero{padding-top:40px}.hero-grid{grid-template-columns:1fr;gap:45px}h1{font-size:clamp(42px,11.5vw,66px)}.hero .eyebrow{font-size:11px;letter-spacing:1.4px}.code-panel{transform:none;box-shadow:7px 8px 0 #292019}.code-body{font-size:14px;padding:22px 15px}.hero-footer{margin-top:44px;flex-direction:column;gap:10px}.section{padding-block:55px}.project{grid-template-columns:24px 1fr;gap:12px;padding:26px 0}h3{font-size:24px}.about{display:block;padding-top:0}.about-content{margin-top:27px}.about-content .about-intro{font-size:21px}.contact{padding:28px 24px}.contact-bottom{flex-direction:column;align-items:flex-start}.contact h2{font-size:44px}.footer{flex-wrap:wrap;padding-block:28px}.footer>span{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Keep navigation accessible while scrolling, including narrow screens. */
:root { --header-height: 89px; }
html { scroll-padding-top: calc(var(--header-height) + 16px); }
.header.wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  padding: 16px max(48px, calc((100% - 1240px) / 2));
  gap: 12px 24px;
  flex-wrap: wrap;
  background: #141616;
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}
.header nav { flex-wrap: wrap; }
.header nav a { display: inline-flex; align-items: center; min-height: 44px; }
.header nav a[aria-current="location"] { color: var(--accent); }
.skip { z-index: 30; }
.hero-grid > *, .project-main, .about-content { min-width: 0; }
.code-body > div > span:last-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .header.wrap { padding-inline: 24px; }
}
@media (max-width: 650px) {
  .header.wrap { padding: 10px 18px; gap: 4px 16px; }
  .header nav { gap: 16px; }
  .contact h2 { font-size: clamp(32px, 9vw, 44px); }
}
@media (max-width: 380px) {
  :root { --header-height: 105px; }
  .header.wrap { justify-content: center; }
  .header nav { width: 100%; justify-content: space-between; gap: 8px; }
}

/* Personal portfolio: project context and experience. */
.project-link { display:inline-flex; align-items:center; gap:14px; min-height:44px; color:var(--accent); border-bottom:1px solid #755039; }
.project-link:hover { color:#ffbd8d; }
.project-footnote,.timeline-note { font-size:14px; color:var(--muted); }
.project-footnote { max-width:760px; margin-top:22px; }
.experience { border-top:1px solid var(--line); }
.timeline article { display:grid; grid-template-columns:210px 1fr; gap:30px; padding:28px 0; border-top:1px solid var(--line); }
.timeline h3 { font-size:25px; margin-top:0; line-height:1.3; }
.timeline p { max-width:740px; color:var(--muted); }
.timeline .period { font-size:13px; letter-spacing:1px; color:var(--accent); }
.timeline .organisation { color:var(--text); margin-block:8px 14px; }
.timeline p:last-child { margin-bottom:0; }
.foundations { border-top:1px solid var(--line); padding-top:55px; }
.foundation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:36px; }
.foundation-grid article { border-top:2px solid #755039; padding-top:15px; }
.foundation-grid h3 { font-size:23px; line-height:1.3; }
.foundation-grid p { color:var(--muted); }
.footer { border-top:1px solid var(--line); }
@media(max-width:750px) { .timeline article { grid-template-columns:1fr; gap:4px; } .foundation-grid { grid-template-columns:1fr; gap:20px; } }
@media(max-width:480px) { .header.wrap { justify-content:center; } .header nav { width:100%; justify-content:space-between; gap:8px; } h1 { font-size:clamp(38px,10.5vw,50px); } }

/* Clear white copy and distinct surfaces for detailed content. */
:root { --bg: #191c20; --panel: #292e35; --text: #ffffff; --muted: #ffffff; --line: #4b525c; }
.header.wrap { background: #20242a; }
.project-list, .timeline { display: grid; gap: 20px; }
.project, .timeline article, .foundation-grid article, .about-content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
}
.project:last-child { border-bottom: 1px solid var(--line); }
.project { grid-template-columns: 40px minmax(0, 1fr) 165px; }
.project h3 { line-height: 1.25; }
.project-category, .tag, .eyebrow, .hero .eyebrow, .hero-footer, .timeline .period { font-size: 14px; }
.project-category, .tag, .timeline .period { color: #fff; }
.stack span { background: #373e48; color: #fff; font-size: 14px; padding: 6px 12px; border-color: #59626e; }
.skill-row { background: #343b44; border: 1px solid #525c68; border-radius: 10px; padding: 18px; margin-top: 12px; }
.skill-row p, .skill-note, .project-footnote, .timeline-note, .section-heading p:last-child { font-size: 16px; }
.skill-row > span { color: #fff; font-size: 14px; }
.foundation-grid { gap: 20px; }
.foundation-grid article { border-top: 3px solid var(--accent); padding: 24px; }
.code-panel { border-color: #59626e; box-shadow: 12px 14px 0 #34302d; }
.code-top, .code-bottom { background: #343b44; }
.code-top { border-radius: 9px 9px 0 0; }
.code-bottom { border-radius: 0 0 9px 9px; font-size: 14px; }
.ln, .code-comment { color: #fff; }
@media (max-width: 900px) {
  .project { grid-template-columns: 30px minmax(0, 1fr); }
  .project-category { grid-column: 2; text-align: left; }
  .about { gap: 30px; }
}
@media (max-width: 650px) {
  .project, .timeline article, .foundation-grid article, .about-content { padding: 20px; border-radius: 12px; }
  .project { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .project-category { grid-column: 1; }
  .hero .eyebrow { letter-spacing: 1px; }
  .hero-footer { letter-spacing: 0; }
  .skill-row { padding: 14px; }
  .code-body { font-size: 14px; }
}

/* Warm orange navigation, distinct from the dark content cards. */
.header.wrap { background: #f2a366; color: #241810; border-bottom-color: #cf8148; box-shadow: 0 6px 22px rgb(0 0 0 / 18%); }
.header .brand > span:first-child { color: #54311d; }
.header .brand-mark { background: #241810; color: #f2a366; }
.header .nav-contact { border-color: #794523; }
.header nav a { padding-inline: 12px; border-radius: 6px; }
.header nav a:hover, .header nav a[aria-current="location"] { background: #241810; color: #fff; }
.header a:focus-visible { outline-color: #241810; }
@media (max-width: 650px) { .header nav a { padding-inline: 10px; } }

/* Gentle feedback; content stays readable with motion disabled. */
.project, .foundation-grid article {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.header nav a, .project-link { transition: background-color 180ms ease, color 180ms ease; }
.project-link span { transition: transform 180ms ease; }
.project:focus-within { border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project:hover, .foundation-grid article:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 12px 28px rgb(0 0 0 / 20%);
  }
  .project-link:hover span { transform: translate(2px, -2px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Continuous, gentle floating motion for the profile code card. */
@keyframes profile-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(-0.5deg); }
}
@keyframes profile-float-mobile {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: no-preference) {
  .code-panel { animation: profile-float 6s ease-in-out infinite; }
}
@media (max-width: 650px) and (prefers-reduced-motion: no-preference) {
  .code-panel { animation-name: profile-float-mobile; }
}

/* Lightweight inline icons with readable labels retained. */
.ui-icon { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.icon-orange { color: #ffb77f; background: #493629; }
.icon-blue { color: #91ceff; background: #263e53; }
.icon-purple { color: #c9adff; background: #3c3152; }
.icon-green { color: #8ee2bc; background: #28483e; }
.icon-pink { color: #ffa6cb; background: #4b3041; }
.project-symbol, .section-symbol { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; }
.section-symbol { margin-bottom: 12px; }
.skill-row { grid-template-columns: 32px minmax(0, 1fr); }
.skill-row > .skill-symbol { padding: 5px; border-radius: 7px; }
.skill-symbol .ui-icon { width: 22px; height: 22px; }
.skill-row > .icon-orange { color: #ffb77f; }
.skill-row > .icon-blue { color: #91ceff; }
.skill-row > .icon-purple { color: #c9adff; }
.link-arrow { display: inline-flex; color: var(--accent); }
.button .link-arrow { color: inherit; }
.back-top { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #241810; border: 1px solid #ffbc89; }
.footer .back-top:hover { background: #ffbd8d; color: #241810; }
@media (min-width: 651px) and (max-width: 900px) { .project { grid-template-columns: 40px minmax(0, 1fr); } }

/* A single animated accent under the whole headline. */
h1::after {
  content: '';
  display: block;
  width: 100%;
  max-width: 5rem;
  height: 4px;
  margin-top: 0.35em;
  background: var(--accent);
  border-radius: 999px;
  transform-origin: left center;
}
@keyframes headline-underline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: no-preference) {
  h1::after { animation: headline-underline 950ms cubic-bezier(.22, 1, .36, 1) 250ms both; }
}

/* Horizontal project gallery and native accessible detail dialog. */
.project-controls { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.project-controls p { margin:0; font-size:14px; }
.project-controls > div { display:flex; gap:8px; }
.project-controls button, .dialog-close { min-width:44px; min-height:44px; border:1px solid #69727e; background:#343b44; color:#fff; border-radius:8px; font:inherit; cursor:pointer; }
.project-controls .autoplay-toggle { min-width:76px; }
button:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.project-list.project-carousel { display:flex; gap:20px; overflow-x:auto; padding:8px 4px 24px; scrollbar-width:thin; scrollbar-color:var(--accent) #292e35; }
.project-carousel > .project { flex:0 0 min(360px, 85%); display:flex; flex-direction:column; align-items:flex-start; position:relative; padding:26px; min-height:390px; gap:18px; }
.project-carousel .project-symbol { width:60px; height:60px; border-radius:16px; }
.project-carousel .project-symbol .ui-icon { width:32px; height:32px; }
.project-carousel .project-main { width:100%; }
.project-carousel h3 { font-size:25px; line-height:1.3; margin-block:14px; }
.project-carousel .tag { font-size:12px; letter-spacing:1px; }
.project-carousel .project-main > p, .project-carousel .project-link { display:none; }
.project-carousel .stack span { font-size:13px; }
.project-carousel .project-category { text-align:left; font-size:12px; letter-spacing:.5px; margin-top:auto; }
.project-open { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:44px; padding:12px 0 0; border:0; border-top:1px solid var(--line); color:var(--accent); background:transparent; font:inherit; cursor:pointer; text-align:left; }
.project-open::after { content:''; position:absolute; inset:0; border-radius:16px; }
.project-carousel .project:focus-within { outline:2px solid var(--accent); outline-offset:-2px; }
.project-dialog { width:min(760px,calc(100% - 32px)); max-height:85dvh; padding:0; background:#292e35; color:white; border:1px solid #69727e; border-radius:18px; box-shadow:0 24px 90px #0008; }
.project-dialog::backdrop { background:rgb(9 12 16 / 80%); backdrop-filter:blur(5px); }
.dialog-bar { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:#343b44; border-bottom:1px solid var(--line); }
.dialog-bar > span { font-size:13px; letter-spacing:1.5px; }
.dialog-close { font-size:28px; }
.project-dialog .project-detail { display:flex; flex-direction:column; gap:16px; border:0; box-shadow:none; border-radius:0; padding:28px; transform:none; }
.project-dialog .project-category { text-align:left; color:var(--accent); }
.project-dialog h3 { font-size:clamp(24px,4vw,34px); }
body.dialog-open { overflow:hidden; }
@media(max-width:650px) { .project-controls { align-items:flex-start; flex-direction:column; } .project-carousel > .project { padding:22px; } .dialog-bar { padding:12px 18px; } .project-dialog .project-detail { padding:22px; } }

/* Dimensional project gallery: layered surfaces and pointer-driven perspective. */
.project-list.project-carousel { padding: 30px 14px 44px; perspective: 1200px; }
.project-carousel > .project {
  --card-glow: 242, 163, 102;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --light-x: 50%;
  --light-y: 15%;
  isolation: isolate;
  border: 1px solid rgba(var(--card-glow), .4);
  border-radius: 24px;
  background: radial-gradient(ellipse at var(--light-x) var(--light-y), rgba(var(--card-glow), .19), transparent 65%), linear-gradient(150deg, #39424e, #242b35 60%, #1d232c);
  box-shadow: 0 3px 0 #111720, 0 8px 0 -2px #10151c, 0 22px 30px -14px #000c, inset 0 1px 0 #ffffff30;
  padding: 30px;
  min-height: 435px;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 200ms ease-out, box-shadow 200ms ease, border-color 200ms ease;
}
.project-carousel > .project:nth-child(1) { --card-glow: 190, 157, 255; }
.project-carousel > .project:nth-child(3) { --card-glow: 111, 219, 169; }
.project-carousel > .project:nth-child(4) { --card-glow: 118, 193, 255; }
.project-carousel > .project:nth-child(5) { --card-glow: 255, 151, 194; }
.project-carousel > .project::before {
  content: ''; position: absolute; inset: 10px; z-index: -1; border: 1px solid #ffffff09; border-radius: 17px; pointer-events: none;
}
.project-carousel .project-symbol {
  width: 78px; height: 78px; border-radius: 22px;
  color: rgb(var(--card-glow));
  background: linear-gradient(145deg, rgba(var(--card-glow), .25), rgba(var(--card-glow), .06));
  border: 1px solid rgba(var(--card-glow), .4);
  box-shadow: 0 7px 0 -2px #141b24, 0 12px 20px #0005, inset 0 1px 0 #ffffff40;
  transform: translateZ(24px) rotate(-6deg);
  margin-bottom: 8px;
}
.project-carousel .project-symbol .ui-icon { width: 36px; height: 36px; }
.project-carousel h3 { font-weight: 600; letter-spacing: -.6px; }
.project-carousel .tag { color: rgb(var(--card-glow)); line-height: 1.6; }
.project-carousel .stack span { background: #10172088; border-color: #ffffff25; border-radius: 7px; }
.project-carousel .project-category { line-height: 1.65; }
.project-carousel .project-open { color: #fff; border-top-color: #ffffff20; padding-top: 16px; }
.project-carousel .project-open > span:last-child {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #17202a;
  background: rgb(var(--card-glow)); box-shadow: 0 3px 0 rgba(var(--card-glow), .25); font-size: 22px;
}
.project-open::after { border-radius: 24px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-carousel > .project:hover {
    transform: translateY(-7px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    border-color: rgba(var(--card-glow), .85);
    box-shadow: 0 4px 0 #111720, 0 10px 0 -2px #10151c, 0 30px 35px -12px #000d, 0 0 28px -12px rgba(var(--card-glow), .45), inset 0 1px 0 #ffffff40;
  }
}
@media (max-width: 650px) {
  .project-list.project-carousel { padding-inline: 6px; }
  .project-carousel > .project { padding: 24px; min-height: 410px; }
}
@media (prefers-reduced-motion: reduce) { .project-carousel > .project { transform: none; } }

/* Light project surfaces against the dark page. */
.project-carousel > .project {
  color: #182435;
  background: radial-gradient(ellipse at var(--light-x) var(--light-y), rgba(var(--card-glow), .22), transparent 65%), linear-gradient(145deg, #ffffff, #edf2f8);
  border-color: #d3dce8;
  box-shadow: 0 3px 0 #bbc7d7, 0 8px 0 -2px #8797ab, 0 22px 30px -14px #000b, inset 0 1px 0 #fff;
}
.project-carousel > .project::before { border-color: #fff9; }
.project-carousel .project-symbol {
  color: #554086; background: #eee7ff; border-color: #cfc0ee;
  box-shadow: 0 6px 0 -2px #c9bbdf, 0 12px 20px #283b5020, inset 0 1px 0 #fff;
}
.project-carousel > .project:nth-child(2) .project-symbol { color: #914617; background: #ffebdd; border-color: #ebc5aa; }
.project-carousel > .project:nth-child(3) .project-symbol { color: #176348; background: #dcf4e9; border-color: #addcc7; }
.project-carousel > .project:nth-child(4) .project-symbol { color: #205d8e; background: #e0efff; border-color: #b8d4ef; }
.project-carousel > .project:nth-child(5) .project-symbol { color: #913660; background: #fce3ef; border-color: #e8bed1; }
.project-carousel .tag, .project-carousel .project-category { color: #37465a; }
.project-carousel .stack span { color: #26364a; background: #ffffffc9; border-color: #becbdc; }
.project-carousel .project-open { color: #182435; border-top-color: #bac8d8; font-weight: 600; }
.project-carousel .project-open > span:last-child { color: #182435; }
.project-carousel .project:focus-within { outline-color: #8c461b; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-carousel > .project:hover { border-color: #fff; box-shadow: 0 4px 0 #bbc7d7, 0 10px 0 -2px #8797ab, 0 30px 35px -12px #000c, 0 0 28px -12px rgba(var(--card-glow), .45), inset 0 1px 0 #fff; }
}
.project-dialog { color-scheme: light; background: #f5f8fc; color: #182435; border-color: #d3dce8; }
.project-dialog .dialog-bar { background: #e7edf5; color: #26364a; border-bottom-color: #c5d1e0; }
.project-dialog .dialog-close { background: #fff; border-color: #adbdcf; color: #182435; }
.project-dialog .project-detail { background: #f5f8fc; color: #182435; }
.project-dialog .project-main > p, .project-dialog .tag, .project-dialog .project-category { color: #344358; }
.project-dialog .stack span { background: #e4ebf4; color: #26364a; border-color: #bfccdc; }
.project-dialog .project-link, .project-dialog .link-arrow { color: #8d4217; }
.project-dialog .project-link { border-color: #ab6438; }
.project-dialog a:focus-visible, .project-dialog button:focus-visible { outline-color: #8d4217; }

/* Compact project cards with tighter spacing and no artificial empty height. */
.project-carousel > .project { min-height: 0; padding: 22px; gap: 12px; }
.project-carousel .project-symbol { width: 54px; height: 54px; border-radius: 15px; margin-bottom: 0; }
.project-carousel .project-symbol .ui-icon { width: 28px; height: 28px; }
.project-carousel h3 { font-size: 23px; margin-block: 10px; line-height: 1.25; }
.project-carousel .stack { gap: 6px; }
.project-carousel .stack span { padding: 4px 8px; }
.project-carousel .project-category { margin-top: 0; padding-top: 0; line-height: 1.5; }
.project-carousel .project-open { margin-top: auto; padding-top: 10px; }
.project-carousel .project-open > span:last-child { width: 30px; height: 30px; font-size: 20px; }
@media (max-width: 650px) { .project-carousel > .project { padding: 20px; min-height: 0; } }

.social-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.social-links a { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:6px 14px 6px 6px; border:1px solid #59626e; border-radius:10px; background:#292e35; color:#fff; font-size:14px; }
.social-links a:hover { border-color:var(--accent); background:#343b44; }
.social-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:7px; }
.linkedin-icon { background:#0a66c2; color:#fff; font-family:Arial,sans-serif; font-size:24px; font-weight:700; letter-spacing:-1px; }
.github-icon { background:#f1f4f8; color:#24292f; }

.project-dialog .project-main > .project-version-note, .project-version-note {
  padding: 12px 14px;
  border-left: 3px solid #bd692e;
  border-radius: 6px;
  background: #fff0e3;
  color: #583519;
  font-size: 14px;
  line-height: 1.6;
}

.project-carousel > .project:nth-child(6) { --card-glow: 118, 193, 255; }
.project-carousel > .project:nth-child(6) .project-symbol { color: #205d8e; background: #e0efff; border-color: #b8d4ef; }

/* Three visible mobile links fit in one compact row. */
@media (max-width: 650px) {
  .header.wrap { padding: 5px 12px; gap: 8px; flex-wrap: nowrap; justify-content: space-between; }
  .header .brand { font-size: 18px; letter-spacing: -.7px; flex-shrink: 0; }
  .header nav { width: auto; flex-wrap: nowrap; justify-content: flex-end; gap: 2px; font-size: 13px; }
  .header nav a { padding-inline: 8px; min-height: 44px; white-space: nowrap; }
}
@media (max-width: 350px) {
  .header.wrap { padding-inline: 8px; gap: 4px; }
  .header .brand { font-size: 16px; }
  .header nav a { padding-inline: 6px; }
}
/* Allow wrapping when text is enlarged rather than clipping navigation. */
@media (max-width: 19rem) {
  .header.wrap { flex-wrap: wrap; justify-content: center; }
  .header nav { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 650px) {
  .header .brand-mark { display: inline-grid; width: 16px; height: 19px; margin-left: 5px; font-size: 14px; vertical-align: middle; }
}
@media (max-width: 350px) {
  .header nav a { padding-inline: 4px; }
  .header .brand-mark { width: 14px; height: 17px; margin-left: 4px; font-size: 12px; }
}

/* Screenshots are shown in project details, keeping carousel cards compact. */
.project-carousel .project-screenshot { display: none; }
.project-screenshot { margin: 22px 0; }
.project-screenshot a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid #bdcada; }
.project-screenshot img { display: block; width: 100%; height: auto; background: #eef2f7; }
.project-screenshot figcaption { color: #344358; font-size: 14px; line-height: 1.6; margin-top: 10px; }

.image-viewer { width: min(1500px, calc(100% - 20px)); max-width: none; max-height: 94dvh; padding: 0; border: 1px solid #69727e; border-radius: 12px; background: #18202b; color: #fff; }
.image-viewer::backdrop { background: #080d14e8; }
.image-viewer-bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #202a37; z-index: 1; }
.image-viewer-bar button { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--accent); color: #241810; font: inherit; font-weight: 600; cursor: pointer; }
.image-viewer-bar button span { margin-left: 8px; font-size: 22px; }
.image-viewer-body { padding: 12px; }
.image-viewer img { display: block; width: 100%; height: auto; }
@media (max-width: 650px) { .image-viewer-bar > span { display: none; } .image-viewer-bar { justify-content: flex-end; } .image-viewer-body { padding: 4px; } }

/* Dialogs scroll independently and remain usable on short or enlarged displays. */
.project-dialog, .image-viewer { overscroll-behavior: contain; scroll-behavior: auto; overflow-y: auto; overflow-x: hidden; }
.project-dialog .dialog-close { flex: 0 0 44px; }
.project-dialog .project-main, .dialog-content, .image-viewer-body { min-width: 0; }
.project-dialog h3, .project-dialog p, .project-dialog .tag, .project-dialog .stack span { overflow-wrap: anywhere; }
.project-dialog .project-link { min-height: 44px; }
@media (max-height: 500px) {
  .project-dialog, .image-viewer { max-height: calc(100dvh - 16px); }
  .dialog-bar, .image-viewer-bar { padding-block: 8px; }
}
@media (max-width: 360px) {
  .project-dialog .project-detail { padding: 16px; }
  .project-dialog .dialog-bar { padding-inline: 16px; }
}

/* Larger personal introduction. */
.hero .intro { margin-bottom: 26px; }
.hero .intro [data-name] {
  display: block;
  margin-top: 6px;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.hero .intro .nickname { font-size: .62em; font-weight: 500; white-space: nowrap; letter-spacing: -.02em; }