/* content.css: content pages (evenimente, harvest-experience, legal x4, 404).
   Owned by the CONTENT PAGES agent. Uses tokens.css / base.css / components.css only; never redefines their classes.
   Anything the foundation should absorb is listed in CONTENT_NEEDS.md. */

/* ---------- shared ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 .55em;font-size:var(--fs-small);letter-spacing:.08em;color:var(--ink-muted);margin:0 0 clamp(20px,3vh,32px)}
.crumbs a{color:var(--ink-muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;transition:color var(--t-ui) var(--ease-out)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
/* pages without a photo hero: the first section clears the fixed header */
.page-top{padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + clamp(16px,4vh,48px))}

/* ---------- evenimente (DESIGN.md 11: chapters, rounded 16px photos, ghost years) ---------- */
.ev-open{padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + clamp(16px,5vh,64px))}
.ev-open__title{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:.04em}
.ev-open__media{margin:clamp(28px,5vh,56px) 0 0;border-radius:var(--r-card);overflow:hidden;background:var(--surface);aspect-ratio:1300/620}
.ev-open__media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
@media (max-width:700px){.ev-open__media{aspect-ratio:4/3}}
@media (max-height:520px) and (orientation:landscape){.ev-open__title{font-size:clamp(34px,10vh,48px)}.ev-open__media{margin-top:16px;aspect-ratio:1300/520}}

.ev-ch .chapter__title{letter-spacing:.03em}
.ev-ch--media-right>.chapter__media{order:1}
.ev-collage{background:none;border-radius:0;overflow:visible;display:grid;gap:clamp(8px,1vw,14px)}
.ev-ph{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.ev-ph img{width:100%;height:100%;object-fit:cover}
.ev-collage--three{grid-template-columns:1fr 1fr}
.ev-collage--three .ev-ph{aspect-ratio:3/2}
.ev-collage--three .ev-ph:first-child{grid-column:1/-1}
.ev-collage--four{grid-template-columns:1fr 1fr 1fr}
.ev-collage--four .ev-ph{aspect-ratio:3/2}
.ev-collage--four .ev-ph:first-child{grid-column:1/-1}
/* short landscape (C-20260925-105): the generic `.chapter__media{max-height:78svh}` (components.css) caps a single
   photo fine, but a two-row collage's natural height (big row + small row, aspect-ratio:3/2 each) is taller than
   that budget; because .ev-ph is overflow:hidden its CSS Grid automatic minimum size is 0, so the browser let the
   rows collapse into each other instead of refusing to shrink - the big photo rendered past its own track into the
   small row's track, pushing the small photos to the container's bottom edge where the section's ghost-word
   overflow:clip cut them to a sliver. Fix: give the collage a definite height + explicit row fractions (matching the
   natural big:small ratio, n small columns -> n:1) so the whole cluster scales down as one unit with no overlap. */
@media (max-height:520px) and (orientation:landscape){
  .ev-collage{height:78svh;max-height:none}
  .ev-collage--three{grid-template-rows:2fr 1fr}
  .ev-collage--four{grid-template-rows:3fr 1fr}
  .ev-collage .ev-ph{aspect-ratio:auto}
}
.ghost--right{left:auto;right:0;transform:translate(4%,-50%)}
.hx-chapter .chapter__title{font-size:clamp(30px,3.4vw,52px)}
@media (max-width:860px){.ev-ch--media-right>.chapter__media{order:0}}

/* ---------- harvest-experience (DESIGN.md 11) ---------- */
.hx-open{padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + clamp(8px,3vh,40px))}
.hx-open__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:center}
.hx-mono{width:clamp(40px,3.4vw,56px);height:auto;margin:0 0 clamp(16px,3vh,28px)}
.hx-open__title{font-size:clamp(40px,5.6vw,88px);line-height:var(--lh-display)}
.hx-open__name{display:block}
.hx-open__meta{display:block;margin-top:clamp(14px,2vh,22px);font:600 var(--fs-small)/1.4 var(--font-body);letter-spacing:var(--track-small);text-transform:uppercase;color:var(--accent)}
.hx-open__tag{margin-top:12px;font:400 14px/1.6 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted)}
.hx-lead{font-size:var(--fs-lede);line-height:var(--lh-lede);font-weight:300;color:var(--ink-muted);max-width:50ch;margin-top:clamp(16px,2.6vh,28px)}
.hx-cta{margin-top:clamp(20px,3.4vh,36px)}
.hx-open__media{margin:0}
.hx-open__media img{width:100%;height:auto}
.hx-ghost-open{top:auto;bottom:0;transform:translate(-4%,42%)}
@media (max-width:900px){.hx-open__grid{grid-template-columns:1fr}.hx-open__media{max-width:520px}}
@media (max-height:520px) and (orientation:landscape){
  .hx-open__grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:24px}
  .hx-open__title{font-size:clamp(28px,8vh,40px)}
  .hx-open__meta{margin-top:8px}
  .hx-mono{display:none}
  .hx-lead{margin-top:10px;font-size:15px}
  .hx-cta{margin-top:14px}
  .hx-open__tag{margin-top:6px}
}

.hx-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(24px,5vw,96px);align-items:start}
.hx-split .chapter__title{grid-column:1/-1}
.hx-split .chapter__body{grid-column:2;margin-top:var(--gap-m)}
.hx-recolta .ghost{top:auto;bottom:0;transform:translate(-4%,30%)}
.hx-quote{margin-top:2em;text-align:right;color:var(--ink-muted)}
@media (max-width:900px){.hx-split{grid-template-columns:1fr}.hx-split .chapter__body{grid-column:1;margin-top:clamp(20px,3vh,32px)}.hx-quote{text-align:left}}

.hx-head{margin-bottom:var(--gap-m)}
.hx-head .chapter__body{max-width:56ch}
.hx-head .chapter__body{font-size:var(--fs-lede);line-height:var(--lh-lede);font-weight:300}

.hx-disc{width:112px;height:112px;border-radius:50%;object-fit:cover;flex:none;clip-path:circle(45% at 50% 50%)} /* the source discs carry a baked white ring (9% of the radius): clipped off */
.hx-disc--xl{width:clamp(220px,22vw,320px);height:auto;aspect-ratio:1}

.hx-day{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.hx-day__it{display:grid;gap:22px;align-content:start;padding-top:28px;border-top:1px solid var(--hairline)}
.hx-day__it .hx-disc{width:88px;height:88px}
.hx-day__it p{color:var(--ink-muted)}
.hx-note{margin-top:var(--gap-m);max-width:60ch}
.hx-note p{color:var(--ink-muted)}
.hx-note__small{font-size:var(--fs-small);letter-spacing:var(--track-small);text-transform:uppercase;line-height:1.5}
@media (max-width:900px){.hx-day{grid-template-columns:1fr}.hx-day__it{grid-template-columns:72px 1fr;align-items:center;gap:18px;padding-top:20px}.hx-day__it .hx-disc{width:72px;height:72px}}

.hx-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.hx-card__media{display:grid;place-items:center;aspect-ratio:auto;padding:clamp(24px,3vw,40px) 0 0}
.hx-card__media .hx-disc{width:clamp(112px,9vw,140px);height:auto;aspect-ratio:1}
.hx-card .place__title{font-size:clamp(22px,1.7vw,26px)}
@media (max-width:1000px){.hx-cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.hx-cards{grid-template-columns:1fr}.hx-card{flex-direction:row;align-items:flex-start}.hx-card__media{padding:20px 0 20px 20px}.hx-card__media .hx-disc{width:72px}}

.hx-disc-media{background:none;border-radius:50%;overflow:visible;display:grid;place-items:center}
.hx-disc-media .hx-disc--xl{width:clamp(220px,22vw,300px);height:auto} /* beats .chapter__media img (100%): the discs are 298px files, never upscaled past ~1x */
.hx-chapter--media-right>.chapter__media{order:1}
@media (max-width:860px){.hx-chapter--media-right>.chapter__media{order:0}.hx-disc-media{justify-items:start}.hx-disc-media .hx-disc--xl{width:min(56vw,240px)}}
@media (max-height:520px) and (orientation:landscape){
  .hx-chapter{grid-template-columns:auto minmax(0,1fr);gap:32px}
  .hx-chapter--media-right>.chapter__media{order:1}
  .hx-disc-media .hx-disc--xl{width:clamp(150px,34vh,190px)}
}

.hx-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.hx-col .hx-card__media{justify-items:start;padding-left:clamp(20px,2vw,28px)}
.hx-col .place__caption p+p{margin-top:.9em}
.hx-em{color:var(--cream-ink);font-weight:600;margin-top:6px}
.hx-col a{color:var(--cream-ink);text-decoration:underline;text-decoration-color:#8a4a00;text-underline-offset:3px}
.hx-col a:hover{color:#8a4a00}
@media (max-width:900px){.hx-pair{grid-template-columns:1fr}}

.hx-ticket{position:relative;overflow:hidden;max-width:880px;margin:0 auto;text-align:center}
.hx-ticket__mono{display:block;width:40px;height:auto;margin:0 auto clamp(16px,3vh,24px);filter:brightness(.42) saturate(1.8) contrast(1.3)} /* the striped copper mark reads pink on cream at full value */
.hx-ticket .chapter__title{position:relative}
.hx-ticket__p{position:relative;max-width:60ch;margin:24px auto 0}
.hx-ticket .chapter__cta{position:relative}

.hx-close .wrap{text-align:center}
.hx-mono--center{margin-left:auto;margin-right:auto}
.hx-final{max-width:none}
.hx-close__p{margin-left:auto;margin-right:auto;font-size:var(--fs-lede);line-height:var(--lh-lede);font-weight:300}

/* ---------- legal pages ---------- */
.legal{padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + clamp(16px,5vh,64px))}
.legal-grid{display:grid;grid-template-columns:minmax(0,1fr);max-width:calc(68ch + 2 * var(--gutter))}
.legal--toc .legal-grid{max-width:var(--maxw);grid-template-columns:minmax(200px,280px) minmax(0,68ch);column-gap:clamp(40px,6vw,120px);justify-content:center}
.legal-head{grid-column:1/-1;margin-bottom:var(--gap-m)}
.legal--toc .legal-head{grid-column:2}
.legal-title{font-size:var(--fs-h2);line-height:var(--lh-h2)}
.legal-toc{grid-column:1;grid-row:2;align-self:start;position:sticky;top:calc(var(--header-h) + 32px);max-height:calc(100svh - var(--header-h) - 64px);overflow:auto;padding-right:8px}
.legal-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--hairline)}
.legal-toc a{display:flex;align-items:center;min-height:44px;padding:6px 0 6px 16px;margin-left:-1px;border-left:1px solid transparent;color:var(--ink-muted);text-decoration:none;
  font-size:13px;line-height:1.35;letter-spacing:.02em;transition:color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out)}
.legal-toc a:hover{color:var(--ink)}
.legal-toc a[aria-current="true"]{color:var(--ink);border-left-color:var(--accent)}
.legal-body{grid-column:1;max-width:68ch;color:var(--ink-muted);font-size:16.5px;line-height:1.7}
.legal--toc .legal-body{grid-column:2;grid-row:2}
.legal-body h2{font-size:clamp(20px,1.7vw,26px);line-height:1.25;letter-spacing:.03em;color:var(--ink);margin:2.4em 0 .9em;scroll-margin-top:calc(var(--header-h) + 24px)}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font:600 15px/1.4 var(--font-body);letter-spacing:.06em;color:var(--ink);margin:2em 0 .7em;scroll-margin-top:calc(var(--header-h) + 24px)}
.legal-body p+p{margin-top:1em}
.legal-list{margin:1em 0;padding-left:1.3em;display:grid;gap:.6em}
.legal-list li::marker{color:var(--accent)}
.legal-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;transition:color var(--t-ui) var(--ease-out)}
.legal-body a:hover{color:var(--accent-hover)}
@media (max-width:1000px){
  .legal--toc .legal-grid{grid-template-columns:minmax(0,1fr);max-width:calc(68ch + 2 * var(--gutter))}
  .legal--toc .legal-head,.legal--toc .legal-body{grid-column:1}
  .legal-toc{display:none}
  .legal--toc .legal-body{grid-row:auto}
}
@media (max-width:700px){.legal-body{font-size:15.5px}}

/* ---------- 404 ---------- */
.nf{min-height:calc(100svh - 0px);display:grid;align-items:center;padding-top:calc(var(--header-h) + 24px)}
.nf__code{font:400 clamp(96px,18vw,240px)/.9 var(--font-display);color:var(--ink);letter-spacing:.02em}
.nf__msg{margin-top:clamp(16px,3vh,28px);font:400 var(--fs-h3)/1.3 var(--font-display);letter-spacing:.02em}
.nf .btn-row{margin-top:clamp(24px,4vh,40px)}
@media (max-height:520px) and (orientation:landscape){.nf__code{font-size:clamp(64px,24vh,110px)}}