:root {
  --ink: #0b0b0a;
  --surface: #151410;
  --bone: #f1ead9;
  --muted: #b7ad98;
  --gold: #b89445;
  --red: #9f3128;
  --rule: #3a3428;
  --focus: #f3c95d;
  --gutter: clamp(1rem, 4vw, 4.5rem);
  --content: 1320px;
  --header-height: 5.5rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--bone); background: var(--ink); font-family: Arial, Helvetica, sans-serif; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }

.skip-link { position: fixed; z-index: 1000; left: 1rem; top: 1rem; transform: translateY(-200%); padding: .8rem 1rem; color: var(--ink); background: var(--focus); font-weight: 700; }
.skip-link:focus { transform: none; }
.section-shell { width: min(var(--content), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.section-label { margin: 0 0 1.5rem; color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

.concept-bar { position: relative; z-index: 70; padding: .55rem var(--gutter); color: #cdc3ad; background: #171610; border-bottom: 1px solid #373326; text-align: center; font-size: .72rem; letter-spacing: .02em; }
.concept-bar p { margin: 0; }
.concept-bar a { text-underline-offset: 3px; }

.site-header { position: absolute; z-index: 40; top: 2.1rem; left: 0; right: 0; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter); border-bottom: 1px solid rgba(241,234,217,.25); }
.brand { display: inline-flex; align-items: center; gap: .8rem; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; text-decoration: none; letter-spacing: .04em; }
.brand img { width: 2.8rem; height: 2.8rem; border-radius: 50%; }
.site-header nav { display: flex; gap: clamp(1rem, 3vw, 3rem); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.site-header nav a { padding-block: .75rem; text-decoration: none; border-bottom: 1px solid transparent; }
.site-header nav a:hover, .site-header nav a:focus-visible { border-color: var(--gold); }

.wolf-scroll-scene { position: relative; isolation: isolate; min-height: 100svh; background: #030303; }
.wolf-scroll-stage { position: relative; min-height: 100svh; overflow: hidden; background: #030303; }
.wolf-scroll-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #030303; }
.wolf-scroll-grade { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.25) 34%, transparent 62%), linear-gradient(0deg, rgba(0,0,0,.72) 0%, transparent 36%, rgba(0,0,0,.28) 100%); }
.grain { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .1; mix-blend-mode: soft-light; background-image: radial-gradient(circle at 20% 20%, #fff 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 1px); background-size: 13px 17px, 19px 23px; }
.wolf-folio { position: absolute; z-index: 5; top: calc(var(--header-height) + 3.8rem); left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; color: rgba(241,234,217,.58); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.wolf-story { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.wolf-beat { position: absolute; left: var(--gutter); top: 50%; width: min(44rem, calc(100% - 2 * var(--gutter))); margin: 0; transform: translateY(-42%); opacity: 0; visibility: hidden; }
.wolf-beat--middle { left: auto; right: var(--gutter); width: min(38rem, calc(100% - 2 * var(--gutter))); text-align: right; }
.wolf-beat--closing { top: clamp(10rem, 22vh, 15rem); bottom: auto; width: auto; transform: none; }
.wolf-beat .hero-kicker { margin: 0 0 1.3rem; color: var(--gold); font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.wolf-beat h1, .wolf-beat h2 { margin: 0; font-size: clamp(4.6rem, 9.5vw, 9.5rem); line-height: .76; letter-spacing: -.075em; text-wrap: balance; text-shadow: 0 .15em 1em rgba(0,0,0,.55); }
.wolf-beat--middle h2, .wolf-beat--closing h2 { font-size: clamp(3.8rem, 7.5vw, 7.7rem); }
.wolf-beat h1 span, .wolf-beat h1 em { display: block; }
.wolf-beat h1 em, .wolf-beat h2 em { color: var(--gold); font-weight: 400; }
.wolf-beat > p:last-child { margin: 1.4rem 0 0; color: rgba(241,234,217,.78); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1rem, 1.5vw, 1.3rem); }
.wolf-beat--closing > .hero-kicker { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: .68rem; }
.wolf-beat a { pointer-events: auto; display: inline-flex; align-items: center; gap: 2rem; min-height: 48px; margin-top: 1.7rem; padding: .85rem 1rem; color: var(--ink); background: var(--gold); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.wolf-credit { position: absolute; z-index: 5; left: var(--gutter); bottom: 1.25rem; margin: 0; color: rgba(241,234,217,.45); font-size: .6rem; letter-spacing: .05em; }
.wolf-scroll-cue { position: absolute; z-index: 5; right: var(--gutter); bottom: 1.05rem; display: flex; align-items: center; gap: .8rem; margin: 0; color: rgba(241,234,217,.7); font-size: .62rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.wolf-scroll-cue span { display: block; width: 3.5rem; height: 1px; overflow: hidden; background: rgba(241,234,217,.28); }
.wolf-scroll-cue span::after { content: ""; display: block; width: 100%; height: 100%; background: var(--gold); transform-origin: left; animation: scrollPulse 1.8s ease-in-out infinite; }
.motion-panel { position: absolute; z-index: 8; left: 50%; bottom: 2rem; width: min(34rem, calc(100% - 2rem)); transform: translateX(-50%); padding: 1rem; border: 1px solid rgba(241,234,217,.25); background: rgba(8,8,7,.88); backdrop-filter: blur(16px); text-align: center; }
.motion-panel p { margin-bottom: .7rem; color: var(--muted); font-size: .8rem; }
.motion-panel button { min-height: 44px; padding: .65rem 1rem; color: var(--ink); background: var(--gold); border: 0; font: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
html[data-motion-state="static"] .wolf-beat--opening { opacity: 1; visibility: visible; }
@keyframes scrollPulse { 0%, 100% { transform: scaleX(.05); } 50% { transform: scaleX(1); } }

.manifesto { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(11rem, .75fr) minmax(0, 1.6fr); gap: clamp(3rem, 10vw, 10rem); padding-block: clamp(7rem, 14vw, 13rem); background: var(--ink); }
.manifesto--over-wolf { width: 100%; max-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--content)) / 2)); }
.wolf-scroll-scene[data-motion-state="enhanced"] .manifesto--over-wolf { position: absolute; top: 59%; left: 0; right: 0; min-height: 130svh; background: linear-gradient(to bottom, rgba(11,11,10,.08), rgba(11,11,10,.78) 24rem, rgba(11,11,10,.96) 52%, rgba(11,11,10,.42) 84%, transparent); }
.manifesto-mark { display: flex; align-items: flex-start; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 1.25rem; color: #736b59; font-size: .7rem; letter-spacing: .18em; }
.manifesto--over-wolf .manifesto-mark { border-top: 0; }
.manifesto-mark img { width: clamp(5rem, 10vw, 8rem); height: auto; border-radius: 50%; filter: sepia(.15) contrast(1.05); }
.manifesto-copy h2, .studio h2, .contact h2 { margin-bottom: 2.25rem; font-size: clamp(3.4rem, 7.5vw, 7.5rem); line-height: .84; letter-spacing: -.06em; }
.manifesto-copy h2 em, .studio h2 em, .contact h2 em { color: var(--gold); font-weight: 400; }
.manifesto-copy > p:last-child { max-width: 38rem; margin: 0 0 0 auto; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.28rem); line-height: 1.7; }

.work { position: relative; min-height: 100svh; background: var(--bone); color: var(--ink); }
.gallery-stage { min-height: 100svh; display: grid; grid-template-columns: minmax(16rem, 26vw) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: clamp(4rem, 7vw, 6rem) var(--gutter); overflow: hidden; }
.gallery-heading { align-self: stretch; display: flex; flex-direction: column; justify-content: center; max-width: 24rem; }
.gallery-heading .section-label { color: #755d28; }
.gallery-heading h2 { margin-bottom: 2.5rem; font-size: clamp(2.8rem, 4.6vw, 5rem); line-height: .88; letter-spacing: -.055em; }
.gallery-meter { width: 100%; height: 2px; background: #cfc6b2; overflow: hidden; }
.gallery-meter span { display: block; width: 100%; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left center; }
.gallery-instruction { margin: .8rem 0 0; color: #716b60; font-size: .67rem; letter-spacing: .16em; text-transform: uppercase; }
.mobile-copy { display: none; }
.gallery-viewport { min-width: 0; overflow: hidden; }
.gallery-track { display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2rem); width: max-content; will-change: transform; }
.gallery-panel { width: min(38vw, 34rem); margin: 0; flex: 0 0 auto; }
.gallery-panel--portrait { width: min(32vw, 28rem); }
.gallery-panel a { display: block; overflow: hidden; background: #171610; }
.gallery-panel img { width: 100%; height: min(64svh, 42rem); object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.gallery-panel--portrait img { object-position: center; }
.gallery-panel a:hover img, .gallery-panel a:focus-visible img { transform: scale(1.025); }
.gallery-panel figcaption { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; padding-top: 1rem; border-top: 1px solid #bdb4a0; }
.gallery-panel figcaption span { grid-row: 1 / 3; color: var(--red); font-size: .7rem; font-weight: 700; }
.gallery-panel figcaption strong { font-family: Georgia, "Times New Roman", serif; font-size: 1rem; font-weight: 400; }
.gallery-panel figcaption small { color: #716b60; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.gallery-end { width: min(38vw, 32rem); min-height: min(64svh, 42rem); flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(2rem, 4vw, 4rem); color: var(--bone); background: var(--red); }
.gallery-end .section-label { color: #f3d6aa; }
.gallery-end h3 { margin-bottom: 1.5rem; font-size: clamp(2.5rem, 4.5vw, 4.8rem); line-height: .88; letter-spacing: -.055em; }
.gallery-end p:not(.section-label) { max-width: 28rem; line-height: 1.6; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1rem; padding: .85rem 1rem; color: var(--ink); background: var(--bone); text-decoration: none; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.noscript-note { margin: 0; padding: 1rem var(--gutter); color: var(--bone); background: var(--red); text-align: center; }

.js-ready [data-gallery-mode="enhanced"] .gallery-stage { position: sticky; top: 0; }
.js-ready [data-gallery-mode="enhanced"] .gallery-track { transform: translate3d(var(--gallery-x, 0), 0, 0); }

.studio { display: grid; grid-template-columns: minmax(17rem, .85fr) minmax(0, 1.4fr); gap: clamp(3rem, 8vw, 8rem); padding-block: clamp(7rem, 13vw, 13rem); }
.studio-copy { align-self: center; }
.studio-copy > p:not(.section-label) { max-width: 32rem; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.text-link { display: inline-flex; gap: 1.25rem; margin-top: 1.5rem; color: var(--gold); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-underline-offset: .45rem; }
.studio-images { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: clamp(1rem, 2vw, 2rem); }
.studio-image { margin: 0; }
.studio-image--exterior { margin-bottom: -5rem; }
.studio-image img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: saturate(.72) sepia(.1); }
.studio-image--exterior img { aspect-ratio: 3/5; }
.studio-image figcaption { padding-top: .75rem; color: #8d8370; font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; }
.studio-image figcaption a { text-underline-offset: 3px; }

.contact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr); gap: clamp(3rem, 8vw, 8rem); padding-block: clamp(7rem, 12vw, 11rem); border-top: 1px solid var(--rule); }
.contact-actions { border-top: 1px solid var(--rule); }
.contact-actions > a { min-height: 6rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.contact-actions > a span:first-child { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.contact-actions > a strong { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.1rem, 2vw, 1.55rem); font-weight: 400; text-align: right; }
.contact-actions > a:hover span:first-child, .contact-actions > a:focus-visible span:first-child { color: var(--gold); }
.contact-actions .contact-primary { margin-bottom: 1rem; padding-inline: 1.25rem; color: var(--ink); background: var(--gold); border: 0; }
.contact-actions .contact-primary span:first-child { color: var(--ink); }
.hours { grid-column: 2; padding-top: 2rem; color: var(--muted); }
.hours > span { display: block; margin-bottom: 1.1rem; color: var(--gold); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hours p { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: .65rem; }
.hours p strong { color: var(--bone); }
.hours small { display: block; margin-top: 1.5rem; line-height: 1.5; }

footer { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 2rem; align-items: end; padding: 3rem var(--gutter); color: #918876; background: #060605; border-top: 1px solid #242116; font-size: .65rem; line-height: 1.5; }
footer div:first-child { display: flex; flex-direction: column; gap: .35rem; color: var(--bone); font-family: Georgia, "Times New Roman", serif; font-size: 1rem; }
footer p { margin: .2rem 0; }
footer > a { justify-self: end; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .manifesto, .studio, .contact { grid-template-columns: 1fr; }
  .manifesto-mark { max-width: 16rem; }
  .manifesto-copy > p:last-child { margin-left: 0; }
  .studio-images { width: min(100%, 42rem); margin-left: auto; }
  .studio-image--exterior { margin-bottom: -2rem; }
  .hours { grid-column: 1; }
  footer { grid-template-columns: 1fr 1fr; }
  footer > a { justify-self: start; }
}

@media (max-width: 760px) {
  :root { --header-height: 4.5rem; }
  html { scroll-behavior: auto; }
  .concept-bar { text-align: left; line-height: 1.4; }
  .site-header { top: 3.3rem; }
  .brand span { display: none; }
  .brand img { width: 2.35rem; height: 2.35rem; }
  .site-header nav { gap: 1rem; font-size: .62rem; }
  .wolf-scroll-media { object-position: center; }
  .wolf-scroll-grade { background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.38) 100%); }
  .wolf-folio { top: calc(var(--header-height) + 4.6rem); }
  .wolf-folio span:last-child { display: none; }
  .wolf-beat, .wolf-beat--middle { left: var(--gutter); right: auto; top: auto; bottom: clamp(5.5rem, 13vh, 8rem); width: calc(100% - 2 * var(--gutter)); transform: none; text-align: left; }
  .wolf-beat--closing { top: 9rem; bottom: auto; width: auto; }
  .wolf-beat h1, .wolf-beat h2, .wolf-beat--middle h2, .wolf-beat--closing h2 { font-size: clamp(3.7rem, 17vw, 6.2rem); line-height: .79; }
  .wolf-credit { max-width: 67%; }
  .wolf-scroll-cue { right: 1rem; }
  .manifesto { padding-block: 6rem; }
  .manifesto-copy h2, .studio h2, .contact h2 { font-size: clamp(3.1rem, 15vw, 5.5rem); }

  .work { min-height: auto; padding-block: 5rem; overflow: hidden; }
  .gallery-stage { min-height: auto; display: block; padding: 0; overflow: visible; }
  .gallery-heading { max-width: none; padding-inline: var(--gutter); }
  .gallery-heading h2 { font-size: clamp(3rem, 14vw, 5rem); }
  .gallery-meter { display: none; }
  .desktop-copy { display: none; }
  .mobile-copy { display: inline; }
  .gallery-viewport { margin-top: 2.5rem; overflow-x: auto; padding: 0 var(--gutter) 1.5rem; scroll-snap-type: x mandatory; scrollbar-color: var(--red) #d7cdb9; }
  .gallery-track { gap: 1rem; transform: none !important; will-change: auto; }
  .gallery-panel, .gallery-panel--portrait { width: min(80vw, 26rem); scroll-snap-align: start; }
  .gallery-panel img { height: 62svh; max-height: 35rem; }
  .gallery-end { width: min(80vw, 26rem); min-height: 62svh; scroll-snap-align: start; }

  .studio { padding-block: 6rem 8rem; }
  .studio-images { grid-template-columns: 1fr 1fr; }
  .contact { padding-block: 6rem; }
  .contact-actions > a { align-items: flex-start; flex-direction: column; }
  .contact-actions > a strong { text-align: left; }
  .hours p { flex-direction: column; gap: .2rem; }
  footer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wolf-scroll-cue span::after { animation: none; transform: scaleX(1); }
  .wolf-scroll-scene, .wolf-scroll-stage { min-height: 100svh; height: auto !important; }
  .wolf-scroll-stage { position: relative !important; inset: auto !important; transform: none !important; }
  .manifesto--over-wolf { position: relative !important; top: auto !important; min-height: auto !important; }
  .wolf-scroll-media { object-fit: cover; }
  .gallery-panel img { transition: none; }
  .work { height: auto !important; min-height: auto; padding-block: 5rem; }
  .gallery-stage { position: static !important; min-height: auto; display: block; padding: 0 var(--gutter); overflow: visible; }
  .gallery-heading { max-width: 36rem; margin-bottom: 3rem; }
  .gallery-meter, .gallery-instruction { display: none; }
  .gallery-viewport { overflow: visible; }
  .gallery-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; transform: none !important; will-change: auto; }
  .gallery-panel, .gallery-panel--portrait, .gallery-end { width: auto; }
  .gallery-panel img { height: min(58svh, 32rem); }
  .gallery-end { min-height: 30rem; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  .gallery-track { grid-template-columns: 1fr; }
}