/* ============================================================
   Amberlock — base, shell and section styles
   Static CSS, no build step (§13.1). Cascade order:
   tokens.css -> site.css. Nothing else.
   ============================================================ */

/* ---- fonts -------------------------------------------------
   Self-hosted, latin subset, variable so one file covers every
   weight (§14.3). Aldrich is deliberately absent — the wordmark
   ships as outlined SVG. */

@font-face {
  font-family: "Space Grotesk Variable";
  src: url("../fonts/space-grotesk-var-latin.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/inter-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4 Variable";
  src: url("../fonts/source-serif-4-var-latin.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- reset -------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--resin);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 550;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-s);
}

::selection { background: var(--amber); color: var(--bone); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  background: var(--bone);
  color: var(--ink);
  border-radius: var(--radius-s);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---- layout primitives -------------------------------------- */

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

.section { padding-block: var(--section-y); }

/* Dividers are dashed, never solid (§13.2). */
.section--ruled { border-top: 1px dashed var(--hairline); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bone-dim);
  margin: 0 0 var(--space-s);
}

.lede {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--bone-dim);
  max-width: var(--container-text);
}

/* Specimen caption — the one place the serif is allowed (§14.3). */
.specimen-label {
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-style: italic;
  color: var(--bone-dim);
  letter-spacing: 0.01em;
}

/* ---- buttons and links -------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.7em 1.35em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out);
}

/* Amber fill + resin label: the amber is a graphic here, and the
   label sits on it at 5.9:1. Amber is never the text colour. */
.btn--primary { background: var(--amber); color: #100C08; }
.btn--primary:hover { background: var(--amber-bright); transform: translateY(-1px); }
.btn--primary:active { transform: none; }

.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--hairline);
}
.btn--ghost:hover { border-color: var(--bone-dim); background: rgba(245, 239, 230, 0.06); }

.btn--sm { font-size: var(--step--1); padding: 0.6em 1.1em; }

/* Text link with an amber rule under it — the rule is a graphic,
   the text stays --bone, so the amber body-text rule holds. */
.link-quiet {
  color: var(--bone);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 2px;
  transition: color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.link-quiet:hover { color: var(--amber-bright); border-bottom-color: var(--amber-bright); }
.link-quiet::after { content: " \2192"; }

@media (prefers-reduced-motion: reduce) {
  .btn, .link-quiet { transition-duration: 1ms; }
  .btn--primary:hover { transform: none; }
}

/* ---- header / nav ------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--resin-veil);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-hover) var(--ease-out),
              padding var(--dur-hover) var(--ease-out);
}
.site-header[data-condensed="true"] { border-bottom-color: var(--hairline-solid); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-height: 4.5rem;
  transition: min-height var(--dur-hover) var(--ease-out);
}
.site-header[data-condensed="true"] .site-header__inner { min-height: 3.75rem; }

/* The full wordmark shows at every breakpoint and in the condensed
   state. The cabochon mark is favicon and app icon only — it never
   substitutes for the logo in the nav.
   150px on mobile still clears the ~140px two-tone floor (§14.4). */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__wordmark { width: 150px; height: auto; }

@media (min-width: 52rem) {
  .brand__wordmark { width: 168px; }
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__link {
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--bone-dim);
  padding-block: var(--space-3xs);
  transition: color var(--dur-hover) var(--ease-out);
}
.nav__link:hover { color: var(--bone); }

.header__cta { margin-left: var(--space-m); }

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--bone);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.5em 1em;
  cursor: pointer;
}

@media (max-width: 51.999rem) {
  .nav, .header__cta { display: none; }
}
@media (min-width: 52rem) {
  .nav-toggle { display: none; }
}

/* Mobile: full-screen overlay, five items stacked, CTA pinned
   bottom, one specimen as the only ornament (§6). */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--resin);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--gutter);
  padding-block-end: calc(var(--gutter) + env(safe-area-inset-bottom));
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav__list { display: grid; gap: var(--space-s); align-content: center; }
.mobile-nav__link {
  font-family: var(--font-display);
  font-size: var(--step-3);
  text-decoration: none;
  color: var(--bone);
}
.mobile-nav__ornament {
  width: 96px; margin-inline: auto; opacity: 0.65;
}
.mobile-nav__foot { display: grid; gap: var(--space-s); justify-items: stretch; }
.mobile-nav .btn { width: 100%; }

/* ---- hero (§7 #1) -------------------------------------------- */

.hero {
  padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem) var(--section-y);
}
.hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 5vw, 4rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* The positioning line runs long on purpose (§2), so the hero
   headline sits a step below the display maximum rather than
   wrapping into a wall. --step-6 is reserved for short headlines. */
.hero__title {
  font-size: var(--step-4);
  max-width: 24ch;
}
/* "Live in a day." is the outcome clause — amber, and well above
   the 24px large-text threshold, so the contrast rule holds. */
.hero__title em { font-style: normal; color: var(--amber); }

.hero__sub {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--bone-dim);
  max-width: 46ch;
}

.hero__actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
}

.hero__note {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--bone-dim);
}

/* ---- hero specimen ------------------------------------------
   Static and clean. The Sealed -> Revived transition (§14.6) is
   deliberately unimplemented: the fractured Revived raster read as
   damage, and an edge overlay on intact amber read as clutter. The
   approach is parked for the marketing agent, so the hero is one
   unmodified specimen and nothing else.

   Consequence worth knowing: --cyan now appears nowhere on the
   site. That is correct rather than a gap — §14.2 reserves it for
   liveness, and there is currently no live-graph element. Do not
   reach for it as a general accent in the meantime. */

.hero-stage-wrap { margin: 0; }

.hero-stage {
  width: min(100%, 34rem);
  margin-inline: auto;
  border-radius: var(--radius-l);
  overflow: hidden;
}
.hero-stage__frame { width: 100%; height: auto; }

.hero-stage__caption {
  margin-top: var(--space-m);
  max-width: 34rem;
  margin-inline: auto;
}

/* Specimen note — what the creature means in our taxonomy. The
   serif is allowed here and only here (§14.3). */
.specimen-note {
  font-family: var(--font-label);
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--bone-dim);
}
.specimen-note b {
  font-style: italic;
  font-weight: 600;
  color: var(--bone);
}

/* ---- the gap (§7 #2) -----------------------------------------
   Three vertical bands, one idea each, one large specimen each.
   Each band fades in once on arrival — ordinary scrolling, no pin,
   no hijack, nothing that draws attention to itself (§13.2). */

.gap__head { max-width: var(--container-text); }
.gap__title { font-size: var(--step-4); }

.bands {
  margin-top: var(--space-2xl);
  display: grid;
}

.band {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  border-top: 1px dashed var(--hairline);
}
.band:first-child { border-top: 0; }

@media (min-width: 52rem) {
  .band { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--space-2xl); }
  /* Alternate the specimen side so the eye zig-zags down the section.
     Explicit placement, not `order` — `order` would leave the copy in
     the narrow 22rem track and squeeze it to a column. */
  .band--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
  .band--flip .band__art  { grid-column: 2; grid-row: 1; }
  .band--flip .band__copy { grid-column: 1; grid-row: 1; }
}

/* Sealed context: no cyan may appear here, including in overlays. */
.band__art { display: grid; gap: var(--space-s); justify-items: start; }
.band__art img {
  width: min(100%, 17.5rem);
  height: auto;
  border-radius: var(--radius-l);
}
.band__art .specimen-note { max-width: 17.5rem; }

@media (max-width: 51.999rem) {
  .band__art { justify-items: center; text-align: center; }
}

.band__eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: var(--space-2xs);
}

.band__title {
  font-size: var(--step-3);
  max-width: 18ch;
}

/* One supporting paragraph per band. The three scannable lines
   below carry the point; this carries the argument. */
.band__lead {
  margin-top: var(--space-s);
  color: var(--bone-dim);
  max-width: 52ch;
}
.band__lead strong { color: var(--bone); font-weight: 600; }

/* Deliberately larger than body copy — these three lines are the
   scannable payload of the section, not supporting detail. */
.band__list {
  margin-top: var(--space-m);
  display: grid;
}
.band__list li {
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--bone-dim);
  padding-block: var(--space-xs);
  border-top: 1px dashed var(--hairline);
}
.band__list li:first-child { border-top: 0; padding-top: 0; }
.band__list strong { color: var(--bone); font-weight: 600; }
.band__list em { font-style: italic; color: var(--bone); }

/* The attach-don't-attack block. Raised surface, amber rule. */
.gap__attach {
  margin-top: var(--space-2xl);
  background: var(--resin-raised);
  border: 1px solid var(--hairline-solid);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-m);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 64rem) {
  .gap__attach { grid-template-columns: 1fr 1.4fr; align-items: start; gap: var(--space-xl); }
}
.gap__attach h3 { font-size: var(--step-2); max-width: 18ch; }
.gap__attach p { color: var(--bone-dim); }
.gap__attach p + p { margin-top: var(--space-s); }
.gap__attach strong { color: var(--bone); font-weight: 600; }

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

.site-footer {
  border-top: 1px dashed var(--hairline);
  padding-block: var(--space-2xl) var(--space-xl);
  font-size: var(--step--1);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-xl) var(--space-l);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 52rem) {
  .site-footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); }
}
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: var(--space-s);
}
.site-footer ul { display: grid; gap: var(--space-2xs); }
.site-footer a { color: var(--bone-dim); text-decoration: none; }
.site-footer a:hover { color: var(--bone); }
.site-footer__brand { display: grid; gap: var(--space-s); align-content: start; }
.site-footer__brand img { width: 150px; }
.site-footer__brand p { color: var(--bone-dim); max-width: 28ch; }

/* Specimen strip — all eight Sealed, quiet, hover reveals the label. */
.specimen-strip {
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px dashed var(--hairline);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m) var(--space-s);
  justify-items: center;
}
@media (min-width: 52rem) {
  .specimen-strip { grid-template-columns: repeat(8, 1fr); }
  /* Closer to the ~96px floor where specimens still read (§14.5). */
  .specimen-strip__item,
  .specimen-strip__item img { width: 80px; }
  .specimen-strip__item img { height: 80px; }
}
.specimen-strip__item {
  margin: 0;
  text-align: center;
  width: 64px;
}
.specimen-strip__item img {
  width: 64px; height: 64px;
  border-radius: var(--radius-s);
  filter: grayscale(1);
  opacity: 0.45;
  transition: filter var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out);
}
.specimen-strip__item:hover img,
.specimen-strip__item:focus-within img { filter: none; opacity: 1; }
.specimen-strip__item figcaption {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--bone-dim);
  margin-top: var(--space-3xs);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.specimen-strip__item:hover figcaption,
.specimen-strip__item:focus-within figcaption { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .specimen-strip__item img,
  .specimen-strip__item figcaption { transition-duration: 1ms; }
}

.site-footer__legal {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px dashed var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  justify-content: space-between;
  color: var(--bone-dim);
}

/* ---- scroll-in ---------------------------------------------
   Elements marked [data-animate] start offset; motion.js clears
   them once. If JS never runs, .no-js reveals everything, so the
   page is never blank without script. */

.no-js [data-animate] { opacity: 1 !important; transform: none !important; }
[data-animate] { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; }
}