@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Rye&display=swap');

:root { color-scheme: light; --orange: #f9aa1d; --red: #e53b3a; --cyan: #4de2ef; --ink: #17120d; --paper: #fff7e8; --edge: clamp(1rem, 4vw, 3rem); --content: 72rem; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--orange); color: var(--ink); font-family: 'Outfit', sans-serif; }
img { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

#hero { position: relative; display: grid; min-height: clamp(30rem, 78svh, 55rem); padding: clamp(4rem, 10vh, 7rem) var(--edge); place-content: center; justify-items: center; overflow: hidden; text-align: center; }
#hero::before, #hero::after { content: ''; position: absolute; z-index: -1; width: clamp(14rem, 35vw, 29rem); aspect-ratio: 1; border: clamp(1.5rem, 4vw, 3rem) solid var(--red); border-radius: 50%; opacity: .32; }
#hero::before { top: -13rem; left: -8rem; }
#hero::after { right: -10rem; bottom: -15rem; border-color: var(--cyan); }
.fezent-return { position: absolute; top: 1.25rem; right: var(--edge); padding: .45rem .7rem; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.fezent-return:hover, .fezent-return:focus-visible { background: var(--ink); color: var(--orange); }
#logo { width: clamp(15rem, 51vw, 38rem); max-height: 40vh; }
.hero-message { position: relative; width: min(92vw, 52rem); min-height: clamp(3.5rem, 9vw, 5.5rem); margin-top: clamp(1rem, 3vh, 2rem); overflow: hidden; }
.hero-message span { position: absolute; inset: 0; display: grid; place-items: center; font: clamp(1.7rem, 5vw, 3.4rem)/1.1 'Rye', serif; letter-spacing: .08em; text-transform: uppercase; animation: hero-cycle 8s ease-in-out infinite; }
.hero-message span:last-child { padding-inline: .5rem; font: 700 clamp(1.1rem, 3.5vw, 2.2rem)/1.15 'Outfit', sans-serif; letter-spacing: .18em; animation-delay: -4s; opacity: 0; }
.hero-kicker { margin: .5rem 0 0; font-size: clamp(.8rem, 2vw, 1rem); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
@keyframes hero-cycle { 0%, 42% { opacity: 1; transform: translateY(0); } 50%, 92% { opacity: 0; transform: translateY(-.4rem); } 100% { opacity: 1; transform: translateY(0); } }

#navigation { position: sticky; top: 0; z-index: 10; padding: .7rem var(--edge); border-block: 2px solid var(--ink); background: rgba(249,170,29,.94); backdrop-filter: blur(12px); }
#nav-links, #nav-social-icons { display: flex; justify-content: center; align-items: center; gap: .55rem; }
#nav-links { overflow-x: auto; scrollbar-width: none; }
#nav-links::-webkit-scrollbar { display: none; }
#nav-links button { flex: 0 0 auto; padding: .55rem .8rem; border: 2px solid var(--ink); border-radius: .55rem; background: transparent; color: var(--ink); font: 700 1rem 'Outfit', sans-serif; cursor: pointer; }
#nav-links button:hover, #nav-links button:focus-visible, #nav-links .active { background: var(--ink); color: var(--orange); }

#content { width: min(100%, var(--content)); min-height: 60svh; margin: 0 auto; padding: 1rem var(--edge) clamp(3rem, 8vw, 7rem); touch-action: pan-y; }
.page { display: none; animation: page-in .28s ease both; }
.page.active { display: block; }
.swipe-hint { margin: 0 0 clamp(1.5rem, 5vw, 3rem); text-align: center; font-size: .82rem; font-weight: 700; letter-spacing: .08em; opacity: .62; text-transform: uppercase; }
h1, h2 { font-family: 'Rye', serif; font-weight: 400; }
.eyebrow { margin: 0 0 .5rem; color: #6c2b1e; font-size: .82rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.about-copy h1, .section-intro h1, .join-card h1, .contact-card h1 { margin: 0 0 1.25rem; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.15; }
.about-copy p:not(.eyebrow), .section-intro > p:not(.eyebrow), .join-card > p:not(.eyebrow) { font-size: clamp(1rem, 2.2vw, 1.22rem); line-height: 1.7; }
.feature-art { margin: 0; transform: rotate(1.5deg); }
.feature-art img { display: block; width: 100%; border: 3px solid var(--ink); border-radius: 1rem; background: var(--paper); box-shadow: 12px 12px 0 var(--red); }
.feature-art figcaption { margin-top: 1rem; font-weight: 700; text-align: center; }
.comic-header { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; width: min(100%, 62rem); margin: 0 auto 2rem; }
.comic-header h1 { margin: 0 0 .75rem; font-size: clamp(2.3rem, 6vw, 4.8rem); line-height: 1; }
.comic-header > div > p:last-child { max-width: 42rem; margin-bottom: 0; font-size: clamp(1rem, 2.2vw, 1.2rem); line-height: 1.6; }
.issue-stamp { min-width: 9rem; margin: 0; padding: .7rem .9rem; border: 2px solid var(--ink); transform: rotate(2deg); font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-align: center; text-transform: uppercase; }
.issue-stamp span { color: #6c2b1e; font-size: 1rem; letter-spacing: .05em; }
.comic-feature { width: min(100%, 62rem); margin: 0 auto; overflow: hidden; border: 3px solid var(--ink); border-radius: 1rem; background: var(--paper); box-shadow: 14px 14px 0 var(--cyan); }
.comic-feature img { display: block; width: 100%; background: white; }
.comic-feature figcaption { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.25rem; border-top: 3px solid var(--ink); }
.comic-feature figcaption span { color: #6c2b1e; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.comic-feature figcaption strong { text-align: right; }
.section-intro { width: min(100%, 43rem); margin: 0 auto clamp(2.5rem, 7vw, 5rem); text-align: center; }
.section-intro.compact { margin-bottom: 2.5rem; }
.action-link { display: inline-block; margin-top: 1rem; padding: .75rem 1rem; border: 2px solid var(--ink); border-radius: .55rem; background: var(--ink); color: var(--orange); font-weight: 800; text-decoration: none; }
.action-link:hover, .action-link:focus-visible { transform: translateY(-2px); background: var(--red); color: white; }
.event-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.event-strip img { width: 100%; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: .8rem; background: var(--paper); object-fit: cover; }
.event-strip img:nth-child(2) { transform: translateY(1rem); }
.join-card { width: min(100%, 46rem); margin: clamp(2rem, 8vw, 6rem) auto; padding: clamp(1.5rem, 6vw, 4rem); border: 3px solid var(--ink); border-radius: 1rem; background: var(--paper); box-shadow: 14px 14px 0 var(--cyan); text-align: center; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.product-card { display: grid; grid-template-columns: minmax(8rem, .8fr) 1.2fr; overflow: hidden; border: 3px solid var(--ink); border-radius: 1rem; background: var(--paper); }
.product-card img { width: 100%; height: 100%; min-height: 17rem; border-right: 3px solid var(--ink); object-fit: cover; }
.product-card > div { padding: clamp(1rem, 3vw, 1.5rem); }
.product-card span { font-weight: 800; opacity: .55; }
.product-card h2 { margin: .35rem 0 .75rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.product-card p, .product-card li { line-height: 1.5; }
.product-card ul { padding-left: 1.2rem; }
.contact-card { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 5vw, 3rem); align-items: center; width: min(100%, 48rem); margin: clamp(2rem, 8vw, 6rem) auto; padding: clamp(1.5rem, 5vw, 3rem); border: 3px solid var(--ink); border-radius: 1rem; background: var(--paper); }
.contact-mark { display: grid; width: clamp(5rem, 18vw, 8rem); aspect-ratio: 1; place-items: center; border: 3px solid var(--ink); border-radius: 50%; background: var(--red); color: white; font: clamp(2.5rem, 8vw, 4.5rem) 'Rye', serif; }
.contact-card h1 { margin-bottom: .7rem; }
.email-link { color: var(--ink); font-size: clamp(1rem, 3.5vw, 1.5rem); font-weight: 800; overflow-wrap: anywhere; }
.coordinates { margin-bottom: 0; font-size: .86rem; opacity: .7; }
#footer { padding: 1.5rem var(--edge) 2.5rem; border-top: 2px solid var(--ink); }
#nav-social-icons a { display: grid; width: 2.4rem; height: 2.4rem; padding: .3rem; place-items: center; border: 2px solid transparent; border-radius: .5rem; background: transparent; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
#nav-social-icons a:hover, #nav-social-icons a:focus-visible { border-color: var(--ink); background: var(--paper); transform: translateY(-2px); }
#nav-social-icons img { display: block; width: 100%; height: 100%; opacity: .82; object-fit: contain; }
#nav-social-icons a:hover img, #nav-social-icons a:focus-visible img { opacity: 1; }
@keyframes page-in { from { opacity: 0; transform: translateX(1rem); } }

@media (max-width: 52rem) { .product-grid { grid-template-columns: 1fr; } }
@media (max-width: 42rem) { .about-grid { grid-template-columns: 1fr; } .feature-art { width: min(100%, 28rem); margin: auto; } .comic-header { grid-template-columns: 1fr; gap: 1rem; } .issue-stamp { width: max-content; } .comic-feature figcaption { align-items: flex-start; flex-direction: column; } .comic-feature figcaption strong { text-align: left; } .event-strip { gap: .5rem; } .contact-card { grid-template-columns: 1fr; text-align: center; } .contact-mark { margin: auto; } }
@media (max-width: 30rem) { #navigation { padding-inline: .4rem; } #nav-links { justify-content: flex-start; } #nav-links button { padding: .48rem .58rem; font-size: .87rem; } .product-card { grid-template-columns: 1fr; } .product-card img { min-height: 13rem; max-height: 18rem; border-right: 0; border-bottom: 3px solid var(--ink); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .page { animation: none; } .hero-message span { animation: none; } .hero-message span:first-child { display: none; } .hero-message span:last-child { opacity: 1; } }