/* Max Grossman Designs — tokens from the "Organic" design system,
   retuned to the greige / dark-brown / sage palette. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');

:root {
  --color-bg: #dcdcda;
  --color-surface: #ccccc9;
  --color-text: #322a20;
  --color-on-accent: #f6f4ef;
  --color-divider: color-mix(in srgb, #322a20 15%, transparent);

  --color-accent: #6a5030;
  --color-accent-100: #efe8dc;
  --color-accent-200: #e2d6c4;
  --color-accent-300: #cbb99b;
  --color-accent-400: #a98f6a;
  --color-accent-500: #7d6242;
  --color-accent-600: #5c4429;
  --color-accent-700: #46331e;
  --color-accent-800: #322414;
  --color-accent-900: #22180d;

  --color-accent-2-100: #dde0d6;
  --color-accent-2-200: #d0d5b9;
  --color-accent-2-300: #b2bb93;
  --color-accent-2-400: #8d9968;
  --color-accent-2-500: #6f7d4a;
  --color-accent-2-600: #566237;
  --color-accent-2-700: #414c29;
  --color-accent-2-800: #2f3820;
  --color-accent-2-900: #202616;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #22180d 16%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #22180d 18%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #22180d 24%, transparent);
}

/* — base — */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.washed { filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); }

/* — markets — */
.mg-markets-sec { padding: 0 0 clamp(32px, 5vw, 56px); }
.mg-markets-sec h2 {
  font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.mg-marketlist { display: flex; flex-direction: column; gap: var(--space-3); }
.mg-market {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--space-4);
  align-items: start;
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: var(--space-4); box-shadow: var(--shadow-sm);
}
.mg-market-when {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--color-accent-100);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-2);
  font-family: var(--font-heading); line-height: 1.05;
}
.mg-market-dow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-600); }
.mg-market-day { font-size: 30px; font-weight: 800; color: var(--color-accent-800); }
.mg-market-mon { font-size: 12px; letter-spacing: .04em; color: var(--color-accent-600); }
.mg-market-what h3 { font-size: 19px; margin: 0 0 2px; }
.mg-market-what p { margin: 0 0 var(--space-2); }
.mg-market-what p:last-child { margin-bottom: 0; }
.mg-market-where {
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-accent-600); font-weight: 600;
}
.mg-market-none, .mg-market-also { margin: 0 0 var(--space-3); max-width: 62ch; }
.mg-marketlist-past .mg-market { opacity: .62; box-shadow: none; }

/* A market can carry a booth photo and its own links. Add the photo as a
   <figure class="mg-market-photo"> after the date block and put
   mg-market-featured on the article; a market without one is unaffected.
   The photo sits on white and is never cropped, so odd shapes still fit. */
.mg-market-featured { grid-template-columns: 92px minmax(220px, 30%) 1fr; }
.mg-market-photo {
  margin: 0; border-radius: var(--radius-sm); overflow: hidden;
  aspect-ratio: 16 / 9; background: #fff; box-shadow: var(--shadow-sm);
}
.mg-market-photo img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.mg-market-actions {
  display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3);
}
.mg-market-what .mg-market-actions + p { margin-top: var(--space-2); }

@media (max-width: 720px) {
  .mg-market { grid-template-columns: 68px 1fr; gap: var(--space-3); padding: var(--space-3); }
  .mg-market-day { font-size: 24px; }
}
/* Below this the three columns get too tight, so the photo goes full width
   above the date and the card falls back to the ordinary two-column layout. */
@media (max-width: 900px) {
  .mg-market-featured { grid-template-columns: 92px 1fr; }
  .mg-market-featured .mg-market-photo { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 720px) {
  .mg-market-featured { grid-template-columns: 68px 1fr; }
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: 999px;
}
.btn svg { display: block; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px;
}
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — shared page chrome (nav/footer markup lives in partials/, synced by tools/build.py) — */
.mg-kicker {
  display: block; font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 600; color: var(--color-accent-700); margin-bottom: 12px;
}
.mg-footer { border-top: 1px solid var(--color-divider); }
.mg-footrow {
  padding: 28px 0; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.mg-footname { font-family: var(--font-heading); font-size: 16px; color: var(--color-text); }

/* — layout — */
.mg-wrap { max-width: none; margin: 0; padding: 0 clamp(20px, 4vw, 72px); }
.mg-nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-divider);
}
/* The nav row is a .mg-wrap, but its own `padding` shorthand was zeroing the
   wrap's side gutter, so the mark sat hard against the screen edge at every
   width. Restate the gutter here so the logo lines up with the page content. */
.mg-navrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px clamp(20px, 4vw, 72px); }
.mg-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; flex: none; }
/* flex: none matters. The 2025 mark is far wider than it is tall, so as a
   flex item it was being shrunk to fit and squashed out of proportion --
   at phone widths it clipped to a sliver. It keeps its aspect now, and the
   sizes below make sure it actually fits rather than being crushed into place. */
.mg-logo { height: 50px; width: auto; display: block; flex: none; }
.mg-brand-text { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(17px, 2vw, 23px); color: var(--color-text); letter-spacing: -0.01em; line-height: 1.05; white-space: nowrap; }
.mg-navlinks { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 600; }
.mg-navlinks a { color: var(--color-text); text-decoration: none; }
.mg-navlinks a:hover { color: var(--color-accent-700); }
/* the "Get in touch" pill: keep the primary-button light text, not the nav-link ink */
.mg-navlinks a.btn-primary, .mg-navlinks a.btn-primary:hover { color: var(--color-on-accent); }

/* --- the nav's responsive cascade, widest first, all of it here ---
   These share a specificity with the base rules above, so order is the only
   thing separating them: a nav rule anywhere further down the sheet wins
   silently. Two used to live down in the page-layout media queries and were
   quietly cancelling this block. Keep nav sizing in this one place. */

/* The wordmark is the first thing to go: the mark is wide, and the name is
   repeated in the page itself. Then the mark steps down with the viewport. */
@media (max-width: 1140px) { .mg-brand-text { display: none; } .mg-brand { gap: 10px; } }
@media (max-width: 1140px) { .mg-logo { height: 44px; } }
/* Adding Markets made the row one link too wide, so it sheds links sooner:
   Restoration first (it has its own nav entry on desktop only), then About,
   which is an anchor on the homepage and reachable by scrolling. */
@media (max-width: 860px) { .mg-navlinks .mg-nav-wide { display: none; } }
@media (max-width: 620px) {
  .mg-navlinks { gap: 12px; font-size: 14px; }
  .mg-navlinks .mg-cta { padding: 7px 13px; white-space: nowrap; }
}
@media (max-width: 580px) { .mg-navlinks .mg-nav-narrow { display: none; } }
/* Large-phone / small-tablet step, between the desktop bar and the compact
   phone one. Without it the bar overflowed by ~14px just above 470px. */
@media (max-width: 520px) {
  .mg-navlinks { gap: 10px; font-size: 13px; }
  .mg-navlinks .mg-cta { padding: 6px 11px; font-size: 13px; }
  .mg-logo { height: 36px; }
}
/* One compact row on a phone. The bar is sticky, so its height is worth more
   than a large mark: 51px here against 85px for a wrapped two-row bar.
   The pill needs its own font-size: .btn sets one directly on the element, so
   it does not inherit the smaller size set on .mg-navlinks. */
@media (max-width: 470px) {
  .mg-navrow { gap: 10px; }
  /* Archivo arrives with font-display: swap, so the bar is measured in the
     fallback face first -- wider on some systems. Letting the links wrap
     inside their own box means that moment costs a taller bar for an instant,
     never a page that scrolls sideways. */
  .mg-navlinks { gap: 7px; font-size: 12px; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .mg-navlinks .mg-cta { padding: 6px 8px; font-size: 12px; }
  .mg-logo { height: 28px; }
}
/* The last squeeze before wrapping: a smaller mark and tighter link spacing
   buy about 20px, which is what keeps 340-389px on one line. */
@media (max-width: 389px) {
  .mg-navlinks { gap: 6px; }
  .mg-navlinks .mg-cta { padding: 6px 7px; }
  .mg-logo { height: 24px; }
}
/* At 339px and below even a 24px mark, three links and the pill will not
   share a line. Rather than hide navigation or crush the mark, the row wraps:
   brand above, links beneath. Nothing is lost and nothing is distorted. */
@media (max-width: 339px) {
  .mg-navrow { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; padding-block: 8px; }
  .mg-navlinks { width: 100%; justify-content: flex-start; flex-wrap: wrap; row-gap: 8px; }
  .mg-logo { height: 32px; }
}
.mg-hero {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(48px, 7vw, 88px) 0;
}
.mg-workgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.mg-about {
  display: grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.mg-shoprow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mg-restore {
  display: grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(24px, 3.5vw, 48px);
  margin: 0 0 clamp(48px, 7vw, 80px);
  background: var(--color-accent-100);
  border-radius: var(--radius-lg);
}
.mg-restore figure { aspect-ratio: 3/2; }
.mg-card { display: block; text-decoration: none; color: inherit; }
.mg-card figure { transition: transform .25s ease; }
.mg-card:hover figure { transform: translateY(-4px); }
.mg-card:hover h3 { color: var(--color-accent-700); }
.mg-cardfig {
  margin: 0 0 16px; border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 4/3; box-shadow: var(--shadow-sm); background: #fff;
}
.mg-cardfig img { width: 100%; height: 100%; object-fit: contain; }
.mg-cardrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mg-cardrow h3 { font-size: 23px; margin: 0; transition: color .2s ease; }
.mg-carddesc {
  margin: 7px 0 0; font-size: 14.5px; line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.mg-shopcard { background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.mg-shopcard figure { overflow: hidden; background: #fff; }
.mg-shopcard img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.mg-shopcard-row { padding: 15px 18px; display: flex; align-items: baseline; justify-content: space-between; }
.mg-shopcard-row h3 { font-size: 19px; margin: 0; transition: color .2s ease; }

/* — image slots: replace each .img-slot div with a real <img> when photos are ready — */
.img-slot {
  width: 100%; height: 100%; display: grid; place-items: center;
  padding: var(--space-4); text-align: center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--color-text) 4%, transparent) 14px 28px),
    var(--color-surface);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 13px; line-height: 1.5;
}

/* — forest-green About band — */
.mg-forest { background: #2f4736; color: #eef2ea; }
.mg-forest .mg-kicker { color: #a9c6a1; }
.mg-forest h2 { color: #f4f7f1; }
.mg-forest p { color: color-mix(in srgb, #eef2ea 86%, transparent); }
.mg-forest .img-slot { background:
  repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, #ffffff 8%, transparent) 14px 28px),
  color-mix(in srgb, #ffffff 10%, transparent);
  color: color-mix(in srgb, #eef2ea 70%, transparent); }

/* — Instagram feed — */
.mg-ig-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.mg-iggrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mg-iggrid a { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.mg-iggrid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease, filter .3s ease; }
.mg-iggrid a:hover img { transform: scale(1.05); filter: brightness(1.05); }
@media (max-width: 900px) { .mg-iggrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .mg-iggrid { grid-template-columns: repeat(2, 1fr); } }

/* — shop index — */
.mg-shopcat { padding: clamp(20px, 3vw, 36px) 0; }
.mg-shopcat + .mg-shopcat { border-top: 1px solid var(--color-divider); }
.mg-shopcat > h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 20px; }
.mg-shopgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.mg-prod { display: block; text-decoration: none; color: inherit; }
.mg-prod figure { margin: 0 0 12px; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1; background: #fff; box-shadow: var(--shadow-sm); }
.mg-prod img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .25s ease; }
.mg-prod:hover img { transform: translateY(-4px); }
.mg-prod:hover .mg-prod-name { color: var(--color-accent-700); }
.mg-prod-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mg-prod-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; margin: 0; transition: color .2s ease; }
.mg-price { font-weight: 700; font-size: 15px; white-space: nowrap; }
@media (max-width: 900px) { .mg-shopgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .mg-shopgrid { grid-template-columns: repeat(2, 1fr); } }

/* — product page — */
.mg-product { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 56px); align-items: start; padding: clamp(20px, 3vw, 36px) 0 clamp(40px, 6vw, 64px); }
.mg-product h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; margin: 0; }
.mg-desc { font-size: 16px; line-height: 1.65; margin: 0 0 4px; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.mg-wrap > .mg-backlink { margin-top: 22px; }
.mg-product-feature { margin: 0 0 14px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1; background: #fff; box-shadow: var(--shadow-md); }
.mg-product-feature img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mg-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.mg-thumbs figure { margin: 0; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; background: #fff; box-shadow: var(--shadow-sm); }
.mg-thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mg-buybox .mg-price-lg { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px; margin: 6px 0 18px; }
.mg-variant { margin: 0 0 16px; max-width: 320px; }
.mg-variant label { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.mg-buybox select.input { width: 100%; }
.btn-buy { font-size: 15px; padding: 12px 26px; }
.mg-buy-note { font-size: 13px; margin-top: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
@media (max-width: 760px) { .mg-product { grid-template-columns: 1fr; } }

/* — forms (contact page + product option selects) — */
.input {
  width: 100%; font: inherit; color: var(--color-text);
  background: #fff; border: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
textarea.input { resize: vertical; min-height: 130px; }
.mg-form { max-width: 560px; }
.mg-field { margin: 0 0 16px; }
.mg-field label {
  display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 6px; color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.mg-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mg-field-hint { font-size: 13px; margin: -8px 0 16px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.mg-field-error { font-size: 14px; font-weight: 600; margin: 0 0 14px; color: #8c2f1b; }
@media (max-width: 620px) { .mg-field-pair { grid-template-columns: 1fr; gap: 0; } }

/* — photo viewer (lightbox.js) — */
.mg-zoomable { cursor: zoom-in; }
.mg-zoomable:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.mg-lb {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(6px, 2vw, 22px); padding: clamp(14px, 3vw, 40px);
  background: color-mix(in srgb, #22180d 92%, transparent);
  backdrop-filter: blur(4px);
}
.mg-lb[hidden] { display: none; }
.mg-lb-stage {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: 0; max-width: min(1200px, 100%); max-height: 100%;
}
.mg-lb-img {
  max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius-md);
  background: #fff; box-shadow: var(--shadow-lg);
}
.mg-lb-cap {
  display: flex; gap: 14px; align-items: baseline; justify-content: center;
  flex-wrap: wrap; text-align: center; font-size: 14px;
  color: color-mix(in srgb, #f6f4ef 82%, transparent);
}
.mg-lb-count { font-variant-numeric: tabular-nums; opacity: .7; white-space: nowrap; }
.mg-lb-btn {
  flex: none; width: 46px; height: 46px; padding: 0; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  font-family: var(--font-body); font-size: 26px; line-height: 1; color: #f6f4ef;
  border: 1px solid color-mix(in srgb, #f6f4ef 30%, transparent);
  background: color-mix(in srgb, #f6f4ef 10%, transparent);
}
.mg-lb-btn:hover { background: color-mix(in srgb, #f6f4ef 22%, transparent); }
.mg-lb-btn[hidden] { display: none; }
.mg-lb-close {
  position: absolute; top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px);
  font-size: 24px;
}
@media (max-width: 620px) {
  /* put the arrows under the photo so they don't squeeze it */
  .mg-lb-btn { width: 42px; height: 42px; }
  .mg-lb-prev, .mg-lb-next { position: absolute; bottom: clamp(14px, 4vw, 28px); }
  .mg-lb-prev { left: 22px; }
  .mg-lb-next { right: 22px; }
  .mg-lb-img { max-height: calc(100vh - 200px); }
}

/* — portfolio (category) pages — */
.mg-pagehero { padding: clamp(36px, 6vw, 72px) 0 clamp(20px, 3vw, 36px); max-width: 62ch; }
.mg-pagehero h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.04; margin: 0 0 18px; letter-spacing: -.02em; }
.mg-pagehero > p { font-size: 17px; line-height: 1.65; margin: 0; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.mg-backlink { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--color-accent-700); text-decoration: none; margin-bottom: 22px; }
.mg-backlink:hover { color: var(--color-accent-900); }
.mg-piece { padding: clamp(24px, 4vw, 44px) 0; border-top: 1px solid var(--color-divider); }
.mg-piece-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.mg-piece-head h2 { font-size: clamp(24px, 3vw, 32px); margin: 0; }
.mg-piece p { font-size: 16px; line-height: 1.65; max-width: 60ch; margin: 0 0 22px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.mg-feature { margin: 0 0 18px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/2; box-shadow: var(--shadow-md); background: #fff; }
/* for sections whose photos are tall phone shots — keeps them from
   pillarboxing inside landscape frames */
.mg-feature-tall { aspect-ratio: 3/4; max-width: 420px; margin-inline: auto; }
.mg-gallery.mg-gallery-tall figure { aspect-ratio: 3/4; }
.mg-feature img, .mg-gallery img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mg-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.mg-gallery figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); background: #fff; transition: transform .25s ease; }
.mg-gallery figure:hover { transform: translateY(-4px); }

@media (max-width: 900px) {
  .mg-hero { grid-template-columns: 1fr; }
  .mg-hero figure { order: -1; }
  .mg-workgrid { grid-template-columns: repeat(2, 1fr); }
  .mg-about { grid-template-columns: 1fr; }
  .mg-about figure { max-width: 320px; }
  .mg-restore { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .mg-workgrid { grid-template-columns: 1fr; }
  .mg-shoprow { grid-template-columns: 1fr; }
  .mg-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}