/* ==========================================================================
   In the Name of Youth — design system
   Transcribed verbatim from the original design files:
     11-dusk-porcelain.html (home)   09-notes.html (notes)   10-practices.html
   Page-specific rules are scoped under a body class (page-notes, page-practices)
   so the rendering of each original page is byte-for-byte equivalent.
   Rules added by this build are marked with the word NEW.
   NOTE: never write a comment opener inside a comment — CSS comments do not
   nest, and an inner opener would end this block early and silently destroy
   the :root custom properties below it.
   ========================================================================== */

:root{--bg:#FFFFFF;--tint:#F6F6F4;--card:#FFFFFF;--ink:#232220;--muted:#6E6A62;
  --faint:#A8A39A;--line:#E9E8E4;--accent:#E8A33D}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Georgia,'Times New Roman',serif;
  line-height:1.8;font-size:18px;-webkit-font-smoothing:antialiased}
::selection{background:#F6DFAE}
.wrap{max-width:720px;margin:0 auto;padding:0 min(30px,5vw)}
.wide{max-width:1080px;margin:0 auto;padding:0 min(30px,5vw)}
nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px)}
nav .bar{max-width:1080px;margin:0 auto;padding:16px min(30px,5vw);display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px}
nav .links{display:flex;gap:clamp(14px,2.6vw,30px);align-items:center;
  flex-wrap:wrap;justify-content:flex-end}
nav .links a{font-style:italic;font-size:16px;color:var(--ink);text-decoration:none}
nav .links a:hover{color:var(--accent)}
nav .links a.on{color:var(--accent)}
nav .links a.book{background:var(--ink);color:#fff;padding:10px 24px;border-radius:99px}
nav .links a.book:hover{background:var(--accent)}
/* NEW: the vase from the Just Be front cover, in the site accent colour.
   The mark sits left, the menu sits right, on every page. */
nav .mark{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
nav .mark img{height:40px;width:auto;display:block}

/* ---- shared type primitives (used by home AND the new note pages) -------- */
.btn{display:inline-block;padding:15px 40px;border-radius:99px;text-decoration:none;
  font-style:italic;font-size:17px;transition:all .3s}
.btn.solid{background:var(--ink);color:#fff}
.btn.solid:hover{background:var(--accent)}
.btn.line{border:1px solid var(--ink);color:var(--ink)}
.btn.line:hover{border-color:var(--accent);color:var(--accent)}
.eyebrow{text-align:center;font-size:13px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px}
h2.t{font-size:clamp(24px,4.4vw,46px);font-weight:400;text-align:center;margin-bottom:16px;letter-spacing:-.01em}
.lede{text-align:center;font-style:italic;color:var(--muted);max-width:560px;margin:0 auto 54px;font-size:clamp(16px,1.45vw,18px)}

/* ---- home (11-dusk-porcelain) ------------------------------------------- */
body.page-home .hero{min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(ellipse 85% 65% at 50% 112%,#F1F0ED 0%,rgba(241,240,237,0) 62%)}
body.page-home .hero .over{font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin-bottom:28px}
body.page-home .hero h1{font-size:clamp(30px,6.6vw,76px);font-weight:400;line-height:1.15;margin-bottom:26px;letter-spacing:-.01em}
body.page-home .hero h1 em{color:var(--accent)}
body.page-home .hero p{font-style:italic;color:var(--muted);font-size:clamp(17px,2.2vw,20px);max-width:540px;margin:0 auto 38px}
body.page-home .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
body.page-home .scroll-hint{margin-top:56px;font-style:italic;color:var(--faint);font-size:15px;animation:br 4s ease-in-out infinite}
@keyframes br{0%,100%{opacity:.45}50%{opacity:1}}
body.page-home section{padding:96px 0}
body.page-home section.tint{background:var(--tint)}
body.page-home .pull{max-width:640px;margin:0 auto;text-align:center}
body.page-home .pull blockquote{font-size:clamp(20px,3.4vw,34px);font-style:italic;line-height:1.5;margin-bottom:24px}
body.page-home .pull blockquote span{color:var(--accent)}
body.page-home .pull p{color:var(--muted);margin-bottom:20px}
body.page-home .pull a{font-style:italic;color:var(--accent)}
body.page-home .pcards{display:grid;gap:16px;
  /* five columns at the designed width, then it reflows by itself */
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
body.page-home .pcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 24px;
  text-decoration:none;color:var(--ink);transition:transform .3s;display:block}
body.page-home .pcard:hover{transform:translateY(-4px);border-color:var(--accent)}
body.page-home .pcard .dur{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
body.page-home .pcard h4{font-size:19px;font-weight:400;margin-bottom:8px}
body.page-home .pcard p{font-style:italic;font-size:14px;color:var(--muted)}
body.page-home .booksec{display:flex;flex-wrap:wrap;align-items:center;max-width:920px;margin:0 auto;
  gap:clamp(28px,4.7vw,60px)}
body.page-home .booksec .coverwrap{flex:0 1 280px}
body.page-home .booksec > div:not(.coverwrap){flex:1 1 320px}
body.page-home .coverwrap{text-align:center}
body.page-home .coverwrap img{width:250px;border-radius:3px;box-shadow:22px 28px 60px rgba(35,34,32,.22)}
body.page-home .booksec .eyebrow,body.page-home .booksec h2.t{text-align:left}
body.page-home .booksec p{color:var(--muted);margin-bottom:18px}
body.page-home .booksec .praise{font-style:italic;border-left:2px solid var(--accent);padding-left:18px;
  color:var(--muted);margin:26px 0}
body.page-home .note{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,2.2vw,28px) clamp(22px,2.5vw,32px);
  margin-bottom:16px;display:grid;gap:18px;align-items:baseline;
  /* wide enough for "17 Mar"; narrows and wraps on small screens */
  grid-template-columns:clamp(66px,7vw,86px) 1fr}
/* NEW: the journal index shows when a note was written — year in ink on the left,
   the day and month in the accent colour beside it. The design's note numbers are
   still in the database and in the author desk, just not on the site. */
.when{display:inline-flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.when .d{font-style:italic;color:var(--accent)}
body.page-home .note .when .d{font-size:21px}
body.page-notes .note .when .d{font-size:19px}
body.page-home .note h4{font-size:20px;font-weight:400}
body.page-home .note h4 a{color:var(--ink);text-decoration:none}
body.page-home .note h4 a:hover{color:var(--accent)}
body.page-home .note p{font-style:italic;color:var(--muted);font-size:16px}
body.page-home .more{text-align:center;margin-top:28px}
body.page-home .more a{font-style:italic;color:var(--accent);font-size:17px}
body.page-home .mariana,body.page-plain .mariana{display:flex;flex-wrap:wrap;align-items:center;
  max-width:920px;margin:0 auto;gap:clamp(26px,4.25vw,54px)}
body.page-home .mariana .ph,body.page-plain .mariana .ph{flex:0 1 280px}
body.page-home .mariana > div:not(.ph),body.page-plain .mariana > div:not(.ph){flex:1 1 320px}
body.page-home .mariana .ph,body.page-plain .mariana .ph{height:min(360px,58vw);border-radius:200px 200px 18px 18px;
  background:linear-gradient(165deg,#D8D5D0,#A8A49B);display:flex;align-items:flex-end;
  justify-content:center;padding-bottom:26px;color:#fff;font-style:italic}
/* the same arch holding a photograph: the image itself is set inline in the
   template so it picks up the asset version, and a soft scrim keeps the caption
   readable over it. Geometry is untouched, so the arch still measures 360px. */
body.page-home .mariana .ph.photo,body.page-plain .mariana .ph.photo{position:relative;overflow:hidden;
  background-size:cover;background-position:center;text-shadow:0 1px 14px rgba(28,27,25,.5)}
body.page-home .mariana .ph.photo::after,body.page-plain .mariana .ph.photo::after{content:"";position:absolute;
  inset:0;background:linear-gradient(to top,rgba(28,27,25,.62),rgba(28,27,25,.05) 46%,rgba(28,27,25,0) 72%)}
body.page-home .mariana .ph.photo span,body.page-plain .mariana .ph.photo span{position:relative;z-index:1}
body.page-home .mariana .eyebrow,body.page-home .mariana h2.t,
body.page-plain .mariana .eyebrow,body.page-plain .mariana h2.t{text-align:left}
body.page-home .mariana p,body.page-plain .mariana p{color:var(--muted);margin-bottom:18px}
body.page-home .mariana .ig{font-style:italic;color:var(--muted)}
body.page-home .mariana .ig a{color:var(--accent)}

/* ---- shared keepsake blocks (identical in home + practices) -------------- */
.slip{background:var(--card);border:1px solid var(--line);border-radius:18px;max-width:580px;
  margin:0 auto;padding:clamp(30px,4.4vw,56px) clamp(22px,3.95vw,50px);text-align:center;box-shadow:0 24px 70px rgba(35,34,32,.08);
  position:relative;overflow:hidden}
.slip::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,#F2C876,var(--accent),#F2C876)}
.slip .sh{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:24px}
.slip h3{font-size:clamp(24px,2.5vw,32px);font-weight:400;margin-bottom:10px}
.slip p{font-style:italic;color:var(--muted)}
.slip .nm{font-size:clamp(22px,2.3vw,29px);font-style:italic;margin:24px clamp(10px,2.35vw,30px) 6px;padding-bottom:12px;
  border-bottom:1px solid var(--line);min-height:60px}
.slip .foot{display:flex;justify-content:space-between;margin-top:32px;
  font-style:italic;font-size:14px;color:var(--faint)}
.slip-btns{text-align:center;margin-top:32px;display:flex;gap:12px;justify-content:center}
.ghost-btn{background:none;border:1px solid var(--ink);color:var(--ink);padding:12px 32px;
  border-radius:99px;font-family:Georgia,serif;font-style:italic;font-size:16px;cursor:pointer;transition:all .3s}
.ghost-btn:hover{border-color:var(--accent);color:var(--accent)}
.letter-card{background:var(--ink);color:#F2F1EE;border-radius:20px;
  padding:clamp(34px,5vw,64px) clamp(22px,3.13vw,40px);
  text-align:center;max-width:640px;margin:0 auto}
.letter-card .eyebrow{color:var(--accent)}
.letter-card h2{font-size:clamp(26px,2.9vw,36px);font-weight:400;margin-bottom:14px}
.letter-card p{font-style:italic;color:#B9B4AA;max-width:460px;margin:0 auto 34px}
.letter-card .row{display:flex;flex-wrap:wrap;gap:8px;max-width:440px;margin:0 auto;
  background:rgba(255,255,255,.08);border-radius:99px;padding:6px 6px 6px 24px}
.letter-card input{flex:1;background:none;border:none;color:#F2F1EE;font-family:Georgia,serif;
  font-style:italic;font-size:17px;outline:none}
.letter-card input::placeholder{color:#8d8880}
.letter-card button{background:var(--accent);color:#fff;border:none;border-radius:99px;
  padding:13px 30px;font-family:Georgia,serif;font-style:italic;font-size:16px;cursor:pointer}

/* ---- footer: home variant (scoped — never leaks to other pages) --------- */
body.page-home footer{border-top:1px solid var(--line);padding:56px 0 40px}
body.page-home footer .cols{max-width:640px;margin:0 auto;padding:0 30px;display:grid;
  grid-template-columns:1fr 1fr;gap:40px}
body.page-home footer h5{font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
  margin-bottom:16px;font-weight:400}
body.page-home footer a{display:block;font-style:italic;color:var(--muted);text-decoration:none;margin-bottom:8px;font-size:16px}
body.page-home footer a:hover{color:var(--accent)}
body.page-home footer .fine{text-align:center;margin-top:44px;font-style:italic;color:var(--faint);font-size:14px}

/* ---- notes index (09-notes) --------------------------------------------- */
body.page-notes{--accent:#C58B34}
body.page-notes .wrap{max-width:780px}
body.page-notes header{padding:90px 0 30px;text-align:center}
body.page-notes header .over{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
body.page-notes header h1{font-size:clamp(28px,6vw,60px);font-weight:400;margin-bottom:16px;letter-spacing:-.01em}
body.page-notes header p{font-style:italic;color:var(--muted);max-width:560px;margin:0 auto;font-size:19px}
body.page-notes .filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:36px 0 10px}
body.page-notes .filters button{border:1px solid var(--line);background:var(--card);border-radius:99px;
  padding:10px 24px;font-family:Georgia,serif;font-style:italic;font-size:16px;
  color:var(--ink);cursor:pointer;transition:all .3s}
body.page-notes .filters button:hover{border-color:var(--accent);color:var(--accent)}
body.page-notes .filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
body.page-notes .list{padding:30px 0 90px}
body.page-notes .note{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:clamp(22px,2.66vw,34px) clamp(22px,2.85vw,36px);
  margin-bottom:18px;transition:opacity .3s;display:block;grid-template-columns:none;gap:0;align-items:normal}
body.page-notes .note.hide{display:none}
body.page-notes .note .meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
body.page-notes .note .n{font-style:italic;color:var(--accent);font-size:19px}
body.page-notes .note .tag{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
body.page-notes .note h2{font-size:clamp(20px,2vw,25px);font-weight:400;margin-bottom:10px}
body.page-notes .note h2 a{color:var(--ink);text-decoration:none}
body.page-notes .note h2 a:hover{color:var(--accent)}
body.page-notes .note p{color:var(--muted);font-size:17px;margin-bottom:12px;font-style:normal}
body.page-notes .note .read{font-style:italic;color:var(--accent);font-size:16px}
body.page-notes .note .read a{color:var(--accent);text-decoration:none}
body.page-notes footer{border-top:1px solid var(--line);padding:44px;text-align:center;
  font-style:italic;color:var(--faint);font-size:15px}
body.page-notes footer a{color:var(--accent)}

/* ---- practices (10-practices) ------------------------------------------- */
body.page-practices .wrap{max-width:760px}
body.page-practices header{padding:90px 0 20px;text-align:center}
body.page-practices header .over{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
body.page-practices header h1{font-size:clamp(28px,6vw,60px);font-weight:400;margin-bottom:16px;letter-spacing:-.01em}
body.page-practices header p{font-style:italic;color:var(--muted);max-width:580px;margin:0 auto;font-size:19px}
body.page-practices .toc{max-width:640px;margin:44px auto 0;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
body.page-practices .toc a{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:10px 22px;
  font-style:italic;font-size:15px;color:var(--ink);text-decoration:none}
body.page-practices .toc a:hover{border-color:var(--accent);color:var(--accent)}
body.page-practices section{padding:80px 0;border-bottom:1px solid var(--line)}
body.page-practices section:last-of-type{border-bottom:none}
body.page-practices .p-no{text-align:center;font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px}
body.page-practices h2.pt{font-size:clamp(23px,4vw,40px);font-weight:400;text-align:center;margin-bottom:12px}
body.page-practices .plede{text-align:center;font-style:italic;color:var(--muted);max-width:560px;margin:0 auto 40px}
body.page-practices .how{max-width:560px;margin:0 auto 36px;color:var(--muted)}
body.page-practices .how li{margin-bottom:12px;list-style:none;padding-left:28px;position:relative}
body.page-practices .how li::before{content:"—";position:absolute;left:0;color:var(--accent)}
body.page-practices .timerbox{background:var(--tint);border:1px solid var(--line);border-radius:16px;max-width:440px;
  margin:0 auto;padding:clamp(30px,3.75vw,48px) clamp(22px,2.85vw,36px);text-align:center}
body.page-practices .timerbox .td{font-size:clamp(44px,5vw,64px);font-variant-numeric:tabular-nums;margin-bottom:6px}
body.page-practices .timerbox .tlbl{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint);margin-bottom:26px}
body.page-practices .timerbox button{background:var(--ink);color:#fff;border:none;padding:14px 44px;border-radius:99px;
  font-family:Georgia,serif;font-style:italic;font-size:17px;cursor:pointer;transition:all .3s}
body.page-practices .timerbox button:hover:not(:disabled){background:var(--accent)}
body.page-practices .timerbox button:disabled{opacity:.4}
body.page-practices .timerbox .vv{font-style:italic;color:var(--accent);margin-top:20px;min-height:28px}
body.page-practices .orb{width:min(180px,50vw);height:min(180px,50vw);border-radius:50%;margin:0 auto 24px;position:relative;
  background:radial-gradient(circle at 35% 35%,#F0E4D4,var(--accent));
  box-shadow:0 20px 60px rgba(169,96,58,.16);transition:transform 1s ease-in-out}
body.page-practices .orb::after{content:"";position:absolute;inset:16px;border-radius:50%;border:1px solid rgba(169,96,58,.35)}
body.page-practices .orb .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:38px;font-variant-numeric:tabular-nums}
body.page-practices .check{max-width:520px;margin:0 auto;background:var(--tint);border:1px solid var(--line);
  border-radius:16px;padding:clamp(26px,3.13vw,40px) clamp(22px,3vw,38px)}
body.page-practices .check label{display:flex;gap:16px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid var(--line);cursor:pointer;font-size:17px;color:var(--muted)}
body.page-practices .check label:last-child{border-bottom:none}
body.page-practices .check input{width:20px;height:20px;margin-top:6px;accent-color:var(--accent);flex:0 0 20px}
body.page-practices .check input:checked + span{text-decoration:line-through;color:var(--faint)}
body.page-practices .page{font-style:italic;text-align:center;color:var(--faint);font-size:15px;margin-top:30px}
body.page-practices footer{padding:44px;text-align:center;font-style:italic;color:var(--faint);font-size:15px;
  border-top:none}
body.page-practices footer a{color:var(--accent)}

/* ---- footer + wrappers for the NEW pages (plain, matches notes/practices) */
body.page-plain footer,body.page-post footer{border-top:1px solid var(--line);padding:44px;text-align:center;
  font-style:italic;color:var(--faint);font-size:15px}
body.page-plain footer a,body.page-post footer a{color:var(--accent)}
body.page-plain .wrap{max-width:760px}

/* ---- responsive behaviour -------------------------------------------------
   The design switched layout at fixed 900px/640px breakpoints, which left phones
   with a menu that had vanished and a headline at 44px. Nothing here needs a
   breakpoint any more: the grids reflow with auto-fit, the two-column blocks wrap
   with flex, the type and padding scale with clamp(), and the nav wraps its menu
   onto a second row rather than hiding it. Desktop rendering is unchanged. */
@media(max-width:480px){
  /* a phone header: smaller mark, tighter rows. The price drops off the book
     button here so the vase and the menu stay on one line instead of the menu
     wrapping onto a row of its own. */
  nav .bar{padding:12px min(16px,4.5vw);row-gap:6px;column-gap:16px}
  nav .mark img{height:32px}
  nav .links{gap:clamp(12px,3vw,18px)}
  nav .links a{font-size:15px}
  nav .links a.book{padding:9px 16px}
  nav .links a.book .price{display:none}
}
@media(max-width:360px){
  /* the narrowest phones (360px and under): shave the gaps a little further so
     Notes, Practices, About and the book still share the one row. */
  nav .bar{column-gap:12px}
  nav .mark img{height:28px}
  nav .links{gap:10px}
  nav .links a{font-size:14px}
  nav .links a.book{padding:8px 14px}
}

/* ==========================================================================
   NEW: single note / essay page. Built only from existing tokens and idioms
   (serif, italic, --accent gold, --line rules, pill buttons) so it reads as
   part of the same book. No new colours or fonts.
   ========================================================================== */
body.page-post header{padding:88px 0 8px;text-align:center}
body.page-post header .over{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
body.page-post header h1{font-size:clamp(34px,5.4vw,54px);font-weight:400;margin-bottom:18px;letter-spacing:-.01em;line-height:1.2}
body.page-post header .byline{font-style:italic;color:var(--faint);font-size:16px}
.post{padding:44px 0 20px}
.post p{color:#3A3833;margin-bottom:24px}  /* every paragraph the same size and colour */
.post h2{font-size:28px;font-weight:400;margin:44px 0 14px;letter-spacing:-.01em}
.post h3{font-size:23px;font-weight:400;margin:34px 0 12px}
.post em{font-style:italic}
.post strong{font-weight:700}
.post a{color:var(--accent)}
.post blockquote{font-size:clamp(22px,3vw,28px);font-style:italic;line-height:1.5;
  margin:34px 0;padding-left:22px;border-left:2px solid var(--accent);color:var(--ink)}
.post blockquote p{margin-bottom:0;color:inherit}
.post hr{border:none;border-top:1px solid var(--line);margin:44px 0}
.post ul,.post ol{margin:0 0 24px 26px;color:#3A3833}
.post li{margin-bottom:10px}
.post img{max-width:100%;border-radius:14px}
.post .postfoot{margin:56px 0 0;padding-top:26px;border-top:1px solid var(--line);
  font-style:italic;color:var(--faint);font-size:15px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.post .postfoot a{color:var(--accent);text-decoration:none}
.postwrap{padding-bottom:70px}
.postnav{text-align:center;padding:0 0 90px}
.postnav .pnrow{display:flex;justify-content:space-between;align-items:baseline;
  max-width:520px;margin:0 auto;gap:24px}
.postnav a{font-style:italic;color:var(--accent);text-decoration:none}
.postnav a:hover{color:var(--ink)}
/* at the first or last note the missing side keeps its place, greyed, so the
   pair stays aligned instead of one link sliding to the middle */
.postnav .off{font-style:italic;color:var(--faint);opacity:.45}
.postnav .pnall{margin-top:26px;font-size:15px}
.postnav .pnall a{color:var(--muted);font-style:italic}

/* NEW: inline subscribe card used under a note (same ids as the home card) */
.sharecard{margin:60px 0 0}

/* NEW: honeypot field for the subscribe form (bots fill it, humans never see it) */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* NEW: small form states (subscribe / admin) */
.formnote{font-style:italic;font-size:15px;margin-top:16px;min-height:22px}
.formnote.ok{color:#5C7A4A}
.formnote.err{color:#A9603A}
.letter-card .formnote{color:#C9C4BA}
.letter-card .formnote.ok{color:#BFD3AE}
.letter-card .formnote.err{color:#F0B79B}

/* ==========================================================================
   NEW: author admin. Deliberately plain — same palette, no marketing chrome.
   ========================================================================== */
.admin{max-width:860px;margin:0 auto;padding:40px 30px 90px}
.admin h1{font-size:34px;font-weight:400;margin-bottom:6px}
.admin .sub{font-style:italic;color:var(--muted);margin-bottom:34px}
.admin .bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.admin .bar .grow{flex:1}
.admin a.pill,.admin button.pill{display:inline-block;border:1px solid var(--line);background:var(--card);
  border-radius:99px;padding:9px 22px;font-family:Georgia,serif;font-style:italic;font-size:15px;
  color:var(--ink);text-decoration:none;cursor:pointer;transition:all .3s}
.admin a.pill:hover,.admin button.pill:hover{border-color:var(--accent);color:var(--accent)}
.admin button.pill.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.admin button.pill.primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.admin button.pill.danger:hover{border-color:#A9603A;color:#A9603A}
.admin table{width:100%;border-collapse:collapse;font-size:16px}
.admin th{text-align:left;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
  font-weight:400;padding:10px 12px;border-bottom:1px solid var(--line)}
.admin td{padding:14px 12px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.admin td.t{color:var(--ink)}
.admin td a{color:var(--accent);text-decoration:none}
.admin .badge{font-size:11px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--line);
  border-radius:99px;padding:4px 12px;color:var(--faint);white-space:nowrap}
.admin .badge.pub{color:#5C7A4A;border-color:#CBD9C0}
.admin .badge.draft{color:#A9603A;border-color:#E8D3C6}
.admin .badge.pending{color:#A9843A;border-color:#EBDCBB}
.admin .badge.unsub{border-color:var(--line)}
.admin .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px 32px;margin-bottom:22px}
.admin .card h2{font-size:22px;font-weight:400;margin-bottom:14px}
.admin label.fl{display:block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);margin:18px 0 8px}
.admin input[type=text],.admin input[type=email],.admin input[type=password],.admin input[type=number],
.admin select,.admin textarea{width:100%;font-family:Georgia,serif;font-size:17px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 16px;outline:none}
.admin textarea{min-height:420px;line-height:1.7;resize:vertical}
.admin .two{display:flex;flex-wrap:wrap;gap:20px}
.admin .two > *{flex:1 1 220px}
.admin .hint{font-style:italic;color:var(--faint);font-size:14px;margin-top:8px}
.admin .stats{display:grid;gap:16px;margin-bottom:28px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.admin .stat{background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.admin .stat .k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.admin .stat .v{font-size:30px;font-variant-numeric:tabular-nums}
.admin .flash{background:var(--tint);border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:12px;padding:16px 22px;font-style:italic;color:var(--muted);margin-bottom:24px}
.login{max-width:420px;margin:9vh auto 0;padding:0 30px 90px}
.login .card{background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 70px rgba(35,34,32,.08)}
.login h1{font-size:30px;font-weight:400;text-align:center;margin-bottom:6px}
.login .sub{text-align:center;font-style:italic;color:var(--muted);font-size:16px;margin-bottom:18px}
.login button{width:100%;margin-top:24px;background:var(--ink);color:#fff;border:none;border-radius:99px;
  padding:14px 30px;font-family:Georgia,serif;font-style:italic;font-size:17px;cursor:pointer;transition:all .3s}
.login button:hover{background:var(--accent)}
.login .formnote{text-align:center}
.editor-grid{display:grid;gap:22px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.editor-grid textarea{min-height:520px}
.preview-pane{background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:22px 26px;
  max-height:620px;overflow:auto}
.preview-pane .k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.preview-body{font-size:17px;line-height:1.8;color:#3A3833}
.preview-body p{margin-bottom:18px}
.preview-body h2{font-size:23px;font-weight:400;margin:26px 0 12px}
.preview-body h3{font-size:20px;font-weight:400;margin:22px 0 10px}
.preview-body blockquote{margin:24px 0;padding-left:18px;border-left:2px solid var(--accent);font-style:italic}
.preview-body a{color:var(--accent)}
.preview-body hr{border:none;border-top:1px solid var(--line);margin:26px 0}
.admin code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;background:var(--tint);
  border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.admin .keybox{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;background:var(--tint);
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;word-break:break-all;margin:14px 0}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.login .card{padding:clamp(30px,4vw,46px) clamp(24px,3.7vw,42px)}

/* ==========================================================================
   NEW: print. Without print-color-adjust the browser drops every background —
   the gold accents, the tinted sections, the dark letter card and the slip's
   gold rule all disappear from a PDF. This keeps the page looking like the site
   on paper, whichever way the reader prints it.
   ========================================================================== */
@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important}
  html,body{background:#fff}
  nav{position:static;background:none;backdrop-filter:none;border-bottom:1px solid var(--line)}
  nav .bar{padding:0 0 14px}
  .hero{min-height:auto;padding:26px 0 10px;background:radial-gradient(ellipse 85% 65% at 50% 112%,#F1F0ED 0%,rgba(241,240,237,0) 62%)}
  .scroll-hint{display:none}
  section{padding:30px 0}
  body.page-practices section{padding:26px 0}
  /* nothing interactive belongs on paper */
  body.page-notes .filters{display:none}
  body.page-practices .timerbox button{display:none}
  body.page-practices .timerbox .vv{display:none}
  .slip-btns{display:none}
  .sharecard{display:none}
  /* keep each card, slip and practice on one page where it fits */
  .note,.pcard,.slip,.letter-card,.check,.timerbox,.mariana,.booksec,.post blockquote{
    break-inside:avoid;page-break-inside:avoid}
  .slip,.letter-card{box-shadow:none}
  .letter-card{background:var(--ink);color:#F2F1EE}
  a{text-decoration:none}
  footer{border-top:1px solid var(--line)}
  /* show where a link goes, but only when it leaves the site */
  .post a[href^="http"]::after{content:" (" attr(href) ")";font-size:13px;color:var(--faint)}
}