/* 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: #faf9f6;
  --ink: #292b26;
  --quiet: #6b7164;
  --rule: #dedfd5;
  --surface: #f4f4ee;
  --surface-media: #eaece4;
  --lavender: #e8e3f3;
  --footer-ink: #56545d;
  --focus: #667553;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --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-halo: 10;
  --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: var(--text-body)/1.8 var(--mono); }
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: #ebe9e2; 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: #efefe8; 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 #292b2610; }
.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. */
.pointer-halo { position: fixed; top: 0; left: 0; width: 480px; height: 480px; z-index: var(--z-halo); pointer-events: none; opacity: 0; mix-blend-mode: multiply; transition: opacity 400ms; will-change: transform; }
.pointer-halo.visible { opacity: .28; }
.pointer-halo::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#c4a5ec,#9adad3,#ead1a7,#e8adce,#c4a5ec); filter: blur(48px); animation: halo-orbit 14s linear infinite; }
@keyframes halo-orbit { to { transform: rotate(360deg); } }
.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, body.nature-active .pointer-halo { 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, body.thought-active .pointer-halo { 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 (hover: none), (pointer: coarse) { .pointer-halo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pointer-halo { display: none; }
  .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; border-top:1px solid var(--rule); padding-top:40px; }
.story-highlight-grid { display:grid; gap:40px; margin-top:32px; }
.story-highlight-grid h3 { margin-bottom:20px; }
.story-highlight-grid ul { margin:0; padding-left:18px; }
.story-highlight-grid li { margin-bottom:16px; font:12px/1.9 var(--mono); overflow-wrap:anywhere; }
.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 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; } }
@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,#faf9f6); color: var(--ink); font: inherit; box-shadow: 0 4px 20px #292b2610; }
.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,#faf9f6); 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 #292b2609; }
 #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:#292b2680; 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); }
}