/* ═══════════════════════════════════════════════════════
   Saddle Boy Vintage
   Cream throughout, navy for every piece of type.
   Photography carries the colour; the chrome stays quiet.
   ═══════════════════════════════════════════════════════ */
:root{
  /* Brand */
  /* One navy everywhere. Logo.png has been remapped to this exact
     value, so the mark never sits on a near-miss. */
  --navy:        #0e2647;
  --navy-deep:   #091a33;
  --navy-logo:   var(--navy);

  /* Breaker band accent */
  --pink:        #ffa3dc;
  --cream:       #f6f1e8;
  --cream-warm:  #ece3d5;
  --cream-deep:  #e4d9c7;
  --tan:         #b0895c;
  --tan-light:   #c9a87e;
  --tan-ink:     #7d5a35;   /* darkened for legibility on cream (5.4:1) */

  /* Semantic */
  --bg:          var(--cream);
  --bg-alt:      var(--cream-warm);
  --text:        var(--navy);
  --text-muted:  #4a5a6b;
  --accent:      var(--tan-ink);
  --line:        rgba(14,38,71,.16);
  --line-strong: rgba(14,38,71,.32);

  /* On the one dark photo band */
  --on-dark:       #f6f1e8;
  --on-dark-muted: rgba(246,241,232,.72);

  /* Type */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body:    Georgia, 'Times New Roman', serif;
  --font-script:  'Great Vibes', 'Snell Roundhand', 'Apple Chancery', cursive;

  /* Weights — heavier across the board */
  --w-body:    400;
  --w-medium:  500;
  --w-label:   600;
  --w-display: 400;

  /* Spacing (4/8 rhythm) */
  --sp-1:.5rem; --sp-2:1rem;  --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem;  --sp-6:4rem;  --sp-7:6rem;   --sp-8:8rem;

  --container:1280px;
  --radius:2px;
  --nav-h:90px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:320ms;

  --z-nav:100; --z-menu:200; --z-skip:300; --z-lock:1000; --z-cursor:2000;
}

/* ── Reset ─────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:var(--w-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:var(--w-display); letter-spacing:normal; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

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

/* ── Cursor horseshoe ──────────────────────────────── */
/* Hidden by default; main.js opts in only for fine pointers
   with motion allowed, so touch users never get a stray shape. */
.horseshoe{
  position:fixed; left:0; top:0; z-index:var(--z-cursor);
  width:32px; height:32px;
  margin:-16px 0 0 -16px;         /* centre on the pointer */
  pointer-events:none;
  display:none;
  opacity:0;
  color:var(--cream);
  /* Difference keeps it legible on cream, navy, brown and photos alike */
  mix-blend-mode:difference;
  transition:opacity 300ms var(--ease);
  will-change:transform;
}
.horseshoe svg{ display:block; }
.horseshoe.is-on{ display:block; }
.horseshoe.is-visible{ opacity:.9; }

/* ── Lock screen ───────────────────────────────────── */
/* Navy so the logo art, which carries its own navy ground,
   sits flush instead of reading as a block on cream. */
.lock{
  position:fixed; inset:0; z-index:var(--z-lock);
  background:var(--navy-logo);
  color:var(--on-dark);
  display:grid; place-items:center;
  padding:var(--sp-4) var(--sp-3);
  opacity:1;
  transition:opacity 420ms var(--ease);
}
.lock--out{ opacity:0; }
.is-unlocked .lock{ display:none; }

/* The page focus ring is navy, which would vanish here */
.lock :focus-visible{ outline-color:var(--tan-light); }

.lock__inner{ width:100%; max-width:22rem; text-align:center; }
.lock__logo{ width:220px; height:auto; margin:0 auto var(--sp-4); }
.lock__note{
  color:var(--on-dark-muted); font-size:.9375rem;
  margin-bottom:var(--sp-4);
}
.lock__form{ text-align:left; }
.lock__form label{
  display:block; margin-bottom:.5rem;
  font-size:.6875rem; font-weight:var(--w-label);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-muted);
}
.lock__row{ position:relative; display:flex; }
.lock__row input{
  width:100%; min-height:48px;
  padding:.75rem 5.25rem .75rem 1rem;
  background:rgba(246,241,232,.07);
  border:1.5px solid rgba(246,241,232,.45);
  border-radius:var(--radius);
  color:var(--on-dark);
  letter-spacing:.08em;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lock__row input:focus{ border-color:var(--tan-light); background:rgba(246,241,232,.12); }
.lock__row input[aria-invalid="true"]{ border-color:#e08b7e; }
.lock__peek{
  /* Full row height so the tap target clears 44px; no fill, so it reads inset */
  position:absolute; right:0; top:0; bottom:0;
  min-width:60px; padding:0 1rem;
  background:none; border:0; cursor:pointer;
  font-size:.6875rem; font-weight:var(--w-label);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-dark-muted);
  border-radius:var(--radius);
}
.lock__peek:hover{ color:var(--on-dark); }
.lock__error{
  margin-top:.6rem; font-size:.8125rem; font-weight:var(--w-medium);
  color:#f0a99d;
}
.lock__form .btn{ margin-top:var(--sp-3); }
/* Invert the solid button: navy on navy would disappear */
.lock .btn--solid{ background:var(--cream); color:var(--navy); }
.lock .btn--solid:hover{ background:#fff; }

/* The hero entrance waits for the gate to open */
.hero__media img{ animation:none; }
.is-unlocked .hero__media img{ animation:heroIn 1400ms var(--ease) both; }

.skip-link{
  position:absolute; left:var(--sp-2); top:-4rem; z-index:var(--z-skip);
  background:var(--navy); color:var(--cream);
  padding:.75rem 1.25rem; font-weight:var(--w-medium);
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{ top:var(--sp-2); }

/* ── Shared type ───────────────────────────────────── */
.eyebrow{
  margin:0 0 var(--sp-2);
  font-size:.6875rem;
  font-weight:var(--w-label);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow--navy{ color:var(--navy); }
.h2{
  font-family:var(--font-display);
  font-size:clamp(2.25rem,5vw,3.75rem);
  font-weight:var(--w-display);
  line-height:1.05;
}
.h2 em{ font-style:italic; }

/* ── Buttons ───────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:.85rem 2rem;
  font-size:.75rem; font-weight:var(--w-label);
  letter-spacing:.14em; text-transform:uppercase;
  border:1.5px solid transparent; border-radius:var(--radius);
  cursor:pointer;
  transition:background var(--dur) var(--ease),
             color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             opacity var(--dur) var(--ease);
}
.btn--solid{ background:var(--navy); color:var(--cream); }
.btn--solid:hover{ background:var(--navy-deep); }
.btn--line{ border-color:var(--navy); color:var(--navy); }
.btn--line:hover{ background:var(--navy); color:var(--cream); }
.btn--ghost{ border-color:var(--line-strong); color:var(--navy); }
.btn--ghost:hover{ background:var(--navy); color:var(--cream); border-color:var(--navy); }
.btn--full{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ── Nav ───────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-nav);
  padding:var(--sp-3) 0;
  /* Solid, flat match to logo.png's own navy fill (#0e2647) — no
     transparency or blur, so the logo image sits with no visible seam. */
  background:var(--navy);
  box-shadow:0 1px 0 rgba(246,241,232,.14);
  color:var(--on-dark);
  transition:padding var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.nav__inner{
  max-width:var(--container); margin:0 auto;
  padding:0 var(--sp-3);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
}
.nav.is-stuck{
  padding:var(--sp-2) 0;
  box-shadow:0 1px 0 rgba(246,241,232,.14), 0 8px 24px rgba(20,32,46,.18);
}
.nav :focus-visible{ outline-color:var(--tan-light); }

.wordmark{ display:flex; align-items:center; }
.wordmark__logo{ width:auto; height:72px; }

.nav__links{ display:flex; gap:var(--sp-4); }
.nav__links a{
  position:relative;
  font-size:.75rem; font-weight:var(--w-medium);
  letter-spacing:.12em; text-transform:uppercase;
  padding:.5rem 0;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform var(--dur) var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__toggle{
  display:none;
  width:48px; height:48px; padding:0;
  background:none; border:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.nav__toggle span{
  display:block; width:24px; height:2px; background:currentColor;
  transition:transform var(--dur) var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:var(--cream);
  display:grid; place-items:center;
  animation:fade 240ms var(--ease);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:var(--sp-3); text-align:center; }
.mobile-menu a{
  color:var(--navy);
  font-family:var(--font-display); font-size:2.25rem;
  font-style:italic; font-weight:var(--w-display);
  padding:.5rem 1rem;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }

/* ── Hero (split: photo + cream panel) ─────────────── */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:var(--nav-h);
  min-height:calc(100svh - var(--nav-h));
}
.hero__media{ position:relative; overflow:hidden; background:var(--bg-alt); }
/* Absolute so the photo's intrinsic height never drives the hero's,
   letting the panel and min-height own the row instead. */
.hero__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 50%;
  /* animation is set by the lock rules above, so it fires on unlock */
}
@keyframes heroIn{ from{ transform:scale(1.08); opacity:0 } to{ transform:scale(1.04); opacity:1 } }

.hero__panel{
  display:flex; align-items:center;
  padding:var(--sp-7) var(--sp-5);
  border-left:1px solid var(--line);
}
.hero__content{ max-width:34rem; margin-left:auto; }
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(3rem,6vw,5.25rem);
  font-weight:var(--w-display);
  line-height:1.05; letter-spacing:normal;
  margin-bottom:var(--sp-3);
}
.hero__title em{ font-style:italic; }
.hero__sub{
  max-width:44ch; font-size:1.0625rem;
  color:var(--text-muted);
  margin-bottom:var(--sp-4);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }

/* ── Marquee ───────────────────────────────────────── */
.marquee{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:var(--sp-2) 0; overflow:hidden;
  background:var(--navy);
}
.marquee__track{
  display:flex; align-items:center;
  width:max-content;
  animation:scrollX 38s linear infinite;
  font-family:var(--font-display);
  font-size:1.375rem; font-style:italic; font-weight:var(--w-display);
  color:var(--on-dark);
}
/* Margin, not gap — see note on .breaker__track */
.marquee__track > *{ margin-right:var(--sp-4); }
.marquee__track i{ color:var(--pink); font-style:normal; font-size:.625rem; }
@keyframes scrollX{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ── Section shell ─────────────────────────────────── */
.section{
  max-width:var(--container); margin:0 auto;
  padding:var(--sp-6) var(--sp-3) var(--sp-8);
}
.section__head{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:var(--sp-3);
  padding-bottom:var(--sp-4);
  margin-bottom:var(--sp-5);
  border-bottom:1.5px solid var(--line);
}
.section__note{ max-width:42ch; color:var(--text-muted); font-size:.9375rem; }
.section__foot{ margin-top:var(--sp-6); text-align:center; }

/* ── Edit grid ─────────────────────────────────────── */
.edit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.card--tall{ grid-row:span 2; }
.card--wide{ grid-column:span 2; }

.card__link{ display:block; }
.card__media{
  position:relative; overflow:hidden;
  background:var(--bg-alt);
  aspect-ratio:3/4;
}
.card--tall .card__media{ aspect-ratio:3/5.1; }
.card--wide .card__media{ aspect-ratio:16/10; }
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 600ms var(--ease);
}
.card__link:hover .card__media img{ transform:scale(1.045); }

.tag{
  position:absolute; top:var(--sp-2); left:var(--sp-2);
  background:var(--navy); color:var(--cream);
  padding:.4rem .75rem;
  font-size:.5625rem; font-weight:var(--w-label);
  letter-spacing:.16em; text-transform:uppercase;
}
.card__body{ padding:var(--sp-2) 0 0; }
.card__body h3{
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:var(--w-display); line-height:1.2;
}
.card__meta{ margin-top:.3rem; font-size:.8125rem; color:var(--text-muted); }
.card__price{
  margin-top:.5rem;
  font-size:.9375rem; font-weight:var(--w-medium);
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}

/* ── Breaker band ──────────────────────────────────── */
.breaker{
  position:relative; overflow:hidden;
  background:var(--navy);
  min-height:56vh;
  display:grid; place-items:center;
  padding:var(--sp-8) var(--sp-3);
}
/* Anchored to the bottom edge and pushed down past it, so the script
   is sliced through the middle and reads as a suggestion, not a label. */
.breaker__scroll{
  position:absolute; left:0; right:0; bottom:0;
  transform:translateY(42%);
  pointer-events:none;
}
.breaker__track{
  display:flex; align-items:flex-end;
  width:max-content;
  animation:scrollX 60s linear infinite;
}
/* Spacing lives on the items, not as gap: translateX(-50%) must land
   exactly on a repeat boundary or the loop visibly jumps. */
.breaker__track span{
  font-family:var(--font-script);
  font-weight:400; font-style:normal;
  font-size:clamp(6rem,18vw,16rem);
  line-height:1; white-space:nowrap;
  color:var(--pink);
  margin-right:4rem;
}
.breaker__label{ position:relative; text-align:center; }
.breaker__eyebrow{
  font-size:.6875rem; font-weight:var(--w-label);
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(246,241,232,.78);
  margin-bottom:var(--sp-2);
}
.breaker__title{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:var(--w-display);
  letter-spacing:.01em;
  color:var(--cream);
}

/* ── Split / story ─────────────────────────────────── */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--sp-6); align-items:center;
  max-width:var(--container); margin:0 auto;
  padding:var(--sp-6) var(--sp-3) var(--sp-8);
}
.split__media{ aspect-ratio:4/5; overflow:hidden; background:var(--bg-alt); }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__body .h2{ margin-bottom:var(--sp-3); }
.split__body p{ margin-top:var(--sp-3); color:var(--text-muted); max-width:52ch; }

/* ── Editorial band (the one dark moment) ──────────── */
.band{
  position:relative; min-height:70vh;
  display:grid; place-items:center;
  padding:var(--sp-8) var(--sp-3);
  overflow:hidden;
}
.band__media{ position:absolute; inset:0; }
.band__media img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.band__scrim{ position:absolute; inset:0; background:rgba(20,32,46,.52); }
.band__quote{
  position:relative; margin:0; max-width:22ch; text-align:center;
  color:var(--on-dark);
}
.band__quote p{
  font-family:var(--font-display);
  font-size:clamp(1.75rem,4.5vw,3.25rem);
  font-style:italic; font-weight:var(--w-display); line-height:1.18;
}
.band__quote cite{
  display:block; margin-top:var(--sp-3);
  font-family:var(--font-body); font-style:normal;
  font-size:.6875rem; font-weight:var(--w-label);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-dark-muted);
}

/* ── Journal ───────────────────────────────────────── */
.journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.post__media{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-alt); margin-bottom:var(--sp-2); }
.post__media img{ width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease); }
.post a:hover .post__media img{ transform:scale(1.045); }
.post__date{
  font-size:.6875rem; font-weight:var(--w-label);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.4rem;
}
.post h3{
  font-family:var(--font-display); font-size:1.5rem;
  font-weight:var(--w-display); line-height:1.25; max-width:22ch;
}

/* ── Contact ───────────────────────────────────────── */
.contact{
  padding:var(--sp-8) var(--sp-3);
  background:var(--bg-alt);
  border-top:1px solid var(--line);
}
.contact__inner{ max-width:640px; margin:0 auto; text-align:center; }
.contact__title{
  font-family:var(--font-display);
  font-size:clamp(2.25rem,5.5vw,4rem);
  font-weight:var(--w-display); line-height:1.04;
  margin-bottom:var(--sp-3);
}
.contact__title em{ font-style:italic; }
.contact__sub{ color:var(--text-muted); max-width:44ch; margin:0 auto var(--sp-5); }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); text-align:left; }
.field--full{ grid-column:1 / -1; }
.field label{
  display:block; margin-bottom:.5rem;
  font-size:.6875rem; font-weight:var(--w-label);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy);
}
.field label span{ color:var(--tan-ink); }
.field input,.field textarea{
  width:100%; min-height:48px; padding:.75rem 1rem;
  background:var(--cream);
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius);
  color:var(--navy);
  transition:border-color var(--dur) var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input::placeholder,.field textarea::placeholder{ color:#8a97a5; }
.field input:focus,.field textarea:focus{ border-color:var(--navy); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:#a33a2e; }

.hint{ margin-top:.5rem; font-size:.8125rem; color:var(--text-muted); }
.error{
  margin-top:.5rem; font-size:.8125rem; font-weight:var(--w-medium);
  color:#8f2f24; display:flex; align-items:center; gap:.4rem;
}
.error::before{
  content:'!'; display:grid; place-items:center;
  width:15px; height:15px; border:1.5px solid currentColor; border-radius:50%;
  font-size:.625rem; flex-shrink:0;
}
.form__status{
  margin-top:var(--sp-2); text-align:center;
  font-size:.875rem; font-weight:var(--w-medium);
  color:var(--tan-ink); min-height:1.4em;
}

/* ── Footer ────────────────────────────────────────── */
/* Navy matched to the logo art so the mark sits flush.
   The logo's lettering is cream, so it needs a navy ground. */
.footer{
  padding:var(--sp-6) var(--sp-3) var(--sp-3);
  background:var(--navy-logo);
  color:var(--on-dark);
}
.footer :focus-visible{ outline-color:var(--tan-light); }
.footer__top{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr 1.2fr; gap:var(--sp-6);
  padding-bottom:var(--sp-5);
  border-bottom:1px solid rgba(246,241,232,.30);
}
.footer__logo{ width:190px; height:auto; margin-bottom:var(--sp-3); }
.footer__brand p{ color:var(--on-dark-muted); font-size:.9375rem; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.footer__cols h4{
  font-size:.6875rem; font-weight:var(--w-label);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--tan-light); margin-bottom:var(--sp-2);
}
.footer__cols a{
  display:block; padding:.4rem 0;
  color:var(--on-dark-muted); font-size:.9375rem;
  transition:color var(--dur) var(--ease);
}
.footer__cols a:hover{ color:var(--on-dark); }

.footer__bottom{
  max-width:var(--container); margin:0 auto;
  padding-top:var(--sp-3);
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  justify-content:space-between;
  font-size:.8125rem; color:var(--on-dark-muted);
}

/* ── Login page ────────────────────────────────────── */
.lock--page{ position:static; min-height:100svh; opacity:1; }

/* ── Admin ─────────────────────────────────────────── */
.admin-bar{
  background:var(--navy); color:var(--on-dark);
  padding:var(--sp-2) var(--sp-3);
}
.admin-bar :focus-visible{ outline-color:var(--tan-light); }
.admin-bar__inner{
  max-width:900px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-2); flex-wrap:wrap;
}
.admin-bar .btn--ghost{ color:var(--on-dark); border-color:rgba(246,241,232,.4); min-height:42px; padding:.5rem 1.1rem; }
.admin-bar .btn--ghost:hover{ background:var(--cream); color:var(--navy); border-color:var(--cream); }

.admin{ max-width:900px; margin:0 auto; padding:var(--sp-5) var(--sp-3) var(--sp-8); }
.notice{
  padding:var(--sp-2) var(--sp-3);
  margin-bottom:var(--sp-4);
  border-radius:var(--radius);
  font-size:.9375rem; line-height:1.55;
}
.notice code{ font-size:.875rem; background:rgba(14,38,71,.08); padding:.1em .4em; border-radius:2px; }
.notice--warn{ background:#fdf3e3; border:1px solid #d9a441; color:#6b4a12; }
.admin__block{ margin-bottom:var(--sp-6); }
.admin__block .h2{ margin-bottom:.5rem; }
.admin__block .section__note{ margin-bottom:var(--sp-3); }
.admin__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); }
.admin__product{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--sp-3); margin:0 0 var(--sp-3);
}
.admin__product legend{
  padding:0 .5rem;
  font-size:.6875rem; font-weight:var(--w-label);
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.admin .field label{
  display:block; margin-bottom:.5rem;
  font-size:.6875rem; font-weight:var(--w-label);
  letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
}
.admin .field input{
  width:100%; min-height:48px; padding:.75rem 1rem;
  background:#fffdf9;
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius); color:var(--navy);
  transition:border-color var(--dur) var(--ease);
}
.admin .field input:focus{ border-color:var(--navy); }

.admin__photo{ margin-top:var(--sp-3); }
.admin__photo-row{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.admin__photo-preview{
  width:96px; height:96px; flex-shrink:0;
  border:1.5px solid var(--line-strong); border-radius:var(--radius);
  background:var(--bg-alt); overflow:hidden;
  display:grid; place-items:center;
}
.admin__photo-preview img{ width:100%; height:100%; object-fit:cover; }
.admin__photo-preview span{ font-size:.6875rem; color:var(--text-muted); text-align:center; padding:0 .4rem; }
.admin__photo-actions{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.admin__photo-actions label.btn{ position:relative; overflow:hidden; cursor:pointer; }
.admin .field input.admin__file-input{
  position:absolute; inset:0;
  width:100%; height:100%; min-height:0;
  margin:0; padding:0; border:0; background:none;
  opacity:0; cursor:pointer;
}
.admin__save{
  position:sticky; bottom:0;
  background:var(--bg); border-top:1px solid var(--line);
  padding:var(--sp-3) 0;
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
}
.form__status.is-ok{ color:#2f6b46; }
.form__status.is-error{ color:#8f2f24; }

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

/* ── Scroll reveal ─────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width:1024px){
  .edit-grid{ grid-template-columns:repeat(2,1fr); }
  .card--tall{ grid-row:span 1; }
  .card--tall .card__media{ aspect-ratio:3/4; }
  .card--wide{ grid-column:span 2; }
  .journal-grid{ grid-template-columns:repeat(2,1fr); }
  .split{ gap:var(--sp-4); }
  .footer__top{ grid-template-columns:1fr; gap:var(--sp-4); }
  .hero__panel{ padding:var(--sp-6) var(--sp-4); }
  .hero__content{ margin-left:0; }
}

@media (max-width:768px){
  :root{ --sp-6:3rem; --sp-7:4rem; --sp-8:5rem; --nav-h:96px; }

  .nav__links,.nav__cta{ display:none; }
  .nav__toggle{ display:flex; }

  /* Stack: photo leads, copy sits beneath it */
  .hero{ grid-template-columns:1fr; min-height:0; }
  .hero__media{ aspect-ratio:4/5; }
  .hero__panel{
    padding:var(--sp-5) var(--sp-3) var(--sp-6);
    align-items:flex-start;
    border-left:0; border-top:1px solid var(--line);
  }
  .hero__content{ max-width:none; }
  .hero__actions .btn{ flex:1 1 100%; }

  .edit-grid{ grid-template-columns:1fr; gap:var(--sp-4); }
  .card--wide{ grid-column:span 1; }
  .card--wide .card__media{ aspect-ratio:3/4; }

  .journal-grid{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split__media{ aspect-ratio:3/4; }

  .form{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .footer__bottom{ flex-direction:column; }
}

/* ── Reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .marquee__track,
  .breaker__track{ animation:none; }
  .horseshoe{ display:none !important; }
}