/* =========================================================
   SunVue Writers LLC — shared stylesheet
   Palette pulled directly from the phoenix artwork:
   ember red, fire orange, amber, gold and warm blacks.
   ========================================================= */

/* ---------------------------------------------------------
   1. Tokens
   --------------------------------------------------------- */
:root{
  /* Warm darks */
  --void:        #050302;
  --black:       #0b0705;
  --night:       #120b07;
  --ash:         #1a110b;
  --ash-2:       #241710;
  --ash-3:       #32200f;

  /* Fire */
  --ember:       #ff3d0d;
  --ember-deep:  #c92a05;
  --flame:       #ff6a15;
  --orange:      #ff8a1f;
  --amber:       #ffae3b;
  --gold:        #ffc94a;
  --sun:         #ffe08a;

  /* Light */
  --cream:       #fff2de;
  --parchment:   #f6e3c8;
  --muted:       rgba(255,242,222,.68);
  --muted-2:     rgba(255,242,222,.48);
  --hairline:    rgba(255,196,110,.16);
  --hairline-2:  rgba(255,242,222,.09);

  /* Gradients */
  --fire:      linear-gradient(104deg, var(--ember) 0%, var(--flame) 38%, var(--amber) 72%, var(--gold) 100%);
  --fire-soft: linear-gradient(140deg, rgba(255,61,13,.16), rgba(255,201,74,.10));

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Outfit", "Segoe UI", system-ui, sans-serif;

  /* Metrics */
  --shell:  1220px;
  --gut:    clamp(20px, 4vw, 40px);
  --r-lg:   26px;
  --r:      18px;
  --r-sm:   12px;

  /* Elevation */
  --lift:      0 26px 60px -28px rgba(0,0,0,.85);
  --lift-fire: 0 26px 70px -26px rgba(255,106,21,.55);
}

/* ---------------------------------------------------------
   2. Reset + base
   --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
/* overflow-x:clip (not hidden) — `hidden` forces overflow-y to auto,
   which makes the element a scroll container and breaks both anchor
   scrolling and position:sticky. `clip` trims the overflow without that. */
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* height:auto is required: without it, the width/height attributes that
   reserve aspect ratio also pin the rendered height, distorting images
   and shifting layout as lazy images load. */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.018em;
  margin:0 0 .55em;
  font-variation-settings:"SOFT" 12, "WONK" 1;
}
p{ margin:0 0 1.1em; color:var(--muted); }

::selection{ background:var(--ember); color:#fff; }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--gold); color:var(--black);
  padding:12px 22px; border-radius:0 0 12px 0; font-weight:600;
}
.skip:focus{ left:0; }

/* ---------------------------------------------------------
   3. Layout primitives
   --------------------------------------------------------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.band{ padding:clamp(72px,9vw,124px) 0; position:relative; }
.band-tight{ padding:clamp(52px,6.5vw,88px) 0; position:relative; }

.rule{
  border:0; height:1px; margin:0;
  background:linear-gradient(90deg,transparent,var(--hairline) 22%,rgba(255,174,59,.42) 50%,var(--hairline) 78%,transparent);
}

/* ---------------------------------------------------------
   4. Typography helpers
   --------------------------------------------------------- */
.kicker{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--body);
  font-size:.74rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--amber);
  margin:0 0 20px;
}
.kicker::before{
  content:""; width:30px; height:2px; flex:none;
  background:var(--fire); border-radius:2px;
}
.kicker.mid{ justify-content:center; }

.flame-text{
  background:var(--fire);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.lede{
  font-size:clamp(1.02rem,1.35vw,1.16rem);
  color:var(--muted);
  max-width:60ch;
}

.head{ max-width:64ch; margin-bottom:clamp(40px,5vw,64px); }
.head.mid{ margin-inline:auto; text-align:center; }
.head h2{ font-size:clamp(2.1rem,4.4vw,3.4rem); color:var(--cream); }
.head p{ font-size:1.04rem; }

/* ---------------------------------------------------------
   5. Buttons
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px;
  border-radius:999px;
  font-family:var(--body);
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  border:1.5px solid transparent;
  cursor:pointer;
  position:relative;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, background .28s ease, color .28s ease, border-color .28s ease;
}
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }

.btn-fire{ background:var(--fire); color:#22110a; box-shadow:var(--lift-fire); }
.btn-fire:hover{ box-shadow:0 30px 80px -22px rgba(255,138,31,.72); }

.btn-ghost{
  background:rgba(255,242,222,.03);
  color:var(--cream);
  border-color:rgba(255,242,222,.26);
}
.btn-ghost:hover{ border-color:var(--amber); color:var(--amber); background:rgba(255,174,59,.09); }

.btn-ink{ background:var(--black); color:var(--gold); border-color:rgba(255,201,74,.4); }
.btn-ink:hover{ border-color:var(--gold); background:var(--night); }

.btn-sm{ padding:11px 22px; font-size:.86rem; }
.btn-full{ width:100%; }

/* ---------------------------------------------------------
   6. Header
   --------------------------------------------------------- */
.masthead{
  position:sticky; top:0; z-index:200;
  background:rgba(11,7,5,.62);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--hairline);
  transition:background .3s ease, border-color .3s ease;
}
.masthead.stuck{
  background:rgba(8,5,3,.93);
  border-bottom-color:rgba(255,174,59,.26);
}
.masthead .shell{
  display:flex; align-items:center; gap:clamp(14px,2.4vw,30px);
  padding-block:13px;
}

.mark{ display:flex; align-items:center; gap:12px; flex:none; margin-right:auto; }
.mark img{
  width:46px; height:46px; object-fit:contain;
  filter:drop-shadow(0 0 16px rgba(255,122,26,.6));
  transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .4s ease;
}
.mark:hover img{ transform:scale(1.08) rotate(-4deg); filter:drop-shadow(0 0 26px rgba(255,138,31,.85)); }
.mark-name{
  font-family:var(--display); font-weight:700;
  font-size:1.34rem; letter-spacing:-.02em; color:var(--cream);
  display:block; line-height:1.05;
}
.mark-name em{ font-style:normal; color:var(--amber); }
.mark-sub{
  display:block; margin-top:3px;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted-2); font-weight:500;
}

.nav ul{ display:flex; align-items:center; gap:4px; }
.nav a{
  display:block; padding:10px 15px; border-radius:999px;
  font-size:.91rem; font-weight:450; color:var(--muted);
  transition:color .22s ease, background .22s ease;
  white-space:nowrap;
}
.nav a:hover{ color:var(--cream); background:rgba(255,242,222,.06); }
.nav a.here{ color:var(--amber); background:rgba(255,138,31,.13); font-weight:550; }

.mast-cta{ display:flex; align-items:center; gap:10px; flex:none; }

.burger{
  display:none;
  width:44px; height:44px; flex:none;
  border:1px solid rgba(255,242,222,.24); border-radius:12px;
  background:transparent; cursor:pointer;
  align-items:center; justify-content:center;
}
.burger span{
  display:block; width:19px; height:2px; border-radius:2px;
  background:var(--cream); position:relative;
  transition:background .2s ease;
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:19px; height:2px; border-radius:2px;
  background:var(--cream);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), top .2s ease;
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1120px){
  .nav{
    position:fixed; inset:70px 0 auto 0;
    /* Solid, not translucent: a backdrop-filter nested inside the
       masthead's own filter washes the drawer out. */
    background:var(--black);
    border-bottom:1px solid var(--hairline);
    box-shadow:0 24px 50px -20px rgba(0,0,0,.9);
    max-height:0; overflow:hidden;
    /* visibility, not just max-height: a clipped-but-visible drawer keeps its
       links in the tab order, so a keyboard user tabs into a menu they cannot
       see. Delaying visibility until the collapse finishes keeps the
       animation identical. */
    visibility:hidden;
    transition:max-height .38s cubic-bezier(.2,.7,.3,1), visibility 0s linear .38s;
  }
  .nav.open{
    max-height:70vh; overflow-y:auto;
    visibility:visible;
    transition:max-height .38s cubic-bezier(.2,.7,.3,1), visibility 0s linear 0s;
  }
  .nav ul{ flex-direction:column; align-items:stretch; gap:2px; padding:14px var(--gut) 26px; }
  .nav a{ padding:14px 16px; font-size:1rem; border-radius:12px; }
  .burger{ display:flex; }
  
}
@media (max-width:560px){
  
  .mark img{ width:40px; height:40px; }
  .mark-name{ font-size:1.18rem; }
}

/* ---------------------------------------------------------
   7. Home hero
   --------------------------------------------------------- */
.hero{
  position:relative;
  min-height:min(94vh,900px);
  display:flex; align-items:center;
  /* Less room above the copy than below it, so the two Explore buttons
     land on the first screen of a 1440×900 desktop. The 64px floor keeps
     phones and tablets exactly as they were. */
  padding:clamp(64px,5vw,72px) 0 clamp(64px,8vw,110px);
  overflow:hidden;
  background:
    radial-gradient(ellipse 58% 52% at 72% 46%, rgba(255,106,21,.30), rgba(11,7,5,0) 64%),
    radial-gradient(ellipse 50% 46% at 12% 84%, rgba(255,61,13,.16), rgba(11,7,5,0) 62%),
    var(--black);
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:180px;
  background:linear-gradient(180deg,rgba(11,7,5,0),var(--black));
  pointer-events:none; z-index:3;
}

.hero-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:center;
  gap:clamp(28px,4vw,60px);
}

.hero-copy h1{
  font-size:clamp(2.9rem,6.6vw,5.4rem);
  color:var(--cream);
  margin-bottom:.28em;
  text-shadow:0 8px 60px rgba(255,61,13,.28);
}
/* The shared --fire gradient opens on ember red, the darkest colour in the
   palette — across a word as short as "Sunview" that is very nearly all you
   see, and it reads muddy. The hero wordmark takes the bright end of the
   range instead, at every width so it stays consistent across breakpoints. */
.hero-copy .flame-text{
  background:linear-gradient(100deg, var(--orange) 0%, var(--gold) 46%, var(--sun) 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.hero-copy .lede{ margin-bottom:22px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

.hero-art{ position:relative; display:grid; place-items:center; }
.hero-art picture{ display:block; width:100%; }
.hero-art img,
.subhero-art img{
  position:relative; z-index:2;
  display:block; margin-inline:auto;
  width:min(100%,620px);
  filter:drop-shadow(0 30px 70px rgba(255,61,13,.42));
  animation:soar 9s ease-in-out infinite;
}
.hero-art::before,
.subhero-art::before{
  content:""; position:absolute; inset:8% 4%;
  background:radial-gradient(circle at 50% 48%, rgba(255,138,31,.42), rgba(11,7,5,0) 64%);
  filter:blur(18px);
  animation:pulse 6s ease-in-out infinite;
}
.hero-ring{
  position:absolute; z-index:1;
  width:min(96%,600px); aspect-ratio:1;
  border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,61,13,0), rgba(255,138,31,.34), rgba(255,201,74,.16), rgba(255,61,13,0) 72%);
  filter:blur(38px);
  animation:spin 26s linear infinite;
}

@keyframes soar{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-22px) rotate(-1.1deg); }
}
@keyframes pulse{
  0%,100%{ opacity:.68; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Floating embers */
.embers{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.embers i{
  position:absolute; bottom:-14px;
  width:4px; height:4px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 10px 2px rgba(255,138,31,.75);
  opacity:0;
  animation:rise linear infinite;
}
@keyframes rise{
  0%{ transform:translateY(0) translateX(0) scale(.6); opacity:0; }
  12%{ opacity:.9; }
  70%{ opacity:.55; }
  100%{ transform:translateY(-88vh) translateX(var(--drift,20px)) scale(.15); opacity:0; }
}

@media (max-width:960px){
  .hero{
    min-height:min(88vh,760px);
    text-align:center;
    align-items:center;
  }
  /* Static so the absolutely positioned art below resolves against .hero
     itself rather than this grid — that is what lets the art and its
     overlay span the whole hero section instead of just the text column. */
  .hero-grid{ grid-template-columns:1fr; position:static; }

  /* On small screens the phoenix stops being a stacked block and becomes
     the backdrop the copy sits on: dimmed, and darkened further behind the
     text so the headline keeps its contrast. */
  .hero-art{
    position:absolute; inset:0;
    z-index:0;
    display:grid; place-items:center;
    margin:0;
    pointer-events:none;
  }
  .hero-art img,
  .subhero-art img{
    width:min(132%,640px);
    opacity:.5;
    animation-duration:12s;
  }
  /* Overlay covers the whole hero: an even base veil so no corner of the
     bird is left bright, plus a denser core behind the headline. */
  .hero-art::after,
  .subhero-art::after{
    content:"";
    position:absolute; inset:0;
    z-index:3; /* above the image (z-index:2) so it actually dims it */
    background:
      radial-gradient(ellipse 90% 55% at 50% 50%, rgba(11,7,5,.78), rgba(11,7,5,.52) 70%, rgba(11,7,5,.42) 100%),
      linear-gradient(180deg, rgba(11,7,5,.55), rgba(11,7,5,.34) 34%, rgba(11,7,5,.7));
  }
  .hero-ring{ opacity:.7; }

  .hero-copy{ position:relative; z-index:2; }
  .hero-copy h1{
    text-shadow:0 2px 18px rgba(6,3,2,.92), 0 1px 3px rgba(6,3,2,.8);
  }
  /* The wordmark takes no dark shadow of any kind. A zero-offset
     drop-shadow bleeds into Fraunces' thin strokes, and the headline's
     dark text-shadow tints its edges the same way — either one turns the
     gold bronze. It is reset to the warm glow desktop uses, so "Sunview"
     renders identically at both sizes; the full-hero overlay already
     supplies the contrast. */
  .hero-copy .flame-text{
    text-shadow:0 8px 60px rgba(255,61,13,.28);
  }
  .hero-copy .lede,
  .hero-copy .kicker{
    text-shadow:0 1px 10px rgba(6,3,2,.95), 0 1px 2px rgba(6,3,2,.85);
  }
  
  .hero-copy .lede{ margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  .hero-copy .kicker{ justify-content:center; }
}

/* ---------------------------------------------------------
   8. Gateway portals (home)
   --------------------------------------------------------- */
.portals{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.4vw,28px);
}
.portal{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(360px,42vw,470px);
  padding:clamp(30px,3.4vw,48px);
  border-radius:var(--r-lg);
  border:1px solid var(--hairline-2);
  overflow:hidden;
  isolation:isolate;
  background:var(--ash);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), border-color .45s ease, box-shadow .45s ease;
}
.portal::before{
  content:""; position:absolute; inset:0; z-index:-2;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.portal::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(178deg, rgba(11,7,5,.12) 0%, rgba(11,7,5,.72) 58%, rgba(11,7,5,.95) 100%);
}
.portal-writers::before{
  background:
    radial-gradient(circle at 26% 18%, rgba(255,201,74,.46), transparent 58%),
    radial-gradient(circle at 78% 76%, rgba(255,61,13,.32), transparent 60%),
    linear-gradient(160deg,#3a2109,#1a110b);
}
.portal-kennels::before{
  background:
    radial-gradient(circle at 74% 16%, rgba(255,138,31,.48), transparent 58%),
    radial-gradient(circle at 20% 80%, rgba(201,42,5,.34), transparent 60%),
    linear-gradient(160deg,#42200a,#17100a);
}
.portal:hover{
  transform:translateY(-10px);
  border-color:rgba(255,174,59,.5);
  box-shadow:var(--lift-fire);
}
.portal:hover::before{ transform:scale(1.07); }

.portal-tag{
  font-size:.7rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
}
.portal h3{ font-size:clamp(1.9rem,3.4vw,2.7rem); color:var(--cream); margin-bottom:.4em; }
.portal p{ max-width:42ch; margin-bottom:26px; color:rgba(255,242,222,.78); }
.portal-go{
  display:inline-flex; align-items:center; gap:12px;
  font-weight:600; font-size:.95rem; color:var(--gold);
  align-self:flex-start;
}
.portal-go span{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--fire); color:#22110a;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.portal-go svg{ width:16px; height:16px; }
.portal:hover .portal-go span{ transform:translateX(6px); }

.portal-emblem{
  position:absolute; z-index:-1;
  top:-6%; right:-12%;
  width:56%;
  opacity:.24;
  transition:opacity .5s ease, transform .8s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.portal:hover .portal-emblem{ opacity:.42; transform:translateY(-8px) scale(1.05); }

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

/* ---------------------------------------------------------
   9. Tagline marquee
   --------------------------------------------------------- */
.marquee{
  overflow:hidden;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:linear-gradient(90deg,rgba(255,61,13,.08),rgba(255,201,74,.05));
  padding:20px 0;
}
.marquee-track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee span{
  display:inline-flex; align-items:center; gap:26px;
  padding-right:26px;
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.05rem,2vw,1.5rem);
  color:rgba(255,242,222,.8);
  white-space:nowrap;
}
.marquee span::after{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--fire); flex:none;
}
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* ---------------------------------------------------------
   10. Pillar cards
   --------------------------------------------------------- */
.pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:clamp(16px,2vw,22px);
}
.pillar{
  position:relative;
  padding:32px 28px;
  border-radius:var(--r);
  background:linear-gradient(165deg,var(--ash-2),var(--ash));
  border:1px solid var(--hairline-2);
  overflow:hidden;
  transition:transform .32s cubic-bezier(.2,.7,.3,1), border-color .32s ease;
}
.pillar::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--fire);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.pillar:hover{ transform:translateY(-6px); border-color:rgba(255,174,59,.34); }
.pillar:hover::before{ transform:scaleX(1); }
.pillar-icon{
  width:52px; height:52px; border-radius:15px;
  display:grid; place-items:center;
  background:var(--fire-soft);
  border:1px solid rgba(255,174,59,.28);
  color:var(--amber);
  margin-bottom:20px;
}
.pillar-icon svg{ width:24px; height:24px; }
.pillar h3{ font-size:1.14rem; color:var(--cream); margin-bottom:.5em; }
.pillar p{ font-size:.94rem; margin:0; }

/* ---------------------------------------------------------
   11. Split layout + panel
   --------------------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,68px);
  align-items:center;
}
.split-wide{ grid-template-columns:1.15fr .85fr; }
/* Top-aligned variant for a short column beside a tall one (the Contact
   section: address beside the form). The first column borrows the form's
   inner padding so its heading sits level with the first field label
   rather than with the card's edge. */
.split-top{ align-items:start; }
.split-top > :first-child{ padding-top:clamp(28px,3.4vw,40px); }
@media (max-width:920px){ .split-top > :first-child{ padding-top:0; } }
@media (max-width:920px){
  .split,.split-wide{ grid-template-columns:1fr; gap:36px; }
}

.panel{
  position:relative;
  padding:clamp(30px,3.6vw,46px);
  border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--ash-2),var(--night));
  border:1px solid var(--hairline-2);
  overflow:hidden;
}
.panel h3{ color:var(--cream); }
.panel-emblem{
  position:absolute; right:-56px; bottom:-56px;
  width:230px; opacity:.14; pointer-events:none;
}

/* ---------------------------------------------------------
   12. Status badges
   --------------------------------------------------------- */

.badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px; border-radius:999px;
  font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:14px;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
/* Available / On hold: reserved for real dog listings in the Kennels Gallery. */
.badge-open{ background:rgba(126,217,87,.14); color:#8fdc63; }
.badge-hold{ background:rgba(255,174,59,.15); color:var(--amber); }
.badge-soon{ background:rgba(255,242,222,.08); color:var(--muted); }
.badge-live{ background:rgba(255,201,74,.16); color:var(--gold); }

/* ---------------------------------------------------------
   13. Steps / timeline
   --------------------------------------------------------- */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:clamp(16px,2vw,22px);
  counter-reset:step;
}
.steps-stack{ grid-template-columns:1fr; }
.step{
  position:relative;
  padding:30px 28px;
  border-radius:var(--r);
  background:linear-gradient(165deg,var(--ash-2),var(--ash));
  border:1px solid var(--hairline-2);
  transition:transform .3s ease, border-color .3s ease;
}
.step:hover{ transform:translateY(-5px); border-color:rgba(255,174,59,.3); }
.step-n{
  counter-increment:step;
  width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--fire); color:#22110a;
  font-family:var(--display); font-weight:700; font-size:1.1rem;
  margin-bottom:18px;
}
.step-n::before{ content:counter(step,decimal-leading-zero); }
.step h3{ font-size:1.06rem; color:var(--cream); margin-bottom:.45em; }
.step p{ font-size:.93rem; margin:0; }

.steps-stack .step{ display:grid; grid-template-columns:46px 1fr; gap:22px; align-items:start; }
.steps-stack .step-n{ margin-bottom:0; }

/* ---------------------------------------------------------
   14. CTA band
   --------------------------------------------------------- */
.cta{
  position:relative;
  border-radius:var(--r-lg);
  padding:clamp(38px,4.6vw,60px);
  background:var(--fire);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px,3vw,40px);
  flex-wrap:wrap;
  overflow:hidden;
}
.cta::after{
  content:""; position:absolute; top:-40%; right:-6%;
  width:340px; aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,.15);
}
.cta > *{ position:relative; z-index:2; }
.cta h3{ font-size:clamp(1.5rem,2.9vw,2.2rem); color:#1a0d05; margin-bottom:.3em; max-width:22ch; }
.cta p{ color:rgba(26,13,5,.88); margin:0; max-width:46ch; }

/* ---------------------------------------------------------
   15. Forms
   --------------------------------------------------------- */
.form{
  padding:clamp(28px,3.4vw,40px);
  border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--ash-2),var(--night));
  border:1px solid var(--hairline-2);
}
.field{ display:grid; gap:7px; margin-bottom:18px; }
.field label{ font-size:.8rem; font-weight:500; letter-spacing:.06em; color:rgba(255,242,222,.72); }
.field label .req{ color:var(--ember); }
.field input,.field select,.field textarea{
  width:100%;
  background:rgba(5,3,2,.6);
  border:1px solid rgba(255,242,222,.16);
  border-radius:12px;
  padding:14px 16px;
  color:var(--cream);
  font-family:var(--body); font-size:.95rem;
  transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.field textarea{ resize:vertical; min-height:110px; }
/* Placeholders are still text: .3 measured 2.37:1 and failed WCAG 1.4.3.
   --muted-2 clears 4.5:1 and stays clearly lighter than entered text. */
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-2); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(255,174,59,.16);
  background:rgba(5,3,2,.85);
}
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffae3b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:17px;
  padding-right:44px;
}
.field select option{ background:var(--night); color:var(--cream); }
.field-pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .field-pair{ grid-template-columns:1fr; } }

.field.bad input,.field.bad select,.field.bad textarea{ border-color:var(--ember); }
.field .err{ font-size:.78rem; color:#ff8a6b; display:none; }
.field.bad .err{ display:block; }

.form-note{ font-size:.8rem; color:var(--muted-2); margin:14px 0 0; text-align:center; }
.form-done{
  display:none;
  margin-top:16px; padding:15px 18px;
  border-radius:12px;
  background:rgba(143,220,99,.1);
  border:1px solid rgba(143,220,99,.34);
  color:#a9e88a; font-size:.92rem;
}
.form-done.show{ display:block; }

/* ---------------------------------------------------------
   16. Contact
   --------------------------------------------------------- */
.contact-band{
  background:
    radial-gradient(ellipse 60% 70% at 84% 40%, rgba(255,106,21,.14), transparent 62%),
    var(--night);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.contacts{ display:grid; gap:14px; margin-top:28px; }
.contacts a,.contacts li{
  display:flex; align-items:center; gap:15px;
  font-size:1rem; color:rgba(255,242,222,.88);
  transition:color .22s ease;
}
.contacts a:hover{ color:var(--amber); }
.contacts .ico{
  flex:none; width:42px; height:42px; border-radius:13px;
  display:grid; place-items:center;
  background:var(--fire-soft);
  border:1px solid rgba(255,174,59,.26);
  color:var(--amber);
}
.contacts .ico svg{ width:19px; height:19px; }
.contacts .lbl{ display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }

/* ---------------------------------------------------------
   17. Breadcrumb + sub-hero
   --------------------------------------------------------- */
.subhero{
  position:relative;
  padding:clamp(58px,7vw,96px) 0 clamp(48px,6vw,80px);
  overflow:hidden;
}
.subhero .shell{ position:relative; z-index:2; }
.subhero h1{ font-size:clamp(2.4rem,5.4vw,4.2rem); color:var(--cream); max-width:18ch; }
.subhero .lede{ font-size:clamp(1.04rem,1.4vw,1.18rem); }
/* The client's legal-use statement on the Kennels page. It is supplied in
   capitals and must stay that way, so it gets a slightly smaller size, open
   tracking and a rule to set it apart — all-caps at body size is hard going. */
.kennels-statement{
  max-width:68ch;
  margin-top:22px;
  padding-left:18px;
  border-left:3px solid var(--amber);
  font-size:.92rem;
  line-height:1.7;
  letter-spacing:.015em;
  color:var(--muted);
}

.subhero-art{
  position:absolute; z-index:1;
  /* The phoenix matches the Home hero exactly: the image, glow, ring and
     motion all come from the .hero-art rules in section 6, which name
     .subhero-art alongside. Only its placement differs, because the
     sub-hero is shorter and the headline needs the left of the column. */
  /* Anchored to the content column: on screens wider than the 1220px shell
     its right edge lines up with the column's right edge, so it sits beside
     the headline instead of drifting to the window edge. Below that width
     a 3% inset keeps it off the screen edge. */
  right:max(3%, calc((100% - var(--shell)) / 2));
  top:50%; transform:translateY(-50%);
  width:min(46%,540px);
  display:grid; place-items:center;
  pointer-events:none;
}
/* Mid-width screens: the copy reaches further right, so the bird steps down
   in size to stay beside the text rather than behind it at full brightness. */
@media (max-width:1280px){ .subhero-art{ width:min(36%,460px); } }
@media (max-width:1180px){ .subhero-art{ width:min(30%,460px); } }
/* Desktop: the intro paragraph stops short of the bird's left wing, which
   now shows at full brightness. Same words, they just wrap sooner. */
@media (min-width:961px){
  .subhero .lede{ max-width:600px; }
  .kennels-statement{ max-width:620px; }
}
/* Phones and tablets: the same treatment as the Home hero at this width, a
   centred backdrop dimmed behind the copy (see .hero-art in section 6). */
@media (max-width:960px){
  .subhero-art{ inset:0; transform:none; width:auto; z-index:0; }
}

.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  font-size:.82rem; color:var(--muted-2);
  margin-bottom:22px;
}
.crumbs a{ color:var(--amber); }
.crumbs a:hover{ text-decoration:underline; }
.crumbs li{ display:flex; align-items:center; gap:9px; }
.crumbs li:not(:last-child)::after{ content:"/"; color:rgba(255,242,222,.24); }

.t-writers .subhero{
  background:
    radial-gradient(ellipse 54% 60% at 12% 16%, rgba(255,201,74,.16), transparent 58%),
    radial-gradient(ellipse 50% 56% at 88% 4%, rgba(255,106,21,.13), transparent 56%);
}
.t-kennels .subhero{
  background:
    radial-gradient(ellipse 54% 60% at 86% 14%, rgba(255,138,31,.18), transparent 58%),
    radial-gradient(ellipse 50% 56% at 8% 6%, rgba(201,42,5,.16), transparent 56%);
}

/* ---------------------------------------------------------
   18. Footer
   --------------------------------------------------------- */
.footer{
  background:var(--void);
  border-top:1px solid var(--hairline);
  padding:clamp(56px,6.4vw,80px) 0 30px;
  position:relative;
  overflow:hidden;
}
.footer::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(720px,88%); height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,138,31,.6),transparent);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.15fr;
  gap:clamp(28px,4vw,48px);
  padding-bottom:40px;
  border-bottom:1px solid var(--hairline-2);
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .footer-grid{ grid-template-columns:1fr; } }

.footer-about{ max-width:34ch; font-size:.94rem; color:var(--muted-2); margin:16px 0 20px; }
.socials{ display:flex; gap:10px; }
.socials a{
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,242,222,.2);
  display:grid; place-items:center;
  color:var(--muted);
  transition:border-color .22s ease, color .22s ease, transform .22s ease, background .22s ease;
}
.socials a:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-3px); background:rgba(255,174,59,.09); }
.socials svg{ width:17px; height:17px; }

.footer-col h3{
  font-family:var(--body);
  font-size:.74rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber); margin-bottom:18px;
}
.footer-col ul{ display:grid; gap:11px; }
.footer-col a,.footer-col li{ font-size:.93rem; color:var(--muted-2); }
.footer-col a:hover{ color:var(--gold); }

.footer-end{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  padding-top:24px;
  /* --muted-2 (alpha .48) clears 4.5:1 on the footer's near-black; the .42
     this used to hardcode measured 3.71:1 and failed WCAG 1.4.3 AA. */
  font-size:.84rem; color:var(--muted-2);
}
.footer-end a{ color:var(--gold); font-weight:600; }
.footer-end a:hover{ text-decoration:underline; }

/* ---------------------------------------------------------
   19. Back to top
   --------------------------------------------------------- */
.totop{
  position:fixed; right:22px; bottom:22px; z-index:150;
  width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,174,59,.4);
  background:rgba(11,7,5,.82);
  backdrop-filter:blur(10px);
  color:var(--amber);
  display:grid; place-items:center;
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s, background .22s ease;
}
.totop.show{ opacity:1; visibility:visible; transform:translateY(0); }
.totop:hover{ background:var(--fire); color:#22110a; border-color:transparent; }
.totop svg{ width:19px; height:19px; }

/* ---------------------------------------------------------
   20. Reveal + motion preferences
   --------------------------------------------------------- */
.rise{
  opacity:0; transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1);
}
.rise.seen{ opacity:1; transform:none; }
.rise:nth-child(2){ transition-delay:.08s; }
.rise:nth-child(3){ transition-delay:.16s; }
.rise:nth-child(4){ transition-delay:.24s; }
.rise:nth-child(5){ transition-delay:.32s; }
.rise:nth-child(6){ transition-delay:.4s; }

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

/* =========================================================
   21. Phase 2 — content components
   ========================================================= */

/* Anchor offset so sticky chrome never covers a heading */
[id]{ scroll-margin-top:96px; }
.has-subbar [id]{ scroll-margin-top:148px; }

/* ---------------------------------------------------------
   In-page section bar (Gallery pages)
   --------------------------------------------------------- */
.sectionbar{
  position:sticky; top:70px; z-index:90;
  background:rgba(9,6,4,.94);
  border-bottom:1px solid var(--hairline);
}
.sectionbar .shell{
  display:flex; gap:9px;
  overflow-x:auto;
  padding-block:12px;
  scrollbar-width:none;
}
.sectionbar .shell::-webkit-scrollbar{ display:none; }
.sectionbar a{
  flex:none;
  padding:10px 22px; border-radius:999px;
  font-size:.9rem; font-weight:500;
  color:var(--muted);
  border:1px solid var(--hairline-2);
  transition:color .22s ease, background .22s ease, border-color .22s ease;
}
.sectionbar a:hover{ color:var(--cream); border-color:rgba(255,174,59,.4); background:rgba(255,174,59,.08); }
.sectionbar a.active{
  background:var(--fire); border-color:transparent;
  color:#22110a; font-weight:600;
}

/* ---------------------------------------------------------
   Destination blocks (Home — Choose Your SunVue)
   --------------------------------------------------------- */
.portal-list{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 26px;
}
.portal-list li{
  font-size:.79rem; letter-spacing:.02em;
  padding:6px 13px; border-radius:999px;
  background:rgba(255,242,222,.07);
  border:1px solid var(--hairline-2);
  color:rgba(255,242,222,.82);
}

/* ---------------------------------------------------------
   Value chips (SunVue Philosophy)
   --------------------------------------------------------- */
.values{ display:flex; flex-wrap:wrap; gap:12px; }
.values li{
  padding:12px 24px; border-radius:999px;
  border:1px solid rgba(255,174,59,.3);
  background:var(--fire-soft);
  color:var(--gold);
  font-weight:600; font-size:.92rem; letter-spacing:.03em;
}

/* ---------------------------------------------------------
   Placeholder media + cards
   --------------------------------------------------------- */
.ph-media{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--ash);
  border:1px solid var(--hairline-2);
}
.ph-media img{ width:100%; height:auto; display:block; }

.ph-card{
  display:flex; flex-direction:column;
  border-radius:var(--r);
  overflow:hidden;
  background:linear-gradient(165deg,var(--ash-2),var(--ash));
  border:1px solid var(--hairline-2);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.ph-card:hover{ transform:translateY(-6px); border-color:rgba(255,174,59,.34); box-shadow:var(--lift); }
.ph-card > img{ width:100%; height:auto; display:block; border-bottom:1px solid var(--hairline-2); }
.ph-body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.ph-body h3{ font-size:1.08rem; color:var(--cream); margin-bottom:.4em; }
.ph-body p{ font-size:.92rem; margin:0 0 16px; }
.ph-body .btn{ margin-top:auto; align-self:flex-start; }

.ph-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:clamp(18px,2.4vw,26px);
}
.ph-grid-wide{ grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); }

/* Book-shaped placeholders keep the shelf proportions */
.ph-books{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(215px,100%),1fr));
  gap:clamp(18px,2.4vw,28px);
}
@media (max-width:620px){ .ph-books{ grid-template-columns:1fr 1fr; gap:16px; } }
.ph-book img{
  width:100%; display:block;
  border-radius:6px 14px 14px 6px;
  box-shadow:var(--lift);
  transition:box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.ph-book:hover img{ transform:translateY(-8px); box-shadow:0 30px 60px -22px rgba(255,106,21,.45); }
.ph-book h5{
  font-family:var(--display); font-weight:600;
  font-size:1rem; color:var(--cream);
  margin:16px 0 4px;
}
.ph-book p{ font-size:.85rem; color:var(--muted-2); margin:0; }

/* ---------------------------------------------------------
   Featured title — a real book, not a placeholder shelf card
   --------------------------------------------------------- */
.feature-book{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(26px,4vw,52px);
  align-items:center;
  padding:clamp(24px,3.2vw,40px);
  border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--ash-2),var(--ash));
  border:1px solid rgba(255,174,59,.26);
  box-shadow:var(--lift);
}
@media (max-width:820px){
  .feature-book{ grid-template-columns:1fr; gap:28px; }
  .feature-cover{ max-width:260px; margin-inline:auto; }
}

.feature-cover img{
  width:100%; height:auto; display:block;
  border-radius:6px 14px 14px 6px;
  box-shadow:0 30px 60px -22px rgba(255,106,21,.5);
}

.feature-body h3{
  font-size:clamp(1.6rem,3.2vw,2.3rem);
  color:var(--cream);
  margin:0 0 .34em;
}
.feature-by{
  font-size:.98rem; color:var(--muted); margin:0 0 18px; line-height:1.55;
}
.feature-by strong{ color:var(--gold); font-weight:600; }
.feature-by span{ font-size:.88rem; color:var(--muted-2); }

.feature-actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px 20px; margin-top:26px;
}
.feature-actions .btn svg{ width:17px; height:17px; flex:none; }
.feature-note{ font-size:.82rem; color:var(--muted-2); }

/* ---------------------------------------------------------
   Footer social links
   --------------------------------------------------------- */
.socials{
  display:flex; flex-wrap:wrap; gap:12px;
  list-style:none; padding:0; margin:22px 0 0;
}
.socials a{
  /* 44px is the minimum comfortable touch target on a phone. */
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--hairline);
  background:rgba(255,242,222,.04);
  color:var(--muted);
  transition:color .25s ease, border-color .25s ease, background .25s ease, transform .25s cubic-bezier(.2,.7,.3,1);
}
.socials a:hover,
.socials a:focus-visible{
  color:var(--gold);
  border-color:rgba(255,201,74,.55);
  background:rgba(255,174,59,.12);
  transform:translateY(-3px);
}
.socials svg{ width:20px; height:20px; display:block; }

@media (prefers-reduced-motion:reduce){
  .socials a{ transition:color .25s ease, border-color .25s ease, background .25s ease; }
  .socials a:hover,
  .socials a:focus-visible{ transform:none; }
}

/* Parenthetical follow-on lines in the client's copy, set a step quieter
   than the sentence they belong to. */
.aside{ font-size:.92rem; color:var(--muted-2); }
p.aside{ margin-top:-10px; }

/* The "Be Fruitful" definitions sit below the centred Philosophy head.
   One fire marker runs down the whole block, opening statement to closing
   statement; the two statements keep the pull-quote type but not their own
   markers, and the four definitions sit between them as plain lines. */
.fruitful{
  max-width:64ch;
  margin:0 auto clamp(40px,5vw,64px);
  padding:26px 0 26px 30px;
  border-left:3px solid transparent;
  border-image:var(--fire) 1;
}
.fruitful .pull{ margin:0; padding:0; border:0; }
.fruitful-defs{ margin:22px 0; }
.fruitful-defs li{ font-size:.95rem; line-height:1.65; color:rgba(255,242,222,.84); }

/* ---------------------------------------------------------
   Marketplace banner — informational only, no action.
   The dark counterpart to the orange .cta: a fire-gradient
   border instead of a fire fill, so it reads as a status
   announcement rather than something to click.
   --------------------------------------------------------- */
.market-banner{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center; gap:10px clamp(24px,4vw,56px);
  padding:clamp(28px,3.6vw,44px) clamp(26px,4.4vw,56px);
  border-radius:var(--r-lg);
  border:1px solid transparent;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255,106,21,.18), transparent 60%) padding-box,
    linear-gradient(160deg, var(--ash-2), var(--black)) padding-box,
    var(--fire) border-box;
  box-shadow:var(--lift);
}
.market-banner h2{
  position:relative; z-index:1;
  font-size:clamp(1.7rem,3vw,2.4rem); color:var(--cream); margin:0;
}
/* Keep "Coming Soon" on one line so the heading never strands "Soon". */
.market-banner h2 .flame-text{ white-space:nowrap; }
.market-banner p{
  position:relative; z-index:1;
  margin:0; font-size:clamp(.98rem,1.2vw,1.08rem); color:rgba(255,242,222,.84);
}
.market-banner-art{
  position:absolute; right:-28px; bottom:-34px;
  width:190px; opacity:.13; pointer-events:none;
}
@media (max-width:760px){
  .market-banner{ grid-template-columns:1fr; }
  .market-banner-art{ width:140px; }
}

/* ---------------------------------------------------------
   Home "Welcome to SunVue": the brand-extension copy is long,
   so it scrolls inside its own column. On desktop the box is
   exactly as tall as the column beside it (the list and photo),
   so both columns end level. A fade and a thin amber scrollbar
   show there is more; the bottom padding keeps the last line
   clear of the fade once you reach it.
   --------------------------------------------------------- */
.welcome-split{ align-items:stretch; }
.scroll-box-wrap{ position:relative; min-height:0; }
.scroll-box{
  position:absolute; inset:0;
  overflow-y:auto;
  padding:0 18px 64px 0;
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,174,59,.75) rgba(255,242,222,.08);
}
.scroll-box::-webkit-scrollbar{ width:8px; }
.scroll-box::-webkit-scrollbar-track{ background:rgba(255,242,222,.08); border-radius:99px; }
.scroll-box::-webkit-scrollbar-thumb{ background:rgba(255,174,59,.75); border-radius:99px; }
.scroll-box::-webkit-scrollbar-thumb:hover{ background:var(--amber); }
.scroll-box:focus-visible{ outline-offset:6px; }
/* The list beside it is cols-2, but the panel is narrow enough that the
   210px column minimum collapses it to one tall column. Two columns fit
   here without any label wrapping, which roughly halves its height. */
@media (min-width:921px){
  .welcome-split .panel .cols-2{ grid-template-columns:1fr 1fr; column-gap:18px; }
}
/* Stacked layouts: no column to match, so cap the box instead. */
/* With the script running, fades follow the scroll position: bottom fade
   only while there is more below, top fade once something is above. */
.js-scroll:not(.has-more) .scroll-box{ -webkit-mask-image:none; mask-image:none; }
.js-scroll.has-more.is-scrolled .scroll-box{
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 64px), transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 64px), transparent);
}
.js-scroll.is-scrolled:not(.has-more) .scroll-box{
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 40px);
          mask-image:linear-gradient(to bottom, transparent, #000 40px);
}

/* "Scroll to read more": pinned to the bottom of the box, outside the
   scrolling content so it never scrolls away. */
.scroll-cue{
  position:absolute; left:50%; bottom:8px; z-index:2;
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:999px;
  font:inherit; font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  color:var(--amber);
  background:rgba(11,7,5,.9);
  border:1px solid rgba(255,174,59,.5);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.95);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.scroll-cue:hover{ border-color:var(--amber); background:rgba(40,24,10,.95); color:var(--gold); }
.scroll-cue svg{ width:14px; height:14px; flex:none; animation:cue-bob 1.6s ease-in-out infinite; }
.scroll-cue[hidden]{ display:none; }
@keyframes cue-bob{ 0%,100%{ transform:translateY(-1px); } 50%{ transform:translateY(3px); } }
@media (prefers-reduced-motion:reduce){ .scroll-cue svg{ animation:none; } }

@media (max-width:920px){
  .scroll-box{ position:static; max-height:min(68vh,520px); }
}

/* Genre group heading inside the bookstore */
.genre-head{
  display:flex; align-items:baseline; gap:14px;
  margin:0 0 22px;
}
.genre-head h4{
  font-size:1.3rem; color:var(--cream); margin:0;
}
.genre-head span{
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2);
}
.genre-head::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,rgba(255,174,59,.34),transparent);
}

/* ---------------------------------------------------------
   Spec list (dog / litter cards)
   --------------------------------------------------------- */
.specs{ margin:4px 0 20px; }
/* Label and value share a row, but both may shrink and the value drops
   to its own line on very narrow screens rather than overflowing. */
.specs > div{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:4px 18px; flex-wrap:wrap;
  padding:11px 0;
  border-bottom:1px solid var(--hairline-2);
  font-size:.88rem;
}
.specs > div:last-child{ border-bottom:0; }
.specs dt{ color:var(--muted-2); min-width:0; }
.specs dd{ margin:0 0 0 auto; color:var(--cream); font-weight:500; text-align:right; min-width:0; }
.specs dd em{ font-style:normal; color:var(--muted-2); font-weight:400; }

/* ---------------------------------------------------------
   Notice / awaiting-content panel
   --------------------------------------------------------- */
.notice{
  display:flex; align-items:flex-start; gap:16px;
  padding:20px 24px;
  border-radius:var(--r);
  background:var(--fire-soft);
  border:1px solid rgba(255,174,59,.26);
  font-size:.94rem;
  color:rgba(255,242,222,.86);
}
.notice svg{ width:22px; height:22px; color:var(--amber); flex:none; margin-top:2px; }
.notice p{ margin:0; color:inherit; }
.notice strong{ color:var(--gold); font-weight:600; }

/* ---------------------------------------------------------
   Prose blocks (About / editorial)
   --------------------------------------------------------- */
.prose p{ font-size:1.04rem; }
.prose p + p{ margin-top:0; }
.pull{
  margin:36px 0;
  padding:26px 0 26px 30px;
  border-left:3px solid transparent;
  border-image:var(--fire) 1;
  font-family:var(--display);
  font-size:clamp(1.2rem,2.2vw,1.6rem);
  line-height:1.34;
  color:var(--cream);
  font-style:italic;
}

/* Two-column readable lists */
.cols-2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:10px 26px;
}
.cols-2 li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:.95rem; color:rgba(255,242,222,.84);
  padding:6px 0;
}
.cols-2 li::before{
  content:""; flex:none;
  width:7px; height:7px; border-radius:50%;
  background:var(--fire);
  margin-top:.55em;
}

/* ---------------------------------------------------------
   Component variants
   These were repeated inline style attributes. Same values,
   now in one place. Kept at the end of the file so they win
   the cascade exactly as the inline styles did.
   --------------------------------------------------------- */
/* Keep a short run (the phone number) on one line */
.nowrap{ white-space:nowrap; }

/* Section headings in a split layout (not inside a .head) */
.split-title{ font-size:clamp(2rem,4vw,3rem); }
.split-title-sm{ font-size:clamp(1.9rem,3.6vw,2.7rem); }

/* Call-to-action row in the inner-page sub-hero */
.subhero .hero-actions{ margin-top:30px; }

/* Centred editorial block (Writers audience, Kennels integrity) */
.prose-centered{ max-width:74ch; margin-inline:auto; text-align:center; }
.prose-centered .lede{ max-width:none; }

/* Compact numbered steps (Writers: from idea to release) */
.steps-stack{ gap:14px; }
.steps-stack .step{ padding:20px 22px; }
.steps-stack .step h3{ font-size:1rem; }

/* Notice that introduces a gallery grid */
.notice-intro{ margin-bottom:44px; }
.feature-book + .notice-intro{ margin-top:44px; }

/* Genre shelves on the Writers Gallery */
.genre:has(+ .genre){ margin-bottom:56px; }

/* "Be Fruitful" definitions run in a single column */

/* Puppy photo under the "Under the SunVue name" panel */
.panel + .ph-media{ margin-top:clamp(22px,3vw,34px); }

/* Wide photo under the Integrity statement (Kennels) */
.ph-media-wide{ max-width:920px; margin:clamp(34px,5vw,54px) auto 0; }

/* Home hero equation: sized to the copy column so the whole line, Sunview
   included, fits on one line at every width, phones too. The line is about
   24 em wide in Fraunces italic; 24.6 leaves a little slack, and 34px is the
   pull-quote's marker and left padding. No nowrap: if the web font fails and
   a wider fallback is used, it wraps rather than running off the screen. */
.hero-copy{ container-type:inline-size; }
.equation{
  font-size:min(1.32rem, (100cqi - 34px) / 24.6);
  margin:22px 0;
  padding-block:16px;
}

/* SunVue Vision: the four opening lines read as one group, with a full
   paragraph break before the Writers / Kennels / Fitness paragraphs. */
.vision-intro{ margin-bottom:1.6em; }

/* ---------------------------------------------------------
   Phase 3: production details
   --------------------------------------------------------- */

/* Photos served as AVIF with a JPEG fallback: the <picture> wrapper takes
   the image's box, so the frames and crops are unchanged. */
.ph-media picture{ display:block; }

/* Netlify Forms honeypot: in the form for bots, never shown to people. */
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* The send-failure message, counterpart to .form-done. */
.form-error{
  display:none;
  margin-top:16px; padding:15px 18px;
  border-radius:12px;
  background:rgba(255,61,13,.1);
  border:1px solid rgba(255,106,21,.42);
  color:#ffb59b; font-size:.92rem;
}
.form-error.show{ display:block; }
.form-error a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

/* Footer: Privacy Policy and Cookie preferences. */
.footer-legal{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 20px; }
.footer-end .footer-legal a,
.linklike{
  color:var(--muted);
  font-weight:500;
  text-decoration:underline; text-underline-offset:3px;
}
.linklike{
  background:none; border:0; padding:0;
  font:inherit; font-weight:500;
  cursor:pointer;
}
.footer-end .footer-legal a:hover,
.linklike:hover{ color:var(--amber); }

/* Cookie banner: a card in the bottom-right corner, clear of the hero copy
   and its buttons on desktop; a bottom sheet on phones. It leaves once a
   choice is made. */
.consent{
  position:fixed; z-index:180;
  right:16px; bottom:max(16px, env(safe-area-inset-bottom));
  width:min(440px, calc(100% - 32px));
  padding:18px 20px;
  border-radius:var(--r);
  background:#170f0a;
  border:1px solid var(--hairline);
  box-shadow:var(--lift);
  color:var(--cream);
}
.consent[hidden],
.consent-panel[hidden]{ display:none; }
.consent-main{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 22px; }
.consent-text{ flex:1 1 100%; margin:0; font-size:.9rem; line-height:1.55; color:var(--muted); }
.consent-text strong{ color:var(--cream); }
.consent-text a{ color:var(--amber); text-decoration:underline; text-underline-offset:3px; }
.consent-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.consent .btn{ padding:11px 22px; min-height:44px; font-size:.88rem; }
.consent-panel{
  display:grid; gap:14px;
  margin-top:16px; padding-top:16px;
  border-top:1px solid var(--hairline-2);
}
.consent-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.consent-row strong{ display:block; font-size:.92rem; color:var(--cream); }
.consent-row span{ display:block; margin-top:2px; font-size:.82rem; line-height:1.5; color:var(--muted); }
.consent-row .consent-fixed{ margin:0; font-size:.8rem; color:var(--gold); white-space:nowrap; }
.consent-row input{ flex:none; width:24px; height:24px; accent-color:var(--orange); cursor:pointer; }
.consent-panel .btn{ justify-self:start; }
@media (max-width:560px){
  .consent{
    right:0; bottom:0; width:100%;
    border-radius:var(--r) var(--r) 0 0;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .consent-actions{ width:100%; }
  .consent-actions .btn{ flex:1 1 0; padding-inline:12px; }
}

/* Privacy Policy */
.legal{ max-width:72ch; }
.legal h2{ font-size:clamp(1.3rem,2.2vw,1.65rem); margin:2.1em 0 .6em; }
.legal h2:first-child{ margin-top:0; }
.legal ul{ list-style:disc; padding-left:1.25em; margin:0 0 1.1em; }
.legal li{ margin:.45em 0; font-size:1.04rem; color:var(--muted); }
.legal li::marker{ color:var(--amber); }
.legal strong{ color:var(--cream); }
.legal a{ color:var(--amber); text-decoration:underline; text-underline-offset:3px; }
.legal-date{ margin-top:14px; font-size:.86rem; color:var(--muted-2); }