/* Shym blog post in the story look (inc/blog-post.php), NEW ZEALAND COPY of the Australian file
   (ShymSaunas, dev_files/shym-blog-au/shym-blog.css, live since 23 Oct 2026). Francis, 24 Oct 2026: "A go".
   The same file as Australia's, plus the NZ part at the end (the Google rating's own styles, which Australia gets from
   its site header file, and the page with no project strips). NZ has the old header, so the top starts under it:
   the rules for the see-through header (body.shym-look.shym-look-over) never apply here.
   Australia's notes follow. */
/* Shym blog post in the story look of the home page (inc/blog-post.php). Design system B (Warm Nordic), DESIGN.md
   section 7. Francis, 23 Oct 2026: "make sure it looks the part, our home page is beautiful".
   The top is the project page's (photo at the right under the see-through header, a plum shade from the left, the
   cream bar half on it); the end is the home page's (project strips on a dark sheet, then the three tall guide cards
   on a white sheet, then the footer's dark band). The words in between are made for reading: 17px, 720px at most.
   Loaded after shym-card.css and shym-story-parts.css. Every class starts with shym-blog. */

.shym-blog{
  --ink:#26222F;--body:#4A4451;--muted:#645D6A;--line:#E3DCD5;--cream:#EEE9E5;--white:#FFFFFF;
  --orange:#B5412A;--orange-deep:#9C3622;--star:#F6BB06;
  --font:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --slow:cubic-bezier(.16,1,.3,1);--soft:cubic-bezier(.65,0,.35,1);--ease:cubic-bezier(.2,.8,.2,1);
  --lift:0 16px 34px -20px rgba(38,34,47,.45);
  --top:calc(var(--shym-main-h,76px) + 32px);
  position:relative;font-family:var(--font);color:var(--body);background:var(--white);overflow-x:clip;
}
.shym-blog *,.shym-blog *::before,.shym-blog *::after{box-sizing:border-box}
/* the site sets the old font on every p and div with !important, so each part says the font again */
.shym-blog,.shym-blog h1,.shym-blog h2,.shym-blog h3,.shym-blog h4,.shym-blog h5,.shym-blog p,.shym-blog li,.shym-blog a,.shym-blog span,.shym-blog strong,.shym-blog b,.shym-blog em,.shym-blog i,.shym-blog div,.shym-blog blockquote,.shym-blog td,.shym-blog th,.shym-blog figcaption,.shym-blog summary,.shym-blog button{font-family:var(--font)!important}
.shym-blog h1,.shym-blog h2,.shym-blog h3,.shym-blog h4,.shym-blog p,.shym-blog ul,.shym-blog ol,.shym-blog figure,.shym-blog blockquote{margin:0;padding:0}
.shym-blog img{display:block;max-width:100%;height:auto}
.shym-blog a{text-decoration:none}
.shym-blog__wrap{width:min(1365px,calc(100% - 48px));margin:0 auto}

/* ---------- 1. the top ---------- */
/* Two looks, one per post (shym_blog_hero_style in blog-post.php). About 70% of the screen tall (Francis, 23 Oct 2026:
   "I love A, let's try reducing the height of the hero section"; it was a whole screen). Francis, 23 Oct 2026, on the first top (a plum band
   with the photo fading in at the right): "It looks ugly and outdated".
   full: the post's photo over the whole top, as on the home page; the words at its foot on a Plum ink shade.
   soft: a photo with words printed on it, or too small to fill a screen: the same photo blurred into a colour wash
         over the whole top, and the photo itself, sharp, as a big picture with 28px corners beside the words.
   Both sit under the see-through header (shym_look_over in site-shell.php). */
.shym-blog__hero{--hero-h:clamp(520px,calc(70svh - 40px),720px);position:relative;overflow:hidden;isolation:isolate;display:flex;min-height:var(--hero-h);background:var(--ink);color:var(--white)}
body.shym-look.shym-look-over .shym-blog__hero{--hero-h:clamp(580px,70svh,780px);margin-top:calc(-1 * var(--shym-main-h,76px))}
.shym-blog__hero-in{position:relative;z-index:2;display:flex;align-items:flex-end;width:min(1365px,calc(100% - 48px));margin:0 auto;padding:48px 0 128px}
body.shym-look.shym-look-over .shym-blog__hero-in{padding-top:calc(48px + var(--shym-main-h,76px))}
.shym-blog__hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.shym-blog__hero-copy>*{max-width:600px}
.shym-blog__hero-copy>.shym-blog__h1{max-width:min(1000px,100%)}

/* full: the photo over the whole top; the shade is strongest at the foot and the left, where the words sit, and along
   the top under the header's white words */
.shym-blog__hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.shym-blog .shym-blog__hero-photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
/* the top photo sits in a <picture> with the phone's smaller files (the speed job, blog-post.php) */
.shym-blog .shym-blog__hero-photo picture,.shym-blog figure.shym-blog__hero-card picture{display:block;width:100%;height:100%}
.shym-blog__hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(38,34,47,.72) 0%,rgba(38,34,47,.32) 12%,rgba(38,34,47,0) 26%),
    linear-gradient(0deg,rgba(38,34,47,.94) 0%,rgba(38,34,47,.74) 30%,rgba(38,34,47,.24) 62%,rgba(38,34,47,0) 82%),
    linear-gradient(90deg,rgba(38,34,47,.62) 0%,rgba(38,34,47,.28) 46%,rgba(38,34,47,0) 72%)}

/* soft: the wash, then the words and the picture side by side */
.shym-blog__hero.is-soft .shym-blog__hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(40px,5vw,96px)}
.shym-blog__hero-wash{position:absolute;inset:-10%;z-index:0;overflow:hidden}
.shym-blog .shym-blog__hero-wash img{width:100%;height:100%;max-width:none;object-fit:cover;filter:blur(64px) saturate(1.3);transform:scale(1.15)}
.shym-blog__hero-wash::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(38,34,47,.88) 0%,rgba(38,34,47,.7) 45%,rgba(38,34,47,.48) 100%)}
.shym-blog figure.shym-blog__hero-card{position:relative;justify-self:end;width:100%;max-width:var(--card-w,100%);max-height:calc(var(--hero-h) - 250px);margin:0;overflow:hidden;border-radius:28px;background:rgba(255,255,255,.06)}
.shym-blog figure.shym-blog__hero-card img{width:100%;height:100%;max-width:none;object-fit:cover}
.shym-blog__hero.is-nopic .shym-blog__hero-in{display:flex}

/* the buttons of the top (DESIGN.md, Hero banner): orange with a cream Rise on a photo, and a white outline */
.shym-blog .shym-blog__hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.shym-blog a.shym-blog__btn.is-photo::before{background:var(--cream)}
.shym-blog a.shym-blog__btn.is-photo:hover,.shym-blog a.shym-blog__btn.is-photo:focus-visible{color:var(--ink)}
.shym-blog a.shym-blog__btn.is-ghost,.shym-blog a.shym-blog__btn.is-ghost:visited{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);transition:background .25s,color .25s,transform .2s}
.shym-blog a.shym-blog__btn.is-ghost::before{display:none}
.shym-blog a.shym-blog__btn.is-ghost:hover,.shym-blog a.shym-blog__btn.is-ghost:focus-visible{background:rgba(255,255,255,.12);color:var(--white)}
.shym-blog__hero-btns+.shym-blog__by{margin-top:28px}

/* "In this guide" at the right of the full top: white at 8% with a white edge at 16% (DESIGN.md 7, Surfaces) */
.shym-blog__hero.is-full .shym-blog__hero-in{justify-content:space-between;gap:48px}
.shym-blog .shym-blog__hero-parts{flex:0 0 340px;align-self:flex-end;padding:22px 24px 18px;border-radius:18px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.shym-blog .shym-blog__hero-parts>p{margin:0 0 10px;font:600 15px/1.3 var(--font);color:var(--white)}
.shym-blog .shym-blog__hero-parts ol{margin:0;padding:0;list-style:none}
.shym-blog .shym-blog__hero-parts li{margin:0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.shym-blog .shym-blog__hero-parts li::before{display:none}
.shym-blog .shym-blog__hero-parts li a,.shym-blog .shym-blog__hero-parts li a:visited{display:flex;align-items:baseline;gap:14px;padding:11px 0;font:500 15px/1.4 var(--font);color:rgba(255,255,255,.88);transition:color .2s}
.shym-blog .shym-blog__hero-parts li a i{flex:none;min-width:20px;font:normal 600 12.5px/1 var(--font);letter-spacing:.06em;color:rgba(255,255,255,.6)}
.shym-blog .shym-blog__hero-parts li a:hover,.shym-blog .shym-blog__hero-parts li a:focus-visible{color:var(--white)}
.shym-blog .shym-blog__hero-parts li a:hover span{text-decoration:underline;text-underline-offset:3px}
.shym-blog p.shym-blog__hero-more{display:flex;flex-wrap:wrap;gap:4px 10px;margin:4px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);font:400 14px/1.4 var(--font);color:rgba(255,255,255,.6)}
.shym-blog p.shym-blog__hero-more a,.shym-blog p.shym-blog__hero-more a:visited{color:rgba(255,255,255,.88);text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.shym-blog p.shym-blog__hero-more a:hover{color:var(--white);text-decoration-color:currentColor}
@media (max-width:1199px){.shym-blog .shym-blog__hero-parts{display:none}}

/* the topic as an eyebrow: small capitals, white at 72% */
.shym-blog p.shym-blog__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 22px;font:600 12.5px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.shym-blog p.shym-blog__eyebrow a,.shym-blog p.shym-blog__eyebrow a:visited{color:inherit;transition:color .2s}
.shym-blog p.shym-blog__eyebrow a:hover,.shym-blog p.shym-blog__eyebrow a:focus-visible{color:var(--white)}
.shym-blog p.shym-blog__eyebrow span{opacity:.6}
/* the story headline (600, .96, -.04em). A long title stops at 72px, a very long one at 60px. */
.shym-blog h1.shym-blog__h1{margin:0;font:600 clamp(40px,5.2vw,88px)/.96 var(--font);letter-spacing:-.04em;text-transform:none;color:var(--white);text-wrap:balance}
.shym-blog h1.shym-blog__h1.is-long{font-size:clamp(38px,3.9vw,72px);line-height:.98}
.shym-blog h1.shym-blog__h1.is-longer{font-size:clamp(36px,3.3vw,60px);line-height:1}
.shym-blog p.shym-blog__lead{margin-top:26px;font:400 17px/1.6 var(--font);color:rgba(255,255,255,.86);text-wrap:pretty}
.shym-blog p.shym-blog__by{display:flex;align-items:center;gap:12px;margin-top:30px}
.shym-blog p.shym-blog__by img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.16)}
.shym-blog p.shym-blog__by span{display:flex;flex-direction:column;gap:2px}
.shym-blog p.shym-blog__by b{font:600 15px/1.3 var(--font);color:var(--white)}
.shym-blog p.shym-blog__by i{font:normal 400 14px/1.4 var(--font);color:rgba(255,255,255,.72)}

/* ---------- 2. the cream bar, half on the top ---------- */
.shym-blog__factsec{position:relative;z-index:3;margin-top:-60px}
.shym-blog ul.shym-blog__facts{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:20px 28px;margin:0;padding:26px 32px;list-style:none;border-radius:18px;background:var(--cream)}
.shym-blog ul.shym-blog__facts li{display:flex;align-items:center;gap:14px;min-width:0;margin:0;padding:0}
.shym-blog ul.shym-blog__facts li::before{display:none}
.shym-blog .shym-blog__fact-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--white)}
.shym-blog .shym-blog__fact-icon svg{width:20px;height:20px}
.shym-blog ul.shym-blog__facts li>span:last-child{display:flex;flex-direction:column;min-width:0}
.shym-blog ul.shym-blog__facts b{font:600 17px/1.3 var(--font);letter-spacing:-.01em;color:var(--ink)}
.shym-blog ul.shym-blog__facts i{font:normal 400 14px/1.5 var(--font);color:var(--body);overflow-wrap:anywhere}
.shym-blog ul.shym-blog__facts i a,.shym-blog ul.shym-blog__facts i a:visited{color:var(--body);text-decoration:underline;text-decoration-color:rgba(38,34,47,.3);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.shym-blog ul.shym-blog__facts i a:hover,.shym-blog ul.shym-blog__facts i a:focus-visible{color:var(--orange);text-decoration-color:currentColor}

/* ---------- 3. "On this page", the post, the help card ---------- */
.shym-blog__body{display:grid;grid-template-columns:minmax(0,236px) minmax(0,720px) minmax(0,296px);justify-content:space-between;align-items:start;gap:40px;padding:clamp(64px,6.4vw,104px) 0 clamp(80px,7vw,120px)}
.shym-blog__body.no-toc{grid-template-columns:minmax(0,236px) minmax(0,720px) minmax(0,296px)}
.shym-blog__main{min-width:0}

/* "On this page" stays in view; the part being read is marked (shym-blog.js) */
/* the left column: "On this page" and the share row under it, both in view while the post goes by */
.shym-blog .shym-blog__left{position:sticky;top:var(--top);min-width:0}
.shym-blog .shym-blog__toc{max-height:calc(100vh - var(--top) - 180px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.shym-blog p.shym-blog__toc-title{margin:0 0 14px;font:600 15px/1.3 var(--font);color:var(--ink)}
.shym-blog button.shym-blog__toc-btn{display:none}
.shym-blog .shym-blog__toc ol{margin:0;padding:0;list-style:none;border-left:2px solid var(--line)}
.shym-blog .shym-blog__toc li{margin:0;padding:0}
.shym-blog .shym-blog__toc li::before{display:none}
.shym-blog .shym-blog__toc a,.shym-blog .shym-blog__toc a:visited{display:block;margin-left:-2px;padding:7px 0 7px 16px;border-left:2px solid transparent;font:400 14px/1.45 var(--font);color:var(--muted);transition:color .2s,border-color .3s}
.shym-blog .shym-blog__toc a:hover,.shym-blog .shym-blog__toc a:focus-visible{color:var(--ink)}
.shym-blog .shym-blog__toc a.is-on{border-left-color:var(--ink);font-weight:600;color:var(--ink)}

/* the post's words: 17px, about 75 letters a line */
.shym-blog__article{font:400 17px/1.7 var(--font);color:var(--body);overflow-wrap:break-word}
.shym-blog__article>*{margin:0 0 22px}
.shym-blog__article>*:last-child{margin-bottom:0}
.shym-blog .shym-blog__article p{margin:0 0 22px;font:inherit;color:inherit}
.shym-blog .shym-blog__article p:last-child{margin-bottom:0}
.shym-blog .shym-blog__article h2{margin:clamp(52px,4.6vw,76px) 0 18px;font:600 clamp(28px,2.6vw,40px)/1.08 var(--font);letter-spacing:-.035em;text-transform:none;color:var(--ink);scroll-margin-top:var(--top);text-wrap:balance}
.shym-blog .shym-blog__article>h2:first-child{margin-top:0}
.shym-blog .shym-blog__article h3{margin:40px 0 12px;font:600 26px/1.18 var(--font);letter-spacing:-.02em;text-transform:none;color:var(--ink);scroll-margin-top:var(--top);text-wrap:balance}
.shym-blog .shym-blog__article h4,.shym-blog .shym-blog__article h5{margin:32px 0 10px;font:700 17px/1.4 var(--font);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.shym-blog .shym-blog__article h2+h3,.shym-blog .shym-blog__article h3+h4{margin-top:20px}
.shym-blog .shym-blog__article strong,.shym-blog .shym-blog__article b{font-weight:600;color:var(--ink)}
.shym-blog .shym-blog__article em{font-style:italic}
.shym-blog .shym-blog__article a,.shym-blog .shym-blog__article a:visited{color:var(--orange);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(181,65,42,.4);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.shym-blog .shym-blog__article a:hover,.shym-blog .shym-blog__article a:focus-visible{color:var(--orange-deep);text-decoration-color:currentColor}
/* lists: small Plum ink dots, numbers in Plum ink */
.shym-blog .shym-blog__article ul,.shym-blog .shym-blog__article ol{margin:0 0 24px;padding:0;list-style:none}
.shym-blog .shym-blog__article ol{counter-reset:shym-blog-n}
.shym-blog .shym-blog__article li{position:relative;margin:0 0 10px;padding:0 0 0 28px;font:inherit;color:inherit}
.shym-blog .shym-blog__article li:last-child{margin-bottom:0}
.shym-blog .shym-blog__article ul>li::before{content:"";position:absolute;left:7px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.shym-blog .shym-blog__article ol>li{counter-increment:shym-blog-n}
.shym-blog .shym-blog__article ol>li::before{content:counter(shym-blog-n) ".";position:absolute;left:0;top:0;min-width:20px;font-weight:600;color:var(--ink)}
.shym-blog .shym-blog__article li>ul,.shym-blog .shym-blog__article li>ol{margin:10px 0 0}
.shym-blog .shym-blog__article li p{margin:0}
/* pictures, captions, films */
.shym-blog .shym-blog__article img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:14px}
.shym-blog .shym-blog__article p>img,.shym-blog .shym-blog__article p>a>img{margin:8px auto}
.shym-blog .shym-blog__article figure,.shym-blog .shym-blog__article .wp-caption,.shym-blog .shym-blog__article .wp-block-image{max-width:100%;margin:36px 0}
.shym-blog .shym-blog__article figcaption,.shym-blog .shym-blog__article .wp-caption-text,.shym-blog .shym-blog__article .wp-element-caption{margin:12px 0 0;font:400 14px/1.5 var(--font);color:var(--muted);text-align:center}
.shym-blog .shym-blog__article .shym-blog__embed{position:relative;margin:36px 0;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:var(--ink)}
.shym-blog .shym-blog__article .shym-blog__embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.shym-blog .shym-blog__article hr{height:0;margin:48px 0;border:0;border-top:1px solid var(--line)}
.shym-blog .shym-blog__article blockquote{margin:36px 0;padding:4px 0 4px 24px;border-left:3px solid var(--ink);font:500 17px/1.6 var(--font);color:var(--ink)}
.shym-blog .shym-blog__article blockquote p{margin:0 0 12px}
/* tables: a cream panel with white lines between the rows; a wide one scrolls sideways on a phone */
.shym-blog .shym-blog__article .shym-blog__table{margin:32px 0;padding:6px 24px;overflow-x:auto;border-radius:18px;background:var(--cream);-webkit-overflow-scrolling:touch}
.shym-blog .shym-blog__article .shym-blog__table table,.shym-blog .shym-blog__article .wp-block-table{width:100%;margin:0;border:0;border-collapse:collapse;font:400 15px/1.5 var(--font);color:var(--body);background:none}
.shym-blog .shym-blog__article .wp-block-table{margin:32px 0}
.shym-blog .shym-blog__article .shym-blog__table th,.shym-blog .shym-blog__article .shym-blog__table td{padding:14px 16px 14px 0;border:0;border-bottom:2px solid var(--white);background:none;text-align:left;vertical-align:top;font:inherit;color:inherit}
.shym-blog .shym-blog__article .shym-blog__table th:last-child,.shym-blog .shym-blog__article .shym-blog__table td:last-child{padding-right:0}
.shym-blog .shym-blog__article .shym-blog__table th,.shym-blog .shym-blog__article .shym-blog__table thead td{font-weight:600;color:var(--ink)}
.shym-blog .shym-blog__article .shym-blog__table td:first-child{font-weight:500;color:var(--ink)}
.shym-blog .shym-blog__article .shym-blog__table tr:last-child>*{border-bottom:0}
.shym-blog .shym-blog__article .shym-blog__table thead tr:last-child>*{border-bottom:2px solid var(--white)}
.shym-blog .shym-blog__article .shym-blog__table a{font-weight:600}
/* "Key takeaways": a cream card, a tick before each point */
.shym-blog .shym-blog__article .shym-blog__keys{margin:36px 0;padding:clamp(26px,2.8vw,40px);border-radius:18px;background:var(--cream)}
.shym-blog .shym-blog__article .shym-blog__keys>h2,.shym-blog .shym-blog__article .shym-blog__keys>h3,.shym-blog .shym-blog__article .shym-blog__keys>h4,.shym-blog .shym-blog__article .shym-blog__keys>.shym-blog__keys-title{margin:0 0 20px;font:600 26px/1.18 var(--font);letter-spacing:-.02em;color:var(--ink)}
.shym-blog .shym-blog__article .shym-blog__keys ul,.shym-blog .shym-blog__article .shym-blog__keys ol{margin:0}
.shym-blog .shym-blog__article .shym-blog__keys li{padding-left:34px;margin-bottom:12px}
.shym-blog .shym-blog__article .shym-blog__keys li::before{content:"";left:0;top:.18em;width:22px;height:22px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
/* the FAQ: questions that open and close, a thin line between them */
.shym-blog .shym-blog__article .shym-blog__faq{margin:8px 0 0;border-top:1px solid var(--line)}
.shym-blog .shym-blog__article details.shym-blog__q{margin:0;border-bottom:1px solid var(--line)}
.shym-blog .shym-blog__article details.shym-blog__q summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;cursor:pointer;list-style:none}
.shym-blog .shym-blog__article details.shym-blog__q summary::-webkit-details-marker{display:none}
.shym-blog .shym-blog__article details.shym-blog__q summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}
.shym-blog .shym-blog__article details.shym-blog__q h3{margin:0;font:600 17px/1.4 var(--font);letter-spacing:-.01em;color:var(--ink)}
.shym-blog .shym-blog__q-icon{position:relative;flex:0 0 32px;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);transition:background .25s,transform .35s var(--slow)}
.shym-blog .shym-blog__q-icon::before,.shym-blog .shym-blog__q-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--ink);transition:background .25s}
.shym-blog .shym-blog__q-icon::after{transform:rotate(90deg)}
.shym-blog details.shym-blog__q summary:hover .shym-blog__q-icon{background:var(--cream)}
.shym-blog details.shym-blog__q[open] .shym-blog__q-icon{background:var(--ink);transform:rotate(45deg)}
.shym-blog details.shym-blog__q[open] .shym-blog__q-icon::before,.shym-blog details.shym-blog__q[open] .shym-blog__q-icon::after{background:var(--white)}
.shym-blog .shym-blog__article .shym-blog__a{padding:0 56px 24px 0}
.shym-blog .shym-blog__article .shym-blog__a>*:last-child{margin-bottom:0}

/* share this guide: round outline buttons, Plum ink on hover; under "On this page" and under the post */
.shym-blog .shym-blog__share.is-side{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.shym-blog .shym-blog__share.is-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:clamp(48px,4.6vw,72px);padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* on a computer the row under "On this page" is always in view, so the one under the post shows from tablets down */
@media (min-width:1025px){.shym-blog .shym-blog__share.is-end{display:none}.shym-blog .shym-blog__share.is-end+.shym-blog__author{margin-top:clamp(52px,5vw,76px)}}
.shym-blog p.shym-blog__share-title{margin:0 0 12px;font:600 15px/1.3 var(--font);color:var(--ink)}
.shym-blog .shym-blog__share.is-end p.shym-blog__share-title{margin:0;font-size:17px}
.shym-blog .shym-blog__share-row{display:flex;flex-wrap:wrap;gap:8px}
.shym-blog .shym-blog__share.is-side .shym-blog__share-row{gap:6px}
.shym-blog .shym-blog__share-btn,.shym-blog a.shym-blog__share-btn:visited{display:grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.shym-blog .shym-blog__share.is-side .shym-blog__share-btn{width:34px;height:34px}
.shym-blog .shym-blog__share-btn svg{width:18px;height:18px}
.shym-blog .shym-blog__share.is-side .shym-blog__share-btn svg{width:16px;height:16px}
.shym-blog .shym-blog__share-btn:hover,.shym-blog .shym-blog__share-btn:focus-visible{background:var(--ink);color:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink)}
.shym-blog .shym-blog__share-btn[hidden]{display:none}
.shym-blog .shym-blog__share-btn svg+svg,.shym-blog .shym-blog__share-btn.is-done svg:first-child{display:none}
.shym-blog .shym-blog__share-btn.is-done svg+svg{display:block}
.shym-blog p.shym-blog__share-done{margin:10px 0 0;font:400 14px/1.4 var(--font);color:var(--muted)}
.shym-blog p.shym-blog__share-done:empty{display:none}
.shym-blog .shym-blog__share.is-end p.shym-blog__share-done{flex-basis:100%;margin:0}

/* previous and next guide: two cream cards under the author card */
.shym-blog .shym-blog__adjs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.shym-blog a.shym-blog__adj,.shym-blog a.shym-blog__adj:visited{display:flex;align-items:center;gap:16px;min-width:0;padding:16px 18px;border-radius:18px;background:var(--cream);color:var(--ink);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.shym-blog a.shym-blog__adj.is-next{flex-direction:row-reverse;text-align:right}
.shym-blog a.shym-blog__adj:hover,.shym-blog a.shym-blog__adj:focus-visible{transform:translateY(-2px);box-shadow:var(--lift)}
.shym-blog a.shym-blog__adj:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-blog .shym-blog__adj-go{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--white);color:var(--ink);transition:background .3s,color .3s}
.shym-blog .shym-blog__adj-go svg{width:16px;height:16px}
.shym-blog a.shym-blog__adj.is-prev .shym-blog__adj-go svg{transform:rotate(180deg)}
.shym-blog a.shym-blog__adj:hover .shym-blog__adj-go,.shym-blog a.shym-blog__adj:focus-visible .shym-blog__adj-go{background:var(--orange);color:var(--white)}
.shym-blog .shym-blog__adj-pic{flex:0 0 64px;width:64px;height:64px;overflow:hidden;border-radius:14px}
.shym-blog .shym-blog__adj-pic img{width:100%;height:100%;max-width:none;object-fit:cover}
.shym-blog .shym-blog__adj-words{display:flex;flex-direction:column;gap:4px;min-width:0}
.shym-blog .shym-blog__adj-words i{font:normal 400 14px/1.4 var(--font);color:var(--muted)}
.shym-blog .shym-blog__adj-words b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:600 17px/1.3 var(--font);letter-spacing:-.01em;color:var(--ink)}

/* the author card at the end of the post */
.shym-blog .shym-blog__author{display:flex;align-items:flex-start;gap:24px;margin-top:clamp(52px,5vw,76px);padding:clamp(24px,2.6vw,36px);border-radius:18px;background:var(--cream)}
.shym-blog .shym-blog__author>img{flex:0 0 88px;width:88px;height:88px;border-radius:50%;object-fit:cover}
.shym-blog p.shym-blog__author-eyebrow{margin:0 0 6px;font:400 14px/1.5 var(--font);color:var(--muted)}
.shym-blog p.shym-blog__author-name{margin:0 0 10px;font:600 26px/1.18 var(--font);letter-spacing:-.02em;color:var(--ink)}
.shym-blog p.shym-blog__author-bio{margin:0;font:400 15px/1.6 var(--font);color:var(--body)}
.shym-blog p.shym-blog__author-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin:16px 0 0}
.shym-blog p.shym-blog__author-links a,.shym-blog p.shym-blog__author-links a:visited{display:inline-flex;align-items:center;gap:8px;font:600 14px/1.4 var(--font);color:var(--ink);transition:color .2s}
.shym-blog p.shym-blog__author-links a:hover,.shym-blog p.shym-blog__author-links a:focus-visible{color:var(--orange)}
.shym-blog p.shym-blog__author-links svg{width:18px;height:18px}

/* the help card stays in view beside the post */
.shym-blog .shym-blog__rail{position:sticky;top:var(--top)}
.shym-blog .shym-blog__help{padding:28px;border-radius:18px;background:var(--cream)}
.shym-blog p.shym-blog__help-title{margin:0 0 12px;font:600 26px/1.15 var(--font);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.shym-blog p.shym-blog__help-text{margin:0 0 22px;font:400 15px/1.6 var(--font);color:var(--body)}
.shym-blog .shym-blog__help-btns{display:flex;flex-direction:column;gap:10px}
.shym-blog a.shym-blog__btn,.shym-blog a.shym-blog__btn:visited{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:6px 22px;border-radius:999px;background:var(--orange);color:var(--white);font:600 15px/1.2 var(--font);text-align:center;transition:color .3s .12s,transform .2s}
/* the primary button's Rise: plum rises from the bottom with a curved top (DESIGN.md, Buttons) */
.shym-blog a.shym-blog__btn::before{content:"";position:absolute;z-index:-1;left:-10%;width:120%;bottom:0;height:175%;background:var(--ink);border-radius:50% 50% 0 0/32% 32% 0 0;transform:translateY(101%);transition:transform .65s cubic-bezier(.6,.05,.2,1);pointer-events:none}
.shym-blog a.shym-blog__btn:hover::before,.shym-blog a.shym-blog__btn:focus-visible::before{transform:translateY(0)}
.shym-blog a.shym-blog__btn:active{transform:scale(.97)}
.shym-blog a.shym-blog__btn.is-line,.shym-blog a.shym-blog__btn.is-line:visited{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);transition:background .25s,color .25s,transform .2s}
.shym-blog a.shym-blog__btn.is-line::before{display:none}
.shym-blog a.shym-blog__btn.is-line:hover,.shym-blog a.shym-blog__btn.is-line:focus-visible{background:var(--ink);color:var(--white)}
.shym-blog a.shym-blog__btn svg{width:18px;height:18px}
.shym-blog a.shym-blog__rating,.shym-blog a.shym-blog__rating:visited{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:20px;font:400 14px/1.4 var(--font);color:var(--body)}
.shym-blog a.shym-blog__rating .shym-look-stars{display:flex;gap:2px;color:var(--star)}
.shym-blog a.shym-blog__rating .shym-look-stars svg{width:16px;height:16px;fill:var(--star)}
.shym-blog a.shym-blog__rating b{font-weight:600;color:var(--ink)}
.shym-blog a.shym-blog__rating:hover span:last-child{text-decoration:underline;text-underline-offset:3px}

/* ---------- a story section head (the home page's): eyebrow and heading at the left, a line and a link at the right ---------- */
.shym-blog .shym-blog__sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin:0 0 clamp(32px,4vw,56px)}
.shym-blog p.shym-blog__sec-eyebrow{margin:0 0 18px;font:600 12.5px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.shym-blog h2.shym-blog__sec-title{margin:0;max-width:11em;font:600 clamp(40px,5.2vw,88px)/.96 var(--font);letter-spacing:-.04em;text-transform:none;color:var(--ink)}
.shym-blog .shym-blog__sec-side{display:flex;flex-direction:column;align-items:flex-start;gap:18px;flex:none;max-width:360px}
.shym-blog .shym-blog__sec-side p{margin:0;font:400 17px/1.6 var(--font);color:var(--body)}
.shym-blog a.shym-blog__more,.shym-blog a.shym-blog__more:visited{display:inline-flex;align-items:center;gap:6px;font:600 15px/1.3 var(--font);color:var(--orange);transition:color .2s}
.shym-blog a.shym-blog__more svg{width:16px;height:16px;transition:transform .25s}
.shym-blog a.shym-blog__more:hover,.shym-blog a.shym-blog__more:focus-visible{color:var(--orange-deep)}
.shym-blog a.shym-blog__more:hover svg{transform:translateX(3px)}

/* ---------- 4. the products of the post: the site's product cards ---------- */
.shym-blog .shym-blog__products{padding:clamp(72px,7vw,112px) 0 clamp(108px,10vw,160px);border-top:1px solid var(--line)}

/* ---------- 5. the project strips of the home page, on a dark sheet that rises over the products ---------- */
.shym-blog .shym-blog__strips{
  --ink:#26222F;--body:#4A4451;--muted:#645D6A;--line:#E3DCD5;--cream:#EEE9E5;--white:#FFFFFF;
  --orange:#B5412A;--orange-deep:#9C3622;--star:#F6BB06;
  --font:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;z-index:2;margin-top:-28px;font-family:var(--font);
}
.shym-blog .shym-blog__strips .shym-cat__wrap{position:relative;width:min(1365px,calc(100% - 48px));margin:0 auto}
.shym-blog .shym-blog__strips .shym-part.is-projects{margin-top:0;padding-bottom:clamp(108px,10vw,160px);border-radius:28px 28px 0 0}

/* ---------- 6. "Keep reading": the home page's three tall guide cards, on a white sheet over the dark one ---------- */
.shym-blog .shym-blog__keep{position:relative;z-index:3;margin-top:-28px;padding:clamp(80px,9vw,128px) 0 clamp(108px,10vw,156px);border-radius:28px 28px 0 0;background:var(--white)}
.shym-blog ul.shym-blog__guides{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:14px;height:clamp(440px,40vw,600px);margin:0;padding:0;list-style:none}
.shym-blog ul.shym-blog__guides>li{display:flex;min-width:0;margin:0;padding:0}
.shym-blog ul.shym-blog__guides>li::before{display:none}
.shym-blog a.shym-blog__guide,.shym-blog a.shym-blog__guide:visited{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;overflow:hidden;isolation:isolate;border-radius:18px;background:var(--ink);color:var(--white);text-decoration:none}
.shym-blog a.shym-blog__guide:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-blog .shym-blog__guide-pic{position:absolute;inset:0;z-index:-1;display:block}
.shym-blog .shym-blog__guide-pic img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;transition:transform 1.4s var(--slow)}
.shym-blog .shym-blog__guide-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(38,34,47,.9) 0%,rgba(38,34,47,.62) 34%,rgba(38,34,47,0) 66%)}
.shym-blog a.shym-blog__guide:hover .shym-blog__guide-pic img{transform:scale(1.05)}
.shym-blog .shym-blog__guide-words{display:flex;flex-direction:column;gap:10px;padding:0 clamp(22px,2.2vw,32px) clamp(24px,2.4vw,34px)}
.shym-blog .shym-blog__guide-words i{font:normal 500 14px/1.5 var(--font);color:rgba(255,255,255,.88)}
.shym-blog .shym-blog__guide-words i span{white-space:nowrap}
.shym-blog .shym-blog__guide-words b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;font:700 26px/1.12 var(--font);letter-spacing:-.02em;color:var(--white)}
.shym-blog .shym-blog__guide-go{position:absolute;top:clamp(18px,1.8vw,24px);right:clamp(18px,1.8vw,24px);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--white);color:var(--ink);transition:background .3s,color .3s}
.shym-blog .shym-blog__guide-go svg{width:18px;height:18px;transition:transform .3s}
.shym-blog a.shym-blog__guide:hover .shym-blog__guide-go,.shym-blog a.shym-blog__guide:focus-visible .shym-blog__guide-go{background:var(--orange);color:var(--white)}
.shym-blog a.shym-blog__guide:hover .shym-blog__guide-go svg{transform:translateX(2px)}

/* ---------- motion: once, never holding the page (DESIGN.md 7, Motion; The Still Version Rule) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* the photo settles, the words of the title rise one after another, 55ms apart, then the rest */
  .shym-blog .shym-blog__hero-photo img,.shym-blog figure.shym-blog__hero-card img{animation:shym-blog-settle 9s var(--ease) both}
  .shym-blog figure.shym-blog__hero-card{animation:shym-blog-rise 1s var(--slow) .25s both}
  .shym-blog .shym-blog__hero-copy>*{animation:shym-blog-rise 1s var(--slow) both}
  .shym-blog .shym-blog__hero-copy>.shym-blog__h1{animation:none}
  .shym-blog .shym-blog__w{display:inline-block;animation:shym-blog-rise 1s var(--slow) both;animation-delay:calc(var(--i,0) * 55ms + 80ms)}
  .shym-blog .shym-blog__hero-copy>.shym-blog__lead{animation-delay:.45s}
  .shym-blog .shym-blog__hero-copy>.shym-blog__hero-btns{animation-delay:.55s}
  .shym-blog .shym-blog__hero-copy>.shym-blog__by{animation-delay:.68s}
  .shym-blog .shym-blog__hero-parts{animation:shym-blog-rise 1s var(--slow) .5s both}
  .shym-blog .shym-blog__factsec{animation:shym-blog-rise 1s var(--slow) .5s both}
  /* parts further down rise in once as they come on screen (shym-blog.js) */
  .shym-blog.is-rise .is-rise-wait{opacity:0;transform:translateY(40px);transition:opacity 1s var(--slow),transform 1s var(--slow);transition-delay:var(--d,0s)}
  .shym-blog.is-rise .is-rise-wait.is-in{opacity:1;transform:none}
}
@keyframes shym-blog-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes shym-blog-settle{from{transform:scale(1.06)}to{transform:none}}

/* ---------- smaller computers: the help card goes under the post ---------- */
@media (max-width:1279px){
  .shym-blog__body,.shym-blog__body.no-toc{grid-template-columns:minmax(0,220px) minmax(0,720px);justify-content:start;gap:48px}
  .shym-blog .shym-blog__rail{position:static;grid-column:2;margin-top:8px}
  .shym-blog .shym-blog__help{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 32px}
  .shym-blog .shym-blog__help>p{grid-column:1}
  .shym-blog p.shym-blog__help-text{margin:0}
  .shym-blog .shym-blog__help-btns{grid-column:2;grid-row:1 / span 3}
  .shym-blog a.shym-blog__rating{grid-column:1;margin-top:6px}
}

/* ---------- tablets: one column; "On this page" opens from a button ---------- */
@media (max-width:1024px){
  .shym-blog__hero.is-soft .shym-blog__hero-in{grid-template-columns:minmax(0,1fr);gap:36px;padding-bottom:132px}
  .shym-blog figure.shym-blog__hero-card{order:-1;justify-self:start;width:min(100%,720px);max-height:none}
  .shym-blog ul.shym-blog__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shym-blog__body,.shym-blog__body.no-toc{display:block;width:min(720px,calc(100% - 48px));padding-top:56px}
  .shym-blog .shym-blog__toc.is-empty{display:none}
  .shym-blog .shym-blog__left{position:static}
  .shym-blog .shym-blog__share.is-side{display:none}
  .shym-blog .shym-blog__toc{position:static;max-height:none;overflow:visible;margin:0 0 40px;border-radius:18px;background:var(--cream)}
  .shym-blog p.shym-blog__toc-title{display:none}
  .shym-blog button.shym-blog__toc-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;margin:0;padding:14px 20px;border:0;border-radius:18px;background:none;color:var(--ink);font:600 17px/1.3 var(--font);text-align:left;cursor:pointer}
  .shym-blog button.shym-blog__toc-btn span{flex:1}
  .shym-blog button.shym-blog__toc-btn i{font:normal 400 14px/1.4 var(--font);color:var(--muted)}
  .shym-blog button.shym-blog__toc-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;transition:transform .3s var(--slow)}
  .shym-blog .shym-blog__toc.is-open button.shym-blog__toc-btn svg{transform:rotate(180deg)}
  .shym-blog button.shym-blog__toc-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .shym-blog .shym-blog__toc ol{margin:0 20px;padding:0 0 16px;border-left:0;border-top:1px solid rgba(38,34,47,.12)}
  .shym-blog .shym-blog__toc a,.shym-blog .shym-blog__toc a:visited{margin:0;padding:10px 0;border:0;font-size:15px;color:var(--body)}
  .shym-blog .shym-blog__toc a.is-on{border:0;font-weight:400;color:var(--body)}
  .shym-blog.is-js .shym-blog__toc:not(.is-open) ol{display:none}
  .shym-blog .shym-blog__rail{margin-top:48px}
  .shym-blog .shym-blog__sec-head{flex-direction:column;align-items:flex-start}
  /* the guides: a swipe row of three tall cards */
  .shym-blog ul.shym-blog__guides{display:flex;gap:12px;height:auto;margin-right:calc(50% - 50vw);padding-right:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .shym-blog ul.shym-blog__guides::-webkit-scrollbar{display:none}
  .shym-blog ul.shym-blog__guides>li{flex:0 0 320px;scroll-snap-align:start}
  .shym-blog.is-rise ul.shym-blog__guides>li.is-rise-wait{opacity:1;transform:none}
  .shym-blog a.shym-blog__guide,.shym-blog a.shym-blog__guide:visited{aspect-ratio:4/5}
  /* the words take more of a narrow card, so the shade reaches higher */
  .shym-blog .shym-blog__guide-pic::after{background:linear-gradient(0deg,rgba(38,34,47,.92) 0%,rgba(38,34,47,.82) 48%,rgba(38,34,47,0) 80%)}
}

/* ---------- phones ---------- */
@media (max-width:767px){
  .shym-blog__wrap,.shym-blog .shym-blog__strips .shym-cat__wrap{width:calc(100% - 32px)}
  /* full: the photo fills the top, the words at its foot; soft: the picture first under the bar, the words under it */
  .shym-blog__hero,body.shym-look.shym-look-over .shym-blog__hero{--hero-h:auto;min-height:0}
  .shym-blog__hero.is-full,body.shym-look.shym-look-over .shym-blog__hero.is-full{min-height:min(72svh,620px)}
  .shym-blog__hero-in,body.shym-look.shym-look-over .shym-blog__hero-in{width:calc(100% - 32px);padding:calc(48px + var(--shym-main-h,64px)) 0 84px}
  .shym-blog__hero.is-full .shym-blog__hero-in,body.shym-look.shym-look-over .shym-blog__hero.is-full .shym-blog__hero-in{padding-top:calc(110px + var(--shym-main-h,64px))}
  .shym-blog__hero-photo::after{background:linear-gradient(180deg,rgba(38,34,47,.78) 0%,rgba(38,34,47,.3) 14%,rgba(38,34,47,0) 26%),linear-gradient(0deg,rgba(38,34,47,.96) 0%,rgba(38,34,47,.86) 48%,rgba(38,34,47,.58) 70%,rgba(38,34,47,0) 92%)}
  .shym-blog__hero.is-soft .shym-blog__hero-in,body.shym-look.shym-look-over .shym-blog__hero.is-soft .shym-blog__hero-in{gap:24px;padding-top:calc(12px + var(--shym-main-h,64px))}
  .shym-blog figure.shym-blog__hero-card{width:100%;border-radius:22px}
  .shym-blog__hero-copy>*,.shym-blog__hero-copy>.shym-blog__h1{max-width:none}
  .shym-blog p.shym-blog__eyebrow{margin-bottom:16px}
  .shym-blog h1.shym-blog__h1{font-size:clamp(38px,10.4vw,56px)}
  .shym-blog h1.shym-blog__h1.is-long{font-size:clamp(34px,9vw,44px)}
  .shym-blog h1.shym-blog__h1.is-longer{font-size:clamp(30px,8vw,38px);line-height:1.02}
  .shym-blog p.shym-blog__lead{margin-top:18px;font-size:16px}
  .shym-blog p.shym-blog__by{margin-top:22px}
  .shym-blog .shym-blog__hero-btns{align-self:stretch;margin-top:22px;gap:10px}
  .shym-blog .shym-blog__hero-btns a.shym-blog__btn{flex:1 1 0;padding:6px 12px;white-space:nowrap}
  .shym-blog__factsec{margin-top:-52px}
  .shym-blog ul.shym-blog__facts{gap:18px 14px;padding:20px 18px}
  .shym-blog ul.shym-blog__facts li{align-items:flex-start;gap:10px}
  .shym-blog .shym-blog__fact-icon{flex-basis:32px;width:32px;height:32px}
  .shym-blog .shym-blog__fact-icon svg{width:17px;height:17px}
  .shym-blog ul.shym-blog__facts b{font-size:15px}
  .shym-blog ul.shym-blog__facts i{font-size:13px}
  .shym-blog__body,.shym-blog__body.no-toc{width:calc(100% - 32px);padding:40px 0 64px}
  .shym-blog .shym-blog__toc{margin-bottom:32px}
  /* the words: 16px on a phone */
  .shym-blog__article{font-size:16px;line-height:1.65}
  .shym-blog .shym-blog__article p{margin-bottom:18px}
  .shym-blog .shym-blog__article h2{margin-top:44px;font-size:clamp(26px,7.2vw,32px);line-height:1.1}
  .shym-blog .shym-blog__article h3{margin-top:32px;font-size:20px;line-height:1.25}
  .shym-blog .shym-blog__article figure,.shym-blog .shym-blog__article .wp-caption,.shym-blog .shym-blog__article .wp-block-image{margin:28px 0}
  .shym-blog .shym-blog__article .shym-blog__table{margin:28px -16px;padding:4px 16px;border-radius:0}
  .shym-blog .shym-blog__article .shym-blog__table.is-wide table{min-width:560px}
  .shym-blog .shym-blog__article .shym-blog__table table{font-size:14px}
  .shym-blog .shym-blog__article .shym-blog__keys{padding:22px 20px}
  .shym-blog .shym-blog__article .shym-blog__keys>h2,.shym-blog .shym-blog__article .shym-blog__keys>h3,.shym-blog .shym-blog__article .shym-blog__keys>h4,.shym-blog .shym-blog__article .shym-blog__keys>.shym-blog__keys-title{font-size:22px}
  .shym-blog .shym-blog__article details.shym-blog__q summary{gap:16px;padding:18px 0}
  .shym-blog .shym-blog__article .shym-blog__a{padding-right:0}
  .shym-blog .shym-blog__author{flex-direction:column;gap:16px;padding:22px 20px}
  .shym-blog .shym-blog__share.is-end{flex-direction:column;align-items:flex-start;margin-top:44px}
  .shym-blog .shym-blog__adjs{grid-template-columns:minmax(0,1fr);gap:10px}
  .shym-blog .shym-blog__adj-none{display:none}
  .shym-blog a.shym-blog__adj,.shym-blog a.shym-blog__adj:visited{gap:12px;padding:14px}
  .shym-blog .shym-blog__adj-pic{flex-basis:56px;width:56px;height:56px}
  .shym-blog .shym-blog__adj-words b{font-size:15px}
  .shym-blog .shym-blog__author>img{flex-basis:72px;width:72px;height:72px}
  .shym-blog p.shym-blog__author-name{font-size:22px}
  .shym-blog .shym-blog__rail{margin-top:40px}
  .shym-blog .shym-blog__help{display:block;padding:24px 20px}
  .shym-blog p.shym-blog__help-title{font-size:22px}
  .shym-blog p.shym-blog__help-text{margin-bottom:20px}
  .shym-blog h2.shym-blog__sec-title{font-size:clamp(38px,10.6vw,56px)}
  .shym-blog .shym-blog__products{padding:56px 0 92px}
  .shym-blog .shym-blog__strips{margin-top:-22px}
  .shym-blog .shym-blog__strips .shym-part.is-projects{padding-bottom:92px;border-radius:22px 22px 0 0}
  .shym-blog .shym-blog__keep{margin-top:-22px;padding:64px 0 92px;border-radius:22px 22px 0 0}
  .shym-blog ul.shym-blog__guides{margin-right:-16px;padding-right:16px}
  .shym-blog ul.shym-blog__guides>li{flex-basis:80vw}
}

/* ---------- NZ: the Google rating (Australia's shym-shell.css, a.shym-look-rating) ---------- */
.shym-blog a.shym-look-rating,.shym-blog a.shym-look-rating:visited{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font:400 14px/1.5 var(--font);color:rgba(255,255,255,.88);text-decoration:none}
.shym-blog a.shym-look-rating b{font-weight:600;color:var(--white)}
.shym-blog a.shym-look-rating:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
.shym-blog .shym-look-stars{display:flex;gap:2px}
.shym-blog .shym-look-stars svg{display:block;width:16px;height:16px;fill:var(--star)}

/* ---------- NZ: no project strips (no live NZ projects), so "Keep reading" follows the products on the same white:
   a Line between them in place of the white sheet over the dark one ---------- */
.shym-blog .shym-blog__products+.shym-blog__keep{margin-top:0;border-top:1px solid var(--line);border-radius:0}