/* Comfie — getcomfie.com
   Design tokens ported from the app (constants/theme.ts).
   Sage #8FAF7E is decorative only and never used as text;
   readable sage text is always #4F6342 (sageDeep). */

:root {
  --bg: #F5F2EE;
  --surface: #FFFFFF;
  --surface-muted: #F0EDE8;
  --surface-tile: #F3F4EC;
  --sage: #8FAF7E;
  --sage-btn: #B9C6AE;
  --sage-soft: #E6EDDE;
  --sage-deep: #4F6342;
  --sun: #E4B363;
  --warm: #E8845C;
  --ink: #1A1A1A;
  --ink-2: #6B6560;
  --ink-3: #6F6A65;
  --border: #E8E4DF;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05), 0 2px 8px rgba(26, 26, 26, 0.05);
  --shadow-md: 0 2px 6px rgba(26, 26, 26, 0.06), 0 12px 32px rgba(26, 26, 26, 0.10);
  --font: 'Crimson Text', Georgia, 'Times New Roman', serif;
}

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/crimson-text-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/crimson-text-600.woff2') format('woff2');
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }

a { color: var(--sage-deep); }

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

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -64px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  transition: top 0.15s;
}
.skip-link:focus { top: 12px; }

/* ── Header ─────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 242, 238, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: auto;
}

.brand img { display: block; object-fit: contain; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 1.0625rem;
}
.site-nav a:hover { color: var(--ink); }

@media (max-width: 720px) {
  .site-nav a:not(.btn) { display: none; }
}

/* ── Buttons ────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
  padding: 14px 26px;
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.08s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--sage-btn); }
.btn-primary:hover { background: #ADBCA1; }

.btn-outline {
  background: transparent;
  border-color: var(--sage-deep);
  color: var(--sage-deep);
}
.btn-outline:hover { background: var(--sage-soft); }

.btn-small { padding: 10px 18px; font-size: 1rem; }

/* ── Hero ───────────────────────────────────────────────── */
/* Centered column with the phone below the copy, and a full-bleed field
   of scattered clothing behind everything (the mockup layout). */

.hero {
  position: relative;
  padding: 56px 0 0;
  overflow: hidden;
}

.hero .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.hero-visual {
  position: relative;
  z-index: 2;
  margin-top: 44px;
}

.eyebrow {
  display: inline-block;
  background: var(--sage-soft);
  color: var(--sage-deep);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: var(--r-full);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2.375rem, 5.5vw, 3.5rem);
  margin-bottom: 0.4em;
}

.hero-sub {
  font-size: 1.25rem;
  color: var(--ink-2);
  max-width: 34em;
  margin: 0 auto 28px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.store-note {
  font-size: 0.9375rem;
  color: var(--ink-3);
}

/* ── Phone mockup ───────────────────────────────────────── */
/* A real iPhone 16 Pro Max frame (PNG with a transparent screen
   cutout) sits on top of the screen content. The negative bottom
   margin lets the hero's overflow clip the phone just below the
   Right Now card, so it runs off into the value strip. No idle
   float here: a bobbing phone against a hard clip edge reads as
   broken. */

.phone {
  position: relative;
  width: 300px;
  margin: 0 auto -34px;
  filter: drop-shadow(0 24px 38px rgba(26, 26, 26, 0.22))
          drop-shadow(0 6px 12px rgba(26, 26, 26, 0.10));
}

.phone-frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* The screen sits in the frame's transparent cutout, measured from
   the PNG (905x1850: cutout x 46-857, y 41-1807) with ~2px tucked
   under the bezel so no sliver of background peeks through. The
   42px top padding clears the Dynamic Island baked into the PNG. */
.phone-screen {
  position: absolute;
  z-index: 1;
  top: 1.89%;
  bottom: 1.95%;
  left: 4.42%;
  right: 4.53%;
  background: var(--bg);
  border-radius: 40px;
  padding: 42px 14px 20px;
  overflow: hidden;
}

/* Inside the phone screen (mockup: greeting, weather, hourly strip,
   Right Now card with tip + button) */

.phone-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.0625rem;
  font-weight: 600;
  padding: 0 4px 10px;
}

.ph-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.phone-weather {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px 12px;
}

.phone-weather img { width: 76px; height: 76px; flex: none; }

.pw-right { text-align: right; }

.pw-right .weather-temp { font-size: 3rem; }

.pw-cond { color: var(--ink-2); font-size: 0.9375rem; margin: 2px 0 0; }

.pw-feels { color: var(--ink-3); font-size: 0.8125rem; margin: 0; }

.phone-hours {
  padding: 0 6px 12px;
  text-align: center;
}

.ph-label {
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}

.ph-row {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.ph-row div { flex: 1; font-size: 0.6875rem; color: var(--ink-3); }

.ph-row b { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }

.phone .tiles { grid-template-columns: repeat(4, 1fr); gap: 6px; }

/* Live outfits run 3 to 8 pieces. js/demo.js adds .tiles-even and sets
   --cols so every row stays balanced (5 -> 3+2, 7 -> 4+3) and a short
   last row sits centered. The static fallback keeps the 4-column grid. */
.phone .tiles.tiles-even {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.phone .tiles.tiles-even .tile {
  width: calc((100% - (var(--cols) - 1) * 6px) / var(--cols) - 0.5px);
}

.phone .tile { padding: 8px 2px 6px; border-radius: 10px; }

.phone .tile img { width: 40px; height: 40px; }

.phone .tile span { font-size: 0.625rem; }

.phone .outfit-summary { font-size: 0.8125rem; }

.phone-tip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--sage-soft);
  color: var(--sage-deep);
  font-size: 0.8125rem;
  text-align: left;
  border-radius: var(--r-sm);
  padding: 8px 10px;
  margin: 10px 0 0;
}

.phone-tip svg { flex: none; }

.phone-cta {
  display: block;
  background: var(--sage-btn);
  border-radius: var(--r-full);
  text-align: center;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 10px 12px;
  margin-top: 10px;
}

/* ── Hero scatter field (js/scatter.js) ─────────────────── */
/* The pieces sit at their inline --x/--y spots as pure decoration. On
   wide screens the script flies the data-fly pieces into the phone's
   tiles on scroll and fades the rest. Without the script this is
   exactly the static mockup. */

.hero-scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-scatter img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(74px * var(--s, 1));
  height: auto;
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(0 2px 5px rgba(26, 26, 26, 0.07));
  will-change: transform, opacity;
  z-index: 1;
}

.hero-scatter img.is-flying { z-index: 7; }

@media (max-width: 719px) {
  .hero-scatter img { display: none; }
  .hero-scatter img.sc-keep {
    display: block;
    width: calc(48px * var(--s, 1));
    opacity: 0.7;
  }
}

.tile-img-hidden { visibility: hidden; }

/* scatter.js still toggles float-paused; with the float animation
   gone (the clipped phone must not bob) the class is a no-op. */
.phone.float-paused { animation-play-state: paused; }

/* App-style cards inside the phone + demo */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sage-soft);
  color: var(--sage-deep);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--r-full);
}

.weather-now {
  display: flex;
  align-items: center;
  gap: 14px;
}

.weather-now img { width: 56px; height: 56px; flex: none; }

.weather-temp {
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
}

.weather-cond { color: var(--ink-2); font-size: 1rem; margin: 2px 0 0; }

.weather-stats {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.weather-stats div {
  flex: 1;
  background: var(--surface-tile);
  border-radius: var(--r-sm);
  text-align: center;
  padding: 7px 4px;
}

.weather-stats .stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-3);
}

.weather-stats .stat-value {
  font-weight: 600;
  font-size: 0.9375rem;
}

.outfit-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  margin-top: 12px;
}

.outfit-card h3 {
  font-size: 1.0625rem;
  margin: 0 0 2px;
}

.outfit-summary {
  color: var(--ink-2);
  font-size: 0.9375rem;
  margin: 0 0 12px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile {
  background: var(--surface-tile);
  border-radius: var(--r-md);
  padding: 10px 6px 8px;
  text-align: center;
  margin: 0;
}

.tile img {
  width: 54px; height: 54px;
  object-fit: contain;
  display: block;
  margin: 0 auto 4px;
}

.tile span {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

/* ── Value strip ────────────────────────────────────────── */

.value-strip {
  padding: 26px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.value-strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  justify-content: center;
}

.value-strip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 1.0625rem;
}

.value-strip .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sage);
  flex: none;
}

/* ── Sections ───────────────────────────────────────────── */

section { padding: 72px 0; }

.section-head {
  max-width: 620px;
  margin: 0 auto 44px;
  text-align: center;
}

.section-head h2 { font-size: clamp(1.75rem, 3.5vw, 2.375rem); }

.section-head p { color: var(--ink-2); font-size: 1.1875rem; margin: 0; }

/* ── Demo ───────────────────────────────────────────────── */

.demo-section { background: var(--surface-muted); }

.demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-bottom: 26px;
}

.city-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 340px;
}

.city-search input {
  width: 100%;
  font-family: var(--font);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  padding: 13px 20px;
}

.city-search input::placeholder { color: var(--ink-3); }

.city-search input:focus {
  outline: none;
  border-color: var(--sage-deep);
}

.city-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
}

.city-results:empty { display: none; }

.city-results button {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  font-size: 1.0625rem;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  padding: 10px 12px;
  cursor: pointer;
}

.city-results button:hover { background: var(--surface-tile); }

.city-results .city-region {
  color: var(--ink-3);
  font-size: 0.9375rem;
}

.unit-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  padding: 3px;
}

.unit-toggle button {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-2);
  background: none;
  border: none;
  border-radius: var(--r-full);
  padding: 8px 16px;
  cursor: pointer;
}

.unit-toggle button[aria-pressed="true"] {
  background: var(--sage-btn);
  color: var(--ink);
}

/* Demo result card */

.demo-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px;
}

.demo-loading {
  text-align: center;
  color: var(--ink-3);
  padding: 48px 0;
}

@media (prefers-reduced-motion: no-preference) {
  .demo-loading { animation: pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
}

.demo-error { text-align: center; padding: 32px 0; }

.demo-result { display: none; }
.demo-result.is-ready { display: block; }

.demo-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 18px;
}

.demo-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 720px) { .demo-grid { grid-template-columns: 1fr; } }

.demo-weather .weather-now img { width: 72px; height: 72px; }

.demo-weather .weather-temp { font-size: 3.5rem; }

.demo-outfit h3 { font-size: 1.25rem; margin-bottom: 2px; }

.demo-outfit .tiles {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.demo-outfit .tile img { width: 64px; height: 64px; }

/* The outfit "rains" into the demo card: each piece drops into its tile
   with a small stagger. js/demo.js adds .tiles-drop when a fresh outfit
   renders inside the viewport. */
.tiles-drop .tile img {
  animation: tile-drop 0.55s cubic-bezier(0.2, 0.7, 0.3, 1.2) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes tile-drop {
  from { opacity: 0; transform: translateY(-70px) rotate(-8deg); }
  65% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tiles-drop .tile img { animation: none; }
}

.demo-note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 1rem;
  text-align: center;
}

.demo-note a { font-weight: 600; }

/* ── Feature grid ───────────────────────────────────────── */

/* Two columns so the 8 cards fill every row evenly. Capped and centered so the
   cards don't stretch to half the viewport on a wide screen. */
.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}

@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 22px;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--surface-tile);
  font-size: 1.5rem;
  margin-bottom: 14px;
}

.feature-icon img { width: 36px; height: 36px; object-fit: contain; }

.feature h3 { font-size: 1.25rem; }

.feature p { color: var(--ink-2); font-size: 1.0625rem; margin: 0; }

/* ── FAQ ────────────────────────────────────────────────── */

.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-list details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-list summary {
  cursor: pointer;
  font-size: 1.1875rem;
  font-weight: 600;
  padding: 18px 22px;
  list-style: none;
  position: relative;
  padding-right: 52px;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--sage-deep);
}

.faq-list details[open] summary::after { content: '\2212'; }

.faq-list .faq-body {
  padding: 0 22px 20px;
  color: var(--ink-2);
}

.faq-list .faq-body p:last-child { margin-bottom: 0; }

/* ── Download band ──────────────────────────────────────── */

.download-band {
  background: var(--sage-soft);
  border-radius: var(--r-lg);
  padding: 56px 32px;
  text-align: center;
}

.download-band h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); }

.download-band p {
  color: var(--ink-2);
  font-size: 1.1875rem;
  max-width: 32em;
  margin: 0 auto 26px;
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 18px;
}

/* Apple's official "Download on the App Store" badge, used as supplied: the artwork
   is never recolored, restyled or redrawn, so hover moves it but leaves it untouched.
   Padding is the clear space Apple requires, at least 10% of the badge height. */
.store-badge {
  display: inline-block;
  padding: 6px;
  transition: transform 0.08s ease;
}

.store-badge:hover { transform: translateY(-1px); }

.store-badge img { display: block; height: 54px; width: auto; }

/* ── Footer ─────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 48px;
  margin-top: 24px;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-brand { max-width: 300px; }

.footer-brand .brand { margin-bottom: 8px; }

.footer-brand p { color: var(--ink-3); font-size: 1rem; margin: 0; }

.footer-links {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-links h3 {
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

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

.footer-links li { margin-bottom: 8px; }

.footer-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 1.0625rem;
}

.footer-links a:hover { color: var(--ink); text-decoration: underline; }

.footer-fine {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  color: var(--ink-3);
  font-size: 0.9375rem;
}

.footer-fine a { color: var(--ink-3); }

/* Consent reopener: a real button (it triggers script, not navigation) that
   reads as a link next to its neighbours in the footer line. */
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Legal pages (privacy / support) ────────────────────── */

.page-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

.page-main h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); }

.page-main .page-updated { color: var(--ink-3); font-size: 1rem; }

.page-main h2 { font-size: 1.5rem; margin-top: 1.6em; }

.page-main ul { color: var(--ink); }

.page-main li { margin-bottom: 6px; }

.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  margin: 24px 0;
  text-align: center;
}

.contact-card .btn { margin-top: 6px; }

/* ── Blog ───────────────────────────────────────────────── */
/* Posts reuse .page-main for the reading column. Everything below is
   the extra furniture a post needs: breadcrumb, lead, band table,
   callout and the closing CTA. */

.breadcrumb {
  color: var(--ink-3);
  font-size: 0.9375rem;
  margin-bottom: 14px;
}

.breadcrumb a { color: var(--ink-3); }

.post-meta {
  color: var(--ink-3);
  font-size: 1rem;
  margin-bottom: 1.4em;
}

.post-lead {
  font-size: 1.25rem;
  color: var(--ink-2);
}

.post-lead strong { color: var(--ink); }

.post h2 { margin-top: 1.5em; }

.post h3 { font-size: 1.1875rem; margin-top: 1.4em; }

.post ol { padding-left: 1.2em; }

.post ol li { margin-bottom: 10px; }

.post figure {
  margin: 32px 0;
}

.post figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  background: var(--surface-muted);
}

.post figcaption {
  color: var(--ink-3);
  font-size: 0.9375rem;
  text-align: center;
  margin-top: 10px;
}

/* ── Temperature range chart (blog) ─────────────────────── */
/* Two bars against a shared feels-like axis, showing that the hoodie has a
   narrow window and jeans have a wide one. Pure CSS: each bar is placed with
   --from/--to as percentages of the 20°F to 85°F scale, so changing a band
   means editing one number in the markup. The figure carries role="img" and
   an aria-label, because the table underneath is the accessible detail. */

.temp-chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 24px 26px 20px;
  margin: 28px 0;
}

.tc-plot {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: end;
  gap: 0 18px;
}

.tc-axis {
  position: relative;
  height: 300px;
  width: 3.2em;
}

.tc-axis span {
  position: absolute;
  right: 0;
  bottom: var(--t);
  transform: translateY(50%);
  font-size: 0.8125rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.tc-head {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
}

/* Warm cream rather than the greenish tile, so the pale sage band reads as
   a distinct colour against the empty part of the track and not as a shade. */
.tc-track {
  position: relative;
  height: 300px;
  background: var(--bg);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.tc-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--t);
  height: 1px;
  background: var(--border);
}

.tc-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--from);
  height: calc(var(--to) - var(--from));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 6px;
}

.tc-bar b {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0 4px;
}

.tc-solid { background: var(--sage); }

.tc-solid b { color: #22301A; }

.tc-soft { background: var(--sage-soft); }

.tc-soft b { color: var(--sage-deep); }

.tc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
  margin-top: 16px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.tc-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tc-swatch {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  flex: none;
}

.tc-swatch.tc-solid { background: var(--sage); }

.tc-swatch.tc-soft { background: var(--sage-soft); border: 1px solid var(--sage-btn); }

@media (max-width: 560px) {
  .temp-chart { padding: 20px 16px 16px; }
  .tc-plot { gap: 0 12px; }
  .tc-axis, .tc-track { height: 250px; }
  .tc-bar b { font-size: 0.75rem; }
}

/* Temporary: marks where an illustration goes before the artwork exists.
   Delete the whole block when the real <figure> replaces it. */
.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  background: var(--sage-soft);
  border: 2px dashed var(--sage);
  border-radius: var(--r-md);
  color: var(--sage-deep);
  padding: 40px 24px;
  margin: 32px 0;
  min-height: 180px;
}

.img-placeholder b { font-size: 1.0625rem; }

.img-placeholder span { font-size: 0.9375rem; opacity: 0.85; }

.post-callout {
  background: var(--sage-soft);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin: 24px 0;
}

.post-callout p { margin: 0; font-size: 1.0625rem; }

/* The temperature table is the page's answer box. It scrolls inside its
   own box on narrow screens so the page itself never scrolls sideways.
   The container takes tabindex in the markup so keyboard users can reach
   the scroll too. */
.table-scroll {
  overflow-x: auto;
  margin: 24px 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.table-hint {
  display: none;
  color: var(--ink-3);
  font-size: 0.9375rem;
  margin: 0 0 24px;
}

@media (max-width: 640px) {
  .table-hint { display: block; }
}

.band-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 1rem;
}

.band-table th,
.band-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.band-table thead th {
  background: var(--surface-tile);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.band-table tbody tr:last-child td { border-bottom: 0; }

.band-table td:first-child { white-space: nowrap; font-weight: 600; }

.band-table td:last-child { color: var(--ink-2); }

/* The row the whole page is about. */
.band-table tr.is-answer td { background: var(--sage-soft); }

@media (max-width: 640px) {
  .band-table { font-size: 0.9375rem; }
  .band-table th, .band-table td { padding: 10px 12px; }
}

/* Tinted so it reads as an ending, not as one more article card. */
.post-cta {
  background: var(--sage-soft);
  border-radius: var(--r-lg);
  padding: 28px;
  margin: 40px 0 28px;
}

.post-cta h2 { margin-top: 0; font-size: 1.5rem; }

.post-cta p:last-of-type { margin-bottom: 0; }

.post-cta .store-badges { margin: 18px 0 0; justify-content: flex-start; }

.post-note {
  color: var(--ink-3);
  font-size: 0.9375rem;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* Blog index */

.post-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 18px;
  overflow: hidden;
}

/* The thumbnail runs edge to edge, so the padding lives on the body instead. */
.post-card-media {
  display: block;
  background: var(--surface-muted);
}

.post-card-media img {
  display: block;
  width: 100%;
  height: auto;
}

.post-card-body { padding: 26px 28px; }

.post-card h2 { font-size: 1.5rem; margin-top: 0; }

.post-card h2 a { color: var(--ink); text-decoration: none; }

.post-card h2 a:hover { text-decoration: underline; }

.post-card p { color: var(--ink-2); font-size: 1.0625rem; }

.post-card p:last-child { margin-bottom: 0; }

.post-card .post-meta { margin-bottom: 0.8em; }

/* ── Cookie consent banner ──────────────────────────────── */

.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.consent-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
}

.consent-text {
  margin: 0;
  flex: 1 1 320px;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.5;
}

.consent-text a { color: var(--sage-deep); }

.consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1; }
}