/* =====================================================
   ACC BASE — reset, global type, shared primitives.
   Loaded on every page after tokens.css.
===================================================== */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--acc-bg);
  color:var(--acc-charcoal);
  font-family:var(--font-primary);
  font-size:var(--type-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; }
img,svg,video{ display:block; max-width:100%; }
::selection{ background:var(--acc-charcoal); color:var(--acc-bg); }
:focus-visible{ outline:1px solid var(--acc-charcoal); outline-offset:5px; }

h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }

/* ---------- headings ---------- */
h1{ font-family:var(--font-primary); font-weight:600; font-size:var(--type-h1); line-height:1.2; }
h2{ font-family:var(--font-primary); font-weight:600; font-size:var(--type-h2); line-height:1.25; }
h3{ font-family:var(--font-primary); font-weight:600; font-size:var(--type-h3); line-height:1.3; }
.display{ font-family:var(--font-primary); font-weight:600; font-size:var(--type-display); line-height:1.15; }

/* ---------- body text ---------- */
.body-text{
  font-family:var(--font-primary);
  font-size:var(--type-body);
  line-height:1.8;
  color:var(--acc-charcoal);
  opacity:.82;
  font-weight:400;
}
.body-text--large{ font-size:var(--type-body-large); }
.body-text--small{ font-size:var(--type-body-small); }

/* ---------- accent / information type ---------- */
.eyebrow,
.section-label{
  font-family:var(--font-accent);
  font-size:var(--type-label);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--acc-stone);
  display:block;
}
.metadata{
  font-family:var(--font-accent);
  font-size:var(--type-metadata);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--acc-stone);
}

/* ---------- wordmark ---------- */
.wordmark{
  font-family:var(--font-wordmark);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
  text-decoration:none;
  color:inherit;
  white-space:nowrap;
}
.wordmark b,
.wordmark strong{ font-weight:600; }
.wordmark span{ font-weight:400; }

/* ---------- CTA / link treatment ---------- */
.btn{
  font-family:var(--font-accent);
  font-size:var(--type-cta);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  padding-bottom:3px;
  border:none;
  border-bottom:1px solid var(--acc-stone-line);
  background:none;
  color:var(--acc-charcoal);
  opacity:.8;
  cursor:pointer;
  display:inline-block;
  white-space:nowrap;
  transition:opacity var(--transition-standard) var(--ease),
             font-weight var(--transition-fast) ease,
             border-color var(--transition-standard) var(--ease);
}
.btn:hover{ font-weight:700; opacity:1; border-color:var(--acc-charcoal); }

.btn--on-dark{
  color:var(--acc-bg);
  border-color:rgba(var(--acc-bg-rgb),.4);
  opacity:.85;
}
.btn--on-dark:hover{ border-color:rgba(var(--acc-bg-rgb),.9); }

/* ---------- rule / divider — the threshold ---------- */
.threshold{
  background:transparent;
  height:clamp(56px, 6vw, 92px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.threshold-line{
  width:68px; height:1px;
  background:rgba(43,40,35,.55);
  transform:scaleX(0);
  transition:transform 1.15s var(--ease);
}
.threshold.in-view .threshold-line,
.threshold-line--static{ transform:scaleX(1); transition:none; }

/* ---------- scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal, .threshold-line, .media__ph{
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ---------- layout helpers ---------- */
.container{
  max-width:var(--max-content-width);
  margin:0 auto;
}
.section{ padding:var(--section-spacing) var(--margin); }
.px{ padding-left:var(--margin); padding-right:var(--margin); }
.mx{ margin-left:var(--margin); margin-right:var(--margin); }

/* =====================================================
   IMAGE PLACEHOLDER / MEDIA SYSTEM
   One component for every image slot on the site. Swap
   later: replace .media__ph with a real <img> carrying
   the same data-image filename, keep the aspect-ratio
   modifier so the composition doesn't shift.
===================================================== */
.media{
  position:relative;
  overflow:hidden;
  background:var(--acc-stone);
  display:block;
}
.media__ph{
  position:absolute; inset:0;
  background:
    linear-gradient(155deg, rgba(255,255,255,.08), rgba(0,0,0,.06)),
    var(--acc-stone);
  transition:transform 1s var(--ease);
}
.media__label{
  position:absolute; left:12px; bottom:10px;
  font-family:var(--font-accent);
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(var(--acc-bg-rgb),.82);
  pointer-events:none;
  max-width:calc(100% - 24px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
a .media:hover .media__ph,
.media--hoverable:hover .media__ph{ transform:scale(1.03); }

/* the real-photo counterpart to .media__ph — same fill/hover
   behavior, once a slot's placeholder is swapped for an <img>.
   Aspect ratio comes from the modifier class OR an inline
   style="aspect-ratio:W/H" on .media itself when preserving a
   photograph's native proportions matters more than matching
   the standard grid shapes. */
.media__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease);
}
a .media:hover .media__img,
.media--hoverable:hover .media__img{ transform:scale(1.03); }

/* aspect ratio modifiers — the only shapes the gallery
   system uses; see gallery.css for the duo/pano/three-up
   composition rules that arrange these. */
.media--hero{ aspect-ratio: 16/9; }
.media--wide{ aspect-ratio: 2/1; }
.media--pano{ aspect-ratio: 2.4/1; }
.media--h{ aspect-ratio: 3/2; }
.media--v{ aspect-ratio: 3/4; }
.media--portrait{ aspect-ratio: 4/5; }
.media--square{ aspect-ratio: 1/1; }
.media--full{ position:absolute; inset:0; }

/* alternate placeholder tones so adjacent cells read as
   distinct photographs rather than one flat color field */
.media--tone-1 .media__ph{ background-color:#C7B99F; }
.media--tone-2 .media__ph{ background-color:#B6AC98; }
.media--tone-3 .media__ph{ background-color:#A79C88; }
.media--tone-4 .media__ph{ background-color:#9C9280; }
.media--tone-5 .media__ph{ background-color:#847A6C; }
.media--tone-6 .media__ph{ background-color:#6B6459; }