/*
Theme Name: Saturday Mornings
Text Domain: saturday-mornings
Version: 1.0.0
Requires PHP: 8.4
Update URI: false
*/
@font-face{font-family:"Bricolage Grotesque";src:url(assets/fonts/bricolage-grotesque-wght.woff2) format("woff2-variations");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(assets/fonts/figtree-wght.woff2) format("woff2-variations");font-weight:300 900;font-display:swap}
:root{
  --ink:#22201c;--muted:#615c54;--line:#e7e2d9;--paper:#fff;--soft:#faf8f4;
  --accent:#d2542f;--accent-text:#a8401c;
  --sky:#d9ebf2;--butter:#f8ecc4;--sage:#e1ecd3;--rose:#f7dfdb;--peach:#fae3d0;--lilac:#e9e1f4;
  --d:"Bricolage Grotesque",system-ui,sans-serif;--b:"Figtree",system-ui,sans-serif;
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-padding-top:90px}
body{margin:0;font-family:var(--b);font-size:1.125rem;line-height:1.6;color:var(--ink);background:var(--paper)}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid #2f6fd6;outline-offset:2px}
h1,h2,h3{font-family:var(--d);letter-spacing:-.015em;line-height:1.15}
.screen-reader-text{position:absolute;left:-9999px}
.screen-reader-text:focus{left:12px;top:12px;z-index:20;background:#fff;padding:10px 14px}
.sm-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.sm-small{font-size:.875rem;color:var(--muted)}
.sm-kicker{display:block;font-size:.8125rem;font-weight:700;color:var(--accent-text);margin:0 0 4px}
.sm-facts{display:flex;flex-wrap:wrap;margin:0;font-size:.875rem;font-weight:600}
.sm-facts span+span::before{content:"|";color:#b9b2a6;margin:0 8px}
.sm-btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;border-radius:99px;padding:11px 20px}

/* Header and footer */
.sm-head{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.sm-head-in{max-width:1240px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:28px}
.sm-logo{display:inline-flex;align-items:center;gap:8px;font:800 1.375rem var(--d);text-decoration:none;white-space:nowrap}
/* Topics menu: one button in the top bar on every screen; the home page's chips do the browsing */
.sm-menu{margin-left:auto;position:relative}
.sm-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;font-size:.9375rem;font-weight:700;border:1.5px solid var(--ink);border-radius:99px;padding:8px 16px;user-select:none;transition:background .15s,color .15s}
.sm-menu summary::-webkit-details-marker{display:none}
.sm-menu summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.sm-menu[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.sm-menu summary:hover,.sm-menu[open] summary{background:var(--ink);color:#fff}
.sm-menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sm-menu-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(340px,calc(100vw - 32px));display:grid;gap:4px;padding:8px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px rgba(34,32,28,.14)}
.sm-menu-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px;text-decoration:none;transition:background .15s}
.sm-menu-item:hover,.sm-menu-item:focus-visible,.sm-menu-item.is-on{background:var(--tint)}
.sm-menu-art{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--tint);overflow:hidden}
.sm-menu-art .sm-draw{width:36px;height:36px}
.sm-menu-item>span:last-child{line-height:1.3}
.sm-menu-item strong{display:block;font-weight:700;color:var(--ink)}
.sm-menu-item small{font-size:.8125rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.sm-menu summary,.sm-menu summary::after,.sm-menu-item{transition:none}}
.sm-sun{width:20px}
.sm-foot{margin-top:72px;border-top:1px solid var(--line)}
.sm-foot-in{max-width:1240px;margin:0 auto;padding:28px 24px 40px;display:grid;gap:12px}
.sm-foot nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.9375rem;font-weight:600}
.sm-foot nav a{text-decoration:none}
.sm-foot nav a:hover{color:var(--accent-text)}
.sm-foot .sm-small{margin:0}

/* Tiles and cards */
.sm-tile{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r);background:var(--tint,var(--butter));overflow:hidden;transition:transform .2s,box-shadow .2s}
.sm-tile .sm-draw{width:46%;color:var(--ink);transition:transform .3s}
.sm-tile.has-photo img{width:100%;height:100%;object-fit:cover}
.sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:28px 22px}
.sm-card{position:relative}
.sm-card[hidden]{display:none}
.sm-card-link{display:block;text-decoration:none}
.sm-card-link .sm-kicker{margin-top:14px}
.sm-card-title{font-size:1.3125rem;font-weight:700;margin:0 0 6px}
.sm-card-link:hover .sm-tile{transform:translateY(-4px);box-shadow:0 12px 26px rgba(34,32,28,.12)}
.sm-card-link:hover .sm-draw{transform:scale(1.06) rotate(-3deg)}
.sm-card-link:hover .sm-card-title{text-decoration:underline;text-underline-offset:3px}
.sm-card-dek{margin:0 0 8px;font-size:1rem;color:var(--muted)}
.sm-badge{position:absolute;left:12px;top:12px;background:#fff;border-radius:99px;font-size:.75rem;font-weight:700;padding:3px 10px;text-transform:uppercase;letter-spacing:.04em}
.sm-chips{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 0}
.sm-chips button{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:8px 16px;font-size:.9375rem;font-weight:600;color:var(--ink);transition:border-color .15s,background .15s}
.sm-chips button:hover{border-color:var(--ink)}
.sm-chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.sm-count{font-size:.875rem;color:var(--muted);margin:14px 0 10px}
.sm-chips[hidden]+.sm-count+.sm-grid,.sm-grid:first-child{margin-top:8px}

/* Home */
.sm-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;padding-top:48px;padding-bottom:28px}
.sm-hero h1{font-size:clamp(2.25rem,5vw,3.75rem);line-height:1.02;font-weight:800;margin:0 0 14px}
.sm-hero p{font-size:1.25rem;color:var(--muted);margin:0;max-width:34em}
.sm-hero-art{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sm-hero-art span{aspect-ratio:3/4;border-radius:22px;background:var(--tint);display:grid;place-items:center}
.sm-hero-art span:nth-child(2){transform:translateY(18px)}
.sm-hero-art .sm-draw{width:72%;color:var(--ink)}
.sm-band-sec{margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.sm-band-sec h2,.sm-more h2{font-size:2rem;font-weight:800;margin:0}
.sm-sub{color:var(--muted);margin:4px 0 18px}
.sm-next{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.sm-next li{display:flex;gap:14px;align-items:center;background:var(--tint);border-radius:var(--r);padding:14px 16px}
.sm-next strong{display:block;font:700 1.0625rem/1.25 var(--d)}
.sm-date{flex:none;background:#fff;border-radius:12px;padding:6px 10px;font-size:.8125rem;font-weight:700;text-align:center;line-height:1.25;max-width:76px}
.sm-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;margin-top:18px}
.sm-topic{display:flex;align-items:center;gap:14px;border-radius:var(--r);padding:14px 18px;background:var(--tint);text-decoration:none;transition:transform .2s}
.sm-topic:hover{transform:translateY(-3px)}
.sm-topic .sm-draw{width:64px;flex:none;color:var(--ink)}
.sm-topic span{display:grid;font-size:.9375rem;color:var(--muted)}
.sm-topic strong{font:700 1.1875rem var(--d);color:var(--ink)}

/* Topic page */
.sm-band{background:var(--tint)}
.sm-band-in{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center;padding-top:26px;padding-bottom:34px}
.sm-band h1{font-size:clamp(2.125rem,4.8vw,3.5rem);font-weight:800;line-height:1.02;margin:4px 0 12px}
.sm-band p{margin:0;max-width:34em;font-size:1.1875rem}
.sm-band .sm-small{margin-top:12px}
.sm-band-art .sm-draw{width:44%;margin:0 auto;color:var(--ink)}
.sm-start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);border:1.5px solid var(--line);border-radius:22px;overflow:hidden;margin:28px 0;text-decoration:none;transition:border-color .2s,transform .2s}
.sm-start:hover{border-color:var(--ink);transform:translateY(-2px)}
.sm-start .sm-tile{border-radius:0;aspect-ratio:auto;min-height:220px}
.sm-start-text{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:24px 28px}
.sm-start-text strong{font:800 clamp(1.5rem,2.6vw,2rem)/1.12 var(--d)}
.sm-crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:.875rem;color:var(--muted);margin:0 0 14px}
.sm-crumbs a{color:var(--muted);text-underline-offset:3px}

/* Article */
.sm-art{padding-top:22px}
.sm-art-head{max-width:820px}
.sm-art-head h1{font-size:clamp(2rem,4.4vw,3.25rem);line-height:1.05;font-weight:800;margin:4px 0 12px}
.sm-dek{font-size:1.25rem;color:var(--muted);margin:0 0 12px}
.sm-by{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:.875rem;color:var(--muted);line-height:1.4}
.sm-by strong{color:var(--ink);font-size:1rem}
.sm-avatar{border-radius:50%;background:var(--peach)}
.sm-photo{margin:26px 0 0}
.sm-photo img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:22px}
.sm-art-body{display:grid;grid-template-columns:240px minmax(0,720px);gap:56px;margin-top:36px}
.sm-toc{position:sticky;top:84px;align-self:start;font-size:.9375rem}
.sm-toc summary{font-weight:700;cursor:pointer;margin-bottom:8px;list-style:none}
.sm-toc summary::-webkit-details-marker{display:none}
.sm-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.sm-toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none}
.sm-toc a:hover{color:var(--ink)}
.sm-toc a.is-on{color:var(--ink);font-weight:700;border-left-color:var(--accent)}
.sm-prose{min-width:0}
.sm-prose>*:first-child{margin-top:0}
.sm-prose h2{font-size:1.875rem;font-weight:800;margin:44px 0 12px}
.sm-prose h3{font-size:1.25rem;font-weight:700;margin:28px 0 6px}
.sm-prose p,.sm-prose ul,.sm-prose ol{margin:0 0 14px}
.sm-prose a{color:var(--accent-text);text-underline-offset:3px}
.sm-prose li{margin:4px 0}
.sm-table{overflow-x:auto;border:1.5px solid var(--line);border-radius:var(--r);margin:0 0 16px}
.sm-prose table{width:100%;border-collapse:collapse;font-size:1rem}
.sm-prose th,.sm-prose td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top;min-width:92px}
.sm-prose thead th{font-size:.8125rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);background:var(--soft);hyphens:auto}
.sm-prose tbody tr:last-child>*{border-bottom:0}
.sm-figure{margin:20px 0}
.sm-figure img{border-radius:var(--r);border:1px solid var(--line);width:100%}
.sm-figure figcaption,.sm-figure em{display:block;font-size:.875rem;color:var(--muted);margin-top:6px}
/* Openings: question guides get a Quick Answer, how-tos get Project at a Glance. Labels come from the theme. */
.sm-summary,.sm-glance{background:var(--tint);border-radius:var(--r);padding:18px 22px;margin:0 0 28px}
.sm-summary::before,.sm-glance::before{display:block;font-size:.8125rem;font-weight:700;color:var(--accent-text);margin-bottom:6px}
.sm-summary::before{content:"Quick Answer"}
.sm-glance::before{content:"Project at a Glance"}
.sm-summary p{font-size:1.1875rem;line-height:1.5}
.sm-summary p:last-child{margin:0}
.sm-glance{display:flex;flex-wrap:wrap}
.sm-glance::before{flex-basis:100%}
.sm-glance div{padding:0 22px;border-left:1.5px solid rgba(34,32,28,.18)}
.sm-glance div:first-of-type{padding-left:0;border-left:0}
.sm-glance dt{font-size:.875rem;font-weight:600;color:var(--muted)}
.sm-glance dd{margin:0;font:700 1.25rem/1.25 var(--d);white-space:nowrap}
.sm-safety{background:var(--rose);border-radius:var(--r);padding:18px 22px;margin:16px 0}
.sm-safety::before{content:"Safety";display:block;font-size:.8125rem;font-weight:700;color:var(--accent-text);margin-bottom:6px}
.sm-safety p:last-child{margin:0}
.sm-prose ol.sm-steps,.sm-prose .sm-steps{list-style:none;counter-reset:s;padding:0;display:grid;gap:14px}
.sm-steps>li{counter-increment:s;position:relative;padding:16px 18px 16px 70px;border:1.5px solid var(--line);border-radius:var(--r)}
.sm-steps h3{margin:0 0 4px}
.sm-steps p:last-child{margin:0}
.sm-steps>li::before{content:counter(s);position:absolute;left:18px;top:14px;width:36px;height:36px;border-radius:50%;background:var(--accent-text);color:#fff;font:800 1.125rem var(--d);display:grid;place-items:center}
.sm-author{display:flex;gap:16px;align-items:center;background:var(--soft);border-radius:var(--r);padding:18px;margin-top:40px}
.sm-author p{margin:2px 0 0;font-size:.9375rem;color:var(--muted)}
.sm-more{margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.sm-more .sm-grid{margin-top:18px}
/* Yes, Limited and No cells in comparison tables */
.sm-yes,.sm-no,.sm-limited{display:inline-block;border-radius:99px;padding:2px 12px;font-size:.875rem;font-weight:700;white-space:nowrap}
.sm-yes{background:#cfe5c6}.sm-no{background:var(--rose)}.sm-limited{background:var(--butter)}
/* A fact no source states: a quiet dashed pill; the words stay for screen readers and search */
.sm-na{display:inline-block;position:relative;width:46px;height:26px;vertical-align:middle;border:1.5px dashed #cdc6b8;border-radius:99px;font-size:0;color:transparent;overflow:hidden}
.sm-na::before{content:"\2013";content:"\2013" / "";position:absolute;inset:0;display:grid;place-items:center;font-size:1rem;font-weight:700;color:var(--muted)}
.sm-prose td:first-child,.sm-prose th:first-child{position:sticky;left:0;background:#fff;z-index:1;font-weight:700;box-shadow:1px 0 0 var(--line)}
.sm-prose thead th:first-child{background:var(--soft)}
/* Figures open full size on tap or click */
.sm-figure img{cursor:zoom-in}
.sm-zoom{position:fixed;inset:0;z-index:50;background:rgba(34,32,28,.86);display:flex}
.sm-zoom[hidden]{display:none}
.sm-zoom-pane{margin:auto;max-width:100%;max-height:100%;overflow:auto;padding:56px 16px 16px}
.sm-zoom-pane img{display:block;max-width:none;width:min(1200px,96vw);border-radius:12px;background:#fff}
.sm-zoom-close{position:fixed;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:1.75rem;line-height:1}
html.sm-zoom-on{overflow:hidden}
@media (max-width:640px){.sm-zoom-pane img{width:1100px}.sm-figure::after{content:"Tap to enlarge";display:block;font-size:.8125rem;color:var(--muted);margin-top:4px}}
/* Calculators from the site plugin */
.sb-tool{background:var(--soft);border:1.5px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:20px 0}
.sb-tool__title{font:800 1.25rem var(--d);margin:0 0 10px}
.sb-tool__field{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;font-weight:600;font-size:.9375rem}
.sb-tool__field input,.sb-tool__field select{font:inherit;padding:8px 10px;border:1.5px solid var(--line);border-radius:12px;background:#fff}
.sb-tool__result,.sb-tool__out{font:700 1.25rem var(--d)}
.sb-tool__label{text-wrap:balance}

/* Pages and 404 */
.sm-page{max-width:820px;padding-top:22px}
.sm-page h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin:0 0 18px}
.sm-404{text-align:center;padding-top:56px;max-width:640px}
.sm-404 .sm-tile{width:200px;margin:0 auto 20px}
.sm-404 h1{font-size:2.5rem;font-weight:800;margin:0 0 10px}

@media (max-width:980px){
  .sm-hero,.sm-band-in{grid-template-columns:1fr}
  .sm-hero-art{max-width:420px;margin-bottom:24px}
  .sm-band-art{display:none}
  .sm-start{grid-template-columns:1fr}
  .sm-start .sm-tile{min-height:160px}
  .sm-art-body{grid-template-columns:minmax(0,1fr);gap:20px}
  .sm-toc{position:static;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px}
  .sm-toc details:not([open]) summary{margin:0}
}
@media (max-width:640px){
  .sm-glance{display:grid;grid-template-columns:1fr 1fr;row-gap:12px}
  .sm-glance::before{grid-column:1/-1}
  .sm-glance div{padding:0 0 0 14px}
  .sm-glance div:nth-of-type(odd){padding-left:0;border-left:0}
  .sm-glance dd{white-space:normal}
}
@media (max-width:520px){
  body{font-size:1.0625rem}
  .sm-wrap{padding:0 16px}
  .sm-head-in{padding:10px 16px;gap:12px}
  .sm-logo{font-size:1.1875rem}
  .sm-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:8px -16px 0;padding:0 16px}
  .sm-chips button{white-space:nowrap}
  .sm-steps>li{padding-left:18px;padding-top:62px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}