/* ==========================================================================
   AWESTRUCK NIGERIA LTD — foundation
   Tokens, reset, editorial type scale, buttons, forms.
   ========================================================================== */

:root {
  /* --- surface ------------------------------------------------------ */
  --ink:            #0A0B0C;
  --charcoal:       #121417;
  --charcoal-2:     #191C21;
  --charcoal-3:     #23272E;
  --concrete:       #8B8D91;
  --concrete-dim:   #5C6067;
  --concrete-light: #C2C3C2;
  --warm-white:     #F2EEE7;
  --paper:          #E7E2D8;
  --paper-2:        #DAD4C7;

  /* --- accent ------------------------------------------------------- */
  /* Champagne carries the luxury register; green is the brand itself,
     sampled from the Awestruck mark, and is used for anything to do with
     availability, confirmation and the marketplace. */
  --champagne:      #C8A46A;
  --champagne-hi:   #E0C48F;
  --champagne-dim:  #8A7145;
  --earth:          #6E5B48;
  --earth-dim:      #3A3128;

  --green:          #0A714B;   /* the Awestruck mark */
  --green-hi:       #16A46B;
  --green-lift:     #35C98C;   /* legible on charcoal */
  --green-dim:      #07422C;
  --green-tint:     rgba(22, 164, 107, 0.12);
  --green-rule:     rgba(22, 164, 107, 0.34);
  --brand-green:    var(--green);

  /* --- state -------------------------------------------------------- */
  --available:      var(--green-lift);
  --reserved:       #C8A46A;
  --sold:           #7C4A4A;
  --ok:             var(--green-lift);
  --warn:           #D9A441;
  --bad:            #C0645A;

  /* --- semantic ----------------------------------------------------- */
  --bg:             var(--ink);
  --fg:             var(--warm-white);
  --muted:          var(--concrete);
  --rule:           rgba(242, 238, 231, 0.13);
  --rule-strong:    rgba(242, 238, 231, 0.28);

  /* --- type --------------------------------------------------------- */
  --f-display: "Archivo", "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body:    "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  /* fluid display scale */
  /* 9.4vw keeps the longest hero line (WHAT OTHERS) inside the gutters at
     every width; anything larger overflows below about 700px. */
  --t-mega:  clamp(2.1rem, 9.4vw, 12.5rem);
  --t-xxl:   clamp(2.25rem, 8.2vw,  8.5rem);
  --t-xl:    clamp(1.9rem,  5.6vw,  5rem);
  --t-lg:    clamp(1.5rem,  3.4vw,  2.75rem);
  --t-md:    clamp(1.15rem, 1.9vw,  1.5rem);
  --t-body:  clamp(0.98rem, 1.05vw, 1.09rem);
  --t-sm:    0.85rem;
  --t-xs:    0.72rem;

  /* --- rhythm ------------------------------------------------------- */
  --gut:     clamp(1.25rem, 4vw, 4.5rem);
  --sec:     clamp(5rem, 12vh, 11rem);
  --maxw:    1680px;
  --readw:   62ch;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);

  --nav-h:   clamp(62px, 7vh, 84px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;               /* Lenis owns scrolling */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.62;
  font-weight: 380;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

::selection { background: var(--champagne); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}

/* Scrollbar — thin and in palette; a default bright bar breaks the film. */
* { scrollbar-width: thin; scrollbar-color: var(--charcoal-3) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--charcoal-3); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--concrete-dim); }

/* ==========================================================================
   TYPOGRAPHY — enormous, editorial, tight
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

.t-mega { font-size: var(--t-mega); line-height: 0.84; letter-spacing: -0.045em; }
.t-xxl  { font-size: var(--t-xxl);  line-height: 0.86; letter-spacing: -0.04em; }
.t-xl   { font-size: var(--t-xl);   line-height: 0.9;  letter-spacing: -0.032em; }
.t-lg   { font-size: var(--t-lg);   line-height: 1.02; letter-spacing: -0.024em; }
.t-md   { font-size: var(--t-md);   line-height: 1.3;  letter-spacing: -0.01em; font-weight: 600; }

.upper { text-transform: uppercase; }

/* Technical label — the engineering voice of the site. */
.label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 500;
  display: inline-block;
}
.label--muted { color: var(--concrete-dim); }
.label--plain { color: var(--concrete); }
.label--green { color: var(--green-lift); }

.index-mark {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  color: var(--concrete-dim);
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: var(--concrete-light);
  max-width: var(--readw);
  font-weight: 350;
}

p { margin: 0 0 1.1em; max-width: var(--readw); }
p:last-child { margin-bottom: 0; }

.muted { color: var(--muted); }
.gold  { color: var(--champagne); }
.green { color: var(--green-lift); }

/* Flash messages, shared by the site and the admin. */
.flashes { display: grid; gap: 0.6rem; margin-bottom: 1.6rem; }
.flash {
  border: 1px solid var(--rule); border-left-width: 3px;
  padding: 0.9rem 1.2rem;
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: 0.1em; line-height: 1.8;
}
.flash--ok    { border-left-color: var(--ok);   color: var(--ok);   background: var(--green-tint); }
.flash--warn  { border-left-color: var(--warn); color: var(--warn); }
.flash--error { border-left-color: var(--bad);  color: var(--bad); }

/* A word that ships in outline instead of fill. The stroke carries a faint
   fill behind it so the word still reads when it lands on a dark frame. */
.hollow {
  color: rgba(200, 164, 106, 0.14);
  -webkit-text-stroke: 2px var(--champagne);
  paint-order: stroke fill;
}
@media (max-width: 700px) { .hollow { -webkit-text-stroke-width: 1.3px; } }

/* Display headings are set in caps across the site; keeping it here means the
   copy in the data files and page bodies stays readable as sentences. */
.section-head h2,
.editorial h2,
.finale h2,
.beat h2,
.phero h1,
.hero h1,
.drawer__body h2 { text-transform: uppercase; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: 1180px; }

.section { padding-block: var(--sec); position: relative; }
.section--flush { padding-block: 0; }
.section--paper {
  background: var(--paper);
  color: var(--ink);
  --rule: rgba(10,11,12,0.14);
  --rule-strong: rgba(10,11,12,0.3);
  --muted: #5C5A54;
}
.section--paper .lede { color: #4A4842; }
.section--paper .label--muted { color: #8C877C; }
.section--charcoal { background: var(--charcoal); }

.grid { display: grid; gap: var(--gut); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-12 { grid-template-columns: repeat(12, minmax(0,1fr)); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.section-head {
  display: grid;
  gap: 1.4rem;
  margin-bottom: clamp(2.5rem, 6vh, 5rem);
}
.section-head__meta {
  display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  --btn-fg: var(--warm-white);
  --btn-bd: var(--rule-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.02rem 1.9rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--champagne);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
  z-index: -1;
}
.btn:hover { color: var(--ink); border-color: var(--champagne); }
.btn:hover::after { transform: translateY(0); }
.btn .arw { transition: transform 0.45s var(--ease); }
.btn:hover .arw { transform: translateX(5px); }

.btn--solid { background: var(--champagne); color: var(--ink); border-color: var(--champagne); }
.btn--solid::after { background: var(--warm-white); }
.btn--solid:hover { color: var(--ink); border-color: var(--warm-white); }

/* The brand-green button. Used for the marketplace and for anything that
   confirms or completes, so green reads as "go" across the whole site. */
.btn--green { --btn-fg: var(--green-lift); --btn-bd: var(--green-rule); }
.btn--green::after { background: var(--green-hi); }
.btn--green:hover { color: #04180F; border-color: var(--green-hi); }
.btn--green.btn--solid {
  background: var(--green-hi); color: #04180F; border-color: var(--green-hi);
}
.btn--green.btn--solid::after { background: var(--green-lift); }

.btn--ghost { --btn-fg: var(--concrete); }
.btn--sm { padding: 0.72rem 1.25rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.section--paper .btn { --btn-fg: var(--ink); --btn-bd: rgba(10,11,12,0.28); }

/* Text link with a rule that wipes in. */
.tlink {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: 0.2em; text-transform: uppercase;
  padding-bottom: 0.4rem;
  background-image: linear-gradient(var(--champagne), var(--champagne));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.5s var(--ease), color 0.3s;
}
.tlink:hover { background-size: 100% 1px; color: var(--champagne); }

/* ==========================================================================
   FORMS
   ========================================================================== */

.field { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; }
.field > label {
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--concrete);
}
.field input, .field select, .field textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule-strong);
  padding: 0.85rem 0.1rem;
  font-size: 1rem;
  transition: border-color 0.35s var(--ease);
  border-radius: 0;
  appearance: none;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--champagne);
}
.field select { cursor: pointer; }
.field select option { background: var(--charcoal); color: var(--warm-white); }
.section--paper .field select option { background: var(--paper); color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--concrete-dim); }
.field--err input, .field--err select, .field--err textarea { border-bottom-color: #C0645A; }
.field__err { font-family: var(--f-mono); font-size: var(--t-xs); color: #C0645A; letter-spacing: 0.1em; }

.form-note {
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: 0.12em; color: var(--concrete-dim); line-height: 1.8;
}

.form-done {
  border: 1px solid var(--champagne);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.form-done h3 { font-size: var(--t-lg); margin-bottom: 0.9rem; }

/* ==========================================================================
   MOTION HELPERS
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
  transition-delay: var(--rd, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="line"] { transform: none; opacity: 1; }
[data-reveal="line"] .ln { display: block; overflow: hidden; }
[data-reveal="line"] .ln > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--rd, 0ms);
}
[data-reveal="line"].is-in .ln > span { transform: none; }

/* The wipe reveal covers the element with a panel that slides away, rather
   than clipping the element itself.
 *
 * That is not a style preference. clip-path: inset(0 100% 0 0) reduces the
 * element's intersection rectangle to nothing, so the IntersectionObserver
 * that is supposed to remove the clip reports isIntersecting: false and never
 * fires — the element hides itself and then blocks its own reveal. A covering
 * pseudo-element leaves the observed box intact, and lazy-loaded images inside
 * it still load.
 *
 * --wipe-cover has to match the section behind it; the section classes below
 * set it. */
:root { --wipe-cover: var(--ink); }
.section--charcoal { --wipe-cover: var(--charcoal); }
.section--paper { --wipe-cover: var(--paper); }

[data-reveal="wipe"] {
  opacity: 1; transform: none;
  position: relative; overflow: hidden;
}
[data-reveal="wipe"]::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: var(--wipe-cover);
  transform: translateX(0);
  transition: transform 1.1s var(--ease);
  transition-delay: var(--rd, 0ms);
  pointer-events: none;
}
[data-reveal="wipe"].is-in::after { transform: translateX(101%); }

/* ==========================================================================
   UTILITIES

   These exist so that no template needs a style="" attribute. The
   Content-Security-Policy this site sends does not allow inline styles — a
   nonce cannot cover a style attribute — so every one of them is a class.
   ========================================================================== */

.mt-xs { margin-top: 0.7rem; }
.mt-1  { margin-top: 1rem; }
.mt-2  { margin-top: 1.2rem; }
.mt-3  { margin-top: 1.4rem; }
.mt-4  { margin-top: 1.8rem; }
.mt-5  { margin-top: 2rem; }
.mt-6  { margin-top: 2.2rem; }
.mt-7  { margin-top: 2.4rem; }
.mt-8  { margin-top: 2.6rem; }
.mt-9  { margin-top: 3rem; }
.mb-1  { margin-bottom: 0.8rem; }
.mb-2  { margin-bottom: 1.6rem; }
.mb-3  { margin-bottom: 2rem; }
.mb-sec { margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.pt-tight { padding-top: clamp(2rem, 5vh, 3.5rem); }
.pb-sec { padding-bottom: var(--sec); }

.center-x { margin-inline: auto; }
.cta-center { justify-content: center; }
.align-start { align-items: start; }
.block { display: block; }
.fs-body { font-size: 1rem; }
.fs-price-sm { font-size: 1.1rem; }
.wrap-pre { white-space: pre-wrap; }

.span-3 { grid-column: span 3; }
.span-6 { grid-column: span 6; }
.ratio-wide { aspect-ratio: 16 / 10; }
.ratio-pano { aspect-ratio: 21 / 9; }

/* On the paper sections the champagne label needs a darker tone to pass
   contrast against the warm background. */
.label--paper { color: #8A7145; }
.muted-paper { color: #4A4842; }
.note-paper { color: #8C877C; }

.mt-35 { margin-top: 1.6rem; }
.mt-note { margin-top: 0.9rem; }
.tight-below { margin-bottom: -0.2rem; }
.help-under-check { margin: -1rem 0 1.4rem; }
.no-border { border: 0; }
.p-0 { padding: 0; }
.gap-cols { gap: 0 var(--gut); }
.form-narrow { max-width: 30rem; }
.field--wide { min-width: 220px; }
.inline-check { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.6rem; }
.upload-label { letter-spacing: 0.2em; text-transform: uppercase; color: var(--concrete); }
.panel--go { border-color: var(--green-rule); }
.panel--go > h2 { color: var(--green-lift); }

.btn--danger { color: var(--bad); border-color: rgba(192, 100, 90, 0.4); }

.sw--available { background: var(--available); }
.sw--reserved  { background: var(--reserved); }
.sw--sold      { background: var(--sold); }

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

.skip {
  position: fixed; top: 0; left: 0; z-index: 999;
  background: var(--champagne); color: var(--ink);
  padding: 0.8rem 1.2rem; transform: translateY(-110%);
}
.skip:focus { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-reveal="line"] .ln > span { transform: none !important; }
  /* Nothing should sit over the content when motion is off. */
  [data-reveal="wipe"]::after { display: none !important; }
}

@media (max-width: 900px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0,1fr); }
  .g-12 { grid-template-columns: repeat(6, minmax(0,1fr)); }
}