:root {
  --ink: #11100f;
  --ink-soft: #191715;
  --paper: #eee8df;
  --paper-soft: #d6cfc4;
  --copper: #b86f43;
  --copper-bright: #d99365;
  --line: rgba(238, 232, 223, .18);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --max: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; }

.skip { position: fixed; left: 1rem; top: -5rem; z-index: 99; padding: .75rem 1rem; color: var(--ink); background: var(--paper); }
.skip:focus { top: 1rem; }

.site-header { position: absolute; z-index: 30; inset: 0 0 auto; }
.nav { width: min(calc(100% - 3rem), var(--max)); margin: auto; padding: 1.5rem 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; letter-spacing: .16em; text-transform: uppercase; font-size: 1.05rem; font-weight: 650; }
.wordmark-mark { display: inline-grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; margin-right: .8rem; border: 1px solid currentColor; border-radius: 50%; font-size: .78rem; line-height: 1; letter-spacing: 0; }
.nav-links { display: flex; align-items: center; gap: 1.7rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.nav-links a { opacity: .76; transition: opacity .2s ease; }
.nav-links a:hover, .nav-links a:focus-visible { opacity: 1; }
.nav-links .nav-cta { opacity: 1; border: 1px solid rgba(238,232,223,.55); padding: .65rem 1rem; }

.hero { min-height: 100svh; padding: 8.2rem max(1.5rem, calc((100vw - var(--max))/2)) 4rem; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(20rem, .82fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; overflow: hidden; position: relative; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 78% 44%, rgba(184,111,67,.13), transparent 32%), linear-gradient(120deg, #11100f 0%, #11100f 65%, #171411 100%); pointer-events: none; }
.hero-copy, .hero-portrait { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 1.3rem; color: var(--copper-bright); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 650; }
.hero h1 { margin: 0; font: normal clamp(4.7rem, 10.4vw, 10rem)/.82 var(--serif); letter-spacing: -.065em; }
.hero h1 span { display: block; color: var(--copper-bright); font-style: italic; margin-left: .42em; }
.hero-deck { margin: 2.2rem 0 0; max-width: 37rem; color: var(--paper-soft); font: clamp(1.14rem, 1.7vw, 1.45rem)/1.48 var(--serif); }
.hero-actions { margin-top: 2.4rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.3rem; border: 1px solid var(--paper); color: var(--paper); text-transform: uppercase; letter-spacing: .13em; font-size: .73rem; font-weight: 650; transition: background .2s, color .2s, border-color .2s; }
.button:hover, .button:focus-visible { background: var(--paper); color: var(--ink); }
.hero-portrait { align-self: center; max-width: 29rem; justify-self: end; }
.portrait-frame { position: relative; background: #252321; overflow: hidden; }
.portrait-frame::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); pointer-events: none; }
.portrait-frame img { width: 100%; height: auto; object-fit: cover; object-position: 50% 45%; filter: saturate(.72) contrast(1.04); }
.portrait-note { margin: 1rem 0 0; display: flex; align-items: center; justify-content: space-between; color: rgba(238,232,223,.55); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; }

.marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); padding: .9rem 0; color: rgba(238,232,223,.56); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; }
.marquee-track { display: inline-block; animation: drift 32s linear infinite; }
.marquee b { color: var(--copper-bright); font-weight: 400; margin: 0 1rem; }
@keyframes drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee-track { animation: none; } }

.section { padding: clamp(5rem, 9vw, 8.5rem) max(1.5rem, calc((100vw - var(--max))/2)); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--copper { background: #9d5a35; color: #fff7ef; }
.section-head { display: grid; grid-template-columns: minmax(12rem, .7fr) 1.5fr; gap: 2rem; align-items: start; margin-bottom: 3rem; }
.kicker { margin: 0; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--copper-bright); }
.section--paper .kicker { color: #7e4528; }
.section-title { margin: 0; font: normal clamp(2.7rem, 6vw, 5.8rem)/.98 var(--serif); letter-spacing: -.045em; max-width: 15ch; }
.section-intro { margin: 1.4rem 0 0; max-width: 44rem; color: inherit; opacity: .72; font-size: 1.06rem; }

.demo-grid { border-top: 1px solid rgba(17,16,15,.24); }
.demo { display: grid; grid-template-columns: 3.4rem 1fr auto; align-items: center; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(17,16,15,.24); }
.play { width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 1px solid rgba(17,16,15,.7); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.play:hover, .play:focus-visible, .play[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.play-icon { width: 0; height: 0; border-top: .36rem solid transparent; border-bottom: .36rem solid transparent; border-left: .55rem solid currentColor; margin-left: .12rem; }
.play[aria-pressed='true'] .play-icon { width: .58rem; height: .72rem; border: 0; border-inline: .16rem solid currentColor; margin: 0; }
.demo h3 { margin: 0; font: 1.55rem/1.2 var(--serif); }
.demo p { margin: .28rem 0 0; color: rgba(17,16,15,.6); font-size: .9rem; }
.demo time { font-variant-numeric: tabular-nums; color: rgba(17,16,15,.55); font-size: .75rem; letter-spacing: .1em; }
.progress { grid-column: 2 / -1; width: 100%; accent-color: var(--copper); height: 2px; cursor: pointer; }

.reel-layout { display: grid; grid-template-columns: 1.45fr .55fr; gap: 2.5rem; align-items: end; }
.video-shell { position: relative; background: #000; border: 1px solid var(--line); }
.video-shell video { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #050505; }
.reel-side { padding-bottom: .5rem; }
.reel-side blockquote { margin: 0; font: clamp(1.7rem, 3vw, 2.65rem)/1.2 var(--serif); }
.reel-side p { color: rgba(238,232,223,.6); }

.materials { padding: 3.5rem max(1.5rem, calc((100vw - var(--max))/2)); background: var(--ink-soft); border-block: 1px solid var(--line); }
.materials-head { display: grid; grid-template-columns: minmax(12rem, .7fr) 1.5fr; gap: 2rem; align-items: start; margin-bottom: 1.8rem; }
.materials-head h2 { margin: -.25rem 0 .2rem; font: normal clamp(2rem, 4vw, 3.2rem)/1 var(--serif); letter-spacing: -.035em; }
.materials-head p:last-child { margin: 0; color: rgba(238,232,223,.58); }
.materials-links { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.materials-links--three { grid-template-columns: repeat(3, 1fr); }
.materials-links a { min-height: 6.5rem; padding: 1.2rem; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); transition: background .2s, color .2s; }
.materials-links a:last-child { border-right: 0; }
.materials-links a:hover, .materials-links a:focus-visible { background: var(--paper); color: var(--ink); }
.materials-links span { font: 1.15rem/1.2 var(--serif); }
.materials-links small { color: var(--copper-bright); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.range-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.5rem; }
.range-notes p { margin: 0; color: rgba(238,232,223,.61); font-size: .9rem; }
.range-notes strong { color: var(--paper); text-transform: uppercase; letter-spacing: .11em; font-size: .75rem; margin-right: .5rem; }
.range-notes a { text-decoration: underline; text-decoration-color: rgba(238,232,223,.28); text-underline-offset: .22em; }

.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(17,16,15,.22); border: 1px solid rgba(17,16,15,.22); }
.work-card { background: var(--paper); padding: 2rem; min-height: 14rem; display: flex; flex-direction: column; justify-content: space-between; }
.work-card small { color: #7e4528; letter-spacing: .13em; text-transform: uppercase; font-size: .67rem; font-weight: 700; }
.work-card h3 { margin: 2.3rem 0 .75rem; font: 1.65rem/1.15 var(--serif); }
.work-card p { margin: 0; color: rgba(17,16,15,.65); font-size: 1rem; }
.work-card a { text-decoration: underline; text-decoration-color: rgba(17,16,15,.28); text-underline-offset: .25em; }
.lane-card { min-height: 11rem; }
.lane-card h3 { margin-top: 0; font-size: 1.8rem; }
.lane-link { display: inline-block; margin-top: 1rem; color: #6f3c24; font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }

.americana-band { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.americana-band h2 { margin: 0; font: normal clamp(3rem, 7vw, 6.7rem)/.9 var(--serif); letter-spacing: -.05em; }
.americana-band h2 em { display: block; color: #2b1710; font-weight: normal; }
.americana-band p { max-width: 31rem; font-size: 1.05rem; }
.americana-band .button { border-color: #fff7ef; margin-top: 1rem; }

.section--experience { padding-block: clamp(3.5rem, 5.5vw, 5.25rem); }
.story-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2.5rem, 5vw, 5rem); }
.story-statement { margin: 0; font: clamp(2rem, 3.8vw, 3.6rem)/1.08 var(--serif); letter-spacing: -.035em; }
.story-copy { max-width: 42rem; }
.story-copy p { margin: 0 0 1.2rem; color: var(--paper-soft); font-size: 1.02rem; }
.qualities { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: 2rem; }
.qualities span { border: 1px solid var(--line); padding: .55rem .75rem; color: rgba(238,232,223,.74); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.voice-qualities { margin-top: 2rem; }
.section--paper .voice-qualities span { border-color: rgba(17,16,15,.22); color: rgba(17,16,15,.68); }

.contact { display: grid; grid-template-columns: 1.2fr .8fr; gap: 4rem; align-items: end; }
.contact h2 { margin: 0; font: normal clamp(3.4rem, 8vw, 7.6rem)/.9 var(--serif); letter-spacing: -.055em; }
.contact h2 em { color: var(--copper-bright); font-weight: 400; }
.contact-panel { border-top: 1px solid var(--line); }
.contact-group-label { margin: 0; padding: 1.25rem 0 .45rem; color: var(--copper-bright); font-size: .75rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.contact-group-label--profiles { padding-top: 1.5rem; }
.contact-link { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.contact-link span:last-child { color: rgba(238,232,223,.55); }
.contact-link:hover span:first-child { color: var(--copper-bright); }
.contact-link--secondary { font-size: .85rem; opacity: .72; }

.footer { border-top: 1px solid var(--line); padding: 1.4rem max(1.5rem, calc((100vw - var(--max))/2)); display: flex; justify-content: space-between; gap: 1rem; color: rgba(238,232,223,.48); font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; }

.inner-page .site-header { position: relative; }
.inner-page .nav { border-color: rgba(17,16,15,.18); }
.inner-page { background: var(--paper); color: var(--ink); }
.americana-hero { padding: clamp(5rem, 9vw, 8rem) max(1.5rem, calc((100vw - var(--max))/2)) 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.americana-hero h1 { margin: 0; font: normal clamp(4rem, 9vw, 8.5rem)/.85 var(--serif); letter-spacing: -.06em; }
.americana-hero h1 em { color: var(--copper); font-weight: normal; }
.americana-hero p { max-width: 34rem; color: rgba(17,16,15,.66); font-size: 1.08rem; }
.americana-media { background: #0a0908; padding: 1rem; box-shadow: 1.2rem 1.2rem 0 #cbb8a7; }
.americana-media video { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.americana-audio { margin-top: 1.2rem; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; color: var(--paper); }
.americana-audio .play { border-color: var(--paper); color: var(--paper); }
.americana-audio .play:hover, .americana-audio .play:focus-visible, .americana-audio .play[aria-pressed='true'] { background: var(--paper); color: var(--ink); }
.americana-audio h2 { margin: 0; font: 1.25rem var(--serif); }
.americana-audio p { margin: .1rem 0 0; color: rgba(238,232,223,.58); font-size: .75rem; }
.inner-page .footer { background: var(--ink); color: rgba(238,232,223,.48); }

@media (max-width: 840px) {
  .nav-links { gap: .85rem; font-size: .7rem; }
  .nav-links a:not(.nav-cta):not(.nav-utility) { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 8rem; }
  .hero h1 { font-size: clamp(4rem, 22vw, 7.4rem); }
  .hero-portrait { width: 84%; max-width: 25rem; margin-top: 1.5rem; justify-self: center; }
  .section-head, .reel-layout, .americana-band, .story-grid, .contact, .americana-hero { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .work-card { min-height: 11rem; }
  .contact { align-items: start; }
  .americana-hero { gap: 2.5rem; }
  .materials-head { grid-template-columns: 1fr; gap: .7rem; }
  .materials-links { grid-template-columns: 1fr 1fr; }
  .materials-links a:nth-child(2) { border-right: 0; }
  .materials-links a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .materials-links--three a:nth-child(3) { grid-column: 1 / -1; border-right: 0; }
}

@media (max-width: 520px) {
  .nav { width: calc(100% - 2rem); }
  .wordmark { letter-spacing: .1em; }
  .wordmark-mark { flex-basis: 1.8rem; width: 1.8rem; height: 1.8rem; margin-right: .65rem; font-size: .7rem; }
  .hero { padding-inline: 1rem; }
  .hero h1 { letter-spacing: -.075em; }
  .hero h1 span { margin-left: .18em; }
  .hero-portrait { width: 92%; max-width: 23rem; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-actions .button:last-child { grid-column: 1 / -1; }
  .section, .americana-hero { padding-inline: 1rem; }
  .materials { padding: 3rem 1rem; }
  .materials-links a { min-height: 5.7rem; padding: 1rem; }
  .materials-links span { font-size: 1rem; }
  .range-notes { grid-template-columns: 1fr; gap: .9rem; }
  .demo { grid-template-columns: 3rem 1fr auto; gap: .75rem; }
  .demo h3 { font-size: 1.25rem; }
  .demo p { font-size: .82rem; }
  .contact-link { align-items: baseline; font-size: .84rem; }
  .contact-link span:last-child { text-align: right; font-size: .72rem; }
  .footer { padding-inline: 1rem; flex-direction: column; }
}

@media (max-width: 350px) {
  .hero-actions .button { padding-inline: .7rem; font-size: .66rem; }
}