:root {
  --ink: #211b16;
  --paper: #eee6d7;
  --paper-light: #f8f2e8;
  --umber: #4f3327;
  --wine: #632d35;
  --sage: #68705a;
  --line: rgba(39, 29, 21, .28);
  --display: Georgia, 'Times New Roman', serif;
  --sans: 'Trebuchet MS', 'Avenir Next', Arial, sans-serif;
  --hand: 'Segoe Print', 'Bradley Hand', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }
body { margin: 0; color: var(--ink); background: #241912; font-family: var(--sans); overflow-x: clip; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-150%); padding: 12px 18px; background: var(--paper-light); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid #f0c46b; outline-offset: 4px; }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px clamp(18px, 3vw, 50px); color: #fff9ed; background: linear-gradient(to bottom, rgba(20,13,9,.84), transparent); pointer-events: none; }
.site-header a { pointer-events: auto; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 11px; min-height: 48px; }
.brand span { display: grid; gap: 2px; }
.brand b { font-family: var(--display); font-size: 16px; font-weight: 500; }
.brand small { font-size: 9px; text-transform: uppercase; letter-spacing: .13em; opacity: .7; }
.site-header nav { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 38px); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
.site-header nav a { display: grid; place-items: center; min-height: 44px; }
.contact-link { border: 1px solid rgba(255,255,255,.45); padding: 0 18px; border-radius: 50%; }

.intro { position: relative; min-height: 100svh; display: grid; place-items: center start; overflow: hidden; isolation: isolate; padding: 130px clamp(24px, 8vw, 140px) 90px; color: #f8f0e2; background: linear-gradient(90deg, rgba(28,16,10,.94) 0%, rgba(28,16,10,.67) 45%, rgba(28,16,10,.16) 80%), url('/concept-assets/living-worktable.webp') center / cover no-repeat; }
.intro:after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to top, #251811, transparent 32%); }
.intro-copy { max-width: 690px; }
.eyebrow { margin: 0 0 20px; font-size: 10px; text-transform: uppercase; letter-spacing: .22em; font-weight: 700; }
h1 { margin: 0; font-family: var(--display); font-size: clamp(68px, 10vw, 150px); line-height: .76; font-weight: 400; letter-spacing: -.055em; }
h1 em { padding-left: .45em; color: #d9c6a8; font-weight: 400; }
.lede { max-width: 530px; margin: 46px 0 28px; font-family: var(--display); font-size: clamp(18px, 2vw, 25px); line-height: 1.45; color: #e6d9c5; }
.enter-link { display: inline-flex; align-items: center; gap: 16px; min-height: 48px; text-decoration: none; font-size: 11px; text-transform: uppercase; letter-spacing: .16em; }
.enter-link i { position: relative; width: 72px; height: 1px; background: currentColor; transition: width .25s ease; }
.enter-link i:after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.enter-link:hover i { width: 90px; }
.intro-note { position: absolute; right: 7vw; bottom: 9vh; width: 230px; padding: 28px 25px 22px; color: var(--ink); background: #e8dcc8; box-shadow: 5px 10px 30px rgba(0,0,0,.35); transform: rotate(2.5deg); font-family: var(--hand); line-height: 1.55; }
.intro-note p { margin: 0; }
.pin { position: absolute; top: 9px; left: 50%; width: 10px; aspect-ratio: 1; border-radius: 50%; background: #632d35; box-shadow: 1px 3px 3px rgba(0,0,0,.35); }


.desktop-experience { position: relative; height: 660vh; background: #1b120d; }
.sticky-view { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: clamp(330px, 29vw, 470px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding-top: 72px; background: #21150f; }
.camera-window { position: relative; inset: auto; grid-column: 2; grid-row: 1 / 3; min-width: 0; height: 100%; overflow: hidden; background: #2f2118; }
.camera-window:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 43%, transparent 40%, rgba(16,8,4,.55) 110%), linear-gradient(to top, rgba(19,11,6,.7), transparent 35%); box-shadow: inset 0 0 100px rgba(12,7,3,.6); }
.table-stage { position: absolute; left: 0; top: 0; width: 2600px; height: 1500px; transform-origin: 0 0; background: url('/concept-assets/living-worktable.webp') center / 100% 100% no-repeat; will-change: transform; }
.ambient-light { position: absolute; inset: 0; background: linear-gradient(112deg, rgba(255,234,184,.14), transparent 25%, transparent 72%, rgba(46,20,9,.25)); mix-blend-mode: screen; pointer-events: none; }
.process-drawing { position: absolute; z-index: 7; inset: 0; overflow: visible; pointer-events: none; }
.process-drawing path { fill: none; stroke: rgba(50,40,31,.68); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 8; }

.process-drawing .seam-line { stroke-dasharray: 13 9; }
.process-drawing .measure-line { stroke-dasharray: none; stroke-width: 2; }
.process-drawing .arrow-line { stroke-dasharray: none; }
.process-drawing .notches path { stroke-width: 4; stroke-dasharray: none; }
.scribble { position: absolute; z-index: 8; font: 24px var(--hand); color: rgba(46,35,28,.76); transform: rotate(-5deg); pointer-events: none; }
.s1 { left: 260px; top: 950px; }.s2 { left: 945px; top: 540px; }.s3 { left: 1900px; top: 265px; }.s4 { left: 2100px; top: 1010px; }

.station { position: absolute; z-index: 5; filter: drop-shadow(10px 18px 18px rgba(24,12,5,.38)); transition: filter .45s ease, opacity .45s ease; }
.station:not(.is-active) { opacity: .82; filter: sepia(.13) drop-shadow(7px 13px 14px rgba(24,12,5,.28)); }
.station:not(.is-active) .paper-label { opacity: 0; }
.paper-label { transition: opacity .3s ease; }
.station a { display: block; width: 100%; height: 100%; overflow: hidden; background: #eee5d6; padding: 10px; }
.station img { width: 100%; height: 100%; object-fit: cover; }
.station-faith { left: 215px; top: 466px; width: 470px; height: 285px; transform: perspective(900px) rotateX(2deg) rotateZ(-1.8deg) skewX(-2deg); }
.station-breezy { left: 1035px; top: 515px; width: 475px; height: 285px; transform: perspective(900px) rotateX(3deg) rotateZ(1.6deg) skewX(1.5deg); }
.station-passion { left: 1830px; top: 470px; width: 420px; height: 280px; transform: perspective(800px) rotateX(4deg) rotateZ(2deg) skewX(2deg); }
.station-fantasy { left: 1040px; top: 975px; width: 465px; height: 380px; transform: perspective(850px) rotateX(2deg) rotateZ(-1deg); }
.station-fantasy img { object-position: center 35%; }
.station-candy { left: 1860px; top: 985px; width: 470px; height: 320px; transform: perspective(800px) rotateX(3deg) rotateZ(1deg) skewX(1deg); }
.station-dangerous { left: 1055px; top: 165px; width: 570px; height: 290px; transform: perspective(900px) rotateX(3deg) rotateZ(1.2deg) skewX(1deg); }
.tape { position: absolute; z-index: 8; width: 78px; height: 24px; background: rgba(221,205,166,.72); box-shadow: inset 0 0 1px rgba(80,55,35,.4), 1px 2px 3px rgba(45,25,10,.2); }
.tape-a { left: -25px; top: 12px; transform: rotate(-38deg); }.tape-b { right: -22px; bottom: 11px; transform: rotate(-42deg); }
.paper-label { position: absolute; z-index: 9; min-width: 220px; padding: 13px 17px 12px; background: rgba(242,235,221,.92); box-shadow: 3px 6px 12px rgba(25,12,5,.22); transform: rotate(-2deg); }
.paper-label span, .paper-label small { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.paper-label b { display: block; margin: 3px 0; font: 30px/1 var(--display); }
.paper-label small { letter-spacing: .05em; text-transform: none; }
.station-faith .paper-label { left: 25px; bottom: -62px; }.station-breezy .paper-label { right: -65px; top: -42px; }.station-passion .paper-label { left: -50px; bottom: -60px; }.station-fantasy .paper-label { right: -85px; top: 20px; }.station-candy .paper-label { left: -35px; top: -55px; }.station-dangerous .paper-label { right: -75px; bottom: -50px; }
.foreground-object { position: absolute; z-index: 10; pointer-events: none; will-change: transform; filter: drop-shadow(14px 25px 20px rgba(15,7,3,.55)); }
.fg-scissors { width: 420px; left: 570px; top: 1050px; transform: rotate(-9deg); mix-blend-mode: multiply; }
.fg-muslin { width: 360px; right: 30px; top: 690px; transform: rotate(7deg); mix-blend-mode: multiply; opacity: .9; }

.station-readout { position: relative; z-index: 20; grid-column: 1; grid-row: 1; left: auto; top: auto; bottom: auto; width: 100%; max-height: none; overflow: auto; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4vw, 62px); color: var(--ink); background: #f1e7d5; border-right: 1px solid rgba(73,51,38,.25); box-shadow: none; transform: none; }
.station-readout:before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(73,51,38,.16); pointer-events: none; }
.readout-count { margin: 0 0 7px; font-size: 9px; letter-spacing: .17em; }
.station-readout h2 { margin: 0; font: clamp(34px, 4vw, 54px)/.96 var(--display); overflow-wrap: anywhere; }
.readout-deck { margin: 10px 0 12px; font: 14px/1.45 var(--display); }
.project-link { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; text-decoration: none; border-bottom: 1px solid; }
.project-link span { font-size: 20px; }
.camera-map { position: relative; z-index: 25; grid-column: 1; grid-row: 2; right: auto; bottom: auto; width: 100%; padding: 15px 22px 17px; color: #fff7e9; background: #21150f; border: 0; border-top: 1px solid rgba(255,247,233,.28); border-right: 1px solid rgba(255,247,233,.18); box-shadow: none; }
.camera-map p { display: flex; justify-content: space-between; margin: 0 0 9px; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
.camera-map ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; margin: 0; padding: 0; list-style: none; }
.camera-map a { position: relative; display: block; min-height: 44px; text-decoration: none; }
.camera-map a:before { content: ''; position: absolute; left: 5px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #f3e8d6; transform: translateY(-50%); transition: transform .25s, background .25s; }
.camera-map a span { position: relative; display: block; padding: 15px 4px 8px 23px; font-size: 8px; white-space: normal; opacity: .72; transition: opacity .2s; }
.camera-map a:hover span, .camera-map a:focus-visible span, .camera-map a.is-active span { opacity: 1; }
.camera-map a.is-active:before { background: #d99578; transform: translateY(-50%) scale(1.6); }
.map-track { display: none; }
.map-track i { display: block; width: 0; height: 2px; background: #f1d3b8; }
.scroll-steps { position: absolute; z-index: 30; inset: 0; pointer-events: none; }
.scroll-step { height: 110vh; scroll-snap-align: center; display: grid; place-items: end center; padding-bottom: 4vh; }
.scroll-step a { display: none; pointer-events: auto; }

.mobile-work { display: none; }
.about { min-height: 92svh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(270px, .6fr); gap: clamp(45px, 9vw, 150px); align-items: center; padding: clamp(90px, 12vw, 180px) clamp(24px, 10vw, 170px); background: #ddd0ba url('/concept-assets/living-worktable.webp') center / cover fixed; position: relative; isolation: isolate; }
.about:before { content: ''; position: absolute; z-index: -1; inset: 0; background: rgba(235,224,204,.84); }
.about-note { max-width: 700px; }
.about h2 { margin: 0 0 30px; font: clamp(70px, 9vw, 140px)/.78 var(--display); letter-spacing: -.055em; }
.about-note > p:not(.eyebrow) { max-width: 620px; font: clamp(19px, 2vw, 27px)/1.5 var(--display); }
.about-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 34px; }
.about-links a, .skills-paper a { display: inline-grid; place-items: center; min-height: 44px; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; text-underline-offset: 6px; }
.skills-paper { position: relative; padding: 48px 42px 34px; background: #f4eddf; box-shadow: 15px 25px 55px rgba(61,38,22,.23); transform: rotate(2deg); }
.skills-paper > p { font: 31px var(--hand); margin: 0 0 18px; }
.skills-paper ul { padding: 0; list-style: none; font: 16px/2 var(--display); }
.skills-paper li { border-bottom: 1px dotted rgba(55,40,29,.35); }
footer { min-height: 280px; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 20px 50px; padding: 70px clamp(24px, 7vw, 110px) 55px; color: #eee4d5; background: #21150f; }
footer img { filter: none; }
footer p { margin: 0; font-size: 11px; letter-spacing: .08em; }
footer .disclosure { grid-column: 1 / -1; max-width: 760px; color: #bcae9d; line-height: 1.55; letter-spacing: 0; }

@media (max-width: 860px) {
  html { scroll-snap-type: none; }
  .site-header { background: linear-gradient(to bottom, rgba(27,17,11,.94), rgba(27,17,11,.1)); }
  .brand span { display: none; }
  .site-header nav a:first-child { display: none; }
  .intro { min-height: 92svh; padding: 120px 22px 70px; align-items: end; background-image: linear-gradient(to top, rgba(26,16,10,.95), rgba(26,16,10,.25) 80%), url('/concept-assets/mobile/living-worktable.webp'); }
  h1 { font-size: clamp(58px, 20vw, 96px); }
  h1 em { padding-left: .12em; }
  .lede { margin-top: 30px; font-size: 18px; }
  .intro-note { display: none; }
  .desktop-experience { display: none; }
  .mobile-work { display: block; padding: 86px 0 40px; background: #d7c5aa; }
  .mobile-work > header { padding: 0 22px 40px; }
  .mobile-work h2 { max-width: 500px; margin: 0; font: clamp(45px, 14vw, 76px)/.9 var(--display); letter-spacing: -.04em; }
  .mobile-station { position: relative; min-height: 680px; display: grid; align-content: center; gap: 20px; padding: 70px 24px; overflow: hidden; background-image: linear-gradient(rgba(31,18,10,.13), rgba(31,18,10,.13)), url('/concept-assets/mobile/living-worktable.webp'); background-size: auto 135%; border-top: 1px solid rgba(40,25,15,.25); }
  .m-faith { background-position: 15% 50%; }.m-breezy { background-position: 45% 50%; }.m-passion { background-position: 82% 45%; }.m-fantasy { background-position: 24% 75%; }.m-candy { background-position: 76% 80%; }.m-dangerous { background-position: 50% 12%; }
  .mobile-paper { position: relative; width: min(88vw, 510px); padding: 10px; background: #eee6d8; box-shadow: 10px 18px 32px rgba(31,17,9,.42); transform: rotate(-1.5deg); }
  .mobile-station:nth-of-type(even) .mobile-paper { margin-left: auto; transform: rotate(1.3deg); }
  .mobile-paper picture, .mobile-paper img { width: 100%; }
  .mobile-paper img { aspect-ratio: 1.52; object-fit: cover; }
  .mobile-paper.portrait { width: min(70vw, 390px); }
  .mobile-paper.portrait img { aspect-ratio: .9; object-position: center 30%; }
  .mobile-copy { position: relative; width: min(88vw, 500px); margin-left: 3vw; padding: 22px 24px; background: rgba(245,237,222,.94); box-shadow: 5px 10px 20px rgba(29,16,8,.24); transform: rotate(.5deg); }
  .mobile-copy > span { font-size: 9px; text-transform: uppercase; letter-spacing: .16em; }
  .mobile-copy h3 { margin: 4px 0 10px; font: 40px/1 var(--display); }
  .mobile-copy p { margin: 0 0 14px; font: 16px/1.45 var(--display); }
  .mobile-copy a { display: inline-grid; place-items: center; min-height: 44px; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; text-underline-offset: 5px; }
  .about { min-height: auto; grid-template-columns: 1fr; background-attachment: scroll; padding: 95px 24px; }
  .about h2 { font-size: clamp(68px, 21vw, 100px); }
  .about-note > p:not(.eyebrow) { font-size: 19px; }
  .skills-paper { width: min(92%, 420px); justify-self: end; padding: 44px 30px 30px; }
  footer { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 420px) {
  .site-header { padding-inline: 14px; }
  .site-header nav { gap: 8px; }
  .contact-link { padding-inline: 12px; }
  .mobile-station { min-height: 620px; padding-inline: 16px; }
  .mobile-copy { margin-left: 0; width: 96%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .table-stage, .foreground-object { will-change: auto; }
}