/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities; */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-white text-ink-700 antialiased;
  }

  ::selection {
    @apply bg-accent-200 text-ink-950;
  }

  :focus-visible {
    @apply outline-none ring-2 ring-accent-500 ring-offset-2 ring-offset-white;
  }
}

@layer components {
  /* ---------------------------------------------------------------- layout */

  .site-container {
    @apply mx-auto w-full max-w-7xl px-6 lg:px-8;
  }

  .section {
    @apply py-16 md:py-24;
  }

  .section--tight {
    @apply py-12 md:py-16;
  }

  .rule {
    @apply border-0 border-t border-ink-200;
  }

  /* ---------------------------------------------------------------- bands */

  /* Page rhythm comes from alternating full-bleed surfaces rather than from
     hairline borders. Compose with .section: `%section.section.surface-muted`.
     Type colours below re-map themselves per surface. */

  .surface-subtle {
    @apply bg-ink-50;
  }

  .surface-muted {
    @apply bg-ink-100;
  }

  .surface-dark {
    @apply bg-ink-950;
  }

  .surface-accent {
    @apply bg-accent-700;
  }

  .surface-dark .page-title,
  .surface-dark .section-title,
  .surface-dark .subsection-title,
  .surface-accent .page-title,
  .surface-accent .section-title,
  .surface-accent .subsection-title {
    @apply text-white;
  }

  .surface-dark .lede,
  .surface-dark .prose-page {
    @apply text-ink-300;
  }

  .surface-accent .lede,
  .surface-accent .prose-page {
    @apply text-accent-50;
  }

  .surface-dark .eyebrow {
    @apply text-accent-400;
  }

  .surface-accent .eyebrow {
    @apply text-accent-100;
  }

  .surface-dark .eyebrow::after {
    @apply bg-ink-700;
  }

  .surface-accent .eyebrow::after {
    @apply bg-accent-500;
  }

  .surface-dark .spec-list {
    @apply divide-ink-800 border-ink-800;
  }

  .surface-dark .spec-value {
    @apply text-ink-200;
  }

  .surface-dark .bullet-list > li {
    @apply text-ink-300;
  }

  /* ------------------------------------------------------------ typography */

  /* Small uppercase kicker that sits above a title. */
  .eyebrow {
    @apply mb-4 flex items-center gap-3 font-mono text-xs font-medium uppercase tracking-[0.18em] text-accent-600;
  }

  .eyebrow::after {
    @apply h-px flex-1 bg-ink-200 content-[''];
  }

  .eyebrow--bare::after {
    @apply hidden;
  }

  .page-title {
    @apply text-display-sm font-semibold text-ink-950 md:text-display;
  }

  .section-title {
    @apply text-2xl font-semibold tracking-tight text-ink-950 md:text-3xl;
  }

  .subsection-title {
    @apply text-lg font-semibold tracking-tight text-ink-900 md:text-xl;
  }

  .lede {
    @apply text-lg leading-relaxed text-ink-600 md:text-xl;
  }

  /* Body copy runs the full width of its container; where prose sits beside an
     image the grid column already constrains it. */
  .prose-page {
    @apply space-y-5 text-base leading-relaxed text-ink-600;
  }

  /* Opt back in to a reading measure where a narrow column is wanted. */
  .prose-page--measure {
    @apply max-w-prose;
  }

  /* --------------------------------------------------------------- buttons */

  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-md px-5 py-3 text-sm font-semibold no-underline transition-colors duration-150;
  }

  .btn-primary {
    @apply bg-accent-600 text-white hover:bg-accent-700;
  }

  .btn-secondary {
    @apply bg-ink-900 text-white hover:bg-ink-800;
  }

  .btn-ghost {
    @apply border border-ink-300 bg-transparent text-ink-800 hover:border-ink-400 hover:bg-ink-50;
  }

  .btn-on-dark {
    @apply border border-white/25 bg-transparent text-white hover:border-white/50 hover:bg-white/10;
  }

  .btn-on-accent {
    @apply bg-white text-accent-700 hover:bg-accent-50;
  }

  /* ----------------------------------------------------------------- cards */

  /* Pair with the `group` utility in markup so .card-media can react to hover. */
  .card {
    @apply flex flex-col overflow-hidden rounded-lg border border-ink-200 bg-white transition duration-150 hover:border-ink-300 hover:shadow-lg hover:shadow-ink-900/5;
  }

  .card-media {
    @apply aspect-[4/3] w-full overflow-hidden bg-ink-100;
  }

  .card-media img {
    @apply h-full w-full object-cover transition duration-300 group-hover:scale-[1.03];
  }

  .card-body {
    @apply flex flex-1 flex-col gap-2 p-6;
  }

  .card-title {
    @apply text-lg font-semibold text-ink-950;
  }

  .card-text {
    @apply text-sm leading-relaxed text-ink-600;
  }

  /* Use on white surfaces, where a white card would have no edge to read. */
  .card--filled {
    @apply border-transparent bg-ink-100 hover:bg-ink-50;
  }

  /* One inverted card per group pulls the eye, the way the reference site
     flips a single stat card to its brand colour. */
  .card--invert {
    @apply border-ink-800 bg-ink-950;
  }

  .card--invert .card-title {
    @apply text-white;
  }

  .card--invert .card-text {
    @apply text-ink-400;
  }

  .card--accent {
    @apply border-accent-700 bg-accent-700;
  }

  .card--accent .card-title {
    @apply text-white;
  }

  .card--accent .card-text {
    @apply text-accent-50;
  }

  /* ------------------------------------------------------ stats & listings */

  .stat-card {
    @apply flex flex-col gap-1 rounded-lg border border-ink-200 bg-white p-6;
  }

  .stat-label {
    @apply font-mono text-xs uppercase tracking-[0.18em] text-ink-400;
  }

  .stat-value {
    @apply text-2xl font-semibold text-ink-950;
  }

  .stat-card--invert {
    @apply border-ink-800 bg-ink-950;
  }

  .stat-card--invert .stat-label {
    @apply text-ink-500;
  }

  .stat-card--invert .stat-value {
    @apply text-white;
  }

  /* Stacked white blocks for a section made of several distinct text blocks,
     e.g. "01 — Depth of mark". Sits on a non-white surface. */
  .numbered-stack {
    @apply flex flex-col gap-6;
  }

  .numbered-item {
    @apply rounded-lg bg-white p-6 md:p-8;
  }

  .numbered-item__title {
    @apply mb-3 text-xl font-bold tracking-tight text-ink-950;
  }

  .numbered-item__index {
    @apply text-accent-600;
  }

  .numbered-item__body {
    @apply space-y-4 text-base leading-relaxed text-ink-600;
  }

  /* Two-column tick list on a filled pill, as on the reference site. */
  .checklist {
    @apply grid list-none gap-3 sm:grid-cols-2;
  }

  .checklist > li {
    @apply flex items-start gap-3 rounded-md bg-white p-4 text-sm leading-relaxed text-ink-700;
  }

  .checklist > li::before {
    @apply mt-0.5 shrink-0 font-semibold text-accent-600 content-['✓'];
  }

  .pull-quote {
    @apply border-l-4 border-accent-500 bg-white py-3 pl-5 text-lg italic leading-relaxed text-ink-700;
  }

  /* --------------------------------------------------------------- figures */

  /* items-start keeps flex from stretching an image past its natural width —
     much of the photo library is thumbnail-sized and upscales badly. */
  .figure {
    @apply flex flex-col items-start gap-2;
  }

  .figure img {
    @apply max-w-full rounded-md border border-ink-200 bg-white;
  }

  .figure-caption {
    @apply font-mono text-xs uppercase tracking-wider text-ink-400;
  }

  /* Uniform frame for galleries whose source images vary wildly in size.
     Contains rather than crops, and never upscales past natural resolution. */
  .figure-frame {
    @apply flex h-72 w-full items-center justify-center overflow-hidden rounded-md border border-ink-200 bg-white p-4;
  }

  .figure-frame img {
    @apply max-h-full w-auto max-w-full rounded-none border-0 object-contain;
  }

  /* ------------------------------------------------------------ spec lists */

  /* For the technical spec dumps that were faked with ml-3 / ml-6. */
  .spec-list {
    @apply divide-y divide-ink-200 border-y border-ink-200;
  }

  .spec-row {
    @apply flex flex-col gap-1 py-3 md:flex-row md:gap-6;
  }

  .spec-term {
    @apply font-mono text-xs uppercase tracking-wider text-ink-400 md:w-56 md:shrink-0 md:pt-1;
  }

  .spec-value {
    @apply text-ink-700;
  }

  .bullet-list {
    @apply space-y-3;
  }

  .bullet-list > li {
    @apply relative pl-6 text-ink-600;
  }

  .bullet-list > li::before {
    @apply absolute left-0 top-[0.6em] h-1.5 w-1.5 rounded-full bg-accent-500 content-[''];
  }

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

  .site-header {
    @apply sticky top-0 z-50 border-b border-ink-200 bg-white/90 backdrop-blur supports-[backdrop-filter]:bg-white/75;
  }

  .site-header__inner {
    @apply mx-auto flex h-20 w-full max-w-7xl items-center justify-between gap-6 px-6 lg:px-8;
  }

  .site-brand {
    @apply flex shrink-0 items-center no-underline;
  }

  .site-brand img {
    @apply h-11 w-auto;
  }

  .site-nav__list {
    @apply flex list-none items-center gap-1;
  }

  .nav-link {
    @apply relative inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium text-ink-700 no-underline transition-colors duration-150 hover:bg-ink-50 hover:text-ink-950;
  }

  .nav-link--active {
    @apply text-ink-950;
  }

  .nav-link--active::after {
    @apply absolute inset-x-3 -bottom-[1.35rem] h-0.5 bg-accent-500 content-[''];
  }

  .nav-caret {
    @apply h-4 w-4 text-ink-400 transition-transform duration-150;
  }

  [aria-expanded='true'] > .nav-caret {
    @apply rotate-180;
  }

  .dropdown-panel {
    @apply absolute left-0 top-full z-50 mt-1 min-w-[15rem] list-none rounded-lg border border-ink-200 bg-white p-1.5 shadow-xl shadow-ink-900/10;
  }

  .dropdown-link {
    @apply block rounded-md px-3 py-2 text-sm text-ink-700 no-underline transition-colors duration-150 hover:bg-ink-50 hover:text-ink-950;
  }

  .nav-toggle {
    @apply inline-flex h-10 w-10 items-center justify-center rounded-md text-ink-700 hover:bg-ink-50 md:hidden;
  }

  .mobile-nav {
    @apply border-t border-ink-200 bg-white md:hidden;
  }

  .mobile-nav__list {
    @apply site-container list-none divide-y divide-ink-100 py-2;
  }

  .mobile-nav__link {
    @apply flex w-full items-center justify-between py-3 text-base font-medium text-ink-800 no-underline;
  }

  .mobile-nav__sublink {
    @apply block py-2 pl-4 text-base text-ink-600 no-underline;
  }

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

  .site-footer {
    @apply mt-auto border-t border-ink-200 bg-ink-950 text-ink-300;
  }

  .footer-heading {
    @apply mb-4 font-mono text-xs font-medium uppercase tracking-[0.18em] text-ink-500;
  }

  .footer-link {
    @apply text-sm text-ink-300 no-underline transition-colors duration-150 hover:text-white;
  }

  /* ---------------------------------------------------------------- flashes */

  .flash {
    @apply flex list-none items-start gap-3 rounded-md border px-4 py-3 text-sm;
  }

  .flash.notice {
    @apply border-emerald-200 bg-emerald-50 text-emerald-800;
  }

  .flash.alert,
  .flash.error {
    @apply border-red-200 bg-red-50 text-red-800;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */