/* ============================================================
   Imprint Magazine - main stylesheet
   Values from imprint-design-reference.md (extracted from the
   compiled Squarespace bundle, 2026-07-16).
   Font substitutions (Adobe -> Google; revised 2026-07-17 after
   Joel's review of the first build):
     minion-pro-display -> EB Garamond   (body)
     proxima-nova       -> Nunito Sans   (headings, nav, titles)
     brandon-grotesque  -> Josefin Sans  (footer, mobile menu)
        [pending: Joel wants Intervogue here, but its free version is
         personal-use only. Swap to licensed Intervogue or Jost/Poppins
         once decided.]
     Buenard            -> Buenard       (blog meta)
   Fonts are SELF-HOSTED (Phase 4, 2026-07-17): woff2 files in
   /assets/fonts/, @font-face rules in fonts.css (linked from
   base.njk before this file). No external font dependencies.
   ============================================================ */

:root {
  --font-body: 'EB Garamond', 'Minion Pro', Georgia, serif;
  --font-display: 'Nunito Sans', 'Proxima Nova', 'Helvetica Neue', Arial, sans-serif;
  --font-brand: 'Josefin Sans', 'Brandon Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-meta: 'Buenard', Georgia, serif;

  --color-text: #000;
  --color-title: #222;
  --color-secondary: #1d1d1d;
  --color-muted: rgba(29, 29, 29, 0.4);
  --color-link-hover: rgba(29, 29, 29, 0.85);
  --color-bg: #fff;

  /* One shared column: header, text, and images all align to it.
     On the live site it holds ~62% of the viewport with fixed white
     margins outside (Brine grid + spacers), capped around 1550px.
     Confirmed from screenshots at two window sizes, 2026-07-17. */
  /* widened from 70vw/1500px after Joel's review of the Pages deploy,
     2026-07-18 */
  --column: min(75vw, 1600px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  /* EB Garamond has a smaller x-height than Minion Pro Display;
     19px settled on after review (2026-07-17). */
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.6em;
}

/* ---------- Header (logo left, nav right, one row - per live site) ---------- */
.Header { background: var(--color-bg); padding: 40px 0; }
.Header-inner {
  width: var(--column);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Header-logo { width: 260px; height: auto; display: block; }
.Header-branding { display: inline-block; text-decoration: none; }
.Header-nav {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.Header-nav a {
  color: var(--color-secondary);
  text-decoration: none;
  margin-left: 18px;
  transition: color 0.15s ease-out;
}
.Header-nav a:hover { color: var(--color-muted); }
.Header-nav a.is-folder, .Header-nav span.is-folder { font-weight: 700; }
.Header-nav span.is-folder { color: var(--color-secondary); margin-left: 18px; cursor: default; }

/* Nav folder dropdowns (Squarespace Brine folder behaviour: white panel
   below the item, opens on hover/focus; item padding .382em, black text) */
.Header-nav-folder { position: relative; display: inline-block; }
.Header-nav-dropdown {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  min-width: 180px;
  padding: 14px 20px;
  background: var(--color-bg);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  text-align: left;
  visibility: hidden; opacity: 0;
  transition: opacity 0.2s ease-out;
}
.Header-nav-folder:hover .Header-nav-dropdown,
.Header-nav-folder:focus-within .Header-nav-dropdown {
  visibility: visible; opacity: 1;
}
.Header-nav-dropdown a {
  display: block;
  margin: 0;
  padding: 0.382em 0;
  font-weight: 400;
  white-space: nowrap;
  color: #000;
}

/* ---------- Mobile nav (hamburger + overlay; live-site Brine menu) ----------
   Menu items: brandon-grotesque (Josefin) 13px 700 uppercase .18em #292929,
   per the design reference's mobile values. Desktop unaffected. */

.Mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px 2px;
  background: none; border: none; cursor: pointer;
}
.Mobile-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--color-secondary);
}

.Mobile-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--color-bg);
  overflow-y: auto;
}
.Mobile-overlay-close {
  position: absolute; top: 18px; right: 20px;
  background: none; border: none; cursor: pointer;
  font-size: 34px; line-height: 1;
  color: var(--color-secondary);
}
.Mobile-overlay-panels {
  position: relative;
  padding: 90px 10vw 60px;
  overflow: hidden;
}
.Mobile-overlay-main { transition: transform 0.25s ease-out, opacity 0.25s ease-out; }
.Mobile-overlay-panels.in-folder .Mobile-overlay-main {
  transform: translateX(-12%); opacity: 0;
  pointer-events: none; position: absolute;
}
.Mobile-overlay-folder { display: none; }
.Mobile-overlay-folder.is-active { display: block; }

.Mobile-overlay-item {
  display: block; width: 100%;
  padding: 0.9em 0;
  background: none; border: none; cursor: pointer;
  text-align: left; text-decoration: none;
  font-family: var(--font-brand);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em; line-height: 1.8em;
  color: #292929;
}
.Mobile-overlay-item:hover { color: var(--color-muted); }
.Mobile-overlay-back-btn { color: var(--color-muted); }
body.nav-open { overflow: hidden; }

@media screen and (max-width: 640px) {
  .Header-nav { display: none; }
  .Mobile-toggle { display: flex; }
}
@media screen and (min-width: 641px) {
  .Mobile-overlay { display: none; }
}

/* ---------- Headings ---------- */
h1 {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em; line-height: 1.45em;
}
h2 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  letter-spacing: 0.04em; line-height: 1.6em;
}
h3 {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em; line-height: 1.4em;
}

/* ---------- Article (BlogItem) ----------
   Single column: text and figures share the same width, as on
   the live site. */
.BlogItem {
  width: var(--column);
  margin: 60px auto;
}
.BlogItem-title {
  font-family: var(--font-display);
  font-size: 42px; font-weight: 700;
  text-transform: none;
  text-align: center;
  letter-spacing: 0.01em; line-height: 1.2em;
  color: var(--color-title);
  margin: 0 0 80px;
}
/* Meta sits below the content on the live site (tweak order:6) */
.Blog-meta {
  display: flex;
  margin: 40px 0 0;
  font-family: var(--font-meta);
  font-size: 12.74px; font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-muted);
}
.Blog-meta-delimiter { padding: 0 0.5em; }
.Blog-meta-delimiter::after { content: "\2022"; }

.BlogItem-content p {
  margin: 0 0 1em;
  white-space: pre-wrap;
}
.BlogItem-content a { color: var(--color-secondary); transition: color 0.15s ease-out; }
.BlogItem-content a:hover { color: var(--color-muted); }

/* Images and captions (Squarespace [caption] blocks become <figure>) */
.BlogItem-content figure {
  margin: 2.5em 0;
  text-align: center;
}
.BlogItem-content figure > img { width: 100%; height: auto; }
.BlogItem-content img { max-width: 100%; height: auto; }
.BlogItem-content figcaption {
  font-family: var(--font-meta);
  font-size: 12.74px;
  color: var(--color-text);
  margin-top: 0.8em;
  text-align: left;
}

/* ---------- Layout classes for restoring Squarespace arrangements ----------
   Apply these in post Markdown; see scripts/convert.py notes. */

/* Inset image, text flows around it */
figure.fig-inset-right, figure.fig-inset-left {
  width: 46%;
  margin: 0.4em 0 1.2em;
}
figure.fig-inset-right { float: right; margin-left: 2.5em; }
figure.fig-inset-left  { float: left;  margin-right: 2.5em; }
figure.fig-inset-right > img, figure.fig-inset-left > img { width: 100%; }
/* clear floats at article end so footer stays below */
.BlogItem-content::after { content: ""; display: table; clear: both; }

/* Row of images side by side (2 or 3 across) */
figure.fig-row { display: flex; gap: 12px; align-items: flex-start; }
figure.fig-row > img { width: auto; flex: 1 1 0; min-width: 0; }
figure.fig-row > figcaption { flex-basis: 100%; }

/* Tall narrow pair, hung like prints: two captioned figures side by side */
.fig-pair-tall { display: flex; gap: 8%; justify-content: center; padding: 0 2%; margin: 2.5em 0; }
.fig-pair-tall > figure { flex: 0 1 46%; margin: 0; }
.fig-pair-tall > figure > img { width: 100%; }

/* Epigraph quote block (Squarespace quote-block style: brandon/Josefin,
   light, airy, small-caps source line - per extracted tweak values) */
.BlogItem-content blockquote.quote-block {
  margin: 2.5em 0;
  padding: 0;
  border: none;
  font-family: var(--font-brand);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 2em;
}
.BlogItem-content blockquote.quote-block cite {
  display: block;
  margin-top: 0.6em;
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* Smaller centred image (book covers etc.) */
figure.fig-small { max-width: 55%; margin-left: auto; margin-right: auto; }
figure.fig-small > img { width: 100%; }

/* Two-column post section: text left, image rail right (e.g. From Nothing) */
.post-columns { display: flex; gap: 4%; }
.post-columns .col-text { flex: 0 0 48%; }
.post-columns .col-images { flex: 0 0 48%; padding: 0 7%; box-sizing: border-box; }
.post-columns .col-images figure { margin: 0 0 3em; }
.post-columns .col-images img { width: 100%; }
@media screen and (max-width: 640px) {
  .post-columns { display: block; }
  figure.fig-inset-right, figure.fig-inset-left { float: none; width: 100%; margin: 2em 0; }
}

/* Inset quote block (Squarespace quote style: indented, left rule) */
.BlogItem-content blockquote {
  margin: 2em 0 2em 1.5em;
  padding-left: 1.5em;
  border-left: 2px solid rgba(29, 29, 29, 0.25);
}

/* Line element (Squarespace line block): hairline section divider */
.BlogItem-content hr {
  border: none;
  border-top: 1px solid rgba(29, 29, 29, 0.2);
  margin: 2.5em 0;
}

/* Poetry: preserve line breaks and indentation */
.BlogItem-content .poem p { white-space: pre-wrap; }

.BlogItem-footer {
  margin: 30px 0 0;
  font-family: var(--font-meta);
  font-size: 12.74px;
  color: var(--color-muted);
}
.BlogItem-footer a { color: var(--color-muted); }
.BlogItem-footer-categories a + a { margin-left: 1em; }
.BlogItem-footer-tags { float: right; }
.BlogItem-footer-tags + .BlogItem-footer-tags { margin-right: 1em; }

/* ---------- Footer ---------- */
.Footer { background: var(--color-bg); padding: 60px 5vw; }
.Footer-inner { width: var(--column); margin: 0 auto; text-align: center; }
.Footer-nav {
  font-family: var(--font-display);
  font-size: 10.2px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em; line-height: 2.2em;
}
.Footer-nav a {
  color: var(--color-secondary);
  text-decoration: none;
  margin: 0 12px;
}
.Footer-nav a:hover { color: var(--color-muted); }

/* ---------- Issue landing pages ----------
   Values from the compiled Squarespace bundle (site.css v359):
   poster overlay rgba(0,0,0,.1); poster title Buenard 3.0625vw white;
   poster subtitle proxima-nova 700 5.375vw uppercase ls .15em white
   (text-alignment-center per body tweak class); buttons medium/outline/
   rounded: 2px solid #000, transparent bg, radius 3px, padding 21px 34px,
   proxima 700 11px uppercase ls .2em, hover inverts to black/white. */

.IssuePage { width: var(--column); margin: 40px auto 60px; }

.Issue-hero { position: relative; margin: 0 0 50px; }
.Issue-hero > img { display: block; width: 100%; height: auto; }
.Issue-hero-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
}
.Issue-hero-title {
  margin: 0;
  font-family: var(--font-meta);
  font-size: 3.0625vw; font-weight: 400;
  letter-spacing: 0.01em; line-height: 1.42em;
  color: #fff;
}
.Issue-hero-subtitle {
  margin: 3% 0 0;
  font-family: var(--font-display);
  font-size: 5.375vw; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em; line-height: 1.6em;
  color: #fff;
}

/* Outline button (Squarespace medium/outline/rounded) */
.Btn {
  display: inline-block;
  margin-top: 1.5em;
  padding: 21px 34px;
  border: 2px solid #000; border-radius: 3px;
  background: transparent;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em; line-height: 1.1em;
  color: #000; text-decoration: none;
  transition: 0.1s background-color linear, 0.1s color linear;
}
a.Btn:hover { background: #000; color: #fff; }
.Btn--static { border-color: rgba(29, 29, 29, 0.4); color: var(--color-muted); cursor: default; }

/* Split intro (newer issues): cover left, intro + letter button right */
.Issue-split { display: flex; gap: 6%; align-items: flex-start; padding: 0 8%; margin: 0 0 60px; }
.Issue-split-cover { flex: 0 0 44%; }
.Issue-split-cover img { width: 100%; height: auto; display: block; }
.Issue-split-text { flex: 1 1 auto; padding-top: 1em; }

/* Centred intro (older issues): cover centred, full-width intro, letter row */
.Issue-cover--centred { margin: 0 auto 40px; width: 33%; }
.Issue-cover--centred.Issue-cover--wide { width: 66%; }
.Issue-cover--centred img { width: 100%; height: auto; display: block; }
.Issue-intro { margin-bottom: 1em; }
.Issue-intro p { margin: 0 0 1em; }

.Issue-letter { display: flex; gap: 5%; align-items: flex-start; padding: 0 8%; margin: 50px 0 60px; }
.Issue-letter-image { flex: 0 0 40%; }
.Issue-letter-image img { width: 100%; height: auto; display: block; }
.Issue-letter-text { flex: 1 1 auto; }

/* Piece rows: image col-4, text col-8, as on the mirror */
.Issue-piece { display: flex; gap: 4%; align-items: flex-start; margin: 0 0 55px; }
.Issue-piece-image { flex: 0 0 32%; }
.Issue-piece-image img {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; display: block;
}
.Issue-piece-text { flex: 1 1 auto; }
.Issue-piece-text h2, .Issue-letter-text h2 {
  margin: 0 0 0.6em;
  font-size: 22px; letter-spacing: 0.01em; line-height: 1.3em;
  color: var(--color-title);
}
.Issue-piece-text p, .Issue-letter-text p { margin: 0 0 1em; }

/* Issue team credits */
.Issue-team { margin: 80px 0 0; text-align: center; }
.Issue-team-heading h2 { margin: 0 0 1.5em; }
.Issue-team-columns { display: flex; gap: 6%; justify-content: center; text-align: center; }
.Issue-team-col { flex: 0 1 44%; }
.Issue-team-col h3 { margin: 1.2em 0 0.6em; }

@media screen and (max-width: 640px) {
  .Issue-split, .Issue-letter, .Issue-piece, .Issue-team-columns { display: block; padding: 0; }
  .Issue-split-cover, .Issue-cover--centred, .Issue-cover--centred.Issue-cover--wide { width: 100%; margin-bottom: 2em; }
  .Issue-piece-image, .Issue-letter-image { margin-bottom: 1.2em; }
  .Issue-piece { margin-bottom: 3em; }
  .Issue-hero-title { font-size: 5vw; }
  .Issue-hero-subtitle { font-size: 8vw; }
}

/* ---------- Theme pages + summary grid ----------
   Live-site summary block: autogrid, 3 per row, gutter 50px, 4:3 cropped
   thumbnails, left-aligned title + excerpt. Title/excerpt values from the
   design reference's blog-list entries. */

.ThemePage { width: var(--column); margin: 40px auto 60px; }
.Theme-intro { margin: 0 0 50px; }
.Theme-featured-heading { margin: 0 0 40px; }

.Summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
.Summary-thumb { display: block; }
.Summary-thumb img {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; display: block;
}
.Summary-title { margin: 14px 0 8px; }
.Summary-title a {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: 0.01em; line-height: 1.3em;
  color: var(--color-title); text-decoration: none;
  transition: color 0.15s ease-out;
}
.Summary-title a:hover { color: var(--color-muted); }
.Summary-excerpt p {
  margin: 0;
  font-size: 14px;
  color: var(--color-secondary);
  line-height: 1.6em;
  display: -webkit-box; -webkit-line-clamp: 5;
  -webkit-box-orient: vertical; overflow: hidden;
}

@media screen and (max-width: 900px) {
  .Summary-grid { grid-template-columns: repeat(2, 1fr); gap: 35px; }
}
@media screen and (max-width: 640px) {
  .Summary-grid { grid-template-columns: 1fr; }
}

/* ---------- Article search ---------- */

.Search { margin: -20px 0 50px; text-align: center; }
.Search-input {
  width: min(480px, 100%);
  padding: 12px 4px;
  border: none;
  border-bottom: 1px solid rgba(29, 29, 29, 0.25);
  background: transparent;
  font-family: var(--font-body);
  font-size: 19px;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-align: center;
  outline: none;
  transition: border-color 0.15s ease-out;
}
.Search-input:focus { border-bottom-color: var(--color-secondary); }
.Search-input::placeholder { color: var(--color-muted); }
.Search-status {
  margin: 14px 0 0;
  font-family: var(--font-meta);
  font-size: 12.74px;
  color: var(--color-muted);
}

/* ---------- Index pages (issues cover grid, themes banners) ---------- */

.IndexPage { width: var(--column); margin: 40px auto 60px; }
.IndexPage-title { text-align: center; margin: 0 0 60px; }

.Cover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 50px;
}
.Cover-card { display: block; text-decoration: none; text-align: center; }
.Cover-card img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
  transition: opacity 0.15s ease-out;
}
.Cover-card:hover img { opacity: 0.85; }
.Cover-card-label {
  display: block; margin-top: 18px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-title);
}
.Cover-card-date {
  display: block; margin-top: 6px;
  font-family: var(--font-meta);
  font-size: 12.74px;
  color: var(--color-muted);
}

@media screen and (max-width: 900px) {
  .Cover-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 35px; }
}
@media screen and (max-width: 640px) {
  .Cover-grid { grid-template-columns: 1fr; }
}

/* ---------- About page ---------- */

.AboutPage { width: var(--column); margin: 40px auto 60px; }
.AboutPage-title { text-align: center; margin: 0 0 50px; }
.AboutPage-banner { width: 66%; height: auto; display: block; margin: 0 auto 50px; }
.AboutPage-text { width: 66%; margin: 0 auto 70px; }
.AboutPage-text h2 { margin: 0 0 1em; }
.AboutPage-text h3 { margin: 0 0 1.2em; }
.AboutPage-text p { margin: 0 0 1em; }
@media screen and (max-width: 640px) {
  .AboutPage-text, .AboutPage-banner { width: 100%; }
}

/* ---------- Home page (Squarespace Index sections) ----------
   Image sections: min-height 70vh, background photo, white text,
   content centred (site.css v359). Buttons over images use the
   alternate (white outline) style. */

.Home-tagline {
  width: var(--column);
  margin: 0 auto;
  padding: 90px 0 70px;
  text-align: center;
}
.Home-tagline h2 { margin: 0 0 1.4em; }
.Home-tagline p {
  /* body serif italic, as on the live site (the <em> supplies the italic) */
  font-size: 18px;
  letter-spacing: 0.04em; line-height: 1.6em;
  margin: 0;
}

.Home-banner {
  position: relative;
  min-height: 70vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #a8a8a8;
  color: #fff;
}
.Home-banner--tall { min-height: 85vh; }
.Home-banner-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.Home-banner-content {
  position: relative;
  text-align: center;
  padding: 40px 8vw;
}
.Home-banner-content h1 { color: #fff; margin: 0.2em 0; }
.Home-banner-content h1 a {
  color: #fff; text-decoration: none;
  padding-bottom: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.15s ease-out, color 0.15s ease-out;
}
.Home-banner-content h1 a:hover { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.15); }
.Home-banner-kicker { margin: 0; font-size: 19px; }
.Home-banner-note { color: #fff; margin: 0.4em 0 0; }

.Btn--light { border-color: #fff; color: #fff; margin-top: 2em; }
a.Btn--light:hover { background: #fff; color: #1d1d1d; }

.Home-latest { width: var(--column); margin: 0 auto; padding: 90px 0; }
.Home-latest-heading { text-align: center; margin: 0 0 50px; }
.Home-latest-more { text-align: center; margin-top: 50px; }
.Summary-meta {
  margin: 12px 0 0;
  font-family: var(--font-meta);
  font-size: 12.74px;
  color: var(--color-muted);
}
.Summary-meta span + span::before { content: "\2022"; padding: 0 0.5em; }
.Summary-meta a { color: var(--color-muted); text-decoration: none; transition: color 0.15s ease-out; }
.Summary-meta a:hover { color: var(--color-link-hover); }
.Summary-meta + .Summary-title { margin-top: 6px; }

.Home-instagram { width: var(--column); margin: 0 auto; padding: 90px 0; text-align: center; }
.Home-instagram-kicker { margin: 0 0 0.3em; }
.Home-instagram h2 { margin: 0 0 50px; }
.Home-instagram h2 a { color: var(--color-title); text-decoration: none; transition: color 0.15s ease-out; }
.Home-instagram h2 a:hover { color: var(--color-muted); }
.Home-instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.Home-instagram-grid img {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; display: block;
}

.Home-sponsors { width: var(--column); margin: 0 auto; padding: 90px 0; text-align: center; }
.Home-sponsors-heading h3 { margin: 0 0 50px; }
.Home-sponsors-logos {
  display: flex; align-items: center; justify-content: center;
  gap: 8%;
  flex-wrap: wrap;
}
.Home-sponsors-logos img { max-width: 220px; max-height: 120px; width: auto; height: auto; }

@media screen and (max-width: 640px) {
  .Home-banner { min-height: 55vh; }
  .Home-instagram-grid { grid-template-columns: 1fr; }
  .Home-sponsors-logos { flex-direction: column; gap: 40px; }
}

/* ---------- Mobile ---------- */
@media screen and (max-width: 640px) {
  :root { --column: 88vw; }
  .BlogItem-title { font-size: 32px; }
  body { font-size: 17px; }
}