/* ============================================================================
   YKTV.SHOP — you know the vibes
   ----------------------------------------------------------------------------
   Design notes, so the next person doesn't undo them by accident:

   The palette is not invented. Every value in --teal / --lime was sampled
   straight out of the logo file (assets/brand/logo.webp): the logo's field is
   #469e93 and its wave stroke averages #caecb0. The header sits on the exact
   logo teal so the raster wordmark blends into it with no visible box.

   The signature is STITCHING. She sews every item by hand, so every divider,
   card edge and underline in this site is a running stitch — a dashed line
   with rounded caps, never a hairline rule. If you add a border, make it
   stitched. That one idea is the whole personality; everything else stays
   quiet so it reads.
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
  /* sampled from the logo */
  --teal:        #469e93;
  --teal-deep:   #2c6b64;
  --teal-dark:   #1d4f4a;
  --lime:        #caecb0;
  --lime-bright: #dcfabb;

  /* the paper everything is printed on: warm, slightly green cardstock */
  --cream:       #faf6ea;
  --cream-deep:  #f2ecdb;
  --ink:         #17322e;
  --ink-soft:    #4a635e;

  --white:       #ffffff;
  --sale:        #c4553f;

  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shell: 1180px;
  --gap: clamp(1rem, 3vw, 2rem);
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 2px 6px rgba(23, 50, 46, .07);
  --shadow-md: 0 10px 30px rgba(23, 50, 46, .10);
  --shadow-lg: 0 22px 60px rgba(23, 50, 46, .16);

  --header-h: 74px;
}

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

/* Cards and other flex/grid items set their own `display`, which silently
   beats the `hidden` attribute — that is what stopped the shop filters from
   hiding anything. Make `hidden` mean hidden, everywhere. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--cream);
  /* a whisper of woven fabric under everything — must stay almost invisible */
  background-image:
    repeating-linear-gradient(90deg, rgba(70,158,147,.030) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg,  rgba(70,158,147,.030) 0 1px, transparent 1px 5px);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* keyboard users get a real, visible ring everywhere */
:focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-teal :focus-visible, .site-header :focus-visible, .site-footer :focus-visible {
  outline-color: var(--lime-bright);
}

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--lime-bright);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--radius) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

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

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  font-variation-settings: "wdth" 96, "opsz" 32;
}

h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: -.012em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(1.05rem, 1.9vw, 1.3rem); line-height: 1.6; color: var(--ink-soft); }
.on-teal .lede { color: rgba(255,255,255,.9); }

/* the small mono label that tags a section or a fact */
.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 1rem;
  display: flex; align-items: center; gap: .7rem;
}
.eyebrow::after {
  content: ""; flex: 1; height: 2px; max-width: 90px;
  background-image: linear-gradient(90deg, currentColor 0 6px, transparent 6px 12px);
  background-size: 12px 2px; opacity: .55;
}
.on-teal .eyebrow { color: var(--lime-bright); }

/* ---------- the stitch: this site's one signature ---------- */
.stitch {
  height: 3px; border: 0; margin: 0;
  background-image: linear-gradient(90deg, var(--teal) 0 10px, transparent 10px 20px);
  background-size: 20px 3px;
  background-repeat: repeat-x;
  border-radius: 3px;
  opacity: .5;
}
.on-teal .stitch { background-image: linear-gradient(90deg, var(--lime) 0 10px, transparent 10px 20px); opacity: .55; }

/* stitched card edge — dashed borders read as hand-sewn, hairlines don't */
.stitched {
  border: 2px dashed rgba(70,158,147,.55);
  border-radius: var(--radius-lg);
  background: var(--white);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--body); font-size: 1rem; font-weight: 700;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--ink); color: var(--lime-bright);
  cursor: pointer; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
  box-shadow: 0 3px 0 rgba(23,50,46,.28);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(23,50,46,.28); color: var(--lime-bright); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(23,50,46,.28); }

.btn-lime { background: var(--lime-bright); color: var(--ink); border-color: var(--ink); }
.btn-lime:hover { background: var(--lime); color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; }
.btn-ghost:hover { background: var(--ink); color: var(--lime-bright); box-shadow: none; }

.on-teal .btn-ghost { color: var(--white); border-color: rgba(255,255,255,.8); }
.on-teal .btn-ghost:hover { background: var(--white); color: var(--teal-deep); }

.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-sm { padding: .6rem 1.1rem; font-size: .9rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--teal);            /* exactly the logo's own field colour */
  border-bottom: 3px solid var(--teal-deep);
}
.header-inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: 1rem;
}
.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand img { height: 38px; width: auto; }
.brand:focus-visible { outline-offset: 6px; }

.nav-toggle {
  margin-left: auto; display: none;
  background: transparent; border: 2px solid rgba(255,255,255,.65); color: var(--white);
  border-radius: 10px; padding: .45rem .6rem; cursor: pointer;
}
.nav-toggle svg { display: block; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.site-nav a {
  color: var(--white); text-decoration: none;
  font-weight: 600; font-size: .97rem;
  padding: .5rem .85rem; border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.site-nav a:hover { background: rgba(255,255,255,.16); color: var(--white); }
.site-nav a[aria-current="page"] { background: var(--lime-bright); color: var(--teal-dark); }

.cart-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--ink); color: var(--lime-bright);
  border: 0; border-radius: 999px; padding: .5rem 1rem;
  font-family: var(--body); font-weight: 700; font-size: .95rem;
  text-decoration: none; cursor: pointer; margin-left: .4rem;
}
.cart-btn:hover { background: var(--teal-dark); color: var(--lime-bright); }
.cart-count {
  font-family: var(--mono); font-size: .78rem;
  background: var(--lime-bright); color: var(--ink);
  border-radius: 999px; min-width: 21px; height: 21px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 .35rem;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--teal); border-bottom: 3px solid var(--teal-deep);
    padding: .5rem 1.25rem 1.1rem;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: .8rem .6rem; border-radius: 10px; }
  .cart-btn { margin: .5rem 0 0; justify-content: center; }
}

/* ---------- hero ---------- */
.hero {
  background: var(--teal);
  color: var(--white);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  position: relative; overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
/* Looser than the global h1 on purpose: the stitched underline under <em>
   needs somewhere to sit, and at 1.02 it lands on top of the next line. */
.hero h1 { color: var(--white); margin-bottom: .35em; line-height: 1.14; }
.hero h1 em {
  font-style: normal; color: var(--lime-bright);
  /* the emphasis is underlined with the same stitch as everything else */
  background-image: linear-gradient(90deg, var(--lime-bright) 0 10px, transparent 10px 20px);
  background-size: 20px 4px; background-repeat: repeat-x; background-position: 0 calc(100% - .04em);
  padding-bottom: .1em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: .5rem .5rem; margin-top: 2rem; padding: 0; list-style: none;
}
.hero-facts li {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .04em;
  border: 2px dashed rgba(255,255,255,.5); border-radius: 999px;
  padding: .38rem .85rem; color: rgba(255,255,255,.95);
}

/* the wave: the logo's own swoosh, drawn large, threaded on load like a needle */
.hero-wave { width: 100%; height: auto; overflow: visible; }
.hero-wave path {
  fill: none; stroke: var(--lime-bright); stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round;
}
.hero-wave .thread {
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: draw 2.4s cubic-bezier(.55,.1,.3,1) .25s forwards;
}
.hero-wave .stitch-path {
  stroke: rgba(255,255,255,.55); stroke-width: 3;
  stroke-dasharray: 11 13; stroke-linecap: round;
  opacity: 0; animation: fade-in .9s ease 1.9s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero-wave .thread { animation: none; stroke-dashoffset: 0; }
  .hero-wave .stitch-path { animation: none; opacity: 1; }
}

@media (max-width: 800px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* On a phone the headline leads, not the decoration. The wave drops below
     the copy and shrinks to a signature rather than a full first screen. */
  .hero-media { order: 1; max-width: 260px; margin-inline: auto; }
}

/* ---------- generic section rhythm ----------
   One selector owns vertical padding for sections so nothing fights it later. */
.section { padding: clamp(3rem, 7vw, 5rem) 0; }
.section-teal { background: var(--teal-deep); color: var(--white); }
.section-teal h2, .section-teal h3 { color: var(--white); }
.section-cream { background: var(--cream-deep); }

.section-head { max-width: 62ch; margin-bottom: 2.2rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .eyebrow::after { display: none; }

/* Two-up section layouts. These used to be inline grid styles, which had no
   breakpoint and pushed the home page 100px wider than a phone screen. */
.split {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-aside { grid-template-columns: .85fr 1.15fr; }
}

.section-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 2.2rem;
}
.section-head-row .section-head { margin-bottom: 0; }

/* ---------- product grid ---------- */
/* Explicit column counts, not auto-fill: six products land as a clean 3x2
   instead of a lopsided 4+2, and the cards stay big enough for the photos. */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2.6vw, 1.8rem);
  list-style: none; padding: 0; margin: 0;
}
@media (min-width: 560px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--white);
  border: 2px dashed rgba(70,158,147,.55);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--teal); }
.card:focus-within { box-shadow: var(--shadow-md); }

.card-media { position: relative; background: var(--cream-deep); aspect-ratio: 3 / 4; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }

.card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card-cat {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft);
}
.card-title { font-family: var(--display); font-size: 1.16rem; line-height: 1.2; margin: 0; letter-spacing: -.01em; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; } /* whole card is the link */
.card-title a:hover { color: var(--teal-deep); }
.card-blurb { font-size: .9rem; color: var(--ink-soft); margin: 0; }

.card-foot { margin-top: auto; padding-top: .5rem; display: flex; align-items: baseline; gap: .5rem; }

.price { font-family: var(--mono); font-size: 1.06rem; font-weight: 700; color: var(--ink); }
.price-was { font-family: var(--mono); font-size: .85rem; color: var(--ink-soft); text-decoration: line-through; }

.tag {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--sale); color: var(--white);
  padding: .3rem .6rem; border-radius: 999px; font-weight: 700;
}
.tag-lime { background: var(--lime-bright); color: var(--ink); }

/* ---------- how it works: a real 4-step sequence, so numbering is earned ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.4rem; list-style: none; padding: 0; margin: 0; }
.step { position: relative; padding-top: 2.6rem; }
.step-n {
  position: absolute; top: 0; left: 0;
  font-family: var(--mono); font-size: .8rem; font-weight: 700;
  width: 2rem; height: 2rem; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--lime-bright); color: var(--ink);
}
.step h3 { margin-bottom: .3rem; font-size: 1.1rem; }
.step p { font-size: .94rem; color: rgba(255,255,255,.85); }
.section-cream .step p, .section:not(.section-teal) .step p { color: var(--ink-soft); }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.filter {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  background: transparent; color: var(--ink);
  border: 2px dashed rgba(70,158,147,.6); border-radius: 999px;
  padding: .5rem 1rem; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filter:hover { border-color: var(--teal-deep); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--lime-bright); border-color: var(--ink); border-style: solid; }

/* ---------- product detail page ---------- */
.crumbs { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; color: var(--ink-soft); padding: 1.4rem 0 0; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--teal-deep); }

.pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.4rem); align-items: start; padding: clamp(1.5rem, 4vw, 2.6rem) 0 clamp(3rem, 7vw, 5rem); }
@media (max-width: 840px) { .pdp { grid-template-columns: 1fr; } }

.gallery-main {
  border: 2px dashed rgba(70,158,147,.55); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--white); aspect-ratio: 3 / 4;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; padding: 0; list-style: none; }
.thumb {
  width: 68px; height: 88px; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px dashed rgba(70,158,147,.55); border-radius: 10px; background: var(--white);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb[aria-pressed="true"] { border-style: solid; border-color: var(--ink); }

.pdp-price { font-family: var(--mono); font-size: 1.7rem; font-weight: 700; margin: .2rem 0 1rem; display: flex; align-items: baseline; gap: .6rem; }

.field { margin-bottom: 1.2rem; }
.field > label, .field-label {
  display: block; font-family: var(--mono); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: .45rem; font-weight: 700;
}
.req { color: var(--sale); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--white);
  border: 2px solid rgba(70,158,147,.45); border-radius: 12px;
  padding: .75rem .9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--teal-deep);
  box-shadow: 0 0 0 4px rgba(70,158,147,.18);
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--sale); }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6b64' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 15px;
  padding-right: 2.6rem;
}

.error-text { color: var(--sale); font-size: .85rem; margin: .35rem 0 0; font-weight: 600; min-height: 0; }

.qty { display: inline-flex; align-items: center; border: 2px solid rgba(70,158,147,.45); border-radius: 999px; overflow: hidden; background: var(--white); }
.qty button {
  width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer;
  font-size: 1.25rem; font-weight: 700; color: var(--teal-deep); line-height: 1;
}
.qty button:hover { background: var(--cream-deep); }
.qty input {
  width: 48px; text-align: center; border: 0; border-radius: 0;
  font-family: var(--mono); font-weight: 700; padding: .5rem 0; background: transparent;
}
.qty input:focus { box-shadow: none; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input[type=number] { -moz-appearance: textfield; }

.pdp-meta { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .55rem; }
.pdp-meta li { display: flex; gap: .6rem; font-size: .93rem; color: var(--ink-soft); align-items: flex-start; }
.pdp-meta svg { flex: 0 0 auto; margin-top: .22rem; color: var(--teal); }

/* ---------- cart ---------- */
.cart-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(1.5rem, 4vw, 2.6rem); align-items: start; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-lines { list-style: none; padding: 0; margin: 0; }
.cart-line {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 1rem; align-items: center;
  padding: 1.1rem 0;
  border-bottom: 2px dashed rgba(70,158,147,.4);
}
.cart-line:first-child { border-top: 2px dashed rgba(70,158,147,.4); }
.cart-line img { width: 84px; height: 106px; object-fit: cover; border-radius: 10px; background: var(--cream-deep); }
.cart-line-name { font-family: var(--display); font-weight: 700; font-size: 1.02rem; margin: 0 0 .2rem; }
.cart-line-opt { font-family: var(--mono); font-size: .76rem; color: var(--ink-soft); margin: 0 0 .5rem; }
.cart-line-right { text-align: right; display: grid; gap: .5rem; justify-items: end; }
.link-remove {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px;
}
.link-remove:hover { color: var(--sale); }

@media (max-width: 560px) {
  .cart-line { grid-template-columns: 64px 1fr; }
  .cart-line img { width: 64px; height: 82px; }
  .cart-line-right { grid-column: 1 / -1; justify-items: start; text-align: left; }
}

.summary { position: sticky; top: calc(var(--header-h) + 1.2rem); padding: 1.5rem; }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .96rem; margin-bottom: .6rem; }
.summary-row.total { font-family: var(--mono); font-weight: 700; font-size: 1.2rem; margin: 0; padding-top: .8rem; }
.summary .stitch { margin: .8rem 0; }
.ship-note { font-size: .84rem; color: var(--ink-soft); margin-top: .9rem; }
.ship-bar { height: 8px; border-radius: 999px; background: var(--cream-deep); overflow: hidden; margin: .6rem 0 .4rem; }
.ship-bar span { display: block; height: 100%; background: var(--teal); border-radius: 999px; transition: width .35s ease; }

.empty {
  text-align: center; padding: clamp(2.5rem, 7vw, 4.5rem) 1.5rem;
  border: 2px dashed rgba(70,158,147,.5); border-radius: var(--radius-lg); background: var(--white);
}
.empty h2 { margin-bottom: .4rem; }
.empty p { color: var(--ink-soft); margin-bottom: 1.4rem; }

/* ---------- forms / panels ---------- */
.panel { background: var(--white); border: 2px dashed rgba(70,158,147,.55); border-radius: var(--radius-lg); padding: clamp(1.3rem, 3vw, 2rem); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.form-note { font-size: .86rem; color: var(--ink-soft); margin-top: 1rem; }

.form-status {
  border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1.2rem; font-weight: 600; font-size: .95rem;
  display: none;
}
.form-status.is-ok { display: block; background: #e7f5e4; color: #245c2b; border: 2px solid #8dc98c; }
.form-status.is-err { display: block; background: #fbeae6; color: #8f3624; border: 2px solid #dfa294; }
.form-status.is-busy { display: block; background: var(--cream-deep); color: var(--ink-soft); border: 2px dashed rgba(70,158,147,.5); }

/* honeypot — never shown, never announced */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- about / prose ---------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.8rem; margin-bottom: .4rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }

.qa { border-top: 2px dashed rgba(70,158,147,.4); padding: 1.4rem 0; }
.qa:last-of-type { border-bottom: 2px dashed rgba(70,158,147,.4); }
.qa h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.qa p { color: var(--ink-soft); margin: 0; }

.note-card {
  background: var(--lime-bright); border: 2px dashed var(--teal-deep);
  border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; color: var(--ink);
}
.note-card p:last-child { margin-bottom: 0; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 130%);
  z-index: 150; max-width: min(92vw, 420px);
  background: var(--ink); color: var(--lime-bright);
  border-radius: 999px; padding: .85rem 1.5rem;
  font-weight: 700; font-size: .95rem; text-align: center;
  box-shadow: var(--shadow-lg);
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.toast.is-up { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- footer ---------- */
.site-footer { background: var(--teal-dark); color: rgba(255,255,255,.82); padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; }
.site-footer h3 { color: var(--white); font-size: 1.05rem; margin-bottom: .7rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; } }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: var(--lime-bright); text-decoration: underline; }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .95rem; }
.footer-brand img { height: 40px; margin-bottom: .9rem; }
.footer-bottom {
  margin-top: 2.4rem; padding-top: 1.4rem;
  border-top: 2px dashed rgba(255,255,255,.28);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .76rem; color: rgba(255,255,255,.62);
}

/* ---------- page-load reveal: one quiet, orchestrated entrance ----------
   Hidden ONLY under .js, which an inline script in <head> sets. Content that
   starts at opacity:0 and waits for an observer is content that can vanish
   permanently when the observer misfires or the script never runs, so the
   default state here is always visible. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

@media print {
  .site-header, .site-footer, .hero-media, .btn { display: none; }
  body { background: #fff; }
}