/* The Grove type system. One reading family; the wordmark keeps its signature. */
:root{--font-reading:Arial,Helvetica,sans-serif;--type-display:clamp(40px,4.5vw,64px);--type-section:clamp(34px,3.2vw,44px);--type-card:32px;--type-subhead:28px;--type-body:20px;--type-ui:14px;--type-label:11px;--type-caption:12px}
body{font-family:var(--font-reading)}
h1,h2,h3,.deep-title{font-family:var(--font-reading);font-weight:800;font-style:normal;line-height:1.1;letter-spacing:-.035em}
.hero h1,.article-head h1,.article-cover h1{font-size:var(--type-display);font-weight:900;line-height:1.06;letter-spacing:-.04em}
.sectionhead h2,.dish-contents .contents-intro h2,.question-story h2,.wonder h2,.deep-title{font-family:var(--font-reading);font-size:var(--type-section);font-weight:900;line-height:1.1;letter-spacing:-.035em}
.card h3,.archive-list .card h3,.next-story h2,.source-intro h2,dialog h2{font-family:var(--font-reading);font-size:var(--type-card);font-weight:800;line-height:1.12;letter-spacing:-.025em}
.dish-contents h3,.dish-contents .section-door:last-child h3,.deep-card h3,.prose h2,.prose h3,.article-next>div>p{font-family:var(--font-reading);font-size:var(--type-subhead);font-weight:800;font-style:normal;line-height:1.18;letter-spacing:-.02em}
.hero p,.card p,.question-story p,.wonder p,.dek,.article-cover .dek,.deep-description,.deep-section-intro>p,.source-intro p{font-family:var(--font-reading);font-size:var(--type-body);font-weight:400;font-style:normal;line-height:1.5;letter-spacing:0}
.prose,.editorial-article .main-story,.deep-card p{font-family:var(--font-reading);font-size:var(--type-body);font-style:normal;font-weight:400;line-height:1.7;letter-spacing:0}
.editorial-article .main-story{max-width:65ch}.main-story>p:first-of-type::first-letter{font-family:inherit;font-size:inherit;line-height:inherit;float:none;padding:0;color:inherit}
.cover-note>p,.rail-note{font-family:var(--font-reading);font-style:normal;font-size:var(--type-ui);line-height:1.6}
.eyebrow,.caption-label,.deep-invite>.eyebrow,.deep-card-top .eyebrow,.dish-contents .door-title>.eyebrow,.next-story .eyebrow,.story-start{font-family:var(--font-reading);font-size:var(--type-label);font-weight:700;line-height:1.5;letter-spacing:.1em;text-transform:uppercase}
.photo-label,.editorial-article .article-photo figcaption,.source-note,.deep-footnote p,.story-meta,.promise,.issuebar,.reading-rail,.story-breadcrumb{font-family:var(--font-reading);font-size:var(--type-caption);line-height:1.6;letter-spacing:0}
.pill,.card .more,.question-story .more,.next-story .more,.article-next>div>a,.nav a,.foot-links,.contents-intro>p{font-family:var(--font-reading);font-size:var(--type-ui);line-height:1.5}
.card .num,.deep-number,.door-number,.source-number{font-family:var(--font-reading);font-weight:900;font-style:normal}
/* Align category titles while leaving room for longer names. */
.dish-contents h3,.dish-contents .section-door:last-child h3{font-size:24px}.dish-contents .door-title{min-height:115px}
.dish-contents .contents-intro>p{font-size:16px}.sectionhead p{font-size:16px;line-height:1.5}.source-link{font-size:16px;line-height:1.5}
@media(max-width:1100px) and (min-width:761px){.dish-contents h3,.dish-contents .section-door:last-child h3{font-size:22px}.dish-contents .door-title{min-height:140px}}
@media(max-width:760px){
 :root{--type-display:40px;--type-section:34px;--type-card:28px;--type-subhead:26px}
 .dish-contents .door-title{min-height:0}.dish-contents h3,.dish-contents .section-door:last-child h3{font-size:24px}
 .deep-preview{font-size:var(--type-label);line-height:1.5}.choices small{font-size:var(--type-ui)}
 .issuebar{font-size:10px}.utility{font-size:11px}.story-meta{font-size:var(--type-caption)}
}
/* Masthead-colored actions: one friendly, tactile button system. */
:root{--action-teal:#326e67;--action-yellow:#ffe777}
#edition{color-scheme:light;background-color:var(--action-teal);color:#fffdf6;border:2px solid var(--action-teal);border-radius:999px;font-size:14px;font-weight:700;min-height:44px;padding:10px 34px 10px 16px;cursor:pointer;accent-color:var(--action-yellow)}
#edition option{background:#326e67;color:#fffdf6}
.pill,.card .more,.question-story .more,.next-story .more,.article-next>div>a,.ending>a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;max-width:100%;padding:11px 19px;border:2px solid var(--action-teal);border-radius:999px;background:var(--action-teal);color:#fffdf6;font-family:var(--font-reading);font-size:14px;font-weight:700;line-height:1.35;text-align:center;text-decoration:none;box-shadow:0 3px 0 #ffe777;transition:background-color .18s,color .18s,border-color .18s}
.pill:hover,.card:hover .more,.question-story:hover .more,.next-story:hover .more,.article-next>div>a:hover,.ending>a:hover,#edition:hover{background-color:var(--action-yellow);border-color:var(--action-yellow);color:#173e3c}
.pill:focus-visible,.card:focus-visible .more,.question-story:focus-visible .more,.next-story:focus-visible .more,.article-next>div>a:focus-visible,.ending>a:focus-visible,#edition:focus-visible{outline:3px solid #ffe777;outline-offset:4px}
.ending>a{margin-top:18px;border-color:#8bb4aa}.ending{display:flex;flex-direction:column;align-items:center}
.deep-toggle{background:var(--action-teal);color:#fffdf6;border:2px solid var(--action-teal);box-shadow:0 3px 0 #ffe777}.deep-dive>summary:hover .deep-toggle{background:#ffe777;color:#173e3c;border-color:#ffe777}
.choices button{background:#326e67;color:#fffdf6;border:2px solid #326e67;border-radius:16px;min-height:64px}.choices small{color:#fffdf6}.choices button:hover{background:#ffe777;color:#173e3c;border-color:#ffe777}.choices button:hover small{color:#173e3c}
@media(prefers-reduced-motion:reduce){.pill,.card .more,.question-story .more,.next-story .more,.article-next>div>a,.ending>a{transition:none}}
/* A deep teal invitation, followed by bright, comfortable reading surfaces. */
.deep-dive{background:#326e67;border:1px solid #326e67;border-top:3px solid #ffe777;color:#fffdf6}
.deep-dive .deep-title,.deep-dive .deep-description{color:#fffdf6}
.deep-dive .deep-invite>.eyebrow{color:#ffe777}
.deep-dive .deep-preview{color:#fffdf6;border-color:#8fbbb0}
.deep-dive .deep-toggle{background:#ffe777;color:#173e3c;border-color:#ffe777;box-shadow:none}
.deep-dive>summary:hover .deep-toggle{background:#fffdf6;border-color:#fffdf6;color:#173e3c}
.deep-dive>summary:focus-visible{outline:3px solid #ffe777;outline-offset:5px}
.deep-dive .deep-section-intro{border-color:#8fbbb0}
.deep-dive .deep-section-intro>.eyebrow{color:#ffe777}
.deep-dive .deep-section-intro>p,.deep-dive .deep-footnote,.deep-dive .deep-footnote p{color:#fffdf6}
.deep-dive .deep-footnote>span{color:#ffe777}
.deep-dive .deep-card{color:#173e3c}
/* Always-open Go Deeper: an invitation, not a control. */
.deep-dive>.deep-header{display:block;padding:40px 45px 25px}
.deep-dive .deep-invite{gap:16px}.deep-dive .deep-title{display:block}
.grove-square{display:block;flex:0 0 15px;width:15px;height:15px;background:#ffe777;margin-top:3px}
/* Friendly source cards: experts first, credits on request. */
.article-sources{padding:36px;background:linear-gradient(130deg,#e5f7ef,#cff0ee);border-top:3px solid #ffe777;gap:24px}
.article-sources .source-intro{display:block}
.source-intro h2{margin:14px 0}.source-intro p{margin:0;font-size:20px}
.article-sources .source-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.article-sources .source-link,.article-sources .source-link:first-child{display:grid;grid-template-columns:42px minmax(0,1fr);gap:16px;align-items:start;background:#fffdf2;border:1px solid #9ac3b6;border-radius:14px;padding:24px;text-decoration:none}
.source-number{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#ffe777;color:#173e3c;font-size:18px}
.source-card-copy{display:flex;flex-direction:column;gap:10px;min-width:0}
.source-publisher{font-size:12px;font-weight:700;color:#326e67;line-height:1.4}
.source-card-title{font-size:20px;line-height:1.35;font-weight:700;color:#173e3c}
.source-visit{font-size:14px;font-weight:700;color:#205d59;text-decoration:underline;text-underline-offset:4px}
.source-link:hover{background:#fff3b8}.source-link:focus-visible{outline:3px solid #326e67;outline-offset:3px}
.source-note{grid-column:1/-1;border-top:1px solid #94bbae;padding-top:18px;margin-top:4px;font-size:14px;line-height:1.7;color:#365b55}
.source-note>summary{cursor:pointer;font-size:14px;font-weight:700;color:#205d59;padding:8px 0;min-height:44px}
.source-note>p{margin:14px 0}.source-note a{overflow-wrap:anywhere}
@media(max-width:760px){.deep-dive>.deep-header{padding:28px 22px 22px}.article-sources{padding:26px 20px}.article-sources .source-list{grid-template-columns:minmax(0,1fr)}.article-sources .source-link,.article-sources .source-link:first-child{padding:20px 16px;gap:12px}.source-card-title{font-size:18px}.source-intro p{font-size:18px}.deep-footnote{align-items:start}}
/* Three complementary editorial accents; long-form copy stays calm and dark. */
.deep-card-0{--card-ink:#17635b}
.deep-card-1{--card-ink:#8a4817}
.deep-card-2{--card-ink:#245782}
.deep-dive .deep-card h3,.deep-dive .deep-card .deep-number,.deep-dive .deep-card .eyebrow{color:var(--card-ink)}
.deep-dive .deep-card .deep-card-top{border-color:var(--card-ink)}
.deep-dive .deep-card p{color:#173e3c}
/* A quiet lead-in to the next discovery. */
.article-next{gap:18px}
.article-next>div>.eyebrow{color:#e8bd71}

/* Match the breathing room before sources on short-form stories. */
.article-body + .article-sources{margin-top:45px}
@media(max-width:760px){.article-body + .article-sources{margin-top:30px}}

/* Preserve the complete monarch photograph and its natural proportions. */
.editorial-article .article-photo.monarch img{height:auto;max-height:none;aspect-ratio:4/3;object-fit:contain}

/* Artwork is a complete composition: preserve its edges and proportions. */
.editorial-article .article-photo.great-wave img{height:auto;max-height:none;aspect-ratio:2400/1613;object-fit:contain}
.card .visual:has(img[src*="great-wave"]){background:#e9e3ce}
.card .visual img[src*="great-wave"]{object-fit:contain}

/* About The Grove: the same welcoming teal, yellow, and open reading surfaces. */
.about-page{display:grid;gap:45px;padding:30px 0 0;color:#173e3c}
.about-welcome{background:#326e67;color:#fffdf6;border-top:3px solid #ffe777;padding:56px;position:relative}
.about-welcome>.eyebrow{color:#ffe777}
.about-welcome h1{font-size:var(--type-display);font-weight:900;max-width:18ch;margin:22px 0;line-height:1.06}
.about-welcome>p{font-size:var(--type-body);line-height:1.6;max-width:52ch;color:#fffdf6}
.about-signoff{display:flex;gap:14px;align-items:center;margin-top:30px;font-size:14px;font-weight:700}.about-signoff .grove-square{margin:0}
.about-panel{padding:42px;background:#f7f8e8;border:1px solid #a1c7b9}
.about-panel h2,.about-finish h2{font-size:var(--type-section);font-weight:900;margin:16px 0 22px}
.about-panel p{font-size:var(--type-body);line-height:1.7;margin:0 0 20px;max-width:65ch}
.about-hello{background:linear-gradient(125deg,#e4f6ef,#d0eeed)}
.about-editions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:30px 0}
.about-edition{padding:28px 24px;background:#e0f0e8;border-radius:14px;min-width:0}.about-edition:nth-child(2){background:#f5e9b8}.about-edition:nth-child(3){background:#dcebf2}
.about-edition>.eyebrow{display:block;margin-top:24px}.about-edition h3{font-size:var(--type-subhead);margin:12px 0 16px}.about-edition p{margin:0;font-size:18px}
.about-page .about-choice-note{font-size:16px;max-width:75ch}
.about-promises{background:#326e67;color:#fffdf6;border-top:3px solid #ffe777}.about-promises>.eyebrow{color:#ffe777}
.about-promise-grid,.about-note-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.about-promise-grid article{padding:26px;background:#e2f2ea;color:#173e3c;border-radius:14px}.about-promise-grid article:nth-child(2),.about-promise-grid article:nth-child(3){background:#f6edc9}
.about-promise-grid h3,.about-note-grid h3{font-size:var(--type-subhead);margin:0 0 16px}.about-promise-grid p,.about-note-grid p{font-size:18px;margin:0;line-height:1.7}
.about-notes{background:linear-gradient(130deg,#e5f7ef,#cff0ee);border-top:3px solid #ffe777}.about-note-grid article{padding:26px;background:#fffdf2;border:1px solid #a1c7b9;border-radius:14px}.about-note-grid a{display:inline-block;margin-top:18px;font-size:14px;font-weight:700;text-underline-offset:4px;color:#205d59;line-height:1.6}
.about-finish{padding:16px 0 40px;color:#fffdf6}.about-finish>.eyebrow{color:#e8bd71}.about-finish h2{max-width:24ch}
@media(max-width:900px){.about-editions{grid-template-columns:1fr}.about-edition{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px}.about-edition>.source-number{grid-row:1/4}.about-edition>.eyebrow{margin-top:0}.about-edition h3,.about-edition p{grid-column:2}}
@media(max-width:760px){.about-page{gap:30px;padding-top:20px}.about-welcome{padding:30px 24px}.about-panel{padding:28px 22px}.about-welcome h1{font-size:40px}.about-promise-grid,.about-note-grid{grid-template-columns:1fr}.about-edition{padding:24px 18px}.about-promise-grid article,.about-note-grid article{padding:24px 20px}.about-finish{padding-bottom:20px}}

/* Supporting pages share the About page's teal welcome and clear reading cards. */
.support-page{display:grid;gap:30px;padding-top:30px;color:#173e3c}
.support-page .support-intro{margin:0;max-width:none;background:linear-gradient(125deg,#e4f6ef,#d0eeed);padding:30px 36px}
.support-intro p{margin:0;max-width:70ch}
.support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.support-page .support-card{min-width:0;max-width:none;margin:0;padding:30px;background:#f7f8e8;border:1px solid #a1c7b9;border-radius:14px;color:#173e3c}
.support-card h2{margin:0 0 20px;font-size:var(--type-subhead);line-height:1.2}.support-card p,.support-card li{font-size:18px;line-height:1.7}.support-card p:last-child{margin-bottom:0}.support-card ul{padding-left:22px;margin:0 0 22px}.support-card li{margin:0 0 14px}
.support-card a{color:#205d59;overflow-wrap:anywhere;text-underline-offset:4px}.support-card:nth-child(4n+2){background:#e1f1eb}.support-card:nth-child(4n+3){background:#f6edcb}
.support-back{display:flex;flex-wrap:wrap;gap:18px;padding-bottom:20px}
/* Archives put the collection near the top, with compact issue navigation. */
.archive-page{padding:24px 0 0;color:#173e3c}
.archive-welcome{padding:28px 32px;background:#326e67;border-top:3px solid #ffe777;color:#fffdf6}.archive-welcome>.eyebrow{color:#ffe777}.archive-welcome h1{font-size:var(--type-section);font-weight:900;line-height:1.1;margin:12px 0}.archive-welcome p{font-size:18px;line-height:1.5;margin:0}
.archive-issues{display:grid;gap:12px;margin:18px 0 26px}.archive-issue{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,2fr) auto;gap:20px;align-items:center;padding:20px 24px;border:1px solid #a1c7b9;background:#e4f3ee;text-decoration:none;color:#173e3c}.archive-issue strong{font-size:20px;line-height:1.4}.archive-issue-action{font-size:14px;font-weight:700}.archive-issue:hover{background:#fff0bb}.archive-issue:focus-visible,.collection-grid .card:focus-visible{outline:3px solid #ffe777;outline-offset:3px}
.archive-collection-heading{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin:0 0 18px;color:#173e3c}.archive-collection-heading h2{font-size:28px;margin:0}.archive-collection-heading>span{font-size:14px}
.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.collection-grid .card{min-width:0;background:#e4f3ee;border:1px solid #87b7ac;padding-bottom:24px;display:flex;flex-direction:column}.collection-grid .card .visual{height:200px;flex-shrink:0}.collection-grid .color-strip{margin:0;height:4px;flex-shrink:0}
.collection-grid .card>.eyebrow{margin:20px 22px 0}.collection-grid .card>h3{font-size:26px;line-height:1.15;margin:12px 22px}.collection-grid .card>p{font-size:16px;line-height:1.5;margin:0 22px 20px}.collection-grid .card>.more{align-self:flex-start;margin:auto 22px 0;max-width:calc(100% - 44px)}
@media(max-width:1050px){.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.support-page{padding-top:20px;gap:24px}.support-grid{grid-template-columns:1fr;gap:20px}.support-page .support-intro,.support-page .support-card{padding:26px 22px}.archive-page{padding-top:20px}.archive-welcome{padding:24px 22px}.archive-issue{grid-template-columns:1fr;gap:8px;padding:18px 20px}.archive-issues{margin:14px 0 24px}.archive-collection-heading{display:block}.archive-collection-heading h2{font-size:26px;margin-bottom:8px}.collection-grid{grid-template-columns:1fr;gap:20px}.collection-grid .card .visual{height:180px}.collection-grid .card>h3{font-size:26px}.collection-grid .card>p{font-size:16px}}

.support-card{overflow-wrap:anywhere}

/* Grove Square: the yellow mark becomes part of the name. */
.masthead .logo{display:flex;align-items:baseline;gap:.09em;font-size:clamp(58px,7.1vw,112px);line-height:1;letter-spacing:-.065em;min-width:0}
.masthead .logo i{align-self:flex-start;font-size:.48em;margin:.05em .04em 0 0;line-height:1}
.masthead .logo>.brand-words{color:#fffdf6!important;white-space:nowrap}
.masthead .logo>.brand-square{display:block;flex:0 0 .40em;width:.40em;height:.40em;background:#ffe777;margin-left:.06em;color:transparent!important}
.foot-logo{display:inline-flex;align-items:baseline;gap:10px}.footer-square{display:inline-block;width:18px;height:18px;background:#ffe777;flex:none}
.grove-square{flex-basis:20px;width:20px;height:20px}
@media(max-width:1050px){.masthead .logo{font-size:clamp(48px,6.7vw,76px)}}
@media(max-width:760px){.masthead .logo{font-size:clamp(32px,7.4vw,56px);gap:.08em}.masthead .logo>.brand-square{flex-basis:18px;width:18px;height:18px}.foot-logo{font-size:clamp(25px,6.4vw,34px)}.footer-square{width:16px;height:16px}}

/* The yellow square says “Square”: keep the masthead wordmark short and bold. */
.masthead .logo{font-size:clamp(76px,11vw,158px)}
@media(max-width:1050px){.masthead .logo{font-size:clamp(68px,10vw,112px)}}
@media(max-width:760px){.masthead .logo{font-size:clamp(64px,19vw,100px)}.masthead .logo>.brand-square{flex-basis:.40em;width:.40em;height:.40em}}

/* A quiet square signature, halfway between punctuation and icon. */
.masthead .logo>.brand-square{flex-basis:.21em;width:.21em;height:.21em}

.explorer-counter{display:flex;align-items:center;gap:20px;padding:28px 0;border-top:1px solid #8bb4aa;margin-top:28px;color:#fffdf6}.counter-mark{display:block;width:26px;height:26px;flex:none;background:#ffe777}.explorer-counter .eyebrow{color:#ffe777}.explorer-counter p{font-size:22px;font-weight:700;line-height:1.4;margin:8px 0}.counter-note{font-size:12px;line-height:1.6;display:block;color:#fffdf6}

.foot-logo{white-space:nowrap;font-size:clamp(28px,4vw,44px);letter-spacing:-.04em;gap:10px}

/* Yellow squares tie the publication's numbered discoveries together. */
.dish-contents .door-number,.dish-contents .section-door:last-child .door-number{border-radius:0;background:#ffe777;color:#173e3c;box-shadow:none}
.source-number{border-radius:0}
.card .num{border-radius:0;background:#ffe777;border-color:#ffe777;color:#173e3c}
.ending>span{display:inline-flex;align-items:center;gap:12px}
.ending>span::before{content:"";display:inline-block;width:12px;height:12px;background:#ffe777}

.utility>.publication-line{min-width:0;line-height:1.5;text-wrap:balance}
@media(max-width:450px){.utility{flex-wrap:wrap;gap:10px}.utility>.publication-line{flex:1 1 100%}.utility .edition{margin-left:auto}}
