/* ==========================================================================
   Stories (blog), single stories and Hiro Boy comics — loaded on those pages only.
   Layout from "Sushi Hiro Stories-Blog Page - 01".
   ========================================================================== */

.story-kicker { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; font-weight: 800; font-size: .92rem; }
.story-kicker a { text-decoration: none; }
.story-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.story-kicker__cat { padding: .2em .9em; background: var(--yellow-btn); border: 2px solid var(--ink); border-radius: 999px; }

/* ---------- Story list ---------- */
.stories-list { background: #FFF7EC; padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(3.5rem, 7vw, 6rem); }
.stories-list--archive { padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 3.5rem)); }
.stories-list--archive .story-kicker { justify-content: center; margin-bottom: 1rem; }
.stories-list__title { font-weight: 900; font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1.08; letter-spacing: -.01em; text-align: center; }
.stories-list--more .stories-list__title { font-size: clamp(1.8rem, 3.2vw, 3rem); }
.stories-list__lead { max-width: 64ch; margin: 1rem auto 0; text-align: center; font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.6; }
.stories-list__empty { margin-top: 3rem; text-align: center; font-weight: 700; }
.stories-list__all { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

.story-grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 2.8vw, 2.6rem) clamp(1rem, 2.4vw, 2.2rem);
	max-width: 1160px; margin: clamp(2.5rem, 4.5vw, 4rem) auto 0;
}
.story-card { background: var(--white); border-radius: clamp(24px, 3vw, 40px); overflow: hidden; transition: translate .3s var(--ease-pop), box-shadow .3s; }
.story-card:hover { translate: 0 -6px; box-shadow: 0 18px 40px rgba(150, 90, 20, .14); }
.story-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.story-card__photo { aspect-ratio: 1.8; overflow: hidden; background: #f1e4d2; }
.story-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-pop); }
.story-card:hover .story-card__photo img { transform: scale(1.05); }
.story-card__fallback { object-fit: contain !important; padding: 1rem; }
.story-card__body { padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2.1vw, 1.8rem) clamp(1.4rem, 2.4vw, 2rem); }
.story-card__meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #9a6410; }
.story-card__title { margin: .5rem 0 0; font-weight: 800; font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.2; }
.story-card__excerpt { margin-top: .6rem; font-size: .88rem; line-height: 1.55; color: #2d2620; }

.story-pages { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.story-pages .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem 1.1rem; font-size: 1.15rem; }
.story-pages .page-numbers { padding: .2rem .15rem; text-decoration: none; }
.story-pages a.page-numbers:hover { text-decoration: underline; text-underline-offset: 4px; }
.story-pages .current { font-weight: 900; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* ---------- Hiro Boy's Comic Corner ---------- */
.comics { position: relative; background: var(--yellow); padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(4rem, 8vw, 7rem); }
.deco--c1 { left: 6%; top: 12%; rotate: -14deg; }
.deco--c2 { right: 6%; top: 44%; rotate: 12deg; }
.comics__title { position: relative; z-index: 2; font-weight: 900; font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1.08; letter-spacing: -.01em; text-align: center; }
.comics__lead { position: relative; z-index: 2; max-width: 62ch; margin: 1rem auto 0; text-align: center; font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.6; }

.comic-issue { font-weight: 900; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #9a5a00; }
.comic-badge {
	position: absolute; top: 1rem; left: 1rem; z-index: 1; padding: .3em .9em;
	font-weight: 900; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--white);
	background: var(--red); border: 3px solid var(--ink); border-radius: 999px; rotate: -6deg;
}

.comic-feature {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(1.4rem, 4vw, 3.5rem);
	max-width: 1000px; margin: clamp(2.5rem, 4.5vw, 3.8rem) auto 0; padding: clamp(1rem, 2vw, 1.6rem);
	background: var(--white); border: 3px solid var(--ink); border-radius: clamp(24px, 3vw, 36px); box-shadow: 0 8px 0 var(--ink);
}
.comic-feature__cover {
	position: relative; display: block; overflow: hidden; aspect-ratio: 1;
	border: 3px solid var(--ink); border-radius: 22px; background: #f3e2c6;
}
.comic-feature__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-pop); }
.comic-feature__cover:hover img { transform: scale(1.05) rotate(-1deg); }
.comic-feature__copy { padding: .5rem clamp(0rem, 1vw, 1rem) .5rem 0; }
.comic-feature__title { margin-top: .5rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.05; }
.comic-feature__teaser { margin-top: .8rem; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.55; }
.comic-feature__meta { margin-top: .7rem; font-size: .85rem; font-weight: 700; color: #6b5a45; }
.comic-feature__actions { margin-top: 1.4rem; }

.comics__shelf-title { position: relative; z-index: 2; margin-top: clamp(2.5rem, 4vw, 3.5rem); font-weight: 900; font-size: 1.3rem; text-align: center; }
.comic-shelf {
	position: relative; z-index: 2;
	display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem;
}
.comic-shelf--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); max-width: 1100px; margin: 2.5rem auto 0; }
.comic-tile { display: grid; gap: .45rem; width: 200px; text-decoration: none; }
.comic-shelf--grid .comic-tile { width: auto; }
.comic-tile__cover { display: block; overflow: hidden; aspect-ratio: 1; background: var(--white); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); transition: translate .25s var(--ease-pop), box-shadow .25s; }
.comic-tile__cover img { width: 100%; height: 100%; object-fit: cover; }
.comic-tile:hover .comic-tile__cover { translate: 0 -4px; box-shadow: 0 9px 0 var(--ink); }
.comic-tile__title { font-weight: 800; line-height: 1.25; }
.comics__all { position: relative; z-index: 2; margin-top: 1.6rem; text-align: center; font-weight: 800; }

/* ---------- Comic reader ---------- */
.comic-reader {
	position: fixed; inset: 0; z-index: 95;
	display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .8rem;
	padding: clamp(.8rem, 2vw, 1.4rem) clamp(.8rem, 3vw, 2.5rem);
	background: #FFF3DC url(../img/gingham.webp) center / 900px auto repeat;
	opacity: 0; transition: opacity .25s;
}
.comic-reader.is-open { opacity: 1; }
.comic-reader__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 1100px; width: 100%; margin-inline: auto; }
.comic-reader__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.05; }
.comic-reader__close {
	flex: none; width: 3rem; height: 3rem; padding: 0; font-size: 1.8rem; line-height: 1;
	background: var(--yellow-btn); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 4px 0 var(--ink);
}
.comic-reader__stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(.4rem, 2vw, 1.5rem); min-height: 0; }
.comic-reader__panel { display: grid; justify-items: center; align-content: center; gap: .7rem; min-height: 0; height: 100%; margin: 0; cursor: pointer; user-select: none; touch-action: pan-y; }
.comic-reader__panel img {
	width: auto; max-width: 100%; max-height: calc(100svh - 14rem); object-fit: contain;
	background: var(--white); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 8px 0 var(--ink);
	opacity: 0; translate: calc(var(--dir, 1) * 24px) 0; transition: opacity .3s, translate .35s var(--ease-pop);
}
.comic-reader__panel img.is-in { opacity: 1; translate: 0 0; }
.comic-reader__caption { max-width: 60ch; padding: .5rem 1rem; font-weight: 800; text-align: center; background: var(--white); border-radius: 12px; }
.comic-reader__end { display: grid; justify-items: center; gap: .8rem; text-align: center; }
.comic-reader__end-title { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; }
.comic-reader__end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .6rem; }
.comic-reader .arrow:disabled { opacity: .3; cursor: default; }
.comic-reader__foot { display: grid; justify-items: center; gap: .5rem; }
.comic-reader__count { font-weight: 800; font-size: .9rem; }
.comic-reader__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: 0; list-style: none; }
.comic-reader__dots button { width: .85rem; height: .85rem; padding: 0; background: var(--white); border: 2px solid var(--ink); border-radius: 50%; }
.comic-reader__dots button[aria-current="true"] { width: 2rem; background: var(--orange); border-radius: 999px; }
body.comic-open { overflow: hidden; }

/* ---------- One comic's own page ---------- */
.comic-page { padding: calc(var(--header-h) + clamp(2rem, 4vw, 3.5rem)) 0 clamp(3.5rem, 7vw, 6rem); text-align: center; }
.comic-page .story-kicker { justify-content: center; margin-bottom: 1rem; }
.comic-page__title { margin-top: .5rem; }
.comic-page__teaser { max-width: 60ch; margin: 1rem auto 1.6rem; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; }
.comic-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); max-width: 1100px; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: 0; list-style: none; counter-reset: panel; }
.comic-panel__open { display: block; width: 100%; padding: 0; overflow: hidden; background: var(--white); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); cursor: zoom-in; }
.comic-panel__open img { width: 100%; }
.comic-panel__caption { margin-top: .6rem; font-weight: 800; }

/* ---------- Never miss an update ---------- */
.subscribe { position: relative; z-index: 2; background: var(--white); padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem); }
.subscribe__sparkles { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; pointer-events: none; }
.subscribe__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.subscribe__title { font-weight: 900; font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1.08; letter-spacing: -.01em; }
.subscribe__lead { max-width: 52ch; margin-top: 1rem; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.55; }
.subscribe__perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.8rem 0 2rem; }
.subscribe__perks li { display: grid; justify-items: center; gap: .4rem; text-align: center; font-weight: 800; font-size: .85rem; line-height: 1.25; }
.subscribe__perk-img { width: min(100%, 120px); aspect-ratio: 706 / 767; object-fit: cover; border-radius: 18px; box-shadow: 0 8px 18px rgba(120, 80, 20, .12); } /* photo tiles (News Stories and Updates/) */
.subscribe__art { display: grid; place-items: center; }
.subscribe__hiro { width: min(100%, 480px); }
.subscribe--cream { background: #FFF8EE; }
.subscribe__follow-label { margin-top: 1.8rem; font-weight: 900; font-size: 1.1rem; }
.subscribe__perks + .subscribe__follow-label { margin-top: 0; }
.subscribe__follow { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin-top: .8rem; }
.subscribe__logo { width: clamp(150px, 16vw, 230px); }
.socials--lg img { width: clamp(3rem, 3.8vw, 3.6rem); height: clamp(3rem, 3.8vw, 3.6rem); }
/* The designer's cloud is a band: small bumps on top, big bumps below. It straddles this section's bottom edge —
   the top part blends into the section (same colour), the big bumps hang over the footer, like the design. */
.subscribe__cloud { position: absolute; left: 0; bottom: 1px; z-index: 0; width: 100%; max-width: none; translate: 0 41%; pointer-events: none; }
.subscribe__inner { z-index: 1; }
/* Room in the footer for the hanging bumps (≈11vw) so they never cover "Come and meet me!". */
main:has(.subscribe__cloud) + .site-footer { padding-top: calc(clamp(4rem, 8vw, 8rem) + 7vw); }

/* ---------- A single story ---------- */
.story__head { padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 3.5rem)); max-width: 1100px; }
.story__title { max-width: 22ch; margin-top: 1.2rem; font-weight: 900; font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.08; letter-spacing: -.015em; }
.story__meta { display: flex; gap: .6rem; margin-top: 1rem; font-weight: 700; color: #6b5a45; }
.story__cover { margin-top: clamp(1.6rem, 3vw, 2.5rem); overflow: hidden; border-radius: clamp(20px, 3vw, 36px); aspect-ratio: 2; background: #f1e4d2; }
.story__cover img { width: 100%; height: 100%; object-fit: cover; }
.story__foot { max-width: 720px; padding: 2rem 0 clamp(3rem, 6vw, 5rem); border-top: 2px dashed #e5d4bd; margin-top: 3rem; }
.story__share-label { font-weight: 900; }
.story__share { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; }
.story__share a { display: inline-block; padding: .45em 1.1em; font-weight: 800; font-size: .9rem; text-decoration: none; border: 2px solid var(--ink); border-radius: 999px; }
.story__share a:hover { background: var(--yellow-btn); }

.prose { width: min(92vw, 720px); margin: clamp(2rem, 4vw, 3rem) auto 0; font-size: clamp(1.02rem, 1.2vw, 1.12rem); line-height: 1.75; color: #231d17; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-weight: 900; font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.2; color: var(--ink); }
.prose h3 { margin-top: 1.6em; font-weight: 800; font-size: 1.25rem; line-height: 1.3; }
.prose a { font-weight: 700; color: #a04f00; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.6em; }
.prose ul li::before { content: ""; position: absolute; left: .2em; top: .62em; width: .55em; height: .55em; background: var(--orange); border-radius: 50%; }
.prose li + li { margin-top: .45em; }
.prose strong { font-weight: 800; }
.prose figure { margin-block: 2em; }
.prose figure img { width: 100%; border-radius: 22px; }
/* A single tall (portrait) photo shouldn't fill the whole screen: cap its height and centre it. Gallery images are nested, so unaffected. */
.prose > .wp-block-image img { display: block; width: auto; max-height: min(75vh, 640px); margin-inline: auto; }
.prose figcaption { margin-top: .6rem; font-size: .88rem; text-align: center; color: #6b5a45; }
.prose blockquote { margin-inline: 0; padding: 1rem 1.4rem; background: #FFF3DC; border-left: 5px solid var(--orange); border-radius: 0 16px 16px 0; font-weight: 700; }
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .8rem; }
.prose .wp-block-button__link {
	display: inline-flex; padding: .65em 1.5em; font-weight: 800; color: var(--ink); text-decoration: none;
	background: var(--yellow-btn); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 5px 0 var(--ink);
}

/* ---------- Tablet / mobile ---------- */
@media (max-width: 1023px) {
	.story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.subscribe__perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.story-grid { grid-template-columns: 1fr; max-width: 460px; }
	.comic-feature { grid-template-columns: 1fr; }
	.comic-feature__copy { padding: 0 .4rem .6rem; text-align: center; }
	.comic-shelf { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -6vw; padding: .4rem 6vw 1rem; scroll-snap-type: x mandatory; }
	.comic-shelf--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; padding: 0; overflow: visible; }
	.comic-tile { flex: none; width: 42vw; scroll-snap-align: start; }
	.comic-panels { grid-template-columns: 1fr; }
	.comic-reader { padding-inline: .6rem; }
	.comic-reader__stage { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
	.comic-reader__panel, .comic-reader__end { grid-column: 1 / -1; grid-row: 1; }
	.comic-reader .arrow--prev { justify-self: end; }
	.comic-reader__panel img { max-height: calc(100svh - 17rem); }
	.subscribe__inner { grid-template-columns: 1fr; text-align: center; }
	.subscribe__lead { margin-inline: auto; }
	.subscribe__follow { justify-content: center; }
	.subscribe__art { order: -1; }
	.subscribe__hiro { width: 62vw; }
	.deco--c1, .deco--c2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.comic-reader__panel img { transition: none; translate: none; }
}