/* Couples Red Journal - site styles. One file for every page. */
:root{
  --cream:#f4ede0;
  --paper:#f7f1e6;
  --ink:#241a16;
  --ink-soft:#4a3b34;
  --muted:#6a564d;
  --crimson:#7a1e2b;
  --crimson-soft:rgba(122,30,43,0.35);
  --line:rgba(122,30,43,0.18);
  --serif:'Iowan Old Style','Palatino Linotype','Palatino','Georgia',serif;
  --wrap:68rem;
  --text:44rem;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.04rem;
  line-height:1.62;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto;}
a{color:var(--crimson);}
img{max-width:100%;display:block;}
h1,h2,h3{color:var(--crimson);font-weight:600;line-height:1.15;margin:0 0 .6rem;}
h1{font-size:clamp(2rem,5vw,2.9rem);letter-spacing:.02em;}
h2{font-size:clamp(1.3rem,3vw,1.6rem);}
h3{font-size:1.15rem;}
p{margin:0 0 1rem;}
.skip{position:absolute;left:-999px;top:0;background:var(--crimson);color:var(--cream);padding:.5rem 1rem;z-index:10;}
.skip:focus{left:1rem;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:5;
  background:rgba(244,237,224,.96);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{
  max-width:var(--wrap);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem clamp(1rem,4vw,2rem);
}
.brand{
  display:inline-flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--crimson);
  font-size:.86rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;
}
.brand-logo{width:34px;height:34px;flex:none;}
.site-nav{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.8rem);}
.site-nav a,.nav-drop{
  text-decoration:none;color:var(--ink);
  font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  padding:.3rem 0;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.site-nav a:hover,.site-nav a:focus{color:var(--crimson);border-color:var(--crimson-soft);outline:none;}
.site-nav a:focus-visible,.nav-drop:focus-visible{outline:1px dotted var(--crimson);outline-offset:3px;}
.site-nav a[aria-current="page"]{color:var(--crimson);border-color:var(--crimson);}
.site-nav .nav-cta{
  border:1px solid var(--crimson-soft);padding:.45rem .9rem;color:var(--crimson);
}
.site-nav .nav-cta:hover,.site-nav .nav-cta:focus{background:var(--crimson);color:var(--cream);border-color:var(--crimson);}
/* dropdowns */
.nav-group{position:relative;}
.nav-drop{
  -webkit-tap-highlight-color:transparent;
  background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:.45em;
}
.nav-drop::after{
  content:"";width:.38em;height:.38em;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-.15em) rotate(45deg);transition:transform .2s ease;
}
.nav-drop[aria-expanded="true"]::after{transform:translateY(.1em) rotate(-135deg);}
.nav-drop:hover,.nav-drop[aria-expanded="true"]{color:var(--crimson);border-color:var(--crimson-soft);}
.nav-drop.has-current{color:var(--crimson);border-color:var(--crimson);}
.nav-menu{
  list-style:none;margin:0;padding:.5rem 0;
  position:absolute;top:calc(100% + .7rem);left:-1.1rem;min-width:15rem;z-index:6;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 26px rgba(36,26,22,.08);
}
.nav-menu[hidden]{display:none;}
.nav-menu li{margin:0;}
.site-nav .nav-menu a{
  display:block;padding:.6rem 1.1rem;border-bottom:0;
  font-size:.7rem;letter-spacing:.18em;white-space:nowrap;
}
.site-nav .nav-menu a:hover,.site-nav .nav-menu a:focus{background:var(--cream);}
.site-nav .nav-menu a[aria-current="page"]{color:var(--crimson);box-shadow:inset 2px 0 0 var(--crimson);}
.menu-toggle{
  display:none;background:none;border:1px solid var(--crimson-soft);color:var(--crimson);
  font:inherit;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;padding:.45rem .8rem;cursor:pointer;
}
@media (max-width:860px){
  .brand{font-size:.76rem;letter-spacing:.2em;gap:.5rem;}
  .brand-logo{width:32px;height:32px;}
  .menu-toggle{display:inline-block;flex:none;}
  .site-nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    padding:.4rem clamp(1rem,4vw,2rem) 1rem;
    max-height:calc(100vh - 4rem);overflow-y:auto;
  }
  .site-nav.open{display:flex;}
  .site-nav a,.nav-drop{padding:.8rem 0;border-bottom:1px solid var(--line);}
  .nav-drop{width:100%;justify-content:space-between;text-align:left;}
  .nav-menu{position:static;min-width:0;box-shadow:none;border:0;border-bottom:1px solid var(--line);background:none;padding:.2rem 0 .5rem 1rem;}
  .site-nav .nav-menu a{padding:.65rem 0;white-space:normal;}
  .site-nav .nav-menu a:hover,.site-nav .nav-menu a:focus{background:none;}
  .site-nav .nav-menu a[aria-current="page"]{box-shadow:none;}
  .site-nav .nav-cta{margin-top:.8rem;text-align:center;}
}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:clamp(2.2rem,6vh,4.5rem) clamp(1rem,4vw,2rem) 4rem;}
.text{max-width:var(--text);}
.imprint{
  font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--crimson);
  margin:0 0 1.4rem;padding-left:.05em;
}
.lede{font-size:1.16rem;color:var(--ink-soft);font-style:italic;max-width:36em;}
.rule{position:relative;width:172px;height:16px;margin:2.4rem auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237a1e2b'%3E%3Cpath d='M8 .6 10.6 3.2 8 5.8 5.4 3.2Z M3.2 5.4 5.8 8 3.2 10.6 .6 8Z M12.8 5.4 15.4 8 12.8 10.6 10.2 8Z M8 10.2 10.6 12.8 8 15.4 5.4 12.8Z'/%3E%3C/svg%3E") center/16px 16px no-repeat;}
.rule::before,.rule::after{content:"";position:absolute;top:50%;width:64px;height:1px;background:var(--crimson);}
.rule::before{left:0;}
.rule::after{right:0;}

/* ---------- hero ---------- */
.hero{text-align:center;padding:clamp(3rem,10vh,6.5rem) clamp(1rem,4vw,2rem) clamp(2.4rem,6vh,4rem);}
.hero .imprint{margin-bottom:1.2rem;}
.hero h1{font-size:clamp(2.6rem,7vw,4.4rem);letter-spacing:.05em;margin-bottom:1rem;}
.hero .lede{margin:0 auto;}
.btn{
  display:inline-block;text-decoration:none;color:var(--crimson);
  border:1px solid rgba(122,30,43,.5);padding:.75em 2.2em;
  font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;
  transition:background-color .3s ease,color .3s ease,box-shadow .3s ease;
}
.btn:hover,.btn:focus-visible{background:var(--crimson);color:var(--cream);outline:none;box-shadow:0 0 22px 2px rgba(122,30,43,.28);}
.btn.glow{animation:glow 10s ease-in-out infinite;}
.btn.glow:hover,.btn.glow:focus-visible{animation:none;}
.btn.quiet{border-color:var(--line);color:var(--muted);}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(122,30,43,0);}50%{box-shadow:0 0 22px 2px rgba(122,30,43,.2);}}
@media (prefers-reduced-motion:reduce){.btn.glow{animation:none;}}

/* ---------- cards and lists ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.4rem;}
.card{
  background:var(--paper);border:1px solid var(--line);
  padding:1.6rem 1.5rem 1.4rem;display:flex;flex-direction:column;
}
.card .kicker{font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--crimson);margin:0 0 .7rem;}
.card h3{margin-bottom:.5rem;}
.card p{color:var(--ink-soft);font-size:.98rem;}
.card .more{margin-top:auto;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.list li{padding:1.5rem 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:.4rem 1.6rem;align-items:start;}
.list h2{font-size:1.35rem;margin:0;}
.list p{margin:.3rem 0 0;color:var(--ink-soft);grid-column:1;}
.list .actions{grid-column:2;grid-row:1 / span 2;align-self:center;}
@media (max-width:600px){.list li{grid-template-columns:1fr;}.list .actions{grid-column:1;grid-row:auto;margin-top:.6rem;}}
.chip{display:inline-block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--line);padding:.15rem .5rem;margin-left:.6rem;color:var(--muted);vertical-align:middle;}
.chip.live{color:var(--crimson);border-color:var(--crimson-soft);}
.empty{color:var(--muted);font-style:italic;padding:2rem 0;}
.quote{font-style:italic;font-size:1.2rem;color:var(--ink-soft);text-align:center;max-width:32em;margin:0 auto;}
.contact-img{height:1.4rem;width:auto;margin:.4rem 0 .2rem;}
.eff{font-size:.9rem;color:var(--muted);margin:0 0 2.4rem;}
.text h2{margin-top:2.4rem;}
.text ul{margin:0 0 1rem 1.2rem;padding:0;}
.text li{margin:0 0 .4rem;}

/* ---------- shop ---------- */
.disclosure{font-size:.86rem;color:var(--muted);border-left:2px solid var(--crimson-soft);padding:.2rem 0 .2rem .9rem;margin:1.2rem 0 2rem;}
.shop-tools{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;margin-bottom:1.6rem;}
.shop-tools input[type=search]{
  flex:1 1 16rem;font:inherit;font-size:1rem;padding:.65rem .9rem;
  background:var(--paper);border:1px solid var(--line);color:var(--ink);
}
.shop-tools input[type=search]:focus{outline:none;border-color:var(--crimson);}
.cats{display:flex;flex-wrap:wrap;gap:.5rem;}
.cats button{
  font:inherit;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--ink-soft);padding:.4rem .75rem;
}
.cats button[aria-pressed="true"]{background:var(--crimson);border-color:var(--crimson);color:var(--cream);}
.count{font-size:.8rem;color:var(--muted);margin:0 0 1rem;}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));gap:1.4rem;}
.product{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;}
.product .ph{aspect-ratio:4 / 5;background:#efe5d4;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.product .ph img{width:100%;height:100%;object-fit:contain;background:#fff;}
.product .ph span{font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--crimson-soft);}
.product .body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1;}
.product .meta{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--crimson);margin:0 0 .45rem;}
.product h3{font-size:1.04rem;color:var(--ink);margin:0 0 .4rem;}
.product p{font-size:.92rem;color:var(--ink-soft);margin:0 0 1rem;}
.product .btn{margin-top:auto;text-align:center;padding:.65em 1em;font-size:.68rem;letter-spacing:.24em;}
.pager{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:2.4rem 0 0;}
.pager button{
  font:inherit;font-size:.8rem;min-width:2.4rem;padding:.45rem .7rem;cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--ink);
}
.pager button[aria-current="page"]{background:var(--crimson);color:var(--cream);border-color:var(--crimson);}
.pager button:disabled{opacity:.4;cursor:default;}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:3rem;}
.site-footer .bar{
  max-width:var(--wrap);margin:0 auto;padding:2rem clamp(1rem,4vw,2rem) 2.4rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;
  font-size:.82rem;color:var(--muted);
}
.site-footer nav{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;}
.site-footer a{color:var(--muted);text-decoration:none;letter-spacing:.14em;text-transform:uppercase;font-size:.7rem;}
.site-footer a:hover,.site-footer a:focus{color:var(--crimson);}
.site-footer .foot-brand{color:var(--crimson);letter-spacing:.3em;font-weight:600;font-size:.72rem;}
.site-footer .social{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;}
.social-label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;}
.social-list{list-style:none;margin:0;padding:0;display:flex;gap:.35rem;}
.social-list a{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;border:1px solid var(--line);border-radius:50%;color:var(--ink-soft);}
.social-list a:hover,.social-list a:focus{color:var(--crimson);border-color:var(--crimson-soft);}
.social-list svg{width:18px;height:18px;display:block;}
.site-footer .fine{flex-basis:100%;font-size:.76rem;line-height:1.5;margin:0;}
.site-footer .fine-link{text-transform:none;letter-spacing:0;font-size:.76rem;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;}

/* ---------- the door ---------- */
.door{max-width:30rem;margin:0 auto;text-align:center;padding:clamp(4rem,14vh,8rem) clamp(1rem,4vw,2rem) clamp(3rem,10vh,6rem);}
.door h1{font-size:clamp(1.5rem,4vw,1.9rem);letter-spacing:.04em;font-weight:500;margin-bottom:1.1rem;}
.door p{color:var(--ink-soft);font-size:1.06rem;}
.door .btn{margin-top:1.2rem;}
.door .not-now{display:inline-block;margin-top:1.6rem;font-size:.92rem;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;}
.door .not-now:hover,.door .not-now:focus{color:var(--crimson);}

/* ---------- FAQ, site map ---------- */
.faq{margin:0;padding:0;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);padding:1.5rem 0 .6rem;}
.text .faq-item h2{font-size:1.25rem;margin:0 0 .6rem;}
.faq-item p{color:var(--ink-soft);}
.map-group{margin-bottom:2rem;}
.text .map-group h2{margin-top:0;font-size:1.2rem;}
.map-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.text .map-list li{margin:0;padding:.75rem 0;border-bottom:1px solid var(--line);}
.map-list a{text-decoration:none;}
.map-list a:hover{text-decoration:underline;}
.map-list span{display:block;font-size:.92rem;color:var(--muted);}

/* ---------- contact forms ---------- */
.write-to{background:var(--paper);border:1px solid var(--line);padding:1.3rem 1.4rem;margin:0 0 2.6rem;}
.text .write-to h2{margin:0 0 .4rem;font-size:1.2rem;}
.write-to .contact-img{height:auto;max-height:1.6rem;max-width:100%;}
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem;border-bottom:1px solid var(--line);}
.tabs button{
  font:inherit;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  background:none;border:1px solid transparent;border-bottom:0;color:var(--ink-soft);
  padding:.7rem 1rem;margin-bottom:-1px;
}
.tabs button[aria-selected="true"]{background:var(--paper);border-color:var(--line);color:var(--crimson);border-bottom:1px solid var(--paper);}
.tabs button:focus-visible{outline:1px dotted var(--crimson);outline-offset:2px;}
@media (max-width:520px){.tabs{gap:0;}.tabs button{letter-spacing:.1em;padding:.65rem .55rem;font-size:.66rem;}}
.panel[hidden]{display:none;}
.panel h2{margin-top:0;}
.text .panel h2{margin-top:0;}
.how{background:var(--paper);border-left:2px solid var(--crimson-soft);padding:1rem 1.2rem;margin:0 0 1.6rem;}
.text .how h3{margin:0 0 .5rem;font-size:1.02rem;}
.text .how ul{margin-bottom:0;}
.form{display:grid;gap:1.1rem;max-width:38rem;}
.field{display:grid;gap:.35rem;}
.field label,.field .label{font-size:.86rem;color:var(--ink);font-weight:600;}
.field .opt{font-weight:400;color:var(--muted);}
.form input[type=text],.form input[type=email],.form input[type=url],.form select,.form textarea{
  font:inherit;font-size:1rem;width:100%;padding:.65rem .8rem;
  background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:0;
}
.form textarea{min-height:9rem;resize:vertical;line-height:1.5;}
.form textarea.long{min-height:18rem;}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--crimson);box-shadow:0 0 0 2px rgba(122,30,43,.12);}
.form.tried input:invalid,.form.tried select:invalid,.form.tried textarea:invalid{border-color:var(--crimson);}
.form.tried .check input:invalid{outline:1px solid var(--crimson);outline-offset:2px;}
.hint{font-size:.84rem;color:var(--muted);margin:0;}
.check{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:.95rem;color:var(--ink-soft);}
.check input{width:1.05rem;height:1.05rem;margin:.25rem 0 0;accent-color:var(--crimson);}
.hp{position:absolute !important;left:-10000px !important;width:1px;height:1px;overflow:hidden;}
.ts:empty{display:none;}
.form .btn{font:inherit;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;background:none;cursor:pointer;justify-self:start;}
.form .btn:disabled{opacity:.55;cursor:wait;box-shadow:none;background:none;color:var(--crimson);}
.status{margin:0;font-size:.95rem;min-height:1.4em;}
.status.ok{color:var(--ink);border-left:2px solid var(--crimson);padding:.5rem 0 .5rem .9rem;background:var(--paper);}
.status.err{color:var(--crimson);}
.note{font-size:.9rem;color:var(--muted);font-style:italic;margin:0;}

/* Symmetry (author, 2026-11-03): buttons, alone or in groups, and the diamond dividers are always centered on the page. Header buttons are the only exception. */
main .btn{display:table;margin-left:auto;margin-right:auto;}
main .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;}
main .actions .btn{margin:0;}
.list li{grid-template-columns:1fr;}
.list .actions{grid-column:1;grid-row:auto;align-self:auto;margin-top:1rem;}
.form .btn{justify-self:center;}
.form .status{text-align:center;}
.tabs{justify-content:center;}
.shop-tools{justify-content:center;}
.cats{justify-content:center;}
.product .btn{width:100%;display:block;}
.rule{margin-left:auto;margin-right:auto;}
/* Footer (author, 2026-11-03): same width as the header; brand left and icons right like the header; links spread across the full width; disclaimer and copyright centered underneath. */
.site-footer .bar{display:block;}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.site-footer .social{flex-basis:auto;}
.site-footer .foot-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.2rem;margin:1.6rem 0;padding:1.2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.foot-fine{text-align:center;}
.foot-fine .fine{margin:.5rem 0 0;}
@media (max-width:860px){.foot-top{justify-content:center;flex-direction:column;}.site-footer .foot-links{justify-content:center;}}

.disclosure{text-align:center;font-size:.8rem;color:var(--muted);margin:3rem auto 0;max-width:40rem;border:none;padding:0;}

/* Frozen frame (author, 2026-11-03). Every page shares one structure, so nothing moves when you go from page to page:
   1. The scrollbar space is always reserved, so short and long pages sit at the same position.
   2. Header and footer share one width (--wrap). The header bar has a fixed height.
   3. Every page body is one centered column of the same width, so titles, text, dividers and buttons sit in the same place on every page.
   4. Grids that need more room (shop products, home tiles, shop tools) widen symmetrically around the same center. */
html{overflow-y:scroll;scrollbar-gutter:stable;}
.site-header .bar{min-height:4.25rem;}
.wrap,.wrap.text{max-width:var(--column);}
:root{--column:48rem;}
.products,.grid,.shop-tools{
  width:min(calc(var(--wrap) - 4rem), calc(100vw - 2rem));
  position:relative;left:50%;transform:translateX(-50%);
}
.products{grid-template-columns:repeat(auto-fit,minmax(14.5rem,15.5rem));justify-content:center;}

/* Lit buttons (author, 2026-11-03): every button on the site lights up the same way on hover or keyboard focus.
   No fill: the border turns full crimson, a soft glow rises around it, and the words glow with it, so it reads as switched on. */
.btn,.site-nav .nav-cta,.tabs button,.cats button,.pager button,.social-list a{
  transition:color .3s ease,border-color .3s ease,box-shadow .3s ease,text-shadow .3s ease,background-color .3s ease;
}
.btn:hover,.btn:focus-visible,
.form .btn:hover,.form .btn:focus-visible,
.site-nav .nav-cta:hover,.site-nav .nav-cta:focus-visible,
.tabs button:hover,.tabs button:focus-visible,
.cats button:hover,.cats button:focus-visible,
.pager button:not(:disabled):hover,.pager button:focus-visible,
.social-list a:hover,.social-list a:focus-visible{
  background:transparent;color:var(--crimson);border-color:var(--crimson);outline:none;
  box-shadow:0 0 22px 2px rgba(122,30,43,.28);
  text-shadow:0 0 8px rgba(122,30,43,.45),0 0 1px rgba(122,30,43,.6);
}
.social-list a:hover svg,.social-list a:focus-visible svg{filter:drop-shadow(0 0 4px rgba(122,30,43,.5));}
/* Chosen states stay filled; hovering them adds the same glow. */
.cats button[aria-pressed="true"]:hover,.pager button[aria-current="page"]:hover{background:var(--crimson);color:var(--cream);text-shadow:0 0 8px rgba(244,237,224,.6);}
.btn:focus:not(:focus-visible){box-shadow:none;}

/* Resting buttons (author, 2026-11-03): the words rest faded, at the same strength as the faint outline, and come up to full crimson with the glow on hover or focus.
   Phones and tablets cannot hover, so there the words stay at full strength. */
.btn,.form .btn,.site-nav .nav-cta{color:rgba(122,30,43,.5);border-color:rgba(122,30,43,.5);}
@media (hover:none){.btn,.form .btn,.site-nav .nav-cta{color:var(--crimson);border-color:var(--crimson);}}

/* Page end: every page closes on one divider, at a fixed distance from the
   last content and from the footer. Content, buttons and the closing quote
   come first; then the divider; then the footer. */
main > :last-child{padding-bottom:0;}
.grid + .quote{margin-top:2.6rem;}
main > :last-child > :last-child{margin-bottom:0;}
.page-end{padding:3.5rem 1rem 0;}
.page-end .rule{margin:0 auto;}
.site-footer{margin-top:2.25rem;}
main > :last-child > :last-child > :last-child{margin-bottom:0;}

/* Breathing room before a button: a button or button group that follows text
   always sits clear of it (author, 2026-11-03). */
:is(.wrap,.hero,.form,.text,section) > :is(p,ul,ol,section,label,div:not(.rule):not(.ts)) + :is(.btn,.actions){margin-top:2.25rem;}
.form > .ts + .btn{margin-top:1.5rem;}

/* Book pages (publications, one page per book) */
.book-cover{margin:0 0 2.4rem;}
.book-cover img{width:100%;height:auto;border:1px solid var(--line);}
.plate{aspect-ratio:1600/840;background:var(--paper);border:1px solid var(--crimson-soft);outline:1px solid var(--crimson-soft);outline-offset:-12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--crimson);padding:2rem 1rem;}
.plate-the{font-size:clamp(.9rem,2.4vw,1.3rem);letter-spacing:.32em;text-transform:uppercase;font-weight:600;}
.plate-name{font-size:clamp(1.7rem,6vw,3.4rem);letter-spacing:.06em;text-transform:uppercase;font-weight:600;line-height:1.08;max-width:14em;}
.plate-rule{display:block;width:110px;height:1px;background:var(--crimson);margin:1rem auto .9rem;position:relative;}
.plate-rule::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;background:var(--crimson);transform:translate(-50%,-50%) rotate(45deg);}
.plate-by{letter-spacing:.32em;text-transform:uppercase;font-size:clamp(.7rem,1.8vw,.95rem);}
.plate-imp{letter-spacing:.26em;text-transform:uppercase;font-size:.6rem;margin-top:clamp(1rem,4vw,2.2rem);color:var(--muted);}
.pull{margin:2.6rem auto;padding:1.6rem 0;max-width:32em;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.pull p{font-style:italic;font-size:1.3rem;line-height:1.45;color:var(--crimson);margin:0 0 .6rem;}
.pull cite{font-style:normal;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);}
.book-status{text-align:center;font-style:italic;color:var(--ink-soft);}
.book .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;}
.book .actions .btn{margin:0;}
.book .quote{margin-top:2.6rem;}
.shop-intro{max-width:36em;color:var(--ink-soft);}
/* Book card: the book's title card at the top of its page (author, 2026-11-03) */
.book-card{background:var(--paper);border:1px solid var(--crimson-soft);outline:1px solid var(--crimson-soft);outline-offset:-12px;text-align:center;color:var(--crimson);padding:clamp(2.2rem,6vw,3.4rem) 1.5rem clamp(2rem,5vw,3rem);margin:0 0 2rem;}
.book-card-logo{width:44px;height:44px;margin:0 auto .7rem;}
.book-card-pub{letter-spacing:.32em;text-transform:uppercase;font-size:.64rem;font-weight:600;margin:0 0 clamp(1.2rem,4vw,2rem);}
.book-card-title{font-size:clamp(1.8rem,6vw,3.2rem);letter-spacing:.06em;text-transform:uppercase;line-height:1.08;margin:0 auto;max-width:14em;}
.book-card-rule{display:block;width:110px;height:1px;background:var(--crimson);margin:1.1rem auto 1rem;position:relative;}
.book-card-rule::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;background:var(--crimson);transform:translate(-50%,-50%) rotate(45deg);}
.book-card-by{letter-spacing:.32em;text-transform:uppercase;font-size:clamp(.72rem,1.8vw,.92rem);margin:0;}
.book-lede{text-align:center;margin:0 auto;}
.closing{text-align:center;font-style:italic;color:var(--ink-soft);margin-top:2.4rem;}
.eff.updated{margin:2.4rem 0 0;}

/* Button audit (author, 2026-11-03): every button looks and behaves the same.
   After a click it returns to rest; it lights only while the pointer is on it or it has keyboard focus.
   Form buttons match link buttons exactly. On phones a tap never leaves a button lit. */
.form .btn{font-size:.78rem;letter-spacing:.32em;padding:.75em 2.2em;line-height:inherit;}
.btn:focus:not(:focus-visible){background:transparent;box-shadow:none;text-shadow:none;}
@media (hover:none){.btn:hover:not(:focus-visible){background:transparent;box-shadow:none;text-shadow:none;}}

/* Forms (author, 2026-11-03): every form spans the full page column, so it sits centered on the page with the
   heading and notes above it. Field names sit flush with the left edge of their boxes; the button is centered under the form. */
.form{max-width:none;width:100%;margin-left:auto;margin-right:auto;}
.field label,.field .label,.form .check,.form .note,.form .hint{text-align:left;}

/* Shop search (author, 2026-11-03): half width, centered, with a magnifying glass to click; Enter does the same.
   The categories sit centered on the line below. */
.shop-tools{flex-direction:column;align-items:center;}
.search{position:relative;width:min(24rem,100%);margin:0 auto;}
.search input[type=search]{width:100%;flex:none;padding-right:2.9rem;}
.search-go{position:absolute;top:0;right:0;bottom:0;width:2.7rem;display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-left:1px solid var(--line);color:rgba(122,30,43,.5);cursor:pointer;
  transition:color .3s ease,filter .3s ease;}
.search-go:hover,.search-go:focus-visible{color:var(--crimson);outline:none;filter:drop-shadow(0 0 4px rgba(122,30,43,.5));}
.search-go:focus:not(:focus-visible){color:rgba(122,30,43,.5);filter:none;}
@media (hover:none){.search-go{color:var(--crimson);}}
.search input[type=search]::-webkit-search-cancel-button{margin-right:.2rem;}