/* =====================================================================================================================
   Waynesville Computer Services: link-in-bio page (links.waynesvillecomputerservices.com)

   Same look and feel as the website (src/index.css in the website repo): its colors, fonts, square corners, faint blue
   column lines, the hexagon logo's hover, and its card hovers. No scripts: everything here is CSS.

   1. Fonts      2. Tokens      3. Base      4. Layout
   5. Components: brand mark, hero, cards, good to know, socials, footer, theme switch
   6. Interaction: colors on hover and keyboard focus (always on)
   7. Motion: opening, logo, card lift and light sweep, press (only when the device allows motion)
   8. Print      9. Screen sizes
   ================================================================================================================== */

/* 1. Fonts ========================================================================================================= */
/* Self-hosted copies of the website's fonts (OFL licenses in fonts/). */

@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/bebas-neue-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
/* Stand-ins sized like the real fonts (the website's numbers), so text doesn't jump when the real fonts arrive. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Menlo"), local("DejaVu Sans Mono"), local("Courier New"), local("Liberation Mono");
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
}

/* 2. Tokens ======================================================================================================== */

:root {
  color-scheme: dark;

  /* Colors: the website's dark theme. */
  --page: #0a0a0b;
  --raised: #0f0f11;
  --ink: #ffffff;
  --muted: #a1a1aa;
  --dim: #8b8b94;
  --brand: #3b82f6;
  --brand-soft: #93c5fd;
  --brand-fill: #2563eb; /* solid fills under white text (white on #3b82f6 is under 4.5:1) */
  --brand-fill-hover: #1d4ed8;
  --hover-text: #3b82f6; /* text that turns blue on hover (deeper in light mode, for AA on the blue wash) */
  --edge: rgba(59, 130, 246, 0.2); /* the website's border-brand/20 */
  --edge-strong: rgba(59, 130, 246, 0.3);
  --divider: rgba(59, 130, 246, 0.15);
  --tint: rgba(59, 130, 246, 0.1);
  --edge-button: rgba(59, 130, 246, 0.4); /* the website's border-brand/40 (header theme button) */
  --option-on: rgba(59, 130, 246, 0.15); /* the picked option in the theme picker */
  --card-hover: #12161f; /* the website's hover:bg-brand/[0.06], over --raised */
  --panel: #0d1119; /* bg-brand/[0.06] over --page, like the website's drop-off banner */
  --grid: rgba(59, 130, 246, 0.08);
  --glow: rgba(37, 99, 235, 0.22);
  --sheen: rgba(147, 197, 253, 0.16); /* the light that sweeps across a card (its brightest point) */
  --tap: rgba(59, 130, 246, 0.16); /* phones' tap flash */

  /* Shadows. Card lift is the website's .card-lift; the logo's are its .brand-mark (copper edge glow + two shadows). */
  --lift-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.75);
  --cta-shadow: 0 12px 32px -14px rgba(37, 99, 235, 0.7);
  --cta-shadow-up: 0 18px 36px -14px rgba(37, 99, 235, 0.85);
  --mark-shadow: drop-shadow(0 0 3px rgba(234, 112, 48, 0.12)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6))
    drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
  --mark-shadow-up: drop-shadow(0 0 6px rgba(234, 112, 48, 0.35)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.55))
    drop-shadow(0 12px 14px rgba(0, 0, 0, 0.5));

  /* Type. */
  --font-heading: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion: the website's own curves and timings, shared by everything on the page. */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* logo grow, with a little overshoot */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* card lift, arrows, opening rise */
  --ease-sweep: cubic-bezier(0.45, 0, 0.25, 1); /* light sweep on hover */
  --ease-sweep-intro: cubic-bezier(0.4, 0, 0.2, 1); /* light sweep after the page opens */
  --dur-press: 120ms;
  --dur-color: 200ms;
  --dur-lift: 280ms;
  --dur-spring: 420ms;
  --dur-rise: 650ms;
  --dur-sweep: 1000ms;
  --dur-sweep-intro: 1100ms;
  --delay-sweep-intro: 500ms;
  --rise-step: 70ms;
  --lift: -3px;
}

/* The website's light theme. The blue is one shade darker so text and icons pass WCAG AA on white.
   theme.js sets data-theme="light" or "dark" on <html> before the page is drawn (the visitor's pick, or the device's
   setting while on System). Without JavaScript there's no data-theme, so the device setting decides. The two blocks
   below hold the same values: change one, change both. */
:root[data-theme="light"] {
  color-scheme: light;
  --page: #ffffff;
  --raised: #f5f6f8;
  --ink: #18181b;
  --muted: #52525b;
  --dim: #5c5c66;
  --brand: #2563eb;
  --brand-soft: #1d4ed8;
  --hover-text: #1d4ed8;
  --edge: rgba(37, 99, 235, 0.2);
  --edge-strong: rgba(37, 99, 235, 0.3);
  --divider: rgba(37, 99, 235, 0.15);
  --tint: rgba(37, 99, 235, 0.08);
  --edge-button: rgba(37, 99, 235, 0.4);
  --option-on: rgba(37, 99, 235, 0.12);
  --card-hover: #e9edf7;
  --panel: #f2f6fe;
  --grid: rgba(37, 99, 235, 0.07);
  --glow: rgba(37, 99, 235, 0.12);
  --sheen: rgba(37, 99, 235, 0.11);
  --tap: rgba(37, 99, 235, 0.12);
  --lift-shadow: 0 14px 28px -16px rgba(24, 24, 27, 0.3);
  --cta-shadow: 0 12px 28px -14px rgba(37, 99, 235, 0.5);
  --cta-shadow-up: 0 18px 34px -14px rgba(37, 99, 235, 0.65);
  --mark-shadow: drop-shadow(0 0 3px rgba(234, 112, 48, 0)) drop-shadow(0 2px 2px rgba(24, 24, 27, 0.25))
    drop-shadow(0 6px 8px rgba(24, 24, 27, 0.18));
  --mark-shadow-up: drop-shadow(0 0 5px rgba(234, 112, 48, 0.22)) drop-shadow(0 4px 4px rgba(24, 24, 27, 0.25))
    drop-shadow(0 12px 14px rgba(24, 24, 27, 0.22));
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --page: #ffffff;
    --raised: #f5f6f8;
    --ink: #18181b;
    --muted: #52525b;
    --dim: #5c5c66;
    --brand: #2563eb;
    --brand-soft: #1d4ed8;
    --hover-text: #1d4ed8;
    --edge: rgba(37, 99, 235, 0.2);
    --edge-strong: rgba(37, 99, 235, 0.3);
    --divider: rgba(37, 99, 235, 0.15);
    --tint: rgba(37, 99, 235, 0.08);
    --edge-button: rgba(37, 99, 235, 0.4);
    --option-on: rgba(37, 99, 235, 0.12);
    --card-hover: #e9edf7;
    --panel: #f2f6fe;
    --grid: rgba(37, 99, 235, 0.07);
    --glow: rgba(37, 99, 235, 0.12);
    --sheen: rgba(37, 99, 235, 0.11);
    --tap: rgba(37, 99, 235, 0.12);
    --lift-shadow: 0 14px 28px -16px rgba(24, 24, 27, 0.3);
    --cta-shadow: 0 12px 28px -14px rgba(37, 99, 235, 0.5);
    --cta-shadow-up: 0 18px 34px -14px rgba(37, 99, 235, 0.65);
    --mark-shadow: drop-shadow(0 0 3px rgba(234, 112, 48, 0)) drop-shadow(0 2px 2px rgba(24, 24, 27, 0.25))
      drop-shadow(0 6px 8px rgba(24, 24, 27, 0.18));
    --mark-shadow-up: drop-shadow(0 0 5px rgba(234, 112, 48, 0.22)) drop-shadow(0 4px 4px rgba(24, 24, 27, 0.25))
      drop-shadow(0 12px 14px rgba(24, 24, 27, 0.22));
  }
}

/* 3. Base ========================================================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--page);
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background-color: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: var(--tap);
}

a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

/* The icon sheet at the top of the page: each icon is drawn once there and reused with <use>. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.nowrap {
  white-space: nowrap;
}

/* 4. Layout ======================================================================================================== */

/* Faint blue column lines and a soft glow behind the logo, fading out down the page (the website's page tops). */
.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 42rem;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 34rem 20rem at 50% 3rem, var(--glow), transparent 70%),
    linear-gradient(to right, var(--grid) 1px, transparent 1px);
  background-size: 100% 100%, 4rem 100%;
  background-position: center top, center top;
  background-repeat: no-repeat, repeat-x;
  -webkit-mask-image: linear-gradient(#000 40%, transparent);
  mask-image: linear-gradient(#000 40%, transparent);
}

.page {
  position: relative;
  width: 100%;
  max-width: 31rem;
  margin: 0 auto;
  padding: 2.25rem max(16px, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.section {
  margin-top: 2.5rem;
}

/* The website's section heading: Bebas Neue over a thin blue rule. */
.section-title {
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--edge);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* 5. Components ==================================================================================================== */

/* --- Brand mark ------------------------------------------------------------------------------------------------------
   A copy of the website header's logo (src/index.css .brand-mark and SiteHeader.jsx). On hover the whole logo grows a
   little (the link, 1.03) and the hexagon a bit more (1.06) on the same springy curve, its shadow lifts, the copper
   edge glow brightens, and a light sweeps across it. One sweep also plays just after the page opens, which is what
   phones see, since they have no hover. The picture sits on top of a fixed-size box rather than inside it as content:
   Safari once sized a box like this to the image file's width and pushed the website's header off an iPhone. */

.brand {
  display: block;
  width: max-content;
  margin: 0 auto;
  transition: transform var(--dur-spring) var(--ease-spring);
}

.brand-mark {
  position: relative;
  display: block;
  width: 6.75rem;
  height: 7.77rem;
  filter: var(--mark-shadow);
  transition:
    transform var(--dur-spring) var(--ease-spring),
    filter var(--dur-spring) ease;
}

.brand-mark img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
}

/* The light, cut to the hexagon. ::before is the sweep after the page opens, ::after the hover one: two layers,
   because restarting one running animation with the same name doesn't replay it. */
.brand-sheen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  pointer-events: none;
}

/* Every light sweep on the page: a band three times the width of what it crosses (the website's background-size:
   300%), slid from off the left edge to off the right with transform, so the graphics card draws it. Hidden until it
   plays. */
.brand-sheen::before,
.brand-sheen::after,
.card::after,
.card--primary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300%;
  opacity: 0;
  transform: translateX(-66.667%);
  pointer-events: none;
}

.brand-sheen::before,
.brand-sheen::after {
  background: linear-gradient(
    110deg,
    transparent 38%,
    rgba(255, 255, 255, 0.15) 44%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.15) 56%,
    transparent 62%
  );
}

/* --- Hero --------------------------------------------------------------------------------------------------------- */

.hero {
  text-align: center;
}

/* The website hero's small mono line with its blue dot. The dot stays still here: on the website it only pulses while
   the shop is open, which this page can't know without a script. */
.hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--brand);
}

.hero-title {
  margin: 0.6rem 0 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.6rem, 13vw, 3.6rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.hero-title-main,
.hero-title-sub {
  display: block;
}

.hero-title-sub {
  margin-top: 0.12em;
  font-size: 0.62em;
  letter-spacing: 0.06em;
  color: var(--brand);
}

.hero-tagline {
  max-width: 25rem;
  margin: 0.9rem auto 0;
  font-size: 1.03rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: balance;
}

/* --- Cards (the link buttons) --------------------------------------------------------------------------------------
   The website's clickable cards: a thin blue border that turns solid blue, a faint blue wash, the icon box filling
   blue, the title turning blue and the arrow sliding over (section 6), plus its lift and a light sweep (section 7). */

.card-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.card {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* keeps the sweep inside; the lift shadow and focus ring are drawn outside and still show */
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 4.5rem;
  padding: 0.875rem 1rem 0.875rem 0.875rem;
  border: 1px solid var(--edge);
  background-color: var(--raised);
  color: var(--ink);
  transition:
    border-color var(--dur-color) ease,
    background-color var(--dur-color) ease,
    box-shadow var(--dur-lift) ease,
    transform var(--dur-lift) var(--ease-out);
}

/* Content sits above the sweep. */
.card > * {
  position: relative;
  z-index: 1;
}

.card::after {
  background: linear-gradient(105deg, transparent 42%, var(--sheen) 50%, transparent 58%);
}

.card-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  border: 1px solid var(--edge-strong);
  background-color: var(--tint);
  color: var(--brand);
  transition:
    border-color var(--dur-color) ease,
    background-color var(--dur-color) ease,
    color var(--dur-color) ease;
}

.card-icon .icon {
  width: 1.3rem;
  height: 1.3rem;
}

.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.card-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.02;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transition: color var(--dur-color) ease;
}

.card-note {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
}

.card-arrow {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--muted);
  transition:
    color var(--dur-color) ease,
    transform var(--dur-lift) var(--ease-out);
}

/* The main action: solid blue with a soft blue glow, a little bigger. Its sweep is white, like the logo's. */
.card--primary {
  min-height: 5.25rem;
  border-color: var(--brand-fill);
  background-color: var(--brand-fill);
  color: #ffffff;
  box-shadow: var(--cta-shadow);
}

.card--primary::before,
.card--primary::after {
  background: linear-gradient(
    110deg,
    transparent 42%,
    rgba(255, 255, 255, 0.06) 46%,
    rgba(255, 255, 255, 0.24) 50%,
    rgba(255, 255, 255, 0.06) 54%,
    transparent 58%
  );
}

.card--primary .card-icon {
  width: 2.875rem;
  height: 2.875rem;
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.card--primary .card-icon .icon {
  width: 1.45rem;
  height: 1.45rem;
}

.card--primary .card-title {
  font-size: 1.75rem;
}

.card--primary .card-note {
  color: rgba(255, 255, 255, 0.95);
}

.card--primary .card-arrow {
  color: #ffffff;
}

/* The smaller rows under "More links". */
.card-list--compact {
  gap: 0.5rem;
  margin-top: 0;
}

.card--compact {
  min-height: 3.75rem;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem 0.625rem 0.75rem;
}

.card--compact .card-icon {
  width: 2.25rem;
  height: 2.25rem;
}

.card--compact .card-icon .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.card--compact .card-title {
  font-size: 1.3rem;
}

.card--compact .card-note {
  margin-top: 0.15rem;
  font-size: 0.8125rem;
}

/* --- Good to know ----------------------------------------------------------------------------------------------------
   Styled like the website's drop-off banner: a faint blue panel with a blue border. */

.facts {
  border: 1px solid var(--edge-strong);
  background-color: var(--panel);
}

.facts-item {
  display: flex;
  gap: 0.875rem;
  padding: 0.9rem 1rem 0.9rem 0.875rem;
}

.facts-item + .facts-item {
  border-top: 1px solid var(--divider);
}

/* Doubled class so the small-phone padding below doesn't reach the link row. */
.facts-item.facts-item--link {
  padding: 0;
}

.facts-icon {
  margin-top: 0.1rem;
  color: var(--brand);
}

.facts-title {
  font-weight: 600;
  line-height: 1.35;
}

.facts-note {
  margin-top: 0.15rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
}

/* The website's mono "Learn more →" link. */
.facts-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-soft);
  transition:
    color var(--dur-color) ease,
    background-color var(--dur-color) ease;
}

.facts-link:focus-visible {
  outline-offset: -2px;
}

.facts-link-arrow {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-lift) var(--ease-out);
}

/* --- Follow or message ---------------------------------------------------------------------------------------------- */

.socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.social {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--edge);
  background-color: var(--raised);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  transition:
    border-color var(--dur-color) ease,
    background-color var(--dur-color) ease,
    box-shadow var(--dur-lift) ease,
    transform var(--dur-lift) var(--ease-out);
}

/* Round blue icons, like the website footer's social buttons. */
.social-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--brand-fill);
  color: #ffffff;
  transition:
    background-color var(--dur-color) ease,
    color var(--dur-color) ease,
    transform var(--dur-color) ease;
}

.social-icon .icon {
  width: 1.1rem;
  height: 1.1rem;
}

/* --- Footer --------------------------------------------------------------------------------------------------------- */

.footer {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--divider);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--dim);
}

.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--brand-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-color) ease;
}

/* --- Theme switch ---------------------------------------------------------------------------------------------------
   The website's two theme controls: the header's square sun/moon button (top corner here) and the footer's
   Light / Dark / System picker. theme.js makes them work and sets data-theme, so without JavaScript they stay hidden
   and the page simply follows the device. */

.theme-toggle,
.theme-picker {
  display: none;
}

[data-theme] .theme-toggle,
[data-theme] .theme-picker {
  display: flex;
}

.theme-toggle {
  position: absolute;
  top: 0.75rem;
  right: max(16px, env(safe-area-inset-right));
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--edge-button);
  background-color: var(--page);
  color: var(--brand);
  cursor: pointer;
  -webkit-tap-highlight-color: var(--tap);
  transition:
    border-color var(--dur-color) ease,
    background-color var(--dur-color) ease,
    color var(--dur-color) ease,
    transform var(--dur-press) ease;
}

.theme-toggle .icon {
  width: 1.1rem;
  height: 1.1rem;
  pointer-events: none;
}

/* The sun in dark mode (tap for light), the moon in light mode (tap for dark), as on the website. */
.theme-toggle .icon-moon,
[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

.theme-picker {
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.theme-picker-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.theme-picker-options {
  display: flex;
  border: 1px solid var(--edge-strong);
}

.theme-option {
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0 0.75rem;
  border: 0;
  background-color: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: var(--tap);
  transition:
    background-color var(--dur-color) ease,
    color var(--dur-color) ease;
}

.theme-option[aria-pressed="true"] {
  background-color: var(--option-on);
  color: var(--hover-text);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.theme-option:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* While the theme changes, every color switches at once instead of fading at different speeds (theme.js adds this
   class for one frame). */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

/* 6. Interaction: colors =============================================================================================
   Color changes on hover (mouse) and keyboard focus. They aren't movement, so they stay on with reduced motion. */

@media (hover: hover) {
  .card:hover {
    border-color: var(--brand);
    background-color: var(--card-hover);
    box-shadow: var(--lift-shadow);
  }
  .card:hover .card-icon {
    border-color: var(--brand-fill);
    background-color: var(--brand-fill);
    color: #ffffff;
  }
  .card:hover .card-title,
  .card:hover .card-arrow {
    color: var(--hover-text);
  }
  .card--primary:hover {
    border-color: var(--brand-fill-hover);
    background-color: var(--brand-fill-hover);
    box-shadow: var(--cta-shadow-up);
  }
  .card--primary:hover .card-icon {
    border-color: rgba(255, 255, 255, 0.45);
    background-color: rgba(255, 255, 255, 0.2);
  }
  .card--primary:hover .card-title,
  .card--primary:hover .card-arrow {
    color: #ffffff;
  }
  .facts-link:hover {
    background-color: var(--tint);
    color: var(--hover-text);
  }
  .social:hover {
    border-color: var(--brand);
    background-color: var(--card-hover);
    box-shadow: var(--lift-shadow);
  }
  /* Each network's own color, as on the website. */
  .social--facebook:hover .social-icon {
    background-color: #1877f2;
  }
  .social--instagram:hover .social-icon {
    background-color: #e1306c;
  }
  .social--whatsapp:hover .social-icon {
    background-color: #128c7e;
  }
  .social--email:hover .social-icon {
    background-color: var(--ink);
    color: var(--page);
  }
  .footer-link:hover {
    color: var(--hover-text);
  }
  .theme-toggle:hover {
    border-color: var(--brand-fill);
    background-color: var(--brand-fill);
    color: #ffffff;
  }
  .theme-option:hover {
    color: var(--ink);
  }
  .theme-option[aria-pressed="true"]:hover {
    color: var(--hover-text);
  }
}

/* Keyboard focus looks like hover, plus the focus ring. */
.card:focus-visible {
  border-color: var(--brand);
  background-color: var(--card-hover);
}
.card:focus-visible .card-icon {
  border-color: var(--brand-fill);
  background-color: var(--brand-fill);
  color: #ffffff;
}
.card:focus-visible .card-title {
  color: var(--hover-text);
}
.card--primary:focus-visible {
  border-color: var(--brand-fill-hover);
  background-color: var(--brand-fill-hover);
}
.card--primary:focus-visible .card-icon {
  border-color: rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.2);
}
.card--primary:focus-visible .card-title {
  color: #ffffff;
}
.social:focus-visible {
  border-color: var(--brand);
}

/* 7. Motion ==========================================================================================================
   Only for people who haven't asked their device for less motion. Everything that moves uses transform or opacity.
   The logo's shadow change (filter, on one small image) is the one exception, copied from the website as is. */

@keyframes rise {
  from {
    transform: translateY(10px);
  }
}

@keyframes sweep {
  from {
    opacity: 1;
    transform: translateX(-66.667%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* --- Opening: the top lines and main buttons rise into place a beat apart (the website hero's rise-in). Movement
     only, no fade from invisible, so the page counts as painted right away. --- */
  [data-rise] {
    animation: rise var(--dur-rise) var(--ease-out) backwards;
  }
  [data-rise="1"] {
    animation-delay: calc(var(--rise-step) * 1);
  }
  [data-rise="2"] {
    animation-delay: calc(var(--rise-step) * 2);
  }
  [data-rise="3"] {
    animation-delay: calc(var(--rise-step) * 3);
  }
  [data-rise="4"] {
    animation-delay: calc(var(--rise-step) * 4);
  }
  [data-rise="5"] {
    animation-delay: calc(var(--rise-step) * 5);
  }
  [data-rise="6"] {
    animation-delay: calc(var(--rise-step) * 6);
  }

  /* The logo's sweep after the page opens (the website's .brand-mark-intro), and one on the Book button after it. */
  .brand-sheen::before {
    animation: sweep var(--dur-sweep-intro) var(--ease-sweep-intro) var(--delay-sweep-intro) both;
  }
  .card--primary::before {
    animation: sweep var(--dur-sweep-intro) var(--ease-sweep-intro) calc(var(--delay-sweep-intro) + 900ms) both;
  }

  /* --- Hover (mouse) --- */
  @media (hover: hover) {
    .brand:hover {
      transform: scale(1.03);
    }
    .brand:hover .brand-mark {
      transform: scale(1.06);
      filter: var(--mark-shadow-up);
    }
    .brand:hover .brand-sheen::after,
    .card:hover::after {
      animation: sweep var(--dur-sweep) var(--ease-sweep) both;
    }
    .card:hover,
    .social:hover {
      transform: translateY(var(--lift));
    }
    .card:hover .card-arrow,
    .facts-link:hover .facts-link-arrow {
      transform: translateX(4px);
    }
    .social:hover .social-icon {
      transform: scale(1.05);
    }
  }

  /* --- Keyboard focus: the same as hover --- */
  .brand:focus-visible .brand-mark {
    transform: scale(1.06);
    filter: var(--mark-shadow-up);
  }
  .brand:focus-visible .brand-sheen::after,
  .card:focus-visible::after {
    animation: sweep var(--dur-sweep) var(--ease-sweep) both;
  }
  .card:focus-visible {
    transform: translateY(var(--lift));
  }
  .card:focus-visible .card-arrow,
  .facts-link:focus-visible .facts-link-arrow {
    transform: translateX(4px);
  }

  /* --- Press: a little give, like the website's logo and buttons (after hover, so it wins while pressed) --- */
  .brand:active {
    transform: scale(0.98);
  }
  .brand:active .brand-mark {
    transform: scale(0.96);
    transition-duration: var(--dur-press);
  }
  .card:active,
  .social:active {
    transform: scale(0.98);
    transition-duration: var(--dur-press);
  }
  .theme-toggle:active {
    transform: scale(0.94);
  }
}

/* 8. Print ========================================================================================================= */

@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .backdrop {
    display: none;
  }
}

/* 9. Screen sizes ================================================================================================== */

/* Small phones (320 px wide): a touch tighter so the longer names fit on one line. */
@media (max-width: 359px) {
  .page {
    padding-top: 1.75rem;
  }
  .brand-mark {
    width: 6rem;
    height: 6.9rem;
  }
  .hero-eyebrow {
    gap: 0.45rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }
  .card {
    padding-right: 0.75rem;
  }
  .card-title {
    font-size: 1.375rem;
  }
  .card--primary .card-title {
    font-size: 1.625rem;
  }
  .card--compact .card-title {
    font-size: 1.25rem;
  }
  .card--compact .card-arrow {
    display: none;
  }
  .facts-item {
    gap: 0.75rem;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }
  .facts-title {
    font-size: 0.9375rem;
  }
  .facts-link {
    letter-spacing: 0.12em;
  }
}

@media (min-width: 640px) {
  .page {
    max-width: 33rem;
    padding-top: 4rem;
  }
  .brand-mark {
    width: 7.5rem;
    height: 8.63rem;
  }
}