/* sections */
section{padding:120px 0;}

.section-label{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--nature);margin-bottom:20px;display:flex;align-items:center;gap:12px;}

.section-label::before{content:'';width:24px;height:1px;background:var(--nature);}

/* ---- Eyebrow alignment ---------------------------------------------------
   An eyebrow is ONE leading dash + the text. Left-aligned is the default above.
   Centring never moves the text: the label becomes three tracks — dash side |
   text | empty side — with equal, shrinkable side tracks, so the text always sits
   exactly on the centre line. The dash lives in the left track, 12px from the
   text's left edge (margin, not a track gap), so it takes no part in the
   centring: no offsets, no second dash, no extra markup. If a label is so long
   that the side tracks shrink to nothing, the dash simply hangs into the margin
   rather than pushing the text off-centre.
   Use .section-label--center to centre at every width, or
   .section-label--center-md to centre only at tablet/mobile (<=980px, where a
   section's layout stacks); only the alignment changes, never the eyebrow. */
.section-label--center,
.photo-text-content .section-label,
.contact-band .section-label{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0;text-align:center;}
.section-label--center::before,
.photo-text-content .section-label::before,
.contact-band .section-label::before{justify-self:end;margin-right:12px;}
@media (max-width:980px){
.section-label--center-md{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0;text-align:center;}
.section-label--center-md::before{justify-self:end;margin-right:12px;}
}

.section-title{font-family:var(--sans);font-weight:700;font-size:clamp(28px,3.2vw,42px);color:var(--heading);letter-spacing:-0.01em;max-width:14ch;}

/* signature heading style — the hero's italic-serif accent word,
     now shared by every section heading on the homepage instead of
     living only in .hero h1. One rule, applied wherever a heading
     wraps a word in <em>. */
.hero h1 em,
  .section-title em,
  .feature h2 em,
  .explore-head h2 em{
    font-family:var(--serif);
    font-style:italic;
    font-weight:500;
    color:var(--accent);
  }

/* featured story */
.feature{background:var(--surface);padding:110px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}

.feature-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:0 64px;align-items:center;}

.feature-img{aspect-ratio:4/5;overflow:hidden;background:var(--border);}

.feature-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease;}

.feature-img:hover img{transform:scale(1.035);}

.feature h2{font-family:var(--sans);font-weight:700;font-size:clamp(26px,2.6vw,36px);line-height:1.12;color:var(--heading);letter-spacing:-0.01em;margin-bottom:22px;}

.feature p{font-family:var(--serif);font-size:17px;line-height:1.7;color:var(--body);margin-bottom:32px;max-width:46ch;}

.sec-link{font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--panel-dark);display:inline-flex;align-items:center;gap:6px;}

.story-tags{display:flex;gap:16px;font-size:12.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px;}

.story-tags .cat{color:var(--accent);}

.story-tags .place{color:var(--nature);}

.story-meta{font-size:12.5px;color:#7d8087;letter-spacing:.02em;}

.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px;}

.theme-card{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--border);}

.theme-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}

.theme-card:hover img{transform:scale(1.08);}

.theme-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(20,18,15,0) 45%, rgba(20,18,15,.82) 100%);}

.theme-card-overlay{position:absolute;left:0;bottom:0;z-index:1;padding:24px;width:100%;}

.theme-card-overlay h3{font-family:var(--sans);font-weight:700;font-size:26px;color:#FFFFFF;letter-spacing:-0.01em;margin-bottom:10px;}

.theme-card-link{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.8);display:inline-flex;align-items:center;gap:6px;transition:color .2s ease, gap .2s ease;}

.theme-card:hover .theme-card-link{color:var(--accent);gap:10px;}

/* Stories archive page — reuses .feature, .story-card,
     .hero-kicker etc. from the shared system; only genuinely new
     components are styled here. */
.archive-intro{padding:72px 0 24px;}

.archive-intro p{font-family:var(--serif);font-size:19px;line-height:1.65;color:var(--body);text-align:center;}

.archive-grid-section{padding-top:0;}

.archive-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:48px;}

.see-more-wrap{display:flex;justify-content:center;margin-top:56px;}

/* experiences */
.experiences{border-top:1px solid var(--border);}

.experience-meta,.card-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--border);}

.experience-card:hover .sec-link,.story-card:hover .sec-link{color:var(--accent);}

.exp-num{font-family:var(--sans);font-size:13px;color:var(--accent);font-weight:600;margin-bottom:18px;letter-spacing:.04em;}

/* Homepage Experiences layout (.exp-editorial …) lives in pages/home.css. */

/* field note strip */
.field-note{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:40px 0;}

.field-note .wrap{display:flex;gap:56px;flex-wrap:wrap;font-family:var(--sans);font-size:13px;color:var(--body);}

.field-note strong{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--nature);margin-bottom:6px;font-weight:600;}

/* breather — a quiet pause between the dense story grid and the
     field-note strip, but now explicitly attributed to the story it's
     drawn from (Ziro Valley) rather than reading as an unconnected
     generic line, with the field notes right after it having no stated
     source. */
.breather{padding:0;}

.breather-media{width:100%;aspect-ratio:21/8;overflow:hidden;background:var(--border);}

.breather-media img{width:100%;height:100%;object-fit:cover;}

.breather-caption{background:var(--panel-dark);text-align:center;padding:28px 24px;}

.breather-line{color:rgba(255,255,255,.82);font-family:var(--serif);font-style:italic;font-size:17px;margin:0 0 10px;}

.breather-source{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12.5px;color:rgba(255,255,255,.55);transition:color .2s ease;}

.breather-source:hover{color:var(--accent);}

@media (max-width:1100px){
.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}


@media (max-width:980px){
section{padding:80px 0;}
}

@media (max-width:980px){
.theme-grid{grid-template-columns:1fr 1fr;}
.feature-img{aspect-ratio:4/3;margin-bottom:32px;}
.feature p{max-width:none;}
}

@media (max-width:560px){
.theme-grid{grid-template-columns:1fr;}
.archive-grid{grid-template-columns:minmax(0,1fr);}
}