/* Pre-launch site: the coming-soon page and the Journal.
   Sits on top of style.css (copied from moonroe-home), so the colours, type,
   nav and footer are the shop's own. */

/* Buttons in a pair share type, height and width, as on the shop's home page;
   only the colour says which is which. */
.btn.dark,.btn.ghost{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;padding:1rem 1.6rem;
  justify-content:center}
.btn.dark{background:var(--night);color:var(--cream)}
.btn.dark:hover{background:#2C3A54;box-shadow:0 12px 32px rgba(27,36,54,.28)}
.btnrow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.7rem;width:max-content;max-width:100%;
  margin-top:1.8rem}
@media (max-width:480px){.btnrow{grid-auto-flow:row;width:100%}}
h1 em,h2 em{font-style:italic;font-weight:400}
.pl-links{align-items:center}
.pl-links a{font-size:1rem}
@media (max-width:560px){.nav.pl{flex-direction:row;align-items:center}.pl-links{gap:.7rem}}

/* ---------- social icons ----------
   One line drawing for all three, on the search icon's grid and stroke. */
.soc{display:inline-flex;gap:.15rem}
.soc-i{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--ink);
  transition:background .25s var(--ease-soft),color .25s var(--ease-soft)}
.soc-i:hover{background:var(--jay-soft);color:var(--jay-deep)}
.soc-i svg,.fico svg,.fs svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.soc-i svg{width:22px;height:22px}
.soc-i svg .dot,.fico svg .dot,.fs svg .dot{fill:currentColor;stroke:none}
/* On a phone the icons crowded "Journal" against the wordmark until they read
   as one phrase. The Follow section and the footer carry them there instead. */
@media (max-width:560px){.pl-links .soc{display:none}}
.fs{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.fs:hover{text-decoration:underline}
.fs svg{width:20px;height:20px}

/* ---------- coming soon ---------- */
.soon{padding-top:clamp(1.4rem,3.5vh,2.6rem);padding-bottom:clamp(2.4rem,6vh,4rem)}
.soon-grid{display:grid;gap:clamp(1.8rem,5vw,4.5rem);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.soon-grid{grid-template-columns:1.05fr .95fr}}
/* The launch date is the one piece of news on the page, so the date itself is
   set large, in ink, with the word "Launching" as its small gold label. The
   date is in the numeral face: Playfair's old-style 2 would sit low. */
.launch{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.8rem;
  margin:0;padding:.65rem 1.35rem .65rem 1.1rem;border-radius:999px;
  background:linear-gradient(100deg,#FCF3DC,var(--lemon-soft) 45%,#F8E7BC);border:1px solid var(--lemon)}
.launch::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--lemon);flex:none;
  position:relative;z-index:1}
.launch span,.launch b,.launch i{position:relative;z-index:1}
/* the <time> wraps date and hour for search engines; it adds no box of its own */
.launch time{display:contents}
.launch i{font-style:normal;font-family:var(--num);font-size:.85rem;font-weight:500;letter-spacing:.04em;
  color:var(--lemon-ink);white-space:nowrap;padding-left:.8rem;border-left:1px solid rgba(148,106,17,.3)}
.launch span{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--lemon-ink)}
.launch b{font-family:var(--num);font-variant-numeric:lining-nums;font-weight:500;color:var(--ink);
  font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.1;letter-spacing:.005em}

/* ---- the badge, in motion ----
   Calm rather than flashy, like light moving across gold leaf:
   1. it arrives once: the badge fades up, then the date settles out of a blur;
   2. the gold glow around it breathes, slowly;
   3. every few seconds a band of light crosses it, and the date glints gold as
      the light passes over it (same timing, so they read as one light);
   4. the dot sends out a soft ripple, the way a "live" light does.
   Anyone who has asked their phone for less motion gets it still, with the
   glow held at its brightest. */
.launch{animation:launch-in .8s var(--ease) both,launch-glow 3.6s ease-in-out 1.2s infinite}
.launch span{animation:launch-fade .7s var(--ease-soft) .25s both}
.launch i{animation:launch-fade .7s var(--ease-soft) .6s both}
.launch::before{animation:launch-fade .5s var(--ease-soft) .15s both,launch-dot 2.4s ease-out 1.2s infinite}
.launch b{background:linear-gradient(100deg,var(--ink) 0 38%,#C8901C 48%,#E8B33C 50%,#C8901C 52%,var(--ink) 62% 100%);
  background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:launch-date .9s var(--ease) .35s both,launch-glint 5.2s linear 1.6s infinite}
.launch::after{content:"";position:absolute;inset:-1px;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.85) 47%,rgba(255,255,255,0) 64%);
  transform:translateX(-110%);animation:launch-sheen 5.2s ease-in-out 1.6s infinite}

@keyframes launch-in{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes launch-fade{from{opacity:0}to{opacity:1}}
@keyframes launch-date{from{opacity:0;filter:blur(6px);letter-spacing:.14em}to{opacity:1;filter:blur(0);letter-spacing:.005em}}
@keyframes launch-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(232,179,60,0),0 6px 18px rgba(232,179,60,.16)}
  50%{box-shadow:0 0 0 6px rgba(232,179,60,.12),0 10px 32px rgba(232,179,60,.38)}}
@keyframes launch-dot{
  0%{box-shadow:0 0 0 0 rgba(232,179,60,.65)}
  70%,100%{box-shadow:0 0 0 11px rgba(232,179,60,0)}}
/* the sweep takes the first ~40% of each cycle; the rest is a pause */
@keyframes launch-sheen{0%{transform:translateX(-110%)}40%,100%{transform:translateX(110%)}}
/* the date only glints while the band of light is actually over it, which is
   roughly 17.5-24.3% of the cycle (measured by freezing the animation in the
   browser: the two stay within a few pixels of each other) */
@keyframes launch-glint{0%,17.5%{background-position:100% 0}24.3%,100%{background-position:0 0}}

/* On a phone the badge is two rows, "Launching" over the date and time, so it
   never wraps the date or runs off a 360px screen. The date then sits at the
   left of the badge, so the light reaches it sooner: its own glint timing. */
@media (max-width:480px){
  .launch{flex-wrap:wrap;row-gap:.3rem;column-gap:.7rem;border-radius:20px;padding:.75rem 1.15rem .8rem}
  .launch span{flex:1 0 calc(100% - 10px - .7rem)}
  .launch b{white-space:nowrap;animation-name:launch-date,launch-glint-sm}
}
@keyframes launch-glint-sm{0%,14.4%{background-position:100% 0}21.9%,100%{background-position:0 0}}

@media (prefers-reduced-motion:reduce){
  .launch,.launch span,.launch i,.launch::before,.launch b,.launch::after{animation:none!important}
  .launch{box-shadow:0 0 0 6px rgba(232,179,60,.12),0 10px 32px rgba(232,179,60,.38)}
  .launch b{-webkit-text-fill-color:var(--ink);background:none}
  .launch::after{display:none}
}
.soon h1{font-size:clamp(2.7rem,6.4vw,5rem);max-width:11ch;margin-top:1.3rem}
.soon .lede{max-width:36ch;color:var(--ink-soft)}

/* ---------- follow along ---------- */
.fgrid{display:grid;gap:clamp(1rem,2.2vw,1.6rem);grid-template-columns:1fr;margin-top:1.6rem}
@media (min-width:760px){.fgrid{grid-template-columns:repeat(3,1fr)}}
.fcard{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;padding:1.5rem 1.5rem 1.6rem;
  background:var(--paper);border:1px solid rgba(36,52,75,.1);border-radius:16px;text-decoration:none;color:inherit;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.fcard:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(36,52,75,.12)}
.fico{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--jay-soft);color:var(--jay-deep);margin-bottom:.6rem}
.fico svg{width:25px;height:25px}
.fcard h3{font-size:1.45rem}
.fcard .handle{font-size:.86rem;color:var(--jay-ink);font-family:var(--num)}
.fcard .desc{color:var(--ink-soft);font-size:.95rem;margin:.35rem 0 1.2rem}
.fcard .btn{margin-top:auto;width:100%}
.fcard:hover .btn.ghost{background:var(--night);border-color:var(--night);color:var(--cream)}
/* on a phone each card is a row: icon beside the name, words and button under */
@media (max-width:759px){
  .fcard{display:grid;grid-template-columns:50px 1fr;column-gap:1rem;row-gap:0;align-items:center;padding:1.2rem}
  .fcard .fico{grid-row:span 2;margin:0}
  .fcard .desc{grid-column:1 / -1;margin:.8rem 0 .9rem}
  .fcard .btn{grid-column:1 / -1}
}
.soon-pic{margin:0;border-radius:16px;overflow:hidden;background:var(--greige);aspect-ratio:4/5}
@media (min-width:900px){.soon-pic{aspect-ratio:auto;height:min(74svh,660px)}}
.soon-pic img{width:100%;height:100%;object-fit:cover;object-position:68% 62%}

.headrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.6rem 2rem;
  padding-bottom:1rem;border-bottom:1px solid rgba(36,52,75,.13)}
.headrow h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.headrow .kicker{margin-bottom:.5rem}
.headrow a{color:var(--jay-ink);font-size:1.05rem}
.tight{padding-top:clamp(2.6rem,6vh,4.2rem);padding-bottom:clamp(2.6rem,6vh,4.2rem)}

/* ---------- journal cards ---------- */
.jgrid{display:grid;gap:clamp(1.2rem,2.6vw,2rem);grid-template-columns:repeat(2,1fr);margin-top:1.6rem}
@media (min-width:900px){.jgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:460px){.jgrid{grid-template-columns:1fr}}
.jcard{display:block;text-decoration:none;color:inherit}
.jcard[hidden]{display:none}
.jcard .pic{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:var(--greige);
  border:1px solid rgba(36,52,75,.08)}
.jcard .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.jcard:hover .pic img{transform:scale(1.04)}
.jcard .when{margin-top:.95rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--lemon-ink);font-family:var(--num)}
.jcard h3{font-size:1.3rem;margin-top:.35rem}
.jcard p{font-size:.92rem;color:var(--ink-soft);margin-top:.3rem}
.jcard .go{display:inline-block;margin-top:.6rem;font-size:.86rem;color:var(--jay-ink)}
/* not out yet: on the page, but not a door */
.jcard.later{pointer-events:none;cursor:default}
.jcard.later .pic img{opacity:.62}
.jcard.later .when{color:var(--ink-faint)}
.jcard.later .go{display:none}
.jcard .flag{position:absolute;right:.7rem;top:.7rem;z-index:2;padding:.3rem .65rem;border-radius:999px;
  background:var(--night);color:#fff;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}

/* ---------- journal index ---------- */
.jhead{padding-top:clamp(1.8rem,4vh,3rem);padding-bottom:0}
.jhead h1{font-size:clamp(2.4rem,5.4vw,4rem)}
.jhead .lede{max-width:46ch}
.series{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.4rem;margin-top:clamp(2rem,5vh,3rem);
  padding-bottom:.9rem;border-bottom:1px solid rgba(36,52,75,.13)}
.series h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.series span{font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lemon-ink);font-weight:500}
.series p{flex:1 1 20rem;color:var(--ink-soft);font-size:.95rem}

/* ---------- article ---------- */
.art{padding:clamp(1.6rem,4vh,2.8rem) var(--pad) clamp(2.6rem,6vh,4rem)}
.art-head{max-width:60rem;margin:0 auto}
.art-head .kicker{margin-bottom:.8rem}
.art h1{font-size:clamp(2.2rem,5vw,3.6rem);max-width:18ch}
.art-meta{margin-top:.9rem;font-size:.86rem;color:var(--ink-faint);font-family:var(--num)}
.art-dek{margin-top:1.4rem;font-family:var(--display);font-size:clamp(1.25rem,2.2vw,1.6rem);
  line-height:1.4;color:var(--ink);max-width:36ch}
.art-body{max-width:60rem;margin:clamp(1.8rem,4.5vh,3rem) auto 0}
.art-sec{display:grid;gap:1.4rem clamp(2rem,5vw,3.8rem);grid-template-columns:1fr;align-items:center;
  padding:clamp(1.6rem,4vh,2.4rem) 0;border-top:1px solid rgba(36,52,75,.12)}
@media (min-width:820px){
  .art-sec{grid-template-columns:1fr 330px}
  .art-sec:nth-child(even) .art-fig{order:-1}
  .art-sec:nth-child(even){grid-template-columns:330px 1fr}
}
.art-sec h2{font-size:clamp(1.45rem,2.6vw,1.95rem);margin-bottom:.7rem}
.art-sec p{color:var(--ink-soft);max-width:52ch}
.art-sec p + p{margin-top:.8rem}
.art-fig{margin:0;width:100%;max-width:330px;justify-self:center;border-radius:12px;overflow:hidden;
  box-shadow:0 12px 34px rgba(36,52,75,.12);border:1px solid rgba(36,52,75,.06)}
.art-fig img{width:100%;height:auto}
.art-try{margin-top:clamp(1.6rem,4vh,2.4rem);padding:1.3rem 1.5rem;border-radius:14px;
  background:var(--jay-soft);border:1px solid rgba(62,107,163,.18)}
.art-try .kicker{color:var(--jay-ink);margin-bottom:.5rem}
.art-try p{color:var(--ink-soft);max-width:60ch}
.art-sum{margin-top:clamp(1.6rem,4vh,2.4rem);padding:1.5rem 1.6rem;border-radius:14px;
  background:var(--lemon-soft);border:1px solid rgba(232,179,60,.45)}
.art-sum .kicker{margin-bottom:.5rem}
.art-sum p.sum{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.35;color:var(--ink)}
.art-sum p.sum-save{margin-top:.6rem;font-size:.9rem;color:var(--ink-soft)}
.art-next{margin-top:clamp(2rem,5vh,3rem);padding-top:1.4rem;border-top:1px solid rgba(36,52,75,.12);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem}
.art-next .lab{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
.art-next a.nx{display:block;text-decoration:none;color:inherit;margin-top:.3rem}
.art-next a.nx b{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--jay-deep)}
.art-next a.nx.later{pointer-events:none}
.art-next a.nx.later b{color:var(--ink-faint)}
.art-next .back{color:var(--jay-ink);font-size:.92rem}

/* an article opened before its day */
.art-wait{max-width:40rem;margin:clamp(2rem,6vh,4rem) auto;text-align:center}
.art-wait h1{margin:0 auto}
.art-wait p{margin-top:1rem;color:var(--ink-soft)}
.art-wait .btn{margin-top:1.6rem}

/* scheduled-post badge, shown only on localhost so drafts can be reviewed */
.draftnote{background:var(--night);color:#fff;text-align:center;font-size:.8rem;padding:.55rem 1rem}
.draftnote b{color:var(--lemon);font-weight:500}

footer .social a{margin-right:1rem}

/* ---------- long article ----------
   On a laptop it uses the screen: the title and the video share the first view,
   the contents list stays beside the text, and each picture sits next to the
   words it explains. On a phone everything stacks into one column. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.art.long .wrap{max-width:82rem}
.art.long .art-head{max-width:none;margin:0}
.art.long h1{max-width:none;font-size:clamp(2.1rem,4.2vw,3.4rem)}
.art.long h1 em{display:block;margin-top:.3rem;font-size:.66em;color:var(--jay-deep)}
.art.long .art-dek{max-width:none;margin-top:1.1rem;font-size:clamp(1.15rem,1.7vw,1.4rem)}
.art-hero{display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
@media (min-width:980px){.art-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.answer{margin-top:1.4rem;padding:1.2rem 1.4rem;border-radius:14px;background:var(--jay-soft);border:1px solid rgba(62,107,163,.18)}
.answer .kicker{color:var(--jay-ink);margin-bottom:.45rem}
.answer p{color:var(--ink);font-size:.97rem}
.answer b{font-weight:500}

/* the video: a still with a play button until it's tapped (journal.js) */
.vid{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--night);
  box-shadow:0 14px 40px rgba(36,52,75,.16)}
.vid img,.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.vplay{position:absolute;inset:0;display:grid;place-items:center}
.vplay span{width:clamp(58px,9vw,78px);aspect-ratio:1;border-radius:50%;background:rgba(27,36,54,.84);
  display:grid;place-items:center;transition:transform .4s var(--ease),background .3s var(--ease-soft)}
.vplay span::before{content:"";margin-left:12%;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
.vplay:hover span,.vplay:focus-visible span{transform:scale(1.08);background:var(--jay-deep)}
.vlen{position:absolute;right:.7rem;bottom:.7rem;padding:.15rem .5rem;border-radius:6px;background:rgba(27,36,54,.84);
  color:#fff;font-family:var(--num);font-size:.78rem}
.vid.on .vplay,.vid.on .vlen{display:none}
.vcap{margin-top:.8rem;font-size:.9rem;color:var(--ink-soft)}
.chaps{display:flex;flex-wrap:wrap;gap:.45rem;margin:.7rem 0 0;padding:0;list-style:none}
.chaps a{display:inline-flex;align-items:baseline;gap:.45rem;padding:.4rem .8rem;border-radius:999px;background:var(--paper);
  border:1px solid rgba(36,52,75,.14);font-size:.85rem;text-decoration:none;color:var(--ink);
  transition:border-color .3s var(--ease-soft),color .3s var(--ease-soft)}
.chaps a b{font-family:var(--num);font-weight:500;color:var(--jay-ink)}
.chaps a:hover{border-color:var(--jay);color:var(--jay-deep)}
@media (pointer:coarse){.chaps a{min-height:40px;align-items:center}}
.transcript{margin-top:.9rem;font-size:.92rem}
.transcript summary{cursor:pointer;color:var(--jay-ink);width:max-content;max-width:100%}
.transcript p{color:var(--ink-soft);margin-top:.8rem}

/* contents beside the text on a laptop, a box above it on a phone */
.art-grid{display:grid;gap:2rem;margin-top:clamp(2.2rem,5vh,3.4rem)}
.toc{padding:1.1rem 1.4rem 1.2rem;border-radius:14px;background:var(--paper);border:1px solid rgba(36,52,75,.1)}
.toc .kicker{margin-bottom:.4rem}
.toc ol{margin:0;padding-left:1.3rem;columns:2 12rem;column-gap:2rem}
.toc li{font-size:.93rem;margin:.25rem 0;break-inside:avoid;color:var(--ink-faint);font-family:var(--num)}
.toc a{color:var(--jay-ink);text-decoration:none;font-family:var(--body)}
.toc a:hover{text-decoration:underline}
@media (min-width:980px){
  .art-grid{grid-template-columns:13.5rem minmax(0,1fr);gap:clamp(2.4rem,4vw,4rem)}
  .toc{position:sticky;top:1.4rem;align-self:start;padding:1.6rem 0 0;background:none;border:0;border-radius:0;
    border-top:1px solid rgba(36,52,75,.12)}
  .toc ol{columns:auto;padding-left:1.2rem}
  .toc li{margin:.45rem 0}
}

.prose h2{font-size:clamp(1.55rem,2.6vw,2.05rem);margin-top:clamp(2.4rem,5vh,3.2rem);padding-top:clamp(1.4rem,3vh,1.8rem);
  border-top:1px solid rgba(36,52,75,.12);scroll-margin-top:1rem}
.prose > h2:first-child{margin-top:0}
.prose h3{font-family:var(--body);font-weight:500;font-size:1.08rem;line-height:1.4;letter-spacing:0;color:var(--ink)}
.prose p{color:var(--ink-soft)}
.prose h2 + p,.prose p + p,.prose p + .tbl,.prose ul + p,.prose ol + p{margin-top:.85rem}
.prose ul,.prose ol{margin:.9rem 0 0;padding-left:1.25rem}
.prose li{color:var(--ink-soft);margin-top:.45rem}
.prose b{color:var(--ink);font-weight:500}
.prose a{color:var(--jay-ink)}
.fig{margin:0}
.fig img{width:100%;height:auto;border-radius:12px;border:1px solid rgba(36,52,75,.08);background:var(--greige)}
.fig figcaption{margin-top:.5rem;font-size:.84rem;line-height:1.5;color:var(--ink-faint)}
/* two photos side by side at one height: columns in the ratio of their widths */
.pair{display:grid;grid-template-columns:.75fr 1.8fr;gap:.6rem}
.pair img{height:100%;object-fit:cover}

/* words and their picture side by side */
.duo{display:grid;gap:1.2rem clamp(1.8rem,3.5vw,3rem);align-items:center;margin-top:1rem}
.duo + .duo{margin-top:clamp(1.6rem,4vh,2.2rem)}
.duo > div > :first-child,.duo > ol:first-child{margin-top:0}
@media (min-width:760px){
  .duo{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .duo.flip > :first-child{order:2}
}
/* the four steps of how a pill forms, in a grid */
.cards{display:grid;gap:1.8rem clamp(1.6rem,3vw,2.6rem);margin-top:1.3rem}
@media (min-width:760px){.cards{grid-template-columns:1fr 1fr}}
/* each step a white card: picture edge to edge, words padded inside */
.scard{background:var(--paper);border-radius:16px;overflow:hidden;border:1px solid rgba(36,52,75,.08);
  box-shadow:0 10px 30px rgba(36,52,75,.06)}
.scard .fig img{border:0;border-radius:0}
.scard h3{display:flex;gap:.6rem;align-items:baseline;margin:1rem 1.3rem 0}
.scard h3 span{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--jay-deep);color:#fff;
  font:500 .8rem/1.6rem var(--num);text-align:center;transform:translateY(-.1rem)}
.scard p{margin:.4rem 1.3rem 1.3rem;font-size:.96rem}
.cols2{display:grid;gap:0 clamp(2rem,4vw,3.4rem)}
@media (min-width:900px){.cols2{grid-template-columns:1fr 1fr}}

.tbl{margin-top:1.1rem;overflow-x:auto;border-radius:12px;border:1px solid rgba(36,52,75,.12);background:var(--paper)}
.cmp{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.45}
.cmp th,.cmp td{padding:.6rem .8rem;text-align:left;vertical-align:top;border-bottom:1px solid rgba(36,52,75,.08)}
.cmp thead th{font-weight:500;color:var(--ink);background:var(--jay-soft)}
.cmp tbody th{font-weight:500;color:var(--ink)}
.cmp td{color:var(--ink-soft)}
.cmp tbody tr:last-child > *{border-bottom:0}

.prose ol.steps{list-style:none;padding:0;counter-reset:step}
.prose .steps > li{counter-increment:step;position:relative;padding-left:2.5rem;margin-top:.8rem}
.steps > li::before{content:counter(step);position:absolute;left:0;top:.12rem;width:1.65rem;height:1.65rem;border-radius:50%;
  background:var(--jay-deep);color:#fff;font:500 .82rem/1.65rem var(--num);text-align:center}
.prose ul.check{list-style:none;padding:0}
.prose .check > li{position:relative;padding-left:2.1rem;margin-top:.7rem}
.check > li::before{content:"";position:absolute;left:0;top:.28rem;width:1.15rem;height:1.15rem;border-radius:4px;
  border:1.5px solid var(--jay)}
.prose p.note{margin-top:1.4rem;padding:1rem 1.2rem;border-radius:12px;background:var(--lemon-soft);
  border-left:3px solid var(--lemon);color:var(--ink)}
.prose p.keep{margin-top:.9rem;font-size:.9rem;color:var(--ink-faint)}

.faq{margin-top:1rem;border-top:1px solid rgba(36,52,75,.12)}
.faq details{border-bottom:1px solid rgba(36,52,75,.12)}
.faq summary{cursor:pointer;list-style:none;position:relative;padding:.85rem 2.2rem .85rem 0;
  font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.15rem);line-height:1.35;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.7rem;font:300 1.6rem/1 var(--body);color:var(--jay-ink);
  transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 1rem}

/* the summary and the share buttons, side by side on a laptop */
.wrapup{display:grid;gap:1.6rem clamp(2rem,4vw,3.4rem);align-items:center;margin-top:clamp(2.4rem,5vh,3.2rem)}
@media (min-width:900px){.wrapup{grid-template-columns:1.25fr 1fr}}
.wrapup .art-sum{margin:0}
.share{display:flex;flex-wrap:wrap;gap:.5rem}
.share p{flex:1 1 100%;font-size:.92rem;margin-bottom:.2rem}
.share a,.share button{display:inline-flex;align-items:center;padding:.5rem 1rem;border-radius:999px;background:var(--paper);
  border:1px solid rgba(36,52,75,.18);color:var(--ink);font:inherit;font-size:.86rem;text-decoration:none;cursor:pointer;
  transition:border-color .3s var(--ease-soft),color .3s var(--ease-soft)}
.share a:hover,.share button:hover{border-color:var(--jay);color:var(--jay-deep)}
@media (pointer:coarse){.share a,.share button{min-height:44px}}

.art-brand{margin-top:clamp(2rem,5vh,2.8rem);border-radius:16px;overflow:hidden;background:var(--paper);
  border:1px solid rgba(36,52,75,.1);padding:0}
.art-brand img{width:100%;height:auto}
.art-brand .txt{padding:1.4rem clamp(1.2rem,3vw,2.2rem) 1.7rem}
@media (min-width:900px){
  .art-brand{display:grid;grid-template-columns:1.1fr 1fr;align-items:center}
  .art-brand img{height:100%;object-fit:cover}
}
.prose .art-brand h2{margin:0;padding:0;border:0;font-size:clamp(1.7rem,3vw,2.3rem)}
.art-brand .txt > p:not(.kicker){margin-top:.7rem;max-width:54ch}
.art-brand .kicker{margin-bottom:.6rem}

/* footer links all one way: plain, underlined on hover, so the icon links and
   the text links above them do not look like two different kinds of thing */
footer a{text-decoration:none}
footer a:hover,.fs:hover{text-decoration:underline;color:#fff}
footer .frow p + p{margin-top:.35rem}

/* ---------- the Journal before its first post ----------
   One calm card instead of an empty grid: what is coming, and where to follow
   along until it does. Disappears by itself once a post is published. */
.jempty{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(2.2rem,6vw,3.6rem) clamp(1.4rem,5vw,3rem);background:var(--paper);
  border:1px solid rgba(36,52,75,.1);border-radius:16px}
.jempty .fico{margin:0 0 1rem}
.jempty h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.jempty p{margin-top:.8rem;max-width:46ch;color:var(--ink-soft)}
.jempty .soc{margin-top:1.4rem;gap:.4rem}
.jempty .soc-i{width:48px;height:48px;border:1px solid rgba(36,52,75,.14)}

/* who wrote the post: a name and a role, so readers and search engines know */
.art-meta a{color:var(--jay-ink);text-decoration:none}
.art-meta a:hover{text-decoration:underline}
.author{display:flex;gap:1.1rem;align-items:flex-start;margin-top:clamp(2rem,5vh,2.8rem);padding:1.3rem 1.5rem;
  border-radius:14px;background:var(--paper);border:1px solid rgba(36,52,75,.1)}
.author .ava{flex:none;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--jay-soft);color:var(--jay-deep);
  display:grid;place-items:center;font:500 1.05rem/1 var(--num);letter-spacing:.04em}
.author .kicker{margin-bottom:.3rem}
.prose .author p.who{font-family:var(--display);font-size:1.3rem;color:var(--ink);line-height:1.3;margin:0}
.author .who span{display:block;font-family:var(--body);font-size:.88rem;color:var(--ink-faint)}
.prose .author p.who + p{margin-top:.55rem;max-width:62ch}
.art-sum p.sign{margin-top:.7rem;font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--jay-deep)}

/* moving pictures: short silent loops cut from the video, played like GIFs (journal.js) */
.fig video,.art-brand video{display:block;width:100%;height:auto;aspect-ratio:1440/648;object-fit:cover;background:var(--greige)}
.fig video{border-radius:12px;border:1px solid rgba(36,52,75,.08)}
.scard .fig video{border:0;border-radius:0}
@media (min-width:900px){.art-brand video{height:100%}}

/* the blog's headings use Lora: the same classic serif feel as Playfair, but with sturdier strokes
   (Playfair's hairlines get thin and hard to read at heading size, especially on phones) */
/* .art.long{--display:"Lora",Georgia,"Times New Roman",serif}   <- the serif option, swap back to compare */
.art.long{--display:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif}
/* the title in Outfit Medium; the headings below it in Outfit Regular */
.art.long h1{font-weight:500;letter-spacing:-.005em}
.art.long h2,.art.long h3,.art.long .faq summary{font-weight:400;letter-spacing:0;line-height:1.2}
.art.long h1{line-height:1.12}
.art.long h1 em,.art.long h2 em{font-weight:400}
.art.long .art-dek,.art.long .art-sum p.sum,.art.long .author p.who{font-weight:400}
/* a caption for a two-part picture: each half sits under its own side */
.fig figcaption.split{display:grid;grid-template-columns:1fr 1fr;gap:0}
.fig figcaption.split span:first-child{padding-right:.8rem}

/* a paragraph that follows a picture and its words starts a new thought: give it room */
.prose .duo + p.more{margin-top:clamp(1.8rem,4vh,2.4rem)}
.prose p.more b:first-child{color:var(--jay-deep)}

/* the one piece of advice to take away: a box the eye lands on */
.advice{margin-top:1.2rem;padding:1rem 1.5rem 1.15rem;border-radius:14px;background:var(--jay-deep);color:#fff;
  box-shadow:0 14px 34px rgba(47,87,136,.22)}
.advice .kicker{color:var(--lemon);font-size:14px;font-weight:600;letter-spacing:.2em;margin-bottom:.15rem}
.prose .advice p:last-child{color:#fff;font-size:clamp(1.12rem,1.7vw,1.3rem);line-height:1.45;margin:0}
.prose .advice b{color:#fff;font-weight:500;border-bottom:2px solid var(--lemon)}

/* a "don't" in the middle of a numbered list: a red cross where the number would be */
.prose .steps > li.no{counter-increment:none}
.steps > li.no::before{content:"\2715";background:#B3261E;color:#fff;font-size:.8rem;font-weight:600}
.prose .check a{color:var(--jay-ink)}

/* "Copy link" is not a social network, so it looks different: a dark pill, set apart from the four above it */
.share .copy{background:var(--night);color:#fff;border-color:var(--night);margin-left:.4rem}
.share .copy:hover{background:#2C3A54;color:#fff;border-color:#2C3A54}
@media (max-width:480px){.share .copy{margin-left:0}}
.art-brand img{aspect-ratio:3/2;object-fit:cover;object-position:62% 55%}
@media (max-width:899px){.art-brand img{aspect-ratio:16/10}}