/* Helipad: dusk over a rooftop landing pad.
   Warm amber landing lights on deep indigo glass. */

@layer reset, base, layout, components, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  button, input, select { font: inherit; color: inherit; }
  img, svg { display: block; max-width: 100%; }
}

@layer base {
  :root {
    color-scheme: dark;

    --base:      oklch(0.17 0.035 268);
    --base-deep: oklch(0.12 0.03 272);
    --ink:       oklch(0.96 0.008 268);
    --mute:      oklch(0.74 0.022 268);
    --faint:     oklch(0.58 0.025 268);

    --amber:     oklch(0.83 0.145 78);
    --amber-dim: oklch(0.62 0.10 72);
    --coral:     oklch(0.72 0.14 28);
    --sky:       oklch(0.78 0.085 225);

    --glass:        color-mix(in oklch, white 6.5%, transparent);
    --glass-strong: color-mix(in oklch, white 10%, transparent);
    --edge:         color-mix(in oklch, white 14%, transparent);
    --edge-bright:  color-mix(in oklch, white 26%, transparent);

    --r-sm: 0.625rem;
    --r-md: 1rem;
    --r-lg: 1.5rem;

    --gut: clamp(1.1rem, 4vw, 2.5rem);
    --stack: clamp(2.75rem, 7vw, 5rem);

    --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
    --font-ui: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  html { overflow-x: clip; }

  body {
    min-height: 100dvh;
    background: var(--base-deep);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 300;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* The dusk itself: three slow washes behind everything. */
  .sky {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(46vw 38vw at 12% 4%,   oklch(0.68 0.16 44 / 0.62), transparent 66%),
      radial-gradient(50vw 44vw at 92% 16%,  oklch(0.54 0.16 318 / 0.66), transparent 68%),
      radial-gradient(44vw 40vw at 72% 58%,  oklch(0.52 0.13 268 / 0.55), transparent 70%),
      radial-gradient(64vw 52vw at 34% 100%, oklch(0.50 0.12 214 / 0.62), transparent 72%),
      var(--base);
    filter: blur(0.5px);
  }
  /* Faint approach-light grid, the only "tech" flourish on the page. */
  .sky::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(var(--edge) 1px, transparent 1px),
      linear-gradient(90deg, var(--edge) 1px, transparent 1px);
    background-size: 5.5rem 5.5rem;
    opacity: 0.16;
    mask-image: radial-gradient(70% 60% at 50% 30%, black, transparent 78%);
  }

  a { color: var(--amber); text-underline-offset: 0.2em; }
  a:hover { color: var(--ink); }

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

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

@layer layout {
  .shell {
    width: min(100% - (var(--gut) * 2), 76rem);
    margin-inline: auto;
  }

  .masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: clamp(1.1rem, 3vw, 1.9rem);
  }

  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--ink);
  }
  .wordmark .pad {
    display: grid;
    place-items: center;
    width: 2.1rem; height: 2.1rem;
    flex: none;
    border: 1.5px solid var(--amber-dim);
    border-radius: 50%;
    color: var(--amber);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    background: color-mix(in oklch, var(--amber) 10%, transparent);
  }
  .wordmark b {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.35rem, 3.6vw, 1.7rem);
    letter-spacing: 0.005em;
  }
  .tally {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    text-align: right;
  }
  .tally b { color: var(--amber); font-weight: 500; }
}

@layer components {
  /* ---------- Shared glass ---------- */
  .glass {
    background: var(--glass);
    border: 1px solid var(--edge);
    border-radius: var(--r-lg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow:
      0 1px 0 var(--edge-bright) inset,
      0 20px 50px -30px oklch(0 0 0 / 0.9);
  }

  /* ---------- Hero: one review, cleared to land ---------- */
  .beacon {
    padding: clamp(1.6rem, 5vw, 3.2rem);
    margin-block-end: var(--stack);
    position: relative;
    overflow: hidden;
  }
  .beacon::before {
    content: "";
    position: absolute;
    inset-block-start: -50%;
    inset-inline-end: -25%;
    width: 30rem; height: 30rem;
    background: radial-gradient(circle, color-mix(in oklch, var(--amber) 22%, transparent), transparent 62%);
    pointer-events: none;
  }
  .beacon > * { position: relative; }

  .beacon-label {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber);
    margin-block-end: 1.1rem;
  }
  .beacon-quote {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.85rem, 6.2vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    max-width: 20ch;
    text-wrap: balance;
    margin-block-end: 1.1rem;
  }
  .beacon-sub {
    color: var(--mute);
    font-size: clamp(0.92rem, 2.4vw, 1.05rem);
    max-width: 52ch;
    margin-block-end: 1.6rem;
  }
  .beacon-sub b { color: var(--ink); font-weight: 500; }
  .beacon-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem; }

  /* ---------- Buttons ---------- */
  .btn {
    --btn-bg: var(--glass-strong);
    --btn-fg: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--edge);
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: 0.88rem;
    font-weight: 400;
    cursor: pointer;
    transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
  }
  .btn:hover { background: color-mix(in oklch, white 16%, transparent); border-color: var(--edge-bright); }
  .btn:active { transform: translateY(1px); }
  .btn--lit {
    --btn-bg: var(--amber);
    --btn-fg: oklch(0.2 0.04 70);
    border-color: transparent;
    font-weight: 500;
  }
  .btn--lit:hover { background: oklch(0.89 0.14 80); }
  .btn--quiet {
    --btn-bg: transparent;
    border-color: transparent;
    color: var(--mute);
    padding-inline: 0.55rem;
  }
  .btn--quiet:hover { color: var(--ink); background: var(--glass); }
  .btn svg { width: 1rem; height: 1rem; flex: none; }

  /* ---------- Landing lights = star rating ---------- */
  .lights { display: inline-flex; align-items: center; gap: 0.3rem; }
  .lights i {
    width: 0.5rem; height: 0.5rem;
    border-radius: 50%;
    background: color-mix(in oklch, white 16%, transparent);
    box-shadow: inset 0 0 0 1px var(--edge);
  }
  .lights i.on {
    background: var(--amber);
    box-shadow: 0 0 10px color-mix(in oklch, var(--amber) 55%, transparent);
  }
  .beacon .lights i { width: 0.65rem; height: 0.65rem; }
  .rating-text {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .tag-request {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--coral);
    border: 1px solid color-mix(in oklch, var(--coral) 45%, transparent);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
  }

  /* ---------- Controls ---------- */
  .controls {
    position: sticky;
    top: 0;
    z-index: 20;
    padding-block: 0.85rem;
    margin-block-end: 1.75rem;
    background: color-mix(in oklch, var(--base-deep) 82%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-block-end: 1px solid var(--edge);
  }
  .seek { position: relative; margin-block-end: 0.85rem; }
  .seek svg {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 1rem;
    translate: 0 -50%;
    width: 1.05rem; height: 1.05rem;
    color: var(--faint);
    pointer-events: none;
  }
  .seek input {
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 1rem 0.7rem 2.8rem;
    border: 1px solid var(--edge);
    border-radius: 999px;
    background: var(--glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 300;
  }
  .seek input::placeholder { color: var(--faint); }
  .seek input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }

  .filters {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block-end: 0.15rem;
    /* Stays inside the shell. A negative-margin bleed here widens the body,
       which widens the shell that sizes off it, and the page scrolls sideways. */
    scroll-padding-inline-start: 0.5rem;
  }
  .filters::-webkit-scrollbar { display: none; }
  .pill {
    flex: none;
    min-height: 2.75rem;
    padding: 0.35rem 1rem;
    border: 1px solid var(--edge);
    border-radius: 999px;
    background: var(--glass);
    color: var(--mute);
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: color 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
  }
  .pill:hover { color: var(--ink); }
  .pill[aria-pressed="true"] {
    background: color-mix(in oklch, var(--amber) 88%, transparent);
    border-color: transparent;
    color: oklch(0.2 0.04 70);
    font-weight: 500;
  }
  .pill span { opacity: 0.6; margin-inline-start: 0.3rem; }

  .readout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-end: 1.1rem;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .readout select {
    background: var(--glass);
    border: 1px solid var(--edge);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    min-height: 2.75rem;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    cursor: pointer;
  }
  .readout select option { background: var(--base-deep); }

  /* ---------- The deck of cards ---------- */
  .deck {
    display: grid;
    gap: 1rem;
    grid-auto-flow: dense;
    container-type: inline-size;
  }
  @media (min-width: 46rem) {
    .deck { grid-template-columns: repeat(2, 1fr); gap: 1.15rem; }
    /* The strangest ones get the wider berth. Rhythm, not a uniform grid. */
    .card--wide { grid-column: span 2; }
  }
  @media (min-width: 72rem) {
    .deck { grid-template-columns: repeat(3, 1fr); }
    .card--wide { grid-column: span 2; }
  }

  .card {
    display: flex;
    flex-direction: column;
    /* Grid items default to min-width:auto, which lets a long quote push the
       1fr track wider than the deck and scroll the whole page sideways. */
    min-width: 0;
    gap: 0.9rem;
    padding: clamp(1.15rem, 3.4vw, 1.75rem);
    scroll-margin-top: 8rem;
    transition: border-color 260ms var(--ease), transform 260ms var(--ease), background 260ms var(--ease);
    /* Dozens of 20px backdrop blurs repaint badly while scrolling on a phone.
       The cards keep the glass, at a radius the compositor can actually afford. */
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    background: color-mix(in oklch, var(--base) 42%, transparent);
  }
  .card:hover {
    border-color: var(--edge-bright);
    background: var(--glass-strong);
    transform: translateY(-2px);
  }
  .card:target {
    border-color: color-mix(in oklch, var(--amber) 60%, transparent);
  }

  .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .cat {
    font-size: 0.68rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--sky);
  }
  .card blockquote {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.3rem, 3.1vw, 1.7rem);
    line-height: 1.22;
    letter-spacing: -0.01em;
    text-wrap: pretty;
    overflow-wrap: break-word;
    color: var(--ink);
  }
  .card--wide blockquote { font-size: clamp(1.45rem, 3vw, 2.05rem); max-width: 30ch; }

  .subject {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink);
  }
  .because {
    font-size: 0.88rem;
    color: var(--mute);
    max-width: 56ch;
  }
  .card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-block-start: auto;
    padding-block-start: 0.85rem;
    border-block-start: 1px solid var(--edge);
  }
  .origin {
    flex: 1 1 10rem;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .origin a { color: var(--mute); }
  .origin a:hover { color: var(--amber); }
  .retold {
    display: inline-block;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    border: 1px solid var(--edge);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    margin-inline-start: 0.35rem;
  }

  /* ---------- Empty and footer ---------- */
  .nothing {
    padding: clamp(1.75rem, 6vw, 3rem);
    text-align: center;
    color: var(--mute);
  }
  .nothing b { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); margin-block-end: 0.5rem; }

  .ground {
    margin-block: var(--stack) 3rem;
    padding: clamp(1.4rem, 4vw, 2.25rem);
    display: grid;
    gap: 1.5rem;
    font-size: 0.88rem;
    color: var(--mute);
  }
  @media (min-width: 46rem) { .ground { grid-template-columns: 1.3fr 1fr; gap: 2.5rem; } }
  .ground h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--ink);
    margin-block-end: 0.5rem;
  }
  .ground code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.78rem;
    color: var(--amber);
    background: color-mix(in oklch, var(--amber) 9%, transparent);
    padding: 0.1rem 0.4rem;
    border-radius: 5px;
  }
  .ground li { margin-block-end: 0.4rem; }
  .status { font-size: 0.78rem; color: var(--faint); }

  /* ---------- Toast ---------- */
  .toast {
    position: fixed;
    inset-inline: var(--gut);
    inset-block-end: calc(1.25rem + env(safe-area-inset-bottom));
    margin-inline: auto;
    width: max-content;
    max-width: calc(100% - var(--gut) * 2);
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--base) 88%, transparent);
    border: 1px solid var(--edge-bright);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    font-size: 0.87rem;
    z-index: 50;
    opacity: 0;
    translate: 0 1rem;
    pointer-events: none;
    transition: opacity 260ms var(--ease), translate 260ms var(--ease);
  }
  .toast.up { opacity: 1; translate: 0 0; }
}

@layer motion {
  @keyframes touchdown {
    from { opacity: 0; translate: 0 1.25rem; }
    to   { opacity: 1; translate: 0 0; }
  }
  .card {
    animation: touchdown 520ms var(--ease) backwards;
    /* Capped: at 38ms each, 66 cards would leave the last one blank for 2.5s. */
    animation-delay: calc(min(var(--i, 0), 11) * 38ms);
  }
  .beacon .swap { transition: opacity 200ms var(--ease); }
  .beacon .swap.out { opacity: 0; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      transition-duration: 0.01ms !important;
    }
    .card:hover { transform: none; }
  }
}