:root {
  /* 60 / 30 / 10 Colour System — Forest Botanical (OKLCH calculated) */
  --ground:#e4eae3;
  --surface:#d5dcd4;
  --surface-2:#c2cac1;
  --line:#a0a79f;
  --ink-soft:#4a4f49;
  --ink:#272a27;
  --accent:#a86515;
  --accent-ink:#fff;

  /* Status and Focus Tokens */
  --focus-ring:#a86515;
  --error:#8f2218;
  --error-bg:#f0dcda;
  --success:#20532c;
  --success-bg:#dceade;

  /* Typography Families */
  --ruje-d6a:'Syne', 'Syne Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ruje-ca3:'Spectral', 'Spectral Fallback', Georgia, 'Times New Roman', serif;
  --ruje-7a3:'JetBrains Mono', 'JetBrains Mono Fallback', 'SF Mono', Consolas, Menlo, monospace;

  --text-display:clamp(2.1rem, 5vw + 1rem, 3.8rem);
  --text-h1:clamp(1.85rem, 3.8vw + 0.8rem, 3.1rem);
  --text-h2:clamp(1.45rem, 2.6vw + 0.6rem, 2.2rem);
  --text-h3:clamp(1.2rem, 1.6vw + 0.5rem, 1.55rem);
  --text-lead:clamp(1.05rem, 0.8vw + 0.85rem, 1.25rem);
  --text-base:clamp(0.95rem, 0.3vw + 0.9rem, 1.0625rem);
  --text-small:0.875rem;
  --text-micro:0.75rem;

  /* Leading / Line Heights */
  --leading-tight:1.1;
  --leading-display:1.15;
  --leading-heading:1.25;
  --leading-body:1.65;
  --leading-snug:1.4;

  /* Tracking */
  --tracking-tight:-0.025em;
  --tracking-normal:0em;
  --tracking-wide:0.04em;
  --tracking-mono:-0.01em;

  --radius:0px;
  --radius-subtle:0px;

  /* Layout and Reading Measures */
  --measure-narrow:50ch;
  --measure-prose:65ch;
  --measure-wide:82ch;
  --container-max:1240px;
  --container-pad:clamp(1.25rem, 3.5vw, 3rem);

  /* Spacing Scale (Varied rhythm) */
  --space-tight:clamp(1.75rem, 3.5vw, 3rem);
  --space-normal:clamp(3rem, 6vw, 5.5rem);
  --space-generous:clamp(4.5rem, 8vw, 7.5rem);

  --border-hairline:1px solid var(--line);
  --border-thick:2px solid var(--ink);
  --border-accent:2px solid var(--accent);
  --shadow-subtle:0 1px 3px rgba(39, 42, 39, 0.08);
  --shadow-panel:0 4px 18px rgba(39, 42, 39, 0.12);

  --ease-snappy:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard:cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:160ms;
  --duration-base:240ms;
  --duration-deliberate:400ms;

  /* Fixed Shell Geometries */
  --dock-height:64px;
  --header-height-desk:104px;
  --header-condensed-height:64px;
}

*, *::before, *::after {
  box-sizing:border-box;
  margin:0;
  padding:0;

}

html {
  background-color:var(--ground);
  color:var(--ink);
  font-family:var(--ruje-ca3);
  font-size:16px;
  line-height:var(--leading-body);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-condensed-height) + 1.5rem);
}

body {
  background-color:var(--ground);
  color:var(--ink);
  font-family:var(--ruje-ca3);
  font-size:var(--text-base);
  line-height:var(--leading-body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-bottom:var(--dock-height);
  overflow-x:hidden;
  position:relative;
}

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

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

@media (max-width: 48rem) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']),
  select, textarea {
    font-size:16px !important;
  }
}

/* Media Elements */
img, picture, svg, video {
  display:block;
  max-width:100%;
  height:auto;
}

/* Typography Base */
h1, h2, h3, h4, h5, h6 {
  font-family:var(--ruje-d6a);
  font-weight:800;
  color:var(--ink);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-tight);
  text-wrap:balance;
  margin:0;
}

h1 {
  font-size:var(--text-h1);
  line-height:var(--leading-tight);
  letter-spacing:-0.03em;
}

h2 {
  font-size:var(--text-h2);
  line-height:var(--leading-display);
}

h3 {
  font-size:var(--text-h3);
}

p {
  margin:0;
  max-width:var(--measure-prose);
  color:var(--ink);
}

p + p {
  margin-top:1.25rem;
}

.lede {
  font-size:var(--text-lead);
  line-height:var(--leading-snug);
  color:var(--ink);
  max-width:var(--measure-prose);
}

.caption, .meta {
  font-family:var(--ruje-7a3);
  font-size:var(--text-micro);
  letter-spacing:var(--tracking-mono);
  color:var(--ink-soft);
  text-transform:uppercase;
}

code, kbd, samp, pre, .mono, .spec-code {
  font-family:var(--ruje-7a3);
  font-size:0.9em;
  font-feature-settings:'tnum' 1, 'zero' 1;
}

.numeral, .price-display, .spec-value {
  font-variant-numeric:tabular-nums;
  font-family:var(--ruje-7a3);
}

/* Links and Anchors */
a {
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color var(--duration-fast) var(--ease-standard),
              text-decoration-color var(--duration-fast) var(--ease-standard);
}

a:hover {

  color:var(--accent);
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}

/* Accessibility Skip Link */
.skip-link {
  position:absolute;
  top:-100px;
  left:1rem;
  z-index:10000;
  background:var(--ink);
  color:var(--ground);
  padding:0.75rem 1.5rem;
  font-family:var(--ruje-7a3);
  font-size:var(--text-small);
  text-transform:uppercase;
  letter-spacing:var(--tracking-wide);
  text-decoration:none;
  border:1px solid var(--accent);
  transition:top var(--duration-fast) var(--ease-snappy);
}

.skip-link:focus {
  top:1rem;
  outline:2px solid var(--accent);
}

/* Layout Utilities & Container */
.container {
  width:100%;
  max-width:var(--container-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
}

.container-narrow {
  width:100%;

  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
}

.editorial-column {
  max-width:var(--measure-prose);
  margin-left:auto;
  margin-right:auto;
}

.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;
}

/* Sprite Icon Base */
.icon {
  display:inline-block;
  width:1.25em;
  height:1.25em;
  stroke-width:0;
  stroke:currentColor;
  fill:currentColor;
  vertical-align:middle;
  flex-shrink:0;
}

.headline-lockup {
  position:relative;
  display:block;
  margin-bottom:2rem;
}

.headline-lockup__word-top {
  display:block;
  font-family:var(--ruje-d6a);
  font-size:clamp(1.5rem, 4.8vw + 0.65rem, 3.8rem);
  font-weight:800;
  line-height:0.95;
  letter-spacing:-0.03em;
  color:var(--ink);
  text-transform:uppercase;
  overflow-wrap:break-word;
  max-width:100%;
}

.headline-lockup__rule {
  display:block;
  width:100%;
  height:2px;
  background-color:var(--accent);
  margin:0.5rem 0;
  transform-origin:left center;
}

.headline-lockup__word-bottom {
  display:block;
  font-family:var(--ruje-d6a);
  font-size:clamp(1.5rem, 4.8vw + 0.65rem, 3.8rem);
  font-weight:800;
  line-height:0.95;
  letter-spacing:-0.03em;
  color:var(--ink);
  padding-left:clamp(1rem, 5vw, 4rem);
  text-transform:uppercase;
  overflow-wrap:break-word;
  max-width:100%;
}

/* Data-Opening Hero Layout (Pure CSS Scroll-Driven Animation & Left-Weighted Crop) */
[data-opening] {
  position:relative;
  min-height:85vh;
  display:flex;
  align-items:center;
  background-color:var(--ground);
  border-bottom:var(--border-hairline);
  overflow:hidden;
}

.opening-frame {
  display:grid;
  grid-template-columns:1fr;
  width:100%;
  min-height:85vh;
  position:relative;
}

@media (min-width: 861px) {
  .opening-frame {
    grid-template-columns:1.15fr 0.85fr;
  }
}

.opening-frame__content {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(2.5rem, 6vw, 5rem) var(--container-pad);
  z-index:2;
  position:relative;
  max-width:680px;
}

.opening-frame__figure {
  position:relative;
  width:100%;
  height:100%;
  min-height:380px;
  overflow:hidden;
  background-color:var(--surface);
  border-left:var(--border-hairline);
}

.opening-frame__figure img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right 45%;
}

.opening-datum-line {
  display:block;
  height:2px;
  background-color:var(--accent);
  width:100%;
  margin:1.5rem 0 2rem 0;
  transform-origin:left center;
}

/* CSS Scroll-Driven Scene for Opening */
@supports (animation-timeline: view()) {
  @keyframes datumExpand {
    from {
      transform:scaleX(0.15);
      opacity:0.7;
    }
    to {
      transform:scaleX(1);
      opacity:1;
    }
  }

  .opening-datum-line {
    animation:datumExpand linear both;
    animation-timeline:view(block);
    animation-range:entry 0% cover 40%;
  }
}

@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;
  }
  .opening-datum-line {
    transform:scaleX(1) !important;
    opacity:1 !important;
  }
}