/* ===== MNERVA — shared design system (editorial redesign) ===== */
:root{
  --warm:#FFFFFF; --paper:#FFFFFF;
  --ink:#17181A;            /* near-black dark sections */
  --navy:#0A1B2E;           /* deep navy */
  --forest:#0C3D33;         /* deep green */
  --emerald:#0E8C6B;        /* vivid green (buttons) */
  --emerald-dk:#0B6E54;
  --teal:#2C8A74;           /* accent text (reality/trust) */
  --copper:#C15A25;         /* copper/orange accent + filter active */
  --copper-soft:#C0763A;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--warm);color:var(--ink);
     -webkit-font-smoothing:antialiased;font-weight:400;line-height:1.5}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* serif display (Playfair italic) */
.disp{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;line-height:1.02;letter-spacing:-.01em}
.disp-r{font-family:'Playfair Display',Georgia,serif;font-weight:500}
.sans-tight{letter-spacing:-.02em}

/* big faint numeral behind cards */
.num{font-family:'Playfair Display',Georgia,serif;font-weight:500;line-height:1;pointer-events:none;user-select:none}

/* quote mark */
.qmark{font-family:'Playfair Display',serif;font-style:italic;color:var(--copper)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 2rem;font-family:'Playfair Display',serif;
     font-style:italic;font-size:1.15rem;background:var(--emerald);color:#fff;transition:background .2s}
.btn:hover{background:var(--emerald-dk)}
.btn-copper{background:var(--copper)}
.btn-copper:hover{background:#a2481b}
.btn-outline{background:transparent;color:var(--ink);border:1px solid rgba(0,0,0,.45)}
.btn-outline:hover{background:rgba(0,0,0,.05)}

/* link with arrow underline */
.ulink{border-bottom:1px solid rgba(0,0,0,.35);padding-bottom:2px;transition:border-color .2s,color .2s}
.ulink:hover{color:var(--copper);border-color:var(--copper)}
.on-dark .ulink,.ulink.on-dark{border-color:rgba(255,255,255,.4)}

/* eyebrow chip label */
.eyebrow{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600}

/* filter chips */
.chip{padding:.5rem 1.1rem;border:1px solid rgba(0,0,0,.18);font-size:.95rem;font-weight:500;border-radius:2px;
      background:transparent;color:var(--ink);cursor:pointer;transition:.15s;white-space:nowrap}
.chip:hover{border-color:var(--copper)}
.chip.active{background:var(--copper);border-color:var(--copper);color:#fff}

/* masonry via columns */
.masonry{column-gap:1.5rem}
.masonry>*{break-inside:avoid;margin-bottom:1.5rem}

/* card expand icon */
.exp{width:34px;height:34px;display:grid;place-items:center;background:var(--emerald);color:#fff;border-radius:4px;flex:none}

/* decorative motif column (tiled Mnerva mark) */
.motif{background:currentColor;-webkit-mask:url('mnerva-mark.svg') repeat;mask:url('mnerva-mark.svg') repeat;
       -webkit-mask-size:46px 46px;mask-size:46px 46px}

/* reveal — content stays visible by default (never hidden if JS/scroll observer doesn't fire).
   A subtle one-time load fade is applied via .anim, added by JS after paint. */
.reveal{opacity:1;transform:none}
.anim .reveal{opacity:0;transform:translateY(16px);animation:mnv-in .7s ease forwards}
@keyframes mnv-in{to{opacity:1;transform:none}}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.07)}
.nav a.navlink{font-size:.95rem;color:#3a3b3d;transition:color .2s}
.nav a.navlink:hover,.nav a.navlink.active{color:var(--ink)}
.nav a.navlink.active{text-decoration:underline;text-underline-offset:6px}

/* footer */
.foot a:hover{color:var(--copper)}

/* ===== mobile adaptations (per Mobile design PDFs) ===== */
/* horizontal swipe carousel on small screens; grid again from lg up */
@media (max-width:1023px){
  .m-scroll{display:flex !important;overflow-x:auto !important;scroll-snap-type:x mandatory;
            gap:1rem !important;padding-bottom:1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .m-scroll::-webkit-scrollbar{display:none}
  .m-scroll>*{flex:0 0 80% !important;max-width:80%;scroll-snap-align:start;min-width:0}
}
/* footer: stacked full-width links with dividers on mobile */
@media (max-width:767px){
  .foot nav{flex-direction:column !important;align-items:stretch !important;gap:0 !important}
  .foot nav span{display:none}
  .foot nav a{display:block;padding:.85rem 0;border-top:1px solid rgba(0,0,0,.08);font-size:1rem}
}