/* SELFIE LIVING — palette sampled from the logo. See BRAND & CONTENT/5 - THE LOOK.md */
:root{
  --ink:#2F5480; --cream:#F7F0E4; --gold:#FFBC4D; --amber:#F79A1F;
  --paper:#FFFDF8; --rule:#E4D9C4; --shadow:rgba(47,84,128,.09);
  --max:1080px; --font:"Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);
     font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
a{color:var(--ink)}
img{max-width:100%;height:auto;display:block}

/* ---------- header ---------- */
/* Centred masthead — the editorial pattern used on thehealthagents.com: the logo gets a
   full row to itself and runs large; navigation sits on a hairline row beneath it.
   Deliberately NOT sticky — a mark this size would eat the screen on scroll. */
/* The logo carries its own golden glow on cream, so on a flat cream header it reads as a soft
   square no matter how hard the edge is feathered — the AREA is warmer than the page. Fix: give
   the header the same radial glow, centred where the logo sits, so the two are one continuous
   field and there is no edge to see. */
header.site{padding:34px 0 0;border-bottom:1px solid var(--rule);
  background:radial-gradient(circle at 50% 34%, #FFD98A 0%, #FFE7B8 26%, #FBEFDC 52%, var(--cream) 74%)}
.brand{display:block;margin:0 auto;width:min(340px,52vw);text-decoration:none}
.brand img{width:100%;height:auto}
.navrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;
        padding-top:6px;padding-bottom:16px}
nav.site{display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:center}
nav.site a{text-decoration:none;font-weight:600;font-size:16px;opacity:.86;padding:4px 0;
           border-bottom:2px solid transparent}
nav.site a:hover,nav.site a[aria-current="page"]{border-bottom-color:var(--amber);opacity:1}
.langbtn{border:1.5px solid var(--ink);background:none;color:var(--ink);font:inherit;
         font-size:14px;font-weight:700;padding:5px 13px;border-radius:999px;cursor:pointer}
.langbtn:hover{background:var(--ink);color:var(--cream)}

/* ---------- hero ---------- */
.hero{padding:60px 0 58px;text-align:center;background:
      radial-gradient(1100px 620px at 88% -8%, rgba(255,188,77,.62), rgba(255,188,77,0) 70%);}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.5rem);line-height:1.1;margin:0 0 18px;letter-spacing:-.015em}
.hero p.lede{font-size:clamp(1.06rem,2.1vw,1.3rem);max-width:46ch;margin:0 auto 28px}
.hero .eyebrow{text-align:center}

/* ---------- type ---------- */
h1,h2,h3{letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3vw,2.05rem);margin:0 0 14px;line-height:1.18}
h3{font-size:1.2rem;margin:26px 0 8px}
section.band{padding:62px 0;border-top:1px solid var(--rule)}
section.band.tint{background:
  radial-gradient(760px 460px at 12% 0%, rgba(255,188,77,.30), rgba(255,188,77,0) 72%)}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
         opacity:.68;margin:0 0 10px}
.prose{max-width:64ch}
.prose p{margin:0 0 1.05em}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.25em}
.prose li{margin:.4em 0}
.prose strong{font-weight:800}

/* ---------- cards ---------- */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:26px;
      text-decoration:none;color:inherit;display:block;transition:transform .16s,box-shadow .16s}
a.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px var(--shadow)}
.card h3{margin:0 0 8px;font-size:1.16rem}
.card p{margin:0;font-size:.96rem;opacity:.88}
.pill{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.11em;
      text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:12px;
      background:rgba(255,188,77,.42)}
.pill.puppy{background:rgba(74,104,138,.17)}
.pill.you{background:rgba(47,84,128,.90);color:var(--cream)}

/* ---------- recipe / callout ---------- */
.callout{background:var(--paper);border-left:4px solid var(--amber);border-radius:0 12px 12px 0;
         padding:20px 24px;margin:26px 0}
.callout p:last-child{margin-bottom:0}
.two{display:grid;gap:34px;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start}
@media(max-width:760px){.two{grid-template-columns:1fr}}
.ing{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:22px 24px}
.ing h3{margin-top:0}
.ing ul{list-style:none;padding:0;margin:0}
.ing li{padding:7px 0;border-bottom:1px dashed var(--rule);font-size:.97rem}
.ing li:last-child{border-bottom:0}

/* ---------- books ---------- */
.book{background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:26px;
      display:flex;flex-direction:column;gap:10px}
.book .status{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.btn{display:inline-block;margin-top:auto;padding:11px 20px;border-radius:999px;
     background:var(--ink);color:var(--cream);text-decoration:none;font-weight:700;font-size:.95rem;
     text-align:center;transition:background .15s}
.btn:hover{background:#24425f}
.btn.ghost{background:none;border:2px solid var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--cream)}
.btn[href="#"]{opacity:.45;pointer-events:none}

/* ---------- signup ---------- */
.signup{background:var(--paper);border:1px solid var(--rule);border-radius:18px;padding:34px}
.signup form{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.signup input{flex:1 1 240px;padding:13px 16px;border:1.5px solid var(--rule);border-radius:999px;
              font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.signup input:focus{outline:2px solid var(--amber);outline-offset:1px}
.signup button{padding:13px 26px;border:0;border-radius:999px;background:var(--ink);
               color:var(--cream);font:inherit;font-weight:700;cursor:pointer}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--rule);padding:44px 0 60px;font-size:.93rem}
footer.site .wrap{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
footer.site a{opacity:.85}
footer.site .sp{margin-left:auto}

/* ---------- bilingual ---------- */
/* MUST be scoped under body: a bare [lang="es"] also matches <html lang="es">, which the
   toggle sets — that hid the entire document and rendered a blank page. */
body [lang="es"]{display:none}
body.es [lang="en"]{display:none}
body.es [lang="es"]{display:revert}

/* the masthead is large; give it back some room on phones */
@media(max-width:640px){
  header.site{padding-top:22px}
  .brand{width:min(230px,58vw)}
  nav.site{gap:14px}
  nav.site a{font-size:15px}
}

/* ---------- book covers & look-inside ---------- */
.book .cover{display:block;border-radius:10px;overflow:hidden;background:#fff;
             border:1px solid var(--rule);margin-bottom:16px;line-height:0}
.book .cover img{width:100%;transition:transform .25s}
.book .cover:hover img{transform:scale(1.03)}
.book .cover--soon{aspect-ratio:621/810;display:block;
  background:repeating-linear-gradient(135deg,#FFFDF8,#FFFDF8 12px,#F4EADA 12px,#F4EADA 24px)}
.book .peek{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
            opacity:.7;margin:6px 0 8px}
.book .pages{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.book .pages a{display:block;border:1px solid var(--rule);border-radius:8px;overflow:hidden;
               background:#fff;line-height:0}
.book .pages img{width:100%;transition:transform .2s}
.book .pages a:hover img{transform:scale(1.06)}

/* ---------- lightbox ---------- */
#lb{position:fixed;inset:0;z-index:60;background:rgba(47,84,128,.90);
    display:flex;align-items:center;justify-content:center;padding:28px;cursor:zoom-out}
#lb[hidden]{display:none}
#lb img{max-width:min(760px,92vw);max-height:92vh;width:auto;border-radius:10px;
        background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.35);cursor:default}
#lb button{position:absolute;top:16px;right:22px;font-size:38px;line-height:1;
           background:none;border:0;color:var(--cream);cursor:pointer;padding:6px 12px}

/* ---------- four covers on the home page ---------- */
.covergrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.covergrid a{display:block;line-height:0;border-radius:12px;overflow:hidden;
  border:1px solid var(--rule);background:#fff;
  box-shadow:0 6px 18px var(--shadow);transition:transform .18s,box-shadow .18s}
.covergrid a:hover{transform:translateY(-3px);box-shadow:0 14px 32px var(--shadow)}
.covergrid img{width:100%}
@media(max-width:760px){.covergrid{max-width:440px;margin:0 auto}}

/* Author-controlled line breaks in the hero lede. Dropped on narrow screens, where a forced
   break would leave a two-word orphan line. */
.lede .lb{display:inline}
@media(max-width:760px){.lede .lb{display:none}}

/* imperial equivalents beside the metric weight — same ink, just lighter in texture so the
   grams still read as the primary number */
.ing li em{font-style:italic;font-size:.92em}
.ing li.note{font-size:.85rem;line-height:1.45;padding-top:12px;border-bottom:0;font-style:italic}

/* recipes with more than one ingredient group (empanadas: dough / filling / ají) */
.ing .sub{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
          margin:22px 0 6px}
.ing h3 + .sub{margin-top:14px}

/* Finished-dish photo, full-bleed across the top of the ingredient card.
   Negative margins match .ing's 22px/24px padding. */
.ing .dish{display:block;width:calc(100% + 48px);max-width:none;margin:-22px -24px 20px;
  aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:13px 13px 0 0;background:#F1E7D6}
/* NOTE: max-width:none is load-bearing — the global img{max-width:100%} otherwise caps the
   calc() and the photo sits inset instead of bleeding to the card edge. */

/* affiliate marker — must stay visible; FTC requires disclosure to be clear and conspicuous */
.aff{display:inline-block;font-size:.72em;font-weight:800;letter-spacing:.08em;
     background:var(--ink);color:var(--cream);padding:2px 7px;border-radius:4px;
     vertical-align:middle;text-transform:uppercase}

/* ---------- in-page jump nav (Pets page) ---------- */
.jump{margin:26px auto 0;max-width:640px;display:flex;flex-wrap:wrap;
      justify-content:center;gap:10px 18px;font-size:.95rem}
.jump a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--amber);
        padding-bottom:2px;white-space:nowrap}
.jump a:hover{border-bottom-width:2px}

/* ── Picks page ─ curated product lists ──────────────────
   Editorial, not e-commerce: cards sit on paper with a hairline edge and a very
   soft lift, so the page reads as a curated shelf rather than a search results
   grid. The badge is the only saturated colour in a card — it carries the one
   piece of information a buyer actually wants (do they own it, or not). */

/* Script face for the picks page only. Parisienne is used at large sizes on short
   words, where a script stays legible; Cormorant carries the hero line under it.
   Both have a real fallback so the page never reflows into something ugly. */
:root{ --script:"Parisienne","Snell Roundhand","Apple Chancery",cursive;
       --serif:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
       /* Product names only. High-contrast display serif — the fashion-magazine
          look. It is set large on purpose; at small sizes the thin strokes vanish. */
       --display:"Playfair Display","Cormorant Garamond","Didot",Georgia,serif; }

.picks-hero h1{font-family:var(--script);font-weight:400;
  font-size:clamp(3rem,8.4vw,5.2rem);line-height:1.02;letter-spacing:0;
  padding-bottom:.09em;margin-bottom:14px}
.picks-hero p.lede{font-family:var(--serif);font-size:clamp(1.16rem,2.3vw,1.44rem);
  line-height:1.5;max-width:56ch}
/* One sentence per line. Each still wraps on its own if the screen is narrow,
   which a <br> would not do. */
.picks-hero p.lede span{display:block;text-wrap:balance;text-wrap:pretty}

/* Parisienne ships in one weight only, so the section titles get their weight from
   a hairline stroke rather than a bold face the font does not have. Keep the stroke
   under ~1px: past that the thin joins of the script fill in and go muddy. */
.topic-head h2{font-family:var(--script);font-weight:400;letter-spacing:0;
  font-size:clamp(3.4rem,7.4vw,5.2rem);line-height:.98;padding-bottom:.1em;
  -webkit-text-stroke:1.1px currentColor}

/* ---------- picks tab bar ----------
   Thirteen lists is far too much page to scroll through, so the tabs sit under the
   hero and then STICK to the top of the window (her request, 5 Sep 2026). The chips
   are inline-block, never flex, on purpose: the bilingual wrapper is toggled with
   display:none / display:revert, and `revert` throws away an author `display:flex`.
   Layout therefore has to survive the div going back to plain block. */
.picks-tabs{position:sticky;top:0;z-index:30;
  background:rgba(247,240,228,.94);-webkit-backdrop-filter:saturate(1.5) blur(9px);
  backdrop-filter:saturate(1.5) blur(9px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:11px 0 9px;margin-bottom:-1px}
.picks-tabs .tabrow{text-align:center;font-size:0}   /* kills the inline-block word gaps */
.picks-tabs a{display:inline-block;margin:0 9px 10px;padding:8px 18px 9px;
  font-size:.83rem;font-weight:700;letter-spacing:.02em;line-height:1.15;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  background:var(--paper);border:1px solid var(--rule);border-radius:999px;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.picks-tabs a:hover{border-color:var(--amber);background:#fff}
.picks-tabs a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* Below the fold on a phone the chips would stack four rows deep and eat the screen,
   so there they become one swipeable line instead. */
@media (max-width:760px){
  .picks-tabs{padding:9px 0 8px}
  .picks-tabs .wrap{padding:0}
  .picks-tabs .tabrow{text-align:left;white-space:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 14px}
  .picks-tabs .tabrow::-webkit-scrollbar{display:none}
  .picks-tabs a{margin:0 10px 0 0}
}

/* The sticky bar would otherwise sit on top of the heading you just jumped to. Its
   height changes with the viewport (the chips wrap onto two rows on a laptop and one
   scrolling row on a phone), so the real measured height is written to --tabh by the
   page script; the literal is only the fallback before that runs. */
section.picks-band,#ourbooks{scroll-margin-top:calc(var(--tabh,64px) + 6px)}

section.picks-band{padding:80px 0 60px}
section.picks-band:first-of-type{border-top:1px solid var(--rule)}

/* The section header has to out-rank the product names under it. The product titles are
   Playfair 600 at ~41px, so a thin script at 3rem was losing the fight. Fixed with size,
   a heavier stroke, and an amber rule instead of a grey hairline. */
.topic-head{display:flex;align-items:baseline;gap:16px;margin:0 0 30px;
            padding-bottom:18px;border-bottom:3px solid var(--amber)}
.topic-head h2{margin:0}   /* size + letter-spacing are set in the script rule above */
.topic-head .count{margin-left:auto;font-size:.8rem;font-weight:800;letter-spacing:.16em;
                   opacity:.5;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Her voice, above the products. Serif and a touch larger than the cards, so it reads
   as someone talking rather than as more page furniture. */
.topic-intro{font-family:var(--serif);font-size:clamp(1.08rem,2vw,1.3rem);line-height:1.5;
  max-width:60ch;margin:-8px 0 26px;text-wrap:pretty}

ul.picks{list-style:none;padding:0;margin:0;display:grid;gap:22px;
         grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}

li.pk{background:var(--paper);border:1px solid var(--rule);border-radius:14px;
      display:flex;flex-direction:column;overflow:hidden;
      box-shadow:0 1px 2px var(--shadow);
      transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease}
li.pk:hover{box-shadow:0 12px 30px var(--shadow);transform:translateY(-3px);
            border-color:rgba(47,84,128,.22)}
.pk-body{padding:22px 24px 22px;display:flex;flex-direction:column;flex:1}

/* Product shot. Photos sit on white because that is how product photography is lit;
   `contain` keeps a tall bottle and a wide box the same visual size on the shelf. */
.pk-shot{aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--rule);
         display:flex;align-items:center;justify-content:center;overflow:hidden;
         text-decoration:none}
.pk-shot img{width:100%;height:100%;object-fit:contain;padding:14px}
li.pk:hover .pk-shot img{transform:scale(1.03);transition:transform .3s ease}

/* No photo yet: a quiet monogram tile, so the row of cards still lines up and the
   gap reads as a choice rather than a failed image. */
.pk-shot--empty{background:
   radial-gradient(120% 120% at 30% 15%, rgba(255,188,77,.30), rgba(255,188,77,0) 68%),
   var(--cream)}
.pk-shot--empty span{font-family:var(--script);font-size:3.4rem;line-height:1;
   color:var(--ink);opacity:.26;padding-bottom:.12em}
/* The product name is the hero of the card. Cormorant against the sans body text is the
   whole design — the serif/sans contrast does the work, so the name reads as a title
   rather than as a bolded label. The short amber rule under it separates the name from
   the reasoning without a heavy border. */
/* Weight 600 rather than 500. At 500 Playfair reads delicate; at 600 it reads
   authoritative, which is what a product name on a shopping page has to do. */
li.pk h3{font-family:var(--display);font-weight:600;
  font-size:clamp(1.5rem,2.8vw,1.85rem);line-height:1.14;letter-spacing:-.015em;
  color:#24425F;margin:14px 0 0;
  /* No hyphens. A word that will not fit moves down whole — "toiletry" splitting into
     "toi-" + "letry" made every card look untidy. overflow-wrap stays only as the last
     resort, for a word wider than the entire card. text-wrap:pretty evens the lines. */
  hyphens:none;overflow-wrap:break-word;text-wrap:pretty}
li.pk h3::after{content:"";display:block;width:46px;height:2px;background:var(--amber);
  margin:15px 0 15px;border-radius:2px}
li.pk p{margin:0;font-size:.94rem;line-height:1.6;opacity:.8}
li.pk p.cta{margin-top:auto;padding-top:16px;font-size:.88rem;font-weight:700;opacity:1}
li.pk p.cta a{color:var(--ink);text-decoration:none;
              border-bottom:1.5px solid var(--amber);padding-bottom:2px}
li.pk p.cta a:hover{border-bottom-width:3px}
li.pk p.cta .aff{margin-left:8px}

/* An editorial eyebrow, not a pill. A filled badge competed with the title for
   attention; this labels the card and then gets out of the way. */
.tier{align-self:flex-start;font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;
      font-weight:800;white-space:nowrap}
.tier.used,.tier.pick{background:none;color:var(--ink);opacity:.5}

@media (max-width:560px){
  .pk-body{padding:17px 18px}
  ul.picks{gap:14px}
}

/* ── Amazon button on book cards: blue text, so it reads clearly ── */
.book .btn{background:#fff;color:var(--ink);border:2px solid var(--ink);font-weight:700}
.book .btn:hover{background:var(--ink);color:#fff}