


:root {
  /* Ground & Surfaces */
  --ground:#c8903a;
  --surface:#b27b2b;
  --surface-dark:#845717;
  --surface-deep:#5a3a0e;
  --surface-light:#d9a44f;
  --surface-subtle:rgba(20, 17, 12, 0.08);


  --ink:#14110c;
  --ink-muted:#3d3221;
  --ink-faint:#5e4e35;
  --ink-inverse:#f7efe2;
  --ink-inverse-muted:#d9cbb6;


  --accent:#11231b;
  --accent-surface:#1e382c;
  --accent-bright:#e85d04;
  --accent-light:#244a3a;
  --focus-ring:#11231b;


  /* Structural Swiss Lines */
  --line:rgba(20, 17, 12, 0.24);
  --line-strong:rgba(20, 17, 12, 0.48);
  --line-solid:#14110c;
  --line-inverse:rgba(247, 239, 226, 0.22);
  --line-inverse-strong:rgba(247, 239, 226, 0.5);


  /* Fonts */
  --gogi-55e:"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gogi-e47:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gogi-24f:"Space Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;


  --text-xs:clamp(0.72rem, 0.7rem + 0.15vw, 0.8rem);
  --text-sm:clamp(0.82rem, 0.79rem + 0.2vw, 0.92rem);
  --text-base:clamp(0.96rem, 0.92rem + 0.25vw, 1.06rem);
  --text-md:clamp(1.1rem, 1.05rem + 0.35vw, 1.25rem);
  --text-lg:clamp(1.28rem, 1.18rem + 0.6vw, 1.55rem);
  --text-xl:clamp(1.6rem, 1.4rem + 1vw, 2.05rem);
  --text-2xl:clamp(2rem, 1.7rem + 1.6vw, 2.85rem);
  --text-3xl:clamp(2.5rem, 2rem + 2.5vw, 3.8rem);
  --text-display:clamp(3rem, 2.3rem + 3.8vw, 5.2rem);
  --text-colossal:clamp(3.6rem, 2.7rem + 5vw, 6.8rem);


  /* Line Heights */
  --leading-none:1.0;

  --leading-tight:1.15;
  --leading-snug:1.28;
  --leading-normal:1.55;
  --leading-loose:1.75;


  --tracking-tight:-0.03em;
  --tracking-snug:-0.015em;
  --tracking-normal:0;
  --tracking-wide:0.05em;
  --tracking-wider:0.12em;


  /* Geometry & Grid */
  --radius-none:0px;
  --border-width:1px;
  --border-heavy:2px;
  --border-block:4px;


  /* Spacing Scale */
  --space-3xs:0.25rem;
  --space-2xs:0.5rem;
  --space-xs:0.75rem;
  --space-sm:1rem;
  --space-md:1.5rem;
  --space-lg:2rem;
  --space-xl:clamp(2.5rem, 5vw, 3.75rem);
  --space-2xl:clamp(3.5rem, 7vw, 5.5rem);
  --space-3xl:clamp(4.5rem, 10vw, 8rem);


  /* Layout Containers */
  --container-max:1380px;
  --container-narrow:840px;
  --container-reading:65ch;
  --gutter:clamp(1.25rem, 4vw, 3rem);


  /* Motion Tokens */
  --ease-out-cubic:cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-cubic:cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-out-expo:cubic-bezier(0.19, 1, 0.22, 1);
  --duration-fast:140ms;
  --duration-base:220ms;
  --duration-slow:420ms;


  /* Elevation & Shadows */
  --shadow-flat:3px 3px 0 rgba(20, 17, 12, 0.95);
  --shadow-raised:6px 6px 0 rgba(20, 17, 12, 0.95);
  --shadow-high:10px 10px 0 rgba(20, 17, 12, 0.95);


  /* Touch Minimum */
  --touch-target:44px;
}



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


html {
  font-size:16px;
  line-height:var(--leading-normal);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  background-color:var(--ground);
  color:var(--ink);
}


body {
  font-family:var(--gogi-e47);
  font-weight:400;
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--ink);
  background-color:var(--ground);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  position:relative;
}


/* Reset for controls only — NEVER body */
button,
input,
select,
textarea {
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
}


img,
picture,
video,
canvas,
svg {
  display:block;
  max-width:100%;
}


img {
  height:auto;
  font-style:italic;
  shape-margin:1rem;
}


table {
  border-collapse:collapse;
  border-spacing:0;
  width:100%;
}


ul,
ol { list-style:none; }


a {
  color:inherit;
  text-decoration-skip-ink:auto;
}



h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:var(--gogi-55e);
  font-weight:700;
  line-height:var(--leading-tight);
  color:var(--ink);
  text-wrap:balance;
  letter-spacing:var(--tracking-tight);
}


h1 {
  font-size:var(--text-3xl);
  line-height:var(--leading-none);
}


h2 { font-size:var(--text-2xl); }


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


h4 { font-size:var(--text-lg); }


h5 { font-size:var(--text-md); }


h6 {
  font-size:var(--text-base);
  text-transform:uppercase;
  letter-spacing:var(--tracking-wider);
}


p { max-width:var(--container-reading); }


p + p { margin-top:1.15em; }


strong,
b {
  font-weight:700;
  color:var(--ink);
}


small {
  font-size:var(--text-xs);
  line-height:var(--leading-normal);
}


code,
kbd,
samp,
pre {
  font-family:var(--gogi-24f);
  font-size:0.9em;
}


.verb-opener {
  font-family:var(--gogi-55e);
  font-weight:700;
  font-size:var(--text-display);
  line-height:var(--leading-none);
  letter-spacing:var(--tracking-tight);
  color:var(--ink);
  margin-bottom:var(--space-sm);
  display:block;
}


.verb-opener--lg { font-size:var(--text-colossal); }


.verb-lead {
  font-family:var(--gogi-e47);
  font-size:var(--text-lg);
  line-height:var(--leading-snug);
  color:var(--ink-muted);
  max-width:58ch;
  margin-bottom:var(--space-lg);
}


.verb-lead--tight { margin-bottom:var(--space-sm); }


.verb-desc {
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--ink);
  max-width:54ch;
}


.meta-label {
  font-family:var(--gogi-24f);
  font-size:var(--text-xs);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-wider);
  text-transform:uppercase;
  color:var(--ink-muted);
}


.meta-label--accent {
  color:var(--accent);
  font-weight:700;
}


.meta-label--orange {
  color:var(--accent-bright);
  font-weight:700;
}


.price-tag {
  font-family:var(--gogi-24f);
  font-weight:700;
  font-size:var(--text-base);
  letter-spacing:var(--tracking-snug);
}



.page-wrapper {
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}


.site-main {
  flex:1 0 auto;
  width:100%;
}


.container {
  width:100%;
  max-width:var(--container-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}


.container--narrow { max-width:var(--container-narrow); }


.container--flush {
  padding-left:0;
  padding-right:0;
}


/* Section Shell */
.section {
  padding-top:var(--space-2xl);
  padding-bottom:var(--space-2xl);
  border-bottom:var(--border-width) solid var(--line);
  position:relative;
}


.section--hero {
  padding-top:var(--space-xl);
  padding-bottom:var(--space-2xl);
}


.section--sm {
  padding-top:var(--space-lg);
  padding-bottom:var(--space-lg);
}


.section--contrast { background-color:var(--surface); }


.section--dark {
  background-color:var(--accent);
  color:var(--ink-inverse);
  border-bottom-color:var(--line-inverse);
}


.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark strong { color:var(--ink-inverse); }


.section--dark .verb-opener { color:var(--ink-inverse); }


.section--dark .verb-lead { color:var(--ink-inverse-muted); }


.section--dark .meta-label { color:var(--ink-inverse-muted); }


/* Full-bleed Bands Between Verbs */
.full-bleed-band {
  width:100%;
  margin:var(--space-2xl) 0;
  position:relative;
  overflow:hidden;
  border-top:var(--border-width) solid var(--line);
  border-bottom:var(--border-width) solid var(--line);
}


.full-bleed-band img {
  width:100%;
  height:clamp(260px, 42vw, 560px);
  object-fit:cover;
  object-position:center;
  display:block;
}


.full-bleed-band__caption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:var(--space-sm) var(--gutter);
  background:rgba(20, 17, 12, 0.88);
  color:var(--ink-inverse);
  font-family:var(--gogi-24f);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-wide);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-sm);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}


/* Swiss Column System & Modular Grid */
.swiss-grid {

  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--space-md);
  width:100%;
}


.swiss-grid--ruled {
  border-top:var(--border-width) solid var(--line);
  border-bottom:var(--border-width) solid var(--line);
}


.swiss-grid--dense { gap:0; }


.swiss-col-12 { grid-column: span 12 / span 12; }
.swiss-col-8 { grid-column: span 8 / span 8; }
.swiss-col-7 { grid-column: span 7 / span 7; }
.swiss-col-6 { grid-column: span 6 / span 6; }
.swiss-col-5 { grid-column: span 5 / span 5; }
.swiss-col-4 { grid-column: span 4 / span 4; }
.swiss-col-3 { grid-column: span 3 / span 3; }


@media (max-width: 1024px) {
  .swiss-col-8,
  .swiss-col-7 { grid-column: span 12 / span 12; }
  .swiss-col-5,
  .swiss-col-4 { grid-column: span 6 / span 6; }
  .swiss-col-3 { grid-column: span 6 / span 6; }
}


@media (max-width: 768px) {
  .swiss-col-6,
  .swiss-col-5,
  .swiss-col-4,
  .swiss-col-3 { grid-column: span 12 / span 12; }
}


/* Single Narrow Column for Single-Verb Opener Composition */
.verb-column {
  max-width:58ch;
  margin-right:auto;
  position:relative;
}



.icon {
  width:1.15em;
  height:1.15em;
  fill:currentColor;
  vertical-align:-0.15em;
  display:inline-block;
  flex-shrink:0;
}


.icon--sm {
  width:0.9em;
  height:0.9em;
}


.icon--lg {
  width:1.5em;
  height:1.5em;
}


.icon--xl {
  width:2em;
  height:2em;
}



.skip-link {
  position:absolute;
  top:-100px;
  left:var(--space-sm);
  background-color:var(--accent);
  color:var(--ink-inverse);
  padding:var(--space-xs) var(--space-md);
  font-family:var(--gogi-24f);
  font-size:var(--text-sm);
  font-weight:700;
  text-decoration:none;
  z-index:9999;
  border:var(--border-heavy) solid var(--accent-bright);
  transition:top var(--duration-fast) var(--ease-out-cubic);
}


.skip-link:focus-visible {
  top:var(--space-sm);
  outline:3px solid var(--accent-bright);
  outline-offset:2px;
}


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



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


  .self-drawing-svg path,
  .self-drawing-svg polyline,
  .self-drawing-svg line { stroke-dashoffset:0 !important; }
}
