/* ─────────────────────────────────────────────────────────────
   PETYX — shared styles for standalone content pages
   Tokens, header, footer mirror index.html so the content pages
   are pixel-identical to the storefront chrome. Warm apothecary.
   ───────────────────────────────────────────────────────────── */
:root{
  --paper:#FBF6EE; --porcelain:#F4EDE2; --porcelain-deep:#EFE6D8; --linen:#E4D9C6; --sand:#EBE0CE;
  --ink:#221D15; --ink-soft:#4C4436; --ink-faint:#6F6552;
  --gilt:#A07C46; --gilt-deep:#7D5E31; --sage:#6B6E5D; --stone:#B8A98F; --taupe:#8A7B64;
  --line:#DDD0BC; --line-soft:#E8DCCB;

  --shell:min(1400px, 100% - clamp(2.5rem, 1.8rem + 3.5vw, 5.5rem));
  --maxw-narrow:820px;
  --radius:2px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 1px 2px rgba(34,29,21,.05), 0 20px 50px -28px rgba(34,29,21,.28);
  --section-y:clamp(4.5rem, 3rem + 7vw, 8.5rem);

  --display:"Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --label:"Jost", "Inter", ui-sans-serif, system-ui, sans-serif;

  --s--2:clamp(.69rem, .66rem + .15vw, .78rem);
  --s--1:clamp(.8rem, .76rem + .2vw, .9rem);
  --s-0:clamp(.95rem, .9rem + .25vw, 1.05rem);
  --s-1:clamp(1.14rem, 1.05rem + .45vw, 1.4rem);
  --s-2:clamp(1.4rem, 1.25rem + .75vw, 1.95rem);
  --s-3:clamp(1.85rem, 1.55rem + 1.5vw, 2.95rem);
  --s-4:clamp(2.4rem, 1.9rem + 2.5vw, 4.3rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--porcelain); color:var(--ink); font-family:var(--body);
  font-size:var(--s-0); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:400; letter-spacing:-.015em; line-height:1.06}
p{margin:0}
:focus-visible{outline:1.5px solid var(--gilt); outline-offset:3px}

.shell{width:var(--shell); margin-inline:auto}
.label{font-family:var(--label); font-size:var(--s--2); letter-spacing:.24em; text-transform:uppercase; font-weight:500; color:var(--taupe)}

/* ── announce ── */
.announce{background:var(--ink); color:var(--sand); font-family:var(--label); font-size:var(--s--2);
  letter-spacing:.2em; text-transform:uppercase; text-align:center; padding:.65rem 1rem}
.announce b{color:var(--gilt); font-weight:500}

/* ── header ── */
.hdr{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--porcelain) 84%, transparent);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line)}
.hdr-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:80px; gap:1rem}
.nav{display:flex; gap:2.1rem; font-family:var(--label); font-size:var(--s--2); letter-spacing:.16em; text-transform:uppercase; font-weight:500; justify-self:start}
.nav a{position:relative; padding:.4rem 0; color:var(--ink-soft); transition:color .3s}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gilt); transition:right .5s var(--ease)}
.nav a:hover{color:var(--ink)} .nav a:hover::after{right:0}
.nav a[aria-current]{color:var(--ink)} .nav a[aria-current]::after{right:0}
.mark{justify-self:center; text-align:center; line-height:1}
.mark .wm{font-family:var(--display); font-weight:500; font-size:1.7rem; letter-spacing:.14em; color:var(--ink)}
.mark .tag{display:block; font-family:var(--label); font-size:.5rem; letter-spacing:.34em; text-transform:uppercase; color:var(--taupe); margin-top:.15rem}
.hdr-act{display:flex; align-items:center; gap:.2rem; justify-self:end}
.icon-btn{width:42px; height:42px; border-radius:999px; display:grid; place-items:center; transition:background .3s}
.icon-btn:hover{background:color-mix(in srgb, var(--ink) 6%, transparent)}
.icon-btn svg{width:19px; height:19px; stroke:var(--ink); stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round}

/* ── document page ── */
.doc-hd{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line)}
.doc-hd .eyebrow{display:block; margin-bottom:1.2rem; font-family:var(--label); font-size:var(--s--2); letter-spacing:.24em; text-transform:uppercase; color:var(--taupe); font-weight:500}
.doc-hd h1{font-size:var(--s-4); font-weight:300; letter-spacing:-.03em; max-width:18ch}
.doc-hd .lede{margin-top:1.4rem; font-size:var(--s-1); color:var(--ink-soft); max-width:60ch; font-weight:300}
.doc-hd .updated{margin-top:1.6rem; font-family:var(--label); font-size:var(--s--2); letter-spacing:.1em; text-transform:uppercase; color:var(--taupe)}

.doc-body{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(2.5rem,6vw,5rem); padding:clamp(2.5rem,5vw,4rem) 0 clamp(3.5rem,7vw,6rem); align-items:start}
.doc-main{max-width:70ch}
.doc-main section + section{margin-top:clamp(2.2rem,4vw,3rem)}
.doc-main h2{font-size:var(--s-2); font-weight:300; letter-spacing:-.02em; margin-bottom:1rem}
.doc-main h3{font-family:var(--label); font-size:var(--s--2); letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--taupe); margin:1.8rem 0 .7rem}
.doc-main p{color:var(--ink-soft); margin-bottom:1rem; font-weight:300}
.doc-main p:last-child{margin-bottom:0}
.doc-main b,.doc-main strong{color:var(--ink); font-weight:500}
.doc-main a{color:var(--gilt-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:rgba(125,94,49,.4); transition:.25s}
.doc-main a:hover{text-decoration-color:var(--gilt-deep)}
.doc-main ul,.doc-main ol{margin:0 0 1rem; padding-left:1.15rem; color:var(--ink-soft); display:grid; gap:.5rem; font-weight:300}
.doc-main li::marker{color:var(--taupe)}

.rate-table{width:100%; border-collapse:collapse; margin:0 0 1rem; font-size:var(--s--1)}
.rate-table th,.rate-table td{text-align:left; padding:.8rem .9rem; border-bottom:1px solid var(--line)}
.rate-table th{font-family:var(--label); font-size:var(--s--2); letter-spacing:.12em; text-transform:uppercase; font-weight:500; color:var(--taupe); border-bottom-color:var(--taupe)}
.rate-table td{color:var(--ink-soft); font-weight:300}
.rate-table td:first-child{color:var(--ink); font-weight:500}
.rate-table tr:last-child td{border-bottom:0}
.rate-table td,.rate-table th{overflow-wrap:anywhere}

.note{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.35rem 1.5rem; margin:1.4rem 0}
.note h3{margin-top:0}
.note p:last-child{margin-bottom:0}

/* ── aside card ── */
.doc-aside{position:sticky; top:100px; display:grid; gap:1rem}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.7rem; box-shadow:var(--shadow)}
.card h3{font-family:var(--label); font-size:var(--s--2); letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--taupe); margin:0 0 1rem}
.card p{font-size:var(--s--1); color:var(--ink-soft); margin-bottom:.85rem; font-weight:300}
.card p:last-child{margin-bottom:0}
.card a{color:var(--gilt-deep)}
.card .big{font-family:var(--display); font-size:var(--s-1); color:var(--ink); letter-spacing:-.02em; display:block; margin-bottom:.3rem; font-weight:400}
.card ul{list-style:none; margin:0; padding:0; display:grid; gap:.75rem}
.card ul a{font-size:var(--s--1); color:var(--ink-soft); text-decoration:none; font-weight:300}
.card ul a:hover{color:var(--ink)}

/* ── contact grid ── */
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin:0 0 1.6rem}
.contact-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem}
.contact-card h3{margin:0 0 .6rem; font-family:var(--label); font-size:var(--s--2); letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--taupe)}
.contact-card .val{font-size:var(--s-0); color:var(--ink); font-weight:500; word-break:break-word}
.contact-card .val a{color:var(--gilt-deep); text-decoration:none}
.contact-card .val a:hover{text-decoration:underline}
.contact-card .sub{font-size:var(--s--2); color:var(--taupe); margin-top:.35rem}

/* ── footer ── */
.ftr{background:var(--paper); border-top:1px solid var(--line); margin-top:0; padding:clamp(3.5rem,6vw,5.5rem) 0 2.5rem}
.ftr-grid{display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:2.5rem; margin-bottom:3.5rem}
.ftr-brand .wm{font-family:var(--display); font-weight:500; font-size:1.5rem; letter-spacing:.12em}
.ftr-brand p{font-size:var(--s--1); color:var(--ink-faint); max-width:34ch; margin-top:1rem; font-weight:300}
.ftr h4{font-family:var(--label); font-size:var(--s--2); letter-spacing:.18em; text-transform:uppercase; color:var(--taupe); margin-bottom:1.2rem; font-weight:500}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.ftr li a{font-size:var(--s--1); color:var(--ink-soft); transition:color .3s; font-weight:300}
.ftr li a:hover{color:var(--ink)}
.ftr-btm{border-top:1px solid var(--line); padding-top:1.8rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-family:var(--label); font-size:var(--s--2); letter-spacing:.08em; color:var(--taupe)}
.ftr-btm a{color:inherit}
.ftr-btm a:hover{color:var(--ink-soft)}
.pay-row{display:flex; gap:.4rem; align-items:center}
.pay-row span{border:1px solid var(--line); border-radius:var(--radius); padding:.24rem .5rem; font-family:var(--label); font-size:.56rem; letter-spacing:.1em; color:var(--ink-faint); background:var(--porcelain)}

/* ── responsive ── */
@media(max-width:1080px){
  .doc-body{grid-template-columns:1fr}
  .doc-aside{position:static; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .ftr-grid{grid-template-columns:1fr 1fr; gap:2rem}
}
@media(max-width:860px){
  .nav{display:none}
  .hdr-in{grid-template-columns:1fr auto 1fr}
}
@media(max-width:600px){
  .ftr-grid{grid-template-columns:1fr}
  .rate-table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .rate-table thead,.rate-table tbody,.rate-table tr{display:table; width:100%; table-layout:fixed}
  .contact-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}