/*
 * Claritas — the one stylesheet the theme loads.
 *
 * Part 1 is the approved homepage design, unchanged.
 * Part 2 adds the templates that the homepage does not cover.
 * Part 3 is a light hand on WooCommerce.
 */

/* =========================================================================
   1. Tokens and the approved homepage design
   ========================================================================= */

:root{
  --paper:#F8F2EC; --paper-2:#FBF7F2; --ink:#33243A; --ink-soft:#6C5A72;
  /* --rose-deep was #A94F66. It is the text colour on the rose-soft pills and
     chips, where #A94F66 measured 3.95:1 — just under AA. A hair darker takes
     every one of those to 4.6:1 and the links on paper to 5.5:1, and the two
     tones are indistinguishable side by side. Revert this one value to go back.
     --rose-strong is the old --rose-deep, kept as the fill of solid buttons:
     white on --rose (#C9697E) is only 3.58:1, and white on this is 5.25:1. */
  --rose:#C9697E; --rose-deep:#9E4459; --rose-strong:#A94F66; --rose-soft:#F3D9DE; --gold:#C39A55; --sage:#7E9A86;
  --dusk-b:#7A5679; --night:#2C2136;
  --line:rgba(51,36,58,.14); --line-gold:rgba(195,154,85,.55);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Alegreya Sans","Gill Sans",Calibri,system-ui,sans-serif;
  --shadow-card:0 40px 50px -34px rgba(74,40,50,.5), 0 18px 28px -18px rgba(74,40,50,.35), 0 2px 4px rgba(74,40,50,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
svg{display:block}
img{display:block;max-width:100%;height:auto}
p{margin:0 0 16px}
.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.05;text-wrap:balance;font-weight:500}
h1{font-size:clamp(44px,6vw,74px);letter-spacing:-.015em;font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 1}
h1 em,h2 em{font-style:italic;font-weight:400;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
h2{font-size:clamp(32px,4vw,50px);letter-spacing:-.012em;font-variation-settings:"opsz" 96,"SOFT" 60,"WONK" 1}
h3{font-size:26px;font-variation-settings:"opsz" 48,"SOFT" 50}
.kicker{font-family:var(--display);font-style:italic;font-size:20px;color:var(--rose-deep);font-variation-settings:"opsz" 24,"SOFT" 100,"WONK" 1}
.muted{color:var(--ink-soft)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--rose-strong);color:#fff;border:0;border-radius:12px;padding:15px 24px;font:500 18px/1 var(--body);text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 22px -14px rgba(169,79,102,.8);transition:transform .25s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 28px -14px rgba(169,79,102,.9)}
.btn.light{background:transparent;color:var(--ink);box-shadow:none;border:1.5px solid var(--ink);padding:13px 22px}
.link{text-decoration:none;color:var(--rose-deep);border-bottom:1.5px solid var(--rose-soft);padding-bottom:1px;transition:border-color .2s}
.link:hover{border-bottom-color:var(--rose-deep)}

/* ---------- Header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0 12px;position:relative;z-index:3}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:27px;font-weight:500;letter-spacing:-.01em;font-variation-settings:"opsz" 40,"SOFT" 80,"WONK" 1}
.logo svg{width:26px;height:26px}
.nav{display:flex;gap:28px;font-size:17px}
.nav a{text-decoration:none;color:var(--ink);position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--rose);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after{transform:scaleX(1)}
.today{display:flex;align-items:center;gap:9px;font-size:15.5px;color:var(--ink-soft);white-space:nowrap}
.today svg{width:18px;height:18px}
@media (max-width:900px){.nav{display:none}}

/* ---------- Sunrise hero (photo) ---------- */
.sky{position:relative;overflow:hidden;margin-top:-84px;padding-top:84px;background:#F6DFD3 url("../img/hero-sunrise.jpg") center 62% / cover no-repeat}
.sky::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,242,236,.94) 0%,rgba(248,242,236,.86) 34%,rgba(248,242,236,.35) 58%,rgba(248,242,236,0) 78%),linear-gradient(180deg,rgba(248,242,236,.9) 0%,rgba(248,242,236,0) 26%);pointer-events:none}
@media (max-width:860px){.sky::before{background:linear-gradient(180deg,rgba(248,242,236,.96) 0%,rgba(248,242,236,.9) 55%,rgba(248,242,236,.4) 100%)}}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:start;padding:56px 0 0;min-height:600px}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:20px;min-height:0}}
.hero-copy{padding-bottom:96px;position:relative;z-index:2}
@media (max-width:860px){.hero-copy{padding-bottom:24px}}
.hero .lede{font-size:21px;line-height:1.45;max-width:34ch;margin:22px 0 26px;color:var(--ink)}
.today-line{display:flex;gap:14px;align-items:flex-start;max-width:46ch;margin:0 0 26px;padding:18px 20px;background:rgba(255,252,248,.72);border:1px solid rgba(255,255,255,.9);border-radius:16px;backdrop-filter:blur(6px)}
.today-line svg{flex:none;width:30px;height:30px;margin-top:2px}
.today-line .q{font-family:var(--display);font-size:20.5px;line-height:1.4;font-variation-settings:"opsz" 36,"SOFT" 70,"WONK" 1;margin:0 0 10px}
.today-line .step{margin:0;font-size:17.5px;color:var(--ink-soft)}
.today-line .step b{color:var(--ink);font-weight:500}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.trust{margin-top:16px;font-size:16px;color:var(--ink-soft)}

/* Deck + card on the table */
.table{position:relative;z-index:2;justify-self:center;width:340px;height:540px}
@media (max-width:860px){.table{width:280px;height:450px;justify-self:start}}
.deckcard{position:absolute;left:50%;bottom:44px;width:260px;aspect-ratio:3/5;border-radius:16px;background:var(--paper-2);box-shadow:var(--shadow-card);transform-origin:50% 90%;overflow:hidden;border:6px solid #FBF7F2}
@media (max-width:860px){.deckcard{width:220px}}
.back{background:#F1DCE0 url("../img/card-back.jpg") center / cover no-repeat}
.b1{transform:translateX(-50%) rotate(-9deg) translateY(6px)}
.b2{transform:translateX(-50%) rotate(-4deg) translateY(3px)}
.face{transform:translateX(-50%) rotate(3deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.face:hover{transform:translateX(-50%) rotate(0deg) translateY(-10px)}
.face img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.face .num{position:absolute;top:10px;left:0;right:0;text-align:center;font:600 13px var(--display);letter-spacing:.3em;color:#5A3F47;opacity:.85}
.badge{position:absolute;right:-6px;top:24px;width:116px;height:116px;animation:spin 40s linear infinite;z-index:3}
@keyframes spin{to{transform:rotate(360deg)}}
.badge text{font:600 12.5px var(--body);letter-spacing:.2em;fill:var(--rose-deep)}
.caption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:15px;color:var(--ink-soft)}
.horizon{position:relative;display:block;width:100%;height:70px;margin-top:-1px}
.horizon svg{width:100%;height:100%}

/* ---------- Ritual arc ---------- */
.ritual{padding:34px 0 26px}
.ritual svg{width:100%;height:auto;overflow:visible}
.ritual .lbl{font:500 18px var(--display);font-variation-settings:"opsz" 24,"SOFT" 70,"WONK" 1;fill:var(--ink)}
.ritual .sub{font:400 15px var(--body);fill:var(--ink-soft)}
.ritual p{text-align:center;color:var(--ink-soft);max-width:60ch;margin:6px auto 0;font-size:17.5px}
@media (max-width:640px){.ritual svg{display:none}.ritual p{text-align:left;margin:0}}

/* ---------- Readings ---------- */
.readings{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center;padding:72px 0}
@media (max-width:860px){.readings{grid-template-columns:1fr;gap:36px;padding:52px 0}}
.fan{position:relative;height:300px;width:100%;max-width:360px;margin:0 auto}
.fan .f{position:absolute;left:50%;bottom:0;width:120px;aspect-ratio:3/5;margin-left:-60px;border-radius:10px;transform-origin:50% 115%;box-shadow:0 20px 30px -20px rgba(74,40,50,.5);transition:transform .35s ease;border:4px solid #FBF7F2;background:#F1DCE0 url("../img/card-back.jpg") center / cover no-repeat}
.fan .f:nth-child(1){transform:rotate(-26deg)}.fan .f:nth-child(2){transform:rotate(-13deg)}.fan .f:nth-child(3){transform:rotate(0deg)}.fan .f:nth-child(4){transform:rotate(13deg)}.fan .f:nth-child(5){transform:rotate(26deg)}
.fan:hover .f:nth-child(1){transform:rotate(-34deg) translateY(-8px)}.fan:hover .f:nth-child(2){transform:rotate(-17deg) translateY(-10px)}.fan:hover .f:nth-child(3){transform:translateY(-12px)}.fan:hover .f:nth-child(4){transform:rotate(17deg) translateY(-10px)}.fan:hover .f:nth-child(5){transform:rotate(34deg) translateY(-8px)}
.readings .intro p{max-width:40ch}
.list{list-style:none;margin:0;padding:0}
.list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.list li:first-child{border-top:1px solid var(--line)}
.list a{text-decoration:none;color:inherit;display:block}
.list .name{font-family:var(--display);font-size:27px;font-weight:500;font-variation-settings:"opsz" 40,"SOFT" 70,"WONK" 1;transition:color .2s}
.list li:hover .name{color:var(--rose-deep)}
.list .desc{margin:4px 0 0;color:var(--ink-soft);font-size:17.5px;max-width:54ch}
.list .meta{font-size:15px;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.pill{display:inline-block;font:500 13px var(--body);letter-spacing:.06em;color:var(--rose-deep);background:var(--rose-soft);border-radius:999px;padding:3px 10px;margin-left:10px;vertical-align:middle}

/* ---------- Letter on paper, with a photo clipped to it ---------- */
.letter{padding:40px 0 80px;position:relative}
.letter .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
@media (max-width:860px){.letter .wrap{grid-template-columns:1fr;gap:32px}}
.paper{position:relative;background:#FFFCF8;padding:44px 44px 40px;transform:rotate(-1.2deg);box-shadow:0 30px 50px -30px rgba(74,40,50,.45),0 4px 10px -4px rgba(74,40,50,.15);border:1px solid rgba(195,154,85,.25);margin-top:36px}
.paper::before{content:"";position:absolute;inset:10px;border:1px solid rgba(195,154,85,.25);pointer-events:none}
.paper .date{font-size:15px;color:var(--ink-soft);letter-spacing:.06em;margin-bottom:18px}
.paper .dear{font-family:var(--display);font-style:italic;font-size:24px;margin-bottom:12px;font-variation-settings:"opsz" 30,"SOFT" 100,"WONK" 1}
.paper p{font-size:18.5px;line-height:1.55}
.paper .sig{display:flex;align-items:flex-end;gap:12px;margin-top:20px}
.paper .sig .name{font-family:var(--display);font-style:italic;font-size:40px;line-height:1;font-variation-settings:"opsz" 60,"SOFT" 100,"WONK" 1;color:var(--rose-deep)}
.paper .sig svg{width:130px;height:16px}
.polaroid{position:absolute;right:-22px;top:-44px;width:150px;padding:8px 8px 26px;background:#fff;box-shadow:0 14px 24px -14px rgba(74,40,50,.5);transform:rotate(5deg)}
.polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover}
.polaroid::before{content:"";position:absolute;left:50%;top:-10px;width:60px;height:20px;margin-left:-30px;background:rgba(243,217,222,.85);transform:rotate(-3deg)}
.polaroid span{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:italic 400 14px var(--display);color:var(--ink-soft)}
@media (max-width:860px){.polaroid{right:-8px;top:-36px;width:120px}}
.stamp{position:absolute;left:-26px;bottom:-26px;width:104px;height:104px;transform:rotate(-14deg)}
.stamp text{font:600 11.5px var(--body);letter-spacing:.22em;fill:var(--gold)}
.letter aside h2{margin-bottom:14px}
.letter aside p{max-width:44ch}
.subscribe{display:flex;gap:10px;margin-top:20px;max-width:460px;flex-wrap:wrap}
.subscribe input{flex:1;min-width:200px;border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:13px 16px;font:400 17px var(--body)}

/* ---------- Also here today ---------- */
.today-more{padding:40px 0 80px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
@media (max-width:860px){.today-more{grid-template-columns:1fr;gap:28px;padding:20px 0 60px}}
.feature{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:1;text-decoration:none;color:#fff;box-shadow:0 30px 50px -34px rgba(74,40,50,.6)}
.feature img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.feature:hover img{transform:scale(1.03)}
.feature .over{position:absolute;inset:0;background:linear-gradient(180deg,rgba(51,36,58,0) 35%,rgba(51,36,58,.72) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.feature .num{font-family:var(--display);font-size:clamp(84px,10vw,124px);line-height:.85;font-weight:600;letter-spacing:-.04em;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;color:#FFF3E6;text-shadow:0 4px 30px rgba(0,0,0,.25)}
.feature .t{font:italic 400 21px var(--display);font-variation-settings:"opsz" 30,"SOFT" 100,"WONK" 1;margin-top:10px;max-width:26ch;line-height:1.3}
.feature .k{font:500 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#FFD9C7;margin-bottom:8px}
.more{list-style:none;margin:0;padding:0}
.more li{padding:12px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center}
.more li:first-child{border-top:1px solid var(--line)}
.more img{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 8px 14px -10px rgba(74,40,50,.5)}
.more .k{font:500 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);display:block;margin-bottom:2px}
.more a{text-decoration:none;font-family:var(--display);font-size:21px;font-variation-settings:"opsz" 30,"SOFT" 70,"WONK" 1;line-height:1.25}
.more a:hover{color:var(--rose-deep)}

/* ---------- Wear ---------- */
.wear{padding:20px 0 80px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
@media (max-width:860px){.wear{grid-template-columns:1fr;gap:28px}}
.arch{position:relative;width:100%;max-width:380px;aspect-ratio:4/5;margin:0 auto;border-radius:190px 190px 18px 18px;overflow:hidden;box-shadow:0 30px 50px -34px rgba(74,40,50,.6)}
.arch img{width:100%;height:100%;object-fit:cover}
.arch::after{content:"";position:absolute;inset:9px;border-radius:181px 181px 12px 12px;border:1px solid rgba(255,255,255,.7);pointer-events:none}
/* Scoped to .wear so WooCommerce prices keep their own sizing. */
.wear .price{font-family:var(--display);font-size:24px;font-weight:500;margin:8px 0 20px;font-variation-settings:"opsz" 30,"SOFT" 60}
.wear .price small{font:400 16px var(--body);color:var(--ink-soft);margin-left:10px}

/* ---------- Deeper ---------- */
.deeper{padding:0 0 80px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
@media (max-width:860px){.deeper{grid-template-columns:1fr;gap:28px}}
.still{border-radius:18px;overflow:hidden;box-shadow:0 30px 50px -34px rgba(74,40,50,.6);max-width:420px;margin:0 auto}
.still img{width:100%;height:auto}
.offer{padding:22px 0 26px;border-bottom:1px solid var(--line)}
.offer:first-child{border-top:1px solid var(--line)}
.offer .wave{width:120px;height:10px;margin-bottom:14px}
.offer h3{margin:6px 0 10px}
.offer p{color:var(--ink-soft);max-width:44ch;font-size:18px}
.offer .p{color:var(--ink);font-family:var(--display);font-size:22px;font-weight:500;font-variation-settings:"opsz" 30,"SOFT" 60;margin:0}
.how{max-width:62ch;padding:0 0 90px}
.how p{font-family:var(--display);font-size:clamp(21px,2.3vw,27px);line-height:1.42;font-weight:400;font-variation-settings:"opsz" 40,"SOFT" 80,"WONK" 1}
.how .kicker{display:block;margin-bottom:14px}

/* ---------- Dusk & night (photos) ---------- */
.dusk{position:relative;overflow:hidden;background:#8D6A8C url("../img/dusk-sky.jpg") center 40% / cover no-repeat;padding:150px 0 130px;text-align:center;color:#fff}
.dusk::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--paper) 0%,rgba(248,242,236,0) 22%,rgba(50,30,60,.05) 60%,rgba(50,30,60,.35) 100%);pointer-events:none}
.dusk .wrap{position:relative}
.dusk h2{color:#fff;margin:10px 0 24px;text-shadow:0 2px 24px rgba(40,20,50,.45)}
.dusk .kicker{color:#FFF1EC;text-shadow:0 1px 12px rgba(40,20,50,.5)}
.choices{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.choices button{background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.8);border-radius:12px;padding:13px 22px;font:500 18px var(--body);cursor:pointer;transition:background .2s;backdrop-filter:blur(4px)}
.choices button:hover{background:rgba(255,255,255,.3)}
.thanks{margin:22px auto 0;max-width:46ch;font-family:var(--display);font-size:22px;min-height:1.5em;font-variation-settings:"opsz" 30,"SOFT" 80,"WONK" 1;color:#FFF7F2;text-shadow:0 2px 16px rgba(40,20,50,.6)}
.night{position:relative;background:var(--night) url("../img/night-sky.jpg") center 30% / cover no-repeat;color:#EFE6EA;padding:64px 0 64px;font-size:16px}
.night::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,33,54,.2) 0%,rgba(44,33,54,.75) 100%);pointer-events:none}
.night .wrap{position:relative}
.night .cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
@media (max-width:900px){.night .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.night h4{font:500 15px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#FFD9C7;margin:0 0 12px}
.night ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.night a{text-decoration:none;color:#EFE6EA;opacity:.88}
.night a:hover{opacity:1;color:#fff}
.night .bottom{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.night .logo{color:#FFF7F2;font-size:24px}
.night .legal{max-width:70ch;opacity:.75;margin:0}

@media (prefers-reduced-motion:reduce){
  .badge{animation:none}.face,.fan .f,.btn,.feature img{transition:none}html{scroll-behavior:auto}
}

/* =========================================================================
   2. The rest of the theme
   ========================================================================= */

/* ---------- Accessibility ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--paper-2);color:var(--ink);padding:12px 20px;border-radius:0 0 12px 0;font:500 17px var(--body);text-decoration:none;box-shadow:0 10px 20px -14px rgba(74,40,50,.6)}
.skip-link:focus{left:0}

/* ---------- Navigation ---------- */
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;align-items:center}
.nav li{margin:0}
.logo-custom img{max-height:56px;width:auto}
.nav-toggle{display:none;background:transparent;border:1.5px solid var(--line);border-radius:12px;width:46px;height:44px;flex:none;cursor:pointer;align-items:center;justify-content:center;color:var(--ink)}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:20px;height:1.6px;background:currentColor;border-radius:2px;position:relative}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:8px 20px;box-shadow:0 24px 40px -30px rgba(74,40,50,.7);z-index:6}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;gap:0;align-items:stretch}
  .nav li+li{border-top:1px solid var(--line)}
  .nav a{display:block;padding:14px 0;font-size:19px}
}
@media (max-width:620px){.today{display:none}}

/* ---------- Page frame ---------- */
.site-main{display:block}
.table-slot{position:relative;z-index:2;justify-self:center}
.page-head{padding:56px 0 26px;max-width:68ch}
.page-head .kicker{display:block;margin-bottom:10px}
.page-head p{color:var(--ink-soft);margin-top:14px;max-width:60ch}
.section-lead{padding:40px 0 0}

/* ---------- Article ---------- */
.article{padding:8px 0 72px}
.entry-header{max-width:68ch;padding:44px 0 8px}
.entry-header .kicker{display:block;margin-bottom:10px}
.entry-meta{font-size:15.5px;color:var(--ink-soft);margin:16px 0 0;font-variant-numeric:tabular-nums}
.entry-meta .sep{margin:0 8px}
.entry-figure{margin:30px 0 0;border-radius:18px;overflow:hidden;box-shadow:0 30px 50px -34px rgba(74,40,50,.6)}
.entry-figure img{width:100%;height:auto}
.entry-content{max-width:68ch;padding-top:26px}
.entry-content h2{font-size:clamp(27px,3vw,36px);margin:44px 0 14px;font-variation-settings:"opsz" 72,"SOFT" 60,"WONK" 1}
.entry-content h3{font-size:24px;margin:32px 0 10px}
.entry-content h4{font:500 19px var(--body);letter-spacing:.02em;margin:26px 0 8px}
.entry-content p{margin:0 0 20px}
.entry-content ul,.entry-content ol{margin:0 0 22px;padding-left:22px}
.entry-content li{margin:0 0 8px}
.entry-content a{color:var(--rose-deep);text-decoration:none;border-bottom:1.5px solid var(--rose-soft)}
.entry-content a:hover{border-bottom-color:var(--rose-deep)}
.entry-content img{border-radius:14px;margin:10px 0}
.entry-content figure{margin:26px 0}
.entry-content figcaption{font-size:15.5px;color:var(--ink-soft);margin-top:8px}
.entry-content blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:2px solid var(--rose-soft);font-family:var(--display);font-size:22px;line-height:1.4;font-variation-settings:"opsz" 40,"SOFT" 80,"WONK" 1}
.entry-content blockquote p:last-child{margin-bottom:0}
.entry-content hr{border:0;border-top:1px solid var(--line);margin:36px 0}
.entry-content table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:17.5px}
.entry-content th,.entry-content td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.entry-content code,.entry-content pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px}
.entry-content pre{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:16px;overflow-x:auto}
.entry-content .alignwide{max-width:1000px;margin-left:calc(50% - 500px)}
@media (max-width:1100px){.entry-content .alignwide{max-width:100%;margin-left:0}}
.entry-footer{max-width:68ch;margin-top:36px;font-size:16px;color:var(--ink-soft)}
.entry-tags a{color:var(--rose-deep);text-decoration:none}

/* ---------- One small step, and the line to remember ---------- */
.onestep{display:flex;gap:16px;align-items:flex-start;max-width:68ch;margin:34px 0;padding:22px 24px;background:var(--paper-2);border:1px solid var(--line-gold);border-radius:16px}
.onestep-mark{flex:none;width:30px;height:30px;margin-top:2px}
.onestep .k{font:500 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);display:block;margin-bottom:6px}
.onestep p{margin:0;font-size:18.5px}
.pullquote{max-width:68ch;margin:36px 0;padding:0;text-align:center}
.pullquote .kicker{display:block;margin-bottom:8px;font-size:17px}
.pullquote blockquote{margin:0;border:0;padding:0}
.pullquote p{font-family:var(--display);font-size:clamp(23px,2.6vw,30px);line-height:1.3;font-style:italic;font-variation-settings:"opsz" 72,"SOFT" 100,"WONK" 1;margin:0;color:var(--ink)}

/* ---------- Author box ---------- */
.authorbox{display:grid;grid-template-columns:112px minmax(0,1fr);gap:22px;align-items:center;max-width:68ch;margin:44px 0 0;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:560px){.authorbox{grid-template-columns:80px minmax(0,1fr);gap:16px}}
.authorbox-portrait{width:112px;height:112px;border-radius:50%;object-fit:cover;box-shadow:0 14px 24px -18px rgba(74,40,50,.7)}
@media (max-width:560px){.authorbox-portrait{width:80px;height:80px}}
.authorbox .k{font:500 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);display:block;margin-bottom:2px}
.authorbox h3{font-size:24px;margin:0 0 8px}
.authorbox p{font-size:17px;margin:0 0 10px}
.authorbox-links{display:flex;gap:18px;flex-wrap:wrap;font-size:16px}

/* ---------- Related, and simple post lists ---------- */
.related{max-width:68ch;margin:44px 0 0}
.related h2{font-size:28px;margin-bottom:10px}
.post-list{list-style:none;margin:0;padding:0}
.post-list li{padding:22px 0;border-bottom:1px solid var(--line)}
.post-list li:first-child{border-top:1px solid var(--line)}
.post-list a{text-decoration:none}
.post-list .name{font-family:var(--display);font-size:26px;font-weight:500;font-variation-settings:"opsz" 40,"SOFT" 70,"WONK" 1;display:block;line-height:1.15}
.post-list li:hover .name{color:var(--rose-deep)}
.post-list .desc{margin:6px 0 0;color:var(--ink-soft);font-size:17.5px;max-width:60ch}
.post-list .meta{font-size:15px;color:var(--ink-soft);font-variant-numeric:tabular-nums;display:block;margin-top:6px}

/* ---------- Card pages ---------- */
.card-hero{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:56px;align-items:center;padding:44px 0 20px}
@media (max-width:860px){.card-hero{grid-template-columns:1fr;gap:30px;padding:28px 0 10px}}
.card-hero .table{height:520px}
@media (max-width:860px){.card-hero .table{height:440px;justify-self:center}}
.card-hero .deckcard{bottom:20px}
.card-title{margin:10px 0 6px}
.card-roman{font-family:var(--display);font-size:18px;letter-spacing:.3em;color:var(--rose-deep);font-variant-numeric:tabular-nums;display:block;margin-bottom:2px}
.card-facts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:16px;color:var(--ink-soft)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.chips li{font:500 14px var(--body);letter-spacing:.04em;color:var(--rose-deep);background:var(--rose-soft);border-radius:999px;padding:5px 14px}
.chips.reversed li{color:var(--ink-soft);background:rgba(51,36,58,.07)}
.chips-label{font:500 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:block;margin:22px 0 0}
.yesno{margin:24px 0 0;padding:18px 20px;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;max-width:52ch}
.yesno .k{font:500 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);display:block;margin-bottom:4px}
.yesno p{margin:0;font-family:var(--display);font-size:20px;font-variation-settings:"opsz" 36,"SOFT" 70,"WONK" 1}
.card-cta{margin:30px 0 0;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.card-shorts{max-width:68ch;margin:10px 0 0}
.card-shorts .short{padding:22px 0;border-bottom:1px solid var(--line)}
.card-shorts .short:first-child{border-top:1px solid var(--line)}
.card-shorts h2{font-size:26px;margin-bottom:8px}
.card-shorts p{margin:0;color:var(--ink-soft);font-size:18px}

/* ---------- Card grid ---------- */
.card-section{padding:34px 0 10px}
.card-section h2{margin-bottom:6px}
.card-section .kicker{display:block;margin-bottom:6px}
.card-grid{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 22px}
.card-tile{margin:0}
.card-tile a{text-decoration:none;display:block}
.card-tile .frame{display:block;border-radius:12px;overflow:hidden;aspect-ratio:3/5;background:#F1DCE0;border:5px solid #FBF7F2;box-shadow:0 22px 30px -24px rgba(74,40,50,.7);transition:transform .3s ease}
.card-tile a:hover .frame{transform:translateY(-6px)}
.card-tile img{width:100%;height:100%;object-fit:cover}
.card-tile .n{display:block;margin-top:10px;font-size:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.12em}
.card-tile .name{display:block;font-family:var(--display);font-size:19px;line-height:1.2;font-variation-settings:"opsz" 30,"SOFT" 70,"WONK" 1}
.card-tile a:hover .name{color:var(--rose-deep)}

/* ---------- Quiz ---------- */
.quiz-intro{max-width:68ch}
.quiz-hook{font-size:21px;line-height:1.45;max-width:46ch;margin:18px 0 0;color:var(--ink)}
.quiz-article .entry-meta{margin-top:14px}
.quiz-notice{max-width:68ch;margin:26px 0;padding:22px 24px;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;color:var(--ink-soft)}
.quiz-notice p:last-child{margin-bottom:0}

/* ---------- Reading page ---------- */
.reading-shell{padding:20px 0 80px}
.reading-notice{max-width:60ch;margin:26px 0 0;padding:24px 26px;background:var(--paper-2);border:1px solid var(--line-gold);border-radius:16px}
.reading-notice p:last-child{margin-bottom:0}

/* ---------- Search, pagination, comments, 404 ---------- */
.search-form{display:flex;gap:10px;max-width:460px;flex-wrap:wrap;margin:20px 0 0}
.search-form input[type="search"]{flex:1;min-width:200px;border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:13px 16px;font:400 17px var(--body)}
.pagination{margin:44px 0 0;font-size:17px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;font-variant-numeric:tabular-nums}
.pagination .page-numbers.current{background:var(--rose-soft);border-color:transparent;color:var(--rose-deep)}
.comments{max-width:68ch;margin:52px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.comments h2{font-size:28px;margin-bottom:16px}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list li{padding:18px 0;border-bottom:1px solid var(--line)}
.comment-list .children{list-style:none;margin:16px 0 0;padding-left:22px;border-left:1px solid var(--line)}
.comment-meta{font-size:15px;color:var(--ink-soft);margin-bottom:6px}
.comments-closed{color:var(--ink-soft);font-size:16px}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{width:100%;border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:13px 16px;font:400 17px var(--body)}
.comment-form label{display:block;font-size:16px;margin-bottom:6px;color:var(--ink-soft)}
.comment-form p{margin-bottom:16px}
.comment-form .submit{display:inline-flex;align-items:center;background:var(--rose-strong);color:#fff;border:0;border-radius:12px;padding:15px 24px;font:500 18px/1 var(--body);cursor:pointer}
.notfound{padding:60px 0 90px;max-width:68ch}
.notfound h1{margin-bottom:16px}
.notfound .helpful{margin-top:30px}
.widget{margin:34px 0 0;font-size:17px}
.widget-title{font-size:22px;margin-bottom:8px}
.widget ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.widget a{text-decoration:none;color:var(--rose-deep)}
.subscribe-note{flex-basis:100%;margin:6px 0 0;font-size:16px;color:var(--ink-soft);min-height:1.4em}

/* ---------- Blocks the content plugin prints inside the content ----------
   The markup arrives with post_content, so these rules come after the
   .entry-content defaults above and quietly take precedence over them. */

/* One small step, in the content rather than after it. */
.claritas-step{max-width:68ch;margin:34px 0;padding:22px 26px;background:var(--rose-soft);border:1px solid var(--line-gold);border-radius:16px}
.claritas-step p{margin:0 0 10px;font-size:18.5px}
.claritas-step p:last-child{margin-bottom:0}
.claritas-step .claritas-step__label{font-family:var(--display);font-style:italic;font-size:21px;line-height:1.2;color:var(--rose-deep);margin:0 0 8px;font-variation-settings:"opsz" 30,"SOFT" 100,"WONK" 1}

/* Questions people ask. */
.claritas-faq{max-width:68ch;margin:44px 0 0}
.claritas-faq h2{font-size:28px;margin:0 0 4px;font-variation-settings:"opsz" 48,"SOFT" 60,"WONK" 1}
.claritas-faq details{border-bottom:1px solid var(--line)}
.claritas-faq details:first-of-type{border-top:1px solid var(--line)}
.claritas-faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;list-style:none;cursor:pointer;padding:20px 0;font-family:var(--display);font-size:21px;font-weight:500;line-height:1.3;font-variation-settings:"opsz" 30,"SOFT" 70,"WONK" 1;transition:color .2s}
.claritas-faq summary::-webkit-details-marker{display:none}
.claritas-faq summary::after{content:"";flex:none;width:9px;height:9px;margin:6px 4px 0 0;border-right:1.6px solid var(--rose-deep);border-bottom:1.6px solid var(--rose-deep);transform:rotate(45deg);transition:transform .25s ease}
.claritas-faq summary:hover{color:var(--rose-deep)}
.claritas-faq details[open] summary::after{margin-top:9px;transform:rotate(-135deg)}
.claritas-faq details>div{max-width:62ch;padding:0 0 22px}
.claritas-faq details>div p{margin:0 0 14px;font-size:18px;color:var(--ink-soft)}
.claritas-faq details>div p:last-child{margin-bottom:0}

/* Related pages, as pills. */
.claritas-related{max-width:68ch;margin:44px 0 0}
.claritas-related h2{font-size:28px;margin:0 0 14px;font-variation-settings:"opsz" 48,"SOFT" 60,"WONK" 1}
.claritas-related ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.claritas-related li{margin:0}
.claritas-related a{display:inline-block;border:0;text-decoration:none;color:var(--rose-deep);background:var(--rose-soft);border-radius:999px;padding:9px 18px;font:500 16px var(--body);letter-spacing:.02em;transition:background .2s,color .2s}
.claritas-related a:hover{background:var(--rose-strong);color:#fff}

/* The child list on the three parent pages. */
.claritas-children{max-width:68ch;margin:44px 0 0}
.claritas-children h2{font-size:28px;margin:0 0 6px;font-variation-settings:"opsz" 48,"SOFT" 60,"WONK" 1}
.claritas-children ul{list-style:none;display:grid;gap:0 34px;margin:0;padding:0}
.claritas-children li{margin:0;padding:14px 0;border-bottom:1px solid var(--line)}
.claritas-children a{display:block;border:0;text-decoration:none;color:var(--ink);font-family:var(--display);font-size:21px;line-height:1.25;font-variation-settings:"opsz" 30,"SOFT" 70,"WONK" 1}
.claritas-children a:hover{color:var(--rose-deep)}
@media (min-width:720px){.claritas-children ul{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The notice at the top of a legal draft. */
p.claritas-draft-notice{max-width:68ch;margin:26px 0;padding:20px 24px;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;color:var(--ink-soft);font-size:17.5px}
p.claritas-draft-notice strong{display:block;font:500 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:6px}

/* Clara's name under the Sunday letter. */
p.claritas-letter__sign{margin:26px 0 0;font-family:var(--display);font-style:italic;font-size:34px;line-height:1;color:var(--rose-deep);font-variation-settings:"opsz" 60,"SOFT" 100,"WONK" 1}

@media (prefers-reduced-motion:reduce){
  .claritas-faq summary,.claritas-faq summary::after,.claritas-related a{transition:none}
}

/* =========================================================================
   3. WooCommerce, with a light hand
   ========================================================================= */

.woocommerce .shop-main,.woocommerce-page .shop-main{padding:44px 0 80px}
.woocommerce .woocommerce-products-header__title,.woocommerce-page h1.entry-title,.woocommerce div.product .product_title{font-family:var(--display);font-weight:500;font-variation-settings:"opsz" 96,"SOFT" 60,"WONK" 1;letter-spacing:-.012em}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--display);font-size:21px;font-weight:500;font-variation-settings:"opsz" 30,"SOFT" 70,"WONK" 1;padding:12px 0 6px}
.woocommerce ul.products li.product img{border-radius:14px}

/* The product grid, in place of WooCommerce's floats. */
.woocommerce ul.products,.woocommerce-page ul.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 26px;margin:0 0 44px;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none;display:none}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{float:none;width:auto;margin:0;padding:0;text-align:left;clear:none}
.woocommerce ul.products li.product a img{margin:0 0 6px;box-shadow:0 24px 34px -28px rgba(74,40,50,.7)}
.woocommerce ul.products li.product .button{margin-top:12px}
@media (max-width:860px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}}
@media (max-width:520px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:1fr}}
.woocommerce ul.products li.product .price,.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--ink);font-family:var(--display);font-weight:500;font-variation-settings:"opsz" 30,"SOFT" 60}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-size:24px}
.woocommerce ul.products li.product .price{font-size:19px}
.woocommerce ul.products li.product .price del{color:var(--ink-soft);opacity:.7}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--rose-deep)}
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit.alt,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{
  background:var(--rose-strong);color:#fff;border:0;border-radius:12px;padding:15px 24px;font:500 18px/1 var(--body);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 22px -14px rgba(169,79,102,.8);transition:transform .25s ease,box-shadow .25s ease}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover{
  background:var(--rose-deep);color:#fff;transform:translateY(-1px)}
.woocommerce a.button.added_to_cart{color:var(--rose-deep)}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{
  border-top-color:var(--rose);background:var(--paper-2);border-radius:12px}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before{color:var(--rose)}
.woocommerce .woocommerce-breadcrumb{color:var(--ink-soft);font-size:16px}
.woocommerce span.onsale{background:var(--rose-strong);color:#fff;border-radius:999px;font:500 14px var(--body);min-height:auto;min-width:auto;padding:6px 14px;line-height:1}
.woocommerce table.shop_table{border-radius:12px;border-color:var(--line)}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:var(--line)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,
.woocommerce .quantity .qty{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font:400 17px var(--body);background:#fff;color:var(--ink)}
.woocommerce .quantity .qty{padding:10px 6px}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border-radius:12px 12px 0 0;border-color:var(--line)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--paper-2)}
.woocommerce-page #primary,.woocommerce #primary{width:100%;float:none}
.woocommerce-page #secondary,.woocommerce #secondary,.woocommerce-sidebar{display:none}
.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:10px;flex-wrap:wrap}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--line);border-radius:12px;min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--rose-soft);border-color:transparent;color:var(--rose-deep)}

/* Cart, checkout and account: pages, so they arrive through page.php. They
   need the full width, and a quieter typography than an article. */
.woocommerce-cart .article,.woocommerce-checkout .article,.woocommerce-account .article,
.woocommerce-cart .entry-content,.woocommerce-checkout .entry-content,.woocommerce-account .entry-content,
.woocommerce-cart .entry-header,.woocommerce-checkout .entry-header,.woocommerce-account .entry-header{max-width:none}
.woocommerce-cart .entry-title,.woocommerce-checkout .entry-title,.woocommerce-account .entry-title{font-size:clamp(34px,4vw,50px)}
.woocommerce h2,.woocommerce h3,.woocommerce-checkout #order_review_heading{font-family:var(--display);font-weight:500;font-variation-settings:"opsz" 48,"SOFT" 60,"WONK" 1}
.woocommerce-checkout h3,.woocommerce-cart h2{font-size:26px;margin:34px 0 14px}
.woocommerce form .form-row label,.woocommerce-account label{font-size:16px;color:var(--ink-soft);margin-bottom:6px;display:block}
.woocommerce form .form-row{margin-bottom:18px}
.woocommerce-checkout #payment{background:var(--paper-2);border-radius:16px;border:1px solid var(--line)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line)}
.woocommerce-checkout #payment div.payment_box{background:#fff;border-radius:12px;font-size:16.5px;color:var(--ink-soft)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:#fff}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{font-size:16.5px;color:var(--ink-soft)}
.woocommerce-checkout table.shop_table tfoot .order-total .amount{font-family:var(--display);font-size:22px;font-weight:500;font-variation-settings:"opsz" 30,"SOFT" 60}
.woocommerce-checkout .woocommerce-checkout-review-order-table{font-size:17.5px}
.woocommerce-order .woocommerce-thankyou-order-received{font-family:var(--display);font-size:26px;line-height:1.3;font-variation-settings:"opsz" 48,"SOFT" 70,"WONK" 1;color:var(--ink)}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:8px}
.woocommerce-account .woocommerce-MyAccount-navigation a{text-decoration:none;color:var(--rose-deep)}


/* claritas hotfix 1: give the hero card slot a real width */
.hero .table-slot{width:100%;max-width:440px;justify-self:center}
@media (max-width:860px){.hero .table-slot{max-width:360px;justify-self:start}}

/* =========================================================================
   4. Card faces, the card filters, and the tools
   ========================================================================= */

/* ---------- The engine's printed card faces, in the theme's frames ----------
   The face itself is styled by the engine, which loads its own stylesheet on
   the card pages. These rules only fit it into the frames the theme owns. */
.card-tile .frame .claritas-face,
.deckcard.face .claritas-face,
.card-hero .claritas-face{width:100%;height:100%}
.card-tile .frame .claritas-face-card,
.deckcard.face .claritas-face-card{height:100%;aspect-ratio:auto;border-radius:8px}
.deckcard.face.is-drawn{background:#FFFCF6}
.deckcard.face.is-drawn .claritas-face-card{border-radius:10px}
.card-tile .frame{background:#FFFCF6}

/* ---------- Filter chips and the search box on the card archive ---------- */
.card-filters{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;padding:10px 0 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:14px}
.chip-row{display:flex;flex-wrap:wrap;gap:9px;padding:10px 0}
.chip-link{display:inline-block;text-decoration:none;color:var(--ink-soft);border:1.5px solid var(--line);border-radius:999px;padding:7px 16px;font:400 16px var(--body);transition:background .2s,border-color .2s,color .2s}
.chip-link:hover{border-color:var(--rose);color:var(--ink)}
.chip-link.is-on{background:var(--rose-soft);border-color:var(--rose);color:var(--rose-deep)}
.card-search{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:8px 0}
.card-search input[type="search"]{min-width:190px;border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:11px 15px;font:400 17px var(--body)}
.card-search .btn.light{padding:11px 18px;font-size:17px}
.card-nothing{max-width:52ch;margin:34px 0 14px}
@media (max-width:640px){.card-filters{gap:8px}.card-search{width:100%}.card-search input[type="search"]{flex:1}}

/* ---------- The engine's evening check-in on the dusk photo ----------
   The homepage asks the question itself (the shortcode runs with
   heading="false"), so the widget only has to be readable against the sky. */
.dusk .claritas-checkin{max-width:620px;margin:0 auto;color:#FFF7F2;text-align:center}
.dusk .claritas-checkin .claritas-choices{justify-content:center}
.dusk .claritas-checkin .claritas-btn--quiet{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.8);backdrop-filter:blur(4px)}
.dusk .claritas-checkin .claritas-btn--quiet:hover{background:rgba(255,255,255,.3)}
.dusk .claritas-checkin .claritas-btn--quiet.is-chosen{background:rgba(255,255,255,.34);border-color:#fff;color:#fff}
.dusk .claritas-checkin .claritas-label,.dusk .claritas-checkin .claritas-note{color:#FFF1EC}
.dusk .claritas-checkin .claritas-input{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.6);color:var(--ink)}
.dusk .claritas-checkin-label{margin-top:22px}
.dusk .claritas-checkin-reply{border-top-color:rgba(255,255,255,.32)}
.dusk .claritas-checkin-reply p,.dusk .claritas-checkin .claritas-signature{color:#FFF7F2}

/* ---------- Result cards from the tools plugin ----------
   The tools plugin is not here yet. It uses the same tokens and these class
   names, so its calculators already read like the rest of the site the day
   they arrive, and nothing here breaks if they never do. */
.claritas-tool{max-width:68ch;margin:34px 0}
.claritas-tool-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 8px}
.claritas-tool-field{flex:1 1 220px;min-width:0}
.claritas-tool-field label{display:block;font-size:16px;color:var(--ink-soft);margin:0 0 6px}
.claritas-tool-field input,.claritas-tool-field select{width:100%;border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:12px 15px;font:400 17px var(--body)}
.claritas-tool-note{font-size:16px;color:var(--ink-soft);max-width:56ch}
.claritas-tool .btn{align-self:flex-end}

.claritas-result{max-width:68ch;margin:28px 0 0}
.claritas-result-card{position:relative;background:var(--paper-2);border:1px solid var(--line-gold);border-radius:16px;padding:26px 28px;margin:0 0 18px;box-shadow:0 26px 40px -34px rgba(74,40,50,.55)}
.claritas-result-card + .claritas-result-card{margin-top:18px}
.claritas-result-kicker,.claritas-result-card .k{display:block;font:500 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);margin:0 0 6px}
.claritas-result-number{font-family:var(--display);font-size:clamp(38px,6vw,60px);line-height:1;font-weight:600;letter-spacing:-.02em;font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 1;color:var(--rose-deep);margin:0 0 8px;display:block}
.claritas-result-title{font-family:var(--display);font-size:clamp(24px,3vw,32px);line-height:1.1;font-weight:500;font-variation-settings:"opsz" 72,"SOFT" 60,"WONK" 1;margin:0 0 10px}
.claritas-result-body p{margin:0 0 14px;font-size:18.5px}
.claritas-result-body p:last-child{margin-bottom:0}
.claritas-result-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:14px 0 0;font-size:16px;color:var(--ink-soft)}
.claritas-result-line{font-family:var(--display);font-style:italic;font-size:21px;line-height:1.35;color:var(--ink);margin:16px 0 0;font-variation-settings:"opsz" 40,"SOFT" 100,"WONK" 1}
.claritas-result-step{margin:18px 0 0;padding:18px 20px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:14px}
.claritas-result-step .k{margin-bottom:4px}
.claritas-result-step p{margin:0;font-size:18px}
.claritas-result-grid{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.claritas-result-grid li{margin:0;padding:16px 18px;background:var(--paper-2);border:1px solid var(--line);border-radius:14px}
.claritas-result-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:20px 0 0}
.claritas-result[hidden]{display:none}

/* =========================================================================
   5. Phones, keyboards and printers
   -------------------------------------------------------------------------
   Nothing here changes the design above 600px. It gives the phone a little
   more room, keeps every tap target at 44px, holds the smallest type at 15px
   and stops anything from pushing the page sideways.
   ========================================================================= */

/* ---------- Nothing scrolls sideways ---------- */
body{overflow-wrap:break-word}
.entry-content a,.entry-content code,.entry-content p,.list .desc,.post-list .desc{overflow-wrap:anywhere}
.wrap,.site-main,.entry-content,.article{min-width:0}
.entry-content img,.entry-content iframe,.entry-content video{max-width:100%;height:auto}
.entry-content iframe{width:100%}

/* ---------- Focus, everywhere, including the plugins ----------
   The rule at the top of this file only names the elements the theme prints.
   The plugins add buttons, chips and summaries of their own, and this makes
   sure every one of them shows the same ring. */
.claritas-quiz *:focus-visible,
.claritas-tools *:focus-visible,
.claritas-reports *:focus-visible,
.claritas *:focus-visible,
.chip-link:focus-visible,
.card-tile a:focus-visible,
.feature:focus-visible,
.more a:focus-visible,
.list a:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.skip-link:focus-visible{outline:2px solid var(--rose);outline-offset:-4px}

/* The evening check-in stands on a photograph, so its label and its note need
   the same shadow the heading above them already has. */
.dusk .claritas-checkin .claritas-label,
.dusk .claritas-checkin .claritas-note,
.dusk .claritas-checkin .claritas-checkin-q,
.dusk .choices button{text-shadow:0 1px 10px rgba(40,20,50,.55)}

/* ---------- Tablets ---------- */
@media (max-width:768px){
  .card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}
  .letter .wrap{gap:28px}
  .paper{padding:36px 34px 32px}
}

/* ---------- Phones ---------- */
@media (max-width:600px){
  .wrap{padding:0 20px}

  /* A long site name wraps rather than pushing the menu button off the edge. */
  .top{gap:14px;padding:18px 0 10px}
  .logo{min-width:0;line-height:1.05}

  /* No type under 15px on a phone. Everything already at 15px or more, and
     the lettering inside the SVG badge and stamp, is left exactly as it is. */
  .k,.more .k,.feature .k,.authorbox .k,.yesno .k,.onestep .k,
  .claritas-result-kicker,.claritas-result-card .k,.claritas-result-step .k,
  .chips-label,.pill,p.claritas-draft-notice strong,
  .woocommerce span.onsale{font-size:15px}
  .chips li,.card-tile .n,.polaroid span,.face .num,.deckcard .num{font-size:15px}
  .card-tile .n{letter-spacing:.1em}

  /* Two card tiles to a row, always: auto-fill would drop to one at 375px. */
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}

  /* The letter, so the paper is not all margin, and the photo stays on it. */
  .paper{padding:26px 22px 24px;margin-top:30px}
  .paper .sig .name{font-size:34px}
  .polaroid{right:-4px;top:-30px;width:104px}
  .stamp{left:-14px;bottom:-18px;width:84px;height:84px}

  /* The fan and the hero deck, sized for the narrow column. */
  .fan{height:250px;max-width:290px}
  .fan .f{width:104px;margin-left:-52px}
  .table{width:100%;max-width:270px;height:430px}
  .deckcard{width:210px}
  .card-hero .table{height:400px}
  .card-hero .deckcard{width:190px}
  .badge{width:92px;height:92px;right:0}

  /* Tap targets. */
  .btn,.btn.light,.choices button,.comment-form .submit,
  .woocommerce a.button,.woocommerce button.button,.woocommerce input.button{min-height:48px}
  .chip-link{min-height:44px;display:inline-flex;align-items:center}
  .nav a{min-height:44px;display:flex;align-items:center}
  .card-search .btn.light{min-height:44px}
  .list a,.post-list a,.more a,.night a{display:block;padding:2px 0}

  /* Forms go full width rather than fighting over one line. */
  .subscribe,.search-form,.card-search{flex-direction:column;align-items:stretch}
  .subscribe input,.search-form input[type="search"],.card-search input[type="search"]{min-width:0;width:100%}
  .subscribe .btn,.search-form .btn,.card-search .btn{justify-content:center}

  /* A wide table in an article scrolls in its own box, not the page. */
  .entry-content table{display:block;width:100%;overflow-x:auto}
  .entry-content .alignwide,.entry-content .alignfull{max-width:100%;margin-left:0}
}

@media (max-width:420px){
  .night .cols{gap:20px 18px}
  .card-grid{gap:18px 12px}
}

/* ---------- When motion is not wanted ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .feature:hover img,.card-tile a:hover .frame,.fan:hover .f,.face:hover{transform:none}
  .nav a::after{transition:none}
}

/* ---------- Print ----------
   A card page, an article and a reading should all come off a printer as
   readable pages: the furniture goes, the photographs stay small, and
   nothing is left mid-word at a page break. */
@media print{
  :root{--paper:#fff;--paper-2:#fff}
  body{background:#fff;color:#000;font-size:12pt;line-height:1.45;overflow:visible}
  .top,.nav,.nav-toggle,.today,.skip-link,.night,.dusk,.horizon,.badge,.stamp,
  .card-cta,.card-filters,.subscribe,.search-form,.pagination,.comments,
  .claritas-actions,.claritas-feedback,.claritas-save,.claritas-followup,
  .claritas-upsell,.claritas-spreads,.claritas-breathe,.cq-share,.cq-save,
  .cq-others,.cq-again,.cq-nav,.ct-share,.ct-links,.claritas-reports-form,
  .claritas-report__followup,.woocommerce-breadcrumb{display:none !important}
  .wrap{max-width:none;padding:0}
  a{color:#000;text-decoration:none}
  .entry-content a::after{content:" (" attr(href) ")";font-size:9pt;color:#444;word-break:break-all}
  .entry-content a[href^="#"]::after{content:""}
  h1,h2,h3{page-break-after:avoid;break-after:avoid}
  p,li,blockquote,figure,.onestep,.yesno,.claritas-stepbox,.ct-card,.claritas-report__step{page-break-inside:avoid;break-inside:avoid}
  img{max-width:100%;page-break-inside:avoid;break-inside:avoid}

  /* The card page: the card beside its meaning, both small enough to fit. */
  .card-hero{display:block;padding:0}
  .card-hero .table{position:relative;width:180px;height:300px;margin:0 0 16px 24px;float:right}
  .card-hero .deckcard{width:170px;bottom:0;box-shadow:none;border-width:3px}
  .card-hero .deckcard.face{transform:translateX(-50%)}
  .card-hero .deckcard.back{display:none}
  .card-title{font-size:22pt}
  .chips li,.pill{background:none;border:1px solid #999;color:#000}
  .card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .card-tile .frame{box-shadow:none}
  .entry-figure,.still,.arch,.feature,.polaroid{display:none}
  .letter .wrap{display:block}
  .paper{transform:none;box-shadow:none;border:0;padding:0;margin:0}
}


/* The trail above a title (Rank Math breadcrumbs). */
.crumbs{margin:0 0 14px}
.crumbs .rank-math-breadcrumb p{margin:0;font-size:15px;color:var(--ink-soft);line-height:1.5}
.crumbs .rank-math-breadcrumb a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid rgba(108,90,114,.3)}
.crumbs .rank-math-breadcrumb a:hover{color:var(--rose-deep);border-bottom-color:currentColor}
.crumbs .rank-math-breadcrumb .separator{margin:0 6px;opacity:.6}
.crumbs .rank-math-breadcrumb .last{color:var(--ink)}

/* Doors into a reading printed inside or after page content keep the button's own colours. */
.entry-content .number-ask a.btn,.number-ask a.btn,.card-ask a.btn,.entry-content a.claritas-reports-btn{color:#fff;border-bottom:0;text-decoration:none}
.entry-content .number-ask a.btn:hover,.number-ask a.btn:hover,.entry-content a.claritas-reports-btn:hover,.entry-content a.claritas-reports-btn:focus{color:#fff;border-bottom:0}

/* Card combinations on a card page */
.card-combos .combo-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	columns: 3 220px;
	column-gap: 32px;
}

.card-combos .combo-list li {
	break-inside: avoid;
	margin: 0 0 10px;
}

.card-combos .combo-list a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--line, rgba(51, 36, 58, .14));
	transition: color .2s ease, border-color .2s ease;
}

.card-combos .combo-list a:hover {
	color: var(--rose-deep, #9E4459);
	border-bottom-color: currentColor;
}

/* Journal list with a picture per post */
.post-list li.has-thumb{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:center}
.post-list .thumb{display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--rose-soft);box-shadow:0 22px 30px -24px rgba(74,40,50,.55)}
.post-list .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.post-list li.has-thumb:hover .thumb img{transform:scale(1.035)}
@media (max-width:700px){.post-list li.has-thumb{grid-template-columns:1fr;gap:14px}}
@media (prefers-reduced-motion:reduce){.post-list .thumb img{transition:none}.post-list li.has-thumb:hover .thumb img{transform:none}}

/* page-banner: pages and quizzes show their picture as a wide banner so the tool or reading stays close to the top */
body.page .entry-figure img,.quiz-article .entry-figure img{aspect-ratio:12/5;object-fit:cover;width:100%;height:auto}
@media (max-width:640px){body.page .entry-figure img,.quiz-article .entry-figure img{aspect-ratio:16/9}}
.quiz-figure{margin-bottom:26px}