/* =========================================================
   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);
}
.shell-wide{ max-width:1480px; }

.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;
    transition:max-height .38s cubic-bezier(.2,.7,.3,1);
  }
  .nav.open{ max-height:70vh; overflow-y:auto; }
  .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; }
  .mast-cta .btn:not(.btn-keep){ display:none; }
}
@media (max-width:560px){
  .mast-cta .btn-keep{ display:none; }
  .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;
  padding:clamp(64px,8vw,110px) 0 clamp(52px,6vw,80px);
  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-quote{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.12rem,1.9vw,1.5rem);
  color:var(--gold);
  line-height:1.35;
  margin:0 0 26px;
  padding-left:20px;
  border-left:2px solid rgba(255,201,74,.45);
}
.hero-copy .lede{ margin-bottom:34px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

.hero-art{ position:relative; display:grid; place-items:center; }
.hero-art img{
  position:relative; z-index:2;
  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{
  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{
    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{
    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-quote{ border-left:0; padding-left:0; border-top:2px solid rgba(255,201,74,.4); padding-top:16px; display:inline-block; }
  .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 h4{ 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; }
@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;
}

.stats{ display:flex; flex-wrap:wrap; gap:clamp(24px,3.4vw,44px); }
.stat b{
  display:block;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.9rem,3.2vw,2.5rem);
  line-height:1;
  background:var(--fire);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:6px;
}
.stat span{
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); font-weight:500;
}

/* ---------------------------------------------------------
   12. Shelf rail (horizontal scroller)
   --------------------------------------------------------- */
.shelf-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:26px; flex-wrap:wrap;
}
.shelf-head h3{ font-size:clamp(1.4rem,2.4vw,1.85rem); color:var(--cream); margin:0; }
.shelf-nav{ display:flex; gap:10px; }
.shelf-btn{
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,242,222,.22);
  background:rgba(255,242,222,.04);
  color:var(--cream);
  display:grid; place-items:center; cursor:pointer;
  transition:border-color .22s ease, color .22s ease, background .22s ease, opacity .22s ease;
}
.shelf-btn:hover:not(:disabled){ border-color:var(--amber); color:var(--amber); background:rgba(255,174,59,.1); }
.shelf-btn:disabled{ opacity:.3; cursor:default; }
.shelf-btn svg{ width:17px; height:17px; }

.shelf{
  display:flex; gap:clamp(16px,2vw,24px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:4px 0 22px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,174,59,.4) transparent;
}
.shelf::-webkit-scrollbar{ height:6px; }
.shelf::-webkit-scrollbar-track{ background:rgba(255,242,222,.05); border-radius:99px; }
.shelf::-webkit-scrollbar-thumb{ background:rgba(255,174,59,.4); border-radius:99px; }
.shelf > *{ scroll-snap-align:start; flex:0 0 clamp(196px,22vw,236px); }

/* ---------------------------------------------------------
   13. Book cards
   --------------------------------------------------------- */
.books{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(215px,100%),1fr));
  gap:clamp(18px,2.4vw,28px);
}
@media (max-width:620px){
  .books{ grid-template-columns:1fr 1fr; gap:16px; }
}
.book{ display:flex; flex-direction:column; transition:transform .32s cubic-bezier(.2,.7,.3,1); }
.book:hover{ transform:translateY(-8px); }

.book-cover{
  position:relative;
  aspect-ratio:3/4.4;
  border-radius:6px 14px 14px 6px;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:24px 20px 20px 26px;
  box-shadow:var(--lift);
  transition:box-shadow .32s ease;
}
.book:hover .book-cover{ box-shadow:0 30px 60px -22px rgba(255,106,21,.5); }
.book-cover::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:11px;
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.06));
}
.book-cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(118deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 42%);
  pointer-events:none;
}
.book-cover h4{
  position:relative; z-index:2;
  font-size:1.16rem; line-height:1.14;
  color:#1a0d05; margin:0;
  letter-spacing:-.02em;
}
/* Every cover runs light at the top and deep at the foot, so the
   title always sits on a light field and the byline on a dark one. */
.book-cover .by{
  position:relative; z-index:2;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:rgba(255,242,222,.9);
}
.cover-1{ background:linear-gradient(158deg,#ffc94a,#ff8a1f 45%,#c92a05); }
.cover-2{ background:linear-gradient(158deg,#ffe08a,#ff6a15 55%,#7a1c02); }
.cover-3{ background:linear-gradient(158deg,#ffc94a,#ff3d0d 60%,#5c1401); }
.cover-4{ background:linear-gradient(158deg,#ffe08a,#ffae3b 40%,#c92a05); }
.cover-5{ background:linear-gradient(158deg,#ffae3b,#ff3d0d 50%,#42200a); }
.cover-6{ background:linear-gradient(158deg,#ffc94a,#ff6a15 40%,#3a1508); }

.book-meta{ padding:16px 4px 0; }
.book-meta h5{
  font-family:var(--display); font-weight:600;
  font-size:1rem; line-height:1.25; color:var(--cream);
  margin:0 0 4px;
}
.book-meta .author{ font-size:.86rem; color:var(--muted-2); margin:0 0 8px; }
.book-meta .price{
  font-size:.9rem; font-weight:600; color:var(--gold); margin:0;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.book-meta .price em{
  font-style:normal; font-weight:450; font-size:.78rem;
  color:var(--muted-2);
  padding-left:8px; border-left:1px solid var(--hairline-2);
}

/* ---------------------------------------------------------
   14. Filter chips
   --------------------------------------------------------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  padding:10px 20px; border-radius:999px;
  border:1px solid rgba(255,242,222,.18);
  background:transparent;
  font-size:.87rem; font-weight:450; color:var(--muted);
  cursor:pointer;
  transition:border-color .22s ease, color .22s ease, background .22s ease, transform .22s ease;
}
.chip:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-2px); }
.chip[aria-pressed="true"]{
  background:var(--fire); border-color:transparent;
  color:#22110a; font-weight:600;
}

/* ---------------------------------------------------------
   15. Category tiles
   --------------------------------------------------------- */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(14px,1.8vw,20px);
}
.tile{
  position:relative;
  min-height:158px;
  border-radius:var(--r);
  padding:24px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  border:1px solid var(--hairline-2);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.tile:hover{ transform:translateY(-6px) scale(1.015); box-shadow:var(--lift-fire); }
.tile b{
  position:relative; z-index:2;
  font-family:var(--display); font-weight:600; font-size:1.24rem;
  color:#1a0d05; line-height:1.15; letter-spacing:-.02em;
}
.tile small{ position:relative; z-index:2; font-size:.78rem; color:rgba(26,13,5,.82); font-weight:500; }
.tile-dark b{ color:var(--cream); }
.tile-dark small{ color:var(--muted); }
.tile::after{
  content:""; position:absolute; top:-30%; right:-18%;
  width:64%; aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,.16);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.tile:hover::after{ transform:scale(1.25); }

/* ---------------------------------------------------------
   16. Dog / litter cards
   --------------------------------------------------------- */
.litters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));
  gap:clamp(18px,2.4vw,26px);
}
.pup{
  border-radius:var(--r);
  overflow:hidden;
  background:linear-gradient(165deg,var(--ash-2),var(--ash));
  border:1px solid var(--hairline-2);
  transition:transform .32s cubic-bezier(.2,.7,.3,1), border-color .32s ease, box-shadow .32s ease;
}
.pup:hover{ transform:translateY(-8px); border-color:rgba(255,174,59,.36); box-shadow:var(--lift); }
.pup-photo{
  position:relative;
  aspect-ratio:4/3;
  display:grid; place-items:center;
  font-size:3.6rem;
  overflow:hidden;
}
.pup-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 46%,rgba(11,7,5,.55));
}
.pup-1{ background:linear-gradient(150deg,#ff6a15,#ffc94a); }
.pup-2{ background:linear-gradient(150deg,#c92a05,#ff8a1f); }
.pup-3{ background:linear-gradient(150deg,#42200a,#ffae3b); }
.pup-body{ padding:22px 24px 26px; }
.pup-body h4{ font-size:1.15rem; color:var(--cream); margin-bottom:.35em; }
.pup-body p{ font-size:.92rem; margin:0 0 14px; }
.pup-specs{ display:flex; flex-wrap:wrap; gap:8px; }
.pup-specs li{
  font-size:.74rem; letter-spacing:.06em;
  padding:5px 12px; border-radius:999px;
  background:rgba(255,242,222,.06);
  border:1px solid var(--hairline-2);
  color:var(--muted);
}

.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; }
.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); }

/* ---------------------------------------------------------
   17. 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 h4{ 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; }

/* ---------------------------------------------------------
   18. Checklist
   --------------------------------------------------------- */
.checks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:12px; }
.checks li{
  display:flex; align-items:flex-start; gap:14px;
  padding:17px 20px;
  border-radius:var(--r-sm);
  background:rgba(255,242,222,.035);
  border:1px solid var(--hairline-2);
  font-size:.95rem; color:rgba(255,242,222,.86);
  transition:border-color .25s ease, background .25s ease;
}
.checks li:hover{ border-color:rgba(255,174,59,.32); background:rgba(255,174,59,.06); }
.checks .tick{
  flex:none; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; margin-top:1px;
  background:var(--fire); color:#22110a;
  font-size:.72rem; font-weight:800;
}

/* ---------------------------------------------------------
   19. Quotes
   --------------------------------------------------------- */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:clamp(16px,2vw,22px); }
.quote{
  position:relative;
  padding:34px 30px 30px;
  border-radius:var(--r);
  background:linear-gradient(165deg,var(--ash-2),var(--ash));
  border:1px solid var(--hairline-2);
  border-top:2px solid var(--flame);
  transition:transform .3s ease;
}
.quote:hover{ transform:translateY(-5px); }
.quote::before{
  content:"\201C";
  position:absolute; top:8px; right:22px;
  font-family:var(--display); font-size:5rem; line-height:1;
  color:rgba(255,174,59,.16);
}
.quote p{
  font-family:var(--display); font-style:italic;
  font-size:1.05rem; line-height:1.5;
  color:rgba(255,242,222,.9);
  margin-bottom:18px;
}
.quote cite{ font-style:normal; font-size:.85rem; font-weight:600; color:var(--gold); display:block; }
.quote cite small{ display:block; font-weight:400; color:var(--muted-2); font-size:.8rem; margin-top:2px; }

/* ---------------------------------------------------------
   20. 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; }

/* ---------------------------------------------------------
   21. 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; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,242,222,.3); }
.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; }

/* ---------------------------------------------------------
   22. 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); }

/* ---------------------------------------------------------
   23. 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); }
.subhero-art{
  position:absolute; z-index:1;
  right:-6%; top:50%; transform:translateY(-50%);
  width:min(46%,540px);
  opacity:.2;
  pointer-events:none;
}
@media (max-width:920px){ .subhero-art{ opacity:.1; right:-18%; width:70%; } }

.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%);
}

/* ---------------------------------------------------------
   24. 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 h4{
  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;
  font-size:.84rem; color:rgba(255,242,222,.42);
}
.footer-end a{ color:var(--gold); font-weight:600; }
.footer-end a:hover{ text-decoration:underline; }

/* ---------------------------------------------------------
   25. 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; }

/* ---------------------------------------------------------
   26. 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; }
}

/* =========================================================
   27. 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 (Welcome 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 h4{ 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; }

/* 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;
}