:root {
  --ink:#182019; --ink-soft:#243027; --paper:#f3eee2; --paper-deep:#e6ddcc;
  --copper:#a96947; --copper-light:#c58a64; --muted:#626860;
  --hairline:rgba(24,32,25,.27); --hairline-light:rgba(243,238,226,.23);
  --serif:Georgia,"Times New Roman",serif; --sans:Inter,"Helvetica Neue",Arial,sans-serif;
}
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
h1,h2,h3 { margin:0; font-family:var(--serif); font-weight:400; }

.masthead { min-height:82px; padding:0 4.5vw; display:flex; justify-content:space-between; align-items:center; gap:2rem; color:var(--paper); background:var(--ink); border-bottom:1px solid var(--hairline-light); }
.dv-wordmark { color:var(--paper); font-family:var(--serif); font-size:1.45rem; letter-spacing:-.025em; text-decoration:none; }
.parent-link { color:rgba(243,238,226,.62); font-size:.76rem; font-weight:700; letter-spacing:.11em; text-decoration:none; text-transform:uppercase; }
.parent-link span { margin-left:.4rem; color:var(--copper-light); }
.parent-link .parent-long { margin-left:0; color:inherit; }
.parent-short { display:none; }
.eyebrow,.context-number,.demo-index { margin:0; color:var(--copper); font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }

.hero { min-height:calc(100vh - 82px); padding:clamp(3.4rem,5vw,5.5rem) 6vw clamp(2.2rem,4vw,4rem); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:1fr auto; column-gap:2vw; row-gap:clamp(2.4rem,4vw,4.5rem); color:var(--paper); background:var(--ink); }
.hero-copy { grid-column:2/10; align-self:center; }
.hero-copy .eyebrow { color:var(--copper-light); }
.hero-copy .eyebrow span { margin-left:.8rem; color:rgba(243,238,226,.52); }
.hero h1 { max-width:12ch; margin-top:1.15rem; font-size:clamp(3.6rem,6.2vw,7rem); line-height:.93; letter-spacing:-.052em; text-wrap:balance; }
.introduction { max-width:46ch; margin:1.65rem 0 0; color:rgba(243,238,226,.72); font-size:clamp(1.05rem,1.25vw,1.22rem); }
.identity { width:100%; grid-column:10/13; align-self:end; margin:0 0 .35rem; }
.identity img { width:100%; max-width:18rem; height:auto; display:block; object-fit:cover; border:1px solid var(--hairline-light); filter:saturate(.72) contrast(1.02); }
.identity>div { width:100%; max-width:18rem; display:grid; gap:.25rem; padding-top:.85rem; border-top:1px solid var(--copper-light); }
.identity p { margin:0; }
.identity p:first-child { font-family:var(--serif); font-size:1.2rem; }
.identity p:last-child { color:rgba(243,238,226,.6); font-size:.78rem; font-weight:700; letter-spacing:.1em; line-height:1.5; text-transform:uppercase; }
.demo-suite { grid-column:1/-1; display:grid; grid-template-columns:minmax(12rem,.72fr) minmax(0,1.28fr); gap:clamp(1.5rem,4vw,4rem); border-top:1px solid var(--hairline-light); }
.demo-heading { padding:.85rem 0 .75rem; }
.demo-heading .eyebrow { color:var(--copper-light); }
.demo-heading h2 { font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.demo-list { min-width:0; }
.demo { display:grid; grid-template-columns:minmax(12rem,.72fr) minmax(0,1.28fr); gap:2rem; align-items:center; padding:.78rem 0; border-top:1px solid var(--hairline-light); }
.demo-label { display:grid; grid-template-columns:3.5rem 1fr; gap:.75rem; align-items:center; }
.demo-label p { margin:0; }
.demo-label>div p:first-child { font-family:var(--serif); font-size:1.18rem; }
.demo-label>div p:last-child { color:rgba(243,238,226,.54); font-size:.78rem; }
.demo-index { color:var(--copper-light); }
.demo audio { display:none; }
.player-controls { display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.2rem; align-items:center; }
.play-control { position:relative; z-index:1; width:3.4rem; height:3.4rem; display:inline-grid; grid-template-columns:auto auto; place-content:center; gap:.35rem; padding:0; color:var(--ink); background:var(--copper-light); border:0; border-radius:50%; cursor:pointer; touch-action:manipulation; }
.is-playing .play-control { background:var(--paper); }
.has-error .play-control { color:var(--paper); background:transparent; border:1px solid var(--hairline-light); cursor:default; }
.play-symbol { font-size:.72rem; transform:translateX(1px); }
.play-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.timeline-block { min-width:0; }
.timeline { --progress:0%; width:100%; height:1.5rem; margin:0; background:transparent; cursor:pointer; appearance:none; }
.timeline::-webkit-slider-runnable-track { height:2px; background:linear-gradient(to right,var(--copper-light) 0 var(--progress),rgba(243,238,226,.28) var(--progress) 100%); }
.timeline::-webkit-slider-thumb { width:.8rem; height:.8rem; margin-top:-.34rem; appearance:none; border:2px solid var(--paper); border-radius:50%; background:var(--ink); }
.timeline::-moz-range-track { height:2px; background:rgba(243,238,226,.28); }
.timeline::-moz-range-progress { height:2px; background:var(--copper-light); }
.timeline::-moz-range-thumb { width:.65rem; height:.65rem; border:2px solid var(--paper); border-radius:50%; background:var(--ink); }
.time-row { display:flex; justify-content:space-between; margin-top:-.15rem; color:rgba(243,238,226,.55); font-size:.72rem; font-variant-numeric:tabular-nums; }

.contexts { display:grid; grid-template-columns:minmax(17rem,.8fr) minmax(0,1.2fr); gap:clamp(4rem,9vw,11rem); padding:clamp(5rem,9vw,9rem) 10vw 7rem 16vw; background:var(--paper-deep); border-top:1px solid var(--hairline); }
.contexts header { align-self:start; position:sticky; top:4rem; }
.contexts h2,.practice h2,.contact h2 { max-width:13ch; margin-top:1.25rem; font-size:clamp(2.7rem,4.7vw,5.1rem); line-height:1; letter-spacing:-.04em; text-wrap:balance; }
.context-list { margin:0; padding:0; list-style:none; }
.context-list li { display:grid; grid-template-columns:3.5rem minmax(0,1fr); gap:1.5rem; padding:2rem 0 2.3rem; border-top:1px solid var(--hairline); }
.context-list li:first-child { padding-top:0; border-top:0; }
.context-list h3 { max-width:24ch; font-size:clamp(1.75rem,2.5vw,2.7rem); line-height:1.08; letter-spacing:-.025em; }
.context-list li div p { max-width:43ch; margin:.9rem 0 0; color:var(--muted); }
.position { display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,.76fr); gap:clamp(4rem,9vw,11rem); padding:clamp(5rem,9vw,8rem) 16vw; background:var(--paper); }
.position h2 { max-width:14ch; margin-top:1.25rem; font-size:clamp(2.7rem,4.7vw,5.1rem); line-height:1; letter-spacing:-.04em; text-wrap:balance; }
.position-copy { align-self:end; }
.position-copy p { max-width:43ch; margin:0; color:var(--muted); font-size:1.08rem; }
.position-copy a { display:flex; justify-content:space-between; gap:2rem; margin-top:2rem; padding:.8rem 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); text-decoration:none; font-weight:650; }

.practice { display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,.82fr); gap:clamp(4rem,9vw,11rem); padding:clamp(5rem,9vw,8rem) 16vw; color:var(--paper); background:var(--ink-soft); }
.practice .eyebrow { color:var(--copper-light); }
.practice-heading>p:last-child { max-width:50ch; margin:1.8rem 0 0; color:rgba(243,238,226,.68); font-size:1.08rem; }
.specifications { margin:0; align-self:end; border-top:1px solid var(--paper); }
.specifications>div { display:grid; grid-template-columns:9rem minmax(0,1fr); gap:1.5rem; padding:1.3rem 0; border-bottom:1px solid var(--hairline-light); }
.specifications dt { color:var(--copper-light); font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.specifications dd { margin:0; }
.contact { display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,.76fr); gap:clamp(4rem,9vw,11rem); padding:clamp(5rem,9vw,8rem) 16vw; }
.contact-copy { align-self:end; }
.contact-copy>p { max-width:39ch; margin:0 0 2rem; color:var(--muted); font-size:1.08rem; }
.contact-link,.text-link { display:flex; justify-content:space-between; gap:2rem; padding:.8rem 0; border-top:1px solid var(--ink); text-decoration:none; font-weight:650; }
.contact-link { border-bottom:1px solid var(--ink); }
.text-link { margin-top:1.1rem; border-bottom:1px solid var(--hairline); }
footer { display:flex; justify-content:space-between; gap:3rem; padding:3.5rem 4.5vw; color:rgba(243,238,226,.68); background:var(--ink); font-size:.92rem; }
footer p { max-width:55ch; margin:0; }
footer a { color:var(--paper); text-underline-offset:.28em; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid var(--copper-light); outline-offset:5px; }

@media (max-width:980px) {
  .hero-copy { grid-column:1/9; }
  .identity { grid-column:9/13; }
  .demo-suite { grid-template-columns:1fr; }
  .demo-heading,.demo-list { grid-column:1; }
  .demo-heading { grid-template-columns:4rem 1fr; }
  .demo { grid-template-columns:minmax(13rem,.75fr) minmax(17rem,1.25fr); }
  .contexts,.position,.practice,.contact { padding-left:8vw; padding-right:8vw; }
}
@media (max-height:800px) and (min-width:701px) {
  .hero { padding-top:2.6rem; padding-bottom:1.8rem; row-gap:1.6rem; }
  .hero h1 { font-size:clamp(3.6rem,5.2vw,5rem); }
  .identity img,.identity>div { width:100%; max-width:13rem; }
  .demo-heading { padding:.55rem 0 .45rem; }
  .demo { padding:.4rem 0; }
}
@media (max-width:700px) {
  .masthead { min-height:70px; padding:0 1.25rem; }
  .parent-long { display:none; }
  .parent-short { display:inline; margin-left:0!important; color:inherit!important; }
  .hero { min-height:auto; grid-template-columns:1fr; grid-template-rows:auto; gap:2.8rem; padding:4.2rem 1.5rem 2.2rem; }
  .hero-copy,.identity,.demo-suite { grid-column:1; }
  .hero-copy .eyebrow span { display:block; margin:.4rem 0 0; }
  .hero h1 { max-width:10ch; font-size:clamp(3.25rem,15vw,4.55rem); }
  .introduction { margin-top:1.5rem; }
  .identity { display:grid; grid-template-columns:7.5rem 1fr; align-items:end; gap:1rem; margin:0; }
  .identity img { width:7.5rem; height:7.5rem; }
  .identity>div { width:100%; }
  .demo-heading { grid-template-columns:3.2rem 1fr; column-gap:.5rem; }
  .demo { grid-template-columns:1fr; gap:.7rem; padding:1rem 0; }
  .demo-label { grid-template-columns:2.5rem 1fr; }
  .contexts,.position,.practice,.contact { grid-template-columns:1fr; gap:3.5rem; padding:5rem 1.5rem; }
  .contexts header { position:static; }
  .contexts h2,.position h2,.practice h2,.contact h2 { font-size:clamp(2.5rem,11vw,3.8rem); }
  .context-list li { grid-template-columns:2.5rem minmax(0,1fr); gap:.7rem; }
  .specifications>div { grid-template-columns:1fr; gap:.45rem; }
  .contact-link { overflow-wrap:anywhere; }
  footer { flex-direction:column; gap:1.5rem; padding:3rem 1.5rem; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; } }