/* ---------------------------------------------------------------------------
   Ceyvion — crimson portfolio
   1 type   2 tokens   3 base   4 chrome   5 overview   6 chapter shell
   7 work   8 observations   9 listening   10 about + reach
   11 motion   12 responsive
   --------------------------------------------------------------------------- */

/* 1 ------------------------------------------------------------------ type */
@font-face{font-family:Inter;src:url('/media/inter-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:'Fragment Mono';src:url('/media/type/fragment-mono-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/media/type/instrument-serif-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/media/type/instrument-serif-italic-latin.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}

/* 2 ---------------------------------------------------------------- tokens */
:root{
  color-scheme:dark;
  --red:#871315;--deep:#41070b;--ivory:#efe6d6;--black:#100e0d;--muted:#bfb2a3;
  --ember:#e2765c;                     /* accent; only on black or oxblood */
  --rule:#514540;--rule-light:rgba(239,230,214,.24);
  --sans:Inter,'Helvetica Neue',Arial,sans-serif;
  --mono:'Fragment Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* 3 ------------------------------------------------------------------ base */
*{box-sizing:border-box}
html{background:var(--red);scrollbar-gutter:stable}
body{margin:0;font-family:var(--sans);color:var(--ivory);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%}
svg{display:block;width:30px;height:20px}
h1,h2,h3,p,figure{margin:0}
h2,h3{font-weight:300;letter-spacing:-.055em}
h2:focus,h3:focus{outline:none}
::selection{background:var(--ivory);color:var(--deep)}
:focus-visible{outline:2px solid var(--ivory);outline-offset:7px}
a:active{opacity:.8}
.micro{font:11px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.svg-definitions{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;top:12px;left:20px;z-index:100;background:var(--ivory);color:var(--black);padding:12px 20px;transform:translateY(-180%)}
.skip:focus{transform:none}

/* 4 ---------------------------------------------------------------- chrome */
.sidebar{position:fixed;z-index:50;top:7.5vh;left:3.6vw;width:150px}
.monogram{display:inline-block;font-size:38px;line-height:1;font-weight:800;letter-spacing:-.13em;padding-right:.13em}
.sidebar nav{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:30px}
.sidebar nav a{position:relative;padding:6px 0;font:11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.09em}
.nav-marker{position:absolute;left:0;top:0;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0;pointer-events:none}
.back-link{position:fixed;z-index:50;right:3.6vw;top:4.5vh;align-items:center;gap:17px;font:12px/1.4 var(--mono);letter-spacing:.06em}
.back-link:not([hidden]){display:flex}
.back-link svg{transform:rotate(180deg)}
.external,.text-link{display:inline-flex;align-items:center;gap:20px;padding:10px 0;border-bottom:1px solid currentColor}
.text-link{font-size:16px;letter-spacing:-.02em}
.text-link svg,.external svg{width:26px}
.external{font:10px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase}

/* 5 -------------------------------------------------------------- overview */
.overview{height:100svh;min-height:720px;position:relative;overflow:hidden;isolation:isolate;background-color:var(--red)}
.overview::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/media/paper-grain.webp') repeat;background-size:620px 620px;mix-blend-mode:soft-light;opacity:.48}
.big-c{position:absolute;z-index:-1;width:67vw;height:99%;border:10vw solid var(--deep);border-radius:50%;left:1%;top:-1%;pointer-events:none}
.big-c::after{content:'';position:absolute;right:-11vw;top:3%;width:25vw;height:51%;background:var(--red)}
.sheet{position:absolute;overflow:hidden;border-radius:7px;isolation:isolate;transform:translateZ(0);color:var(--ivory);transition:transform 420ms var(--ease)}
.sheet:focus-visible{outline-offset:4px}
.sheet-work{top:6.5%;left:30%;width:64%;height:44%;background:#bc3326 url('/media/paper-grain.webp');background-size:620px 620px;background-blend-mode:soft-light}
.sheet-observations{top:26%;left:27.4%;width:68.5%;height:42%;background:#dc543e}
.sheet-listening{top:50%;left:29.3%;width:66.4%;height:31%;background:var(--black)}
.sheet-label{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;padding:30px 46px;max-width:62%}
.sheet-title{font-size:clamp(40px,4.5vw,70px);font-weight:250;line-height:1.16;letter-spacing:-.055em}
.sheet-label .micro{margin-bottom:7px;font-size:10px;letter-spacing:.11em}
.sheet-arrow{position:absolute;z-index:3;right:30px;top:48px;opacity:0;transform:translateX(-7px);transition:opacity 180ms,transform 180ms}
/* Each card carries one legible image, treated as a duotone of its own surface. */
.work-collage{position:absolute;inset:0 0 0 30%;overflow:hidden;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%);mask-image:linear-gradient(90deg,transparent,#000 16%)}
.work-collage img{position:absolute;left:-30%;top:-20%;width:170%;height:170%;max-width:none;object-fit:cover;object-position:54% 38%;filter:grayscale(1) contrast(1.15) brightness(1.45)}
.portrait{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 83%;mix-blend-mode:multiply;filter:contrast(1.05) brightness(1.5)}
/* The cover keeps a rectangular crop so it can travel into Listening undistorted. */
.listening-strip{position:absolute;right:0;bottom:0;width:55%;height:60%;object-fit:cover;mix-blend-mode:luminosity;opacity:.55}
.spotify-mark{position:absolute;right:46px;top:45px;width:32px;height:32px}
.identity{position:absolute;z-index:9;left:3.2%;bottom:8%;pointer-events:none}
/* The padding keeps the descenders' clearance proportional to the wordmark. */
.identity h1{font-size:min(19vw,25vh);font-weight:700;line-height:.83;letter-spacing:-.055em;padding-bottom:.18em}
/* The subtitle sits in the footer rule, clear of the wordmark's descenders. */
.overview-footer{position:absolute;bottom:3.3%;left:3.6%;right:3.6%;display:flex;align-items:center;justify-content:space-between;gap:24px;font:10px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.overview-footer a{padding:10px}
.overview-footer svg{width:56px;height:26px}

/* 6 --------------------------------------------------------- chapter shell */
.chapter{position:relative;min-height:100svh;padding:130px 4vw 70px 17vw;background:var(--black)}
.chapter[hidden]{display:none}
.chapter-intro{padding:30px 0 80px}
.chapter-intro .micro{margin-bottom:25px;color:var(--ember)}
.chapter-intro h2{font-size:clamp(56px,7.4vw,124px);line-height:.98}
.intro-copy{font-size:clamp(19px,1.5vw,22px);line-height:1.45;max-width:520px;margin-top:32px;letter-spacing:-.025em;color:#d8ccbd}
.chapter-end{display:flex;justify-content:space-between;align-items:baseline;gap:30px;border-top:1px solid var(--rule);padding-top:30px;margin-top:90px}
.chapter-end .micro{color:var(--ember)}
.chapter-end .text-link{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.04em;border-bottom:0;padding:0}
.chapter-end .text-link svg{width:34px}

/* 7 ------------------------------------------------------------------ work */
.project{display:grid;grid-template-columns:1.4fr 1fr;gap:6%;align-items:center;padding:60px 0;border-top:1px solid var(--rule)}
.project-image{position:relative;overflow:hidden;border-radius:7px;aspect-ratio:16/9;display:block;background:#302723}
.project-image img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 500ms var(--ease)}
.visit-mark{position:absolute;bottom:16px;right:16px;background:var(--black);padding:14px;border-radius:50%}
.project-copy .micro{color:var(--ember);margin-bottom:20px}
.project-copy h3{font-size:clamp(38px,3.8vw,62px);line-height:1}
.project-copy p:not(.micro):not(.project-note){margin-top:20px;max-width:470px;font-size:18px;line-height:1.6;color:#d2c6b7;letter-spacing:-.02em}
.project-meta{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 34px;margin:24px 0 4px}
.project-meta dt{color:var(--ember);margin-bottom:8px}
.project-meta dd{margin:0;font:14px/1.4 var(--sans);letter-spacing:-.01em;text-transform:none;color:var(--ivory)}
.project-note{margin-top:24px;padding-left:20px;border-left:2px solid var(--ember);font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.35;color:var(--muted);max-width:430px}
.project-copy .text-link{margin-top:28px}
.project-reverse .project-image{order:2}
.project-reverse .project-copy{order:1}

/* 8 ---------------------------------------------------------- observations */
.observations-chapter{padding:0;background:var(--red)}
.observations-opening{position:relative;isolation:isolate;height:100svh;min-height:650px;background:#ce4a37}
.observations-opening img{position:absolute;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:multiply;filter:contrast(1.1)}
.observations-opening h2{position:absolute;left:17%;bottom:11%;font-size:clamp(64px,10vw,158px);font-weight:250;line-height:1}
.observations-opening .micro{position:absolute;left:17.5%;bottom:7.5%}
.photography-edit{background:var(--black);padding:105px 6vw 80px 17vw}
.photography-intro{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:end;margin-bottom:60px;border-top:1px solid var(--rule);padding-top:40px}
.photography-intro h3{font-size:clamp(44px,5.8vw,88px);line-height:1}
.photography-intro .micro{margin:20px 0 0;color:var(--ember)}
.photography-intro p:not(.micro){font-size:clamp(18px,1.4vw,21px);line-height:1.5;letter-spacing:-.025em;max-width:460px}
.photography-intro .text-link{margin-top:25px;font-size:14px}
.edit-controls{display:flex;justify-content:flex-end;margin-bottom:46px}
.sheet-toggle{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border:1px solid var(--rule);border-radius:999px;background:none;color:var(--muted);cursor:pointer;transition:color 180ms ease,border-color 180ms ease}
.sheet-toggle[aria-pressed=true]{color:var(--black);background:var(--ivory);border-color:var(--ivory)}
.photo-edit{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:120px 36px;align-items:start}
.gallery-figure{margin:0;min-width:0}
.gallery-figure--wide{grid-column:1/-1}
.gallery-figure--left{grid-column:1/7}
.gallery-figure--right{grid-column:8/-1;margin-top:130px}
/* One photograph a year runs the full width of the page; the rhythm needs a break. */
.gallery-figure--full{grid-column:1/-1;margin-left:-17vw;margin-right:-6vw}
.gallery-figure--full .gallery-caption{padding:0 6vw 0 17vw}
.photo-open{position:relative;display:block;cursor:zoom-in}
.photo-open img{width:100%;height:auto;transition:opacity 200ms ease}
.photo-open:focus-visible{outline-offset:10px}
.gallery-caption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:17px;color:var(--muted);font-size:10px}
.caption-name{color:var(--ivory)}
.caption-place{flex:1;text-align:left;padding-left:8px}
.caption-index{letter-spacing:.03em;color:var(--ember)}
.gallery-figure.reveal-ready{opacity:0;transform:translate3d(0,24px,0);transition:opacity 800ms var(--ease),transform 800ms var(--ease)}
.gallery-figure.is-visible{opacity:1;transform:none}
/* Contact sheet: every frame at one size, the way they came off the roll. */
.photo-edit--sheet{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
.photo-edit--sheet .gallery-figure{grid-column:auto;margin:0;width:auto}
.photo-edit--sheet .gallery-figure--full{margin-left:0;margin-right:0}
.photo-edit--sheet .gallery-figure--full .gallery-caption{padding:0}
.photo-edit--sheet .photo-open img{aspect-ratio:1;object-fit:cover}
.photo-edit--sheet .caption-place{display:none}
.observations-chapter .chapter-end{margin:0 6vw 0 17vw;padding:34px 0 70px;border-color:var(--rule)}
/* In the gallery the back link scrolls away instead of sitting over a photograph. */
body[data-view=observations] .back-link{position:absolute}
/* viewer */
.photo-viewer{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:28px 36px;border:0;background:#100e0d;color:var(--ivory);overflow:hidden}
.photo-viewer[open]{display:flex;flex-direction:column;gap:20px}
.photo-viewer::backdrop{background:#100e0d}
.photo-viewer-open{overflow:hidden}
.viewer-top,.viewer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex:none}
.viewer-top .micro{color:var(--muted)}
.viewer-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;touch-action:pan-y pinch-zoom;margin:0}
.viewer-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.viewer-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:48px;min-height:48px;padding:10px 12px;background:none;color:inherit;border:1px solid #625951;border-radius:999px;font:11px/1.3 var(--sans);cursor:pointer;transition:background 180ms ease,transform 150ms ease}
.viewer-button:active{transform:scale(.97)}
.viewer-button svg{width:24px;height:18px}
.viewer-previous svg{transform:rotate(180deg)}
.viewer-close{border:0;font:11px var(--mono);letter-spacing:.06em}
.viewer-close svg{width:18px;height:18px}
.viewer-footer-copy{text-align:center;flex:1;min-width:0}
.viewer-caption{font-size:14px;margin-bottom:5px}
.viewer-meta,.viewer-counter,.viewer-status{font:10px/1.4 var(--mono);letter-spacing:.06em;color:var(--muted)}
.viewer-meta{margin-bottom:4px}
.viewer-meta:empty,.viewer-status:empty{display:none}

/* 9 ------------------------------------------------------------- listening */
.listening-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 36px;align-items:start}
.listening-heading{grid-column:1/6;grid-row:1}
.listening-heading h2{font-size:clamp(56px,6.6vw,108px);line-height:1.02;font-weight:250}
.listening-heading .micro{margin:16px 0 0;letter-spacing:.28em;color:var(--ember)}
.ocean{grid-column:6/13;grid-row:1;width:calc(100% + 4vw);max-width:none;height:clamp(150px,18vw,250px);object-fit:cover;object-position:50% 45%}
/* One block per playlist: number, name, a line about it, the player, the notes. */
.playlists{grid-column:1/13;grid-row:2}
.playlist{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 36px;align-items:start;padding-top:clamp(44px,6vh,84px)}
.playlist+.playlist{margin-top:clamp(56px,7vh,96px);border-top:1px solid var(--rule)}
.playlist>.micro{grid-column:1/13;grid-row:1;color:var(--ember)}
.playlist-name{grid-column:1/10;grid-row:2;margin-top:14px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(48px,6.6vw,104px);line-height:1;letter-spacing:-.01em}
.playlist-note{grid-column:1/7;grid-row:3;margin-top:24px;font-size:18px;line-height:1.5;color:var(--muted);letter-spacing:-.02em}
.spotify-player{grid-column:1/7;grid-row:4;margin-top:34px}
.spotify-player iframe{border:0;border-radius:12px;display:block;background:#1f1f1f;height:352px;width:100%}
.spotify-player .external{margin-top:12px;float:right}
.liner-notes{grid-column:8/13;grid-row:3/5;margin-top:30px}
.liner-notes>.micro{color:var(--ember)}
.liner-notes ol{list-style:none;margin:6px 0 0;padding:0;counter-reset:note}
.liner-notes li{counter-increment:note;display:grid;grid-template-columns:34px 1fr;gap:0 10px;padding:20px 0;border-top:1px solid var(--rule)}
.liner-notes li::before{content:counter(note,decimal-leading-zero);grid-row:1/3;font:10px/1.7 var(--mono);color:var(--ember)}
.track{font-size:17px;line-height:1.35;letter-spacing:-.02em}
.artist{color:var(--muted)}
.liner-notes li p{margin-top:7px;grid-column:2;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.4;color:var(--muted)}

/* 10 ------------------------------------------------------- about + reach */
.about-chapter{background:var(--deep) url('/media/paper-grain.webp');background-size:760px 760px;background-blend-mode:soft-light;padding-bottom:0}
.about-body{display:grid;grid-template-columns:.85fr 1.15fr;gap:8%;padding-top:45px;border-top:1px solid var(--rule-light)}
.about-lead{font-family:var(--serif);font-size:clamp(32px,3.4vw,50px);line-height:1.12;letter-spacing:-.01em;font-weight:400}
.currently{margin:44px 0 0}
.currently div{display:flex;align-items:baseline;gap:18px;padding:13px 0;border-top:1px solid var(--rule-light)}
.currently dt{flex:none;width:92px;font:10px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#e8a898}
.currently dd{margin:0;font-size:15px;letter-spacing:-.01em}
.about-copy p{font-size:19px;line-height:1.6;letter-spacing:-.025em;margin-bottom:26px;max-width:580px}
.about-copy p a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.reach{margin:110px -4vw 0 -17vw;padding:100px 4vw 110px 17vw;background:var(--red) url('/media/paper-grain.webp');background-size:760px 760px;background-blend-mode:soft-light}
.reach h3{font-size:clamp(48px,6.6vw,110px);line-height:.98;margin:24px 0 20px}
.reach-open{font-size:18px;line-height:1.5;color:#f2e7d8;max-width:540px;margin-bottom:46px}
.email-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.email{font-size:clamp(24px,3.3vw,52px);letter-spacing:-.055em;border-bottom:1px solid currentColor;display:inline-flex;align-items:center;gap:32px;padding-bottom:13px}
.email svg{width:48px;height:30px}
.copy-email{display:inline-flex;align-items:center;min-height:44px;padding:11px 20px;border:1px solid var(--rule-light);border-radius:999px;background:none;color:inherit;cursor:pointer;transition:background 180ms ease}
.copy-state{color:#f7eddc}
.socials{display:flex;gap:40px;margin-top:52px}
.socials a{display:flex;align-items:center;gap:14px;font-size:14px}
.socials svg{width:19px}

/* 11 ---------------------------------------------------------------- motion */
@media (hover:hover) and (pointer:fine){
  .sheet:hover{transform:translateY(-10px)}
  .sheet:active{transform:translateY(-5px) scale(.997)}
  .sheet:hover .sheet-arrow,.sheet:focus-visible .sheet-arrow{opacity:1;transform:none}
  .sidebar nav a:hover{text-decoration:underline;text-underline-offset:5px}
  .project-image:hover img{transform:scale(1.025)}
  .text-link svg,.email svg{transition:transform 180ms var(--ease)}
  .text-link:hover svg,.email:hover svg{transform:translateX(5px)}
  .chapter-end .text-link:hover{text-decoration:underline;text-underline-offset:8px}
  .photo-open:hover img{opacity:.92}
  .viewer-button:hover{background:#292420}
  .copy-email:hover,.sheet-toggle:hover{background:rgba(239,230,214,.12)}
  .sheet-toggle[aria-pressed=true]:hover{background:var(--ivory)}
}
@keyframes stack-arrival{from{transform:translate3d(0,70svh,0);opacity:1}to{transform:translate3d(0,0,0);opacity:1}}
@keyframes name-settle{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){
  body.is-entering .sheet{animation:stack-arrival 1000ms var(--ease) both}
  body.is-entering .sheet-observations{animation-delay:65ms}
  body.is-entering .sheet-listening{animation-delay:130ms}
  body.is-entering .identity{animation:name-settle 620ms var(--ease) 280ms both}
}
/* Shared artwork is opt-in for the actual photo/listening landing card only. */
html[data-panel-transition] .sidebar{view-transition-name:stable-navigation}
::view-transition-group(chosen-artwork),::view-transition-group(chosen-title){animation-duration:720ms;animation-timing-function:cubic-bezier(.22,.8,.22,1)}
html[data-panel-transition=return]::view-transition-group(chosen-artwork),html[data-panel-transition=return]::view-transition-group(chosen-title){animation-duration:560ms}
::view-transition-group(chosen-artwork){z-index:2;overflow:hidden;border-radius:7px}
::view-transition-group(chosen-title){z-index:3}
::view-transition-group(stable-navigation){z-index:5;animation:none}
::view-transition-old(chosen-artwork),::view-transition-new(chosen-artwork){width:100%;height:100%;object-fit:cover;mix-blend-mode:normal;animation-duration:500ms}
::view-transition-old(chosen-title),::view-transition-new(chosen-title){height:100%;mix-blend-mode:normal;animation-duration:500ms}
::view-transition-old(root){animation:page-away 220ms ease-out both}
::view-transition-new(root){animation:page-arrive 480ms var(--ease) 110ms both}
::view-transition-old(stable-navigation){display:none}::view-transition-new(stable-navigation){animation:none}
@keyframes page-away{to{opacity:0}}
@keyframes page-arrive{from{opacity:0}to{opacity:1}}
/* A single artwork snapshot avoids the doubled face/texture of a crossfade. */
::view-transition-old(chosen-artwork){display:none}
::view-transition-new(chosen-artwork){animation:none;opacity:1}
::view-transition-old(chosen-title){display:none}
::view-transition-new(chosen-title){animation:none;opacity:1}
::view-transition{pointer-events:none}
::view-transition-group(context-copy),::view-transition-group(context-player),::view-transition-group(context-label){z-index:4}
::view-transition-new(context-copy){animation:page-arrive 420ms var(--ease) 300ms both}
::view-transition-new(context-player){animation:page-arrive 280ms var(--ease) 520ms both}
::view-transition-new(context-label){animation:page-arrive 200ms ease-out 560ms both}
::view-transition-old(context-copy),::view-transition-old(context-player),::view-transition-old(context-label){animation:page-away 140ms ease-out both}
::view-transition-group(*),::view-transition-image-pair(*),::view-transition-old(*),::view-transition-new(*){pointer-events:none}
/* Safari path: move the real selected element; never duplicate a media node. */
.artwork-flight{position:fixed;left:0;top:0;z-index:32;overflow:hidden;pointer-events:none;transform-origin:top left;border-radius:7px;will-change:transform;contain:strict}
.title-flight{position:fixed;z-index:33;pointer-events:none;transform-origin:top left;will-change:transform}

/* 12 ------------------------------------------------------------ responsive */
@media(min-width:1800px){
  .sheet-title{font-size:80px}
  .sheet-label{padding:40px 55px}
  .sidebar nav a{font-size:12px}
}
@media(max-width:1000px) and (min-width:801px){
  .sidebar{width:120px}
  .sheet-label{padding:24px 28px;max-width:70%}
  .discipline{font-size:10px;left:22%}
  .spotify-mark{right:25px;top:35px}
  .chapter{padding-left:20vw}
  .listening-heading{grid-column:1/7}
  .ocean{grid-column:7/13;height:clamp(130px,16vw,190px)}
  .playlist-name{grid-column:1/12}
  .playlist-note{grid-column:1/10}
  .spotify-player{grid-column:1/13;grid-row:4}
  .liner-notes{grid-column:1/13;grid-row:5;margin-top:40px}
  .project{gap:5%}
  .project-copy p:not(.micro):not(.project-note){font-size:16px}
  .project-copy h3{font-size:38px}
  .about-body{grid-template-columns:1fr}
  .about-copy{margin-top:35px}
  .photo-edit--sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
  .sidebar{position:absolute;top:28px;left:24px;right:24px;width:auto;display:flex;align-items:center;justify-content:space-between}
  .monogram{font-size:32px}
  .sidebar nav{flex-direction:row;gap:11px;margin:0}
  .sidebar nav a{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:0;padding:10px 0}
  .nav-marker{width:4px;height:4px}
  .back-link{position:absolute;top:91px;right:24px;font-size:10px;gap:10px}
  .back-link svg{width:22px}
  .overview{height:100svh;min-height:720px;max-height:1000px}
  .big-c{width:134%;height:87%;left:-27%;top:12%;border-width:21vw}
  .big-c::after{right:-31vw;top:5%;width:48vw;height:47%}
  .sheet-work{left:15%;top:16%;width:79%;height:35%}
  .sheet-observations{left:7%;top:32%;width:87%;height:37%}
  .sheet-listening{left:11%;top:59%;width:83%;height:23%}
  .sheet-label{padding:23px;max-width:66%}
  .sheet-title{font-size:clamp(35px,7vw,52px)}
  .sheet-label .micro{font-size:8px;margin-bottom:8px}
  .work-collage{left:36%}
  .portrait{object-position:53% 65%}
  .spotify-mark{right:23px;top:35px;width:25px;height:25px}
  .sheet-arrow{right:20px;top:30px;width:22px}
  /* Anchored to the footer rather than the viewport, so short phones keep the gap. */
  .identity{left:5%;bottom:calc(3% + 88px)}
  .identity h1{font-size:min(22vw,12vh);letter-spacing:-.06em}
  .overview-footer{left:24px;right:20px;bottom:3%;font-size:8px;letter-spacing:.04em;flex-wrap:wrap;gap:6px 12px}
  .overview-footer .discipline{order:-1;flex-basis:100%;text-align:center;margin-bottom:4px}
  .overview-footer svg{width:40px}
  .chapter{padding:160px 24px 45px;min-height:100svh}
  .chapter-intro{padding:0 0 55px}
  .chapter-intro h2{font-size:clamp(46px,10vw,78px)}
  .chapter-intro .micro{font-size:9px;margin-bottom:20px}
  .intro-copy{font-size:18px}
  .chapter-end{margin-top:45px;align-items:flex-start;flex-direction:column;gap:14px}
  .chapter-end .text-link{font-size:26px}
  .listening-layout{display:flex;flex-direction:column;width:100%}
  .listening-heading h2{font-size:clamp(52px,14vw,67px)}
  .listening-heading .micro{font-size:8px;letter-spacing:.2em;margin:14px 0 0}
  .ocean{width:calc(100% + 24px);margin:34px -24px 0 0;height:clamp(120px,34vw,170px);order:1}
  .playlists{order:2}
  .playlist{display:block;padding-top:40px}
  .playlist+.playlist{margin-top:46px}
  .playlist-name{margin:12px 0 0;font-size:clamp(40px,10.5vw,64px);line-height:1.02}
  .playlist-note{margin-top:18px;font-size:17px}
  .spotify-player{margin-top:28px}
  .spotify-player iframe{height:352px}
  .spotify-player .external{float:none;display:flex;width:max-content;margin:14px 0 0 auto}
  .liner-notes{margin-top:40px}
  .project{display:flex;flex-direction:column;align-items:stretch;padding:35px 0 50px;gap:30px}
  .project-reverse .project-image,.project-reverse .project-copy{order:initial}
  .project-copy h3{font-size:44px}
  .project-copy h3 br{display:none}
  .project-copy p:not(.micro):not(.project-note){font-size:17px}
  .project-copy .micro{margin-bottom:16px;font-size:9px}
  .project-meta{gap:0 26px;margin:20px 0 0}
  .project-note{font-size:18px}
  .project-copy .text-link{margin-top:20px}
  .observations-chapter{padding:0}
  .observations-opening{height:100svh;min-height:600px}
  .observations-opening img{object-position:55% center}
  .observations-opening h2{left:24px;bottom:13%;font-size:clamp(47px,10.8vw,90px)}
  .observations-opening .micro{left:27px;bottom:8.5%;font-size:8px}
  .photography-edit{padding:70px 24px 60px}
  .photography-intro{grid-template-columns:1fr;gap:30px;padding-top:28px;margin-bottom:40px}
  .photography-intro h3{font-size:53px}
  .photography-intro p:not(.micro){font-size:18px}
  .photography-intro .micro{font-size:9px}
  .edit-controls{margin-bottom:34px}
  .sheet-toggle{font-size:9px;padding:10px 16px}
  .photo-edit{grid-template-columns:1fr;gap:65px}
  .gallery-figure--wide,.gallery-figure--left,.gallery-figure--right{grid-column:1;margin-top:0}
  .gallery-figure--right{width:88%;margin-left:auto}
  .gallery-figure--left{width:88%}
  .gallery-figure--full{grid-column:1;margin:0 -24px}
  .gallery-figure--full .gallery-caption{padding:0 24px}
  .gallery-caption{font-size:8px;margin-top:13px;gap:12px}
  .photo-edit--sheet{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .photo-edit--sheet .gallery-figure{width:auto;margin:0}
  .observations-chapter .chapter-end{margin:0 24px;padding-bottom:45px}
  .photo-viewer{padding:max(20px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));gap:16px}
  .viewer-button{min-width:44px;min-height:44px}
  .viewer-caption{font-size:13px}
  .viewer-top .micro{font-size:9px}
  .viewer-bottom{gap:14px}
  .about-body{grid-template-columns:1fr;gap:34px;padding-top:30px}
  .about-lead{font-size:32px}
  .currently{margin-top:30px}
  .about-copy p{font-size:18px}
  .reach{margin:70px -24px 0;padding:70px 24px 80px}
  .reach h3{font-size:clamp(44px,12vw,72px);margin:22px 0 18px}
  .reach-open{font-size:16px;margin-bottom:34px}
  .email{font-size:clamp(20px,5.7vw,36px);gap:16px;letter-spacing:-.04em}
  .email svg{width:26px}
  .email-row{gap:16px}
  .socials{gap:25px;flex-wrap:wrap;margin-top:42px}
  .socials a{font-size:12px;gap:8px}
  .socials svg{width:15px}
}
@media(max-width:370px){
  .sidebar{left:18px;right:18px}
  .sidebar nav{gap:8px}
  .sidebar nav a{font-size:8px}
  .sheet-label{padding-left:18px}
  .sheet-title{font-size:33px}
  .chapter{padding-left:20px;padding-right:20px}
  .listening-heading h2{font-size:52px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-new(*),::view-transition-old(*){animation:none!important}
  .gallery-figure.reveal-ready{opacity:1;transform:none}
}