/* ============================================================
   KLAERI — MAGAZINE DESIGN SYSTEM  ("Option B")
   Shared by every -b page. Dark cover furniture, blush interior.
   Load this first, then any page-specific <style>.
   ============================================================ */

:root{
  /* interior — where you read */
  --paper:#FDF6F5;
  --paper-2:#F7E4E6;      /* pink tint band */
  --paper-3:#EFC9D4;      /* full pink band */
  --ink:#33222A;
  --ink-soft:#6B565D;
  --faint:#A5919A;
  --hair:#EBD2D4;
  --petal:#C2557A;
  --petal-deep:#8E2F52;
  --petal-soft:#F6D9E2;
  --iris:#6B62A6;

  /* cover — mastheads, footers, anything that frames */
  --cover:#141013;
  --cover-2:#1E1519;
  --cover-fg:#F8EFEC;
  --cover-dim:#BCA5AD;
  --cover-faint:#7F6971;
  --cover-pop:#F2A0B8;
  --cover-hair:#312329;

  --ff-display:"Didot","Bodoni 72","Bodoni MT","Playfair Display",Georgia,serif;
  --ff-body:"Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,sans-serif;
  --ff-mono:"SF Mono","IBM Plex Mono",ui-monospace,Menlo,monospace;

  --pad:clamp(1.15rem,5vw,3.5rem);
  --maxw:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}

/* ---------------------------------------------- COVER FURNITURE */
.cover{background:var(--cover);color:var(--cover-fg);position:relative;overflow:hidden}

.strap{border-bottom:1px solid var(--cover-hair)}
.strap-in{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.85rem 0;color:var(--cover-faint);
}
.strap-in span:nth-child(2){display:none}
@media(min-width:680px){.strap-in span:nth-child(2){display:inline}}

.topnav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem 0}
.topnav .mark{font-family:var(--ff-display);font-size:1.45rem;letter-spacing:.01em;text-decoration:none}
.topnav nav{display:none;gap:1.8rem}
@media(min-width:880px){.topnav nav{display:flex}}
.topnav nav a{
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cover-dim);text-decoration:none;padding-bottom:.2rem;
  border-bottom:1px solid transparent;transition:.18s;
}
.topnav nav a:hover,.topnav nav a:focus-visible{color:var(--cover-fg);border-bottom-color:var(--cover-pop)}
.topnav nav a[aria-current]{color:var(--cover-fg);border-bottom-color:var(--cover-pop)}
.topnav .signin{
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cover-fg);text-decoration:none;border:1px solid var(--cover-hair);
  border-radius:999px;padding:.5rem 1.1rem;white-space:nowrap;transition:.18s;
}
.topnav .signin:hover,.topnav .signin:focus-visible{border-color:var(--cover-pop);color:var(--cover-pop)}

/* ---------------------------------------------- DEPARTMENT MASTHEAD
   Every interior page opens with one. Kicker, big serif, standfirst, rule. */
.dept{padding:clamp(2.2rem,6vw,4rem) 0 clamp(1.2rem,3vw,2rem)}
.dept .kick{color:var(--faint);margin:0 0 .85rem}
.dept h1{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(2.6rem,8vw,5.6rem);line-height:.94;letter-spacing:-.025em;
  margin:0;text-wrap:balance;
}
.dept h1 em{font-style:italic;color:var(--petal)}
.dept .standfirst{margin:1.1rem 0 0;max-width:48ch;font-size:clamp(1rem,1.7vw,1.12rem);color:var(--ink-soft)}
.dept hr{border:0;border-top:3px solid var(--ink);margin:clamp(1.5rem,4vw,2.2rem) 0 0}

/* breadcrumb */
.crumb{
  display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;
  font-family:var(--ff-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 1rem;
}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--petal)}

/* ---------------------------------------------- SHEETS + SECTIONS */
.sheet{background:var(--paper);position:relative}
.sheet.tint{background:var(--paper-2)}
.sheet.pink{background:var(--paper-3)}
.sec{padding:clamp(2.6rem,7vw,5rem) 0}

.sec-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.6rem 2rem;padding-bottom:1rem;border-bottom:3px solid var(--ink);
  margin-bottom:clamp(1.5rem,4vw,2.4rem);
}
.sec-head h2{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(1.75rem,4.2vw,2.9rem);line-height:1;letter-spacing:-.015em;margin:0;
}
.sec-head h2 em{font-style:italic;color:var(--petal)}
.sec-head .kick{color:var(--faint);white-space:nowrap;margin:0}

/* ---------------------------------------------- CONTROLS */
.chips{display:flex;gap:.45rem;flex-wrap:wrap}
.chips button,.chips a{
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:1px solid var(--hair);border-radius:999px;
  padding:.55rem 1.05rem;cursor:pointer;color:var(--ink-soft);font-weight:600;
  transition:.18s;text-decoration:none;
}
.chips button:hover,.chips a:hover{border-color:var(--petal);color:var(--petal)}
.chips button[aria-pressed="true"],.chips a[aria-current]{
  background:var(--petal);border-color:var(--petal);color:var(--paper);
}

.field{
  width:100%;background:var(--paper);color:var(--ink);border:1px solid var(--hair);
  border-radius:999px;padding:.9rem 1.3rem;font-family:var(--ff-body);font-size:.97rem;
  outline:none;transition:border-color .18s;
}
.field::placeholder{color:var(--faint)}
.field:focus{border-color:var(--petal)}

.btn{
  display:inline-block;background:var(--ink);color:var(--paper);border:0;border-radius:999px;
  padding:.85rem 1.7rem;font-family:var(--ff-body);font-weight:700;font-size:.9rem;
  cursor:pointer;text-decoration:none;transition:.18s;
}
.btn:hover{background:var(--petal)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair)}
.btn.ghost:hover{border-color:var(--petal);color:var(--petal)}

/* ---------------------------------------------- PRODUCT CARDS */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:clamp(.8rem,2vw,1.25rem)}
.card{
  background:var(--paper);border:1px solid var(--hair);text-decoration:none;color:inherit;
  padding:1.25rem 1.2rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;
  transition:border-color .18s,transform .18s;
}
.sheet.tint .card{background:var(--paper)}
.card:hover,.card:focus-visible{border-color:var(--petal);transform:translateY(-3px)}
.card .brand{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.card .name{font-family:var(--ff-display);font-size:1.22rem;line-height:1.14;letter-spacing:-.01em}
.card .meta{font-size:.76rem;color:var(--ink-soft);text-transform:capitalize}
.card .rule{border:0;border-top:1px solid var(--hair);margin:.2rem 0 0}
.card .tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:auto;padding-top:.7rem}
.tag{
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.06em;
  background:var(--petal-soft);color:var(--petal-deep);padding:.24rem .5rem;border-radius:3px;
}
.tag.iris{background:#E6E4F2;color:var(--iris)}
.tag.plain{background:transparent;border:1px solid var(--hair);color:var(--ink-soft)}

.state{
  grid-column:1/-1;text-align:center;padding:clamp(2.4rem,6vw,4rem) 1rem;color:var(--faint);
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
}

.more{margin-top:clamp(1.4rem,3vw,2.1rem);text-align:center}
.more a{
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--petal);color:var(--petal);padding-bottom:.25rem;
}

/* ---------------------------------------------- PULL QUOTE */
.pull{padding:clamp(2.8rem,7vw,5rem) 0;text-align:center}
.pull blockquote{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(1.7rem,5vw,3.2rem);line-height:1.08;letter-spacing:-.02em;
  margin:0 auto;max-width:20ch;text-wrap:balance;
}
.pull blockquote em{font-style:italic;color:var(--petal)}
.pull .attrib{margin:1.5rem 0 0;color:var(--ink-soft)}
.sheet.pink .pull blockquote{color:var(--ink)}
.sheet.pink .pull blockquote em{color:var(--petal-deep)}

/* ---------------------------------------------- FOOTER */
.foot{background:var(--cover);color:var(--cover-dim);padding:clamp(2.5rem,6vw,3.8rem) 0 2rem}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;padding-bottom:2rem;border-bottom:1px solid var(--cover-hair)}
@media(min-width:760px){.foot-top{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
.foot .mark{font-family:var(--ff-display);font-size:1.65rem;color:var(--cover-fg);margin:0 0 .55rem}
.foot p{margin:0;font-size:.88rem;max-width:34ch}
.foot h4{font-family:var(--ff-mono);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cover-faint);margin:0 0 .8rem;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.foot ul a{font-size:.88rem;text-decoration:none;color:var(--cover-dim)}
.foot ul a:hover,.foot ul a:focus-visible{color:var(--cover-pop)}
.foot-bot{padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;color:var(--cover-faint)}

/* ---------------------------------------------- MISC */
:focus-visible{outline:2px solid var(--petal);outline-offset:3px}
.cover :focus-visible,.foot :focus-visible{outline-color:var(--cover-pop)}
.sr{position:absolute;left:-9999px}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{transition:none!important}
}

/* ============================================================
   DOCUMENT PAGES — prose, FAQ, legal, marketing.
   One measure, one scale, so every text page reads as the
   same publication rather than thirty separate designs.
   ============================================================ */
.doc{max-width:none;padding:clamp(2rem,5vw,3.4rem) 0 clamp(3rem,7vw,5rem)}
.doc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.8rem,4vw,3rem)}
@media(min-width:900px){.doc-grid{grid-template-columns:minmax(0,1fr) 15rem}}

.prose{max-width:68ch}
.prose > * + *{margin-top:1.05em}
.prose h2{
  font-family:var(--ff-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.08;letter-spacing:-.014em;margin-top:2.4em;padding-bottom:.45rem;
  border-bottom:1px solid var(--hair);text-wrap:balance;
}
.prose h2:first-child{margin-top:0}
.prose h2 em{font-style:italic;color:var(--petal)}
.prose h3{font-family:var(--ff-display);font-weight:400;font-size:1.28rem;margin-top:1.9em;letter-spacing:-.008em}
.prose p{margin:0;color:var(--ink-soft);line-height:1.68}
.prose p strong,.prose li strong{color:var(--ink);font-weight:600}
.prose a{color:var(--petal)}
.prose ul,.prose ol{margin:0;padding-left:1.15rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:.5rem}
.prose li{line-height:1.6}
.prose li::marker{color:var(--petal)}
.prose blockquote{
  margin:1.6em 0;padding:.2rem 0 .2rem 1.2rem;border-left:3px solid var(--petal);
  font-family:var(--ff-display);font-size:1.25rem;line-height:1.35;color:var(--ink);
}
.prose hr{border:0;border-top:1px solid var(--hair);margin:2.4em 0}
.prose code{font-family:var(--ff-mono);font-size:.85em;background:var(--paper-2);padding:.12em .35em;border-radius:3px}
.prose table{width:100%;border-collapse:collapse;font-size:.9rem}
.prose thead th{
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);text-align:left;font-weight:400;padding:0 .8rem .6rem 0;border-bottom:2px solid var(--ink);
}
.prose tbody td{padding:.7rem .8rem .7rem 0;border-bottom:1px solid var(--hair);vertical-align:baseline;color:var(--ink-soft)}
.table-scroll{overflow-x:auto}

/* small print — legal pages */
.fineprint{font-size:.92rem}
.fineprint p,.fineprint li{font-size:.92rem}
.updated{
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);margin:0 0 1.6rem;
}

/* contents rail */
.toc{display:flex;flex-direction:column;gap:0}
@media(min-width:900px){.toc-wrap{position:sticky;top:1.4rem;align-self:start}}
.toc a{
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;padding:.5rem 0;border-bottom:1px solid var(--hair);
  transition:.16s;
}
.toc a:last-child{border-bottom:0}
.toc a:hover{color:var(--petal)}

/* FAQ */
.qa{border-top:1px solid var(--hair)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{
  cursor:pointer;list-style:none;padding:1.05rem 2rem 1.05rem 0;position:relative;
  font-family:var(--ff-display);font-size:1.2rem;line-height:1.3;letter-spacing:-.008em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+";position:absolute;right:.2rem;top:1.05rem;
  font-family:var(--ff-mono);color:var(--petal);font-size:1rem;transition:transform .18s;
}
.qa details[open] summary::after{content:"\2212"}
.qa summary:hover{color:var(--petal)}
.qa .a{padding:0 0 1.15rem;color:var(--ink-soft);max-width:66ch;line-height:1.65}
.qa .a > * + *{margin-top:.8em}

/* pricing */
.plans{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem}
@media(min-width:760px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plan{border:1px solid var(--hair);padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.7rem}
.plan.lead{background:var(--paper-2);border-color:var(--petal)}
.plan .nm{font-family:var(--ff-display);font-size:1.75rem;letter-spacing:-.012em}
.plan .pr{font-family:var(--ff-display);font-size:2.6rem;line-height:1;letter-spacing:-.02em}
.plan .pr small{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.plan ul{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem;flex:1}
.plan li{font-size:.9rem;color:var(--ink-soft);padding-left:1.1rem;position:relative}
.plan li::before{content:"—";position:absolute;left:0;color:var(--petal)}
.plan .btn{align-self:flex-start;margin-top:.9rem}