/* Field Guide — magazine.css */
:root {
    --moss: #3A4A36;
    --mist: #D7DDD8;
    --trail: #8B6A45;
    --dusk: #1B2A28;
    --paper: #F4F2EC;
    --ink: #1B2A28;
    --hairline: rgba(27, 42, 40, 0.16);
    --display: "Fraunces", Georgia, serif;
    --ui: "Archivo", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--ui);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--hairline); background: var(--paper); }
.site-header__inner {
    max-width: 1200px; margin: 0 auto; padding: 1.1rem 1.5rem;
    display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.site-header__brand { display: flex; align-items: baseline; gap: 0.9rem; }
.site-header__wordmark { font-family: var(--display); font-weight: 560; font-size: 1.7rem; letter-spacing: 0.01em; color: var(--dusk); }
.site-header__tagline { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--trail); }
.site-header__nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.site-header__nav a {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--moss); padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.site-header__nav a:hover { color: var(--dusk); border-bottom-color: var(--trail); }

/* ---------- full-bleed hero band ---------- */
.hero-band { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--dusk); }
.hero-band__media { position: absolute; inset: 0; }
.hero-band__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-band__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(27,42,40,0.04) 0%, rgba(27,42,40,0.24) 46%, rgba(27,42,40,0.88) 100%);
}
.hero-band__content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; width: 100%; padding: 3.5rem 1.5rem 4.5rem; color: #fff; }
.hero-band__issue {
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--mist); margin-bottom: 1.1rem;
}
.hero-band__title {
    font-family: var(--display); font-weight: 480; font-size: clamp(2.6rem, 6.2vw, 5.2rem);
    line-height: 1.02; max-width: 15ch; letter-spacing: -0.015em; margin-bottom: 1.2rem;
}
.hero-band__dek { max-width: 52ch; font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,0.86); margin-bottom: 1.4rem; }
.hero-band__meta { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); margin-bottom: 1.8rem; }
.hero-band__link {
    display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--dusk); background: var(--mist); padding: 0.85rem 1.6rem;
}
.hero-band__link:hover { background: #fff; }

/* ---------- shared labels ---------- */
.section-label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--trail);
}

/* ---------- story section / staggered grid ---------- */
.story-section { max-width: 1200px; margin: 0 auto; padding: 4rem 1.5rem 5rem; }
.story-section__head {
    display: flex; align-items: baseline; justify-content: space-between;
    border-top: 2px solid var(--dusk); padding-top: 1rem; margin-bottom: 2.6rem;
}
.story-section__more {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--moss); border-bottom: 1px solid var(--trail); padding-bottom: 2px;
}
.story-section__more:hover { color: var(--trail); }

.story-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3.2rem 2.4rem; }
.story-card { grid-column: span 5; }
.story-card:nth-child(4n+1),
.story-card:nth-child(4n+4) { grid-column: span 7; }
.story-card:nth-child(4n+2),
.story-card:nth-child(4n+3) { margin-top: 3.4rem; }
.story-card__link { display: block; }
.story-card__media { overflow: hidden; background: var(--mist); margin-bottom: 1.1rem; }
.story-card__media img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.story-card__link:hover .story-card__media img { transform: translateY(-4px); opacity: 0.92; }
.story-card__kicker {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--trail); margin-bottom: 0.5rem;
}
.story-card__title {
    font-family: var(--display); font-weight: 520; font-size: 1.7rem; line-height: 1.12;
    letter-spacing: -0.01em; margin-bottom: 0.6rem; color: var(--dusk);
}
.story-card__link:hover .story-card__title {
    text-decoration: underline; text-decoration-color: var(--trail);
    text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.story-card__dek { font-size: 0.95rem; line-height: 1.6; color: rgba(27,42,40,0.72); margin-bottom: 0.7rem; }
.story-card__meta { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss); }

/* ---------- magazine archive ---------- */
.archive { max-width: 1200px; margin: 0 auto; padding: 4rem 1.5rem 5rem; }
.archive__issue {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 3rem; align-items: center;
    padding-bottom: 4rem; border-bottom: 1px solid var(--hairline); margin-bottom: 4rem;
}
.archive__cover img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.archive__title {
    font-family: var(--display); font-weight: 520; font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 1.05; margin: 0.8rem 0 0.4rem;
}
.archive__season {
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--trail); margin-bottom: 1rem;
}
.archive__dek { font-size: 1.05rem; line-height: 1.65; color: rgba(27,42,40,0.78); margin-bottom: 1.6rem; max-width: 52ch; }
.btn-text {
    display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--dusk); border-bottom: 2px solid var(--trail); padding-bottom: 3px;
}
.btn-text:hover { color: var(--trail); }

.archive__index { max-width: 820px; }
.archive__list { list-style: none; border-top: 1px solid var(--hairline); }
.archive__row { border-bottom: 1px solid var(--hairline); }
.archive__row a {
    display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding: 1.15rem 0.2rem;
}
.archive__row-title { font-family: var(--display); font-weight: 500; font-size: 1.3rem; color: var(--dusk); }
.archive__row:hover .archive__row-title {
    text-decoration: underline; text-decoration-color: var(--trail); text-underline-offset: 3px;
}
.archive__row-meta {
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--moss); white-space: nowrap;
}

/* ---------- article detail ---------- */
.article { max-width: 860px; margin: 0 auto; padding: 4.5rem 1.5rem 1.5rem; }
.article__kicker {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--trail); margin-bottom: 1.2rem;
}
.article__title {
    font-family: var(--display); font-weight: 480; font-size: clamp(2.4rem, 5.4vw, 4rem);
    line-height: 1.04; letter-spacing: -0.015em; margin-bottom: 1.2rem;
}
.article__dek { font-size: 1.2rem; line-height: 1.55; color: rgba(27,42,40,0.78); margin-bottom: 1.2rem; }
.article__meta {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss);
    padding-bottom: 2.2rem; border-bottom: 1px solid var(--hairline); margin-bottom: 2.4rem;
}
.article__hero { margin: 0 0 2.6rem; }
.article__hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article__body { font-family: var(--display); font-weight: 420; font-size: 1.18rem; line-height: 1.75; color: rgba(27,42,40,0.92); }
.article__body p { margin-bottom: 1.5rem; }

.more { max-width: 1200px; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; border-top: 1px solid var(--hairline); }
.more__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-top: 1.8rem; }
.more__item { display: block; padding: 1.4rem 0; border-top: 1px solid var(--hairline); }
.more__item:hover .more__title {
    text-decoration: underline; text-decoration-color: var(--trail); text-underline-offset: 3px;
}
.more__title { font-family: var(--display); font-weight: 520; font-size: 1.25rem; line-height: 1.2; display: block; margin-bottom: 0.4rem; color: var(--dusk); }
.more__meta {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss);
}

/* ---------- section page ---------- */
.section-page { max-width: 1200px; margin: 0 auto; padding: 4rem 1.5rem 5rem; }
.section-page__header { border-top: 2px solid var(--dusk); padding-top: 1.2rem; margin-bottom: 2.8rem; }
.section-page__title {
    font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.05;
}
.section-page__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3rem 2.4rem; }
.section-page__grid .story-card:nth-child(odd) { grid-column: span 7; }
.section-page__grid .story-card:nth-child(even) { grid-column: span 5; }

/* ---------- contributors ---------- */
.contributors { max-width: 1200px; margin: 0 auto; padding: 4rem 1.5rem 5rem; }
.contributors__header { border-top: 2px solid var(--dusk); padding-top: 1.2rem; margin-bottom: 3rem; }
.contributors__title {
    font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.05;
}
.contributors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2.4rem; }
.contributor { border-top: 1px solid var(--hairline); padding-top: 1.6rem; }
.contributor__photo { margin-bottom: 1.1rem; background: var(--mist); }
.contributor__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.contributor__name { font-family: var(--display); font-weight: 540; font-size: 1.45rem; margin-bottom: 0.2rem; color: var(--dusk); }
.contributor__role {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--trail); margin-bottom: 0.15rem;
}
.contributor__loc { font-size: 0.8rem; color: var(--moss); margin-bottom: 0.8rem; }
.contributor__bio { font-size: 0.92rem; line-height: 1.6; color: rgba(27,42,40,0.74); }

/* ---------- plain pages (about / newsletter) ---------- */
.page-plain { max-width: 760px; margin: 0 auto; padding: 5rem 1.5rem 6rem; }
.page-plain__title {
    font-family: var(--display); font-weight: 480; font-size: clamp(2.3rem, 5vw, 3.6rem);
    line-height: 1.05; margin: 0.9rem 0 1.6rem;
}
.page-plain__body p { margin-bottom: 1.2rem; font-size: 1.05rem; line-height: 1.7; color: rgba(27,42,40,0.85); }

.newsletter-form { margin-top: 2.2rem; border-top: 1px solid var(--hairline); padding-top: 1.6rem; }
.newsletter-form__label {
    display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--moss); margin-bottom: 0.7rem;
}
.newsletter-form__row { display: flex; gap: 0.6rem; max-width: 480px; }
.newsletter-form__input {
    flex: 1; font: inherit; font-size: 0.95rem; padding: 0.75rem 0.9rem;
    border: 1px solid rgba(27,42,40,0.35); background: #fff; color: var(--ink);
}
.newsletter-form__input:focus { outline: 2px solid var(--trail); outline-offset: 1px; border-color: var(--trail); }
.newsletter-form__button {
    font: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.75rem 1.4rem; background: var(--dusk); color: var(--mist); border: 0; cursor: pointer;
}
.newsletter-form__button:hover { background: var(--moss); }
.newsletter-form__note { margin-top: 1rem; font-size: 0.92rem; color: var(--moss); }
.newsletter-form__error { margin-top: 0.6rem; font-size: 0.85rem; font-weight: 600; color: #9A3B2E; }

/* ---------- footer ---------- */
.site-footer { background: var(--dusk); color: var(--mist); }
.site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 3.5rem 1.5rem 3rem; }
.site-footer__wordmark { font-family: var(--display); font-weight: 560; font-size: 1.6rem; color: #fff; margin-bottom: 0.9rem; }
.site-footer__note { max-width: 46ch; font-size: 0.92rem; line-height: 1.6; color: rgba(215,221,216,0.78); margin-bottom: 1.8rem; }
.site-footer__nav { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.site-footer__nav a {
    font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--mist); border-bottom: 1px solid transparent;
}
.site-footer__nav a:hover { color: #fff; border-bottom-color: var(--trail); }
.site-footer__legal {
    font-size: 0.76rem; letter-spacing: 0.06em; color: rgba(215,221,216,0.55);
    border-top: 1px solid rgba(215,221,216,0.18); padding-top: 1.4rem;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .story-card, .story-card:nth-child(4n+1), .story-card:nth-child(4n+4),
    .section-page__grid .story-card, .section-page__grid .story-card:nth-child(odd),
    .section-page__grid .story-card:nth-child(even) { grid-column: span 12; }
    .story-card:nth-child(4n+2), .story-card:nth-child(4n+3) { margin-top: 0; }
    .archive__issue { grid-template-columns: 1fr; gap: 2rem; }
    .contributors__grid { grid-template-columns: repeat(2, 1fr); }
    .more__grid { grid-template-columns: 1fr; }
    .archive__row a { flex-direction: column; gap: 0.3rem; align-items: flex-start; }
    .archive__row-meta { white-space: normal; }
}
@media (max-width: 640px) {
    .contributors__grid { grid-template-columns: 1fr; }
    .site-header__inner { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
    .hero-band { min-height: 78vh; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .story-card__link:hover .story-card__media img { transform: none; }
}