/* =============================================================
   meaghanmalone.com: a journal and a shop for teachers
   Old-academia warmth with a house full of color: blush-cream paper, deep navy
   ink, and color-blocked panels in Meaghan's own colors (mulberry, magenta, burnt
   orange, deep navy, with lilac, rose pink, marigold, and peach), photos in ornate
   notched frames, soft wavy edges, and checkerboard trim. Every subject and shop
   category wears one color, and pieces without a photo get a cover of that color
   with an ornate frame drawn on it (js/site.js).
   Type: Instrument Serif (headlines), Sorts Mill Goudy (reading),
   Hanken Grotesk (menus, labels, and buttons in small bold spaced capitals).
   No decorative italics: italic is only for emphasis inside a post.
   ============================================================= */
:root{
  /* the palette: a house full of color on warm paper, with navy ink */
  --paper:#FCF2EC;        /* the page: blush cream */
  --paper2:#F6E4DA;       /* quiet boxes, and frames waiting for a picture */
  --ink:#1E2A45;          /* text and headlines: deep navy, 13:1 on the page */
  --ink2:#5A5D6C;         /* quieter text: 6:1 on the page */
  --navy:#24365E;         /* buttons and links */
  --brick:#A3245F;        /* the small category labels and prices (deep magenta): 6.4:1 on the page */
  --mulberry:#7E1F4C;     /* the logo's color */
  --magenta:#B8326E;
  --orange:#C4501C;       /* burnt orange: deep enough for white text */
  --lilac:#D9CCF0;
  --pink:#F2A7C3;
  --marigold:#E9A23B;
  --peach:#F0B59B;
  --check:#F3E6D0;        /* the light square in the checkerboard trim */

  /* roles */
  --line:rgba(30,42,69,.16);
  --line-strong:rgba(30,42,69,.45);
  --accent:var(--navy);
  --accent-deep:var(--navy);

  --slab:'Instrument Serif', 'Times New Roman', Georgia, serif;     /* headlines: slim, classic */
  --read:'Sorts Mill Goudy', 'Goudy Old Style', Georgia, serif;     /* reading: an old-style book face */
  --ui:'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;       /* menus, labels, buttons: small bold capitals */

  --wrap:1240px;
  --gutter:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.1,1);
  --track:.16em;

  /* names the guide tools in posts use (js/guide.js) */
  --plum:var(--ink); --wine:var(--brick); --accent-text:var(--brick); --rule:var(--line);
  --bg:var(--paper); --panel:var(--paper2); --band:var(--paper2); 
   --dark:var(--navy); --ink3:#8A8C98; --radius:2px;
  --label:var(--slab); --mono:var(--ui); --sans:var(--ui);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--pink);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
h1,h2,h3{font-family:var(--slab);font-weight:500;line-height:1.08;margin:0;color:var(--ink);text-wrap:balance;letter-spacing:-.01em}
p{text-wrap:pretty}
em,i{font-style:normal}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{display:none}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:300;border-radius:0}
.skip:focus{left:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.note{color:var(--ink2)}

/* ---------- the stroke: one palette color per subject and shop category ---------- */
.dot{display:inline-block;width:.62em;height:.9em;border-radius:40% 45% 38% 50% / 12% 10% 14% 12%;background:var(--c,var(--navy));flex:none;opacity:.92}
.c-mulberry{--c:var(--mulberry);--c-ink:#fff;--c-soft:#EBD6E0}
.c-magenta{--c:var(--magenta);--c-ink:#fff;--c-soft:#F5DCE7}
.c-orange{--c:var(--orange);--c-ink:#fff;--c-soft:#F6DED2}
.c-lilac{--c:var(--lilac);--c-ink:var(--ink);--c-soft:#EEE8F8}
.c-pink{--c:var(--pink);--c-ink:var(--ink);--c-soft:#FAE4EC}
.c-marigold{--c:var(--marigold);--c-ink:var(--ink);--c-soft:#F8E6C8}
.c-peach{--c:var(--peach);--c-ink:var(--ink);--c-soft:#FAE5DB}
.c-navy{--c:var(--navy);--c-ink:#fff;--c-soft:#DDE1EA}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:4px;border:2px solid var(--navy);background:var(--navy);color:#fff;font:500 .86rem/1.1 var(--ui);letter-spacing:var(--track);text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:#6F1239;border-color:#6F1239;color:#fff}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.wide{width:100%}
.btn[disabled]{opacity:.6;cursor:wait}
.textlink{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--pink);background:none;border:0;padding:0;font-family:inherit;font-size:inherit;cursor:pointer}
.textlink:hover{text-decoration-color:var(--ink)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(245,242,234,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);transition:box-shadow .25s}
.site-head.scrolled{box-shadow:0 1px 0 var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px}
.mark{display:block;flex:none}
.mark img{height:58px;width:auto}
.top-links{display:flex;align-items:center;gap:6px}
.top-links a{font:500 .86rem var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);text-decoration:none;padding:10px 14px;border-radius:0;display:inline-flex;align-items:center;gap:9px;transition:background .2s}
.top-links a:hover{box-shadow:inset 0 -2px 0 var(--ink)}
.top-links a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--ink)}
.top-links a .dot{width:10px;height:10px}
.top-links .top-cta{border-radius:4px;margin-left:10px;background:var(--navy);color:#fff;padding:10px 18px}
.top-links .top-cta:hover{background:#6F1239;box-shadow:none}
.menu-btn{display:none;width:48px;height:48px;border:1.5px solid var(--ink);border-radius:4px;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn span{display:block;width:20px;height:2px;border-radius:0;background:var(--ink)}
.scrim{position:fixed;inset:0;z-index:90;background:rgba(30,42,69,.35);opacity:0;transition:opacity .3s}
.scrim.on{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(360px,88vw);background:var(--paper);border-left:1.5px solid var(--ink);padding:84px 28px 32px;display:flex;flex-direction:column;gap:4px;transform:translateX(100%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s;overflow-y:auto}
.drawer.open{transform:none;visibility:visible;transition:transform .35s var(--ease)}
.drawer-close{position:absolute;top:18px;right:18px;width:48px;height:48px;border-radius:4px;border:1.5px solid var(--ink);background:transparent;font-size:1.6rem;line-height:1;color:var(--ink);cursor:pointer}
.drawer .d-main{display:flex;align-items:center;gap:14px;font:600 1.9rem/1.2 var(--slab);color:var(--ink);text-decoration:none;padding:10px 0}
.drawer .d-main .dot{width:16px;height:16px}
.drawer .d-sub{display:flex;flex-direction:column;padding:0 0 10px 30px}
.drawer .d-sub a{font:500 .86rem var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink2);text-decoration:none;padding:7px 0;display:flex;align-items:center;gap:10px}
.drawer .d-sub a .dot{width:9px;height:9px}
.drawer .btn{margin-top:22px}
@media (max-width:860px){
  .top-links{display:none}
  .menu-btn{display:flex}
  .site-head .wrap{min-height:68px}
  .mark img{height:46px}
}

/* ---------- section heads ---------- */
.sec{padding-top:clamp(56px,8vw,104px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,36px)}
.sec-head h2{font-size:clamp(2rem,4vw,2.9rem)}
.sec-head p{margin:8px 0 0;color:var(--ink2);font-size:1.05rem;max-width:52ch}

/* ---------- cover art: watercolor strokes ---------- */
.art{display:block;width:100%;height:100%;background:#F8F5EE}
.art svg{display:block;width:100%;height:100%}
.frame{display:block;position:relative;overflow:hidden;background:var(--paper2);border-radius:4px}
.frame > img,.frame > .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame > img.contain{object-fit:contain;padding:8%}

/* ---------- home: the hero ---------- */
.hero{padding:clamp(28px,5vw,64px) 0 0}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2.7rem,5.8vw,4.9rem);font-weight:500;line-height:.98;letter-spacing:-.02em}
.hero-intro{font-family:var(--read);font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.6;color:var(--ink);margin:24px 0 32px;max-width:36ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* the strokes: four brushstrokes of natural dye, side by side. Each one is a door into the site. */
.strokes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.4vw,30px);width:100%;max-width:520px;justify-self:end;align-items:end}
.stroke{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.stroke svg{display:block;width:100%;height:clamp(200px,26vw,340px);overflow:visible;transition:transform .5s var(--ease)}
.strokes li:nth-child(2) svg{height:clamp(180px,23vw,300px)}
.strokes li:nth-child(3) svg{height:clamp(210px,28vw,360px)}
.strokes li:nth-child(4) svg{height:clamp(170px,21vw,280px)}
.stroke .lab{display:flex;flex-direction:column;gap:2px;padding-top:12px;margin-top:10px;border-top:1px solid var(--line-strong)}
.stroke .lab b{font:500 .74rem/1.2 var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink2)}
.stroke .lab span{font:500 1.08rem/1.2 var(--slab);color:var(--ink)}
.stroke:hover svg{transform:translateY(-8px)}
.stroke:hover .lab span{color:var(--navy)}
@media (prefers-reduced-motion:no-preference){
  .stroke svg{animation:wash-in 1.1s var(--ease) both;animation-delay:calc(var(--k,0) * 120ms + 120ms);transform-origin:50% 100%}
}
@keyframes wash-in{from{opacity:0;transform:scaleY(.3)}to{opacity:1;transform:none}}
@media (max-width:860px){.strokes{max-width:none;justify-self:stretch}.stroke svg,.strokes li svg{height:clamp(130px,36vw,200px)!important}.stroke .lab span{font-size:.98rem}}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-intro{max-width:none}
}

/* ---------- journal pieces ---------- */
.subj{display:inline-flex;align-items:center;gap:9px;font:500 .78rem/1.2 var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);text-decoration:none}
.subj .dot{width:12px;height:12px}
a.subj:hover{text-decoration:underline;text-underline-offset:3px}
.when{font:400 .9rem var(--ui);color:var(--ink2)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}

/* the newest piece */
.feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;position:relative}
.feature .frame{aspect-ratio:4/3}
.feature h2,.feature h3{font-size:clamp(2rem,3.8vw,3.1rem);margin:14px 0 0}
.feature .sub{display:block;font:500 clamp(1.2rem,1.8vw,1.45rem)/1.3 var(--slab);color:var(--ink2);margin-top:10px;letter-spacing:0}
.feature .dek{font-family:var(--read);font-size:1.15rem;line-height:1.6;margin:16px 0 22px;color:var(--ink)}
.feature .go{font:500 .84rem var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:var(--navy);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:5px}
.feature:hover .go{text-decoration-color:var(--ink)}
.feature:hover .frame .art svg,.card:hover .frame .art svg,.product-card:hover .frame .art svg{transform:scale(1.03)}
.frame .art svg,.frame > img{transition:transform .6s var(--ease)}
.card:hover .frame > img,.feature:hover .frame > img,.product-card:hover .frame > img{transform:scale(1.03)}

/* a link that covers its whole card */
.hit{color:inherit;text-decoration:none}
.hit::after{content:"";position:absolute;inset:0;z-index:1}
.hit:focus-visible{outline:none}
.feature:has(.hit:focus-visible),.card:has(.hit:focus-visible),.product-card:has(.hit:focus-visible){outline:3px solid var(--pink);outline-offset:6px;border-radius:var(--r-img)}
.feature a.subj,.card a.subj{position:relative;z-index:2}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,44px) clamp(20px,2.6vw,36px)}
.card{position:relative;display:flex;flex-direction:column}
.card .frame{aspect-ratio:4/3;margin-bottom:16px}
.card h3{font-size:clamp(1.35rem,1.9vw,1.6rem);margin:10px 0 0}
.card .sub{display:block;font:500 1.05rem/1.3 var(--slab);color:var(--ink2);margin-top:6px;letter-spacing:0}
.card p{margin:10px 0 0;color:var(--ink2);font-size:1rem;line-height:1.55}
.card .when{margin-top:12px;font-size:.9rem}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .feature{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}

/* subject filter */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(32px,4vw,48px)}
.filter{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 16px;border-radius:0;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:500 .8rem var(--ui);letter-spacing:var(--track);text-transform:uppercase;cursor:pointer;transition:border-color .2s,background .2s}
.filter .dot{width:11px;height:11px}
.filter .n{font-size:.88rem;color:var(--ink2)}
.filter:hover{border-color:var(--line-strong)}
.filter[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.filter[aria-pressed="true"] .n{color:rgba(255,255,255,.75)}

/* the archive: an index by year */
.archive{display:grid;gap:clamp(28px,4vw,44px)}
.year{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 32px;align-items:start}
.year h3{font:500 clamp(1.8rem,3vw,2.4rem)/1 var(--slab);color:var(--peach);position:sticky;top:96px}
.rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.row h4{margin:0;font:600 1.3rem/1.25 var(--slab);color:var(--ink)}
.row h4 .sub{font-weight:500;color:var(--ink2)}
.row .r-meta{display:flex;gap:16px;align-items:center;white-space:nowrap}
.row .when{font-size:.88rem}
.row:hover h4{color:var(--accent-deep)}
@media (max-width:700px){
  .year{grid-template-columns:1fr}
  .year h3{position:static}
  .row{grid-template-columns:1fr}
}

/* ---------- page titles (journal, shop) ---------- */
.page-top{padding:clamp(40px,6vw,80px) 0 clamp(28px,4vw,44px)}
.page-top .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end}
.page-top h1{font-size:clamp(3rem,7vw,5.6rem);font-weight:500;letter-spacing:-.02em;line-height:.95}
.page-top p{font-family:var(--read);font-size:clamp(1.1rem,1.5vw,1.25rem);line-height:1.6;margin:18px 0 0;max-width:44ch}
.page-dots{display:flex;gap:10px}
.page-dots{gap:clamp(6px,1vw,12px)}
.page-dots i{width:clamp(16px,2.2vw,28px);height:clamp(54px,7vw,96px);border-radius:42% 48% 40% 50% / 10% 12% 9% 11%;background:var(--c);opacity:.92}
@media (max-width:700px){.page-top .wrap{grid-template-columns:1fr}.page-dots{order:-1}}

/* ---------- the shop ---------- */
.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,40px) clamp(18px,2.2vw,28px)}
.products.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-card{position:relative;display:flex;flex-direction:column}
.product-card .frame{aspect-ratio:1;margin-bottom:14px}
.product-card h3{font-size:1.3rem;margin:8px 0 0}
.product-card .price{font:500 1rem var(--ui);color:var(--accent-deep);margin-top:6px}
.product-card.hide{display:none}
@media (max-width:1060px){.products,.products.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.products,.products.three{grid-template-columns:repeat(2,minmax(0,1fr))}.product-card h3{font-size:1.12rem}}

.shop-empty{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center;padding:clamp(28px,4vw,48px);background:var(--paper2);border-radius:6px}
.shop-empty .se-dots{display:flex;gap:8px}
.shop-empty .se-dots i{width:clamp(16px,2vw,22px);height:clamp(70px,9vw,110px);border-radius:42% 48% 40% 50% / 10% 12% 9% 11%;background:var(--c);opacity:.92}
.shop-empty h2,.shop-empty h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.shop-empty p{margin:10px 0 18px;max-width:52ch;font-size:1.05rem}
@media (max-width:640px){.shop-empty{grid-template-columns:1fr}}
.shop-note{margin:clamp(32px,4vw,48px) 0 0;color:var(--ink2);font-size:.95rem;display:flex;gap:10px;align-items:flex-start}
.shop-note .dot{margin-top:.42em}

/* one product */
.crumb{display:inline-flex;gap:8px;align-items:center;margin:28px 0 24px;font:500 .84rem var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);text-decoration:none}
.crumb:hover{text-decoration:underline;text-underline-offset:3px}
.product{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start;padding-bottom:clamp(40px,6vw,72px)}
.gallery .frame.main{aspect-ratio:1}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs button{width:72px;height:72px;padding:0;border:2px solid transparent;border-radius:0;overflow:hidden;cursor:pointer;background:var(--paper2)}
.thumbs button[aria-current="true"]{border-color:var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.product-info{position:sticky;top:104px}
.product-info h1{font-size:clamp(2.2rem,4vw,3.2rem);margin:14px 0 0}
.product-info .price{font:600 1.5rem var(--ui);color:var(--accent-deep);margin:14px 0 0}
.product-info .dek{font-family:var(--read);font-size:1.15rem;line-height:1.6;margin:16px 0 0}
.buy{margin:26px 0 12px;display:grid;gap:12px}
.fine{margin:6px 0 0;color:var(--ink2);font-size:.92rem}
.product-desc{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--read);font-size:1.08rem;line-height:1.7}
.product-desc p{margin:0 0 1em}
.product-desc h2,.product-desc h3{margin:1.2em 0 .4em}
.product-desc h2{font-size:1.5rem}.product-desc h3{font-size:1.25rem}
@media (max-width:820px){.product{grid-template-columns:1fr}.product-info{position:static}}
.empty-state{text-align:center;max-width:560px;margin:48px auto 96px}
.empty-state h2{font-size:2.2rem}
.empty-state p{margin:12px 0 22px;color:var(--ink2)}

/* ---------- Letters: the blush band ---------- */
.letters{margin-top:clamp(64px,9vw,120px);border-bottom:0;background:var(--lilac);color:var(--ink);position:relative;overflow:hidden}
.letters .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px 64px;align-items:center;padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px);position:relative;z-index:1}
.letters h2{color:var(--ink);font-size:clamp(2.2rem,4.4vw,3.4rem)}
.letters p{margin:12px 0 0;font-size:1.05rem;color:var(--ink);max-width:42ch}
.l-field{display:flex;gap:0;background:var(--paper);border:1.5px solid var(--ink);border-radius:6px;overflow:hidden}
.l-field input{flex:1;min-width:0;border:0;background:transparent;padding:12px 16px;font:400 1.05rem var(--ui);color:var(--ink);outline:none;border-radius:0}
.l-field input:focus-visible{outline:3px solid var(--navy);outline-offset:-3px}
.letters .form-msg{margin:12px 0 0;min-height:1.4em;color:var(--ink);font-weight:500}
.inline-letters .l-field{background:#fff;box-shadow:inset 0 0 0 2px var(--line)}
.inline-letters .form-msg{margin:10px 0 0;min-height:1.4em;color:var(--ink);font-weight:500}
@media (max-width:820px){
  .letters .wrap{grid-template-columns:1fr}
}
@media (max-width:440px){
  .l-field{flex-direction:column}
  .l-field .btn{width:100%}
}

/* ---------- footer ---------- */
.site-foot{padding:48px 0 40px;background:var(--navy);color:#fff}
.site-foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 24px}
.site-foot nav a{font:500 .84rem var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:#fff;text-decoration:none}
.site-foot nav a:hover{text-decoration:underline;text-underline-offset:3px}
.site-foot .mark img{height:46px}
.foot-base{margin:0;color:#D9D7DC;font-size:.92rem;flex-basis:100%;display:flex;align-items:center;gap:12px}
.foot-dots{display:inline-flex;gap:4px}
.foot-dots i{width:7px;height:16px;border-radius:40%;background:var(--c)}
@media (max-width:600px){.site-foot nav{flex-basis:100%;order:2}.foot-base{order:3;flex-wrap:wrap}}

/* ---------- a post ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:5px;background:var(--pink);transform:scaleX(0);transform-origin:0 50%;z-index:60}
.post-head{max-width:860px;margin:0 auto;padding:clamp(40px,6vw,80px) var(--gutter) 0}
.post-head h1{font-size:clamp(2.5rem,6vw,4.4rem);font-weight:500;letter-spacing:-.02em;line-height:1.02;margin:18px 0 0}
.post-head h1.long{font-size:clamp(2.2rem,4.8vw,3.6rem)}
.post-head .h-sub{display:block;font:500 clamp(1.3rem,2.4vw,1.8rem)/1.25 var(--slab);color:var(--ink2);margin-top:14px;letter-spacing:0}
.post-head .dek{font-family:var(--read);font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.55;margin:20px 0 0;color:var(--ink)}
.byline{display:flex;align-items:center;gap:14px;margin:28px 0 0;font:500 1rem var(--ui);color:var(--ink)}
.byline .face{width:48px;height:48px;border-radius:0;overflow:hidden;flex:none;background:var(--paper2)}
.byline .face img{width:100%;height:100%;object-fit:cover}
.byline small{display:block;font-size:.92rem;font-weight:400;color:var(--ink2)}
.post-cover{max-width:1100px;margin:clamp(32px,5vw,56px) auto 0;padding:0 var(--gutter)}
.post-cover .frame{aspect-ratio:16/9}
.post-cover .frame > img.motion{object-fit:cover}

.prose{max-width:700px;margin:clamp(36px,5vw,60px) auto 0;font-family:var(--read);font-size:clamp(1.1rem,1.35vw,1.22rem);line-height:1.75;color:var(--ink)}
.prose > p{margin:0 0 1.25em}
.prose em{font-style:italic}
.prose strong{font-weight:600}
.prose a{color:var(--accent-deep);text-decoration:underline;text-decoration-color:var(--lilac);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--pink)}
.prose > h2{font-size:clamp(1.7rem,2.6vw,2.1rem);margin:1.8em 0 .6em;scroll-margin-top:110px}
.prose > h3{font-size:clamp(1.35rem,2vw,1.55rem);margin:1.6em 0 .5em}
.prose blockquote{margin:1.8em 0;padding:0 0 0 clamp(20px,3vw,32px);border-left:6px solid var(--pink);font:500 clamp(1.45rem,2.4vw,1.85rem)/1.35 var(--slab);color:var(--navy)}
.prose .orn{margin:2.2em 0;text-align:center;font-size:0;line-height:0}
.prose .orn::before{content:"";display:inline-block;width:10px;height:22px;border-radius:40%;background:var(--pink);box-shadow:16px 0 0 var(--orange),32px 0 0 var(--navy),48px 0 0 var(--lilac),64px 0 0 var(--navy),80px 0 0 var(--mulberry);margin-right:80px}
.sec-break{display:flex;align-items:center;justify-content:center;margin:2.6em 0 1.6em}
.sec-break span{display:grid;place-items:center;width:64px;height:48px;border-radius:40% 45% 38% 50% / 30% 26% 34% 28%;background:var(--lilac);color:var(--ink);font:500 1rem var(--ui);letter-spacing:var(--track)}
.sec-break + p:not(.no-drop)::first-letter{float:left;font:500 4.1em/.82 var(--slab);color:var(--navy);margin:.08em .1em 0 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:2em 0}
.stat{margin:0;padding:22px;border-radius:0;background:var(--paper2);display:flex;flex-direction:column;gap:8px}
.stat{border-top:8px solid var(--pink)}
.stat:nth-child(2){border-top-color:var(--orange)}.stat:nth-child(3){border-top-color:var(--mulberry)}
.stat b{font:500 clamp(2rem,3.4vw,2.6rem)/1 var(--slab);color:var(--navy)}
.stat span{font:400 1rem/1.45 var(--ui);color:var(--ink)}

.body-img{margin:2em 0}
.body-img img{border-radius:0;margin:0 auto}
.body-img img[src$=".png"],.body-img img[src$=".svg"],.body-img img[src$=".gif"]{border-radius:0}
.body-img figcaption,.browser figcaption{margin-top:10px;font:400 .95rem/1.45 var(--ui);color:var(--ink2);text-align:center}
.footnotes{margin-top:3em;padding-top:1.4em;border-top:1.5px solid var(--ink);font:400 .98rem/1.6 var(--ui);color:var(--ink2)}
.fn-head{font-size:1.3rem;margin:0 0 .6em}
.footnotes ol{margin:0;padding-left:1.4em}
.footnotes li{margin:0 0 .5em}
.footnotes a{color:var(--accent-deep)}
.fn-ref{font:600 .7em var(--ui);line-height:0}
.fn-ref a{text-decoration:none!important;padding:0 2px}
.fn-back{text-decoration:none!important}
/* screenshots and design blocks, if a post uses them */
.browser{margin:2em 0;border-radius:0;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(30,58,65,.5)}
.browser figcaption{padding:0 12px 12px}
.browser .chrome{display:flex;gap:6px;padding:10px 14px;background:var(--paper2)}
.browser .chrome i{width:10px;height:10px;border-radius:0;background:var(--line-strong)}
.browser .viewport{overflow:hidden;max-height:560px}
.browser.phone{max-width:320px;margin-left:auto;margin-right:auto}
.browser.scrolling .viewport img{transform:translateY(0)}
.browser.scrolling.ready.playing .viewport img{animation:glide var(--dur,20s) ease-in-out infinite alternate}
.browser.manual .viewport{overflow:auto}
@keyframes glide{to{transform:translateY(var(--shift,0))}}
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:2em 0}
.swatch-chip{display:flex;flex-direction:column;gap:4px;padding:0;border:0;background:none;text-align:left;cursor:pointer;font-family:var(--ui)}
.swatch-chip .chip{display:flex;align-items:flex-end;height:90px;padding:10px;border-radius:0;font-size:.85rem;font-weight:600}
.swatch-chip .chip-name{font-weight:600;color:var(--ink)}
.swatch-chip .chip-use{font-size:.9rem;color:var(--ink2)}
.type-specs{display:grid;gap:14px;margin:2em 0}
.type-spec{margin:0;display:grid;grid-template-columns:90px 1fr;gap:18px;align-items:center;padding:16px;border-radius:0;background:var(--paper2)}
.type-aa{font-size:3rem;line-height:1;color:var(--ink)}
.type-spec figcaption{display:flex;flex-direction:column;gap:2px;font-family:var(--ui)}
.type-sample{color:var(--ink2)}
.specs{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;margin:2em 0;font-family:var(--ui)}
.specs dt{font-weight:600;color:var(--ink)}
.specs dd{margin:0}

/* the end of a post */
.post-end{max-width:calc(700px + 2 * var(--gutter));margin:clamp(32px,4vw,48px) auto 0;padding:0 var(--gutter)}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:22px 0;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line)}
.share .thanks{font:600 1.15rem var(--slab);color:var(--ink);margin:0 auto 0 0}
.author{display:grid;grid-template-columns:84px minmax(0,1fr);gap:20px;align-items:center;margin:28px 0 0}
.author .face{width:84px;height:84px;border-radius:0;overflow:hidden;background:var(--paper2)}
.author .face img{width:100%;height:100%;object-fit:cover}
.author p{margin:0;font-size:1.02rem;color:var(--ink)}
.author strong{display:block;font:600 1.2rem var(--slab);color:var(--ink);margin-bottom:2px}

/* ---------- step-by-step guides inside a post (js/guide.js) ---------- */
.prose.has-toc{max-width:1060px;display:grid;grid-template-columns:240px minmax(0,700px);gap:0 56px;justify-content:center}
.prose.has-toc > *{grid-column:2}
.prose.has-toc > .toc{grid-column:1;grid-row:1 / span 400;align-self:stretch;margin:0}
.toc details{position:sticky;top:100px;max-height:calc(100vh - 130px);overflow:auto;padding:20px 16px 16px;border-radius:0;background:var(--paper2)}
.toc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 1.2rem var(--slab);color:var(--ink);line-height:1;cursor:default}
.toc summary::-webkit-details-marker{display:none}
.toc summary b{font:600 .8rem var(--ui);color:#fff;background:var(--ink);border-radius:0;padding:4px 10px}
.toc ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px}
.toc a{display:flex;align-items:center;gap:11px;padding:7px 8px;border-radius:0;color:var(--ink2);font:400 .95rem/1.3 var(--ui);text-decoration:none!important;transition:background .2s,color .2s}
.toc a:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.toc .n{position:relative;flex:none;width:26px;height:26px;border-radius:0;display:grid;place-items:center;font:600 .75rem var(--ui);color:var(--ink);background:#fff;box-shadow:inset 0 0 0 2px var(--lilac)}
.toc .n.dot::before{content:"";width:6px;height:6px;border-radius:0;background:var(--peach)}
.toc a.on{background:#fff;color:var(--ink);font-weight:600}
.toc a.on .n{background:var(--pink);color:#fff;box-shadow:none}
.toc .n.bonus{background:#FCEBD6;box-shadow:inset 0 0 0 2px var(--mulberry);font-size:.68rem}
.toc a.done .n{background:var(--ink);color:transparent;box-shadow:none}
.toc a.done .n::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.8rem}
.toc a.done .t{text-decoration:line-through;text-decoration-color:var(--line-strong)}
.toc .meter{margin:16px 6px 2px;padding-top:14px;border-top:1px solid var(--line)}
.toc .meter .bar{height:8px;border-radius:0;background:#fff;overflow:hidden}
.toc .meter .bar i{display:block;height:100%;width:0;border-radius:0;background:linear-gradient(90deg,var(--pink),var(--mulberry));transition:width .5s var(--ease)}
.toc .meter p{margin:8px 0 0;font:400 .85rem var(--ui);color:var(--ink2);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.toc .meter b{color:var(--ink)}
.toc .meter .reset{margin-left:auto;background:none;border:0;padding:0;font:inherit;color:var(--accent-deep);text-decoration:underline;cursor:pointer}
.toc.complete .meter p::after{content:"You did it.";flex-basis:100%;font:600 1.15rem var(--slab);color:var(--navy)}
@media (max-width:980px){
  .prose.has-toc{display:block;max-width:700px}
  .prose.has-toc > .toc{position:sticky;top:var(--toc-top,72px);z-index:20;margin-bottom:12px}
  .toc details{position:static;max-height:calc(100vh - var(--toc-top,72px) - 24px);padding:14px 18px;box-shadow:0 10px 24px -14px rgba(30,58,65,.35)}
  .toc summary{cursor:pointer}
  .toc summary::after{content:"+";font:400 1.6rem var(--ui);color:var(--ink);margin-left:14px}
  .toc details[open] summary::after{content:"\2212"}
  .toc summary b{margin-left:auto}
}
.is-guide > h2.done::after{content:"✓ Done";position:relative;top:-.3em;margin-left:.6em;font:600 .72rem var(--ui);color:#fff;background:var(--ink);padding:4px 10px;border-radius:0;vertical-align:middle}
.checklist{list-style:none;margin:0 0 1.4em;padding:6px;border-radius:0;background:#fff;box-shadow:inset 0 0 0 2px var(--line);font-family:var(--ui);font-size:1.02rem}
.checklist li + li{border-top:1px dashed var(--line)}
.checklist label{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start;padding:14px;cursor:pointer;border-radius:0;transition:background .2s}
.checklist label:hover{background:var(--paper2)}
.checklist input{position:absolute;opacity:0;pointer-events:none}
.checklist .box{width:28px;height:28px;border-radius:0;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--lilac);background:#fff;transition:background .2s,box-shadow .2s,transform .2s;margin-top:1px}
.checklist .box svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .3s var(--ease)}
.checklist input:checked + .box{background:var(--ink);box-shadow:none}
.checklist input:checked + .box svg{stroke-dashoffset:0}
.checklist input:focus-visible + .box{outline:3px solid var(--pink);outline-offset:3px}
.checklist .txt{line-height:1.55}
.checklist input:checked ~ .txt{color:var(--ink2)}
.tips{list-style:none;margin:0 0 1.4em;padding:0;display:grid;gap:10px;font-family:var(--ui)}
.tips li{position:relative;padding:12px 16px 12px 42px;background:var(--paper2);border-radius:0;line-height:1.5}
.tips li::before{content:"";position:absolute;left:18px;top:19px;width:10px;height:10px;border-radius:0;background:var(--pink)}
.copy{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:0;background:var(--ink);color:#fff;font:600 .88rem var(--ui);padding:9px 18px;cursor:pointer}
.copy:hover{background:var(--pink)}
.copy.ok{background:var(--pink)}
.copy.mini{padding:3px 10px;font-size:.75rem;vertical-align:1px}
.copy.big{padding:13px 24px;font-size:1rem}
.prompt-card{margin:0 0 1.6em;padding:22px 24px 20px;border-radius:0;background:var(--c-soft,#F8DDE9)}
.prompt-card figcaption{font:600 .9rem var(--ui);color:var(--accent-deep);margin-bottom:8px}
.prompt-card blockquote{margin:0 0 16px;padding:0;border:0;font:500 1.3rem/1.4 var(--slab);color:var(--ink)}
.ad-note{margin:.4em 0 1.8em;padding:22px 24px;border-radius:0;background:var(--ink);color:#EAF2F2;position:relative;overflow:hidden;font-family:var(--ui)}
.ad-note::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:0;background:var(--pink);opacity:.8}
.ad-note p{margin:0;line-height:1.6;position:relative;z-index:1}
.ad-note .ad-k{font:600 1.35rem var(--slab);color:var(--mulberry);margin-bottom:6px}
.ad-note .ad-k span{color:var(--peach);margin-right:4px}
.builder{margin:.6em 0 2em;border-radius:0;background:#fff;box-shadow:0 0 0 2px var(--line);overflow:hidden;font-family:var(--ui)}
.b-head{padding:28px 28px 22px;background:var(--paper2)}
.b-kick{font:600 .9rem var(--ui);color:var(--accent-deep);margin:0 0 6px}
.b-head h3{font-size:clamp(1.8rem,3vw,2.3rem);margin:0 0 8px}
.b-head p:last-child{margin:0;color:var(--ink2);max-width:46ch}
.b-grid{padding:8px 28px 6px}
.b-q{display:block;padding:18px 0;border-bottom:1px solid var(--line)}
.b-q.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.b-l{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-weight:600;color:var(--ink)}
.b-l > span{flex:none;width:24px;height:24px;border-radius:0;display:grid;place-items:center;background:var(--ink);color:#fff;font:600 .72rem var(--ui)}
.b-l em{font-weight:400;color:var(--ink2);font-size:.88rem}
.b-in{width:100%;font:inherit;padding:12px 14px;border-radius:0;border:2px solid var(--line);background:var(--paper);color:var(--ink);outline:none}
.b-in:focus{border-color:var(--ink);background:#fff}
.builder .bchips{display:flex;flex-wrap:wrap;gap:8px}
.builder .bchip{font:500 .92rem var(--ui);padding:8px 14px;border-radius:0;border:2px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer}
.builder .bchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pal,.typ{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px;border-radius:0;border:2px solid var(--line);background:#fff;cursor:pointer;font:500 .85rem var(--ui);color:var(--ink2);text-align:left}
.pal[aria-pressed="true"],.typ[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.pal .sw{display:flex;width:100%;height:38px;border-radius:0;overflow:hidden}
.pal .sw i{flex:1}.pal .sw i:first-child{flex:1.6}
.types{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.typ{align-items:center;text-align:center}
.typ .aa{font-size:2rem;line-height:1;color:var(--ink)}
.b-out{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:24px 28px 28px;background:var(--paper2)}
.b-preview .pv{--pbg:#FBF4EE;--pac:#F2B8A2;--pink:#4A1D52;--pff:Georgia,serif;background:var(--pbg);border-radius:0;padding:12px;aspect-ratio:3/4;display:flex;flex-direction:column;gap:12px;transition:background .4s}
.pv-nav{display:flex;gap:5px;align-items:center}.pv-nav b{width:22px;height:6px;border-radius:0;background:var(--peach);margin-right:auto}.pv-nav i{width:12px;height:4px;border-radius:0;background:var(--peach);opacity:.35}
.pv-hero{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px}
.pv-h{margin:0;font-family:var(--pff);color:var(--peach);font-size:1.25rem;line-height:1.05;font-weight:600;overflow-wrap:anywhere}
.pv-s{margin:0;font-size:.62rem;line-height:1.35;color:var(--peach);opacity:.7}
.pv-btn{align-self:flex-start;font-size:.55rem;font-weight:700;padding:5px 9px;border-radius:0;background:var(--pac);color:var(--peach);margin-top:4px}
.pv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.pv-cards i{aspect-ratio:1;border-radius:0;background:var(--pac);opacity:.55}
.pv-cap{margin:8px 0 0;text-align:center;font:500 .75rem var(--ui);color:var(--ink2)}
.b-prompt{display:flex;flex-direction:column}
.b-text{flex:1;margin:0 0 16px;padding:18px 20px;border-radius:0;background:#fff;font-size:.98rem;line-height:1.6;color:var(--ink)}
.b-actions{display:flex;gap:16px;align-items:center}
@media (max-width:720px){
  .b-head,.b-grid,.b-out{padding-left:18px;padding-right:18px}
  .b-q.two,.b-out{grid-template-columns:1fr}
  .pals{grid-template-columns:repeat(2,1fr)}
  .types{grid-template-columns:repeat(3,1fr)}
  .b-preview{max-width:200px;margin:0 auto}
}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start;padding-top:clamp(40px,6vw,80px)}
.portrait{position:relative;max-width:460px}
.portrait::before{content:"";position:absolute;width:22%;height:70%;border-radius:42% 48% 40% 50% / 8% 10% 7% 9%;background:var(--pink);right:-9%;top:-5%;z-index:0;opacity:.9}
.portrait::after{content:"";position:absolute;width:16%;height:50%;border-radius:42% 48% 40% 50% / 8% 10% 7% 9%;background:var(--mulberry);opacity:.85;left:-6%;bottom:-4%;z-index:0}
.portrait .frame{aspect-ratio:4/5;z-index:1;border-radius:0}
.about h1{font-size:clamp(3rem,6.6vw,5.2rem);font-weight:500;letter-spacing:-.02em;line-height:.98;margin-bottom:28px}
.about-copy > p{font-family:var(--read);font-size:1.15rem;line-height:1.7;margin:0 0 1.1em}
.about-copy > p:first-of-type{font-size:clamp(1.25rem,1.8vw,1.45rem);line-height:1.55}
.now{margin:28px 0 0;padding:22px 24px;border-radius:0;background:var(--paper2);display:grid;gap:12px}
.now div{display:grid;grid-template-columns:130px 1fr;gap:16px}
.now dt{font:600 1rem var(--ui);color:var(--ink)}
.now dd{margin:0}
.about-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
@media (max-width:820px){.about{grid-template-columns:1fr}.portrait{max-width:340px;margin:0 auto 12px}.now div{grid-template-columns:1fr;gap:2px}}

/* ---------- small standalone pages (404, thanks) ---------- */
.solo{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px var(--gutter)}
.solo .mark img{height:64px;margin:0 auto 36px}
.solo h1{font-size:clamp(2.6rem,6vw,4.2rem);font-weight:500}
.solo p{max-width:44ch;margin:16px auto 28px;font-family:var(--read);font-size:1.15rem}
.solo .ctas{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}
.solo-dots{display:flex;gap:8px;margin-bottom:28px}
.solo-dots i{width:16px;height:60px;border-radius:42% 48% 40% 50% / 10% 12% 9% 11%;background:var(--c)}


/* =============================================================
   The house look (Nov 2026): these rules come last and win.
   ============================================================= */
h1,h2,h3,h4{font-weight:400;letter-spacing:-.005em}
body{font-family:var(--read);font-size:18px}
.note{font-family:var(--read)}

/* small bold capitals: menus, labels, buttons */
.top-links a,.drawer .d-sub a,.site-foot nav a,.crumb,.subj,.filter,.btn,.feature .go,.stroke .lab b,.textlink.caps{font-family:var(--ui);font-weight:700;letter-spacing:var(--track);text-transform:uppercase}
.top-links a{font-size:.74rem;padding:10px 12px}
.top-links a .dot{display:none}
.top-links a:hover,.top-links a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--magenta)}
.top-links .top-cta{background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:0;padding:9px 16px}
.top-links .top-cta:hover{background:var(--ink);color:var(--paper);box-shadow:none}
.site-head{background:rgba(252,242,236,.95)}
.site-head .wrap{min-height:76px}
.mark img{height:54px}
.drawer{background:var(--paper)}
.drawer .d-main{font:400 2rem/1.15 var(--slab)}
.drawer .d-main .dot{display:none}
.drawer .d-sub a{font-size:.74rem}

.btn{font-size:.76rem;min-height:50px;padding:14px 28px;border-radius:0;background:var(--navy);border-color:var(--navy);color:#fff}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.sun{background:var(--marigold);border-color:var(--marigold);color:var(--ink)}
.btn.sun:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.textlink{font-family:var(--read);font-weight:400;text-decoration-color:var(--magenta);text-decoration-thickness:1.5px}
/* "View all" with a little squiggle, like a hand-drawn arrow */
.more{display:inline-flex;align-items:center;gap:10px;font:700 .72rem var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap}
.more svg{width:30px;height:10px;transition:transform .3s var(--ease)}
.more:hover svg{transform:translateX(4px)}

/* labels on cards: tiny brick capitals, no color mark */
.subj{font-size:.68rem;color:var(--brick);gap:0}
.subj .dot{display:none}
.filters .filter .dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.filter{font-size:.7rem;border-radius:0}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.when{font-family:var(--ui);font-size:.82rem}

/* section heads: a slim serif headline with "View all" across from it */
.sec-head{align-items:baseline}
.sec-head h2{font-size:clamp(2.2rem,4vw,3.1rem)}
.sec-head p{font-family:var(--read);font-size:1.08rem}

/* cards: tall pictures, a brick label, a serif title */
.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,4vw,52px) clamp(18px,2.4vw,30px)}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card .frame{aspect-ratio:4/5;margin-bottom:16px;border-radius:0}
.card h3{font-size:clamp(1.4rem,1.9vw,1.65rem);line-height:1.15;margin-top:8px}
.card .sub{font:400 1.08rem/1.3 var(--read);color:var(--ink2)}
.card p{font-family:var(--read);font-size:1.02rem}
.card .when{font-size:.8rem}
@media (max-width:1060px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.cards.three{grid-template-columns:1fr}}
@media (max-width:520px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}.cards .card h3{font-size:1.2rem}.cards .card p:not(.meta){display:none}}
.feature .frame{aspect-ratio:4/5;border-radius:0;max-height:640px}
.feature{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
.feature h2,.feature h3{font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1.05}
.feature .sub{font:400 clamp(1.25rem,1.8vw,1.5rem)/1.3 var(--read)}
.feature .dek{font-size:1.2rem}
.feature .go{font-size:.74rem;color:var(--ink);text-decoration-color:var(--magenta)}
.frame{border-radius:0}

/* the lead: the three newest posts, side by side, titles centered under tall pictures */
.lead{padding-top:clamp(28px,4vw,48px)}
.lead .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.lead .card{text-align:center;align-items:center}
.lead .card .frame{width:100%;aspect-ratio:3/4}
.lead .card h3{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.lead .card p:not(.meta){display:none}
.lead .card .meta{justify-content:center}
@media (max-width:760px){.lead .cards{grid-template-columns:1fr}.lead .card:nth-child(n+2){display:none}}

/* wavy edges: a smooth ribbon of paper scalloping into a colored band */
.scallop-top{position:relative}
.scallop-top::before{content:"";position:absolute;left:0;right:0;top:-1px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 18' preserveAspectRatio='none'%3E%3Cpath d='M0 0H80V5C66.7 5 53.3 16 40 16S13.3 5 0 5Z' fill='%23FCF2EC'/%3E%3C/svg%3E") 0 0/80px 18px repeat-x;z-index:2}
/* checkerboard trim */
.checker{height:16px;background:repeating-linear-gradient(90deg,var(--c1,var(--orange)) 0 56px,var(--c2,var(--lilac)) 56px 112px,var(--c3,var(--check)) 112px 168px)}

/* the ornate frame: notched corners, like an old picture mat */
.notch,.ornate > *,.portrait .frame,.portrait .frame > img{-webkit-mask:radial-gradient(var(--r) at 0 0,#0000 98%,#000) top left/51% 51% no-repeat,radial-gradient(var(--r) at 100% 0,#0000 98%,#000) top right/51% 51% no-repeat,radial-gradient(var(--r) at 0 100%,#0000 98%,#000) bottom left/51% 51% no-repeat,radial-gradient(var(--r) at 100% 100%,#0000 98%,#000) bottom right/51% 51% no-repeat;mask:radial-gradient(var(--r) at 0 0,#0000 98%,#000) top left/51% 51% no-repeat,radial-gradient(var(--r) at 100% 0,#0000 98%,#000) top right/51% 51% no-repeat,radial-gradient(var(--r) at 0 100%,#0000 98%,#000) bottom left/51% 51% no-repeat,radial-gradient(var(--r) at 100% 100%,#0000 98%,#000) bottom right/51% 51% no-repeat}
.notch{--r:30px}
.ornate{--r:34px;padding:9px;background:var(--marigold);max-width:440px;margin:0 auto}
.ornate > *{--r:28px;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

/* welcome: two color blocks, the portrait on blue and the hello on green */
.welcome{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(56px,7vw,96px)}
.welcome > div{padding:clamp(56px,7vw,104px) clamp(24px,5vw,72px)}
.welcome .w-photo{background:var(--magenta);display:flex;align-items:center;justify-content:center}
.welcome .w-text{background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center}
.welcome .w-kicker{font:700 .74rem var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:var(--check);margin:0}
.welcome h1{color:#fff;font-size:clamp(2.7rem,5vw,4.4rem);line-height:1.02;margin:14px 0 18px;max-width:12em}
.welcome p.w-intro{font-family:var(--read);font-size:1.15rem;line-height:1.6;color:#F3F1E6;margin:0 0 26px;max-width:34em}
.w-links{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.4);max-width:30em}
.w-links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.4);color:#fff;text-decoration:none;font:400 1.12rem var(--read);transition:padding .25s var(--ease)}
.w-links a::after{content:"";border:5px solid transparent;border-left:7px solid currentColor;border-right:0}
.w-links a:hover{padding-left:12px}
@media (max-width:860px){.welcome{grid-template-columns:1fr}.welcome .w-photo{padding-bottom:40px}.ornate{max-width:320px}}

/* the shop promo: a cornflower panel with an empty ornate frame and a pink edge */
.promo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) clamp(40px,8vw,120px);background:var(--lilac);margin-top:clamp(64px,8vw,112px)}
.promo .p-frame{display:flex;align-items:center;justify-content:center;padding:clamp(40px,5vw,72px)}
.promo .p-frame svg{width:min(100%,340px);height:auto}
.promo .p-text{padding:clamp(40px,5vw,72px) clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.promo .w-kicker{font:700 .74rem var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);margin:0}
.promo h2{font-size:clamp(2.5rem,4.6vw,3.8rem);line-height:1.02;margin:12px 0 16px}
.promo p{font-family:var(--read);font-size:1.12rem;line-height:1.6;margin:0 0 24px;max-width:30em}
.promo .p-edge{background:var(--magenta)}
.promo .btn{align-self:flex-start}
@media (max-width:760px){.promo{grid-template-columns:1fr}.promo .p-frame{padding-bottom:0}.promo .p-frame svg{width:200px}.promo .p-edge{height:24px}}

/* page titles: centered, slim and large */
.page-top{text-align:center;padding-bottom:clamp(36px,5vw,56px)}
.page-top .wrap{display:block}
.page-top h1{font-size:clamp(3.4rem,8vw,6.4rem);font-weight:400;line-height:1}
.page-top p{margin:18px auto 0;font-size:clamp(1.12rem,1.5vw,1.3rem)}
.page-dots{display:none}
.filters{justify-content:center}

/* Letters: a tomato ticket with a pink stamp tucked behind it */
.letters{background:transparent;color:var(--ink);overflow:visible;margin-top:clamp(72px,9vw,128px)}
.letters .wrap{display:block;padding-top:0;padding-bottom:0}
.ticket{--r:26px;position:relative;max-width:900px;margin:0 auto;background:var(--orange);color:#fff;padding:clamp(36px,5vw,56px) clamp(24px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px 48px;align-items:center;transform:rotate(-1.2deg)}
.ticket::after{content:"";position:absolute;inset:12px;border:1.5px dashed rgba(255,255,255,.55);pointer-events:none;-webkit-mask:inherit;mask:inherit}
.letters .ticket h2{color:#fff;font-size:clamp(2.3rem,4.4vw,3.2rem)}
.letters .ticket p{color:#FFF1EA;font-family:var(--read);font-size:1.08rem;margin:10px 0 0}
.stamp-wrap{position:relative;max-width:900px;margin:0 auto}
.stamp-wrap::before{content:"";position:absolute;width:150px;height:150px;left:-56px;top:-40px;background:var(--pink);transform:rotate(-12deg);-webkit-mask:radial-gradient(10px at 50% 50%,#000 98%,#0000) -10px -10px/20px 20px,linear-gradient(#000 0 0) 10px 10px/calc(100% - 20px) calc(100% - 20px) no-repeat;mask:radial-gradient(10px at 50% 50%,#000 98%,#0000) -10px -10px/20px 20px,linear-gradient(#000 0 0) 10px 10px/calc(100% - 20px) calc(100% - 20px) no-repeat}
.stamp-wrap::after{content:"";position:absolute;width:110px;height:110px;right:-40px;bottom:-46px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 5px var(--marigold)}
.l-field{background:transparent;border:0;border-bottom:1.5px solid rgba(255,255,255,.75);border-radius:0;gap:10px}
.l-field input{color:#fff;font-family:var(--read);font-size:1.1rem;padding:12px 2px}
.l-field input::placeholder{color:rgba(255,255,255,.8)}
.l-field input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.l-field .btn{background:transparent;border:0;color:#fff;padding:12px 6px;min-height:0}
.l-field .btn:hover{background:transparent;text-decoration:underline;text-underline-offset:4px}
.letters .form-msg{color:#fff}
@media (max-width:760px){.ticket{grid-template-columns:1fr;transform:none}.stamp-wrap::before{width:90px;height:90px;left:-20px;top:-34px}.stamp-wrap::after{width:70px;height:70px;right:-6px;bottom:-30px}}
@media (max-width:440px){.l-field{flex-direction:row}.l-field .btn{width:auto}}

/* footer: garden green, a soft wave on top, checkerboard at the bottom */
.site-foot{position:relative;background:var(--mulberry);color:#fff;margin-top:clamp(72px,9vw,120px);padding:56px 0 0}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 18' preserveAspectRatio='none'%3E%3Cpath d='M0 0H80V5C66.7 5 53.3 16 40 16S13.3 5 0 5Z' fill='%23FCF2EC'/%3E%3C/svg%3E") 0 0/80px 18px repeat-x}
.site-foot .wrap{padding-bottom:40px}
.site-foot nav a{color:#fff;font-size:.72rem}
.foot-base{color:#E6EEDD;font-family:var(--ui);font-size:.82rem;display:block}
.foot-dots{display:none}
.site-foot .foot-checker{height:16px;background:repeating-linear-gradient(90deg,var(--marigold) 0 56px,var(--check) 56px 112px)}

/* a post */
.post-head{text-align:center;max-width:900px}
.post-head .meta{justify-content:center}
.post-head h1{font-size:clamp(2.8rem,6.4vw,5rem);font-weight:400;line-height:1.02}
.post-head .h-sub{font:400 clamp(1.3rem,2.4vw,1.75rem)/1.3 var(--read)}
.byline{justify-content:center;font-family:var(--ui)}
.post-cover .frame{aspect-ratio:16/9}
.prose{font-size:clamp(1.15rem,1.4vw,1.28rem);line-height:1.72}
.prose blockquote{font:400 clamp(1.7rem,2.8vw,2.2rem)/1.25 var(--slab);color:var(--ink);border-left:0;padding:0;text-align:center;margin:2em auto;max-width:28em}
.prose blockquote::before{content:"";display:block;width:56px;height:2px;background:var(--magenta);margin:0 auto 20px}
.sec-break span{border-radius:0;background:var(--lilac);font:700 .8rem var(--ui);width:56px;height:56px}
.sec-break + p:not(.no-drop)::first-letter{font:400 4.6em/.8 var(--slab);color:var(--magenta)}
.prose .orn::before{width:14px;height:14px;border-radius:0;background:var(--mulberry);box-shadow:14px 0 0 var(--lilac),28px 0 0 var(--magenta),42px 0 0 var(--marigold);margin-right:42px}
.stat{border-radius:0;background:var(--paper2);border-top:6px solid var(--orange)}
.stat:nth-child(2){border-top-color:var(--magenta)}.stat:nth-child(3){border-top-color:var(--ink)}
.stat b{font:400 clamp(2.4rem,4vw,3.2rem)/1 var(--slab);color:var(--ink)}
.share .thanks{font:400 1.5rem var(--slab)}
.author strong{font:400 1.5rem var(--slab)}
.author .face,.byline .face{border-radius:50%}
.progress{background:var(--magenta)}

/* the shop */
.products{gap:clamp(32px,3.6vw,48px) clamp(18px,2.2vw,28px)}
.product-card .frame{aspect-ratio:4/5}
.product-card h3{font-size:1.45rem;line-height:1.15}
.product-card .price{font-family:var(--ui);font-weight:700;color:var(--brick)}
.product-info h1{font-size:clamp(2.6rem,4.6vw,3.8rem)}
.product-info .price{font-family:var(--ui);color:var(--brick)}
.product-info .subj{font-size:.72rem}
.shop-empty{border-radius:0;background:var(--lilac)}
.shop-empty .se-dots{display:none}
.shop-empty{grid-template-columns:1fr;text-align:center;justify-items:center}

/* about */
.about h1{font-weight:400}
.about-copy > p{font-size:1.2rem}
.portrait::before,.portrait::after{content:none}
.portrait .frame{border-radius:0;background:var(--marigold);padding:9px;--r:34px}
.portrait .frame > img{position:static;--r:28px;aspect-ratio:4/5;width:100%;height:auto;object-fit:cover}
.portrait .frame{aspect-ratio:auto}
.now{border-radius:0;background:var(--lilac)}
.solo-dots{display:none}
.solo h1{font-weight:400}