:root {
  --ink: #241d18;
  --muted: #695d51;
  --paper: #f2eadc;
  --paper-bright: #fbf6ec;
  --table: #2b1c13;
  --accent: #71808c;
  --accent-soft: #cad6dc;
  --thread: #806d5f;
  --display: Georgia, 'Times New Roman', serif;
  --sans: 'Trebuchet MS', 'Avenir Next', Arial, sans-serif;
  --hand: 'Segoe Print', 'Bradley Hand', cursive;
  --pointer-x: 0px;
  --pointer-y: 0px;
  --scroll-shift: 0px;
}

* { box-sizing: border-box; }
html { background: var(--table); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #2a1b12; font-family: var(--sans); overflow-x: clip; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { color: inherit; font: inherit; }
.skip-link { position: fixed; z-index: 1000; left: 12px; top: 10px; min-height: 44px; padding: 12px 18px; background: var(--paper-bright); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid #f3c56f; outline-offset: 4px; }

.project-loader { display: none; }
.js .project-loader { position: fixed; z-index: 900; inset: 0; display: grid; place-items: center; padding: 24px; color: #f7eedf; background: #25170f url('/concept-assets/living-worktable.webp') center / cover no-repeat; opacity: 1; visibility: visible; transition: opacity .28s ease, visibility .28s step-end; }
.js .project-loader:before { content: ''; position: absolute; inset: 0; background: rgba(28,17,10,.78); }
.loader-card { position: relative; width: min(420px, 88vw); padding: 42px 38px 36px; color: var(--ink); background: var(--paper); box-shadow: 14px 23px 50px rgba(0,0,0,.42); transform: rotate(-1deg); }
.loader-card:after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 15px; border-bottom: 1px dashed rgba(54,42,32,.4); }
.loader-kicker { margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.loader-card strong { display: block; font: 34px/1.04 var(--display); }
.loader-copy { margin: 13px 0 22px; font: 15px/1.5 var(--display); color: var(--muted); }
.loader-stitch { position: relative; height: 12px; overflow: hidden; border-top: 1px solid rgba(48,38,30,.25); border-bottom: 1px solid rgba(48,38,30,.25); }
.loader-stitch i { position: absolute; inset: 4px auto 4px 0; width: 42%; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 15px); animation: stitch 620ms linear infinite; }
.loader-exit .project-loader { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes stitch { to { transform: translateX(140%); } }

.site-header { position: absolute; z-index: 80; inset: 0 0 auto; min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px clamp(18px, 4vw, 64px); color: #fff8ec; background: linear-gradient(to bottom, rgba(25,14,8,.9), transparent); }
.brand { display: flex; align-items: center; gap: 11px; min-height: 48px; text-decoration: none; }
.brand img { width: 42px; height: 42px; }
.brand span { display: grid; gap: 1px; }
.brand b { font: 16px var(--display); }
.brand small { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.site-header nav { display: flex; align-items: center; gap: clamp(8px, 2vw, 26px); }
.site-header nav a { display: grid; place-items: center; min-height: 44px; padding: 0 6px; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; text-decoration-thickness: 1px; text-underline-offset: 6px; }

.worktable-hero { position: relative; min-height: 100svh; display: grid; align-items: end; isolation: isolate; overflow: hidden; padding: 132px clamp(18px, 5vw, 76px) clamp(58px, 7vw, 100px); background: #39251a url('/concept-assets/living-worktable.webp') center / cover no-repeat; perspective: 1100px; }
.worktable-hero:before { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(102deg, rgba(24,14,8,.82) 0%, rgba(24,14,8,.35) 54%, rgba(24,14,8,.62) 100%), radial-gradient(circle at 54% 38%, transparent 0 34%, rgba(17,9,5,.44) 100%); }
.worktable-hero:after { content: ''; position: absolute; z-index: -1; inset: 0; box-shadow: inset 0 0 120px rgba(10,5,2,.6); pointer-events: none; }
.depth-layer { will-change: transform; transform: translate3d(var(--depth-x, 0px), var(--depth-y, 0px), var(--depth-z, 0px)) rotateX(var(--depth-rx, 0deg)) rotateY(var(--depth-ry, 0deg)); transition: transform .12s ease-out; }
.hero-paper { position: relative; z-index: 5; width: min(790px, 76vw); margin-left: clamp(0px, 5vw, 82px); padding: clamp(34px, 6vw, 82px) clamp(28px, 6vw, 78px) clamp(34px, 5vw, 62px); background: linear-gradient(100deg, rgba(255,255,255,.18), transparent 28%), var(--paper); box-shadow: 18px 30px 65px rgba(16,8,4,.48); transform-origin: center; }
.hero-paper:before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(58,43,32,.14); pointer-events: none; }
.tape { position: absolute; z-index: 6; width: 98px; height: 28px; background: rgba(218,202,164,.78); box-shadow: inset 0 0 1px rgba(64,45,30,.35), 2px 4px 6px rgba(25,12,6,.2); }
.hero-paper .tape:first-child { left: -30px; top: 18px; transform: rotate(-38deg); }
.hero-paper .tape:nth-child(2) { right: -25px; bottom: 24px; transform: rotate(-42deg); }
.project-count, .eyebrow { margin: 0 0 16px; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
h1 { max-width: 730px; margin: 0; font: clamp(52px, 7.7vw, 118px)/.82 var(--display); letter-spacing: -.055em; text-wrap: balance; }
.deck { max-width: 650px; margin: 30px 0 0; font: clamp(17px, 1.7vw, 23px)/1.48 var(--display); color: #40362e; }
.hero-note { position: absolute; z-index: 7; right: clamp(22px, 6vw, 100px); top: 19%; width: min(250px, 25vw); padding: 28px 24px 23px; background: #e7dcc8; box-shadow: 9px 16px 30px rgba(20,10,5,.35); transform: rotate(3deg); font: 15px/1.5 var(--hand); }
.hero-note:before { content: ''; position: absolute; top: 10px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 1px 2px 3px rgba(0,0,0,.35); }
.hero-note p { margin: 0; }
.hero-tool, .hero-muslin { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(14px 22px 18px rgba(14,7,3,.5)); mix-blend-mode: multiply; }
.hero-tool { right: -35px; bottom: -48px; width: min(430px, 34vw); transform: rotate(var(--tool-rotate, -9deg)); }
.hero-muslin { left: -50px; top: 10%; width: min(340px, 28vw); opacity: .82; transform: rotate(var(--muslin-rotate, 8deg)); }
.measurement { position: absolute; z-index: 4; color: rgba(42,33,26,.66); font: 17px var(--hand); pointer-events: none; }
.measurement:before { content: ''; display: block; width: 160px; border-top: 1px solid currentColor; box-shadow: -1px -5px 0 -4px currentColor, 1px -5px 0 -4px currentColor; }
.measurement.one { right: 29%; top: 11%; transform: rotate(-5deg); }
.measurement.two { right: 5%; bottom: 34%; transform: rotate(82deg); }
.seam-mark { position: absolute; z-index: 4; width: 190px; height: 100px; border-top: 2px dashed rgba(43,33,26,.5); border-radius: 50%; pointer-events: none; }
.seam-a { left: 4%; bottom: 16%; transform: rotate(18deg); }

.project-body { position: relative; padding: clamp(74px, 10vw, 150px) clamp(18px, 6vw, 92px); background: linear-gradient(rgba(232,218,194,.9), rgba(232,218,194,.9)), url('/assets/workshop-real/pattern-paper.webp') center / 720px auto; }
.project-body:before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 35px, rgba(62,49,38,.035) 35px 36px); }
.info-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(230px, .68fr) minmax(0, 1.5fr); gap: clamp(42px, 8vw, 130px); align-items: start; max-width: 1320px; margin: 0 auto clamp(80px, 11vw, 160px); }
.spec-sheet, .story-sheet { position: relative; background: rgba(250,245,235,.96); box-shadow: 9px 17px 32px rgba(59,39,25,.17); }
.spec-sheet { padding: 42px 34px 36px; transform: rotate(-1.2deg); }
.story-sheet { padding: clamp(38px, 5vw, 68px); transform: rotate(.6deg); }
.spec-sheet:after, .story-sheet:after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(57,44,34,.12); pointer-events: none; }
.spec-sheet h2, .story-sheet h2, .gallery-head h2 { margin: 0; font: clamp(36px, 5vw, 68px)/.95 var(--display); letter-spacing: -.035em; }
.spec-sheet dl { margin: 26px 0 0; }
.spec-sheet dt { margin-top: 20px; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.spec-sheet dd { margin: 6px 0 0; font: 17px/1.45 var(--display); }
.material-list { margin: 10px 0 0; padding: 0; list-style: none; }
.material-list li { padding: 7px 0; border-bottom: 1px dotted rgba(52,41,33,.32); font: 15px/1.35 var(--display); }
.story-sheet p { position: relative; z-index: 1; margin: 23px 0 0; font: clamp(19px, 2.1vw, 29px)/1.54 var(--display); color: #40362e; }
.pencil-note { position: absolute; z-index: 3; right: -22px; bottom: -46px; width: 180px; padding: 18px; background: var(--accent-soft); box-shadow: 4px 8px 16px rgba(45,29,18,.18); transform: rotate(-4deg); font: 14px/1.45 var(--hand); }

.gallery-section { position: relative; z-index: 2; max-width: 1420px; margin: 0 auto; }
.gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 0 0 46px; }
.gallery-head p { max-width: 370px; margin: 0; font: 15px/1.5 var(--display); color: var(--muted); }
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 4vw, 58px); align-items: start; }
.gallery-card { grid-column: span 6; margin: 0; }
.gallery-card:nth-child(3n) { grid-column: 3 / span 8; }
.gallery-card:nth-child(odd) { transform: rotate(-.45deg); }
.gallery-card:nth-child(even) { transform: rotate(.55deg); margin-top: clamp(20px, 6vw, 90px); }
.gallery-button { position: relative; display: block; width: 100%; min-height: 44px; padding: 11px; border: 0; background: var(--paper-bright); box-shadow: 12px 20px 34px rgba(53,33,20,.24); cursor: zoom-in; text-align: left; }
.gallery-button:before, .gallery-button:after { content: ''; position: absolute; z-index: 2; top: -9px; width: 76px; height: 23px; background: rgba(219,202,163,.78); box-shadow: 1px 2px 4px rgba(32,18,9,.15); }
.gallery-button:before { left: 9%; transform: rotate(-8deg); }
.gallery-button:after { right: 8%; transform: rotate(7deg); }
.gallery-button picture, .gallery-button img { width: 100%; }
.gallery-button img { aspect-ratio: 1.38; object-fit: contain; background: #e9e1d4; }
.gallery-card figcaption { margin: 15px 14px 0; font: 15px/1.45 var(--display); color: #463b32; }
.gallery-number { display: block; margin-bottom: 5px; font: 9px var(--sans); letter-spacing: .17em; text-transform: uppercase; color: var(--accent); }

.project-nav { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; max-width: 1320px; margin: clamp(90px, 13vw, 180px) auto 0; }
.project-nav a { display: flex; min-height: 70px; align-items: center; padding: 17px 20px; background: rgba(249,243,232,.88); box-shadow: 5px 9px 18px rgba(50,31,19,.13); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; text-underline-offset: 5px; }
.project-nav .next { justify-content: flex-end; text-align: right; }
.project-nav .all { justify-content: center; min-width: 118px; }

.site-footer { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 18px 46px; min-height: 250px; padding: 68px clamp(22px, 7vw, 108px) 48px; color: #eee4d5; background: #21150f; }
.site-footer img { width: 190px; height: auto; }
.site-footer p { margin: 0; font-size: 11px; letter-spacing: .06em; }
.site-footer .disclosure { grid-column: 1 / -1; max-width: 820px; color: #bcae9d; line-height: 1.55; letter-spacing: 0; }

.lightbox[hidden] { display: none; }
.lightbox { position: fixed; z-index: 950; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; padding: clamp(14px, 3vw, 36px); color: #fff8ed; background: rgba(20,12,7,.96); }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lightbox-count { margin: 0; font-size: 10px; letter-spacing: .17em; text-transform: uppercase; }
.lightbox button { min-width: 44px; min-height: 44px; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff8ed; cursor: pointer; }
.lightbox-close { padding: 0 16px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.lightbox-stage { min-height: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: clamp(8px, 2vw, 24px); }
.lightbox-stage img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.lightbox-prev, .lightbox-next { font-family: var(--sans); font-size: 20px; }
.lightbox-caption { max-width: 850px; margin: 0 auto; min-height: 46px; font: 16px/1.45 var(--display); text-align: center; }
body.lightbox-open { overflow: hidden; }

body.project-faith { --accent: #6f8792; --accent-soft: #cbd9dc; --tool-rotate: -10deg; --muslin-rotate: 7deg; }
body.project-breezy { --accent: #6d7655; --accent-soft: #d3d7b9; --tool-rotate: 11deg; --muslin-rotate: -8deg; }
body.project-passion { --accent: #8c4b4e; --accent-soft: #dfc5bc; --tool-rotate: -3deg; --muslin-rotate: 13deg; }
body.project-fantasy-dress-charles-james-research-response { --accent: #4e6287; --accent-soft: #c2c9dc; --tool-rotate: 14deg; --muslin-rotate: -14deg; }
body.project-candy-land-rei-kawakubo-academic-response { --accent: #8a5960; --accent-soft: #dfc8bb; --tool-rotate: -15deg; --muslin-rotate: 3deg; }
body.project-dangerous { --accent: #536149; --accent-soft: #ccd0b7; --tool-rotate: 7deg; --muslin-rotate: -4deg; }
body.project-breezy .hero-tool, body.project-fantasy-dress-charles-james-research-response .hero-tool, body.project-dangerous .hero-tool { right: auto; left: 1%; bottom: -70px; }
body.project-breezy .hero-muslin, body.project-fantasy-dress-charles-james-research-response .hero-muslin, body.project-dangerous .hero-muslin { left: auto; right: -45px; top: 16%; }

@media (max-width: 820px) {
  html { scroll-behavior: auto; }
  .site-header { min-height: 70px; padding-inline: 14px; }
  .brand span { display: none; }
  .site-header nav { gap: 3px; }
  .site-header nav a { font-size: 9px; padding-inline: 5px; }
  .worktable-hero { min-height: 88svh; padding: 112px 18px 52px; background-image: url('/concept-assets/mobile/living-worktable.webp'); }
  .depth-layer { transform: none; transition: none; will-change: auto; }
  .hero-paper { width: 96%; margin: 0; padding: 40px 27px 38px; transform: rotate(-.7deg); }
  h1 { font-size: clamp(48px, 14vw, 78px); }
  .deck { margin-top: 24px; font-size: 17px; }
  .hero-note, .measurement.two { display: none; }
  .hero-tool { width: 240px; right: -90px; bottom: -35px; opacity: .78; }
  .hero-muslin { width: 180px; left: -75px; top: 6%; }
  body.project-breezy .hero-tool, body.project-fantasy-dress-charles-james-research-response .hero-tool, body.project-dangerous .hero-tool { left: -80px; bottom: -48px; }
  body.project-breezy .hero-muslin, body.project-fantasy-dress-charles-james-research-response .hero-muslin, body.project-dangerous .hero-muslin { right: -80px; top: 8%; }
  .info-grid { grid-template-columns: 1fr; gap: 42px; }
  .spec-sheet { width: min(92%, 470px); }
  .story-sheet { margin-left: 4%; }
  .pencil-note { right: 5px; bottom: -58px; }
  .gallery-head { display: block; }
  .gallery-head p { margin-top: 18px; }
  .gallery { display: block; }
  .gallery-card, .gallery-card:nth-child(3n) { width: 100%; margin: 0 0 56px; transform: none; }
  .gallery-card:nth-child(even) { margin-left: 0; }
  .project-nav { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .project-nav a { width: 100%; min-width: 0; justify-content: flex-start; text-align: left; line-height: 1.4; overflow-wrap: anywhere; }
  .project-nav .all { grid-column: 1; grid-row: auto; order: -1; }
  .project-nav .next { justify-content: flex-start; text-align: left; }
  .site-footer { grid-template-columns: 1fr; align-items: start; }
  .lightbox-stage { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 5px; }
}

@media (max-width: 430px) {
  .site-header nav a:first-child { display: none; }
  .project-body { padding-inline: 14px; }
  .story-sheet { margin-left: 0; }
  .lightbox { padding: 10px; }
  .lightbox-stage { grid-template-columns: 44px minmax(0, 1fr) 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .depth-layer, .hero-paper, .hero-tool, .hero-muslin { transform: none !important; will-change: auto !important; }
  .js .project-loader { display: none; }
  .loader-exit .project-loader { display: none; }
}