/* Explore Stories (files.html) and Past Issues (issues.html): this pair's only stylesheet.
   The shared tattler.css and other pages are unaffected. */
*{box-sizing:border-box}
body{margin:0;background:#fdfcf3;color:#14110f;font:18px/1.6 Georgia,serif}
a{color:inherit;text-underline-offset:4px}
button,input{font:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #b3241c;outline-offset:4px}
header{max-width:1280px;margin:auto;padding:25px 28px 0;border-top:5px solid;text-align:center}
.brand{font:900 clamp(29px,4.3vw,57px)/.95 'Times New Roman',serif;letter-spacing:-.04em;text-decoration:none;text-transform:uppercase;display:block}
.brand span{display:block}
.tag{font:italic 14px Georgia;margin:18px 0 22px}
.nav{display:flex;justify-content:center;gap:24px;border-block:1px solid;padding:15px;flex-wrap:wrap;font:11px/1.5 'IBM Plex Mono',monospace;text-transform:uppercase}
.nav a{text-decoration:none}
main{max-width:1280px;margin:auto;padding:0 28px 50px}
.opening{padding:38px 0 30px;border-bottom:5px solid}
.opening h1{font:900 clamp(48px,7vw,88px)/.97 Archivo,Arial,sans-serif;letter-spacing:-.045em;margin:0 0 18px}
.opening p{font:20px/1.5 Georgia;max-width:55ch;margin:0}
.kicker,.slug{font:11px/1.5 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#b3241c}
.browsebar{padding:25px 0;border-bottom:1px solid;display:flex;gap:22px;flex-wrap:wrap;justify-content:space-between}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{border:1px solid #aaa08f;background:transparent;border-radius:30px;padding:9px 14px;font:600 12px Archivo;cursor:pointer}
.filters button[aria-pressed=true]{background:#14110f;color:#fdfcf3;border-color:#14110f}
.search{display:flex;gap:10px;align-items:center;font:11px 'IBM Plex Mono',monospace}
.search input{width:220px;max-width:100%;border:0;border-bottom:2px solid;background:transparent;border-radius:0;padding:9px 0;font:15px Archivo}
.count{font:11px 'IBM Plex Mono',monospace;color:#61594e;padding:16px 0}
.storygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.storycard{display:flex;flex-direction:column;min-width:0;border-bottom:1px solid #b9b1a3;padding-bottom:26px;text-decoration:none;transition:background .15s}
.storycard img{width:100%;aspect-ratio:1.5;object-fit:cover;object-position:center 20%;display:block;margin-bottom:16px}
.storycard h3{font:900 29px/1.03 Archivo,Arial,sans-serif;letter-spacing:-.025em;margin:12px 0}
.storycard .slug{margin:0}
.storycard p:not(.slug){font-size:17px;line-height:1.5;margin:6px 0}
.tinyread{font:11px/1.5 'IBM Plex Mono',monospace;margin-top:16px;text-transform:uppercase}
.storycard:hover h3{text-decoration:underline;text-decoration-color:#b3241c;text-underline-offset:4px}
.storycard.feature{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.storycard.feature img{grid-column:1;grid-row:1/6;height:auto;aspect-ratio:2.15;object-fit:cover;object-position:top;align-self:start}
.storycard.feature h3{font-size:38px}
.storycard.typeonly{background:#f8d94f;padding:26px;justify-content:center;min-height:230px;border-bottom:0}
.storycard.typeonly:nth-child(odd){background:#b3241c;color:#fdfcf3}
.storycard.typeonly .slug{color:inherit}
.storycard.typeonly h3{font-size:38px}
.storycard[hidden]{display:none!important}
.bottom{border-block:4px solid;margin-top:42px;padding:26px 0;display:flex;gap:28px;align-items:center;justify-content:space-between}
.bottom h2{font:900 32px/1.05 Archivo;margin:0}
.bottom a{font:600 14px Archivo}
.empty{padding:35px 0}
.issuerow{display:grid;grid-template-columns:.8fr 1.2fr;gap:42px;padding:42px 0;border-bottom:3px solid}
.cov{background:#eee7d8;padding:22px;align-self:start}
.cov img{width:100%;height:auto;display:block;box-shadow:5px 7px 0 #d3cbbb}
.issuerow h2{font:900 clamp(32px,4vw,52px)/1.02 Archivo;letter-spacing:-.035em;margin:14px 0}
.issuerow .dek{font-size:19px;line-height:1.5}
.inside{list-style:none;padding:0;border-top:1px solid #b9b1a3;margin-top:25px}
.inside li{border-bottom:1px solid #d6cebf;padding:10px 0;font-size:17px}
.inside a{text-decoration:none}
.inside a:hover{text-decoration:underline}
.rowbtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.rowbtns a{font:600 14px Archivo;border:1px solid;padding:14px 18px;text-decoration:none}
.rowbtns .solid{background:#14110f;color:#fdfcf3}
.foot{max-width:1280px;margin:auto;padding:30px 28px;font:11px/1.6 'IBM Plex Mono',monospace;border-top:1px solid}
.foot a{margin-right:20px}
.phone-note{font:12px system-ui;color:#655e55;margin-top:25px}
@media(max-width:760px){header{padding-inline:20px}
.brand{font-size:29px}
.nav{gap:12px;padding-inline:0;font-size:10px}
main{padding-inline:20px}
.opening{padding-block:28px}
.opening h1{font-size:52px}
.opening p{font-size:18px}
.storygrid{grid-template-columns:1fr 1fr;gap:24px 18px}
.storycard h3{font-size:24px}
.storycard.feature{grid-column:1/-1}
.storycard.feature h3{font-size:29px}
.storycard.typeonly{padding:20px}
.storycard.typeonly h3{font-size:29px}
.search{width:100%}
.search input{flex:1}
.issuerow{grid-template-columns:1fr;gap:28px;padding-block:30px}
.cov{max-width:420px;padding:18px}
.issuerow h2{font-size:38px}
.bottom{display:block}
.bottom a{display:block;margin-top:18px}
}
@media(max-width:480px){.storygrid{grid-template-columns:1fr}
.storycard.feature{display:block}
.storycard.feature img{height:auto;aspect-ratio:1.65}
.storycard h3{font-size:32px}
.storycard img{aspect-ratio:1.5}
.storycard.typeonly{min-height:220px}
.rowbtns{display:grid}
.rowbtns a{text-align:center}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}
}

/* reader support band, carried over from the site's existing house style */
.pad{padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
.band{background:#14110f;color:#fdfcf3}
.support{padding-block:40px 46px}
.support>.pad{max-width:1280px;margin:auto}
.supgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:34px;align-items:center}
.support .slug.ondark{color:#f0a9a3;margin:0 0 10px}
.support h2{font-family:Archivo,'Arial Black',Helvetica,sans-serif;font-weight:900;font-size:clamp(28px,4.6vw,52px);line-height:.98;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.support p{font-size:16px;margin:0 0 12px;color:#d8d2c9}
.support .fine{font-size:13.5px;color:#9a938a;font-family:'IBM Plex Mono',ui-monospace,'Courier New',monospace;line-height:1.5}
.bigbtn{display:block;text-align:center;font-family:Archivo,'Arial Black',Helvetica,sans-serif;font-weight:900;font-size:19px;text-decoration:none;padding:22px 20px;background:#b3241c;color:#fff;border:3px solid #b3241c}
.bigbtn:hover{background:#fdfcf3;color:#b3241c}
.subbtn{display:block;text-align:center;font-family:'IBM Plex Mono',ui-monospace,'Courier New',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;margin-top:12px;padding:16px 20px;border:2px solid #6b645c;color:#fdfcf3}
.subbtn:hover{border-color:#fdfcf3;background:#fdfcf3;color:#14110f}
@media(max-width:980px){.supgrid{grid-template-columns:1fr;gap:24px}
}

/* fitting fixes: a long word in a story-card headline breaks (hyphenated below 1180px) instead of
   spilling out of its column, and the opening headline fits the narrowest phones */
.storycard h3{overflow-wrap:break-word}
@media(max-width:1179px){.storycard h3{hyphens:auto;-webkit-hyphens:auto}}
@media(max-width:359px){.opening h1{font-size:44px}}
/* photo framing kept from the approved homepage: whole photos where the subject fills the frame
   (Laurel trophy and mural, ninja course with its swing, the dog map), the whole Fry Report card,
   and the cranes framed on the birds rather than the sky */
.storycard img[src="laurel.jpg"],.storycard img[src="ninja.jpg"],.storycard img[src="dog-map-preview.jpg"]{aspect-ratio:auto;height:auto;object-fit:contain}
.storycard img[src="fry_report_og_image.png"]{aspect-ratio:1200/630;object-fit:contain}
.storycard img[src="cranes.jpg"]{object-position:50% 65%}

/* Explore Stories newspaper rhythm (EXPLORE-LAYOUT-001). Everything below is scoped to
   body.explore (files.html), so Past Issues is unaffected.
   Text-only cards: cream and ink with rules, replacing the alternating red/yellow boxes. */
.explore .storycard.typeonly,.explore .storycard.typeonly:nth-child(odd){background:none;color:inherit;padding:16px 0 22px;min-height:0;justify-content:flex-start;border-top:3px solid #14110f;border-bottom:1px solid #b9b1a3}
.explore .storycard.typeonly .slug{color:#b3241c}
.explore .storycard.typeonly h3{font-size:29px}
.explore .xkit img{object-position:50% 0}
/* the closing section: grouped layout while browsing everything (discovery.js marks the grid
   is-filtered while a topic or search narrows it; then every card joins the plain grid) */
.explore .storygrid:not(.is-filtered) .xgroup{grid-column:1/-1}
.explore .storygrid.is-filtered .xgroup,.explore .storygrid.is-filtered .xside{display:contents}
.explore .storygrid.is-filtered .xlabel,.explore .storygrid.is-filtered .xno{display:none}
.explore .storygrid:not(.is-filtered) .xleadrow{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;border-top:4px solid #14110f;border-bottom:1px solid #14110f;padding:10px 0 28px;margin-top:10px}
.explore .storygrid:not(.is-filtered) .xlead{border:0;border-right:1px solid #d8d4c4;padding:20px 32px 24px 0}
.explore .storygrid:not(.is-filtered) .xlead .slug{margin-bottom:8px}
.explore .storygrid:not(.is-filtered) .xlead h3{font-size:clamp(42px,5.5vw,70px);max-width:650px}
.explore .storygrid:not(.is-filtered) .xlead .tinyread{color:#b3241c}
.explore .storygrid:not(.is-filtered) .xside{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding-top:20px}
.explore .storygrid:not(.is-filtered) .xside .storycard{border:0;padding:0}
.explore .storygrid:not(.is-filtered) .xside .storycard+.storycard{border-top:1px solid #d8d4c4;padding-top:24px}
.explore .storygrid:not(.is-filtered) .xside h3{font-size:32px}
.explore .storygrid:not(.is-filtered) .xmiddle{display:grid;grid-template-columns:2fr 1fr;gap:30px;padding:30px 0;border-bottom:4px solid #14110f}
.explore .storygrid:not(.is-filtered) .xkit{display:grid;grid-template-columns:1fr 1.15fr;gap:25px;align-items:center;border:0;padding:0}
.explore .storygrid:not(.is-filtered) .xkit img{aspect-ratio:16/9;margin:0}
.explore .storygrid:not(.is-filtered) .xkit h3{font-size:34px}
.explore .storycard.xpuzzle,.explore .storycard.xpuzzle:nth-child(odd){background:#14110f;color:#fdfcf3;padding:26px;border:0;justify-content:center}
.explore .storycard.xpuzzle .slug{color:#f8d94f}
.explore .storycard.xpuzzle h3{font-size:33px}
.explore .xlabel{display:flex;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid #14110f}
.explore .xlabel .slug{margin:0}
.explore .storygrid:not(.is-filtered) .xdispatches{display:grid;grid-template-columns:1fr 1fr;gap:0 35px;margin-top:-30px}
.explore .storygrid:not(.is-filtered) .xdispatch{display:grid;grid-template-columns:26px 1fr;gap:10px;align-content:start;padding:25px 0;border-top:0;border-bottom:1px solid #d8d4c4}
.explore .storygrid:not(.is-filtered) .xdispatch .slug{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.explore .xno{font:11px 'IBM Plex Mono',monospace;color:#b3241c;padding-top:6px}
.explore .storygrid:not(.is-filtered) .xdispatch h3{font-size:28px;margin:0}
.explore .storygrid:not(.is-filtered) .xdispatch .tinyread{grid-column:2;margin-top:0}
.explore .storygrid:not(.is-filtered) .xmiddle,.explore .storygrid:not(.is-filtered) .xlabel{margin-top:-30px}
@media(max-width:760px){.explore .storygrid:not(.is-filtered) .xleadrow,.explore .storygrid:not(.is-filtered) .xmiddle{grid-template-columns:1fr;gap:24px}
.explore .storygrid:not(.is-filtered) .xlead{border-right:0;border-bottom:1px solid #d8d4c4;padding-right:0}
.explore .storygrid:not(.is-filtered) .xside{padding-top:0}
.explore .storygrid:not(.is-filtered) .xkit{grid-template-columns:1fr;gap:16px}
.explore .storygrid:not(.is-filtered) .xkit h3{font-size:29px}
.explore .storygrid:not(.is-filtered) .xmiddle,.explore .storygrid:not(.is-filtered) .xlabel,.explore .storygrid:not(.is-filtered) .xdispatches{margin-top:-24px}
}
@media(max-width:650px){.explore .storygrid:not(.is-filtered) .xdispatches{grid-template-columns:1fr}
.explore .storygrid:not(.is-filtered) .xdispatch h3{font-size:27px}
}