/* BOTTLE AURA — the bottle table lamp.
   One idea runs the whole page: --lit. The lamp is the only light source on
   this site. Switch it off and everything goes dark, because nothing here is
   lit by anything else. */

:root {
  /* Brand Strategy Booklet v2.5 Final, 4.2. Four colours, nothing else. */
  --ink: #000000;     /* Deep Onyx Black */
  --gold: #c8b680;    /* Prestige Gold */
  --white: #ffffff;   /* Aura White */
  --azul: #a3d1e1;    /* Clase Azul Blue — subtle accents only (5.1) */
  --rule: rgba(200, 182, 128, .28);
  --grey: rgba(255, 255, 255, .72);
  --dim: rgba(255, 255, 255, .40);

  /* Booklet 4.3. Canela, Chronicle Display, Suisse Int'l and Neue Haas
     Grotesk are commercial and unlicensed here, so each stack asks for the
     real face first and falls back to the closest free stand-in. */
  --display: "Canela", "Chronicle Display", "Cormorant Garamond", Didot, serif;
  --sans: "Suisse Int'l", "Neue Haas Grotesk Display Pro",
          "Helvetica Neue", Inter, Helvetica, Arial, sans-serif;

  --lit: 0;   /* the power. 0 = dark, 1 = the lamp is on. */
  --warm: 0;  /* per-section light pooling, multiplied by --lit */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto stops an HTML height attribute beating aspect-ratio */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--ink); padding: .75rem 1.25rem;
  font: 500 .8rem/1 var(--sans); letter-spacing: .12em;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- shared type ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400; line-height: 1.06; margin: 0;
  letter-spacing: -.01em;
  color: var(--gold);
}

.eyebrow {
  margin: 0 0 1.1rem;
  font-size: .75rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--azul);
}

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .95rem 1.7rem; border: 1px solid var(--gold); border-radius: 999px;
  color: var(--gold); background: transparent;
  font: 500 .78rem/1 var(--sans); letter-spacing: .18em;
  text-decoration: none; cursor: pointer;
  transition: background .35s ease, color .35s ease;
}
.btn:hover, .btn:focus-visible { background: var(--gold); color: var(--ink); }
.btn--solid { background: var(--gold); color: var(--ink); }
.btn--solid:hover, .btn--solid:focus-visible { background: transparent; color: var(--gold); }

/* the gaps that still need real content, marked rather than faked */
.placeholder {
  margin: 2.5rem auto 0; max-width: 46ch;
  padding: 1.5rem; border: 1px dashed var(--rule); border-radius: 3px;
  color: var(--dim); font-size: .8125rem; line-height: 1.7;
}
.placeholder::before {
  content: 'PLACEHOLDER — ' attr(data-need);
  display: block; margin-bottom: .6rem;
  color: var(--azul); letter-spacing: .18em; font-size: .625rem;
}
.tbc { color: var(--dim) !important; font-style: italic; }

/* ---------- the switch ---------- */

.power { background: none; border: 0; padding: 0; cursor: pointer; }

.power__plate {
  display: block; width: 46px; height: 72px;
  background: #f4f4f2; border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .08);
  padding: 7px 8px;
}
.power__rocker {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(#fff, #e6e6e2);
  border-radius: 2px;
  box-shadow: inset 0 -8px 10px -8px rgba(0, 0, 0, .45);
  transition: box-shadow .25s ease, background .25s ease;
}
.power[aria-pressed="true"] .power__rocker {
  background: linear-gradient(#e6e6e2, #fff);
  box-shadow: inset 0 8px 10px -8px rgba(0, 0, 0, .45);
}

/* the one in the hero sits exactly over the switch in the photograph */
.power--wall {
  position: absolute;
  left: 81.4%; top: 49%; width: 6.2%; height: 17%;
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(200, 182, 128, .9), 0 0 22px 6px rgba(200, 182, 128, .55);
  animation: findme 2.6s ease-in-out infinite;
}
@keyframes findme {
  0%, 100% { box-shadow: 0 0 0 2px rgba(200, 182, 128, .55), 0 0 14px 3px rgba(200, 182, 128, .3); }
  50%      { box-shadow: 0 0 0 2px rgba(200, 182, 128, 1),   0 0 26px 8px rgba(200, 182, 128, .7); }
}
body:not(.is-off) .power--wall { animation: none; box-shadow: none; }
/* the switch in the photograph is only ~20px wide on a phone, so widen the
   tap area without changing what is drawn */
.power--wall::after { content: ''; position: absolute; inset: -16px; }

.power--mini { opacity: .8; transition: opacity .3s ease; }
.power--mini:hover { opacity: 1; }
.power--mini .power__plate {
  width: 20px; height: 31px; padding: 3px;
  background: #d8d8d4; box-shadow: 0 0 0 1px rgba(200,182,128,.35);
}

.power--big {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1.25rem;
  margin-top: 2.5rem;
}
.power__word {
  font-size: .7rem; letter-spacing: .24em; color: var(--dim);
}

/* ---------- masthead ---------- */

.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1rem clamp(1.25rem, 4vw, 3rem);
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  opacity: 0; transition: opacity .5s ease;
}
.masthead.is-shown { opacity: 1; }
.masthead[hidden] { display: none; }
.masthead .wordmark img { width: 118px; }
.masthead nav { display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); }
.masthead nav a {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--grey); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
}
.masthead nav a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------- 1 · hero ---------- */

.hero {
  min-height: 100svh;
  display: grid; place-content: center; justify-items: center;
  gap: 1.5rem;
  padding: clamp(3rem, 8vh, 6rem) 1.25rem;
  text-align: center;
}

/* the photo is 1079x583. Capping the WIDTH by the height left over after the
   copy keeps the whole section inside one screen, and because the frame
   shrinks with the image the glow stays registered to the shade. */
.hero__stage {
  position: relative;
  width: min(92vw, 52rem);
  max-width: calc((100svh - 19rem) * 1.85);
}

/* the photograph is on white, so "off" is a hard crush to near-black and
   "on" restores it. The whole frame comes up with the lamp. */
.hero__lamp {
  width: 100%;
  filter:
    brightness(calc(.05 + .95 * var(--lit)))
    contrast(calc(1.3 - .3 * var(--lit)));
  transition: filter .9s cubic-bezier(.2, .7, .2, 1);
}

/* the warm spill from the shade once it is lit */
.hero__glow {
  position: absolute; left: 47.5%; top: 26%;
  width: 46%; aspect-ratio: 1; translate: -50% -50%;
  pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 214, 150, .55) 0%,
    rgba(255, 190, 110, .22) 30%,
    rgba(200, 182, 128, .07) 52%,
    transparent 70%);
  opacity: calc(var(--lit) * var(--lit));
  transform: scale(calc(.7 + .35 * var(--lit)));
  transition: opacity .9s ease, transform .9s ease;
}

.hero__cue {
  margin: 0; font-size: .7rem; letter-spacing: .3em; color: var(--gold);
  animation: cue 3s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
body:not(.is-off) .hero__cue { display: none; }

/* no text until the interaction has happened (WS 1.4.1) */
.hero__words {
  max-width: 34rem;
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s ease .35s, transform .8s ease .35s;
}
body:not(.is-off) .hero__words { opacity: 1; transform: none; }
body.is-off .hero__words { pointer-events: none; }
.hero__words h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.scroll-cue {
  margin: 2.25rem 0 0; font-size: .68rem; letter-spacing: .3em; color: var(--dim);
}

/* ---------- 2 · the rooms ---------- */

/* Each room is its own darkness. `--on` is that room's cord; the global
   `--lit` still overrules everything, so the master switch blacks out the
   whole stack no matter which cords have been pulled. */
.room {
  position: relative;
  min-height: 100svh;
  display: grid; align-content: center; justify-items: center;
  gap: clamp(1.5rem, 3.5vh, 2.5rem);
  padding: clamp(3.5rem, 8vh, 6rem) clamp(1.25rem, 5vw, 4rem);
  --on: 0;
}

/* square frames, so cap by height and the whole room fits one screen */
.room__frame {
  position: relative;
  width: min(94vw, 44rem);
  max-width: calc(100svh - 15rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--rule);
}

.room__frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter:
    brightness(calc(.05 + .95 * var(--on) * var(--lit)))
    saturate(calc(.25 + .75 * var(--on) * var(--lit)));
  transition: filter 1.1s cubic-bezier(.2, .7, .2, 1);
}

/* the warm spill, centred on that room's shade — set per room in the HTML */
.room__pool {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 45%),
    rgba(255, 208, 140, .34) 0%,
    rgba(255, 184, 104, .15) 24%,
    rgba(200, 182, 128, .04) 44%,
    transparent 62%);
  opacity: calc(var(--on) * var(--lit));
  transition: opacity 1.1s ease;
}

/* ---------- the pull cord ---------- */

.cord {
  position: absolute; top: 0; right: 11%;
  width: 30px; height: clamp(5rem, 26%, 9rem);
  background: none; border: 0; padding: 0; cursor: pointer;
  transform-origin: 50% 0;
  z-index: 4;
}
.cord__wire {
  position: absolute; left: 50%; top: 0; width: 1px; height: calc(100% - 22px);
  translate: -50% 0;
  background: linear-gradient(to bottom, rgba(200, 182, 128, .35), var(--gold));
}
.cord__bead {
  position: absolute; left: 50%; bottom: 0;
  width: 11px; height: 22px; translate: -50% 0;
  border-radius: 6px;
  background: linear-gradient(100deg, #8a7238, var(--gold) 45%, #efe0b8 60%, #8a7238);
  box-shadow: 0 0 12px 2px rgba(200, 182, 128, .45);
  transition: box-shadow .3s ease;
}
/* an unpulled cord breathes, so it reads as the thing to touch */
.room[data-on="0"] .cord__bead { animation: bead 2.8s ease-in-out infinite; }
@keyframes bead {
  0%, 100% { box-shadow: 0 0 10px 1px rgba(200, 182, 128, .35); }
  50%      { box-shadow: 0 0 20px 5px rgba(200, 182, 128, .8); }
}
.cord:hover .cord__bead { box-shadow: 0 0 22px 6px rgba(200, 182, 128, .9); }
.cord.is-pulled { animation: swing 1.1s cubic-bezier(.25, .8, .35, 1); }
@keyframes swing {
  0%   { rotate: 0deg; }
  18%  { rotate: 8deg; }
  42%  { rotate: -5.5deg; }
  64%  { rotate: 3deg; }
  82%  { rotate: -1.4deg; }
  100% { rotate: 0deg; }
}
/* the tug itself — the bead drops and springs back */
.cord.is-pulled .cord__bead { animation: tug .45s cubic-bezier(.3, .8, .4, 1); }
@keyframes tug { 0% { translate: -50% 0; } 35% { translate: -50% 13px; } 100% { translate: -50% 0; } }

/* ---------- the label under each room ---------- */

.room__label { text-align: center; max-width: 42rem; }
.room__n {
  margin: 0 0 .55rem;
  font-size: .64rem; letter-spacing: .28em; color: var(--azul);
}
.room__label h2 { font-size: clamp(1.4rem, 3.2vw, 2.3rem); margin-bottom: .55rem; }
.room__p { margin: 0; color: var(--grey); font-size: .93rem; }

/* the two headlines he still has to write, marked rather than invented */
.needs-copy {
  color: var(--dim) !important;
  border-bottom: 1px dashed var(--rule);
  display: inline-block; padding-bottom: .2rem;
}
.needs-copy::after {
  content: ' [' attr(data-need) ' needed]';
  font-family: var(--sans); font-size: .58rem; letter-spacing: .16em;
  color: var(--azul); vertical-align: middle;
}

@media (max-width: 860px) {
  .room__frame { max-width: calc(100svh - 20rem); }
  .cord { right: 7%; width: 44px; }
}

/* ---------- 5 · how it's made ---------- */

.craft {
  padding: clamp(5rem, 13vh, 9rem) clamp(1.25rem, 6vw, 5rem);
  text-align: center; border-top: 1px solid var(--rule);
}
.craft h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 3rem; }
.craft__steps {
  list-style: none; margin: 0 auto; padding: 0; max-width: 60rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.5rem;
}
.craft__steps li {
  display: grid; gap: .5rem; padding: 1.5rem .5rem;
  border-top: 1px solid var(--rule);
}
.craft__n { font-size: .7rem; letter-spacing: .2em; color: var(--azul); }
.craft__w {
  font-family: var(--display); font-size: 1.35rem; color: var(--gold);
}

/* ---------- 6 · the object ---------- */

.object {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
  padding: clamp(5rem, 13vh, 9rem) clamp(1.25rem, 6vw, 6rem);
  border-top: 1px solid var(--rule);
}

/* both product shots are on white, so they get a white plate — the booklet
   allows exactly two grounds and this is the other one */
.object__figure {
  position: relative; background: var(--white);
  border: 1px solid var(--rule); border-radius: 2px;
  aspect-ratio: 1; overflow: hidden; cursor: help;
}
.object__figure img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 6%;
  transition: opacity .55s ease, transform .55s ease;
}
.object__bottle { opacity: 0; transform: scale(1.04); }
.object__figure:hover .object__lamp,
.object__figure:focus-visible .object__lamp { opacity: 0; transform: scale(.97); }
.object__figure:hover .object__bottle,
.object__figure:focus-visible .object__bottle { opacity: 1; transform: none; }

.object__hint {
  position: absolute; left: 50%; bottom: 4%; translate: -50% 0;
  font-size: .6rem; letter-spacing: .2em; color: #8d8d8d;
  transition: opacity .3s ease;
}
.object__figure:hover .object__hint { opacity: 0; }

.object__body h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 1.1rem; }
.object__note { color: var(--grey); margin: 0 0 2rem; max-width: 42ch; }

.ledger { margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--rule); }
.ledger > div {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--rule);
}
.ledger dt {
  font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--azul); padding-top: .2rem;
}
.ledger dd { margin: 0; font-size: .9rem; color: var(--grey); }

/* ---------- 5 · pricing ---------- */

/* An almost empty screen. The number is the only thing on it, and per
   WS 1.4.5 it exists only while the lamp is on — switch off and the price
   goes with the light. Discovery, not demand. */
.pricing {
  min-height: 76svh;
  display: grid; align-content: center; justify-items: center;
  padding: clamp(4rem, 12vh, 8rem) 1.25rem;
  text-align: center;
  border-top: 1px solid var(--rule);
}
.pricing .eyebrow { margin-bottom: 2rem; }

.pricing__fig {
  font-family: var(--display);
  font-size: clamp(3.2rem, 11vw, 7rem);
  line-height: 1; margin: 0;
  color: var(--gold);
  opacity: var(--lit);
  transform: translateY(calc((1 - var(--lit)) * 10px));
  transition: opacity .9s ease, transform .9s ease;
}
.pricing__rule {
  display: block; width: 4rem; height: 1px; margin: 2.25rem 0 1.75rem;
  background: var(--gold);
  scale: var(--lit) 1;
  transition: scale .9s ease .1s;
}
.pricing__note {
  margin: 0; max-width: 34ch; color: var(--grey); font-size: .93rem;
  opacity: var(--lit); transition: opacity .9s ease .15s;
}
.pricing .btn { margin-top: 2.25rem; opacity: var(--lit); transition: opacity .9s ease .2s; }

/* ---------- 8 · social ---------- */

.social {
  padding: clamp(4.5rem, 12vh, 8rem) clamp(1.25rem, 6vw, 5rem);
  text-align: center;
  border-top: 1px solid var(--rule);
}
.social h2 { font-size: clamp(1.7rem, 3.8vw, 2.7rem); }
.social__lead { margin: .9rem 0 3rem; color: var(--grey); font-size: .95rem; }
.social__lead a {
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid rgba(200, 182, 128, .5);
}

/* columns, deliberately not a grid (WS 1.4.9) — posts stagger and the
   rhythm is uneven on purpose */
.social__wall {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 64rem;
  columns: 3; column-gap: 1.25rem;
}
.social__post {
  break-inside: avoid; margin: 0 0 1.25rem;
  height: var(--h, 13rem);
  border: 1px solid var(--rule);
  background:
    linear-gradient(135deg, rgba(200, 182, 128, .055), transparent 55%),
    var(--ink);
  opacity: calc(.35 + .65 * var(--lit));
  transition: opacity .8s ease, transform .5s ease, border-color .5s ease;
}
.social__post:hover {
  transform: translateY(-5px);
  border-color: rgba(200, 182, 128, .6);
}
/* every other column starts lower, so the wall never lines up */
.social__wall li:nth-child(3n+2) { margin-top: 2.25rem; }

@media (max-width: 860px) { .social__wall { columns: 2; } }
@media (max-width: 520px) { .social__wall { columns: 1; } }

/* ---------- 7 · authenticity ---------- */

.auth {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
  padding: clamp(5rem, 13vh, 9rem) clamp(1.25rem, 6vw, 6rem);
  border-top: 1px solid var(--rule);
}
.auth__frame { position: relative; }
.auth__frame img {
  width: 100%;
  /* kept low so the card's printed line stays in shadow */
  filter: brightness(calc(.16 + .5 * var(--lit))) contrast(1.15);
  transition: filter .8s ease;
}
/* the card's printed line is garbled AI lettering. Throwing that band out of
   focus is both the fix and how a real macro frame of this would look. */
.auth__frame::after {
  content: ''; position: absolute;
  left: 27%; top: 53%; width: 36%; height: 26%;
  backdrop-filter: blur(6px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 78%);
  pointer-events: none;
}

.auth__pool {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at 42% 42%,
    rgba(255, 210, 150, .26) 0%, rgba(255, 190, 120, .1) 30%, transparent 58%);
  opacity: var(--lit); transition: opacity .8s ease;
}
.auth__body h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); margin-bottom: 1.25rem; }
.auth__body p { color: var(--grey); margin: 0; max-width: 40ch; }

/* ---------- 8 · origin ---------- */

.about {
  padding: clamp(5rem, 14vh, 10rem) clamp(1.25rem, 6vw, 5rem);
  max-width: 60rem; margin-inline: auto; text-align: center;
  border-top: 1px solid var(--rule);
}
.about h2 { font-size: clamp(1.7rem, 3.8vw, 2.8rem); margin-bottom: 2.5rem; }
.about__copy p { color: var(--grey); max-width: 58ch; margin: 0 auto 1.5rem; }
.about__pull {
  font-family: var(--display); font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  color: var(--gold) !important; line-height: 1.3;
  margin: 2.25rem auto !important;
}

/* ---------- 9 · lights out ---------- */

.out {
  padding: clamp(5rem, 14vh, 9rem) 1.25rem;
  text-align: center; border-top: 1px solid var(--rule);
}
.out h2 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); }

/* ---------- 10 · contact ---------- */

.contact {
  padding: clamp(5rem, 13vh, 9rem) clamp(1.25rem, 6vw, 5rem);
  max-width: 44rem; margin-inline: auto; text-align: center;
  border-top: 1px solid var(--rule);
}
.contact h2 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); margin-bottom: 2.75rem; }
.contact__form { display: grid; gap: 1.5rem; text-align: left; }
.contact__form label { display: grid; gap: .5rem; }
.contact__form span {
  font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--azul);
}
.contact__form input, .contact__form textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  color: var(--white); font: 400 1rem var(--sans); padding: .65rem 0;
  border-radius: 0;
}
.contact__form input:focus, .contact__form textarea:focus {
  outline: none; border-bottom-color: var(--gold);
}
.contact__form .btn { justify-self: center; margin-top: 1rem; }
.contact__status { margin: 0; text-align: center; color: var(--azul); font-size: .85rem; }

/* ---------- footer ---------- */

.foot {
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 6vw, 5rem) 3rem;
  border-top: 1px solid var(--rule);
}
.foot__news { text-align: center; margin-bottom: 3.5rem; }
.foot__news h3 { font-size: 1.6rem; margin-bottom: .4rem; }
.foot__news p { margin: 0 0 1.5rem; color: var(--grey); font-size: .9rem; }
.foot__signup {
  display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap;
}
.foot__signup input {
  background: transparent; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--white); font: 400 .85rem var(--sans); padding: .85rem 1.25rem;
  min-width: 15rem;
}
.foot__signup input:focus { outline: none; border-color: var(--gold); }

.foot__legal {
  border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 2rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between; font-size: .78rem;
}
.foot__legal .copy { margin: 0; color: var(--gold); }
.foot__legal .links { margin: 0; color: var(--dim); }
.foot__legal .links a { color: var(--grey); text-decoration: none; }

/* ---------- narrow ---------- */

@media (max-width: 860px) {
  .object, .auth { grid-template-columns: 1fr; }
  .object__figure { max-width: 24rem; margin-inline: auto; }
  .ledger > div { grid-template-columns: 1fr; gap: .15rem; }
  .foot__legal { justify-content: center; text-align: center; }
  .masthead nav { display: none; }
  .power--wall { animation-duration: 2s; }
}

/* ---------- reduced motion: lit, static, everything readable ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .hero__words { opacity: 1 !important; transform: none !important; }
}