/* ════════════════════════════════════════════════════════════════
   Gallery v2 — ARCHETYPES-NEWS.CSS
   Premium light-shell News index (.news2) + 5 archetypes
   (.narch-1..5). Re-skinned per .sys-N. Category accents come from
   site.css product colors (physical=janus / search=caposeo / market=ls).
   ════════════════════════════════════════════════════════════════ */

.news2{background:var(--paper);color:var(--ink)}

/* ───────── masthead ───────── */
.nhero{position:relative;max-width:1200px;margin:0 auto;padding:clamp(118px,17vh,196px) clamp(20px,6vw,80px) clamp(34px,4vw,52px)}
.nhero .eyebrow{margin-bottom:18px}
.nhero h1{font-family:var(--disp);font-weight:800;line-height:1.04;letter-spacing:-.035em;font-size:clamp(2.4rem,1.7rem + 3.2vw,3.8rem);max-width:16ch;margin:0}
.nhero h1 .accent{color:var(--accent-light)}
.nhero-sub{font-size:var(--step-2);line-height:1.6;color:var(--ink-soft);max-width:56ch;margin:18px 0 28px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
  background:var(--paper2);border:1px solid var(--hairline);border-radius:999px;padding:8px 15px;cursor:pointer;
  transition:color .18s,border-color .18s,background .18s,transform .15s}
.chip:hover{color:var(--ink);border-color:var(--hairline-strong)}
.chip.on{color:#fff;background:var(--ink);border-color:var(--ink)}

/* ───────── grid + cards ───────── */
.nsec{padding-top:clamp(20px,3vw,36px)}
.lead-wrap{margin-bottom:var(--s-5)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.story{display:flex;flex-direction:column;background:var(--paper2);border:1px solid var(--hairline);border-radius:var(--r-bezel);
  overflow:hidden;text-decoration:none;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.story:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--hairline-strong)}
.story-img{position:relative;overflow:hidden;background:var(--paper3);aspect-ratio:16/9}
.story-img img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s var(--ease)}
.story:hover .story-img img{transform:scale(1.04)}
.story-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.story-meta{display:flex;align-items:center;gap:10px;margin-bottom:13px;flex-wrap:wrap}
.ctag{font-family:var(--mono);font-size:10px;letter-spacing:1.1px;text-transform:uppercase;padding:4px 9px;border-radius:6px;flex:none}
.ctag.physical{color:var(--janus);background:rgba(255,90,31,.09);border:1px solid rgba(255,90,31,.22)}
.ctag.search{color:var(--caposeo-lift);background:rgba(47,95,208,.08);border:1px solid rgba(47,95,208,.2)}
.ctag.market{color:#1f9d57;background:rgba(51,209,122,.1);border:1px solid rgba(51,209,122,.26)}
.cdate,.cread{font-family:var(--mono);font-size:11px;letter-spacing:.4px;color:var(--muted)}
.cread{margin-left:auto}
.lead-flag{font-family:var(--mono);font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:var(--accent-light);
  background:color-mix(in srgb,var(--accent-light) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent-light) 24%,transparent);
  border-radius:6px;padding:4px 9px;margin-left:8px}
.story-title{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.26;letter-spacing:-.015em;color:var(--ink);margin-bottom:10px;transition:color .2s}
.story:hover .story-title{color:var(--accent-light)}
.story-ex{font-size:13.5px;line-height:1.62;color:var(--ink-soft);flex:1}
.story-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline)}
.story-author{font-family:var(--mono);font-size:11.5px;letter-spacing:.3px;color:var(--muted)}
.story-arrow{width:30px;height:30px;border-radius:50%;border:1px solid var(--hairline-strong);display:grid;place-items:center;color:var(--ink-soft);flex:none;transition:.2s}
.story:hover .story-arrow{border-color:var(--accent-light);color:var(--accent-light);background:color-mix(in srgb,var(--accent-light) 8%,transparent)}

/* lead (full-width horizontal) */
.story.lead{display:grid;grid-template-columns:1.12fr 1fr;align-items:stretch;box-shadow:var(--shadow-md)}
.story.lead .story-img{aspect-ratio:auto;height:100%;min-height:280px}
.story.lead .story-body{padding:clamp(24px,3vw,40px)}
.story.lead .story-title{font-size:clamp(22px,2.4vw,30px);line-height:1.14;margin-bottom:14px}
.story.lead .story-ex{font-size:15px}
/* featured span-2 (horizontal) */
.story.feat{grid-column:span 2;flex-direction:row}
.story.feat .story-img{width:46%;aspect-ratio:auto;flex:none}
.story.feat .story-title{font-size:19px}

/* ───────── briefings strip ───────── */
.briefings{margin-top:clamp(40px,5vw,64px);background:var(--paper2);border:1px solid var(--hairline);border-radius:var(--r-bezel);
  padding:clamp(26px,3vw,40px);box-shadow:var(--shadow-sm)}
.briefings-head{margin-bottom:18px}
.briefings-head .eyebrow{margin-bottom:10px}
.briefings-head h3{font-family:var(--disp);font-weight:700;font-size:var(--step-3);letter-spacing:-.018em;color:var(--ink)}
.brief-list{list-style:none}
.brief-list li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:14px 0;border-top:1px solid var(--hairline)}
.brief-list li:first-child{border-top:0}
.brief-t{font-size:15px;line-height:1.5;color:var(--ink);font-weight:500}
.brief-m{font-family:var(--mono);font-size:11px;letter-spacing:.4px;color:var(--muted);white-space:nowrap;flex:none}

/* ───────── dispatch / newsletter capture (reuses house demo atoms) ───────── */
.dispatch{margin-top:clamp(40px,5vw,64px)}
.dispatch-card{position:relative;max-width:680px;margin:0 auto;border-radius:26px;padding:clamp(30px,4vw,52px);text-align:left;
  background:linear-gradient(150deg,#fff,rgba(241,239,234,.72));border:1px solid var(--hairline);box-shadow:var(--shadow-lg),var(--inset-hi)}
.dispatch-card h2{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.08;color:var(--ink);font-size:var(--step-4);margin:16px 0 10px}

/* ════════ ARCHETYPES ════════ */
/* narch-1 · Broadsheet (base): left masthead, full lead, 3-up index */

/* narch-2 · Magazine Bento — dense asymmetric, lead+feat emphasized */
.narch-2 .news-grid{grid-auto-flow:dense}
.narch-2 .story:nth-child(4){grid-row:span 2}
.narch-2 .story:nth-child(4) .story-img{aspect-ratio:4/5}
.narch-2 .story.feat .story-title{font-size:21px}
@media(max-width:900px){.narch-2 .story:nth-child(4){grid-row:auto}.narch-2 .story:nth-child(4) .story-img{aspect-ratio:16/9}}

/* narch-3 · Centered Index — centered masthead + centered lead stack */
.narch-3 .nhero{text-align:center}
.narch-3 .nhero h1{max-width:20ch;margin:0 auto}
.narch-3 .nhero-sub{margin-left:auto;margin-right:auto}
.narch-3 .chips{justify-content:center}
.narch-3 .story.lead{grid-template-columns:1fr}
.narch-3 .story.lead .story-img{min-height:340px}
.narch-3 .story.lead .story-body{text-align:center;align-items:center}
.narch-3 .story.lead .story-ex{max-width:60ch}

/* narch-4 · Z-Axis Cascade — story cards tilt + lift */
.narch-4 .news-grid{gap:clamp(20px,2.4vw,32px)}
.narch-4 .story{box-shadow:var(--shadow-md)}
.narch-4 .news-grid > .story:nth-child(3n+1){transform:rotate(-.9deg)}
.narch-4 .news-grid > .story:nth-child(3n){transform:rotate(.9deg)}
.narch-4 .news-grid > .story:hover{transform:translateY(-6px) rotate(0);z-index:3}
@media(max-width:900px){.narch-4 .news-grid > .story,.narch-4 .news-grid > .story:nth-child(n){transform:none}}

/* narch-5 · Soft Structural — airy, big titles, very soft cards */
.narch-5 .nhero h1{font-weight:800;letter-spacing:-.042em;font-size:clamp(2.6rem,1.7rem + 3.8vw,4.2rem)}
.narch-5 .news-grid{gap:clamp(24px,3vw,38px)}
.narch-5 .story{background:var(--paper);box-shadow:0 2px 10px rgba(17,21,28,.04),0 26px 60px rgba(17,21,28,.07);border-color:var(--hairline-2)}
.narch-5 .story-title{font-size:18.5px}
.narch-5 .story:hover{transform:translateY(-8px)}

/* ───────── responsive ───────── */
@media(max-width:900px){
  .news-grid{grid-template-columns:1fr 1fr}
  .story.lead{grid-template-columns:1fr}
  .story.lead .story-img{min-height:220px}
  .story.feat{grid-column:span 2;flex-direction:column}
  .story.feat .story-img{width:100%;aspect-ratio:16/9}
}
@media(max-width:600px){
  .news-grid{grid-template-columns:1fr}
  .story.feat{grid-column:span 1}
  .brief-list li{flex-direction:column;gap:4px}
  .brief-m{align-self:flex-start}
}