@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:wght@400;500;600;700&family=Sora:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

/* Portfolio design system — shared by Home, All Works, My Story and Playground.
   Order: tokens → base → shell → components → page layouts → motion → breakpoints.
   Load after the repository's responsive.css. See DESIGN-SYSTEM.md. */

/* 1. Tokens */
:root {
  --paper: #ffffff;
  --ink: #39252a;
  --quiet: #716362;
  --rule: #d6d6d6;
  --surface: #e7e7e7;
  --surface-media: #dfdfdf;
  --lavender: #573038;
  --footer-ink: #ffffff;
  --focus: #873b45;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --body-font: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs: 10px;
  --text-sm: 12px;
  --text-body: 13px;
  --text-title: clamp(44px, 6vw, 76px);
  --text-display: clamp(48px, 7vw, 92px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 96px;
  --site-width: 1480px;
  --site-gutter: clamp(24px, 7vw, 104px);
  --site-header-top: 24px;
  --logo-size: 57.2px;
  --footer-height: 70px; /* Updated by ResizeObserver. */
  --radius-small: 3px;
  --radius-card: 5px;
  --radius-pill: 24px;
  --ease: cubic-bezier(.2, .6, .3, 1);
  --motion-fast: 180ms;
  --motion-fade: 1200ms;
  --motion-portrait: 1700ms;
  --z-scene: 5;
  --z-navigation: 20;
  --z-footer: 40;
  --skill-rgb: 104,126,70;
  --skill-ux: 76,115,141;
  --skill-hmi: 104,126,70;
  --skill-research: 128,94,153;
  --skill-code: 56,129,111;
  --skill-brand: 155,105,74;
}
[data-skill="UX / UI"] { --skill-rgb: var(--skill-ux); }
[data-skill="HMI"] { --skill-rgb: var(--skill-hmi); }
[data-skill="Research"] { --skill-rgb: var(--skill-research); }
[data-skill="Programming"] { --skill-rgb: var(--skill-code); }
[data-skill="Branding"] { --skill-rgb: var(--skill-brand); }

/* 2. Base */
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; isolation: isolate;
  padding-bottom: var(--footer-height); background: var(--paper); color: var(--ink);
  font: 15px/1.8 var(--body-font); }
h1, h2, h3, p, figure { margin: 0; }
h1 { font: 400 var(--text-title)/1.08 var(--serif); letter-spacing: -.04em; }
h2 { font: 400 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
h3 { font: 400 29px/1.25 var(--serif); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
img { display: block; width: 100%; max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 15px; top: -100px; background: var(--paper); padding: 10px; z-index: 50; }
.skip:focus { top: 10px; }
.space-before { margin-top: var(--space-5); }
.space-before-lg { margin-top: var(--space-6); }
.text-link { font-size: 11px; border-bottom: 1px solid #aeb2a2; padding-bottom: 3px; }
.kicker, .eyebrow, .label, .highlight-label { color: var(--quiet); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; }
.kicker { margin-bottom: 22px; }

/* 3. Shared shell, navigation and fixed footer */
.shell { width: 100%; max-width: var(--site-width); margin: 0 auto; flex: 1;
  padding: var(--site-header-top) var(--site-gutter) 100px; }
.masthead, .works-theme > header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-5); }
.masthead { min-height: var(--logo-size); margin-bottom: 25px; }
.works-theme > header { width: 100%; max-width: var(--site-width); margin: 0 auto; flex-shrink: 0;
  padding: var(--site-header-top) var(--site-gutter) 0; }
.identity { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 1; }
.identity img { width: var(--logo-size); height: var(--logo-size); max-width: none; object-fit: contain; mix-blend-mode: multiply; }
.edition { font-size: var(--text-xs); letter-spacing: .1em; color: var(--quiet); }
.hero nav, .story-nav, .page-nav { display: flex; flex-wrap: wrap; gap: 12px 20px; font: 12px/1.7 var(--mono); }
.story-nav, .page-nav { flex: 1 1 100%; }
.hero nav a, .story-nav a, .page-nav a { width: max-content; border-bottom: 1px solid transparent; }
.hero nav a:hover, .story-nav a:hover, .page-nav a:hover, nav a[aria-current] { border-bottom-color: currentColor; }
.site-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-footer); margin: 0;
  padding: 7px max(var(--site-gutter), calc((100vw - var(--site-width))/2 + var(--site-gutter)));
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 10px;
  background: var(--lavender); color: var(--footer-ink); font: 10px/1.7 var(--mono); transition: opacity var(--motion-fade) var(--ease); }
.footer-location { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); position: relative; }
.footer-motto { text-align: right; }
.footer-links { grid-column: 1/-1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font: inherit; }
.footer-links a { border-bottom: 1px solid #aaa3b8; }
.footer-play { font: 9px/1.5 var(--mono); background: none; border: 0; border-bottom: 1px solid #aaa3b8;
  border-radius: 0 !important; padding: 0 4px; min-width: 40px; min-height: 24px; }
.resume-pending { opacity: .45; cursor: default; }
.music-feedback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 4. Editorial components */
.section, .story-section, .gallery-section { margin-top: var(--space-8); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: var(--space-6); }
.work-list { display: grid; gap: 28px; }
.work { display: grid; gap: var(--space-4); border-top: 1px solid var(--rule); padding-top: var(--space-5); }
.work-image { background: var(--surface-media); overflow: hidden; align-self: start; }
.work-image img { aspect-ratio: 1.7; object-fit: cover; }
.work h3 { font-size: 22px; letter-spacing: -.02em; }
.work p { font-size: 11px; line-height: 1.85; color: var(--quiet); margin-top: 9px; }
.work .label { font-size: 9px; margin-bottom: 9px; }
.arrow { display: inline-block; font-size: 20px; margin-top: 12px; transition: transform var(--motion-fast) var(--ease); }
a:hover .arrow { transform: translate(3px,-3px); }
.thoughts { display: grid; gap: 18px; }
.thought { min-height: 230px; padding: var(--space-5); background: #e6e6e6; display: flex; flex-direction: column; justify-content: space-between; }
.thought:nth-child(2) { background: #e7e9e1; }
.thought:nth-child(3) { background: #eae5ec; }
.thought .serial { font: italic 38px var(--serif); color: #8d9182; }
.thought h3 { font-size: 30px; margin: 20px 0; }
.thought .date { font-size: 9px; color: var(--quiet); }
.play-heading { font: 36px/1.25 var(--serif); max-width: 450px; margin-bottom: var(--space-6); }
.play-grid, .photo-grid { display: grid; gap: 18px; }
.play-grid img { aspect-ratio: 1.1; object-fit: cover; }
figcaption { font-size: var(--text-xs); color: var(--quiet); margin-top: 10px; letter-spacing: .05em; }
.play-grid figcaption { display: flex; justify-content: space-between; }
.music-art { aspect-ratio: 1.1; background: #e6e1ee; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; padding: 16px; color: #6a617c; }
.music-art > span { font-size: 12px; letter-spacing: .18em; }
.music-art small { font-size: 9px; }
.sound-lines { font-size: clamp(16px,2.5vw,32px); letter-spacing: 2px; white-space: nowrap; }
.closing { display: grid; gap: 40px; margin-top: 78px; padding-top: 42px; border-top: 1px solid var(--rule); }
.closing h3 { margin: 16px 0; }
.closing p { font-size: 12px; line-height: 1.9; color: var(--quiet); max-width: 470px; }
.credentials { display: grid; gap: 20px; margin-top: 24px; color: var(--quiet); font-size: 12px; }
.credentials strong { font-weight: 400; color: var(--ink); }
.notes { display: grid; gap: 18px; }
.note { display: flow-root; border-bottom: 1px solid var(--rule); padding-bottom: 15px; }
.note h3 { font-size: 19px; margin: 8px 0; }
.note p { font-size: 11px; color: var(--quiet); }
.note .highlight-label { font-size: 10px; margin-bottom: 10px; }
.note p[lang] { font-size: 10px; margin-top: 10px; }
.highlight-links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 15px; clear: both; }
.highlight-preview { float: right; width: 85px; height: 65px; object-fit: cover; margin: 0 0 15px 18px; border-radius: var(--radius-small); }

/* 5. Home layout */
.hero { display: flex; flex-direction: column; gap: 28px; }
.hero .intro { max-width: 650px; }
.belief { font: clamp(28px,3.2vw,46px)/1.32 var(--serif); letter-spacing: -.025em; }
.context { max-width: 560px; font-size: 13px; line-height: 1.95; color: var(--quiet); margin-top: 30px; }
.motto { margin-top: var(--space-7); }
.motto h1 { font-size: clamp(48px,6.4vw,88px); }
.motto p { margin-top: 12px; font-size: 11px; letter-spacing: .04em; color: var(--quiet); }
.kant-link { display: inline-block; }
.kant-link span { display: inline-block; vertical-align: top; font: .24em var(--mono); margin: 12px 0 0 8px; color: var(--quiet); }
.hero nav { order: -2; }
.hero .portrait { width: 100%; max-width: 290px; order: -1; }
.portrait img, .story-portrait img { aspect-ratio: 372/406; object-fit: cover; object-position: center; filter: grayscale(1); }
.work-and-portrait { max-width: 760px; }
.nature-trigger { background: none; border: 0; border-bottom: 1px solid currentColor; border-radius: 0 !important; padding: 0; font: inherit; color: inherit; line-height: 1.4; }

/* 6. Story and Playground */
.story-heading { font: var(--text-display)/1.05 var(--serif); letter-spacing: -.04em; margin: 18px 0 32px; }
.story-lead { font: clamp(25px,3vw,38px)/1.35 var(--serif); max-width: 650px; }
.story-layout { display: grid; gap: 35px; margin-top: 60px; }
.story-copy p { font-size: 13px; line-height: 1.95; color: var(--quiet); max-width: 620px; margin-bottom: 23px; }
.story-portrait { max-width: 320px; }
.lenses { display: grid; gap: 28px; margin-top: 75px; border-top: 1px solid var(--rule); padding-top: 35px; }
.lenses h3 { margin: 15px 0; }
.lenses p { font-size: 12px; color: var(--quiet); }
.journey { display: grid; margin-top: 25px; }
.journey > div { border-top: 1px solid var(--rule); padding: 17px 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.journey span { color: var(--quiet); font-size: 11px; }
.story-end { font: clamp(34px,5vw,62px)/1.2 var(--serif); max-width: 730px; margin-top: 100px; }
.gallery-section { scroll-margin-top: 35px; }
.gallery-section h2 { margin-bottom: 28px; }
.photo-grid img { aspect-ratio: 1.4; object-fit: cover; }
.photo-grid p { font-size: 11px; margin-top: 12px; }
.play-index { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 35px; font-size: 12px; }
.play-index a { border-bottom: 1px solid #aaa; }
.track-title { font-size: 35px; margin-bottom: 20px; }
.playground-audio { width: min(100%,500px); }

/* 7. All Works: filters and horizontal project cards */
.works-theme main { width: 100%; flex: 1; max-width: var(--site-width); margin: 0 auto; padding: 30px var(--site-gutter) 80px; }
.works-theme h1 { margin: 14px 0; }
.works-theme .intro { max-width: 600px; color: var(--quiet); line-height: 1.9; margin-bottom: 36px; }
.title-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.filter-mode { display: flex; gap: 3px; padding: 4px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: #ececec; flex-shrink: 0; }
.filter-mode button { border: 0; border-radius: 20px !important; padding: 9px 14px; background: transparent; color: var(--quiet); font-size: 12px; }
.filter-mode button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 5px #39252a10; }
.toolbar { margin: 24px 0 16px; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filters button { border: 1px solid var(--rule); border-radius: 20px !important; padding: 8px 13px; background: transparent; color: var(--quiet); font-size: 11px; }
.filters button[aria-pressed="true"] { background: #e7eadf; color: #303a28; }
.filters button[data-skill]:not([data-skill="All works"]) { color: rgb(var(--skill-rgb)); border-color: rgba(var(--skill-rgb),.22); background: rgba(var(--skill-rgb),.04); }
.filters button[data-skill]:not([data-skill="All works"])[aria-pressed="true"] { border-color: rgba(var(--skill-rgb),.6); background: rgba(var(--skill-rgb),.16); }
.count { font-size: 11px; color: var(--quiet); margin: 20px 0; }
.grid { display: grid; gap: 25px; }
.card { --image-fraction: 35.714%; position: relative; display: grid; grid-template-columns: minmax(0,1.8fr) minmax(0,1fr);
  min-height: 275px; border: 1px solid var(--rule); background: var(--surface); border-radius: var(--radius-card); overflow: hidden;
  transition: transform var(--motion-fast) var(--ease), border-color var(--motion-fast); }
.card::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(125deg,rgba(var(--skill-rgb),.15),rgba(var(--skill-rgb),.07) 55%,rgba(var(--skill-rgb),.02)); opacity: 0; transition: opacity 350ms var(--ease); }
.card.has-project:hover, .card.has-project:focus-within { border-color: rgba(var(--skill-rgb),.48); }
.card.has-project:hover { transform: translateY(-2px); }
.card.has-project:hover::before, .card.has-project:focus-within::before { opacity: 1; }
.card .content { position: relative; grid-column: 1; grid-row: 1; min-width: 0; padding: 13px 12px; display: flex; flex-direction: column; }
.card h2 { font: 400 20px/1.15 var(--serif); text-transform: none; letter-spacing: -.02em; margin-bottom: 7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .description { font-size: 11px; line-height: 1.5; color: var(--quiet); margin-bottom: 7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-heading { display: flex; justify-content: flex-start; height: 36.72px; margin: auto 0 6px; flex-shrink: 0; }
.logo-badge { display: flex; justify-content: flex-start; align-items: center; width: 69.12px; height: 36.72px; color: #414637; font-size: 19.44px; font-weight: 700; }
.logo-badge img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1) brightness(.6) contrast(8); mix-blend-mode: multiply; }
a.logo-badge { position: relative; z-index: 2; transition: opacity var(--motion-fast); }
a.logo-badge:hover { opacity: .7; }
.card .role { color: var(--quiet); font-size: 9px; line-height: 1.5; margin-bottom: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bottom { border-top: 1px solid var(--rule); padding-top: 8px; }
.skill-label { font-size: 9px; color: rgb(var(--skill-rgb)); }
.preview { grid-column: 2; grid-row: 1; position: relative; min-height: 100%; background: var(--surface-media); border-left: 1px solid var(--rule); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease); }
.has-project:hover .preview img { transform: scale(1.025); }
.fallback { font: 30px var(--serif); color: #465640; }
.card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-link:focus-visible { outline-offset: -3px; }
.card-arrow { position: absolute; left: calc(100% - var(--image-fraction)/2); top: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #152018cc; color: #edf5e6; border: 1px solid #b9cc9b66; font-size: 27px; opacity: 0; backdrop-filter: blur(6px);
  transform: translate(-50%,-50%) scale(.9); transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
.has-project:hover .card-arrow, .card-link:focus-visible .card-arrow { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* 8. Interaction scenes. Never affect document geometry or pointer targeting. */
.nature-background { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: 0; pointer-events: none; transition: opacity var(--motion-fade) var(--ease); }
.nature-background.active { opacity: .88; }
main, .hero .intro, .hero nav, .work-and-portrait, #main>.section, #main>.closing, .masthead .identity, .masthead .edition, .works-theme header .identity { transition: opacity var(--motion-fade) var(--ease); }
.hero .portrait { transition: opacity var(--motion-portrait) var(--ease); }
body.nature-active .hero .intro { opacity: .25; }
body.nature-active .hero nav, body.nature-active .work-and-portrait, body.nature-active #main>.section, body.nature-active #main>.closing { opacity: .15; }
body.nature-active .hero .portrait { opacity: 0; }
body.nature-active .site-footer { opacity: 0; pointer-events: none; }
.thought-preview { position: fixed; inset: 0 8vw calc(var(--footer-height) + 12px); z-index: var(--z-scene); overflow: hidden; pointer-events: none; opacity: 0;
  transition: opacity var(--motion-fade) var(--ease); mask-image: linear-gradient(transparent,#000 15%,#000 80%,transparent); }
.thought-preview.active { opacity: .9; }
.thought-scroll { max-width: 900px; margin: 0 auto; transform: translateY(38vh); }
.thought-preview-title { font: 400 clamp(52px,8vw,112px)/1.08 var(--serif); letter-spacing: -.04em; text-transform: none; color: #414a39; margin-bottom: 55px; }
.thought-scroll p { font: clamp(24px,4vw,55px)/1.5 var(--serif); margin-bottom: 24px; color: #4f5747; }
.thought-scroll .thought-preview-label { font: 11px var(--mono); letter-spacing: .12em; margin-bottom: 22px; }
.thought-preview.active .thought-scroll { animation: thought-rise 85s linear forwards; }
@keyframes thought-rise { from { transform: translateY(38vh); } to { transform: translateY(calc(-100% + 25vh)); } }
body.thought-active .hero .intro, body.thought-active .hero .portrait, body.thought-active .work-and-portrait,
body.thought-active #main>.section, body.thought-active #main>.closing, body.thought-active .site-footer,
body.thought-active .masthead .identity, body.thought-active .masthead .edition, body.thought-active.works-theme main,
body.thought-active.works-theme header .identity, body.thought-active .shell:has(.story-nav) main { opacity: 0; pointer-events: none; }
body.thought-active .hero nav, body.thought-active .story-nav, body.thought-active .page-nav { position: relative; z-index: var(--z-navigation); opacity: 1; pointer-events: auto; }
body.thought-active .nature-background { opacity: 0; }

/* 9. Progressive responsive layouts: base supports 320px. */
@media (min-width: 375px) {
  .work { grid-template-columns: 1.15fr 1fr; }
  .play-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .card { --image-fraction: 40%; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); }
  .card .content { padding: 13px 15px; }
}
@media (min-width: 601px) {
  :root { --site-header-top: 38px; }
  .masthead, .works-theme > header { align-items: center; }
  .story-nav, .page-nav { flex: 0 1 auto; margin-left: auto; justify-content: flex-end; text-align: right; }
  .photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px; }
  .highlight-preview { width: 104px; height: 76px; }
  .card { --image-fraction: 41.6667%; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); min-height: 250px; }
  .card .content { padding: 16px 20px; }
  .card h2 { font-size: 23px; }
  .card-heading { height: 41.04px; }
  .logo-badge { width: 92.88px; height: 41.04px; font-size: 21.6px; }
  .card .role { -webkit-line-clamp: 1; }
  .filter-mode button { padding: 10px 19px; }
  .works-theme main { padding-top: 55px; }
  .journey > div { flex-direction: row; justify-content: space-between; gap: 20px; }
  .journey span { text-align: right; }
}
@media (min-width: 768px) {
  .masthead { margin-bottom: 30px; }
  .hero { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.9fr); gap: 32px 45px; position: relative; }
  .hero .intro { grid-column: 1; grid-row: 1/3; }
  .hero nav { grid-column: 2; grid-row: 1; justify-content: flex-end; text-align: right; }
  .hero .portrait { grid-column: 2; grid-row: 2; align-self: start; justify-self: end; max-width: 430px; }
  .belief { font-size: clamp(28px,3vw,42px); }
  .context { font-size: 12px; line-height: 1.8; }
  .motto { margin-top: 28px; }
  .motto h1 { font-size: clamp(48px,5.8vw,78px); }
  .section { margin-top: 100px; }
  .thoughts { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
  .thought { min-height: 310px; padding: 30px; }
  .play-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
  .closing { grid-template-columns: 1.3fr 1fr; gap: 80px; margin-top: 110px; }
  .story-layout { grid-template-columns: 1.6fr 1fr; gap: 80px; }
  .story-portrait { justify-self: end; }
  .lenses { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .story-columns { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; }
  .story-section, .gallery-section { margin-top: 85px; }
  .site-footer { grid-template-columns: 1fr auto 1fr; gap: 8px 18px; padding-top: 8px; padding-bottom: 8px; }
  .footer-motto { text-align: center; }
  .footer-links { grid-column: auto; justify-content: flex-end; }
}
@media (min-width: 1051px) {
  .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .card { --image-fraction: 44.4444%; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
}
@media (min-width: 1100px) {
  .hero { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 26px 80px; }
  .hero .portrait { max-width: 460px; }
  .masthead { margin-bottom: 35px; }
  .section { margin-top: 115px; }
  .thoughts { gap: 36px; }
}
@media (hover: none) {
  .card-arrow { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card.has-project:hover { transform: none; }
  .thought-scroll { transform: translateY(38vh); }
}

/* 10. Design-system reference page (documentation only). */
.system-section { margin-top: var(--space-8); scroll-margin-top: 30px; }
.system-section > h2 { margin-bottom: var(--space-5); }
.system-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: var(--space-5); }
.system-swatch { height: 100px; border: 1px solid var(--rule); border-radius: var(--radius-card); margin-bottom: var(--space-3); }
.swatch-paper { background: var(--paper); }.swatch-surface { background: var(--surface); }.swatch-ink { background: var(--ink); }.swatch-quiet { background: var(--quiet); }.swatch-lavender { background: var(--lavender); }
.system-caption { font-size: 11px; color: var(--quiet); }
.system-type { border-bottom: 1px solid var(--rule); padding: var(--space-5) 0; }
.system-display { font: var(--text-display)/1.05 var(--serif); letter-spacing: -.04em; }
.system-heading { font: 29px/1.25 var(--serif); }
.system-spacing { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-5); }
.system-spacing div { width: 80px; font-size: 11px; }
.system-spacing span { display: block; background: var(--lavender); margin-bottom: var(--space-3); }
.space-sample-2 { height: var(--space-2); }.space-sample-4 { height: var(--space-4); }.space-sample-5 { height: var(--space-5); }.space-sample-6 { height: var(--space-6); }.space-sample-7 { height: var(--space-7); }.space-sample-8 { height: var(--space-8); }
.system-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.system-table td,.system-table th { text-align: left; border-bottom: 1px solid var(--rule); padding: 12px 8px; vertical-align: top; }
.system-table th { font-weight: 400; }

/* Editorial previews and story highlights. */
.thoughts { position:relative; isolation:isolate; }
.thought-pencil { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
.highlight-preview { width:clamp(128px,18vw,190px); height:auto; aspect-ratio:1.4; }
.story-highlights { margin-top:80px; }
.story-highlight-grid { display:grid; gap:0; margin-top:25px; }
.story-highlight-grid article { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:17px 0; border-top:1px solid var(--rule); }
.about-theme main .story-highlight-grid h3 { margin:0; font:400 12px/1.8 var(--body-font); color:var(--ink); letter-spacing:0; }
.story-highlight-grid ul { margin:0; padding:0; list-style:none; min-width:0; }
.story-highlight-grid li { margin-bottom:10px; font:11px/1.8 var(--body-font); color:var(--quiet); overflow-wrap:anywhere; }
.story-highlight-grid li:last-child { margin-bottom:0; }
.story-highlight-grid a { text-decoration:underline; text-underline-offset:4px; }
.not-found { padding-block:clamp(50px,10vh,130px); max-width:900px; }
.not-found>p { margin-block:24px; max-width:62ch; }
.not-found nav { display:flex; flex-wrap:wrap; gap:24px; margin-top:36px; }
@media(min-width:768px) { .story-highlight-grid article { grid-template-columns:minmax(140px,1fr) minmax(0,3fr); gap:20px; } .story-highlight-grid ul { text-align:right; } }
@media(max-width:399px) { .highlight-preview { float:none; width:100%; max-width:220px; margin:0 0 20px; } }

.footer-play { display:inline-flex; align-items:center; justify-content:center; width:28px; height:24px; padding:4px; border:0; vertical-align:middle; }
.footer-play svg { width:14px; height:14px; fill:currentColor; }

/* Playground previews and compact project return control. */
.music-art svg { flex-shrink: 0; }
.film-preview { position: relative; }
.film-preview iframe { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1.1; border: 0; pointer-events: none; }
.oracle-art { aspect-ratio: 1.7; display: grid; place-items: center; color: #77605a; font: 24px Georgia,serif; letter-spacing: .12em; }
.mobile-back-top { position: fixed; top: max(8px,env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 100; border: 1px solid var(--rule); border-radius: 30px; padding: 12px 20px; background: var(--paper,#ffffff); color: var(--ink); font: inherit; box-shadow: 0 4px 20px #39252a10; }
.mobile-back-top[hidden] { display: none; }
@media(max-width:767px) {
 .nature-trigger { border: 0; text-decoration: none; cursor: text; pointer-events: none; }
 .nature-trigger::after, .thought-preview, .nature-background, .thought-pencil { display: none !important; }
}
@media(min-width:768px) { .mobile-back-top { display: none; } }

/* Hover-only Playground dissolves. */
.preview-image-frame { display:block; position:relative; overflow:hidden; }
.preview-image-frame > img { display:block; width:100%; }
.preview-title-frame { position:relative; display:inline-grid; min-width:100px; text-align:center; font-size:12px; letter-spacing:.18em; }
.preview-crossfade { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 700ms ease; object-fit:cover; }
.preview-title-frame .preview-crossfade { background:#e6e1ee; }
.preview-crossfade.is-visible { opacity:1; }
.film-preview iframe { opacity:0; transition:opacity 700ms ease; }
.film-preview iframe.is-visible { opacity:1; }
/* Selected work: full-width cards with a quiet, CSS-only stacking scroll. */
.work-and-portrait { max-width:none; width:100%; }
#selected .work-list { display:grid; grid-template-columns:1fr; gap:40px; isolation:isolate; }
#selected .work { grid-template-columns:1fr; gap:0; min-width:0; padding:0; border:1px solid var(--rule); background:var(--paper,#ffffff); overflow:hidden; border-radius:8px; }
#selected .work-image { width:100%; }
#selected .work-image img { display:block; width:100%; aspect-ratio:1.8; object-fit:contain; }
#selected .work-copy { padding:24px; }
#selected .work h3 { font-size:clamp(24px,3vw,36px); }
#selected .work p { font-size:12px; }
@media(min-width:768px) {
 #selected .work { grid-template-columns:1.25fr 1fr; align-items:stretch; }
 #selected .work-image { height:100%; }
 #selected .work-image img { height:100%; min-height:300px; object-fit:contain; }
 #selected .work-copy { padding:clamp(28px,5vw,70px); align-self:center; }
}
@media(min-width:768px) and (min-height:700px) and (prefers-reduced-motion:no-preference) {
 #selected .work-list { gap:70px; padding-bottom:80px; }
 #selected .work { position:sticky; top:48px; box-shadow:0 -8px 28px #39252a09; }
 #selected .work:nth-child(2) { top:64px; }
 #selected .work:nth-child(3) { top:80px; }
 #selected .work:nth-child(4) { top:96px; }
 #selected .work:nth-child(5) { top:112px; }
}

/* Compact, unnumbered article previews. */
.thought { min-height:190px; padding:24px; }
.thought h3 { margin:0 0 24px; font-size:clamp(24px,2.5vw,30px); }
@media(min-width:1000px) { .thought { min-height:230px; } }
.film-play-indicator { position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:white; background:#39252a80; pointer-events:none; }
.film-preview:has(iframe.is-visible) .film-play-indicator { opacity:0; }
@media(min-width:768px) and (min-height:700px) and (prefers-reduced-motion:no-preference) {
 #selected .work:nth-child(n) { top:calc(48px + min(var(--stack-index,0),8) * 16px); }
}

/* Independent product-management projects. */
[data-skill="My apps"] { --skill-color:#596d49; --skill-rgb:89,109,73; }

/* Playground: eight-photo gallery and full-image modal viewer. */
#photography .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#photography .photo-grid img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
#photography .photo-grid a { cursor:zoom-in; }
@media(min-width:1000px) { #photography .photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.photo-lightbox { position:fixed; inset:0; width:min(1200px,96vw); max-width:96vw; height:auto; max-height:94dvh; margin:auto; padding:clamp(12px,3vw,28px); border:1px solid var(--rule); border-radius:8px; background:var(--paper,#ffffff); color:var(--ink); box-sizing:border-box; }
.photo-lightbox::backdrop { background:rgba(25,28,24,.82); backdrop-filter:blur(6px); }
.lightbox-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; font:12px var(--mono); margin-bottom:12px; }
.photo-lightbox button { min-width:44px; min-height:44px; padding:8px; border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); font:14px var(--mono); cursor:pointer; }
.photo-lightbox button:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.lightbox-stage { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:8px; align-items:center; }
.lightbox-stage img { width:100%; height: min(70dvh,800px); min-height:0; object-fit:contain; }
.lightbox-caption { margin:12px 0 0; text-align:center; font:11px/1.6 var(--mono); color:var(--quiet); }
@media(max-width:480px) { .lightbox-stage { grid-template-columns:1fr 1fr; } .lightbox-stage img { grid-column:1/-1; grid-row:1; height:60dvh; } .lightbox-prev { justify-self:start; } .lightbox-next { justify-self:end; } }

/* Photography framing; watermarks are embedded in the image files. */
#photography .photo-grid a, .lightbox-photo { position:relative; display:block; }

.lightbox-photo { min-width:0; }
.lightbox-photo img { display:block; }
@media(max-width:480px) { .lightbox-photo { grid-column:1/-1; grid-row:1; } }

/* Shared white background and maroon accents across portfolio and blog. */
:root{--paper:#ffffff;--ink:#39252a;--quiet:#716362;--rule:#d6d6d6;--surface:#e7e7e7;--surface-media:#dfdfdf;--lavender:#573038;--footer-ink:#ffffff;--focus:#873b45;--palette-accent:#873b45;}
::selection{background:#873b45;color:white}
.motto h1,.section-head h2,.highlight-label,.kicker,.latest-label{color:var(--palette-accent)}
a:hover,.nature-trigger:hover{color:var(--palette-accent)}
.thought:nth-child(3n+1){background:#e0e0e0}
.thought:nth-child(3n+2){background:#e7e7e7}
.thought:nth-child(3n){background:#dfdfdf}
.music-art{background:#e0e0e0;color:#873b45}
#independent-builds .latest-build{background:#e3e3e3;border-color:#d6d6d6;box-shadow:0 6px 24px rgba(55,30,30,.04)}
#independent-builds .latest-build h3{color:var(--palette-accent)}
#independent-builds .latest-thumb{border-color:#d6d6d6}
.site-footer a:hover,.site-footer button:hover{color:#ffffff;opacity:.8}
.footer-play{border-color:currentColor}


.eyebrow,.pictory-section__label,.blog-title,.essay-header h1,.project-theme .case-study h1,.story-copy h1 { color:var(--palette-accent); }
.filter-mode { background:var(--surface); }
.filter-mode button[aria-pressed="true"] { background:var(--paper); }
.filters button[aria-pressed="true"] { background:#e0e0e0; color:var(--ink); }
.logo-badge,.fallback,.thought-preview-title { color:var(--ink); }
.thought-scroll p { color:var(--quiet); }
.card-arrow { background:#573038e6; color:#ffffff; border-color:#d6d6d6; }
.preview-title-frame .preview-crossfade { background:var(--surface); }

/* Compact footer music controls */

.mini-player{display:inline-flex;align-items:center;gap:2px;padding:3px 4px;margin-left:5px;border:1px solid #acacac;border-radius:8px;background:linear-gradient(#dfdfdf,#bdbdbd);box-shadow:inset 0 1px #fff9,0 1px 3px #0002;height:30px;vertical-align:middle}
.mini-player .footer-play,.mini-player .player-stop{display:inline-flex;align-items:center;justify-content:center;position:static;width:23px;height:22px;margin:0;padding:4px;border:1px solid transparent;border-radius:4px;background:transparent;color:#573038;cursor:pointer}
.mini-player button:hover{background:#ffffff!important;color:#573038!important;opacity:1!important;border-color:#aaaaaa}
.mini-player button:focus-visible{outline:2px solid #ffffff;outline-offset:3px}
.mini-player svg{display:block;width:12px;height:12px;fill:currentColor}
.mini-player .player-display{display:flex;align-items:center;gap:2px;height:17px;padding:3px 5px;background:#49383b;border:1px solid #34272b;border-radius:3px;margin-right:3px}
.player-display i{display:block;width:2px;height:3px;background:#bcbcbc}
.mini-player.is-playing .player-display i{animation:meter .8s ease-in-out infinite alternate}
.mini-player.is-playing .player-display i:nth-child(2){animation-delay:-.3s}.mini-player.is-playing .player-display i:nth-child(3){animation-delay:-.6s}.mini-player.is-playing .player-display i:nth-child(4){animation-delay:-.2s}
@keyframes meter{to{height:10px}}
@media(prefers-reduced-motion:reduce){.mini-player.is-playing .player-display i{animation:none;height:7px}}

.music-track-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid var(--rule)}.music-track-row h3{margin:0;overflow-wrap:anywhere;min-width:0}.music-track-row button{flex-shrink:0;border:1px solid var(--rule);border-radius:20px;background:var(--surface);color:var(--ink);padding:10px 16px;cursor:pointer;font:12px var(--mono)}

/* Three font roles: editorial headings, readable prose, compact navigation. */
h2 { font-family:var(--serif); }
.section-head h2,.closing h2 { font-size:24px;line-height:1.3;letter-spacing:-.02em;text-transform:none; }
.closing h2 { color:var(--palette-accent); }
.context { font-size:15px;line-height:1.8; }
.work p,.closing p,.note p { font-family:var(--body-font);font-size:15px;line-height:1.8; }
.kicker,.eyebrow,.label,.highlight-label,.edition,.text-link,.thought .date,figcaption,
.filter-mode,.filters,.skill-label,.role,.count { font-family:var(--mono); }
.note .highlight-label { font-size:10px; }

/* Monospace section headings on Playground and My Story. */
.playground-theme main h2,.playground-theme main h3,
.about-theme main h2,.about-theme main h3 { font-family:var(--mono); }

/* Folded paper corners for the homepage writing cards. */
.thoughts .thought {
  --fold-size:clamp(24px,3vw,40px);
  position:relative;
  padding-right:calc(var(--space-5) + var(--fold-size));
}
.thoughts .thought::after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:var(--fold-size);
  height:var(--fold-size);
  background:linear-gradient(45deg,#bcbcbc 0%,#d0d0d0 49.5%,var(--paper) 50%);
  pointer-events:none;
}
.thoughts .thought:nth-child(3n+2)::after {
  background:linear-gradient(45deg,#c6c6c6 0%,#d8d8d8 49.5%,var(--paper) 50%);
}
.thoughts .thought:nth-child(3n)::after {
  background:linear-gradient(45deg,#bfbfbf 0%,#cfcfcf 49.5%,var(--paper) 50%);
}

/* Highlights use the editorial heading and prose font roles. */
.about-theme main .story-highlights h2 { font-family:var(--mono); }

/* Main page headings share the Line of Thought accent. */
.about-theme main > .story-heading,
.playground-theme main > .story-heading,
.works-theme main h1 { color: var(--palette-accent); }

/* Progressive mobile navigation; links remain visible without JavaScript. */
.mobile-menu-toggle{display:none}
@media(max-width:767px){
 .mobile-menu-header{position:relative;align-items:center;z-index:40}
 .mobile-menu-header .edition{display:none}
 .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;margin-left:auto;padding:10px 12px;border:1px solid var(--rule);border-radius:6px;background:var(--paper);color:var(--palette-accent);font:11px/1.5 var(--mono);cursor:pointer}
 .mobile-menu-icon{position:relative;width:18px;height:12px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
 .mobile-menu-icon:after{content:"";position:absolute;top:4px;left:0;width:18px;border-top:1.5px solid currentColor}
 .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon{height:0;border-bottom:0;transform:rotate(45deg)}
 .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon:after{top:-1.5px;transform:rotate(90deg)}
 header .mobile-menu-panel{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;margin:10px 0 0;padding:12px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;box-shadow:0 12px 28px #39252a14;text-align:left}
 header .mobile-menu-panel[hidden]{display:none!important}
 header .mobile-menu-panel a{display:flex;align-items:center;width:100%;min-height:44px;padding:10px 12px;box-sizing:border-box;font:12px/1.7 var(--mono)}
 .mobile-menu-toggle:focus-visible,header .mobile-menu-panel a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
}

/* Site-wide typography and palette: Mona Sans / Sora / Iowan testimonials. */
:root {
 --heading-font:'Mona Sans',Arial,sans-serif;
 --body-font:'Sora',Arial,sans-serif;
 --paper:#ffffff; --ink:#24262b; --quiet:#585d66;
 --rule:#dce0e6; --surface:#f3f4f6; --surface-media:#e8f5f5;
 --blue:#087f8c; --palette-accent:#873b45; --lavender:#573038;
 --footer-ink:#ffffff; --focus:#087f8c;
 --skill-ux:8,127,140; --skill-hmi:135,59,69;
 --skill-research:8,127,140; --skill-code:135,59,69;
 --skill-brand:8,127,140; --skill-rgb:8,127,140;
}
body {font-family:var(--body-font)}
body h1,body h2,body h3,body h4,body h5,body h6,
body main .h2,body main .h4,body .belief,body .play-heading,
body .thought-preview-title,body .system-display,body .system-heading,
body #independent-builds .latest-build h3,body.about-theme main .lenses h3 {
 font-family:var(--heading-font)!important;
 font-weight:500!important; letter-spacing:-.025em!important; overflow-wrap:anywhere;
}
body main p:not(.kicker):not(.eyebrow):not(.label):not(.latest-label):not(.highlight-label):not(.thought-preview-label),
body main li,.story-lead,.story-end {font-family:var(--body-font)}
body .colleague-quote blockquote p {
 font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif!important;
 font-style:italic; font-weight:400;
}
.thought:nth-child(3n+1){background:#e8f5f5}
.thought:nth-child(3n+2){background:#e8f5f5}
.thought:nth-child(3n){background:#e8f5f5}
.thoughts .thought::after,.thoughts .thought:nth-child(3n+2)::after,.thoughts .thought:nth-child(3n)::after {
 background:linear-gradient(45deg,#83b9bf 0%,#c5e5e7 49.5%,#fff 50%);
}
.music-art{background:#e8f5f5;color:var(--palette-accent)}
.filters button[aria-pressed="true"]{background:#e8f5f5;border-color:var(--blue);color:var(--ink)}
.text-link,.prose a{border-bottom-color:var(--blue)}
.text-link:hover,.prose a:hover{color:#087f8c}
::selection{background:#087f8c;color:#ffffff}
.mini-player{background:linear-gradient(#fff,#dce0e6);border-color:#afb7c4}
.player-display i{background:var(--blue)}
.mini-player button:hover{border-color:var(--blue)}
.book-list-screens{background:#e8f5f5}

/* Blue interactive controls. */
@media(hover:hover){
 body button:not(:disabled):not([aria-disabled="true"]):not(.nature-trigger):hover,
 body .mini-player button:hover{
  background:#087f8c!important;border-color:#087f8c!important;color:#fff!important;opacity:1;
 }
 body .nature-trigger:hover{color:#087f8c}
}

/* Consistent blue link hover across portfolio and blog. */
@media(hover:hover){
 body a:hover{color:var(--blue,#087f8c)!important}
 body a:hover :is(h1,h2,h3,h4,h5,h6,.arrow){color:var(--blue,#087f8c)!important}
}

/* Maroon and teal card palette. */
:root{--teal:#087f8c;--surface:#e8f5f5;--surface-media:#e8f5f5}
.thought:nth-child(3n+1),.thought:nth-child(3n+2),.thought:nth-child(3n){background:#e8f5f5}
body #testimonials,body #independent-builds .latest-build,body.about-theme .lenses{background:#087f8c;border-color:#087f8c}
body #independent-builds .latest-build .latest-label,body.about-theme .lenses p{color:#e8f5f5}
body #testimonials{--quiet:#e8f5f5}

/* Light controls remain visible on dark teal surfaces. */
body :is(#testimonials,#independent-builds .latest-build,.lenses){--blue:#c5f4ef;--focus:#c5f4ef}
body :is(#testimonials,#independent-builds .latest-build,.lenses) a{color:#c5f4ef!important;text-decoration-color:currentColor}
body :is(#testimonials,#independent-builds .latest-build,.lenses) button{color:#c5f4ef;border-color:#c5f4ef}
body :is(#testimonials,#independent-builds .latest-build,.lenses) :is(a,button):focus-visible{outline:2px solid #c5f4ef;outline-offset:4px}
@media(hover:hover){
 body :is(#testimonials,#independent-builds .latest-build,.lenses) a:hover{color:#e8fffc!important;text-decoration:underline;text-underline-offset:4px}
 body :is(#testimonials,#independent-builds .latest-build,.lenses) button:not(:disabled):not([aria-disabled="true"]):hover{background:#c5f4ef!important;border-color:#c5f4ef!important;color:#16464c!important}
}

/* Section labels use monospace; page and card titles retain Mona Sans. */
body .section-head h2,body .closing h2,
body.about-theme main h2,body.about-theme .story-highlights h3,
body.playground-theme .gallery-section h2,
body.blog-theme .prose h2 {
 font-family:var(--mono)!important;font-weight:400!important;
 letter-spacing:0!important;
}