/* snug.menu: one stylesheet for every page.

   Thesis: the menu bar at night. The page is the top of a Mac after dark. The
   masthead on every page IS a menu bar (the lit strip), and on the home page
   Snug's icon in it actually tucks and reveals. Everything below the strip is
   quiet espresso, with honey light only where something is worth seeing.
   Content runs in lanes the way Snug's Menu Bar Layout pane does, and sections
   are ruled the way the bar is.

   One committed mood: there is no light scheme. The display face is Mona Sans
   Condensed, self-hosted (OFL, license beside the file). Body is the system UI
   face; labels, values and shortcuts are the system monospace, which is the
   menu bar's own register. No third-party request at runtime. */

@font-face{
  font-family:"Snug Display";
  src:url("/assets/fonts/MonaSansVF-Condensed.woff2") format("woff2-variations"),
      url("/assets/fonts/MonaSansVF-Condensed.woff2") format("woff2");
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}

:root{
  color-scheme:dark;

  /* grounds, darkest to the lit strip */
  --night:#17110C;
  --night-2:#1F1812;
  --night-3:#261E16;
  --night-4:#30271D;
  --strip:#2A2119;

  /* ink */
  --ink:#F3ECE0;
  --ink-body:#E4DACA;
  --ink-2:#B5A790;
  --ink-3:#A39479;

  /* hairlines are the ink at low alpha, never a gray */
  --hair:rgba(243,236,224,.10);
  --hair-2:rgba(243,236,224,.17);
  --hair-3:rgba(243,236,224,.26);

  /* honey, the one accent */
  --honey:#E79A2B;
  --honey-hi:#F3B84D;
  --honey-ink:#F5C977;
  --honey-dim:rgba(231,154,43,.42);
  --honey-ghost:rgba(231,154,43,.10);
  --on-honey:#241505;

  --wrap:1240px;
  --gutter:clamp(20px,3.2vw,40px);
  --bar-h:38px;

  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --display:"Snug Display",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  /* two eases: a calm settle for reveals, and the one physical gesture,
     items sliding in under the separator */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-tuck:cubic-bezier(.7,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}

html{-webkit-text-size-adjust:100%;background:var(--night)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  background:var(--night);
  color:var(--ink);
  font:17px/1.62 var(--ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

a{color:inherit}
img,svg{max-width:100%}
strong,b{font-weight:640}
code{font:.88em/1.5 var(--mono);background:var(--night-3);border:1px solid var(--hair);
  border-radius:6px;padding:1px 6px;overflow-wrap:anywhere;color:var(--ink)}
.keys{white-space:nowrap}
kbd{font:600 .82em/1 var(--mono);display:inline-block;min-width:1.7em;text-align:center;
  padding:3px 5px 4px;margin:0 1px;border-radius:5px;background:var(--night-3);
  border:1px solid var(--hair-2);border-bottom-width:2px;color:var(--ink)}

::selection{background:var(--honey);color:var(--on-honey)}

:focus-visible{
  outline:2px solid var(--honey-hi);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 var(--gutter)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--honey);color:var(--on-honey);padding:10px 16px;border-radius:0 0 10px 0;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ======================================================= the lit strip
   Every page's masthead is a menu bar: the app menu where the Apple menu
   would be, the page's sections as menu titles, status items on the right. */

.bar{
  position:sticky;top:0;z-index:60;
  height:var(--bar-h);
  background:color-mix(in srgb,var(--strip) 90%,transparent);
  backdrop-filter:saturate(1.3) blur(16px);
  -webkit-backdrop-filter:saturate(1.3) blur(16px);
  box-shadow:inset 0 1px 0 rgba(243,236,224,.07),0 1px 0 rgba(0,0,0,.55),0 10px 30px -18px rgba(0,0,0,.9);
  font-size:14px;line-height:1;
}
.bar-in{display:flex;align-items:center;height:100%;padding:0 12px 0 10px;gap:4px;
  max-width:100%;}

/* the app menu: the wordmark opens every page on the site */
.appmenu{position:relative;flex:none}
.appmenu summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:3px;
  height:28px;padding:0 8px 0 7px;border-radius:6px;
}
.appmenu summary::-webkit-details-marker{display:none}
.appmenu summary:hover,.appmenu[open] summary{background:rgba(243,236,224,.13)}
.appmenu summary img{display:block;width:40px;height:auto;margin-top:-3px}
.appmenu summary .chev{width:11px;height:11px;color:var(--ink-2);transition:transform .2s var(--ease)}
.appmenu[open] summary .chev{transform:rotate(180deg)}
.menu{
  position:absolute;left:0;top:calc(100% + 6px);min-width:246px;z-index:70;
  background:color-mix(in srgb,var(--night-3) 96%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--hair-2);border-radius:10px;padding:5px;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4);
  font-size:14.5px;
}
.menu a{display:flex;justify-content:space-between;gap:18px;align-items:center;
  padding:7px 10px;border-radius:6px;text-decoration:none;color:var(--ink);line-height:1.2}
.menu a:hover,.menu a:focus-visible{background:var(--honey);color:var(--on-honey);outline:none}
.menu a[aria-current="page"]::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.menu hr{border:0;height:1px;background:var(--hair-2);margin:5px 8px}
.menu .k{font:500 12.5px/1 var(--mono);color:var(--ink-2)}
.menu a:hover .k,.menu a:focus-visible .k{color:inherit}
@media (prefers-reduced-motion:reduce){.appmenu summary .chev{transition:none}}

/* the page's sections, set as menu titles */
.bar-nav{display:flex;align-items:center;gap:2px;min-width:0}
.bar-nav a{color:var(--ink);text-decoration:none;white-space:nowrap;padding:0 9px;height:26px;
  display:inline-flex;align-items:center;border-radius:6px;font-weight:500}
.bar-nav a:hover{background:rgba(243,236,224,.13)}
.bar-nav a[aria-current="page"]{color:var(--honey-ink);background:rgba(231,154,43,.12)}
@media (max-width:1180px){.bar-nav .l3{display:none}}
@media (max-width:980px){.bar-nav .l2{display:none}}
@media (max-width:720px){.bar-nav{display:none}}

/* status items */
.status{display:flex;align-items:center;margin-left:auto;flex:none;color:var(--ink);height:100%}
.status .glyph{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:18px;height:18px;margin:0 6px}
.status .glyph svg{width:100%;height:100%;display:block}
.status .txt{font-variant-numeric:tabular-nums;white-space:nowrap;margin:0 6px;font-weight:500}
.status .clock{min-width:8.4em;text-align:right;margin-right:4px}
.btn.btn-bar{height:26px;padding:0 12px;font-size:13.5px;border-radius:7px;margin-left:8px;flex:none}
@media (max-width:720px){
  :root{--bar-h:40px}
  .status .opt{display:none}
  .status .clock{min-width:0}
  .btn.btn-bar{display:none}
}
@media (max-width:400px){
  .status .glyph{width:17px;height:17px;margin:0 5px}
  .status .opt2{display:none}
}

/* ======================================================== buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 15px/1 var(--ui);
  padding:0 20px;height:44px;
  border-radius:10px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn.btn-primary{background:var(--honey);color:var(--on-honey);
  box-shadow:inset 0 1px 0 rgba(255,236,200,.45),0 8px 26px -10px rgba(231,154,43,.6)}
.btn.btn-primary:hover{background:var(--honey-hi)}
.btn.btn-ghost{border-color:var(--hair-3);color:var(--ink);background:transparent}
.btn.btn-ghost:hover{border-color:var(--honey-ink);color:var(--honey-ink)}
.btn-lg{height:52px;padding:0 26px;font-size:16.5px;border-radius:12px}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:default}
.btn svg{width:17px;height:17px;flex:none}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}

/* ======================================================== chips */
/* A row of pills that wraps into balanced, centered lines. balanced-chips.js
   splits any [data-balance] container into .chip-row children.

   ⚠ Every chip rule is written against .chip itself, never as a descendant of
   the container. The script measures each chip inside a probe row appended to
   <body>: a rule like ".chips span" does not match there, so the widths come
   back as unstyled text and the row overflows. */
.chip-row{display:flex;flex-wrap:nowrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;white-space:nowrap;
  font:500 13.5px/1 var(--mono);letter-spacing:.01em;color:var(--ink-2);
  border:1px solid var(--hair-2);border-radius:999px;padding:9px 14px;
  text-decoration:none;background:var(--night-2);
}
a.chip:hover{border-color:var(--honey-ink);color:var(--honey-ink)}
.chip.is-here{background:var(--ink);color:var(--night);border-color:var(--ink)}
a.chip.is-here:hover{color:var(--night)}
.chips{--chip-gap:8px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chips .chip-row{flex:0 0 100%;justify-content:center}

/* ======================================================== labels and type */

.eyebrow,.kicker{
  font:600 12px/1.4 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--honey-ink);
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{font-size:14px;color:var(--ink-2)}

h1,h2,h3{text-wrap:balance}
h1,h2{font-family:var(--display);font-weight:720;letter-spacing:-.012em;line-height:.96}
h2{font-size:clamp(34px,2.4rem + 1.6vw,62px)}
h3{font-size:19px;font-weight:650;letter-spacing:-.012em;line-height:1.25}
.lede{font-size:clamp(18px,1rem + .45vw,21px);line-height:1.52;color:var(--ink-2);text-wrap:pretty}
.section-lede{max-width:58ch;margin-top:18px;color:var(--ink-2);font-size:18px;text-wrap:pretty}
em.honey,.honey{color:var(--honey-hi);font-style:normal}

/* A section opens on a hairline with its number and name sitting on it, the
   way a lane is labeled in Snug's Menu Bar Layout pane. */
section{padding:clamp(64px,7vw,112px) 0}
section[id],[id]{scroll-margin-top:calc(var(--bar-h) + 18px)}
.rule-head{
  display:flex;align-items:baseline;gap:16px;
  border-top:1px solid var(--hair-2);
  padding-top:14px;margin-bottom:clamp(30px,3.4vw,48px);
  font:600 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;
}
.rule-head .num{color:var(--honey-ink);letter-spacing:.06em}
.rule-head .name{color:var(--ink)}
.rule-head .note{margin-left:auto;color:var(--ink-2);text-align:right;letter-spacing:.1em}
@media (max-width:640px){.rule-head .note{display:none}}

/* ======================================================== reveal on scroll */
.js [data-reveal]{opacity:0;transform:translateY(22px);filter:blur(4px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
  transition-delay:var(--d,0ms)}
.js [data-reveal].in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{transform:none;filter:none;transition:opacity .4s linear}
}

/* ======================================================== footer */

.site-footer{border-top:1px solid var(--hair-2);padding:56px 0 48px;font-size:15px;background:var(--night)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:32px}
.footer-grid h2{font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:16px}
.footer-grid ul{display:grid;gap:10px}
.footer-grid a{color:var(--ink);text-decoration:none}
.footer-grid a:hover{color:var(--honey-ink)}
.footer-brand img{width:66px;height:auto;margin-bottom:14px;display:block}
.footer-brand p{color:var(--ink-2);font-size:14.5px;max-width:32ch}
.footer-brand .mail{margin-top:10px;font:500 13.5px/1.4 var(--mono)}
.footer-brand .mail a{color:var(--honey-ink)}
.footer-brand a{color:var(--ink);text-underline-offset:3px}
.footer-base{margin-top:44px;padding-top:18px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  font:500 12.5px/1.5 var(--mono);letter-spacing:.04em;color:var(--ink-2)}
.footer-base a{color:var(--ink-2);text-decoration:none}
.footer-base a:hover{color:var(--ink)}
.footer-base .links{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer-base .grp{display:flex;gap:18px;white-space:nowrap}
.site-footer.slim{padding:22px 0 26px}
.site-footer.slim .footer-base{margin-top:0;padding-top:0;border-top:0}
@media (max-width:900px){.footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-brand{grid-column:1/-1}}
@media (max-width:560px){.footer-grid{gap:28px 14px}.footer-grid a{font-size:14px}.footer-base{flex-direction:column}}
.footer-base .s{white-space:nowrap}

/* ======================================================== legal + text pages */

.doc-head{padding:clamp(56px,7vw,96px) 0 clamp(28px,3vw,40px);border-bottom:1px solid var(--hair)}
.doc-head .kicker{margin-bottom:18px}
.doc-head h1{font-size:clamp(46px,2rem + 4vw,92px);line-height:.92}
.doc{padding:clamp(36px,4vw,56px) 0 32px}
.updated{font:500 12.5px/1.4 var(--mono);color:var(--ink-2);letter-spacing:.08em;margin-top:22px;
  text-transform:uppercase;margin-bottom:0}
.doc h2{font:680 clamp(24px,1.2rem + .7vw,30px)/1.1 var(--display);letter-spacing:0;
  margin:52px 0 14px;padding-top:18px;border-top:1px solid var(--hair)}
.doc > .wrap-narrow > h2:first-of-type{margin-top:40px}
.doc p,.doc li{margin-bottom:15px;text-wrap:pretty;overflow-wrap:break-word;color:var(--ink-body)}
.doc ul{list-style:disc;padding-left:22px}
.doc ul li::marker{color:var(--honey)}
.doc li{margin-bottom:10px}
.doc a{color:var(--honey-ink);text-underline-offset:3px;text-decoration-thickness:1px}
.doc a:hover{color:var(--honey-hi)}
.doc a.chip{color:var(--ink-2);text-decoration:none}
.doc a.chip:hover{color:var(--honey-ink)}
.doc a.chip.is-here{color:var(--night)}
.doc strong{color:var(--ink)}
.doc .lead{font-size:clamp(19px,1rem + .5vw,22px);line-height:1.5;color:var(--ink);margin-bottom:28px;text-wrap:pretty}
/* No colored stripe down one edge: emphasis is the ground and the full border. */
.callout{background:var(--night-2);border:1px solid var(--hair-2);
  border-radius:14px;padding:20px 24px;margin:8px 0 18px}
.callout p:last-child{margin-bottom:0}

/* The legal pages link to each other, so none of them is a dead end. */
.doc-nav{--chip-gap:8px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:48px 0 0;padding-top:28px;border-top:1px solid var(--hair)}
.doc-nav .chip-row{flex:0 0 100%;justify-content:center}

/* ======================================================== utility pages */

/* checkout, thanks, find my license, 404: one panel hanging from the strip
   like a menu dropped from it. */
.utility{display:flex;flex-direction:column;min-height:100vh}
.utility main{flex:1;display:flex;align-items:flex-start;padding:clamp(48px,9vh,110px) 0 64px;
  background:radial-gradient(720px 360px at 50% 0,rgba(231,154,43,.08),transparent 70%)}
.utility main > .wrap{width:100%}
.panel{
  position:relative;
  background:var(--night-2);border:1px solid var(--hair-2);border-radius:16px;
  padding:clamp(26px,3vw,38px);max-width:580px;margin:0 auto;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.panel .kicker{margin-bottom:16px;display:flex;align-items:center;gap:10px}
.panel .kicker::after{content:"";flex:1;height:1px;background:var(--hair-2)}
.panel h1{font-size:clamp(36px,1.6rem + 2vw,52px);line-height:.95;margin-bottom:16px}
.panel p{color:var(--ink-body);margin-bottom:14px;text-wrap:pretty}
.panel p:last-child{margin-bottom:0}
.panel a:not(.btn){color:var(--honey-ink);text-underline-offset:3px}
.panel .btn{margin-top:6px}
.panel .foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}
.panel .muted{color:var(--ink-2)}

.field{display:flex;gap:10px;align-items:stretch;margin:6px 0 14px}
.field input{
  flex:1;min-width:0;font:16px/1 var(--ui);color:var(--ink);
  height:48px;padding:0 14px;background:var(--night);
  border:1px solid var(--hair-3);border-radius:10px;
}
.field input::placeholder{color:var(--ink-3)}
.field input:focus-visible{outline:2px solid var(--honey-hi);outline-offset:1px;border-color:var(--honey)}
.field .btn{height:48px}
.label{display:block;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin:6px 0 10px}

.keybox{
  display:block;font:14px/1.55 var(--mono);
  background:var(--night);color:var(--honey-ink);border:1px solid var(--hair-2);
  padding:16px;border-radius:10px;word-break:break-all;margin:16px 0;
}

.spin{display:inline-block;width:15px;height:15px;margin-right:10px;vertical-align:-2px;
  border:2px solid var(--hair-3);border-top-color:var(--honey);border-radius:50%;
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}

/* ======================================================== responsive */

@media (max-width:640px){
  body{font-size:16.5px}
  .panel{border-radius:14px}
  .field{flex-direction:column}
  .field input{flex:none}
  .field .btn{width:100%}
}

/* utility page details */
.panel .activate{margin-top:20px}
.panel .err{color:var(--honey-ink)}
.pagelist{display:grid;grid-template-columns:minmax(0,1fr);margin:10px 0 0;border-top:1px solid var(--hair)}
.pagelist a{display:flex;align-items:center;justify-content:space-between;padding:13px 2px;
  border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink)!important;font-weight:560}
.pagelist a::after{content:"";width:.8em;height:.8em;flex:none;background:var(--honey);
  -webkit-mask:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>');
  mask:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>')}
.pagelist a:hover{color:var(--honey-ink)!important}
.pagelist a:last-child{border-bottom:0}

/* ======================================================== on this page
   Long text pages get an index of their own sections, built by bar.js from
   the h2s, pinned beside the text on a wide screen and hidden on a narrow
   one. The section being read is marked in honey, the way the live lane is. */
.toc{display:none}
@media (min-width:1100px){
  body.has-toc .doc-head .wrap-narrow,
  body.has-toc .doc > .wrap-narrow{max-width:1120px}
  body.has-toc .doc-head .wrap-narrow{padding-left:calc(var(--gutter) + 280px)}
  body.has-toc .doc > .wrap-narrow{display:grid;grid-template-columns:220px minmax(0,700px);column-gap:60px}
  body.has-toc .doc > .wrap-narrow > *{grid-column:2}
  .toc{display:block;grid-column:1 !important;grid-row:1 / span 90;align-self:start;
    position:sticky;top:calc(var(--bar-h) + 36px);padding-top:6px}
  .toc .label{font:600 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-2);margin:0 0 14px}
  .toc ol{border-left:1px solid var(--hair-2)}
  .toc a{display:block;position:relative;padding:7px 0 7px 16px;font-size:14px;line-height:1.35;
    color:var(--ink-2);text-decoration:none;transition:color .25s var(--ease)}
  .toc a:hover{color:var(--ink)}
  .toc a::before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:2px;border-radius:2px;
    background:var(--honey);transform:scaleY(0);transition:transform .35s var(--ease)}
  .toc a.on{color:var(--honey-ink)}
  .toc a.on::before{transform:scaleY(1)}
}
@media (prefers-reduced-motion:reduce){.toc a,.toc a::before{transition:none}}

/* ======================================================== newsletter band */
/* Never the headline action: a quiet raised band above the footer, ruled the
   way a lane is, with a ghost button so the honey stays on Download and Buy.
   js/newsletter.js swaps the form for .newsdone in place. */
.newsband{padding:clamp(40px,4.4vw,60px) 0;background:var(--night-2);
  border-top:1px solid var(--hair-2)}
.news-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:24px clamp(32px,5vw,80px);align-items:end}
.news-copy .kicker{margin-bottom:12px}
.newsband h2{font-size:clamp(28px,1.2rem + 1.3vw,40px);line-height:1;margin-bottom:12px}
.news-copy p:not(.kicker){color:var(--ink-2);max-width:52ch;text-wrap:pretty}
.newsform .label{margin-top:0}
.newsform .field{margin-bottom:0}
.newsform .field .btn{padding:0 22px}
.newsmsg{margin-top:10px;font-size:14px;color:var(--ink-2)}
.newsmsg:empty{display:none}
.newsmsg.is-bad{color:var(--honey-ink)}
.newsdone{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;
  background:var(--night);border:1px solid var(--hair-2);border-radius:12px;
  color:var(--ink-body);font-size:15.5px;line-height:1.5;text-wrap:pretty}
.newsdone:focus{outline:none}
.newsdone strong{color:var(--ink)}
.newstick{width:20px;height:20px;flex:none;margin-top:2px;color:var(--honey-hi)}
@media (max-width:860px){.news-grid{grid-template-columns:minmax(0,1fr)}}

/* Chosen line breaks (wrapcheck): .nw keeps a phrase whole, .ln puts a sentence on its own line. */
.nw{white-space:nowrap}
.ln{display:block}