@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/bodoni-moda-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/bodoni-moda-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/bodoni-moda-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 300; font-display: swap; src: url("/assets/fonts/hanken-grotesk-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/hanken-grotesk-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
:root {
  --bg-light-base: #faf5f3;
  --fg-light-base-body: #2a1b1f;
  --fg-light-base-heading: #2a1b1f;
  --fg-light-base-muted: #6b4f55;
  --fg-light-base-link: #8f5149;
  --fg-light-base-inverse: #2a1b1f;
  --bg-light-card: #f2e2de;
  --fg-light-card-body: #2a1b1f;
  --fg-light-card-heading: #2a1b1f;
  --fg-light-card-muted: #6b4f55;
  --fg-light-card-link: #8f5149;
  --fg-light-card-inverse: #2a1b1f;
  --bg-light-elevated: #fffcfb;
  --fg-light-elevated-body: #2a1b1f;
  --fg-light-elevated-heading: #2a1b1f;
  --fg-light-elevated-muted: #6b4f55;
  --fg-light-elevated-link: #8f5149;
  --fg-light-elevated-inverse: #2a1b1f;
  --brand-light-accent: #8f5149;
  --brand-light-accent-hover: #6c3a33;
  --brand-light-on-accent: #fffcfb;
  --focus-light-ring: #8f5149;
  --border-light-default: #937069;
  --border-light-subtle: #e4cfca;
}
.bg-surface-base { background: var(--bg-light-base); --fg-body: var(--fg-light-base-body); --fg-heading: var(--fg-light-base-heading); --fg-muted: var(--fg-light-base-muted); --fg-link: var(--fg-light-base-link); --fg-inverse: var(--fg-light-base-inverse); }
.bg-surface-card { background: var(--bg-light-card); --fg-body: var(--fg-light-card-body); --fg-heading: var(--fg-light-card-heading); --fg-muted: var(--fg-light-card-muted); --fg-link: var(--fg-light-card-link); --fg-inverse: var(--fg-light-card-inverse); }
.bg-surface-elevated { background: var(--bg-light-elevated); --fg-body: var(--fg-light-elevated-body); --fg-heading: var(--fg-light-elevated-heading); --fg-muted: var(--fg-light-elevated-muted); --fg-link: var(--fg-light-elevated-link); --fg-inverse: var(--fg-light-elevated-inverse); }
.text-role-body { color: var(--fg-body); overflow-wrap: anywhere; }
.text-role-heading { color: var(--fg-heading); overflow-wrap: anywhere; }
.text-role-muted { color: var(--fg-muted); }
.text-role-link { color: var(--fg-link); }
.text-role-inverse { color: var(--fg-inverse); }
.text-role-link { text-decoration: underline; }
.text-role-link:hover { color: var(--brand-light-accent-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus-light-ring); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
.site-logo { max-width: 100%; height: auto; }
.site-menu > summary { list-style: none; cursor: pointer; }
.site-menu > summary::-webkit-details-marker { display: none; }
:where(section[data-section][style]) { background-size: cover; background-position: center; padding: clamp(1.5rem, 4vw, 3rem); }
:where(section[data-section][style] > .bg-surface-card) { padding: clamp(1rem, 3vw, 2rem); }
:where(section[data-section][style] > .bg-surface-card > :first-child) { margin-top: 0; }
:where(section[data-section][style] > .bg-surface-card > :last-child) { margin-bottom: 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: static; padding: 0.25rem 0.5rem; outline: 2px solid var(--focus-light-ring); }

/* Luxe beauty magazine: Bodoni Moda display over light Hanken Grotesk,
   blush and porcelain grounds, rose-gold hairlines, split cover layouts. */

:root {
  --gl-didone: 'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif;
  --gl-grotesk: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --gl-porcelain: var(--bg-light-base);
  --gl-blush: var(--bg-light-card);
  --gl-gloss: var(--bg-light-elevated);
  --gl-rose: var(--brand-light-accent);
  --gl-rose-deep: var(--brand-light-accent-hover);
  --gl-hair: 1px solid var(--border-light-subtle);
  --gl-rosehair: 1px solid var(--brand-light-accent);
  --gl-edge: clamp(1rem, 4.5vw, 4rem);
  --gl-text: 36rem;
  --gl-skin:
    radial-gradient(140% 90% at 82% 12%, rgba(255, 252, 251, 0.96) 0%, rgba(255, 252, 251, 0) 38%),
    radial-gradient(70% 60% at 18% 78%, rgba(143, 81, 73, 0.32) 0%, rgba(143, 81, 73, 0) 62%),
    radial-gradient(45% 35% at 60% 52%, rgba(255, 252, 251, 0.55) 0%, rgba(255, 252, 251, 0) 70%),
    repeating-radial-gradient(circle at 40% 60%, rgba(147, 112, 105, 0.06) 0 2px, rgba(147, 112, 105, 0) 2px 7px),
    linear-gradient(200deg, var(--bg-light-elevated) 0%, var(--bg-light-card) 46%, #e6c6be 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--gl-grotesk);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--gl-didone); font-weight: 400; }

p, ul, ol, figure, blockquote { margin: 0; }

a.text-role-link { text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

a:focus-visible,
summary:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus-light-ring);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--gl-edge);
  top: 0.5rem;
  z-index: 20;
  padding: 0.5rem 1rem;
  background: var(--gl-gloss);
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

.gl-run { flex: 1 0 auto; }

/* ---------- Header: nameplate with inline links at desktop and pocket menu below ---------- */

.gl-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--gl-porcelain);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem var(--gl-edge);
  border-bottom: var(--gl-rosehair);
}

.gl-nameplate {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  margin-right: auto;
  text-decoration: none;
}

.gl-nameplate svg { width: 1.75rem; height: 2.4rem; flex-shrink: 0; }

.gl-nameplate-text {
  font-family: var(--gl-didone);
  font-size: clamp(1.05rem, 2.3vw, 1.3rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  max-width: 15ch;
}

.gl-head .site-nav { display: none; }

.gl-head .site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gl-head .site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.gl-head .site-nav a:hover { border-bottom-color: var(--gl-rose); }

.gl-pocket { flex-shrink: 0; }

.gl-pocket .site-menu > summary {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 400;
  list-style: none;
  cursor: pointer;
}

.gl-pocket .site-menu > summary::-webkit-details-marker { display: none; }

.gl-pocket .menu-icon {
  display: inline-block;
  width: 1.4rem;
  height: 7px;
  border-top: var(--gl-rosehair);
  border-bottom: var(--gl-rosehair);
}

.gl-pocket .site-menu[open] .menu-icon { height: 1px; border-bottom: 0; }

.gl-pocket .site-menu > ul {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0;
  padding: 0.5rem var(--gl-edge) 1.25rem;
  list-style: none;
  background: var(--gl-porcelain);
  border-bottom: var(--gl-rosehair);
  max-height: calc(100vh - 100%);
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
}

.gl-pocket .site-menu > ul li + li { border-top: var(--gl-hair); }

.gl-pocket .site-menu > ul a {
  display: block;
  padding: 0.8rem 0;
  font-family: var(--gl-didone);
  font-size: 1.35rem;
  line-height: 1.25;
  text-decoration: none;
}

@media (min-width: 72rem) {
  .gl-head .site-nav { display: block; }
  .gl-pocket { display: none; }
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs { padding: 1.1rem var(--gl-edge) 0; }

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.breadcrumbs li + li::before { content: "/"; margin-right: 0.55rem; color: var(--gl-rose); }

/* ---------- Shared body pieces ---------- */

.gl-cover-run p,
.gl-front-run p,
.gl-spread-run p,
.gl-letter-run p,
.gl-enquiry-run p,
.gl-sendoff-run p,
.gl-missing-run p { margin-bottom: 1.1em; }

.gl-run main ul:not(.gl-cover-list):not(.gl-strip),
.gl-run main ol { padding-left: 1.15rem; margin-bottom: 1.3em; }

.gl-run main li { margin-bottom: 0.5em; }

.gl-cover-run ul > li::marker,
.gl-front-run ul > li::marker,
.gl-spread-run ul > li::marker,
.gl-letter-run ul > li::marker,
.gl-enquiry-run ul > li::marker { color: var(--gl-rose); }

.gl-run main h2 {
  font-size: clamp(1.55rem, 3.4vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 2.6rem 0 1rem;
}

.gl-run main h3 { font-size: 1.3rem; line-height: 1.2; margin: 1.8rem 0 0.5rem; }

.gl-run main figure.photo-hero img,
.gl-run main figure.photo-inline img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gl-run main figure.photo-inline { margin: 2.25rem 0; }

.gl-run main figure.photo-inline img { aspect-ratio: 4 / 3; }

.gl-run main section[data-section] {
  margin: 2.5rem calc(var(--gl-edge) * -1);
  padding: clamp(3rem, 10vw, 7.5rem) var(--gl-edge);
}

.gl-run main section[data-section] > .bg-surface-card {
  max-width: 34rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-top: var(--gl-rosehair);
}

.gl-run main section[data-section] h2 { margin-top: 0; }

.gl-run main section[data-section] ul { padding-left: 1.15rem; }

.table-scroll { max-width: 100%; overflow-x: auto; margin: 1.5rem 0; }

.table-scroll table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }

.table-scroll th,
.table-scroll td { text-align: left; vertical-align: top; padding: 0.6rem 0.9rem 0.6rem 0; border-bottom: var(--gl-hair); }

.table-scroll th { font-family: var(--gl-didone); font-weight: 500; }

/* ---------- Home: magazine cover ---------- */

.gl-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 var(--gl-edge) clamp(3rem, 8vw, 6rem);
}

.gl-cover-run { display: contents; }

.gl-cover-run > * { max-width: var(--gl-text); }

.gl-cover-type { padding: clamp(2rem, 6vw, 4rem) 0 2.5rem; }

.gl-cover-title h1 {
  font-family: var(--gl-didone);
  font-weight: 400;
  font-size: clamp(2.9rem, 8.4vw, 6.75rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  max-width: 11ch;
  text-wrap: balance;
}

.gl-cover-list { margin-top: 1.75rem; padding-top: 0.2rem; border-top: var(--gl-rosehair); max-width: 28rem; }

.gl-cover-list .display-line {
  padding: 0.75rem 0;
  border-bottom: var(--gl-hair);
  font-size: 1.125rem;
  line-height: 1.5;
}

.gl-cover-swatch,
.gl-cover-run > .photo-hero {
  min-height: 20rem;
  margin: 0 calc(var(--gl-edge) * -1) 2.5rem;
}

.gl-cover-swatch { background: var(--gl-skin); }

.gl-cover:has(.photo-hero) .gl-cover-swatch { display: none; }

.gl-cover-run > .photo-hero img { min-height: 20rem; }

.gl-cover-run > h2 { padding-top: 1rem; border-top: var(--gl-rosehair); }

/* ---------- Topic hub: section front ---------- */

.gl-front {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.75rem, 5vw, 3.5rem) var(--gl-edge) clamp(3rem, 8vw, 6rem);
}

.gl-front-run { display: contents; }

.gl-front-run > * { max-width: var(--gl-text); }

.gl-front-title h1 {
  font-size: clamp(2.5rem, 7vw, 5.25rem);
  line-height: 1;
  letter-spacing: -0.025em;
  max-width: 13ch;
  text-wrap: balance;
  padding-bottom: 2rem;
}

.gl-front-swatch {
  min-height: 14rem;
  margin: 0 calc(var(--gl-edge) * -1) 2rem;
  background: var(--gl-skin);
  background-position: 30% 70%;
}

.gl-front:has(.photo-hero) .gl-front-swatch { display: none; }

.gl-front-run > .photo-hero { margin: 0 calc(var(--gl-edge) * -1) 2rem; max-width: none; }

.gl-front-run > .photo-hero img { aspect-ratio: 4 / 3; }

.gl-front-tiles { margin: 0 calc(var(--gl-edge) * -1) 2.5rem; padding: 0 var(--gl-edge); }

.gl-front-tiles ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gl-front-tiles li { border-bottom: var(--gl-hair); }

.gl-front-tiles li:last-child { border-bottom: 0; }

.gl-front-tiles a {
  display: block;
  padding: 1.35rem 0;
  font-family: var(--gl-didone);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.2;
  text-decoration: none;
}

.gl-front-tiles a:hover { text-decoration: underline; }

/* ---------- Article: feature spread ---------- */

.gl-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.75rem, 5vw, 3.5rem) var(--gl-edge) clamp(3rem, 8vw, 6rem);
}

.gl-spread-run { display: contents; }

.gl-spread-run > * { max-width: var(--gl-text); }

.gl-spread-title h1 {
  font-size: clamp(2.3rem, 6.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 17ch;
  text-wrap: balance;
  padding-bottom: 2rem;
}

.gl-spread-run > .photo-hero {
  max-width: none;
  margin: 0 calc(var(--gl-edge) * -1) 2.5rem;
}

.gl-spread-run > .photo-hero img { aspect-ratio: 16 / 9; }

.gl-spread-run > p:first-of-type { font-size: 1.2rem; line-height: 1.65; }

.gl-spread-run > p:first-of-type::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  font-family: var(--gl-didone);
  font-size: 4.4em;
  line-height: 0.82;
  color: var(--gl-rose);
}

.gl-spread-run > h2 { padding-left: 1rem; border-left: var(--gl-rosehair); }

.gl-spread-run > figure.photo-inline {
  max-width: none;
  margin-left: calc(var(--gl-edge) * -1);
  margin-right: calc(var(--gl-edge) * -1);
}

.gl-spread-run > figure.photo-inline img { aspect-ratio: 21 / 9; }

.gl-spread-run > blockquote {
  margin: 2rem 0;
  padding-left: 1.25rem;
  border-left: var(--gl-rosehair);
  font-family: var(--gl-didone);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.35;
}

/* ---------- About: letter page ---------- */

.gl-letter { padding: clamp(2rem, 6vw, 5rem) var(--gl-edge); }

.gl-letter-frame {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3.5rem);
  border: var(--gl-rosehair);
}

.gl-letter-title h1 {
  font-size: clamp(2.3rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  margin-bottom: 2.25rem;
}

.gl-letter-run { font-size: 1.15rem; line-height: 1.75; }

.gl-letter-run > .photo-hero { margin: 0 auto 2.25rem; max-width: 22rem; }

.gl-letter-run > .photo-hero img { aspect-ratio: 3 / 4; border-radius: 11rem 11rem 0 0; }

.gl-letter-run h2 { text-align: center; }

/* ---------- Contact: enquiry card ---------- */

.gl-enquiry { padding: clamp(1.75rem, 5vw, 3.5rem) var(--gl-edge) clamp(3rem, 8vw, 6rem); }

.gl-enquiry-title h1 {
  font-size: clamp(2.3rem, 6.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 14ch;
  margin-bottom: 2rem;
}

.gl-enquiry-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: var(--gl-hair);
  max-width: 64rem;
}

.gl-enquiry-swatch { min-height: 9rem; background: var(--gl-skin); background-position: 70% 20%; }

.gl-enquiry-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.gl-field { display: grid; gap: 0.35rem; }

.gl-field label { font-family: var(--gl-didone); font-size: 1.15rem; }

.gl-field input,
.gl-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0;
  font: inherit;
  font-weight: 400;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-light-default);
  border-radius: 0;
}

.gl-field textarea { resize: vertical; }

.gl-send {
  justify-self: start;
  min-height: 48px;
  padding: 0 2.25rem;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: transparent;
  border: 1px solid var(--gl-rose);
  border-radius: 0;
  cursor: pointer;
}

.gl-send:hover { border-color: var(--gl-rose-deep); box-shadow: inset 0 -3px 0 var(--gl-rose); }

.gl-enquiry-run { max-width: var(--gl-text); margin-top: clamp(2.5rem, 6vw, 4rem); }

/* ---------- Thank you and not found ---------- */

.gl-sendoff,
.gl-missing {
  padding: clamp(3rem, 9vw, 7rem) var(--gl-edge) clamp(3rem, 8vw, 6rem);
  text-align: center;
}

.gl-sendoff-title h1,
.gl-missing-title h1 {
  font-size: clamp(2.6rem, 7.5vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.gl-flourish {
  position: relative;
  width: 9rem;
  height: 1px;
  margin: 2rem auto;
  background: var(--gl-rose);
}

.gl-flourish::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--gl-porcelain);
  border: var(--gl-rosehair);
  transform: translate(-50%, -50%) rotate(45deg);
}

.gl-sendoff-run,
.gl-missing-run { max-width: var(--gl-text); margin: 0 auto; text-align: left; }

.gl-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 64rem;
  margin: 3rem auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.gl-strip-tile { display: grid; grid-template-rows: 9rem auto; }

.gl-strip-tile::before { content: ""; background: var(--gl-skin); }

.gl-strip-tile--a::before { background-position: 10% 80%; }

.gl-strip-tile--b::before { background-position: 85% 15%; }

.gl-strip-tile--c::before { background-position: 50% 50%; }

.gl-strip-tile a {
  display: block;
  padding: 1rem 1.1rem 1.25rem;
  font-family: var(--gl-didone);
  font-size: 1.2rem;
  line-height: 1.25;
  text-decoration: none;
  border-top: var(--gl-rosehair);
}

.gl-strip-tile a:hover { text-decoration: underline; }

/* ---------- Footer: line first, oversized nameplate last ---------- */

.gl-sign {
  display: grid;
  gap: 1.75rem;
  padding: clamp(2.5rem, 7vw, 5rem) var(--gl-edge) clamp(1.5rem, 4vw, 2.5rem);
  border-top: var(--gl-rosehair);
}

.gl-sign-say { font-size: 1.125rem; max-width: 24rem; }

.gl-sign-name {
  font-family: var(--gl-didone);
  font-size: clamp(2.6rem, 9vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  max-width: 14ch;
}

/* ---------- Wide screens: the asymmetric splits ---------- */

@media (min-width: 48rem) {
  .gl-enquiry-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .gl-field--wide,
  .gl-send { grid-column: 1 / -1; }
  .gl-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gl-front-tiles ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .gl-front-tiles li:first-child { grid-column: 1 / -1; }
  .gl-front-tiles li:first-child a { font-size: clamp(1.8rem, 3.6vw, 2.6rem); padding: 2rem 0; }
}

@media (min-width: 62rem) {
  .gl-cover,
  .gl-front,
  .gl-spread {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 2.4vw, 2.5rem);
  }

  /* Home: cropped image bleeds off the left edge, cover type on the right. */
  .gl-cover-swatch,
  .gl-cover-run > .photo-hero {
    grid-column: 1 / 6;
    grid-row: 1 / span 2;
    min-height: 40rem;
    max-width: none;
    margin: 0 0 3rem calc(var(--gl-edge) * -1);
  }

  .gl-cover-run > .photo-hero img { min-height: 40rem; }

  .gl-cover-type { grid-column: 7 / 13; grid-row: 1; align-self: end; padding-top: 4rem; }

  .gl-cover-run > * { grid-column: 7 / 13; }

  .gl-cover-run > h2 { grid-column: 1 / 6; margin-top: 2.6rem; }

  /* Hub: title left, texture right, tiles across, text column after. */
  .gl-front-title { grid-column: 1 / 8; grid-row: 1; align-self: end; }

  .gl-front-swatch,
  .gl-front-run > .photo-hero {
    grid-column: 8 / 13;
    grid-row: 1;
    min-height: 22rem;
    margin: 0 calc(var(--gl-edge) * -1) 2.5rem 0;
  }

  .gl-front-run > .photo-hero img { aspect-ratio: auto; min-height: 22rem; }

  .gl-front-tiles { grid-column: 1 / 13; grid-row: 2; }

  .gl-front-tiles ul { grid-template-columns: 2fr 1fr 1fr; }

  .gl-front-tiles li { border-bottom: 0; border-left: var(--gl-hair); padding-left: 1.5rem; }

  .gl-front-tiles li:first-child { grid-column: auto; border-left: 0; padding-left: 0; }

  .gl-front-tiles li:first-child a { padding: 2.25rem 0; }

  .gl-front-tiles a { padding: 2.25rem 0; }

  .gl-front-run > * { grid-column: 3 / 10; }

  .gl-front-run > figure.photo-inline { grid-column: 6 / 13; max-width: none; margin-right: calc(var(--gl-edge) * -1); }

  .gl-front-run > section[data-section] { grid-column: 1 / 13; max-width: none; }

  /* Article: wide title, full-bleed crop, narrow text with hanging pull quotes. */
  .gl-spread-title { grid-column: 2 / 12; }

  .gl-spread-run > * { grid-column: 4 / 10; }

  .gl-spread-run > .photo-hero,
  .gl-spread-run > figure.photo-inline,
  .gl-spread-run > section[data-section] { grid-column: 1 / 13; }

  .gl-spread-run > figure.photo-inline:nth-of-type(even) { grid-column: 4 / 13; margin-left: 0; }

  .gl-spread-run > blockquote { grid-column: 9 / 13; margin-top: 0; }

  /* Contact: texture crop beside the form. */
  .gl-enquiry-card { grid-template-columns: 2fr 3fr; }
  .gl-enquiry-swatch { min-height: 100%; }
  .gl-enquiry-run { margin-left: 40%; }

  /* Footer: line at right, nameplate across the bottom. */
  .gl-sign { grid-template-columns: 1fr auto; align-items: end; }
  .gl-sign-say { grid-column: 2; grid-row: 1; text-align: right; }
  .gl-sign-name { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}