/* ============================================================
   Awkward Dog Coin — $AWDG
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Jost';
  src: url('assets/fonts/jost-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* surfaces */
  --paper:       #FBF8F3;
  --sand:        #F1E9DC;
  --plate:       #EFE7D9;

  /* ink */
  --ink:         #24211D;
  --ink-2:       #4A443C;
  --ink-3:       #6E655C; /* passes AA (4.5:1) on the sand surface too */
  --red:         #9E4840;

  /* lines */
  --line:        rgba(36, 33, 29, 0.10);
  --line-soft:   rgba(36, 33, 29, 0.07);
  --line-strong: rgba(36, 33, 29, 0.20);

  /* type */
  --display: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 0.02, 0.18, 1);
  --dur: 1000ms;

  /* layout */
  --wrap: 1180px;
  --gutter: clamp(26px, 5.6vw, 76px);
  --rail: 190px;
  --rail-gap: clamp(48px, 6vw, 88px);
  --section-y: clamp(100px, 12vw, 162px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* replaces the default blue flash on tap with something on-palette */
  -webkit-tap-highlight-color: rgba(36, 33, 29, 0.055);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--text);
  font-size: clamp(1rem, 0.965rem + 0.16vw, 1.0625rem);
  line-height: 1.78;
  font-weight: 400;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(158, 72, 64, 0.14); color: var(--ink); }

:focus-visible {
  outline: 1.5px solid var(--red);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 0 0 6px 6px;
  transition: transform 260ms var(--ease);
}
/* :focus, not :focus-visible — a skip link must appear however it was reached. */
.skip-link:focus { transform: translate(-50%, 0); outline-offset: -4px; }

/* ---------- Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--sand { background: var(--sand); }
.section--rule::before {
  content: "";
  position: absolute;
  inset-inline: var(--gutter);
  top: 0;
  height: 1px;
  background: var(--line-soft);
  max-width: calc(var(--wrap) - var(--gutter) * 2);
  margin-inline: auto;
}

.grid { display: grid; gap: clamp(26px, 3.4vw, 40px); }
@media (min-width: 900px) {
  .grid {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--rail-gap);
    row-gap: 0;
    align-items: start;
  }
}

/* ---------- Typography atoms ---------- */
.eyebrow {
  font-family: var(--text);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* On the two-column rail the label's cap-height is optically aligned with the
   first line of its section's content. Values are measured, not guessed. */
@media (min-width: 900px) {
  .eyebrow { padding-top: var(--eyebrow-top, 0px); }
  #about    { --eyebrow-top: 5.4px; }
  #token    { --eyebrow-top: 9.55px; }
  #buy      { --eyebrow-top: 1.3px; }
  #roadmap  { --eyebrow-top: 23.6px; }
  #community { --eyebrow-top: 4.6px; }
}

.lead {
  font-family: var(--text);
  font-size: clamp(1.1875rem, 1.02rem + 0.72vw, 1.5rem);
  line-height: 1.68;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: -0.006em;
  max-width: 33ch;
  text-wrap: pretty;
}
.lead--sm {
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  color: var(--ink-3);
  max-width: 36ch;
  margin-bottom: clamp(36px, 4.5vw, 56px);
  text-wrap: balance;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding-block: clamp(84px, 11vw, 150px) clamp(104px, 13vw, 176px);
  background:
    radial-gradient(115% 78% at 76% 16%, #FFFDFA 0%, rgba(255, 253, 250, 0) 62%),
    var(--paper);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: clamp(48px, 7vw, 72px);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.98fr);
    column-gap: clamp(48px, 5vw, 72px);
    row-gap: 0;
  }
}

.hero__text { min-width: 0; }

.hero__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.75rem, 1.62rem + 5.05vw, 5.75rem);
  line-height: 1.07;
  letter-spacing: 0.085em;
  color: var(--ink);
  text-indent: -0.04em; /* optical: cancel trailing tracking on the left edge */
}
.hero__line { display: block; }

.hero__ticker {
  margin-top: clamp(28px, 3.4vw, 40px);
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.36em;
  color: var(--ink-3);
}
.hero__ticker::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-strong);
}

.hero__slogan {
  margin-top: clamp(24px, 2.8vw, 32px);
  font-size: clamp(1.0625rem, 0.99rem + 0.42vw, 1.3125rem);
  line-height: 1.62;
  color: var(--ink-3);
  letter-spacing: -0.004em;
  max-width: 30ch;
  text-wrap: pretty;
}

.hero__actions {
  margin-top: clamp(38px, 4.6vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 32px;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--text);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color 460ms var(--ease),
    border-color 460ms var(--ease),
    color 460ms var(--ease),
    transform 520ms var(--ease),
    box-shadow 520ms var(--ease);
}
.btn > span { display: block; transform: translateY(0.035em); }

.btn--solid {
  --btn-bg: var(--ink);
  --btn-fg: #FBF8F3;
  --btn-bd: var(--ink);
  box-shadow: 0 1px 2px rgba(36, 33, 29, 0.06);
}
.btn--ghost { --btn-bg: transparent; }

@media (hover: hover) {
  .btn--solid:hover {
    --btn-bg: #3B342C;
    --btn-bd: #3B342C;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px -14px rgba(36, 33, 29, 0.5);
  }
  .btn--ghost:hover {
    --btn-bd: rgba(36, 33, 29, 0.34);
    --btn-bg: rgba(36, 33, 29, 0.028);
    transform: translateY(-1px);
  }
}
.btn:active { transform: translateY(0); transition-duration: 120ms; }

/* Small screens: two equal pills, collapsing to one column when two no longer
   fit. Declared after the base button rules so the cascade lands correctly. */
@media (max-width: 519px) {
  .hero__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 10px;
    max-width: 420px;
  }
  .hero__actions .btn {
    min-width: 0;
    padding: 0 12px;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    min-height: 52px;
  }
}

/* ---------- Portrait plate ---------- */
.hero__portrait { min-width: 0; }

.plate {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background:
    linear-gradient(176deg, #F6F0E5 0%, var(--plate) 58%, #EAE0D0 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 2px 4px -2px rgba(36, 33, 29, 0.05),
    0 34px 64px -40px rgba(36, 33, 29, 0.30);
  aspect-ratio: 1 / 1.04;
  max-width: 560px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  /* hug the right edge of the content measure so the plate aligns with every
     other section's right boundary */
  .plate { margin-inline: auto 0; }
}
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(36, 33, 29, 0.055);
  pointer-events: none;
}
/* The artwork is cropped at its own right and bottom edges, so it is placed to
   bleed past both plate edges — the crop then reads as framing, not as damage.
   The dog faces left, so the remaining air sits in front of him. */
.plate__img {
  position: absolute;
  right: -1.8%;
  bottom: -2.5%; /* bleed exceeds the parallax travel, so no sliver can appear */
  width: 96%;
  height: auto;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
@media (max-width: 899px) {
  /* Below the measure it fills the column edge-to-edge; above it, it centres. */
  .plate { aspect-ratio: 1 / 0.94; max-width: 560px; }
  .plate__img { width: 94%; }
}

/* ============================================================
   TOKEN — facts list
   ============================================================ */
.fact {
  display: grid;
  gap: 6px;
  padding-block: clamp(20px, 2.4vw, 26px);
  border-bottom: 1px solid var(--line);
}
.fact:first-child { padding-top: 0; }
@media (min-width: 560px) {
  .fact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 32px;
    gap: 0;
  }
}
.fact__key {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.6;
}
.fact__val {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.05rem + 0.34vw, 1.3125rem);
  line-height: 1.45;
  letter-spacing: 0.012em;
  color: var(--ink);
}
@media (min-width: 560px) {
  .fact__val { text-align: right; }
}

/* ============================================================
   HOW TO BUY — steps
   ============================================================ */
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 34px);
  padding-block: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step:last-child { padding-bottom: 0; }

.step__num {
  font-family: var(--display);
  font-weight: 300;
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  line-height: 1;
  padding-top: 0.25em; /* caps sit level with the step title */
  font-variant-numeric: tabular-nums;
}
.step__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.1875rem, 1.09rem + 0.42vw, 1.4375rem);
  line-height: 1.35;
  letter-spacing: 0.018em;
  color: var(--ink);
}
.step__note {
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 0.9375rem;
  line-height: 1.72;
  max-width: 46ch;
  text-wrap: pretty;
}

.ca {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
}
.ca__label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ca__value {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-left: auto;
}
@media (max-width: 559px) {
  /* stacked and left-aligned rather than orphaned to the right on a new line */
  .ca { display: grid; justify-items: start; gap: 8px; padding: 16px 18px; }
  .ca__value { margin-left: 0; }
}

/* ============================================================
   ROADMAP — phases
   ============================================================ */
.phases {
  display: grid;
  gap: clamp(34px, 4.4vw, 54px) clamp(28px, 4vw, 56px);
}
@media (min-width: 620px) { .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.phase { padding-top: 22px; border-top: 1px solid var(--line); }
.phase__label {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.phase__title {
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  line-height: 1.32;
  letter-spacing: 0.018em;
  color: var(--ink);
}
.phase__note {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-3);
  max-width: 34ch;
  text-wrap: pretty;
}

/* ============================================================
   COMMUNITY — link rows
   ============================================================ */
.links { border-top: 1px solid var(--line); }
.links li { border-bottom: 1px solid var(--line); }

.link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 24px;
  padding: clamp(20px, 2.4vw, 25px) 0;
  transition: color 420ms var(--ease);
}
.link-row__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.05rem + 0.34vw, 1.3125rem);
  letter-spacing: 0.03em;
  color: var(--ink);
  transition: color 420ms var(--ease);
}
.link-row__meta {
  grid-column: 1;
  grid-row: 2;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--ink-3);
  letter-spacing: 0.01em;
  transition: color 420ms var(--ease);
}
.link-row__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--ink-3);
  transition: transform 480ms var(--ease), color 420ms var(--ease);
}
@media (hover: hover) {
  .link-row:hover .link-row__name { color: var(--red); }
  .link-row:hover .link-row__meta { color: var(--ink-2); }
  .link-row:hover .link-row__arrow { transform: translateX(6px); color: var(--red); }
}
.link-row:focus-visible { outline-offset: 2px; }
.link-row:active .link-row__name { color: var(--red); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(70px, 8vw, 108px) clamp(52px, 6vw, 72px);
}
.footer__inner { display: grid; justify-items: center; text-align: center; }
.footer__name {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  letter-spacing: 0.16em;
  color: var(--ink);
  text-indent: 0.16em;
}
.footer__ticker {
  margin-top: 14px;
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.34em;
  color: var(--ink-3);
  text-indent: 0.34em;
}
.footer__slogan {
  margin-top: clamp(26px, 3vw, 34px);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-3);
  max-width: 34ch;
  text-wrap: balance;
}
.footer__note {
  margin-top: clamp(44px, 5vw, 62px);
  padding-top: clamp(26px, 3vw, 32px);
  border-top: 1px solid var(--line-soft);
  max-width: 54ch;
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--ink-3);
  letter-spacing: 0.004em;
  text-wrap: pretty;
}

/* ============================================================
   MOTION
   ============================================================ */
/* The hero's entrance is a pure CSS animation: it starts at first paint rather
   than waiting for JavaScript, it still plays with JavaScript disabled, and it
   never parks the page at opacity 0 — which is what stops the browser
   recording First Contentful Paint at all. */
@keyframes enter-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
[data-enter] {
  animation: enter-rise 760ms var(--ease-soft) backwards;
  animation-delay: calc(var(--d, 0) * 80ms);
}
/* The portrait deliberately has no entrance: it is the largest contentful
   element, so it anchors the first painted frame while the words rise into
   place around it. Fading it in would drag Largest Contentful Paint out to
   the end of that fade. */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
.js [data-reveal].reveal-ready {
  transition:
    opacity var(--dur) var(--ease-soft),
    transform var(--dur) var(--ease-soft);
  transition-delay: calc(var(--d, 0) * 95ms);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ============================================================
   PRINT
   Reveal state is opacity-based, so without this a printed page
   comes out almost entirely blank.
   ============================================================ */
@media print {
  @page { margin: 16mm; }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-enter] { animation: none !important; }
  .plate__img { transform: none !important; }

  html, body { background: #fff; color: #000; }
  .skip-link, .link-row__arrow { display: none !important; }

  .hero, .section--sand { background: none; }
  .hero, .section { padding-block: 22pt; }
  .plate { box-shadow: none; background: none; }
  .btn { border-color: #666; box-shadow: none; }
  .btn--solid { background: none; color: #000; }

  .plate, .step, .phase, .fact, .links li, .hero__grid { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  /* a printout is offline — spell the destinations out */
  .link-row::after {
    content: attr(href);
    grid-column: 1 / -1;
    margin-top: 3pt;
    font-size: 8.5pt;
    letter-spacing: 0;
    color: #444;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-enter] { animation: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .plate__img { transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}