/* Mare project page — folder-tab intro over a full-bleed photo, then a rounded bento grid.
   Type follows the site system: Haas Display Bold + IvyPresto italic accents (<em>), Haas Text for small copy. */
/* Grid spacing: 2.5px between photos, photos edge to edge; the intro card keeps the site side margin (--side). Was: one gap at the
   screen edges; card corners ≈4px. --r stays large for the folder card only. */
.mare{--ink:#141414;--paper:#d7d2cb;--tab:#1c1c1c;--r:22px;--gap:2.5px;--pad:var(--side,8px);--card-r:4px;background:#000;color:#e6e6e6}

/* ---- hero ---- */
.mare-hero{position:relative;height:74svh;min-height:520px;overflow:hidden}
.mare-hero img,.mare-hero video{width:100%;height:100%;object-fit:cover;display:block}
.mare-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 30%)}

/* ---- intro card: a plain light card with the same 4px corners as the photo cards (folder tab removed 2026-10-20) ---- */
.mare-folder{position:relative;z-index:2;margin:-92px var(--pad) 0}
.mare-folder__back{height:calc(64px + var(--r));background:var(--tab);border-radius:var(--r) var(--r) 0 0;
  padding:0 20px;display:flex;align-items:flex-start}
.mare-folder__label{margin-top:22px;font-family:"neue-haas-grotesk-text",sans-serif;font-weight:500;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#e9e6e1}
.mare-folder__panel{position:relative;margin-top:calc(-1 * var(--r));background:var(--paper);color:var(--ink);
  border-radius:var(--r) 0 var(--r) var(--r);padding:44px 20px 22px}
.mare-folder__panel::before{ /* raised right-hand tab */
  content:"";position:absolute;bottom:calc(100% - 1px);right:0;width:52%;height:37px;background:var(--paper);
  border-radius:var(--r) var(--r) 0 0}
.mare-folder__panel::after{ /* concave fillet where the raised tab meets the lower edge */
  content:"";position:absolute;top:calc(-1 * var(--r) + 1px);right:calc(52% - 1px);width:var(--r);height:var(--r);
  background:radial-gradient(circle at 0 0,transparent calc(var(--r) - .5px),var(--paper) var(--r))}
.mare-kicker{font-family:"neue-haas-grotesk-text",sans-serif;font-size:15px;line-height:1.3;color:#3d3a36;margin:0 0 72px}
.mare-title{font-family:"neue-haas-grotesk-display",sans-serif;font-weight:600;font-size:40px;line-height:.95;
  letter-spacing:-.02em;text-transform:uppercase;margin:0 0 64px;color:var(--ink)}
.mare-title em{font-family:"ivypresto-display",serif;font-weight:400;font-style:italic;letter-spacing:0;font-size:1.05em}
.mare-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  font-family:"neue-haas-grotesk-text",sans-serif;font-weight:700;font-size:9.5px;line-height:1.5;letter-spacing:.16em;
  text-transform:uppercase;color:#2a2826}
.mare-meta span:last-child{text-align:right}

/* ---- bento grid ---- */
.mare-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:0;   /* photos run full width (user, 2026-10-21) */
  margin-top:var(--gap)}
.mare-card{position:relative;margin:0;border-radius:var(--card-r);overflow:hidden;background:#111;aspect-ratio:2/3}
.mare-card--wide{grid-column:1/-1;aspect-ratio:3/2}
.mare-card--tall{grid-column:1/-1;aspect-ratio:4/5}
.mare-card img{width:100%;height:100%;object-fit:cover;display:block}
.mare-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 18px;text-align:center;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
.mare-card__label{display:block;font-family:"neue-haas-grotesk-text",sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.75;margin-bottom:6px}
.mare-card__title{display:block;font-family:"neue-haas-grotesk-display",sans-serif;font-weight:700;font-size:22px;
  line-height:1.05;letter-spacing:-.01em;word-spacing:.06em}
.mare-card__title em{font-size:1.05em;line-height:0}

/* ---- end CTA ---- */
.mare-end{padding:40px 16px 72px;text-align:center}
.mare-pill{display:inline-block;padding:11px 22px;border-radius:999px;background:#fff;color:#000;text-decoration:none;
  font-family:"neue-haas-grotesk-text",sans-serif;font-weight:500;font-size:13px;letter-spacing:.02em}

/* ---- reveal on scroll (opacity/translate only; skipped for reduced motion) ---- */
.mare [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.mare [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .mare [data-reveal],.mare-card img{opacity:1;transform:none;transition:none}
}

/* Intro card simplified (user, 2026-10-20): no folder tab, no meta rows; same 4px corners as the photo cards */
.mare-folder__back,.mare-folder__panel::before,.mare-folder__panel::after,.mare-meta{display:none}
.mare-folder__panel{margin-top:0;border-radius:var(--card-r);padding:28px 20px 30px}
.mare-kicker{margin-bottom:48px}
.mare-title{margin-bottom:0}

/* Intro text styled after the user's reference ("A digital studio that creates meaning."): sentence-case headline
   in Haas Display, then two calm grey paragraphs in Haas Text (2026-10-20). Replaces the uppercase title + kicker. */
.mare-folder__panel{padding:26px 20px 28px}
.mare-title{text-transform:none;font-size:34px;line-height:1.02;letter-spacing:-.025em;word-spacing:.04em;margin:0 0 18px}
.mare-title em{font-size:1.04em}
.mare-body p{margin:0 0 12px;font-family:"neue-haas-grotesk-text",sans-serif;font-weight:400;font-size:15px;line-height:1.45;
  color:#77736d;letter-spacing:-.003em}
.mare-body p:last-child{margin-bottom:0}

/* Starter pages (no gallery yet): a little more air under the intro card before the button */
.mare-folder+.mare-end{padding-top:28px}



/* Stacked intro (Nama, Gabriel 2026-11-05): CLIENT NAME / rule / service / rule / description */
.mare-title.mare-title--name{text-transform:uppercase;font-size:34px;line-height:1;letter-spacing:-2px;margin:0 0 18px}
.mare-rule{border:0;border-top:1px solid rgba(20,20,20,.22);margin:0}
.mare-service{margin:0;padding:12px 0;font-family:"neue-haas-grotesk-text",sans-serif;font-weight:500;font-size:15px;line-height:1.3;color:var(--ink)}
.mare-rule+.mare-service+.mare-rule{margin-bottom:18px}
html body .mare .mare-folder__panel .mare-title--name{color:#141414!important}
/* Intro card on pages with their own gallery layout (Croyds, Sophia Cafe, Personal work — Gabriel 11/05): same hero + card as Nama */
.mare.mare-intro{padding-bottom:28px}
.mare-folder__panel>.mare-rule:last-child{margin-bottom:0}