:root {
   --ground: #e8dfd0;
   --surface: #dad0bf;
   --surface-2: #cabeab;
   --line: #a79c8a;
   --ink-soft: #534c3f;
   --ink: #2c2821;
   --accent: #b5542b;
   --accent-ink: #ffffff;
   --accent-hover: #9d431e;
   --accent-active: #823414;
   --line-soft: rgba(167, 156, 138, 0.45);
   --line-hairline: rgba(167, 156, 138, 0.65);
   --surface-translucent: rgba(218, 208, 191, 0.92);
   --ground-translucent: rgba(232, 223, 208, 0.94);
   --shadow-subtle: 0 4px 16px rgba(44, 40, 33, 0.05);

   --shadow-raised: 0 10px 28px rgba(44, 40, 33, 0.08);
   --shadow-modal: 0 20px 50px rgba(44, 40, 33, 0.16);

   --nula-8d3: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
   --nula-120: 'EB Garamond', 'EB Garamond Fallback', Garamond, Georgia, serif;
   --nula-a81: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;

   --text-hero: clamp(2.35rem, 5.2vw + 0.8rem, 4.25rem);
   --text-display: clamp(2rem, 3.8vw + 0.7rem, 3.35rem);
   --text-h1: clamp(1.85rem, 3vw + 0.6rem, 2.75rem);
   --text-h2: clamp(1.45rem, 2.1vw + 0.5rem, 2.15rem);
   --text-h3: clamp(1.2rem, 1.4vw + 0.4rem, 1.6rem);
   --text-h4: clamp(1.05rem, 0.8vw + 0.4rem, 1.25rem);
   --text-pullquote: clamp(1.75rem, 3.6vw + 0.7rem, 2.95rem);
   --text-body: clamp(1.0625rem, 0.3vw + 1rem, 1.2rem);
   --text-meta: clamp(0.8125rem, 0.2vw + 0.76rem, 0.875rem);
   --text-caption: clamp(0.875rem, 0.2vw + 0.82rem, 0.95rem);

   --leading-tight: 1.12;
   --leading-snug: 1.28;
   --leading-normal: 1.58;
   --leading-relaxed: 1.72;

   --measure-narrow: 46ch;
   --measure-main: 62ch;
   --measure-wide: 74ch;

   --container-max: 86rem;
   --container-reading: 74rem;
   --container-dense: 62rem;

   --space-3xs: 0.25rem;
   --space-2xs: 0.5rem;
   --space-xs: 0.75rem;
   --space-sm: 1.125rem;
   --space-md: 1.625rem;
   --space-lg: 2.5rem;
   --space-xl: 4rem;
   --space-2xl: 6rem;
   --space-3xl: 8.5rem;

   --rhythm-tight: clamp(3rem, 5vw, 4.5rem);
   --rhythm-open: clamp(5rem, 8vw, 7.5rem);

   --radius-xs: 2px;
   --radius-sm: 2px;
   --radius-md: 2px;
   --radius-lg: 2px;

   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
   --duration-fast: 140ms;
   --duration-mid: 260ms;

   --duration-slow: 420ms;

   --header-height: 5.5rem;
   --dock-height: 4.25rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
   scroll-behavior: smooth;
   scroll-padding-top: var(--header-height);
   background-color: var(--ground);

}

body {
   margin: 0;
   padding: 0;
   font-family: var(--nula-120);
   font-size: var(--text-body);
   line-height: var(--leading-normal);
   color: var(--ink);
   background-color: var(--ground);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   padding-bottom: calc(var(--dock-height) + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
   body { padding-bottom: 0; }
}

h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0;
   font-family: var(--nula-8d3);
   font-weight: 600;
   line-height: var(--leading-tight);
   color: var(--ink);
   letter-spacing: -0.015em;
   overflow-wrap: break-word;
   word-break: normal;
}

h1 {
   font-size: var(--text-h1);
   margin-bottom: var(--space-md);
   max-width: 22ch;
}

h2 {
   font-size: var(--text-h2);
   margin-bottom: var(--space-sm);
   max-width: 28ch;
}

h3 {
   font-size: var(--text-h3);
   margin-bottom: var(--space-xs);
   max-width: 34ch;
}

h4 {
   font-size: var(--text-h4);
   margin-bottom: var(--space-2xs);
   max-width: 40ch;
}

p {
   margin: 0 0 var(--space-md) 0;
   max-width: var(--measure-main);
}

p:last-child { margin-bottom: 0; }

p.lede {
   font-size: clamp(1.2rem, 0.7vw + 1.05rem, 1.45rem);
   line-height: var(--leading-snug);
   color: var(--ink);
   max-width: 54ch;
   margin-bottom: var(--space-lg);
}

a {
   color: inherit;
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
   text-decoration-color: var(--line);
   transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

a:hover {
   color: var(--accent);
   text-decoration-color: var(--accent);
}

a:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 3px;
   border-radius: var(--radius-xs);
}

@media (pointer: coarse) {
   .contact-info-block a,
   .margin-story a,
   .inquiry-card a,
   .editorial-margin a,
   .footer-facts a {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
   }
}

img,
svg,
picture {
   display: block;
   max-width: 100%;
   height: auto;
}

ul,
ol {
   margin: 0 0 var(--space-md) 0;
   padding-left: var(--space-lg);
   max-width: var(--measure-main);
}

li { margin-bottom: var(--space-2xs); }

li:last-child { margin-bottom: 0; }

hr {
   border: 0;
   border-top: 1px solid var(--line);
   margin: var(--space-xl) 0;
}

blockquote {
   margin: var(--space-lg) 0;
   padding: 0 0 0 var(--space-md);
   border-left: 2px solid var(--line);
   font-style: italic;
   color: var(--ink-soft);
}

table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--text-caption);
   line-height: var(--leading-normal);
   margin: var(--space-md) 0;
}

th,
td {
   padding: var(--space-xs) var(--space-sm);
   border-bottom: 1px solid var(--line);
   text-align: left;
   vertical-align: top;
}

th {
   font-family: var(--nula-a81);
   font-size: var(--text-meta);
   font-weight: 500;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--ink-soft);
}

code,
kbd,
samp,
pre {
   font-family: var(--nula-a81);
   font-size: 0.9em;
}

input,
button,
textarea,
select {
   font: inherit;
   color: inherit;
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']),
select,
button,
.btn,
.form-input,
.form-select {
   height: 48px;
   min-height: 48px;
   border-radius: var(--radius-sm);
   box-shadow: none;
}

main {
   flex: 1 0 auto;
   position: relative;
}

.skip-link {
   position: absolute;
   top: -100px;
   left: var(--space-sm);
   background-color: var(--accent);
   color: var(--accent-ink);
   padding: var(--space-xs) var(--space-md);
   z-index: 1000;
   font-family: var(--nula-a81);
   font-size: var(--text-meta);
   font-weight: 500;
   text-decoration: none;
   border-radius: var(--radius-sm);
   transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus { top: var(--space-sm); }

.icon {
   width: 1.25rem;
   height: 1.25rem;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   flex-shrink: 0;
}

.visually-hidden {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
}

.tabular-num {
   font-family: var(--nula-a81);
   font-feature-settings: 'tnum' 1, 'onum' 0;
}

.site-container {
   width: 100%;
   max-width: var(--container-max);
   margin-left: auto;
   margin-right: auto;
   padding-left: clamp(1.25rem, 3.5vw, 3rem);
   padding-right: clamp(1.25rem, 3.5vw, 3rem);
}

.editorial-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--space-md);
   margin-top: var(--space-lg);
   margin-bottom: var(--space-xl);
}

@media (min-width: 1024px) {
   .editorial-layout {
      grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
      justify-content: space-between;
      align-items: start;
      gap: var(--space-2xl);
   }
}

.editorial-main { min-width: 0; }

.editorial-margin {
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
}

@media (max-width: 1023px) {
   .editorial-margin {
      margin-top: var(--space-xs);
      padding-left: var(--space-md);
      border-left: 1px solid var(--line-hairline);
   }
}

@media (min-width: 1024px) {
   .editorial-margin {
      border-left: 1px solid var(--line-hairline);
      padding-left: var(--space-md);
      padding-top: var(--space-3xs);
   }
}

.margin-note {
   font-size: var(--text-caption);
   line-height: var(--leading-snug);
   color: var(--ink-soft);
   max-width: 32ch;
}

.margin-note strong {
   display: block;
   font-family: var(--nula-a81);
   font-size: var(--text-meta);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--ink);
   margin-bottom: var(--space-3xs);
}

.margin-figure { margin: var(--space-xs) 0; }

.margin-figure img {
   border-radius: var(--radius-xs);
   border: 1px solid var(--line);
}

.margin-caption {
   font-size: var(--text-meta);
   line-height: 1.35;
   color: var(--ink-soft);
   margin-top: var(--space-3xs);
}

.editorial-break {
   grid-column: 1 / -1;
   width: 100%;
   margin: var(--space-xl) 0;
}

.editorial-break img {
   width: 100%;
   height: auto;
   border-radius: var(--radius-xs);
   border: 1px solid var(--line);
}

.pull-quote-spread {
   padding: var(--space-2xl) 0;
   margin: var(--space-xl) 0;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
}

.pull-quote-text {
   font-family: var(--nula-8d3);
   font-size: var(--text-pullquote);
   line-height: 1.18;
   font-weight: 500;
   color: var(--ink);
   max-width: 34ch;
   margin-bottom: var(--space-md);
   letter-spacing: -0.01em;
}

.pull-quote-cite {
   display: block;
   font-family: var(--nula-a81);
   font-size: var(--text-meta);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--ink-soft);
}

[data-model-stage] {
   position: relative;
   width: 100%;
   aspect-ratio: 4 / 3;
   overflow: hidden;
   background-color: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius-xs);
}

[data-model-stage] [data-model-still] {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: opacity var(--duration-mid) ease;
}

[data-model-stage] [data-model-canvas] {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   display: block;
   touch-action: pan-y;
}

[data-model-stage][data-model-live] [data-model-still] { display: none !important; }

[data-opening] {
   position: relative;
   min-height: calc(100vh - var(--header-height));
   min-height: calc(100svh - var(--header-height));
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}