/* =============================================================
   MAGAZINE — fashion editorial. Oversized condensed display set
   tight, full-bleed imagery, black and bone with one hot accent,
   and content that slides in from the side like a spread turning.
   ============================================================= */
:root{
  --canvas:#f2f0eb; --canvas-soft:#e7e4dd; --canvas-sink:#dcd8cf; --surface:#f2f0eb;
  --surface-alt:#dcd8cf; --surface-dark:#0d0d0d; --surface-dark-soft:#1a1a1a;
  --ink:#0d0d0d; --ink-muted:#42403c; --ink-faint:#8a867e;
  --on-dark:#f2f0eb; --on-dark-muted:#b3afa6; --on-primary:#f2f0eb;
  --primary:#0d0d0d; --primary-active:#000; --secondary:#e8352e; --accent:#e8352e;
  --hairline:#0d0d0d; --hairline-soft:#c6c2b9; --divider:rgba(13,13,13,.2);
  --font-display:'Oswald','Archivo Black','Arial Narrow',sans-serif;
  --font-body:'Inter',Helvetica,Arial,sans-serif;
  --display-case:uppercase; --display-tracking:-.03em;
  --radius-sm:0; --radius-md:0; --radius-lg:0; --radius-full:0; --border-w:1px;
  --shadow-sm:none; --shadow-lg:none;
  --shadow-md:none; --shadow-xl:none;
  --card:var(--surface); --card-ink:var(--ink); --card-ink-muted:var(--ink-muted);
  --card-ink-faint:var(--ink-faint); --card-line:var(--hairline);
  --card-soft:rgba(13,13,13,.06); --card-accent:var(--accent);
  --card-pastel-bg:rgba(232,53,46,.10); --card-pastel-ink:var(--accent);
  --pastel-bg:rgba(232,53,46,.10); --pastel-ink:var(--accent);
}

*{ border-radius:0 !important; box-shadow:none !important; }
/* one deliberate exception: the portrait stays rounded */
.guide__photo, .guide__photo img{ border-radius:22px !important; overflow:hidden; }

.h-xl{ font-size:clamp(34px,9.4vw,140px); font-weight:700; line-height:.84;
  letter-spacing:-.045em; overflow-wrap:normal; hyphens:none; }
.h-lg{ font-size:clamp(30px,7vw,86px); font-weight:700; line-height:.9; letter-spacing:-.04em; }
h1,h2,h3{ font-family:var(--font-display); text-transform:uppercase; }
.puzzle-cell h3, .method h3, .principle h3, .format-card h3{
  font-family:var(--font-display); font-size:clamp(22px,2.6vw,34px); line-height:.95; letter-spacing:-.02em;
}
.eyebrow{ font-family:var(--font-body); font-size:10.5px; letter-spacing:.3em; color:var(--accent); }

/* the hero becomes a cover: type over a full-bleed frame */
.hero{ background:var(--ink) !important; color:var(--on-dark) !important;
  clip-path:none !important; padding-bottom:0; text-align:left; overflow:hidden; }
.hero__inner{ max-width:1240px; margin:0 auto; padding:0 24px; }
.hero__frame{ max-width:none; margin:40px 0 0; padding:0; }
.hero__frame .frame{ aspect-ratio:21/7; }
.hero__frame .frame img{ filter:contrast(1.06) saturate(1.04); }
.hero__sub{ max-width:none; margin-left:0; font-size:16px; letter-spacing:.02em; }

/* panels lose their walls; a rule and a number carry the hierarchy */
.puzzle-cell, .principle, .method, .service-card, .excursion{
  background:transparent !important; border:0 !important;
  border-top:2px solid var(--ink) !important; padding:26px 0 34px;
}
/* The four format cards keep their own fills: Pulse, Clutch, Echo and
   Unbound are the brand's semantic colour code and must not be flattened
   by a theme, or the text turns light-on-light and disappears. */
.format-card{ padding:38px; }
.puzzle-cell:hover h3, .service-card:hover h4{ color:var(--accent); }
.puzzle-grid, .puzzle-row{ gap:0 40px; }
.principles, .methods-grid{ grid-template-columns:repeat(2,1fr); gap:0 40px; }
.formats{ grid-template-columns:1fr 1fr; gap:0 40px; }
.guide{ grid-template-columns:minmax(288px,396px) 1fr; gap:48px; align-items:start; }
.frame img, .service-card__media img{ filter:contrast(1.05); transition:filter .5s ease; }
.frame:hover img, .service-card:hover img{ filter:contrast(1.1) saturate(1.08); }

.btn{ background:var(--ink) !important; color:var(--canvas) !important; border:0 !important;
  text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; font-weight:700; padding:16px 26px !important; }
.btn--ghost{ background:transparent !important; color:var(--on-dark) !important;
  border:1px solid currentColor !important; }
.btn:hover{ background:var(--accent) !important; color:var(--canvas) !important; }
.badge{ background:transparent !important; border:1px solid currentColor !important; letter-spacing:.16em; }

/* motion: the spread slides in from the gutter */
.reveal{ opacity:0; transform:translateX(-26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.section{ padding:110px 0; }

/* Mobile: the rules above restate grids the base stylesheet already
   collapses at these widths. Because a theme loads after the page, an
   unconditional grid here would beat the base media query and keep two
   columns on a phone — which is what stranded the guide blocks in the
   right-hand half. Every grid this theme touches is repeated below. */
@media (max-width:840px){
  .guide{ grid-template-columns:1fr !important; }
  .guide__photo{ max-width:360px; }
}
@media (max-width:820px){
  .formats{ grid-template-columns:1fr !important; }
}
@media (max-width:900px){
  .methods-grid{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width:980px){
  .principles{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width:560px){
  .principles, .methods-grid{ grid-template-columns:1fr !important; }
  .guide__facts{ grid-template-columns:1fr !important; }
}
@media (max-width:760px){
  .field-exp{ grid-template-columns:1fr !important; }
}