/* anujain.com: one stylesheet. Tokens and rules from docs/design/style-guide.md (approved 2026-10-17). */

/* ---------- fonts (self-hosted, Latin) ---------- */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 500; font-display: swap; src: url(../fonts/fraunces.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 500; font-display: swap; src: url(../fonts/fraunces-italic.woff2) format("woff2"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/karla.woff2) format("woff2"); }
@font-face { font-family: "Kalam"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/kalam.woff2) format("woff2"); }

/* ---------- tokens ---------- */
:root {
	--plum: #601050; --orchid: #9f468e; --logo-orchid: #c068a8; --ink: #241a22; --muted: #6e6169;
	--gold: #b8924f; --marigold: #e9a23b; --pink: #f6e2ef; --sage: #4f6b3a; --brick: #a3402c;
	--ivory: #fbf5ec; --paper: #fffdf9; --sand: #f4ece1; --blush: #f3ebe7; --linen: #f7f1e8;
	--hair: rgba(36,26,34,.12); --hair2: rgba(36,26,34,.07);
	--tape-gold: rgba(233,162,59,.58); --tape-pink: rgba(192,104,168,.45); --tape-sage: rgba(110,139,78,.45);
	--f-head: "Fraunces", Georgia, serif; --f-body: "Karla", system-ui, sans-serif; --f-note: "Kalam", "Comic Sans MS", cursive;
	--shadow: 0 2px 4px rgba(42,32,38,.08), 0 22px 40px -18px rgba(42,32,38,.45);
	--shadow-s: 0 1px 1px rgba(36,26,34,.04), 0 18px 34px -22px rgba(36,26,34,.30);
	--gutter: clamp(16px, 3vw, 24px);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 17px/1.72 var(--f-body); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--plum); }
:focus-visible { outline: 2px solid var(--orchid); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 360; font-variation-settings: "SOFT" 100, "WONK" 0; margin: 0; text-wrap: balance; }
h3, h4 { line-height: 1.2; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--plum); }
h2 { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.04; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 760px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--plum); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
.note { font-family: var(--f-note); font-size: 21px; line-height: 1.3; color: var(--orchid); }
.lede { font-size: 18px; color: var(--muted); max-width: 46ch; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--plum); color: #fff !important; font: 600 16px/1 var(--f-body); text-decoration: none; transition: background .25s, transform .25s; }
.btn:hover { background: var(--ink); transform: translateY(-1px); }
.ul { font: 600 16px/1 var(--f-body); color: var(--plum); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; min-height: 44px; display: inline-flex; align-items: center; }
.arrow { font: 600 15px/1.2 var(--f-body); color: var(--plum); text-decoration: none; border-bottom: 1px solid var(--orchid); padding-bottom: 3px; }
.arrow::after { content: " \2192"; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.paper { position: relative; display: block; background: var(--paper); padding: 12px; box-shadow: var(--shadow); }
.paper img { width: 100%; }
.tape { position: absolute; top: -13px; left: 34%; width: 88px; height: 26px; background: var(--tape-gold); transform: rotate(-4deg); z-index: 2; }
.tape.p { background: var(--tape-pink); transform: rotate(5deg); width: 70px; }
.tape.g { background: var(--tape-sage); transform: rotate(-6deg); width: 70px; }
section { padding-block: clamp(64px, 7vw, 96px); position: relative; border-top: 1px solid var(--hair2); }

/* ---------- header: laptop ---------- */
.site-head { position: relative; z-index: 40; background: var(--ivory); }
body.home .site-head { background: transparent; }
.hd { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 26px; }
.logo { line-height: 0; flex: none; }
.logo img { height: 52px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 28px; font-size: 16px; }
.nav > li { position: relative; }
.nav .nl, .nav .dd-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; min-height: 44px; }
.nav .car { color: var(--muted); transition: transform .2s; }
.nav .nl:hover, .nav .dd-btn:hover, .nav .dd-btn[aria-expanded="true"] { color: var(--plum); }
.nav .dd-btn[aria-expanded="true"] .car { transform: rotate(180deg); color: var(--plum); }
.nav .is-cur, .nav .dd-btn[aria-expanded="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 9px; text-decoration-color: var(--orchid); }
.nav .is-cur { color: var(--plum); }
.hello { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--pink); color: var(--plum); font-weight: 600; text-decoration: none; transition: background .25s, color .25s; }
.hello:hover { background: var(--plum); color: #fff; }

.dd { position: absolute; top: calc(100% + 14px); background: var(--paper); border-radius: 4px; border: 1px solid rgba(36,26,34,.08); box-shadow: 0 2px 4px rgba(36,26,34,.06), 0 40px 70px -30px rgba(36,26,34,.45); z-index: 50; }
.dd[hidden] { display: none; }
.dd-k { font: 600 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.mega { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); width: min(1144px, calc(100vw - 48px)); padding: 32px 36px 28px; display: grid; grid-template-columns: 1fr 1.45fr 1fr; gap: 40px; }
.mlist { display: grid; gap: 2px; }
.mlist a { display: flex; align-items: center; gap: 12px; padding: 7px 8px; margin-inline: -8px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 16px; }
.mlist a:hover { background: rgba(159,70,142,.07); color: var(--plum); }
.mlist i { font-style: normal; font-size: 13px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.mlist .th { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; background: var(--sand); box-shadow: 0 0 0 2px #fff, 0 4px 8px -4px rgba(36,26,34,.4); }
.mlist .th img { width: 100%; height: 100%; object-fit: cover; }
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; }
.cgrid a { display: grid; gap: 8px; align-content: start; color: var(--ink); text-decoration: none; }
.cgrid a:hover b { color: var(--plum); }
.win { display: block; background: #fff; padding: 4px; box-shadow: 0 10px 18px -12px rgba(36,26,34,.5); }
.win img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cgrid b { font: 400 16.5px/1.2 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; }
.ccard { background: var(--blush); border-radius: 4px; padding: 18px; display: grid; gap: 12px; align-content: start; }
.ccard .win { padding: 5px; transform: rotate(-1deg); }
.ccard .win img { aspect-ratio: 3 / 2; }
.ccard b { font: 400 22px/1.15 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; }
.ccard p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.ccard .arrow { justify-self: start; }
.mega-foot { grid-column: 1 / -1; border-top: 1px solid var(--hair); padding-top: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.mega-foot a { color: var(--plum); font-weight: 600; text-decoration: none; }
.mega-foot span { color: var(--muted); }
.drop { left: -14px; width: 380px; padding: 14px; display: grid; gap: 4px; }
#dd-events { left: auto; right: -14px; } /* the rightmost menu opens to the left, so it never runs off the screen */
.drow { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.drow:hover { background: rgba(159,70,142,.07); }
.drow .sq { width: 56px; height: 56px; background: #fff; padding: 3px; box-shadow: 0 8px 14px -10px rgba(36,26,34,.5); }
.drow .sq img { width: 100%; height: 100%; object-fit: cover; }
.drow b { display: block; font: 400 19px/1.2 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; }
.drow small { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.drow small em { font-style: normal; color: var(--orchid); font-weight: 600; }

/* ---------- header: phone (sections always in view) ---------- */
.ph-head { display: none; }
@media (max-width: 899px) {
	.hd { display: none; }
	.site-head, body.home .site-head { position: sticky; top: 0; background: rgba(251,245,236,.96); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); }
	.ph-head { display: block; }
	.ph-top { display: flex; justify-content: space-between; align-items: center; height: 56px; padding: 0 18px; }
	.ph-top .logo img { height: 32px; }
	.ph-search { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--muted); margin-right: -10px; }
	.secbar { display: flex; justify-content: space-between; align-items: flex-end; padding: 6px 18px 0; border-bottom: 1px solid rgba(36,26,34,.10); font: 500 14.5px/1 var(--f-body); }
	.secbar a, .secbar .more { color: var(--ink); text-decoration: none; padding: 10px 0 11px; border-bottom: 2px solid transparent; min-height: 44px; display: inline-flex; align-items: flex-end; }
	.secbar a.is-cur { color: var(--plum); border-bottom-color: var(--orchid); }
	.secbar .more { gap: 7px; font-weight: 500; }
	.secbar .more i { display: grid; gap: 4px; margin-bottom: 3px; }
	.secbar .more i::before, .secbar .more i::after { content: ""; display: block; width: 15px; height: 1.5px; background: var(--ink); }
	.site-head { transition: top .25s ease; }
	.site-head.is-slim, body.home .site-head.is-slim { top: -56px; }
}
@media (max-width: 370px) { .secbar { font-size: 14px; padding-inline: 14px; } }

/* drawer (D1) */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none; }
.drawer .veil { position: absolute; inset: 0; background: rgba(36,26,34,.30); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.drw { position: absolute; top: 0; bottom: 0; right: 0; width: min(86%, 420px); overflow-y: auto; background:
	radial-gradient(70% 30% at 100% 0%, rgba(252,216,145,.40), rgba(252,216,145,0) 70%),
	radial-gradient(70% 26% at 0% 100%, rgba(192,104,168,.12), rgba(192,104,168,0) 70%), var(--paper);
	box-shadow: -30px 0 60px -30px rgba(36,26,34,.5); padding: 18px 24px 26px; display: flex; flex-direction: column; animation: drw-in .28s ease-out; }
@keyframes drw-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.dtop { display: flex; justify-content: space-between; align-items: center; }
.dtop .logo img { height: 28px; }
.dtop .x { font: 500 14.5px/1 var(--f-body); color: var(--muted); display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.dtop .x b { font: 300 26px/1 var(--f-body); color: var(--ink); }
.srch { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(36,26,34,.18); padding: 6px 0; margin-top: 12px; color: var(--muted); }
.srch input { flex: 1; border: 0; background: transparent; font: 400 16px/1.4 var(--f-body); color: var(--ink); padding: 8px 0; min-width: 0; }
.srch input:focus { outline: none; }
.srch:focus-within { border-bottom-color: var(--plum); }
.dlist { list-style: none; margin: 12px 0 0; padding: 0; }
.dlist .r { width: 100%; display: flex; align-items: baseline; justify-content: space-between; padding: 9px 0; font: 360 25px/1.15 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--ink); text-decoration: none; text-align: left; }
.dlist .r .c { font: 400 18px/1 var(--f-body); color: var(--muted); }
.dlist .r.is-cur { color: var(--plum); }
.dlist .r.is-cur .nm { background: linear-gradient(transparent 82%, rgba(159,70,142,.28) 82%); }
.dlist .r[aria-expanded="true"] { color: var(--plum); }
.dlist .r[aria-expanded="true"] .c { color: var(--plum); }
.dsub { padding: 2px 0 12px 2px; display: grid; gap: 10px; }
.dsub[hidden] { display: none; }
.dsub .lab { font: 600 10.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.dsub .two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 15px; }
.dsub a { color: var(--ink); text-decoration: none; padding-block: 3px; }
.dsub a i { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 5px; }
.dsub .line { font-size: 15px; line-height: 1.8; } .dsub .line a { white-space: nowrap; }
.dsub .line span { color: var(--gold); margin: 0 4px; }
.dsub .more2 { display: flex; justify-content: space-between; font-weight: 600; }
.dsub .more2 a, .dsub .links a { color: var(--plum); }
.dsub .links { display: grid; gap: 6px; font-size: 16px; }
.dfoot { margin-top: auto; border-top: 1px solid rgba(36,26,34,.10); padding-top: 16px; display: grid; gap: 8px; }
.dfoot .dhello { font: 360 21px/1.2 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--ink); text-decoration: none; }
.dfoot .mail { font-size: 14px; color: var(--muted); text-decoration: none; }
.dfoot .soc { display: flex; gap: 12px; }
.dfoot .soc a { color: var(--muted); display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: -10px; }
.dfoot .sign { font-family: var(--f-note); color: var(--orchid); font-size: 17px; transform: rotate(-2deg); transform-origin: left; }
body.drawer-open { overflow: hidden; }

/* ---------- footer ---------- */
.site-foot { background: var(--linen); padding-block: 20px; font-size: 13px; letter-spacing: .06em; color: var(--muted); border-top: 1px solid var(--hair2); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 40px; }
.flogo img { height: 28px; width: auto; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 26px; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; }
.site-foot nav a { color: var(--ink); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.site-foot nav a:hover { color: var(--plum); }

/* ---------- home: hero ---------- */
body.home { background: var(--ivory); }
body.home .site-head { position: absolute; left: 0; right: 0; top: 0; }
.hero-band { background: radial-gradient(ellipse 55% 60% at 72% 45%, rgba(252,216,145,.55) 0%, rgba(252,216,145,.18) 50%, rgba(251,245,236,0) 78%), var(--ivory); padding-top: 104px; }
.hero { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-block: 40px 140px; }
.hero-text { flex: 1 1 460px; min-width: 0; }
.hero .note { font-size: 30px; transform: rotate(-2deg); transform-origin: left; margin-bottom: 18px; }
.hero h1 { font-size: clamp(48px, 5.8vw, 84px); line-height: 1.03; letter-spacing: -0.015em; font-weight: 380; }
.hero h1 em { position: relative; display: inline-block; font-style: italic; font-weight: 380; }
.hero h1 em svg { position: absolute; left: -2%; bottom: -6px; width: 104%; height: 18px; }
.hero .lede { margin-top: 32px; max-width: 540px; }
.hero .actions { margin-top: 42px; }
.collage { flex: 1 1 560px; min-width: 0; position: relative; height: 660px; }
.collage figure { position: absolute; margin: 0; }
.collage .paper { padding: 7px; }
.collage .c1 { left: 33%; top: 0; width: 42%; transform: rotate(1deg); z-index: 5; } /* three paintings on a diagonal: nothing sits over the Buddha, which only just meets the corner of the horses' card */
.collage .c1 .paper { padding: 9px; }
.collage .c1 img { aspect-ratio: 976 / 1290; object-fit: cover; object-position: 50% 40%; }
.collage .c1 .hcap { text-align: left; padding-left: 10px; }
.collage .c2 { left: 0; top: 150px; width: 31%; transform: rotate(-4deg); z-index: 3; }
.collage .c4 { right: 0; bottom: 0; width: 35%; transform: rotate(2.5deg); z-index: 4; }
.collage .c2 .hcap { text-align: left; padding-left: 6px; max-width: 60%; } /* two short lines, clear of the large picture */
@media (min-width: 900px) { .hero-text { flex: 0 0 36%; } }
.hcap { font-family: var(--f-note); font-size: 18px; color: var(--muted); text-align: center; margin-top: 12px; line-height: 1.3; }
.collage .pointer { position: absolute; left: 6%; bottom: 92px; font-family: var(--f-note); font-size: 22px; color: var(--orchid); transform: rotate(-3deg); }
.collage .pointer svg { position: absolute; left: 100%; top: -4px; width: 120px; height: 44px; }

/* about */
.about-band { background: radial-gradient(36% 56% at 10% 30%, rgba(192,104,168,.10), rgba(192,104,168,0) 70%), radial-gradient(30% 44% at 94% 88%, rgba(214,180,110,.10), rgba(214,180,110,0) 70%), var(--paper); }
.about { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.polaroid { flex: 0 1 360px; min-width: 0; margin: 0 auto; background: var(--paper); padding: 10px 10px 0; box-shadow: var(--shadow); transform: rotate(-1.5deg); }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroid p { font-family: var(--f-note); font-size: 18px; text-align: center; padding-block: 12px 16px; color: var(--muted); }
.about-text { flex: 1 1 520px; min-width: 0; display: grid; gap: 24px; }
.about-text h2 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.08; }
.about-text > p:not(.note) { color: var(--muted); max-width: 56ch; }
/* A second photo, pinned at the top right of the text (laptops); after the quote on phones */
.about-text { position: relative; }
.about-text .about-2 { position: absolute; right: 0; top: -10px; width: 300px; transform: rotate(3deg); }
@media (min-width: 1101px) { .has-2 .about-text > h2, .has-2 .about-text > p:not(.note), .has-2 .about-text > blockquote { max-width: calc(100% - 330px); } .has-2 .about-text > p:last-child { max-width: none; } }
@media (max-width: 1100px) { .about-text .about-2 { position: static; width: 70%; max-width: 340px; margin: 4px auto; transform: rotate(2deg); } } /* below the quote where the text column is narrow */
blockquote { margin: 0; font-family: var(--f-head); font-style: italic; font-weight: 330; font-variation-settings: "SOFT" 100, "WONK" 0; font-size: clamp(24px, 2.3vw, 30px); line-height: 1.34; color: var(--plum); max-width: 30ch; padding-left: 22px; border-left: 1px solid rgba(184,146,79,.6); }
.stickies { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin-top: 8px; }
.stickies p { position: relative; font-family: var(--f-note); font-size: 17px; line-height: 1.45; color: #4a3d46; padding: 22px 20px 20px; border: 1px solid rgba(255,255,255,.8); box-shadow: 0 1px 0 rgba(36,26,34,.04), 0 16px 30px -22px rgba(36,26,34,.35); }
.stickies p::before { content: ""; position: absolute; top: -9px; left: 50%; margin-left: -28px; width: 56px; height: 18px; background: rgba(207,178,118,.40); transform: rotate(-2deg); }
.stickies p:nth-child(1) { transform: rotate(-1deg); background: linear-gradient(rgba(214,180,110,.14), rgba(214,180,110,.14)), var(--paper); }
.stickies p:nth-child(2) { transform: rotate(.8deg); background: linear-gradient(rgba(192,104,168,.10), rgba(192,104,168,.10)), var(--paper); }
.stickies p:nth-child(2)::before { background: rgba(192,104,168,.28); transform: rotate(3deg); }
.stickies p:nth-child(3) { transform: rotate(-.4deg); background: linear-gradient(rgba(140,160,120,.12), rgba(140,160,120,.12)), var(--paper); }
.stickies p:nth-child(3)::before { background: rgba(140,160,120,.32); }

/* selected works */
.easel-band { background: radial-gradient(34% 52% at 86% 55%, rgba(214,180,110,.20), rgba(214,180,110,0) 70%), radial-gradient(28% 40% at 8% 18%, rgba(192,104,168,.08), rgba(192,104,168,0) 70%), var(--sand); }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 14px 32px; }
.head > div { display: grid; gap: 6px; }
.feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; margin-top: 40px; }
.stage { height: 520px; display: grid; place-items: center; background: radial-gradient(50% 50% at 50% 55%, rgba(255,253,249,.7), rgba(255,253,249,0) 72%); }
.stage .paper { transform: rotate(-.6deg); max-width: 100%; padding: 10px; transition: opacity .25s; }
.stage .paper.is-fading { opacity: .25; }
.stage img { max-height: 480px; max-width: 100%; width: auto; height: auto; }
.info { display: grid; gap: 14px; align-content: center; }
.count { font: 500 12px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.info h3 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.1; }
.info h3 a { color: var(--ink); text-decoration: none; }
.info h3 a:hover { color: var(--plum); }
.info .note { font-size: 22px; min-height: 1.3em; }
.btns { display: flex; gap: 10px; margin-top: 12px; }
.pill { font: 600 15px/1 var(--f-body); color: var(--plum); background: #fff; border: 1.5px solid var(--plum); border-radius: 999px; padding: 0 20px; min-height: 46px; display: inline-flex; align-items: center; gap: 8px; transition: background .25s, color .25s; }
.pill:hover { background: var(--plum); color: #fff; }
.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
.thumb { position: relative; padding: 3px; background: var(--paper); aspect-ratio: 1; box-shadow: 0 8px 16px -12px rgba(36,26,34,.5); opacity: .55; transition: opacity .25s, transform .25s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: .9; transform: translateY(-2px); }
.thumb.on { opacity: 1; }
.thumb.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -10px; height: 2px; border-radius: 2px; background: var(--plum); }

/* classes */
.classes-band { background: radial-gradient(36% 54% at 84% 40%, rgba(140,160,120,.12), rgba(140,160,120,0) 70%), radial-gradient(28% 40% at 6% 86%, rgba(214,180,110,.10), rgba(214,180,110,0) 70%), var(--paper); }
.classes { display: flex; flex-wrap: wrap-reverse; gap: 64px; align-items: center; }
.classes-text { flex: 1 1 420px; min-width: 0; display: grid; gap: 22px; }
.classes-text blockquote { max-width: 26ch; }
.groups { font-size: 15px; color: var(--muted); }
.groups b { color: var(--ink); font-weight: 600; }
.pair { flex: 1 1 520px; min-width: 0; position: relative; padding-bottom: 80px; }
.pair .one { width: 86%; margin-left: auto; transform: rotate(.6deg); }
.pair .two { position: absolute; left: 0; bottom: 0; width: 44%; background: var(--paper); padding: 9px 9px 0; box-shadow: var(--shadow); transform: rotate(-2deg); }
.pair .two p { font-family: var(--f-note); font-size: 16px; text-align: center; padding-block: 8px 12px; color: var(--muted); }

/* together */
.together { background: radial-gradient(40% 60% at 15% 20%, rgba(192,104,168,.12), rgba(192,104,168,0) 70%), radial-gradient(36% 50% at 90% 75%, rgba(214,180,110,.16), rgba(214,180,110,0) 70%), var(--blush); }
.tg-head { display: grid; gap: 4px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.card { background: rgba(255,253,249,.62); border: 1px solid rgba(255,255,255,.85); border-radius: 2px; padding: 34px 32px 30px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 0 rgba(36,26,34,.03), 0 24px 44px -32px rgba(36,26,34,.35); transition: transform .3s, box-shadow .3s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(36,26,34,.03), 0 30px 54px -30px rgba(36,26,34,.40); }
.card h3 { font-size: 28px; line-height: 1.15; }
.card p { color: var(--muted); font-size: 15.5px; flex: 1; }
.card a { font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--orchid); padding-bottom: 3px; align-self: start; }
.card a::after { content: "  \2192"; }
.cimg { display: block; margin: -12px -10px 6px; background: #fff; padding: 7px; box-shadow: 0 1px 2px rgba(36,26,34,.08), 0 14px 26px -18px rgba(36,26,34,.45); }
.cimg img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cimg.contain img { object-fit: contain; background: #fff; }
.card:nth-child(1) .cimg { transform: rotate(-.8deg); } .card:nth-child(2) .cimg { transform: rotate(.6deg); } .card:nth-child(3) .cimg { transform: rotate(-.5deg); }
.partners { margin-top: 48px; text-align: center; display: grid; gap: 10px; }
.partners .note { font-size: 22px; }
.partners p:last-child { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; line-height: 2.2; color: var(--muted); }
.ji { white-space: nowrap; }
.also .ji, .partners2 .ji, .partners .ji { display: inline-block; max-width: 100%; white-space: normal; }
.ji i { font-style: normal; color: var(--gold); margin: 0 12px; }
.closing { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 72px; align-items: end; padding-top: 72px; margin-top: 56px; border-top: 1px solid rgba(36,26,34,.10); }
.closing h2 { font-size: clamp(36px, 4.4vw, 60px); }
.closing > div { display: grid; gap: 24px; }
.sign { font-family: var(--f-note); font-size: 24px; color: var(--orchid); transform: rotate(-1.5deg); transform-origin: left; margin-top: 20px; }

/* ---------- Paintings and Photography listings (Stage 2a: G1, F2, A1; phones M1, C2) ---------- */
.gal-open { background: radial-gradient(ellipse 50% 70% at 78% 30%, rgba(252,216,145,.45), rgba(251,245,236,0) 75%), radial-gradient(30% 60% at 4% 100%, rgba(192,104,168,.08), rgba(192,104,168,0) 70%), var(--ivory); padding-top: 40px; }
.gal-open > div.wrap:first-of-type { display: grid; gap: 12px; padding-bottom: 36px; max-width: 1240px; }
.gal-open .note { font-size: 26px; transform: rotate(-2deg); transform-origin: left; }
.gal-open h1 { font-size: clamp(48px, 6vw, 84px); font-weight: 380; line-height: 1.02; letter-spacing: -0.015em; }
.gal-open .lede { max-width: 56ch; }
.colls-wrap { padding-bottom: 40px; }
.colls-band { padding-top: 72px; } .colls-band .colls-wrap { padding-bottom: 80px; } /* F42: collections after a medium's paintings */
.colls-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 20px; }
.colls-head .note { font-size: 22px; transform: none; }
.colls-count, .gal-open .dots { display: none; }
.colls { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; } /* one row, however many collections */
.coll { display: grid; gap: 14px; align-content: start; color: var(--ink); text-decoration: none; } /* start: a two-line name does not stretch the other frames */
.coll .win { padding: 7px; box-shadow: 0 1px 2px rgba(36,26,34,.06), 0 22px 38px -26px rgba(36,26,34,.38); transition: transform .25s; }
.coll .win img { aspect-ratio: 4 / 5; }
.coll:hover .win { transform: translateY(-2px); }
.coll b { font: 400 21px/1.2 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; }
.coll:hover b { color: var(--plum); }
.gal-mark { height: 0; } @media (max-width: 899px) { .gal-mark { scroll-margin-top: 50px; } } /* phones: below the sticky menu row */
.gal-bar { position: sticky; margin-top: -1px; top: max(0px, var(--headb, 0px)); z-index: 30; background: rgba(251,245,236,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--hair); }
.fhead { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; margin-bottom: 10px; }
.lab2 { font: 600 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.filters { display: flex; flex-wrap: wrap; gap: 0 28px; font: 500 17px/1 var(--f-body); white-space: nowrap; }
.filters::-webkit-scrollbar { display: none; }
.past-f { margin: -4px 0 26px; }
#past { scroll-margin-top: 80px; }
.filters a { padding: 10px 0; border-bottom: 3px solid transparent; color: var(--ink); text-decoration: none; }
.filters a:hover { color: var(--plum); }
.filters a.on { color: var(--plum); border-bottom-color: var(--orchid); }
.filters i { font-style: normal; font-size: 12.5px; color: var(--muted); margin-left: 3px; font-variant-numeric: tabular-nums; }
.mctl { display: none; }
.gal-grid { background: radial-gradient(34% 30% at 88% 20%, rgba(214,180,110,.20), rgba(214,180,110,0) 70%), radial-gradient(28% 30% at 6% 70%, rgba(192,104,168,.07), rgba(192,104,168,0) 70%), var(--sand); padding-block: 72px; }
.jrow { display: flex; gap: 48px; align-items: flex-start; --mat2: 16px; }
/* Equal heights in a row: each tile is (picture width + 2 × mat). Its flex-basis is the two mat
   borders, and the spare width is shared in proportion to each picture's shape, so every picture
   in the row ends up the same height, whatever shapes are uploaded. */
.jrow + .jrow { margin-top: 64px; }
.jrow figure { margin: 0; min-width: 0; }
.jrow .mat { display: block; box-sizing: border-box; background: var(--paper); padding: 8px; box-shadow: 0 1px 2px rgba(36,26,34,.06), 0 22px 38px -26px rgba(36,26,34,.38); transition: transform .25s; }
.jrow .mat:hover { transform: translateY(-2px); }
.jrow .mat img { display: block; width: 100%; height: auto; }
.jrow .t { font: 400 19px/1.25 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; margin-top: 20px; }
.jrow .t a { color: var(--ink); text-decoration: none; }
.jrow .t a:hover { color: var(--plum); }
.jrow .m { font: 600 11.5px/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.jrow .br { display: none; }
.empty-note { text-align: center; color: var(--muted); }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 80px; padding-top: 26px; border-top: 1px solid var(--hair); font: 500 15px/1 var(--f-body); }
.pager .pv { color: var(--plum); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.pager .pv.dim { color: var(--muted); opacity: .55; }
.pager .nums { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.pager .nums > * { display: inline-grid; place-items: center; min-width: 44px; height: 44px; border-radius: 999px; color: var(--ink); text-decoration: none; }
.pager .nums a:hover { background: rgba(159,70,142,.08); }
.pager .nums b { font-weight: 600; color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum); }
.pager .nums span { color: var(--muted); }
.pager-note { text-align: center; margin-top: 14px; font-size: 14.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cta-band { background: radial-gradient(40% 60% at 15% 20%, rgba(192,104,168,.12), rgba(192,104,168,0) 70%), radial-gradient(36% 50% at 90% 75%, rgba(214,180,110,.16), rgba(214,180,110,0) 70%), var(--blush); padding-block: 72px; border-top: 1px solid var(--hair2); }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 48px; align-items: end; }
.cta-band h2 { font-size: clamp(34px, 3.6vw, 46px); line-height: 1.08; }
.cta-band .sign { margin-top: 14px; }
.cta-band .wrap > div:last-child { display: grid; gap: 22px; }
.sheet { position: fixed; inset: 0; z-index: 95; }
.sheet[hidden] { display: none; }
.sheet-veil { position: absolute; inset: 0; background: rgba(36,26,34,.38); }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; background: var(--paper); border-radius: 22px 22px 0 0; padding: 10px 18px 28px; display: grid; gap: 6px; box-shadow: 0 -20px 40px -20px rgba(36,26,34,.4); animation: sheet-in .25s ease-out; }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet .handle { width: 40px; height: 4px; border-radius: 4px; background: rgba(36,26,34,.2); justify-self: center; margin-bottom: 4px; }
.sh-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px; }
.sh-top b { font: 400 24px/1 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; }
.sh-top button { font: 600 14px/1 var(--f-body); color: var(--plum); min-height: 44px; }
.sheet ul { list-style: none; margin: 0; padding: 0; }
.sheet li a { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-top: 1px solid var(--hair2); font-size: 16px; color: var(--ink); text-decoration: none; }
.sheet li b { font-weight: 500; }
.sheet li i { font-style: normal; font-size: 13px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.sheet .rad { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(36,26,34,.3); flex: none; }
.sheet a.on { color: var(--plum); }
.sheet a.on .rad { border: 6px solid var(--plum); }
@media (max-width: 899px) {
	.gal-open { padding-top: 20px; }
	.gal-open > .wrap:first-child { padding-bottom: 22px; gap: 8px; }
	.gal-open .note { font-size: 19px; }
	.gal-open .lede { font-size: 16px; }
	.colls-wrap { padding-bottom: 20px; }
	.colls-band { padding-top: 44px; } .colls-band .colls-wrap { padding-bottom: 48px; }
	.colls-head { padding-bottom: 10px; }
	.colls-head .note { font-size: 18px; }
	.colls-count { display: block; font-size: 13px; color: var(--muted); }
	.colls { display: flex; gap: calc(var(--gutter) + 10px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); }
	.colls::-webkit-scrollbar { display: none; }
	.coll { flex: 0 0 100%; scroll-snap-align: start; grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.coll .win { padding: 6px; }
	.coll .win img { aspect-ratio: 16 / 10; }
	.coll b { font-size: 21px; }
	.gal-open .dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
	.gal-open .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(36,26,34,.2); }
	.gal-open .dots i.on { background: var(--plum); }
	.fhead, .filters { display: none; }
	.mctl { display: flex; padding: 12px 0; }
	.mctl .sel { flex: 1; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--plum); color: var(--plum); font: 600 15px/1 var(--f-body); }
	.mctl .sel b { font-weight: 700; }
	.mctl .sel i { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--muted); margin-right: auto; }
	.gal-grid { padding-block: 22px 48px; }
	.jrow { display: block; }
	.jrow + .jrow, .jrow figure + figure { margin-top: 34px; }
	.jrow .spacer { display: none; }
	.jrow .mat { padding: 7px; }
	.jrow .t { font-size: 21px; margin-top: 14px; }
	.jrow .br { display: block; font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-top: 8px; }
	.pager { margin-top: 48px; font-size: 14px; }
	.pager .nums > * { min-width: 38px; }
	.cta-band { padding-block: 56px; }
	.cta-band .wrap { grid-template-columns: minmax(0, 1fr); }
}

.jrow .m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.st { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px 5px 8px; border-radius: 999px; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-available { background: rgba(79,107,58,.14); color: #3f5a2e; }
.st-sold { background: rgba(110,97,105,.12); color: #6e6169; }
.fsep { width: 1px; align-self: stretch; margin: 8px 0 12px; background: var(--hair); flex: none; }
.filters a.f-av { color: #3f5a2e; }
.filters a.f-av i { color: #3f5a2e; opacity: .9; }
.filters a.f-av.on { border-bottom-color: #4f6b3a; }
.mctl .sel.av { flex: none; border-color: rgba(79,107,58,.55); color: #3f5a2e; text-decoration: none; }
.mctl .sel.av.on { background: rgba(79,107,58,.14); }
.mctl { gap: 10px; }

/* ---------- one painting (Stage 2a: P2 painting first, B2 sale block) ---------- */
.p2-wall { background: radial-gradient(46% 60% at 50% 50%, rgba(214,180,110,.22), rgba(214,180,110,0) 72%), var(--sand); display: grid; justify-items: center; gap: 16px; padding: 56px var(--gutter) 40px; border-top: 1px solid var(--hair2); }
.p2-pic { display: block; padding: 14px; background: var(--paper); box-shadow: 0 2px 4px rgba(42,32,38,.08), 0 50px 70px -36px rgba(42,32,38,.55); cursor: zoom-in; max-width: 100%; }
.p2-pic img { max-height: min(640px, 72vh); width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.p2-wall .vl { font: 500 14px/1 var(--f-body); color: var(--muted); min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.p2-wall .vl:hover { color: var(--plum); }
.p2-more { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.p2-more .win { width: 64px; height: 64px; padding: 3px; }
.p2-more .win img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.p2-body { background: radial-gradient(40% 60% at 22% 50%, rgba(214,180,110,.12), rgba(214,180,110,0) 70%), var(--paper); padding-block: 64px 72px; }
.p2-body .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; }
.pp-title { font-size: clamp(38px, 4.4vw, 58px); line-height: 1.03; font-weight: 380; margin-top: 4px; }
.pp-story { display: grid; gap: 14px; margin-top: 26px; }
.pp-story p { font-size: 17px; line-height: 1.75; max-width: 54ch; }
.pp-story p:first-child::first-letter { font-family: var(--f-head); font-size: 3.1em; float: left; line-height: .9; padding: 6px 8px 0 0; color: var(--plum); }
.pp-facts { display: grid; gap: 20px; align-content: start; padding-top: 34px; }
.sale { display: grid; gap: 22px; padding-block: 26px; border-block: 1px solid var(--hair); }
.sale-top { display: flex; align-items: center; gap: 16px; }
.tag { font: 600 12px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; padding: 8px 13px; border-radius: 999px; background: rgba(110,97,105,.12); color: var(--muted); }
.tag-available { background: rgba(79,107,58,.12); color: var(--sage); }
.tag-commissioned { background: var(--pink); color: var(--plum); }
.pp-price { font-family: var(--f-head); font-weight: 380; font-size: 38px; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--ink); }
.pp-dl { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 10px 18px; font-size: 16px; }
.pp-dl dt { font: 600 11.5px/1.9 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pp-dl dd { margin: 0; }
.pp-coll { font-size: 15px; color: var(--muted); }
.pp-nav { background: var(--paper); border-top: 1px solid var(--hair2); }
.pp-nav .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 22px; font: 400 19px/1.3 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; }
.pp-nav a { color: var(--plum); text-decoration: none; display: grid; gap: 6px; max-width: 45%; }
.pp-nav a small { font: 600 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pp-nav a:last-child:not(:first-child) { text-align: right; }
.related .more-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 36px; }
.related .more-head h2 { font-size: clamp(30px, 3vw, 38px); }
.related .jrow .t { font-size: 18px; }
.msticky { display: none; }
@media (max-width: 899px) {
	.p2-wall { padding-block: 22px 16px; }
	.p2-pic { padding: 8px; }
	.p2-pic img { max-height: 62vh; }
	.p2-body { padding-block: 28px 40px; }
	.p2-body .wrap { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.pp-title { font-size: 36px; }
	.pp-facts { padding-top: 6px; order: 2; }
	.pp-dl { font-size: 15px; grid-template-columns: 84px 1fr; }
	.pp-nav .wrap { font-size: 16px; }
	.msticky { display: flex; position: sticky; bottom: 0; z-index: 35; justify-content: space-between; align-items: center; gap: 14px; padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom)); background: rgba(255,253,249,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--hair); }
	.msticky .pp-price { font-size: 26px; }
	.msticky .btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
	.msticky .btn:only-child { flex: 1; }
	.related .more-head { flex-wrap: wrap; margin-bottom: 20px; }
}

/* ---------- full-screen viewer (V1 warm paper) ---------- */
.viewer { position: fixed; inset: 0; z-index: 100; }
.viewer[hidden] { display: none; }
.vw-veil { position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 45%, rgba(255,253,249,.82), rgba(247,241,232,.95) 70%); -webkit-backdrop-filter: blur(16px) saturate(.9); backdrop-filter: blur(16px) saturate(.9); animation: vw-fade .35s ease-out; }
@keyframes vw-fade { from { opacity: 0; } to { opacity: 1; } }
.vw-stage { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 22px 32px 26px; }
.vw-top { display: flex; justify-content: space-between; align-items: center; }
.vw-top .cnt { font: 600 12px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.vw-close { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--paper); color: var(--plum); font: 600 15px/1 var(--f-body); box-shadow: 0 10px 24px -14px rgba(36,26,34,.4); }
.vw-mid { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; min-height: 0; gap: 12px; }
.vw-arrow { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 400 22px/1 var(--f-body); background: var(--paper); color: var(--plum); box-shadow: 0 10px 24px -14px rgba(36,26,34,.4); }
.vw-arrow[disabled] { opacity: .3; cursor: default; }
.vw-pic { position: relative; height: 100%; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; }
.vw-mat { background: #fff; padding: 12px; box-shadow: 0 2px 4px rgba(42,32,38,.10), 0 60px 90px -40px rgba(42,32,38,.60); transform-origin: 0 0; will-change: transform; animation: vw-grow .4s cubic-bezier(.2,.7,.2,1); }
@keyframes vw-grow { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.vw-mat img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.vw-pic.is-zoomed { cursor: grab; place-items: start; }
.vw-pic.is-zoomed .vw-mat { padding: 0; box-shadow: none; animation: none; }
.vw-pic.is-dragging { cursor: grabbing; }
.vw-cap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; padding-top: 14px; }
.vw-hint { font-family: var(--f-note); font-size: 19px; color: var(--orchid); transform: rotate(-2deg); justify-self: start; }
.vw-t { text-align: center; display: grid; gap: 6px; }
.vw-title { font: 380 30px/1.1 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--ink); }
.vw-t .m { font: 600 11.5px/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vw-zoom { justify-self: end; display: flex; align-items: center; gap: 8px; }
.vw-zoom button { min-width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--paper); color: var(--plum); font: 500 18px/1 var(--f-body); box-shadow: 0 8px 18px -12px rgba(36,26,34,.4); }
.vw-zoom .z-l { font: 600 13.5px/1 var(--f-body); padding: 0 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vw-mini { position: absolute; right: 32px; bottom: 100px; width: 120px; padding: 5px; background: #fff; box-shadow: 0 10px 24px -14px rgba(36,26,34,.5); }
.vw-mini[hidden] { display: none; }
.vw-mini img { width: 100%; display: block; }
.vw-mini i { position: absolute; border: 2px solid var(--plum); }
body.viewer-open { overflow: hidden; }
@media (max-width: 899px) {
	.vw-stage { padding: 14px 12px 18px; }
	.vw-mid { grid-template-columns: minmax(0, 1fr); }
	.vw-arrow { display: none; }
	.vw-mat { padding: 7px; }
	.vw-cap { grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: center; }
	.vw-hint { justify-self: center; font-size: 16px; order: 3; }
	.vw-zoom { justify-self: center; }
	.vw-title { font-size: 24px; }
	.vw-close { min-height: 40px; padding: 0 14px; }
	.vw-mini { display: none !important; }
}

/* ---------- section pages (Stage 2b and 2c designs) ---------- */
.s-ivory { background: radial-gradient(ellipse 50% 70% at 78% 30%, rgba(252,216,145,.45), rgba(251,245,236,0) 75%), radial-gradient(30% 60% at 4% 100%, rgba(192,104,168,.08), rgba(192,104,168,0) 70%), var(--ivory); }
.s-paper { background: radial-gradient(30% 40% at 92% 12%, rgba(214,180,110,.10), rgba(214,180,110,0) 70%), var(--paper); }
.s-sand { background: radial-gradient(34% 40% at 88% 20%, rgba(214,180,110,.20), rgba(214,180,110,0) 70%), radial-gradient(28% 40% at 6% 80%, rgba(192,104,168,.07), rgba(192,104,168,0) 70%), var(--sand); }
.s-blush { background: radial-gradient(40% 60% at 15% 20%, rgba(192,104,168,.12), rgba(192,104,168,0) 70%), radial-gradient(36% 50% at 90% 75%, rgba(214,180,110,.16), rgba(214,180,110,0) 70%), var(--blush); }
.sec { padding-block: clamp(56px, 7vw, 88px); }
.sec.top0 { border-top: 0; padding-top: 40px; }
.sec-open { border-top: 1px solid var(--hair2); }
.subtabs { border-bottom: 1px solid var(--hair); }
.subtabs .wrap { display: flex; gap: 34px; font: 500 17px/1 var(--f-body); overflow-x: auto; scrollbar-width: none; }
.subtabs a { padding: 16px 0 14px; border-bottom: 3px solid transparent; color: var(--ink); text-decoration: none; white-space: nowrap; }
.subtabs a.on { color: var(--plum); border-bottom-color: var(--orchid); }
.subtabs a i { font-style: normal; font-size: 13px; color: var(--orchid); margin-left: 4px; font-weight: 600; }
.open-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; padding-block: 48px 72px; }
.open-in .note, .plain-open .note { font-size: 26px; transform: rotate(-2deg); transform-origin: left; }
.open-in h1, .plain-open h1, .ws-top h1, .hello-in h1 { font-size: clamp(48px, 6vw, 80px); font-weight: 380; line-height: 1.02; letter-spacing: -0.015em; margin-top: 8px; }
.open-in .lede, .plain-open .lede { margin-top: 22px; font-size: 19px; max-width: 48ch; }
.plain-open { padding-block: 48px 36px; max-width: 1240px; }
.plain-open + .wrap .filters, .sec-open > .wrap > .filters { border-top: 1px solid var(--hair); }
.quick { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; font: 600 12.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; overflow: hidden; padding-block: 2px; }
/* each item carries its dot in the gap before it; the dot of the first item on every line falls outside the box and is hidden, so no line starts with a dot at any width */
.quick span { margin-left: -28px; } .quick span::before { content: "·"; display: inline-block; width: 28px; text-align: center; color: var(--gold); }
.jump { margin-top: 22px; font: 500 15px/1.9 var(--f-body); }
.jump a { color: var(--plum); text-decoration: none; border-bottom: 1px solid rgba(159,70,142,.45); }
.links { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 26px; align-items: center; }
.links.end { justify-content: flex-end; }
.h-sec { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.06; margin: 4px 0 28px; }
.sh2 { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.sh2 h2 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.06; }
.sh2 .small { max-width: 46ch; }
.small { font-size: 15px; color: var(--muted); }
.pol { margin: 0; background: var(--paper); padding: 10px 10px 0; box-shadow: var(--shadow); transform: rotate(-1.5deg); }
.pol img { width: 100%; }
.pol figcaption { font-family: var(--f-note); font-size: 17px; text-align: center; padding-block: 10px 14px; color: var(--muted); }
.pol:not(:has(figcaption)) { padding-bottom: 10px; } /* no caption: an even frame, so the bottom edge is not lost (owner, 2026-10-20) */
.pol.tilt { transform: rotate(1.5deg); } .pol.tilt-l { transform: rotate(-1.5deg); }
/* collages scale with their column (sizes are the 1440px layout, as a share of its 470px column) */
.pair2 { position: relative; aspect-ratio: 1; }
.pair2 .p-main { position: absolute; right: 0; top: 0; width: 70.2%; z-index: 2; transform: rotate(-2deg); }
.pair2 .p-main img { aspect-ratio: 500 / 621; object-fit: cover; }
.pair2 .p-main.wide { width: 85.1%; } .pair2 .p-main.wide img { aspect-ratio: 3 / 2; }
.pair2.wide { aspect-ratio: 470 / 380; }
.pair2 .p-side { position: absolute; left: 0; bottom: 0; width: 36.2%; z-index: 3; transform: rotate(-4deg); padding: 9px; }
.pair2 .p-side.small { width: 25.5%; bottom: 10px; }
.chap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.chap.top { align-items: start; }
.chap.flip > :first-child { order: 2; }
.chap .k, .newshead .k { font: 600 12.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.k i { font-style: normal; color: var(--gold); margin: 0 8px; }
.chap h2 { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.05; margin-top: 12px; }
.chap .note { margin-top: 4px; }
.body { display: grid; gap: 16px; margin-top: 24px; }
.body p { font-size: 17px; line-height: 1.75; max-width: 54ch; }
.quote { font-family: var(--f-head); font-style: italic; font-weight: 330; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.36; color: var(--plum); font-variation-settings: "SOFT" 100, "WONK" 0; padding-left: 22px; border-left: 1px solid rgba(184,146,79,.6); max-width: 30ch; margin-top: 28px; }
.side-note { margin-top: 30px; font-size: 21px; }
.stickies.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; margin-top: 0; }
/* About, Education: the two notes are the highlight, the convocation photo small beside them */
.edu-h { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; align-items: center; }
.edu-h .stickies.two { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.edu-h .stickies p { font-size: 21px; line-height: 1.4; padding: 24px 20px 20px; }
.edu-h .stickies p:nth-child(1) { background: linear-gradient(rgba(214,180,110,.34), rgba(214,180,110,.34)), var(--paper); }
.edu-h .stickies p:nth-child(2) { background: linear-gradient(rgba(192,104,168,.20), rgba(192,104,168,.20)), var(--paper); }
.edu-h .pol { padding: 7px 7px 0; }
.edu-h .pol figcaption { font-size: 14px; line-height: 1.3; padding-block: 8px 10px; }
@media (max-width: 899px) { .edu-h { grid-template-columns: minmax(0, 1fr); gap: 28px; } .edu-h .pol { width: 62%; margin-inline: auto; } .edu-h .pol figcaption { font-size: 15px; } }
/* About, What I paint: four columns, the two wide pictures stacked in the third; the text starts at that column */
@media (min-width: 900px) { .chap.med-h { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } .chap.med-h > div { grid-column: span 2; } .chap.med-h .body { margin-top: 26px; } .chap.med-h .body p { max-width: none; } }
.mstack { display: grid; gap: 20px; }
.mediums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; align-items: end; margin-top: 44px; }
.mediums a { display: grid; gap: 12px; text-decoration: none; }
.mediums .mat { display: block; padding: 7px; box-shadow: 0 1px 2px rgba(36,26,34,.06), 0 22px 38px -26px rgba(36,26,34,.38); background: var(--paper); transition: transform .25s; }
.mediums a:hover .mat { transform: translateY(-2px); }
.mediums .cap { font: 600 11.5px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vid-col { display: grid; gap: 40px; }
.vid-col .pol { width: 300px; justify-self: end; transform: rotate(2deg); }
.vid-col .pol img { aspect-ratio: 3 / 2; object-fit: cover; }
.video { margin: 0; display: grid; gap: 12px; }
.vframe { position: relative; display: block; width: 100%; background: #fff; padding: 8px; box-shadow: var(--shadow); cursor: pointer; }
.vframe img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vframe iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(255,253,249,.94); color: var(--plum); display: grid; place-items: center; box-shadow: 0 14px 30px -12px rgba(36,26,34,.55); transition: transform .25s; }
.play svg { margin-left: 4px; }
.vframe:hover .play { transform: scale(1.06); }
.video figcaption { display: grid; gap: 2px; }
.video figcaption b { font: 400 22px/1.2 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; }
.video figcaption span { font: 600 11.5px/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.partners2 { margin-top: 22px; max-width: 54ch; font: 400 18px/1.6 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; }
.one { display: grid; justify-items: center; }
.one .pol { max-width: 440px; }
.pol.p-tall { max-width: 380px; } .pol.p-tall img { aspect-ratio: 1100 / 1411; object-fit: cover; }
.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 32px; }
.lists h3 { font: 600 12.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.lists ul { list-style: none; margin: 0; padding: 0; }
.lists li { padding: 14px 0; border-top: 1px solid var(--hair); display: grid; gap: 2px; }
.lists li b { font: 400 21px/1.25 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.lists li i { font-style: normal; color: var(--plum); margin-right: 10px; font-variant-numeric: lining-nums; }
.lists li span { font-size: 15px; color: var(--muted); }
.newshead { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.newshead h2 { font-size: clamp(32px, 3.4vw, 50px); margin-top: 12px; }
.feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.feat.news3 { gap: 40px 28px; }
.fcard { grid-template-columns: minmax(0, 1fr); background: rgba(255,253,249,.7); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 24px 44px -32px rgba(36,26,34,.35); padding: 18px 18px 22px; display: grid; gap: 10px; align-content: start; }
.fcard .th { display: block; width: 100%; position: relative; background: #fff; padding: 6px; box-shadow: 0 10px 20px -14px rgba(36,26,34,.5); }
.fcard .th img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.fcard .vframe { padding: 6px; } .fcard .play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.fcard .typo { width: 100%; min-width: 0; aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; background: radial-gradient(60% 70% at 30% 30%, rgba(214,180,110,.25), rgba(214,180,110,0) 70%), var(--linen); }
.fcard .typo i { font: italic 380 26px/1.15 var(--f-head); color: var(--plum); font-variation-settings: "SOFT" 100, "WONK" 0; padding: 0 16px; }
.fcard .ty { font: 600 11px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--orchid); margin-top: 4px; }
.fcard h3 { font-size: 22px; line-height: 1.22; }
.fcard h3 a { color: var(--ink); text-decoration: none; } .fcard h3 a:hover { color: var(--plum); }
.fcard .o { font-size: 14.5px; color: var(--muted); }

/* classes */
.upnext { background: var(--blush); border-top: 1px solid var(--hair2); }
.upnext .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-block: 18px; font-size: 16px; }
.upnext .lab { font: 600 11.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--plum); background: var(--pink); padding: 7px 11px; border-radius: 999px; }
.upnext b { font: 400 20px/1.2 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.upnext .m { color: var(--muted); }
.upnext .arrow { margin-left: auto; }
.groups3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grp { background: rgba(255,253,249,.7); border: 1px solid var(--hair); padding: 20px 22px; display: grid; gap: 6px; align-content: start; border-radius: 2px; }
.grp b { font: 400 24px/1.15 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.grp .age { font: 600 11.5px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--orchid); }
.grp p { font-size: 15.5px; color: var(--muted); }
.grp .arrow { justify-self: start; margin-top: 6px; }
.week-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 20px; margin: 56px 0 18px; }
.week-head h3 { font-size: 30px; }
.key { display: flex; gap: 22px; font-size: 14.5px; color: var(--muted); flex-wrap: wrap; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.dot.on { background: var(--orchid); } .dot.ip { background: var(--sage); }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--hair); background: rgba(255,253,249,.75); }
.week .day { border-right: 1px solid var(--hair2); padding: 14px 12px 18px; display: grid; gap: 10px; align-content: start; min-height: 170px; }
.week .day:last-child { border-right: 0; }
.week .d { font: 600 12px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--hair2); }
.week .d.has { color: var(--plum); }
.slot { background: #fff; border-radius: 2px; padding: 10px 10px 11px; box-shadow: 0 10px 20px -16px rgba(36,26,34,.45); border-left: 3px solid var(--orchid); display: grid; gap: 3px; }
.slot.ip { border-left-color: var(--sage); }
.slot.ad b::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-left: 7px; vertical-align: 2px; }
.grp p a { color: var(--plum); }
.slot b { font: 400 17px/1.15 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.slot span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.slot em { font-style: normal; font: 600 10.5px/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--orchid); }
.slot.ip em { color: var(--sage); }
.week .none { font-size: 14px; color: rgba(110,97,105,.6); font-family: var(--f-note); }
.weeknote { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 14px; font-size: 14.5px; color: var(--muted); }
.facts2 { display: grid; grid-template-columns: 130px 1fr; gap: 12px 20px; margin: 40px 0 0; font-size: 16px; border-block: 1px solid var(--hair); padding-block: 18px; max-width: 760px; }
.facts2 dt { font: 600 12px/1.6 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.facts2 dd { margin: 0; }
.fwrap { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: center; margin-top: 40px; }
.fwrap .facts2 { margin-top: 0; }
.fwrap .pol { margin: 0; transform: rotate(2deg); }
@media (max-width: 899px) { .fwrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } .fwrap .pol { width: 90%; max-width: 420px; margin-inline: auto; transform: rotate(1deg); } }
.kids-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; margin-top: 64px; }
.kids-head h3 { font-size: 30px; }
.kids-head .note { font-size: 20px; }
.kids { display: flex; gap: 22px; margin-top: 32px; align-items: flex-start; }
.kids figure { margin: 0; flex: 1; display: grid; gap: 10px; max-width: 220px; }
.kids .paper { padding: 6px; }
.kids .paper img { aspect-ratio: 300 / 433; object-fit: cover; }
.kids figure:nth-child(odd) .paper { transform: rotate(-1.4deg); } .kids figure:nth-child(even) .paper { transform: rotate(1.2deg); }
/* F45: the class drawings, heading beside a card with her caption */
.kids-side { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; margin-top: 96px; }
.kids-side h3 { font-size: 30px; }
.kids-side .vl { font: 500 15px/1 var(--f-body); color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; margin-top: 10px; cursor: pointer; }
.kids-side .vl:hover { color: var(--plum); }
.kids-board { transform: rotate(-1deg); }
/* Class drawings: cards in justified rows (each card as wide as its drawing; rows of four, pairs on phones) */
.pinwrap { margin-top: 64px; }
.pinwrap .ph { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 30px; }
.pinwrap .ph h3 { font-size: 30px; }
.pinwrap .vl { font: 500 14px/1 var(--f-body); color: var(--muted); min-height: 40px; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; }
.pinwrap .vl:hover { color: var(--plum); }
.wrow { display: flex; gap: 26px; margin-bottom: 34px; align-items: flex-start; }
.wpair { display: contents; }
.wall .card { position: relative; display: block; flex: var(--a) 1 0; min-width: 0; padding: 10px; background: #fbf6ec; border: 0; box-shadow: var(--shadow); cursor: zoom-in; transform: rotate(-1.2deg); transition: transform .25s; }
.wall .card:nth-child(even) { transform: rotate(1.2deg); }
.wall .card:hover { transform: translateY(-3px); }
.wall .card img { display: block; width: 100%; height: auto; }
.wall .card::before { content: ""; position: absolute; top: -10px; left: 50%; width: 60px; height: 20px; transform: translateX(-50%) rotate(-3deg); background: rgba(233, 162, 59, .55); }
.wall .card.tape-1::before { background: rgba(192, 104, 168, .45); }
.wall .card.tape-2::before { background: rgba(120, 150, 100, .45); }
.pinwrap .cap { font-family: var(--f-note); color: var(--muted); font-size: 18px; text-align: center; margin-top: 4px; }
@media (max-width: 899px) { .pinwrap { margin-top: 48px; } .wrow { display: block; margin: 0; } .wpair { display: flex; gap: 14px; margin-bottom: 22px; align-items: flex-start; } .wall .card { padding: 6px; } }
.kids-board > button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.kids-board img { display: block; width: 100%; height: auto; }
@media (max-width: 899px) { .kids-side { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 56px; } .kids-side .vl { margin-top: 4px; } .kids-board { transform: rotate(.6deg); } }
.kids figcaption { font-family: var(--f-note); font-size: 15px; color: var(--muted); text-align: center; line-height: 1.25; }
.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.testi { margin: 0; display: grid; gap: 14px; padding-left: 20px; border-left: 1px solid rgba(184,146,79,.6); align-content: start; }
.testi blockquote { padding: 0; border: 0; font-size: 23px; max-width: none; }
.testi figcaption { font-size: 15px; color: var(--muted); }
.testi figcaption b { color: var(--ink); font-weight: 600; }

/* workshops */
.ucards { display: grid; gap: 26px; }
.ucard { display: grid; grid-template-columns: 120px 300px minmax(0, 1fr); gap: 32px; align-items: center; background: rgba(255,253,249,.75); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 24px 44px -32px rgba(36,26,34,.35); padding: 22px 28px 22px 22px; }
.ucard .date { text-align: center; border-right: 1px solid var(--hair); padding-right: 22px; display: grid; gap: 4px; }
.ucard .date small { font: 600 12px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--orchid); }
.ucard .date b { font: 340 56px/1 var(--f-head); color: var(--plum); font-variant-numeric: lining-nums; font-variation-settings: "SOFT" 100, "WONK" 0; }
.ucard .date span { font-size: 13px; color: var(--muted); line-height: 1.35; }
.ucard .pic { display: block; background: #fff; padding: 6px; box-shadow: 0 12px 22px -16px rgba(36,26,34,.5); transform: rotate(-.8deg); }
.ucard .pic img { aspect-ratio: 3 / 2; object-fit: cover; }
.ucard .txt { display: grid; gap: 8px; }
.ucard .ty, .prow .ty { font: 600 11.5px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--orchid); }
.ucard h3 { font-size: 32px; line-height: 1.1; } .ucard h3 a { color: var(--ink); text-decoration: none; }
.ucard p { font-size: 15.5px; color: var(--muted); }
.ucard .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 6px; }
.ucard .row .arrow { margin-left: auto; }
.status { display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; background: rgba(79,107,58,.12); color: #3f5a2e; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.few { background: rgba(233,162,59,.18); color: #8a5a12; }
.status.full, .status.done { background: rgba(110,97,105,.12); color: var(--muted); }
.status.running { background: var(--pink); color: var(--plum); }
.empty { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px 30px; border: 1.5px dashed rgba(159,70,142,.35); background: rgba(255,253,249,.6); }
.empty b { font: 400 24px/1.2 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.empty p { font-size: 15px; color: var(--muted); margin-top: 4px; }
.pyear { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px; padding: 22px 0; border-top: 1px solid var(--hair); }
.pyear .y { font: 340 40px/1 var(--f-head); color: var(--plum); font-variant-numeric: lining-nums; font-variation-settings: "SOFT" 100, "WONK" 0; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 24px; align-items: center; padding: 12px 0; color: var(--ink); text-decoration: none; }
.prow + .prow { border-top: 1px solid var(--hair2); }
.prow > span:first-child { display: grid; gap: 2px; }
.prow b { font: 400 23px/1.2 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.prow:hover b { color: var(--plum); }
.prow .d { font-size: 15px; color: var(--muted); }
.prow .th { background: #fff; padding: 4px; box-shadow: 0 10px 18px -14px rgba(36,26,34,.5); }
.after-note { margin-top: 18px; }
.ws-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; padding-block: 40px 56px; }
.ws-top .crumb { margin-bottom: 14px; }
.ws-top .lede { margin-top: 16px; }
.when, .when2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; font-size: 16px; }
.factbox { position: relative; background: var(--paper); box-shadow: var(--shadow); padding: 28px 28px 26px; display: grid; gap: 18px; }
.factbox .tape { left: 40%; }
.factbox dl { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 10px 16px; font-size: 15.5px; }
.factbox dt { font: 600 11.5px/1.7 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.factbox dd { margin: 0; }
.factbox .actions { padding-top: 14px; border-top: 1px solid var(--hair); gap: 12px 24px; }
.wrap.narrow2 > * { max-width: 820px; } /* left edge lines up with the title and photos above */
.ws-entry strong { font-family: var(--f-head); font-weight: 400; font-size: 1.12em; color: var(--plum); }
.parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.parts .mat { display: block; background: var(--paper); padding: 7px; box-shadow: var(--shadow-s); }
.parts .mat img { aspect-ratio: 1; object-fit: cover; }

/* events */
.evtop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 22px; background: rgba(255,253,249,.7); border: 1.5px dashed rgba(159,70,142,.3); }
.evtop .lab { font: 600 11.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--plum); background: var(--pink); padding: 7px 11px; border-radius: 999px; }
.evtop b { font: 400 20px/1.2 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.evtop .m { color: var(--muted); font-size: 15.5px; margin-left: auto; }
.ev-up { display: grid; gap: 6px; } .ev-up a { color: var(--ink); text-decoration: none; display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; } .ev-up span { color: var(--muted); font-size: 15px; }
.sec.top0 .sh2 { margin-top: 56px; margin-bottom: 0; }
.feat2 { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 56px; align-items: center; padding: 44px 0; } /* the same rhythm as the Crafts shelves */
.sh2 + .feat2 { padding-top: 16px; }
.feat2 + .feat2 { border-top: 1px solid var(--hair2); }
.feat2.flip { grid-template-columns: minmax(0, 1fr) 400px; }
.feat2.flip > :first-child { order: 2; }
.feat2 .pic { display: block; background: #fff; padding: 9px; box-shadow: var(--shadow); transform: rotate(-.8deg); }
.feat2.flip .pic { transform: rotate(.8deg); }
.feat2 .pic img { aspect-ratio: 3 / 2; object-fit: cover; }
.feat2 .pic.contain { justify-self: center; width: min(100%, 300px); } .feat2 .pic.contain img { aspect-ratio: auto; } /* a tall painting: whole, at its own shape */
.feat2 .ty { font: 600 11.5px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--orchid); }
.feat2 h3 { font-size: clamp(30px, 3vw, 40px); line-height: 1.06; margin-top: 8px; } .feat2 h3 a { color: var(--ink); text-decoration: none; }
.feat2 .w { font-size: 15.5px; color: var(--muted); margin-top: 8px; }
.feat2 .d { font-size: 17px; line-height: 1.6; margin-top: 12px; max-width: 46ch; }
.feat2 .lk { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 18px; }
.alllist { margin-top: 8px; border-top: 1px solid var(--hair); }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) 190px 250px 110px 24px; gap: 24px; align-items: baseline; padding: 17px 4px; border-bottom: 1px solid var(--hair); color: var(--ink); text-decoration: none; }
.lrow:hover b { color: var(--plum); }
.lrow b { font: 400 22px/1.25 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.lrow .k2 { font: 600 11px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--orchid); }
.lrow .pl { font-size: 15px; color: var(--muted); }
.lrow .dt { font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.lrow i { font-style: normal; color: var(--plum); }
.lrow .star { font: 600 10px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-left: 8px; vertical-align: 3px; }
.lrow .star.m { display: none; }
.egal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.egal.solo { grid-template-columns: minmax(0, 520px); justify-content: center; }
.egal .grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.egal .grid4 .mat { display: block; background: var(--paper); padding: 6px; box-shadow: var(--shadow-s); }
.egal .grid4 img { aspect-ratio: 3 / 2; object-fit: cover; }
.egal .grid4 .mat.tall img { aspect-ratio: auto; } /* a tall painting, whole */
/* main photo, wide photos stacked, tall painting: every picture whole */
.egal.trio { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1fr); gap: 26px; }
.egal.trio .mat { display: block; background: var(--paper); padding: 6px; box-shadow: var(--shadow-s); }
.egal.trio img { width: 100%; height: auto; }
.egal.trio .pol { padding: 8px; }
.egal.trio .stack { display: grid; gap: 18px; }
.egal.trio .mat.one { transform: rotate(.6deg); }
/* main photo and two wide photos stacked beside it, about the same height */
.egal.pair { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 26px; }
.egal.pair .stack { display: grid; gap: 18px; align-items: start; }
.egal.pair .mat { display: block; background: var(--paper); padding: 6px; box-shadow: var(--shadow-s); }
.egal.pair img { width: 100%; height: auto; display: block; }
.egal.pair .pol { padding: 8px; }
/* main photo and one more, side by side */
.egal.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: center; }
.egal.duo .mat { display: block; background: var(--paper); padding: 6px; box-shadow: var(--shadow-s); transform: rotate(.6deg); }
.egal.duo img { width: 100%; height: auto; display: block; }
.egal.duo.sq { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } /* a square poster stays smaller than the photo */
#how .note.friend { font-size: 22px; margin-top: 4px; } /* her advice, in her words (bio doc), under the quote */
.estory { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.pcut { display: block; width: 100%; max-width: 500px; padding: 8px; background: var(--paper); border: 0; box-shadow: var(--shadow); transform: rotate(-.8deg); cursor: zoom-in; } /* a newspaper cutting on an event page */
.pcut img { display: block; width: 100%; height: auto; }
.pcap { font-size: 18px; margin-top: 16px; }
.entry + .pcut, .links + .pcut { margin-top: 32px; }
.dropcap > p:first-of-type::first-letter { font-family: var(--f-head); font-size: 3.1em; float: left; line-height: .9; padding: 6px 10px 0 0; color: var(--plum); }
.side { display: grid; gap: 28px; }
.h-side { font: 600 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.chiplist { display: flex; flex-wrap: wrap; gap: 8px; }
.chiplist a { font: 500 14.5px/1 var(--f-body); padding: 11px 14px; border: 1px solid rgba(96,16,80,.25); border-radius: 999px; color: var(--plum); background: var(--paper); text-decoration: none; }
.press1 { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--hair); }
.press1 b { font: 400 18px/1.25 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.press1 span { font-size: 13.5px; color: var(--muted); }

/* collaborations */
.ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.way { background: rgba(255,253,249,.75); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 24px 44px -32px rgba(36,26,34,.35); padding: 16px 16px 22px; display: grid; gap: 10px; align-content: start; }
.way .pic { display: block; background: #fff; padding: 5px; box-shadow: 0 10px 18px -14px rgba(36,26,34,.5); margin-bottom: 6px; }
.way .pic img { aspect-ratio: 4 / 3; object-fit: cover; }
.way h3 { font-size: 25px; line-height: 1.15; }
.way p { font-size: 15px; color: var(--muted); }
.way .eg { font-size: 14.5px; color: var(--ink); border-top: 1px solid var(--hair); padding-top: 10px; }
.way .eg i { font-style: normal; font: 600 10.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--orchid); display: block; margin-bottom: 6px; }
.prt { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) 250px; gap: 40px; padding: 34px 0; border-top: 1px solid var(--hair); align-items: start; scroll-margin-top: 120px; }
.prt h3 { font-size: 30px; line-height: 1.1; }
.prt .o { font-size: 15px; color: var(--muted); margin-top: 8px; max-width: 34ch; }
.prt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.prt li { display: grid; grid-template-columns: 58px 1fr; gap: 12px; font-size: 16px; line-height: 1.5; }
.prt li i { font-style: normal; font: 340 20px/1.25 var(--f-head); color: var(--plum); font-variant-numeric: lining-nums; }
.prt .th { display: block; background: #fff; padding: 6px; box-shadow: 0 12px 22px -16px rgba(36,26,34,.5); transform: rotate(.8deg); }
.prt .th img { aspect-ratio: 3 / 2; object-fit: cover; }
.also { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hair); font: 400 19px/1.6 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; }
.also .lab { font: 600 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 18px; }

/* commissions */
.c-collage { position: relative; aspect-ratio: 470 / 460; }
.c-collage .pol.cm-hero { position: absolute; right: 0; top: 8.7%; width: 89.4%; transform: rotate(1.6deg); z-index: 2; }
.c-collage .pol.cm-hero img { aspect-ratio: 1400 / 1009; object-fit: cover; }
.c-collage .paper.sm { position: absolute; left: 0; top: 0; width: 38.3%; transform: rotate(-3deg); z-index: 3; padding: 9px; }
.cc2 { aspect-ratio: 470 / 420; }
.cc2 .paper.big { position: absolute; right: 0; top: 0; width: 76.6%; transform: rotate(2deg); z-index: 2; padding: 10px; }
.cc2 .pol.small { position: absolute; left: 0; bottom: 0; width: 46.8%; transform: rotate(-3deg); z-index: 3; }
.cc2 .pol.small img { aspect-ratio: 1; object-fit: cover; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--hair); }
.steps > div { padding: 28px 26px 30px 0; display: grid; gap: 10px; align-content: start; }
.steps > div + div { padding-left: 26px; border-left: 1px solid var(--hair2); }
.steps .n { font: 340 40px/1 var(--f-head); color: var(--gold); font-variant-numeric: lining-nums; }
.steps h3 { font-size: 26px; }
.steps p { font-size: 15.5px; color: var(--muted); line-height: 1.6; }
.cfeat { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: center; }
.cfeat .mat { display: block; background: var(--paper); padding: 10px; box-shadow: var(--shadow); transform: rotate(-1deg); }
.cfeat .ty, .cmcard .ty { font: 600 11.5px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--orchid); }
.cfeat h3 { font-size: clamp(34px, 3.4vw, 44px); line-height: 1.06; margin-top: 8px; }
.cfeat .d { font-size: 17px; margin-top: 14px; max-width: 50ch; line-height: 1.65; }
.cmcards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
/* Commissions: a set with no story yet, the paintings in a row under the cards */
.cmwide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.6fr); gap: 30px; align-items: center; margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--hair); }
.cmwide .tx { display: grid; gap: 8px; }
.cmwide .ty { font: 600 11.5px/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--orchid); }
.cmwide b { font: 400 24px/1.15 var(--f-head); }
.cmwide .d { font-size: 15px; line-height: 1.5; color: var(--muted); }
.cmwide .five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.cmwide .pic { display: block; width: 100%; background: var(--paper); padding: 5px; border: 0; box-shadow: var(--shadow-s); cursor: zoom-in; transition: transform .25s; }
.cmwide .pic:hover { transform: translateY(-3px); }
.cmwide .pic img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 899px) { .cmwide { grid-template-columns: minmax(0, 1fr); gap: 16px; } .cmwide .five { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
.cmcard { display: grid; gap: 8px; align-content: start; color: var(--ink); text-decoration: none; }
.cmcard .pic { display: block; background: #fff; padding: 6px; box-shadow: 0 12px 22px -16px rgba(36,26,34,.5); margin-bottom: 6px; transition: transform .25s; }
.cmcard:hover .pic { transform: translateY(-2px); }
.cmcard .pic img { aspect-ratio: 1; object-fit: cover; }
.cmcard b { font: 400 23px/1.2 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.cmcard:hover b { color: var(--plum); }
.cmcard .d { font-size: 14.5px; color: var(--muted); }
.smalls { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.smalls ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 16px; }
.smalls li::marker { color: var(--gold); }
.row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; }
.row4 figure { margin: 0; display: grid; gap: 8px; }
.row4 .mat { display: block; background: var(--paper); padding: 5px; box-shadow: var(--shadow-s); }
.row4 .mat img { aspect-ratio: 1; object-fit: cover; }
.row4 figcaption { font: 600 10.5px/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* crafts */
.shelf { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; padding: 44px 0; border-top: 1px solid var(--hair); scroll-margin-top: 110px; }
.shelf:first-child { border-top: 0; padding-top: 0; }
.shelf.flip > :first-child { order: 2; }
.shelf .k { font: 600 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.shelf h2 { font-size: clamp(30px, 3vw, 38px); line-height: 1.08; margin-top: 10px; }
.shelf > div > p { font-size: 16.5px; line-height: 1.65; margin-top: 12px; max-width: 42ch; }
.shelf .q { margin-top: 16px; font-size: 21px; max-width: 34ch; padding-left: 16px; }
.shelf .meta { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.shelf .pr { font: 400 22px/1 var(--f-head); font-variant-numeric: lining-nums; }
.shelf .pics { display: flex; gap: 20px; align-items: flex-end; }
.shelf .pics .mat { display: block; background: var(--paper); padding: 7px; box-shadow: var(--shadow-s); }
.shelf .pics .mat.t1 { transform: rotate(-1deg); } .shelf .pics .mat.t2 { transform: rotate(1.2deg); }
.gift2 { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; } /* the Inclusive Bazaar photo removed (owner, 2026-11-01: from a corporate event) */
.gift2 > div > p { font-size: 16.5px; max-width: 44ch; }
.gift2 > .mat { display: block; background: var(--paper); padding: 7px; box-shadow: var(--shadow-s); }
.gift2 .pol img { aspect-ratio: 4 / 3; object-fit: cover; }
.diy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.diy a { padding: 22px 22px 24px 0; display: grid; gap: 8px; align-content: start; color: var(--ink); text-decoration: none; }
.diy a + a { padding-left: 22px; border-left: 1px solid var(--hair2); }
.diy .ty { font: 600 11px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--orchid); }
.diy b { font: 400 22px/1.2 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.diy a:hover b { color: var(--plum); }

/* stories */
.sfeat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; margin-bottom: 64px; }
.sfeat .pic { display: block; background: #fff; padding: 10px; box-shadow: var(--shadow); transform: rotate(-.6deg); }
.sfeat .pic img { aspect-ratio: 3 / 2; object-fit: cover; }
.sfeat .ty, .scard .ty { font: 600 11.5px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--orchid); }
.sfeat h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.08; margin-top: 10px; }
.sfeat h2 a, .scard h3 a { color: var(--ink); text-decoration: none; }
.sfeat h2 a:hover, .scard h3 a:hover { color: var(--plum); }
.sfeat .d { font-size: 17px; color: var(--muted); margin-top: 14px; line-height: 1.6; }
.scards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.scard { display: grid; gap: 10px; align-content: start; }
.scard .pic { display: block; background: #fff; padding: 6px; box-shadow: 0 12px 22px -16px rgba(36,26,34,.5); margin-bottom: 6px; }
.scard .pic img { aspect-ratio: 3 / 2; object-fit: cover; }
.scard .typo, .sfeat .typo { aspect-ratio: 3 / 2; display: grid; place-items: center; text-align: center; background: radial-gradient(60% 70% at 30% 30%, rgba(214,180,110,.25), rgba(214,180,110,0) 70%), var(--linen); font: italic 380 24px/1.2 var(--f-head); color: var(--plum); font-variation-settings: "SOFT" 100, "WONK" 0; padding: 0 24px; }
.scard h3 { font-size: 24px; line-height: 1.2; margin-top: 4px; }
.scard .d { font-size: 15px; color: var(--muted); margin-top: 6px; }
.read-w { max-width: 720px; }
.page-open .meta { display: flex; gap: 10px; flex-wrap: wrap; }
.page-open .meta span + span::before { content: "·"; color: var(--gold); margin-right: 10px; }
.storyfoot { display: flex; justify-content: space-between; gap: 24px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hair); font-size: 15px; color: var(--muted); }
.storyfoot a { color: var(--muted); text-decoration: none; max-width: 48%; }
.storyfoot b { display: block; font: 400 20px/1.25 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--ink); margin-top: 4px; font-weight: 400; }
.storyfoot a:last-child { text-align: right; }

/* say hello */
.hello-band { border-top: 1px solid var(--hair2); }
.hello-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; align-items: start; padding-block: 40px 88px; }
.hello-in .note { font-size: 26px; transform: rotate(-2deg); transform-origin: left; }
.hello-in .lede { margin-top: 18px; max-width: 52ch; }
.form { display: grid; gap: 20px; margin-top: 36px; max-width: 640px; }
.field { display: grid; gap: 8px; margin: 0; border: 0; padding: 0; }
.field label, .field legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 4px; }
.field small { font-weight: 400; color: var(--muted); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.input { width: 100%; min-height: 52px; border: 1px solid rgba(36,26,34,.28); border-radius: 2px; background: #fff; padding: 14px 16px; font: 400 17px/1.4 var(--f-body); color: var(--ink); }
textarea.input { min-height: 160px; resize: vertical; }
.input.short { max-width: 300px; }
.input:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(159,70,142,.22); }
.input.err { border-color: var(--brick); }
.errmsg { font-size: 14.5px; color: var(--brick); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chipb { position: relative; display: inline-flex; }
.chipb input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chipb span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(96,16,80,.3); background: var(--paper); font: 500 15px/1 var(--f-body); }
.chipb input:checked + span { background: var(--plum); color: #fff; border-color: var(--plum); }
.chipb input:focus-visible + span { outline: 2px solid var(--orchid); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sendrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.sendrow p { font-size: 14px; color: var(--muted); max-width: 36ch; }
.sent { display: grid; gap: 10px; margin-top: 28px; padding: 28px; background: rgba(255,253,249,.8); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 24px 44px -32px rgba(36,26,34,.35); }
.sent b { font: 400 32px/1.15 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.sent b em { font-style: italic; color: var(--plum); }
.sent p { font-size: 16px; color: var(--muted); }
.reach { position: relative; background: var(--paper); box-shadow: var(--shadow); padding: 30px 28px 26px; display: grid; gap: 18px; margin-top: 110px; }
.reach .tape { left: 38%; }
.reach dl { margin: 0; display: grid; gap: 16px; }
.reach dt { font: 600 11.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.reach dd { margin: 0; font-size: 17px; word-break: break-word; }
.reach .pol.small { width: 170px; transform: rotate(-3deg); justify-self: end; }
.reach .pol.small img { aspect-ratio: 500 / 621; object-fit: cover; }

@media (max-width: 899px) {
	.open-in, .chap, .ws-top, .estory, .egal, .smalls, .gift2, .cfeat, .hello-in, .sfeat { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.egal.trio { grid-template-columns: minmax(0, 1fr); } .egal.trio .stack { gap: 16px; }
	.egal.duo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.egal.pair { grid-template-columns: minmax(0, 1fr); } .egal.pair .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.chap.flip > :first-child { order: 0; }
	.open-in { padding-block: 24px 40px; }
	.open-in .note, .plain-open .note, .hello-in .note { font-size: 20px; }
	.open-in .lede, .plain-open .lede { font-size: 16.5px; }
	.plain-open { padding-block: 24px 22px; }
	.pair2, .pair2.wide { height: 360px; }
	.pair2 .p-main { width: 64%; } .pair2 .p-main.wide { width: 82%; }
	.pair2 .p-side { width: 36%; }
	.c-collage { height: 340px; } .c-collage .pol.cm-hero { width: 82%; } .c-collage .paper.sm { width: 40%; }
	.cc2 { height: 340px; } .cc2 .paper.big { width: 76%; } .cc2 .pol.small { width: 46%; }
	.subtabs .wrap { gap: 18px; font-size: 14.5px; }
	.subtabs .wrap::-webkit-scrollbar { display: none; }
	.mediums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } /* every picture in view, no swiping */
	.mstack { gap: 16px; }
	.vid-col .pol { width: 78%; justify-self: center; }
	.lists, .groups3, .voices, .feat, .ways, .cmcards, .scards, .diy, .steps, .parts { grid-template-columns: minmax(0, 1fr); }
	.cmcards { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
	.parts { grid-template-columns: 1fr 1fr; }
	.steps > div, .steps > div + div { padding: 18px 0; border-left: 0; border-top: 1px solid var(--hair2); }
	.diy a, .diy a + a { padding: 16px 0; border-left: 0; border-top: 1px solid var(--hair2); }
	.week { grid-template-columns: minmax(0, 1fr); }
	.week .day { grid-template-columns: 56px 1fr; min-height: 0; border-right: 0; border-bottom: 1px solid var(--hair2); padding: 12px; gap: 8px 12px; }
	.week .day > :not(.d) { grid-column: 2; }
	.week .d { border: 0; padding: 4px 0 0; }
	.facts2 { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.facts2 dd { margin-bottom: 10px; }
	.kids { overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter) 10px; scrollbar-width: none; }
	.kids figure { flex: 0 0 130px; }
	.ucard { grid-template-columns: 64px 1fr; gap: 14px; padding: 16px; }
	.ucard .date { padding-right: 12px; } .ucard .date b { font-size: 34px; } .ucard .date span { display: none; }
	.ucard .pic { display: none; }
	.ucard h3 { font-size: 24px; }
	.ucard .row .arrow { margin-left: 0; }
	.pyear { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.prow { grid-template-columns: 1fr 72px; gap: 14px; }
	.prow b { font-size: 20px; }
	.empty { grid-template-columns: minmax(0, 1fr); }
	.feat2, .feat2.flip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.feat2.flip > :first-child { order: 0; }
	.lrow { grid-template-columns: 1fr auto; gap: 4px 14px; padding: 14px 0; }
	.lrow b { font-size: 18px; } .lrow .pl, .lrow > i { display: none; }
	.lrow .k2 { grid-row: 2; } .lrow .dt { grid-row: 1; grid-column: 2; font-size: 13.5px; }
	.evtop .m { margin-left: 0; }
	.prt { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.prt .th { max-width: 300px; }
	.two { grid-template-columns: minmax(0, 1fr); }
	.reach { margin-top: 0; }
	.reach .pol.small { display: none; }
	.shelf, .shelf.flip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.shelf.flip > :first-child { order: 0; }
	.shelf .pics { flex-direction: column; align-items: stretch; }
	.shelf .pics .mat { max-width: none !important; }
	.sfeat { margin-bottom: 40px; }
	.storyfoot { flex-direction: column; } .storyfoot a, .storyfoot a:last-child { max-width: none; text-align: left; }
	.newshead { align-items: start; }
}

/* pictures inside card frames fill the frame; paintings are shown whole (never cropped) on white */
.scard .pic img, .sfeat .pic img, .ucard .pic img, .feat2 .pic img, .way .pic img, .prt .th img, .cmcard .pic img, .fcard .th img, .row4 .mat img, .egal .grid4 img, .parts .mat img, .gift2 > .mat img, .prow .th img, .kids .paper img, .shelf .pics .mat img { width: 100%; display: block; }
.contain img, .cmcard .pic.art img, .way .pic.art img, .prt .th.art img { object-fit: contain !important; background: #fff; }

/* ---------- plain pages (until their own designs are built) ---------- */
.page-open { background: radial-gradient(ellipse 50% 70% at 78% 30%, rgba(252,216,145,.40), rgba(251,245,236,0) 75%), var(--ivory); padding: 40px 0 48px; }
.page-open h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; font-weight: 380; }
.page-open .note { font-size: 24px; transform: rotate(-2deg); transform-origin: left; margin-bottom: 8px; }
.page-open .lede { margin-top: 18px; }
.page-open .actions { margin-top: 28px; }
.crumb { font: 600 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb span { color: var(--gold); margin: 0 8px; }
.meta { margin-top: 12px; color: var(--muted); font-size: 15px; }
.page-body { background: var(--paper); padding-block: 48px 88px; }
.entry > * + * { margin-top: 1.1em; }
.entry [id] { scroll-margin-top: 110px; } /* a link to a section stops clear of the sticky menu */
.entry p, .entry li, .entry div { text-align: left !important; } /* old posts set justified text inline */
.entry h2 { font-size: 32px; margin-top: 1.6em; }
.entry h3 { font-size: 24px; margin-top: 1.4em; }
.entry img { height: auto; }
.entry figure { margin: 1.6em 0; }
.entry figcaption, .entry .wp-caption-text { font-family: var(--f-note); font-size: 16px; color: var(--muted); text-align: center; margin-top: 8px; }
/* old posts: WordPress makes a left/right image a table, which squeezes its caption to one word per line on phones */
.entry figure.alignleft, .entry figure.alignright { display: block; } .entry figure figcaption, .entry .wp-block-image figure > figcaption, .entry figure.wp-block-image.alignleft > figcaption, .entry figure.wp-block-image.alignright > figcaption { display: block; }
.entry pre.wp-block-preformatted { font: inherit; color: var(--muted); white-space: pre-wrap; }
.entry .wp-block-embed { clear: both; }
.entry .wp-block-image img, .entry p > img, .entry a > img { box-shadow: var(--shadow-s); background: #fff; padding: 6px; }
.entry .aligncenter { margin-inline: auto; }
.entry iframe { max-width: 100%; }
.entry ul, .entry ol { padding-left: 1.3em; }
.entry li::marker { color: var(--gold); }
.entry .wp-block-gallery { gap: 12px; }
.kind-words { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--hair); display: grid; gap: 22px; }
.kind-words h2 { font-size: 28px; }
.kind-words blockquote { font-size: 20px; max-width: none; }
.kind-words blockquote p { margin: 0; }
.kind-words footer { font: 400 14px/1.5 var(--f-body); font-style: normal; color: var(--muted); margin-top: 6px; }
.write-to-me { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--hair); color: var(--muted); }
.write-to-me a { font-weight: 600; }
.plain-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.plain-list li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.plain-list a { font: 400 21px/1.3 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--ink); text-decoration: none; }
.plain-list a:hover { color: var(--plum); }
.plain-list span { color: var(--muted); font-size: 14px; white-space: nowrap; }
.search-big { display: flex; gap: 12px; margin-top: 24px; }
.search-big input { flex: 1; min-height: 52px; border: 1px solid rgba(36,26,34,.28); border-radius: 2px; background: #fff; padding: 0 16px; font: 400 17px/1 var(--f-body); }
.search-big input:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(159,70,142,.22); }
.nav-links { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 999px; font-weight: 600; color: var(--ink); text-decoration: none; }
.nav-links .current { background: var(--plum); color: #fff; }

@media (max-width: 899px) {
	.entry .alignleft, .entry .alignright, .entry img.alignleft, .entry img.alignright, .entry .wp-caption.alignleft, .entry .wp-caption.alignright, .entry figure.alignleft, .entry figure.alignright { float: none !important; display: block; margin: 1.2em auto !important; width: auto !important; max-width: 100% !important; }
	.entry table, .entry td { display: block; width: auto !important; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
	.cards { grid-template-columns: minmax(0, 1fr); }
	.feature { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.stage { height: 440px; }
	.stage img { max-height: 400px; }
}
@media (max-width: 899px) {
	body.home .site-head { position: sticky; }
	.hero-band { padding-top: 0; }
}
@media (max-width: 860px) { .closing { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
	section { padding-block: 56px; }
	.hero { padding-block: 28px 64px; }
	.collage { height: 500px; }
	.collage .c2 .hcap, .collage .c4 .hcap, .collage .c1 .hcap, .collage .pointer { display: none; }
	.collage .c1 { left: 31%; top: 0; width: 50%; }
	.collage .c2 { top: 20%; width: 29%; }
	.collage .c4 { width: 42%; }
	.closing { padding-top: 56px; margin-top: 48px; }
	.thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
	.about { gap: 40px; }
	.classes { gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

.collage a.paper, .polaroid > a, .pair a { display: block; }
.collage a.paper { transition: transform .25s; } .collage a.paper:hover { transform: translateY(-3px); }

/* ---------- Art classes for adults (/classes/adults/) ---------- */
.ph-slot { display: grid; place-items: center; text-align: center; padding: 24px; aspect-ratio: 4 / 3; border: 1.5px dashed rgba(163,64,44,.45); background: repeating-linear-gradient(135deg, rgba(240,226,206,.55) 0 14px, rgba(251,245,236,.55) 14px 28px); color: var(--brick); font: 600 11.5px/1.5 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.ph-slot b { display: block; font: 400 20px/1.25 var(--f-note); letter-spacing: 0; text-transform: none; color: var(--plum); margin-top: 6px; }
.todo { display: inline-flex; font: 600 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--brick); border: 1px dashed rgba(163,64,44,.55); border-radius: 999px; padding: 6px 10px; background: rgba(255,255,255,.6); vertical-align: middle; }
.ad-open h1 em, .s-paper .h-sec em, .who h2 em, .paint-head h2 em { font-style: italic; color: var(--plum); }
.ad-pics { position: relative; aspect-ratio: 470 / 430; }
.ad-pics .p-main { position: absolute; right: 0; top: 0; width: 85.1%; z-index: 2; }
.ad-pics .p-main img, .ad-pics .p-main .ph-slot { aspect-ratio: 5 / 4; object-fit: cover; }
.ad-pics .p-side { position: absolute; left: 0; bottom: 0; width: 34%; z-index: 3; transform: rotate(-4deg); padding: 9px; }
.ad-pics.solo { height: auto; aspect-ratio: auto; } .ad-pics.solo .p-side { position: relative; width: 300px; margin-inline: auto; transform: rotate(-2deg); }
.ad-times { border-top: 1px solid var(--hair2); background: rgba(255,253,249,.55); }
.ad-times .wrap { display: flex; flex-wrap: wrap; }
.ad-times p { flex: 1 1 380px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 20px 0; }
.ad-times p + p { border-left: 1px solid var(--hair2); padding-left: 40px; }
.ad-times .lab { font: 600 11.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ad-times b { font: 400 22px/1.2 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.ad-times .m { font-size: 15px; color: var(--muted); }
.why3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.why3 > div { background: rgba(255,253,249,.75); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 24px 44px -32px rgba(36,26,34,.35); padding: 28px 28px 30px; display: grid; gap: 12px; align-content: start; }
.why3 .n { font: 400 30px/1 var(--f-note); color: var(--orchid); }
.why3 h3 { font-size: 27px; line-height: 1.15; }
.why3 > div > p { font-size: 16.5px; }
.why3 .testi { margin-top: 6px; padding-left: 14px; gap: 6px; }
.why3 .testi blockquote { font-size: 18px; line-height: 1.4; }
.why3 .testi figcaption { font-size: 13.5px; }
.who { margin-top: 72px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.who.solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.who h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.12; margin-top: 4px; }
.who .body { margin-top: 18px; } .who .body p + p { margin-top: 14px; }
.who .testi { margin-top: 26px; }
.who .testi blockquote { font-size: 22px; }
.paint-head { align-items: end; }
.paint-head h2 { margin-top: 4px; }
/* F28: each card keeps its painting's shape; flex-grow by aspect ratio (--ar) gives one row of equal heights. */
.paint5 { display: flex; gap: 24px; margin-top: 36px; align-items: flex-start; }
.paint5 figure { margin: 0; display: grid; gap: 12px; flex: var(--ar, .8) 1 0; min-width: 0; }
.paint5 .mat { display: block; padding: 7px; background: var(--paper); box-shadow: 0 1px 2px rgba(36,26,34,.06), 0 22px 38px -26px rgba(36,26,34,.38); }
.paint5 .mat img { width: 100%; height: auto; display: block; }
.paint5 button.mat { width: 100%; cursor: zoom-in; } .paint5 .mat { transition: transform .25s; } .paint5 .mat:hover { transform: translateY(-2px); }
.paint5 figcaption b { display: block; font: 400 19px/1.2 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.paint5 figcaption span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.how2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.how2 .cl { background: rgba(255,253,249,.75); border: 1px solid var(--hair); box-shadow: 0 24px 44px -32px rgba(36,26,34,.35); padding: 26px 30px; }
.how2 .ty { font: 600 11.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.how2 h3 { font-size: 30px; line-height: 1.15; margin-top: 10px; }
.how2 h3 span { white-space: nowrap; }
.how2 .cl > p:last-child { font-size: 16px; margin-top: 8px; }
.facts-ad { max-width: none; grid-template-columns: 130px 1fr 130px 1fr; }
.facts-ad a { color: var(--plum); }
/* F31: a class photo beside the two class cards, which then stack */
.how-pic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.how-pic .how2 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.how-pic .pol img { aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.teams { background: var(--t-pink); border-top: 1px solid var(--hair2); } /* F32: part of the pink closing above it */
.teams .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 30px; padding-block: 26px; }
.teams b { font: 400 24px/1.2 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; }
.teams p { font-size: 16px; color: var(--muted); margin-top: 4px; }
.grp-ad { background: rgba(252,216,145,.22); border-color: rgba(184,146,79,.45); }
@media (max-width: 899px) {
	.ad-pics { height: 320px; } .ad-pics .p-main { width: 78%; } .ad-pics .p-side { width: 34%; }
	.ad-times p { flex-basis: 100%; padding: 12px 0; border-bottom: 1px solid var(--hair2); }
	.ad-times p + p { border-left: 0; padding-left: 0; }
	.ad-times p:last-child { border-bottom: 0; }
	.ad-times b { font-size: 19px; }
	.why3, .how2, .who { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.why3 > div { padding: 20px 20px 22px; }
	.who { margin-top: 48px; gap: 24px; }
	.paint5 { display: flex; overflow-x: auto; gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scrollbar-width: none; }
	.paint5 figure { flex: 0 0 calc(210px * var(--ar, .8) + 14px); }
	.facts-ad { grid-template-columns: minmax(0, 1fr); }
	.how-pic { grid-template-columns: minmax(0, 1fr); gap: 36px; } .how-pic .pol.tilt { transform: rotate(1deg); }
	.how2 h3 { font-size: 25px; }
	.how2 h3 span { display: block; font-size: 21px; color: var(--muted); }
}

/* Paintings: link to Early works under the pager */
.early-link { margin-top: 28px; text-align: center; font-family: var(--f-note); font-size: 21px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; }
.early-link .arrow { font-family: var(--f-body); }
.fhead .fright { display: inline-flex; align-items: baseline; gap: 22px; }
.fhead .f-av { font: 600 14.5px/1 var(--f-body); color: #3f5a2e; text-decoration: none; border-bottom: 1px solid rgba(63,90,46,.4); padding-bottom: 3px; }
.fhead .f-av i:last-child { font-style: normal; font-size: 12.5px; opacity: .9; }
.fhead .f-av.on { border-bottom-width: 2px; }
.fhead .dot-av { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5f8a45; margin-right: 7px; vertical-align: 1px; }

/* ---------- F1 (owner, 2026-10-18): no "notebook" lines ----------
   Bands never meet at a ruled line. Lines stay only inside real lists (timetable, events, past workshops), fainter. */
section, .sec-open, .hello-band, .upnext, .site-foot, .pp-nav, .ad-times, .teams, .cta-band, .p2-wall, .gal-bar, .sec.top0 { border-top: 0; }
.subtabs, .secbar { border-bottom: 0; }
.plain-open + .wrap .filters, .sec-open > .wrap > .filters { border-top: 0; }
.closing, .pager, .kind-words, .write-to-me, .storyfoot, .also, .way .eg, .factbox .actions { border-top: 0; }
.facts2, .sale, .steps { border-block: 0; }
.lists li, .pyear, .lrow, .alllist, .press1, .prt, .shelf, .diy, .plain-list, .plain-list li, .prow + .prow, .feat2 + .feat2 { border-color: var(--hair2); }
/* the "Coming up" line sits on the opening band; the sticky medium bar gets a soft shadow, not a rule */
.upnext { background: none; }
.upnext .wrap { padding-block: 6px 30px; }
.gal-bar { box-shadow: 0 14px 22px -22px rgba(36,26,34,.45); }

/* ---------- F3 (owner chose option 3, 2026-10-18): clearer tones that blend ----------
   Sections alternate white, warm sand and pale pink (board "4 · Section backgrounds", option 3).
   Each band fades in over 40 px straight from the colour of the band above it (passed on as --prev
   by the sibling rules below), so two colours meet without a line or a pale stripe. Glows stay inside. */
:root { --t-ivory: #fbf5ec; --t-paper: #fffdf9; --t-sand: #efdfc8; --t-pink: #f3e0dd; --t-foot: #f7f1e8; --fade3: 40px; }
/* F10 (owner, 2026-10-19): the fade between a light band and a sand or pink band was too short to read as a blend; it now runs over 200px (150px on phones) */
:root { --fade3: 200px; } @media (max-width: 899px) { :root { --fade3: 150px; } }
:is(.s-ivory, .gal-open, .hero-band, .page-open, .hello-band, .gal-bar) + * { --prev: var(--t-ivory); }
:is(.s-paper, .about-band, .classes-band, .page-body, .p2-body, .pp-nav) + * { --prev: var(--t-paper); }
:is(.s-sand, .easel-band, .gal-grid, .p2-wall) + * { --prev: var(--t-sand); }
:is(.s-blush, .cta-band, .together, .teams) + * { --prev: var(--t-pink); }
/* F38: hidden helpers between two bands (the press-cutting viewer on About) do not break the fade */
:is(.s-ivory, .gal-open, .hero-band, .page-open, .hello-band, .gal-bar) + :is([hidden], script, template) + * { --prev: var(--t-ivory); }
:is(.s-paper, .about-band, .classes-band, .page-body, .p2-body, .pp-nav) + :is([hidden], script, template) + * { --prev: var(--t-paper); }
:is(.s-sand, .easel-band, .gal-grid, .p2-wall) + :is([hidden], script, template) + * { --prev: var(--t-sand); }
:is(.s-blush, .cta-band, .together, .teams) + :is([hidden], script, template) + * { --prev: var(--t-pink); }
.gal-bar ~ .gal-grid, .p2-wall { --prev: var(--t-ivory); }

.s-ivory, .gal-open, .page-open, .hello-band { background-color: var(--t-ivory); background-image:
	radial-gradient(ellipse 46% 52% at 78% 52%, rgba(252,216,145,.45), rgba(251,245,236,0) 75%),
	radial-gradient(26% 36% at 6% 62%, rgba(192,104,168,.07), rgba(192,104,168,0) 70%); }
/* F42: the collections after a medium's paintings fade in from the sand above, like the other bands */
.colls-band { background-image: radial-gradient(ellipse 46% 52% at 78% 52%, rgba(252,216,145,.45), rgba(251,245,236,0) 75%), linear-gradient(to bottom, var(--prev, var(--t-ivory)), var(--t-ivory) var(--fade3)); }
.hero-band { background-color: var(--t-ivory); background-image: radial-gradient(ellipse 55% 60% at 72% 45%, rgba(252,216,145,.55) 0%, rgba(252,216,145,.18) 50%, rgba(251,245,236,0) 78%); }
.s-paper, .page-body, .p2-body, .pp-nav { background-color: var(--t-paper); background-image:
	radial-gradient(30% 34% at 92% 45%, rgba(214,180,110,.08), rgba(214,180,110,0) 70%),
	linear-gradient(to bottom, var(--prev, var(--t-paper)), var(--t-paper) var(--fade3)); }
.about-band { background-color: var(--t-paper); background-image:
	radial-gradient(36% 46% at 10% 45%, rgba(192,104,168,.08), rgba(192,104,168,0) 70%),
	linear-gradient(to bottom, var(--prev, var(--t-paper)), var(--t-paper) var(--fade3)); }
.classes-band { background-color: var(--t-paper); background-image:
	radial-gradient(36% 46% at 84% 45%, rgba(140,160,120,.10), rgba(140,160,120,0) 70%),
	linear-gradient(to bottom, var(--prev, var(--t-paper)), var(--t-paper) var(--fade3)); }
.s-sand, .easel-band, .gal-grid, .p2-wall { background-color: var(--t-sand); background-image:
	radial-gradient(34% 36% at 86% 45%, rgba(214,180,110,.18), rgba(214,180,110,0) 70%),
	linear-gradient(to bottom, var(--prev, var(--t-sand)), var(--t-sand) var(--fade3)); }
.p2-wall { background-image: radial-gradient(46% 46% at 50% 52%, rgba(214,180,110,.20), rgba(214,180,110,0) 72%), linear-gradient(to bottom, var(--prev), var(--t-sand) var(--fade3)); }
.s-blush, .cta-band, .together { background-color: var(--t-pink); background-image:
	radial-gradient(40% 44% at 15% 45%, rgba(192,104,168,.08), rgba(192,104,168,0) 70%),
	linear-gradient(to bottom, var(--prev, var(--t-pink)), var(--t-pink) var(--fade3)); }
/* the footer fades from whatever ends the page */
.site-foot { background: linear-gradient(to bottom, var(--foot-prev, var(--t-foot)), var(--t-foot) 70px); }
main:has(> :is(.cta-band, .together, .s-blush, .teams):last-child) + .site-foot, main:has(> * > .cta-band:last-child) + .site-foot { --foot-prev: var(--t-pink); }
main:has(> :is(.s-sand, .gal-grid):last-child) + .site-foot { --foot-prev: var(--t-sand); }
main:has(> :is(.s-paper, .page-body):last-child) + .site-foot { --foot-prev: var(--t-paper); }
main:has(> :is(.cta-band, .together, .s-blush, .teams) + :is([hidden], script, template):last-child) + .site-foot { --foot-prev: var(--t-pink); }
main:has(> :is(.s-sand, .gal-grid) + :is([hidden], script, template):last-child) + .site-foot { --foot-prev: var(--t-sand); }
main:has(> :is(.s-paper, .page-body) + :is([hidden], script, template):last-child) + .site-foot { --foot-prev: var(--t-paper); }
main:has(> :is(.s-ivory, .page-open, .hello-band, .gal-open):last-child) + .site-foot { --foot-prev: var(--t-ivory); }

/* ---------- F2 (owner, 2026-10-18): tighter gaps between bands ----------
   The old gaps were sized to sit beside a ruled edge; with bands blending they read as empty space. */
section { padding-block: clamp(48px, 5.5vw, 76px); }
.sec { padding-block: clamp(44px, 5.5vw, 72px); }
.hero { padding-block: 40px 56px; }
.open-in { padding-block: 40px 48px; }
.cta-band { padding-block: 60px; }
.p2-body { padding-block: 48px 56px; }
@media (max-width: 899px) {
	section { padding-block: 44px; }
	.sec { padding-block: 40px; }
	.hero { padding-block: 24px 40px; }
	.open-in { padding-block: 20px 32px; }
	.cta-band { padding-block: 44px; }
}

/* ---------- F4 (owner, 2026-10-18, board "4 · Headings and footer logos"): big headings about 20% smaller ---------- */
.hero h1 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.05; }
.hero h1 em svg { bottom: -5px; height: 15px; }
.open-in h1, .plain-open h1, .ws-top h1, .hello-in h1 { font-size: clamp(38px, 4.6vw, 64px); }
.gal-open h1 { font-size: clamp(38px, 4.8vw, 66px); }
.page-open h1 { font-size: clamp(34px, 4vw, 54px); }
h2 { font-size: clamp(30px, 3.6vw, 52px); }
/* the header separates from the page only once it scrolls (phones, where it stays at the top) */
.site-head { transition: top .25s ease, box-shadow .25s ease; }
.site-head.is-scrolled { box-shadow: 0 10px 24px -18px rgba(36,26,34,.35); }

/* ---------- F5: social logos with her handles (footer, Say hello) ---------- */
.site-foot nav { gap: 8px 26px; text-transform: none; letter-spacing: 0; font-size: 14.5px; }
.site-foot nav a { gap: 9px; color: var(--ink); font-weight: 500; }
.site-foot nav a svg { width: 21px; height: 21px; flex: none; color: var(--plum); }
.site-foot nav a:hover span { color: var(--plum); }
.soc-h { display: inline-flex; align-items: center; gap: 9px; }
.soc-h svg { width: 20px; height: 20px; color: var(--plum); flex: none; }

/* ---------- Photo collages below 900px: keep the phone proportions at every width, so at tablet sizes the % wide photos do not outgrow the fixed height and run into the next section ---------- */
@media (max-width: 899px) {
	.pair2, .pair2.wide, .c-collage, .cc2, .ad-pics:not(.solo) { height: auto; width: 100%; max-width: 460px; margin-inline: auto; }
	.pair2, .pair2.wide { aspect-ratio: 358 / 360; }
	.c-collage, .cc2 { aspect-ratio: 358 / 340; }
	.ad-pics:not(.solo) { aspect-ratio: 358 / 320; }
}
@media (max-width: 899px) {
	/* the small side photo sits over the left of the wide photo's caption, so the caption moves right */
	.pair2.wide .p-main figcaption { text-align: right; padding-left: 38%; }
	/* no separator dot at the start of a wrapped line */
	/* the highlight tag sits on the kind line, not after a long title */
	.lrow b + .star { display: none; } .lrow .star.m { display: inline; vertical-align: 0; }
	/* full-width phone field like the others; name-only news tiles need less height */
	.input.short { max-width: none; }
	.fcard .typo { aspect-ratio: 3 / 1; }
}

/* ---------- Laptop sweep (2026-10-19) ---------- */
.nw { white-space: nowrap; }
.e404 { min-height: calc(100vh - 430px); }
@media (min-width: 900px) {
	/* old posts: a floated picture takes at most half the text column, so the text beside it stays readable */
	.entry figure.alignleft, .entry figure.alignright, .entry img.alignleft, .entry img.alignright { max-width: 50%; }
	.entry figure.alignleft img, .entry figure.alignright img { max-width: 100%; }
	/* core only floats these when nested, so a figure that is itself the block stayed on its own line */
	.entry figure.wp-block-image.alignleft { float: left; clear: both; margin: .4em 28px 1em 0; }
	.entry figure.wp-block-image.alignright { float: right; clear: both; margin: .4em 0 1em 28px; }
}
@media (min-width: 900px) and (max-width: 1180px) {
	/* Home: keep the photo collage beside the welcome text */
	.hero { flex-wrap: nowrap; gap: 36px; }
}
/* Home collage: scales with its width (1440 layout below 1180px, phone layout below 700px), so the cards keep their places and never cover a caption */
@media (max-width: 1180px) { .collage { height: auto; aspect-ratio: 715 / 640; } }
@media (min-width: 701px) and (max-width: 1180px) { .collage .c1 { width: 39%; } .collage .c2 { top: 22%; } .collage .c4 { width: 33%; } .collage .hcap { font-size: 16px; } .collage .c1 .hcap { padding-left: 6px; } } /* the front picture stays clear of the caption on smaller laptops */
@media (max-width: 899px) { .collage { width: 100%; max-width: 560px; margin-inline: auto; } }
@media (max-width: 700px) { .collage { aspect-ratio: 358 / 430; max-width: 420px; } }
@media (min-width: 900px) and (max-width: 1279px) {
	/* the medium filters stay on one row */
	.filters { gap: 0 18px; font-size: 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } /* one row whatever the number of mediums; scrolls if they ever outgrow it */
}
@media (min-width: 900px) and (max-width: 1080px) {
	/* the header row: menu items and "Say hello" stay on one line */
	.nav { gap: 18px; font-size: 15px; } .nav > li > .nl, .nav > li > .dd-btn { white-space: nowrap; }
	/* room for the search icon (F24) */
	.main-nav { gap: 12px; } .nav { gap: 16px; } .site-head .logo img { height: 44px; } .site-head .hello { padding: 0 14px; } .s-icon { margin-left: 0; width: 40px; height: 40px; }
	.site-head .logo, .site-head .brand { flex-shrink: 0; }
}
.site-head .hello { white-space: nowrap; }

/* ---------- F8 (owner's choices T1 and S1, 2026-10-19) ---------- */
/* sign-off: a short line for the page, then her name */
.sign span { display: block; font-size: 30px; color: var(--plum); margin-top: 2px; }
.cta-band .sign { font-size: 22px; }
/* Weekly classes: the years note pinned on the photos */
.ten { position: absolute; z-index: 5; width: 230px; padding: 26px 22px 20px; font-family: var(--f-note); font-size: 19px; line-height: 1.4; color: #4a3d46;
	background: linear-gradient(rgba(252,216,145,.42), rgba(252,216,145,.42)), var(--paper); border: 1px solid rgba(255,255,255,.85);
	box-shadow: 0 1px 0 rgba(36,26,34,.04), 0 20px 34px -22px rgba(36,26,34,.45); transform: rotate(-4deg); left: -34px; top: -38px; }
.ten::before { content: ""; position: absolute; top: -10px; left: 50%; margin-left: -32px; width: 64px; height: 20px; background: rgba(192,104,168,.32); transform: rotate(3deg); }
.ten b { display: block; font: 400 46px/1 var(--f-note); color: var(--plum); margin-bottom: 6px; }
.ten b small { font-size: 24px; }
@media (max-width: 899px) {
	.ten { width: 160px; font-size: 14.5px; line-height: 1.35; padding: 18px 14px 14px; left: auto; right: -8px; top: -46px; transform: rotate(3deg); }
	.ten b { font-size: 30px; margin-bottom: 2px; } .ten b small { font-size: 18px; }
}
/* Photography's tab row sits at the very top, like Crafts, with the usual space before the heading */
.gal-open:has(> .subtabs) { padding-top: 0; }
.gal-open > .subtabs + .wrap { padding-top: 40px; }
@media (max-width: 899px) { .gal-open > .subtabs + .wrap { padding-top: 20px; } }
/* Paintings and Photography on tablets (600 to 899px): the laptop rows, a little tighter, instead of one huge picture per row */
@media (min-width: 600px) and (max-width: 899px) {
	.jrow { display: flex; gap: 22px; }
	.jrow figure + figure { margin-top: 0; }
	.jrow .spacer { display: block; }
	.jrow .t { font-size: 18px; }
	.jrow .br { display: none; }
}
/* the small side photo overlaps the lower left of the main photo: its caption is centred in the part left clear (shares from the collage sizes above) */
.pair2 .p-main figcaption { padding-left: 12%; } .pair2 .p-main.wide figcaption { padding-left: 16%; }
.ad-pics:not(.solo) .p-main figcaption { padding-left: 26%; }
@media (max-width: 899px) { .pair2 .p-main:not(.wide) figcaption { padding-left: 0; } .ad-pics:not(.solo) .p-main figcaption { padding-left: 18%; } }
@media (max-width: 899px) { .pair2:has(.ten) { margin-top: 56px; } } /* room above the photos for the years note */
/* partner names link to their entry on Collaborations: quiet underline, plum on hover */
.partners a, .partners2 a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(159,70,142,.35); text-underline-offset: 4px; }
.partners a:hover, .partners2 a:hover { color: var(--plum); text-decoration-color: currentColor; }
/* ---------- F10 (owner chose J7, 2026-10-19): Home's closing as a cream sheet taped onto the pink band, so it reads apart from the offerings above ---------- */
.together .closing { position: relative; background: #fffaf4; border: 1px solid #ecdcd2; border-radius: 4px; padding: 56px 56px 52px; margin-top: 64px;
	box-shadow: 0 1px 0 rgba(36,26,34,.03), 0 30px 50px -36px rgba(36,26,34,.30); }
/* The heading is much taller than the words beside it: centre them, so no empty corner is left (owner, 2026-10-20). */
.together .closing { align-items: center; }
/* F21 D1: a painting (to Commissions), a class, a collaborator: three small linked pictures above Say hello. */
.together .closing::before { content: ""; position: absolute; top: -11px; left: 50%; width: 92px; height: 22px; margin-left: -46px; background: rgba(192,104,168,.28); transform: rotate(-2deg); }
@media (max-width: 899px) { .together .closing { padding: 40px 24px 32px; margin-top: 48px; } }
/* F13 (owner, 2026-10-20): every press card shows one 16:9 picture from the story, like the video cards (.fcard .th img above) */
/* a newspaper card's picture opens the whole cutting in the viewer */
.fcard button.th.zoomable { display: block; width: 100%; padding: 6px; cursor: zoom-in; }
.fcard button.th.zoomable:hover img { filter: brightness(1.04); }
.fcard .seecut, .side .seecut { justify-self: start; font: 600 13px/1.3 var(--f-body); color: var(--plum); text-decoration: underline; text-decoration-color: rgba(159,70,142,.35); text-underline-offset: 4px; margin-top: 2px; }
.fcard .seecut:hover, .side .seecut:hover { text-decoration-color: currentColor; }

/* ---------- F14 (owner, 2026-10-20): Stories cards in the In the news card look ---------- */
.scards { gap: 40px 28px; }
.scard.fcard { gap: 10px; padding-bottom: 24px; }
.scard.fcard .th { display: block; }
.scard.fcard .th img, .scard.fcard .th .ph-slot, .scard.fcard .th .typo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.scard.fcard h3 { font-size: 22px; line-height: 1.22; margin-top: 0; }
.scard.fcard .ex { font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.scard.fcard .rd { justify-self: start; font: 600 13.5px/1.3 var(--f-body); color: var(--plum); text-decoration: none; margin-top: 4px; }
.scard.fcard .rd:hover { text-decoration: underline; }
@media (max-width: 899px) {
	/* titles a size smaller on phones */
	.sfeat h2 { font-size: 26px; line-height: 1.15; }
	.sfeat .d { font-size: 16px; }
	.scard.fcard h3 { font-size: 20px; }
}

/* ---------- Search (F24, approved 2026-10-20) ---------- */
.s-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--ink); margin-left: 4px; transition: background .2s, color .2s; }
.s-icon:hover, .s-icon.on { background: rgba(192,104,168,.14); color: var(--plum); }
.qpanel { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; padding: 0 24px; }
.qpanel .in { max-width: 1192px; margin: 0 auto; background: #fffdf9; border: 1px solid #ecdcd2; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(36,26,34,.45); padding: 22px 28px; }
.qbox { display: flex; align-items: center; gap: 12px; border-bottom: 1.5px solid var(--plum); padding: 4px 0 12px; color: var(--plum); }
.qbox input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 26px/1.3 var(--f-head); color: var(--ink); }
.qbox input:focus { outline: none; }
.qbox .esc { font: 600 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--hair); border-radius: 4px; padding: 6px 8px; background: none; cursor: pointer; }
.qres { margin-top: 20px; }
.qres.two { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 36px; }
.qres .qall { grid-column: 1 / -1; }
.qk { font: 600 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.qk b { color: var(--plum); font-weight: 600; }
.qthumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.qres.two .qthumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); } .qres.two .qthumbs a:nth-child(6) { display: none; }
.qthumbs a { display: block; text-decoration: none; color: var(--ink); border-radius: 4px; }
.qthumbs img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; padding: 4px; box-shadow: var(--shadow-s); }
.qthumbs span { display: block; font: 500 13.5px/1.3 var(--f-body); margin-top: 8px; }
.qthumbs i { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 3px; }
.qthumbs .st { display: inline-flex; width: auto; font-size: 9px; padding: 3px 6px; margin: 4px 0 0; }
.qlist { list-style: none; margin: 0; padding: 0; }
.qlist li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hair2); }
.qlist li:first-child { border-top: 0; }
.qlist img, .qlist .ph { width: 44px; height: 44px; object-fit: cover; border-radius: 3px; background: var(--sand, #f3e7dc); display: block; }
.qlist a { color: var(--ink); text-decoration: none; font: 500 14.5px/1.3 var(--f-body); }
.qlist a:hover, .qthumbs a:hover span { color: var(--plum); text-decoration: underline; }
.qlist small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.qall { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair2); font: 600 14px/1.3 var(--f-body); }
.qall a { color: var(--plum); } .qall span { color: var(--muted); font-weight: 400; font-size: 13px; }
.qnone { font-size: 15px; color: var(--muted); } .qnone a { color: var(--plum); }
.qres a:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
/* phone drawer: under its search box */
.drw .qres { margin: 14px 0 6px; }
.drw .qres.two { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.drw .qthumbs, .drw .qres.two .qthumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.drw .qres.two .qthumbs a:nth-child(6) { display: block; }
.drw .qthumbs span { font-size: 12.5px; }
.drw .qall { flex-direction: column; align-items: flex-start; } .drw .qall span { display: none; }
/* Paintings: Find a painting */
.findp-wrap { position: relative; z-index: 38; margin-bottom: 18px; } /* above the sticky medium bar (30) and phone bar (35), below the header and its menus (40) */
.findp { display: flex; align-items: center; gap: 10px; max-width: 420px; background: #fffdf9; border: 1px solid #e3d3c6; border-radius: 999px; padding: 9px 16px; color: var(--muted); }
.findp:focus-within { border-color: var(--plum); color: var(--plum); }
.findp input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 15.5px/1.3 var(--f-body); color: var(--ink); }
.findp input:focus { outline: none; }
.qres-pop { position: absolute; z-index: 30; left: var(--gutter); right: var(--gutter); max-width: 760px; top: calc(100% + 8px); margin: 0; background: #fffdf9; border: 1px solid #ecdcd2; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(36,26,34,.45); padding: 18px 20px; }
.qres-pop .qthumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* results page */
.sres .search-big { max-width: 640px; }
.sres .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sres .chips a { font: 600 13px/1 var(--f-body); color: var(--plum); text-decoration: none; background: rgba(192,104,168,.10); padding: 9px 14px; border-radius: 999px; }
.sres .chips a:hover { background: rgba(192,104,168,.2); }
.sres .chips a i { font-style: normal; color: var(--muted); font-weight: 400; margin-left: 6px; }
.sres .sback { margin-top: 18px; }
.sres h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 56px 0 18px; display: flex; align-items: baseline; gap: 14px; scroll-margin-top: 110px; }
.sres h2:first-child { margin-top: 8px; }
.sres h2 small { font: 400 15px/1 var(--f-body); color: var(--muted); }
.sgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 26px; }
.sgrid figure { margin: 0; }
.sgrid a.mat { display: block; background: #fff; padding: 7px; box-shadow: var(--shadow-s); }
.sgrid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.sgrid h3 { font: 400 19px/1.25 var(--f-head); margin-top: 12px; } .sgrid h3 a { color: var(--ink); text-decoration: none; } .sgrid h3 a:hover { color: var(--plum); }
.sgrid p { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.smore { margin-top: 22px; font: 600 14.5px/1 var(--f-body); }
.srows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair2); max-width: 860px; }
.srows li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair2); }
.srows .th img, .srows .th.none { display: block; width: 96px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; background: var(--sand, #f3e7dc); }
.srows a { font: 400 20px/1.25 var(--f-head); color: var(--ink); text-decoration: none; } .srows a:hover { color: var(--plum); }
.srows small { display: block; font: 400 13.5px/1.4 var(--f-body); color: var(--muted); margin-top: 4px; }
.srows .ty { font: 600 11px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--orchid); }
.snone { max-width: 760px; } .snone p { font-size: 17px; max-width: 56ch; }
.snone .dym { font: 400 24px/1.3 var(--f-head); } .snone .dym span { font: 400 14px/1 var(--f-body); color: var(--muted); margin-left: 8px; }
.snone .try { margin-top: 18px; } .snone .chips a { background: #fff; border: 1px solid #e3d3c6; }
@media (max-width: 899px) {
	.s-icon, .qpanel { display: none !important; }
	.qres-pop { left: 0; right: 0; padding: 14px; } .qres-pop .qthumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; } .sgrid h3 { font-size: 16.5px; }
	.srows li { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; } .srows .th img, .srows .th.none { width: 72px; } .srows .ty { grid-column: 2; } .srows a { font-size: 17px; }
	.sres h2 { margin-top: 40px; }
}
@media (min-width: 900px) and (max-width: 1180px) { .sgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .qthumbs, .qres-pop .qthumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); } .qthumbs a:nth-child(6) { display: none; } }

/* ---------- Home: Follow along (F29, B1, owner 2026-10-24) ----------
   Hand-picked Instagram and YouTube posts as polaroid cards, one size (4:5), gently tilted. The row scrolls sideways
   and runs off the right edge (fading out) to show there is more. A tap opens the post on Instagram or YouTube in a
   new tab (owner, 2026-10-24); nothing loads from Instagram or YouTube on this site. */
.follow { overflow-x: clip; } /* its own sand band between “made for you” and the closing card */
.together-end .closing { margin-top: 0; } /* the closing card in its own pink band */
.fhead { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 34px; }
.fhead h2 { font-size: clamp(34px, 3.8vw, 52px); }
.fside { display: flex; align-items: center; gap: 22px; }
.fsoc { display: inline-flex; align-items: center; gap: 7px; color: var(--plum); font-weight: 600; font-size: 15.5px; text-decoration: none; border-bottom: 1.5px solid rgba(96,16,80,.3); padding-bottom: 2px; }
.fsoc svg { width: 17px; height: 17px; flex: none; }
.fsoc:hover { border-bottom-color: var(--plum); }
.fbtns { display: flex; gap: 10px; margin-left: 12px; }
.farr { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--plum); background: transparent; color: var(--plum); font: 600 18px/1 var(--f-body); cursor: pointer; display: inline-grid; place-items: center; transition: background .2s, color .2s; }
.farr:hover:not(:disabled) { background: var(--plum); color: #fff; }
.farr:disabled { opacity: .3; cursor: default; }
.frow { display: flex; align-items: flex-start; gap: 30px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; scroll-padding-left: 6px;
	padding: 22px 6px 30px; margin: -22px calc(50% - 50vw) 0 -6px;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 140px), transparent); }
.frow::-webkit-scrollbar { display: none; }
.frow.at-end { -webkit-mask-image: none; mask-image: none; }
.fc { flex: none; width: 268px; position: relative; background: #fff; padding: 10px 10px 0; box-shadow: var(--shadow); color: inherit; text-decoration: none; scroll-snap-align: start; transition: transform .25s; }
.fc:nth-child(4n+1) { transform: rotate(-1.4deg); } .fc:nth-child(4n+2) { transform: rotate(1deg) translateY(10px); }
.fc:nth-child(4n+3) { transform: rotate(-.5deg) translateY(2px); } .fc:nth-child(4n) { transform: rotate(1.4deg) translateY(8px); }
.fc:hover, .fc:focus-visible { transform: rotate(0) translateY(-4px); }
.fc .tape { top: -12px; left: 34%; width: 70px; height: 22px; }
.fp { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.fp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fc[data-shape="wide"] .fp img { object-position: 90% 50%; }
.fbadge { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 999px; background: rgba(255,253,249,.92); color: var(--plum); box-shadow: 0 2px 6px rgba(36,26,34,.18); }
.fbadge svg { width: 16px; height: 16px; } .fbadge svg + svg { width: 10px; height: 10px; }
.fwho { display: block; font: 400 16px/1.2 var(--f-note); color: var(--muted); padding: 11px 4px 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftrack { position: relative; height: 3px; background: rgba(36,26,34,.10); border-radius: 3px; margin-top: 18px; }
.ftrack i { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--plum); border-radius: 3px; transition: left .2s; }
.fhint { display: none; }
@media (max-width: 899px) {
	.fhead { display: block; margin-bottom: 22px; }
	.fside { margin-top: 14px; gap: 18px; flex-wrap: wrap; }
	.fbtns { display: none; }
	.frow { gap: 18px; margin: -22px -16px 0; padding: 22px 16px 26px 22px; scroll-padding-left: 22px; -webkit-mask-image: none; mask-image: none; scroll-behavior: auto; }
	.fc { width: 60vw; padding: 8px 8px 0; }
	.fwho { font-size: 15px; padding: 9px 2px 11px; }
	.ftrack { margin-top: 10px; }
	.fhint { display: block; font: 400 16px/1 var(--f-note); color: var(--muted); margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .frow { scroll-behavior: auto; } .fc { transition: none; } }

/* ---------- F30 (owner chose A1, 2026-10-24): Home's closing card. The question on the left with her signature and two
   small paintings she made for people ("for an office", "as a gift"); three answers on the right, each opening Say hello
   with its topic chosen. ---------- */
.together .closing.cx { align-items: center; }
.cx .c-left { display: grid; gap: 22px; align-content: center; }
.cx .c-sign { display: flex; align-items: center; gap: 24px; }
.cx .c-sign > div { white-space: nowrap; }
.cx .c-pols { display: flex; gap: 14px; align-items: flex-start; }
.cx .c-pol { flex: none; width: 112px; position: relative; display: block; background: #fff; padding: 7px 7px 0; box-shadow: var(--shadow-s); transform: rotate(-4deg); text-decoration: none; transition: transform .2s; }
.cx .c-pol:nth-child(2) { transform: rotate(3deg) translateY(10px); }
.cx .c-pol:hover { transform: rotate(0) translateY(-3px); }
.cx .c-pol img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cx .c-pol span { display: block; font: 400 15px/1 var(--f-note); color: var(--muted); text-align: center; padding: 8px 0 9px; }
.cx .c-pol::before { content: ""; position: absolute; top: -9px; left: 34%; width: 46px; height: 16px; background: var(--tape-gold); transform: rotate(4deg); z-index: 1; }
.cx .c-pol:nth-child(2)::before { background: var(--tape-pink); left: 40%; transform: rotate(-5deg); }
.cx .c-note { font: 400 21px/1.2 var(--f-note); color: var(--orchid); margin: 0 0 6px; }
.cx .ans { display: grid; }
.cx .ans a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 18px; padding: 18px 2px; border-top: 1px solid rgba(36,26,34,.12); text-decoration: none; color: var(--ink); }
.cx .ans a:last-child { border-bottom: 1px solid rgba(36,26,34,.12); }
.cx .ans b { font: 400 25px/1.15 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; transition: color .2s; }
.cx .ans small { grid-column: 1; font-size: 15px; line-height: 1.5; color: var(--muted); }
.cx .ans i { grid-row: 1 / span 2; grid-column: 2; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--plum); color: var(--plum); display: grid; place-items: center; font-style: normal; font-weight: 600; transition: background .2s, color .2s; }
.cx .ans a:hover i, .cx .ans a:focus-visible i { background: var(--plum); color: #fff; }
.cx .ans a:hover b { color: var(--plum); }
.cx .c-more { margin: 16px 0 0; font-size: 15.5px; color: var(--muted); }
.cx .c-more a { color: var(--plum); }
@media (max-width: 899px) {
	.cx .c-sign { flex-wrap: wrap; row-gap: 18px; }
	.cx .c-sign > div { white-space: normal; }
	.cx .c-pols { gap: 12px; } .cx .c-pol { width: 104px; }
	.cx .ans b { font-size: 21px; } .cx .ans i { width: 40px; height: 40px; }
}

/* F56 (owner, 2026-11-03): Home ends with a slim thank-you card (painting, thank you, her line, Write to me) */
.together .closing.thanks { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 52px; align-items: center; padding: 48px 56px 44px; }
.together .closing.thanks.no-pic { grid-template-columns: minmax(0, 1fr) auto; }
.thanks .ty-pic { display: block; width: 200px; position: relative; background: #fff; padding: 8px 8px 0; box-shadow: var(--shadow-s); transform: rotate(-3deg); text-decoration: none; transition: transform .2s; }
.thanks .ty-pic:hover { transform: rotate(-1deg) translateY(-3px); }
.thanks .ty-pic::before { content: ""; position: absolute; top: -9px; left: 34%; width: 50px; height: 17px; background: var(--tape-gold); transform: rotate(4deg); z-index: 1; }
.thanks .ty-pic img { display: block; width: 100%; height: auto; }
.thanks .ty-pic span { display: block; font: 400 14px/1 var(--f-note); color: var(--muted); text-align: center; padding: 9px 0 10px; }
.thanks .note { font: 400 22px/1.2 var(--f-note); color: var(--orchid); margin: 0 0 6px; transform: none; }
.thanks h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.12; }
.thanks blockquote { margin: 18px 0 0; padding-left: 22px; border-left: 1px solid rgba(184,146,79,.6); max-width: 46ch; font: italic 330 clamp(19px, 1.6vw, 22px)/1.45 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--plum); quotes: "\201C" "\201D"; }
.thanks blockquote::before { content: open-quote; } .thanks blockquote::after { content: close-quote; }
.thanks .ty-go { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font: 400 23px/1 var(--f-head); font-variation-settings: "SOFT" 100, "WONK" 0; white-space: nowrap; }
.thanks .ty-go i { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--plum); color: var(--plum); display: grid; place-items: center; font-style: normal; font-weight: 600; transition: background .2s, color .2s; }
.thanks .ty-go:hover i, .thanks .ty-go:focus-visible i { background: var(--plum); color: #fff; }
@media (max-width: 899px) {
	.together .closing.thanks, .together .closing.thanks.no-pic { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 40px 24px 34px; }
	.thanks .ty-pic { width: min(76%, 280px); justify-self: center; margin-top: 6px; }
	.thanks .ty-pic span { font-size: 16px; }
	.thanks .ty-text { text-align: center; }
	.thanks blockquote { border-left: 0; padding-left: 0; margin-inline: auto; }
	.thanks .ty-go { justify-self: center; }
}
/* F57 (owner, 2026-11-03): Home on phones: in every section the words come first, then the pictures, at one size; nothing spills into the next section */
@media (max-width: 700px) {
	/* opening: the three paintings as one tight group under the buttons */
	.collage { aspect-ratio: 358 / 330; max-width: 400px; margin-top: 8px; }
	.collage .c1 { left: 25%; top: 0; width: 50%; transform: rotate(1deg); }
	.collage .c2 { left: 0; top: auto; bottom: 4%; width: 36%; transform: rotate(-4deg); }
	.collage .c4 { right: 0; bottom: 0; width: 38%; transform: rotate(3deg); }
}
@media (max-width: 899px) {
	/* a little about me: heading first, then her photo, then the words; the second photo after the quote, the same size */
	.about { flex-direction: column; align-items: stretch; gap: 0; }
	.about .about-text { display: contents; }
	.about .about-text > .note { order: 1; } .about .about-text > h2 { order: 2; margin-bottom: 26px; }
	.about .ab-pics { display: contents; }
	.about .ab-pics > .polaroid { order: 3; width: 78%; max-width: 300px; flex: none; margin: 0 auto 30px; }
	.about .about-text > p:not(.note) { order: 4; } .about .about-text > blockquote { order: 5; margin-top: 22px; }
	.about .ab-pics > .about-2 { order: 6; width: 78%; max-width: 300px; margin: 32px auto 8px; transform: rotate(2deg); }
	.about .about-text > .stickies { order: 7; margin-top: 28px; } .about .about-text > p:last-child { order: 8; margin-top: 22px; }
	/* art classes: the words first, then the class photos below them */
	.classes { flex-wrap: wrap; flex-direction: column; align-items: stretch; }
	.classes .pair { flex: none; width: 100%; max-width: 400px; margin-inline: auto; padding-bottom: 70px; }
	.classes .pair .one { width: 90%; }
	.classes .pair .two { width: 46%; }
}

/* F58 (owner, 2026-11-03): "a little about me" on laptops: the words on the left like every other section, her two photos side by side on the right */
@media (min-width: 900px) {
	.about { flex-wrap: nowrap; gap: 72px; align-items: center; }
	.about .about-text { flex: 1 1 0; }
	.has-2 .about .about-text > * { max-width: 58ch; }
	.about .ab-pics { flex: 0 1 360px; }
	.has-2 .about .ab-pics { flex: 0 0 46%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
	.about .ab-pics .polaroid { position: static; flex: none; width: auto; margin: 0; transform: rotate(-2deg); }
	.about .ab-pics .about-2 { transform: rotate(2.5deg); margin-top: 56px; }
}
@media (min-width: 900px) { .has-2 .about-text > h2, .has-2 .about-text > p:not(.note), .has-2 .about-text > blockquote { max-width: 58ch; } } /* the old 330 px gap for the second photo is no longer needed */
@media (min-width: 1100px) { .has-2 .about .about-text > .stickies { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }

/* Home "a little about me" notes on phones and tablets (owner, 2026-11-03): one under another, never two plus one, each a little offset like notes pinned on a board */
@media (max-width: 899px) {
	.about .stickies { grid-template-columns: minmax(0, 1fr); gap: 22px; width: 100%; max-width: 440px; justify-self: center; margin-inline: auto; }
	.about .stickies p { width: 92%; }
	.about .stickies p:nth-child(2) { justify-self: end; }
}