/* @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;
  }

  /* Cards keep their own light-surface type colours even when the band behind
     them is dark, otherwise the rules above leak through and render pale text
     on a white card. Must stay after the .surface-* rules to win on order. */
  .card .prose-page,
  .card .bullet-list > li,
  .numbered-item .prose-page,
  .numbered-item .bullet-list > li {
    @apply text-ink-600;
  }

  .card .spec-list,
  .numbered-item .spec-list {
    @apply divide-ink-200 border-ink-200;
  }

  .card .spec-value,
  .numbered-item .spec-value {
    @apply text-ink-700;
  }

  /* ------------------------------------------------------------ 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];
  }

  /* Product photography varies wildly in aspect ratio and is often shot against
     white, so cropping to fill mangles it. Contain instead, and never upscale
     past natural resolution. Must stay after .card-media img to win on order. */
  .card-media--contain {
    @apply flex items-center justify-center bg-white p-4;
  }

  .card-media--contain img {
    @apply h-auto max-h-full w-auto max-w-full object-contain;
  }

  .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.
 *


 */