/* Shared page rhythm and section headings */
.reader-page, .home-page {
  --section-gap: clamp(38px, 4.8vw, 72px);
  --gutter: clamp(22px, 4vw, 64px);
  --rail: minmax(0, .82fr) minmax(0, 1.65fr);
}
.reader-page {
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(100px, 8vw, 126px) var(--pad) 0;
}
.reader-page :is(section, form, #contact-details) { scroll-margin-top: 86px; }
.reader-page .masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--gutter);
  padding: 0 0 var(--section-gap);
}
.reader-page .masthead h1 {
  margin: 0;
  font-size: clamp(40px, 5.35vw, 80px);
  line-height: 1.04;
  overflow-wrap: break-word;
}
.reader-page .masthead .lede {
  max-width: 48ch;
  margin: 0;
  font-size: clamp(16px, 1.24vw, 19px);
  line-height: 1.58;
}
.reader-page > section { border-top: 1px solid var(--hair-strong); padding: var(--section-gap) 0; }
.section-heading { font-size: clamp(26px, 2.8vw, 42px); line-height: 1.12; letter-spacing: -.035em; }
.section-kicker { margin-bottom: 16px; }
.reader-page :is(.layout-gallery, .layout-calendar) > .section-heading { margin-bottom: clamp(20px, 2.4vw, 36px); }
.reader-page .bigline, .reader-page .cta .big { font-size: clamp(27px, 3.25vw, 50px); line-height: 1.1; }
.reader-page :is(.cols2, .cols3, .rail-body, .guide, form, .fld, .contact-layout) > * { min-width: 0; }
.reader-page :is(h2, h3, summary, .sk, .cta-link), .home-page .row { overflow-wrap: break-word; }
.layout-rail, .layout-article, .layout-design-services, .contact-layout {
  display: grid; grid-template-columns: var(--rail); gap: var(--gutter); align-items: start;
}
.reader-page .spec .srow { grid-template-columns: minmax(8em, .65fr) minmax(0, 1.7fr); gap: 16px; }
.reader-page .spec .sk { font-size: 12px; font-weight: 600; letter-spacing: .045em; opacity: .85; }
.reader-page .acc summary { font-size: clamp(17px, 1.55vw, 23px); text-transform: none; line-height: 1.3; }
.reader-page .acc-body, .reader-page .guide p, .reader-page .guide li { font-size: 15px; }
.reader-page .guide li { display: block; padding: 14px 0; }
.reader-page .guide li::before { content: none; }
.reader-page .note-strip {
  padding: 2px 0 2px 16px; border: 0; border-left: 2px solid var(--hair-strong);
  max-width: 76ch; font-size: 13px;
}
.reader-page .layout-cta { padding-block: clamp(32px, 4vw, 64px); }
.reader-page .cta { border: 0; align-items: center; }
.reader-page .cta .big { padding: 0; }
.reader-page .cta-link { margin: 0; font-size: clamp(13px, 1.3vw, 19px); letter-spacing: .08em; padding-bottom: 5px; }
.reader-page .card h3 { text-transform: none; font-size: clamp(20px, 1.85vw, 27px); line-height: 1.2; margin-top: 0; }
.reader-page .card p { font-size: 15px; line-height: 1.65; }
.reader-page .card .chip { margin: 0 0 14px; }
.reader-page .layout-partner-fit > .bigline { margin-bottom: 14px; }
.reader-page .layout-partner-fit > p:not(.section-kicker) { margin-bottom: 28px; }
.reader-page .btn, .home-page .btn { white-space: normal; letter-spacing: .12em; }
.reader-page :is(a, summary, button):focus-visible, .home-page :is(a, button):focus-visible {
  outline: 2px solid var(--italic-ink); outline-offset: 3px;
}

/* Photographs keep their aspect ratio and captions stay in the normal flow. */
.reader-page .imgband { align-self: start; }
.reader-page .imgband img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.reader-page .sample-crop { overflow: hidden; aspect-ratio: 3 / 4; }
.reader-page .imgband figcaption, .reader-page figcaption.cc-head { gap: 4px 14px; flex-wrap: wrap; }
.reader-page .imgband figcaption .label, .reader-page figcaption.cc-head .label { font-size: 11px; letter-spacing: .08em; }
.reader-page .catcard .cc-head { gap: 10px; }
.reader-page .catcard:focus-visible h3 { text-decoration: underline; }

/* Catalogue controls and editorial disclosure rows */
.layout-browse .filters { border: 0; flex-direction: column; gap: 8px; padding: 0; }
.layout-browse .fgroup { display: grid; grid-template-columns: 7rem minmax(0,1fr); }
.layout-browse .filter-options { display: flex; flex-wrap: wrap; gap: 4px; }
.layout-browse .fbtn { letter-spacing: .09em; font-size: 12px; padding: 8px 12px; opacity: .85; }
.layout-browse .fbtn.on { color: var(--paper); background: var(--ink); opacity: 1; text-decoration: none; }
.layout-disclosure .supplement > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; font-size: clamp(18px, 2vw, 26px); font-weight: 600; }
.supplement summary::-webkit-details-marker { display: none; }
.supplement summary .sign { color: var(--italic-ink); font-size: 24px; font-weight: 400; }
.supplement[open] .sign { transform: rotate(45deg); }
.supplement[open] > summary { margin-bottom: 24px; }
.reader-page .layout-disclosure { padding-block: clamp(20px, 2vw, 32px); }
.visit-plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); list-style: none; margin-top: 28px; }
.visit-plan li { padding-top: 14px; border-top: 1px solid var(--hair); }
.visit-plan strong { font-size: 16px; }
.visit-plan p { font-size: 14px; line-height: 1.6; margin-top: 6px; }
.layout-calendar .evt { grid-template-columns: minmax(6.5rem, .7fr) minmax(0, 1.8fr) auto; gap: 8px 18px; padding-block: 14px; }
.layout-calendar .evt .n { font-size: clamp(16px, 1.35vw, 21px); line-height: 1.35; text-transform: none; }
.layout-calendar .evt .s { justify-self: end; opacity: 1; }
.event-groups .evt:last-child { border-bottom: 0; }
.event-groups .icsbtn { margin: 0; min-height: 24px; font-size: 11px; letter-spacing: .08em; }
.reader-page .rows .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 20px; align-items: start; }
.reader-page #process .row { grid-template-columns: 2ch minmax(0, 1fr) minmax(0, 1fr); }
.reader-page .row .bigline { font-size: clamp(17px, 1.6vw, 24px); text-transform: none; }
.reader-page .row .tag { font-size: 14px; text-transform: none; letter-spacing: 0; opacity: .8; }

/* Showroom visit and event calendar */
.reader-page .layout-visit { border-top: 0; padding-top: 0; }
.visit-feature {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center; gap: var(--gutter);
}
.visit-copy h1 { font-size: clamp(40px, 5.35vw, 80px); line-height: 1.04; overflow-wrap: break-word; }
.visit-copy .visit-description { max-width: 49ch; margin: 20px 0 24px; font-size: clamp(16px, 1.24vw, 19px); }
.layout-calendar { display: grid; grid-template-columns: var(--rail); align-items: start; gap: var(--gutter); }
.event-groups { min-width: 0; }
.home-page .edit-grid figcaption { overflow-wrap: anywhere; hyphens: auto; }

/* Forms */
.contact-layout { grid-template-areas: "intro form" "meta form"; grid-template-rows: auto 1fr; row-gap: 32px; }
.contact-intro { grid-area: intro; }
.contact-meta { grid-area: meta; }
.contact-meta h3 { font-size: 20px; margin-bottom: 12px; }
.contact-layout > form { grid-area: form; }
.reader-page .layout-form > .cols2, .home-page #enquiry > .cols2 { grid-template-columns: var(--rail); gap: var(--gutter); }
.reader-page .f-grid, .home-page .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(16px, 2vw, 32px); }
.reader-page .fld, .home-page .fld { min-width: 0; }
.reader-page .draft-out, .home-page .draft-out { overflow-wrap: anywhere; }
.reader-page .fld :focus-visible, .home-page .fld :focus-visible { outline: 2px solid var(--italic-ink); outline-offset: 2px; }

/* Homepage sections below the campaign image */
.home-page > section:not(.hero, .band) { max-width: 1440px; padding: var(--section-gap) var(--pad); margin-inline: auto; }
.home-page .section-heading { margin-bottom: clamp(20px, 2.4vw, 36px); }
.home-page #enquiry { border-top: 1px solid var(--hair-strong); }
.home-page .row { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; padding-block: 18px; }
.home-page .row .name { font-size: clamp(24px, 2.8vw, 42px); }
.home-page .row .tag { grid-column: 1; font-size: 12px; letter-spacing: .06em; }
.home-page .row .arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.home-page .duo h3 { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.15; text-transform: none; }
.home-page .duo p { font-size: 15px; max-width: 52ch; }

@media (max-width: 900px) {
  .reader-page .sample-lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reader-page .masthead { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .reader-page .masthead .lede { max-width: 65ch; }
  .layout-rail, .layout-article, .layout-design-services, .layout-calendar, .contact-layout,
  .reader-page .layout-form > .cols2, .home-page #enquiry > .cols2 {
    grid-template-columns: minmax(0, 1fr); gap: 22px;
  }
  .contact-layout { grid-template-areas: "intro" "form" "meta"; grid-template-rows: auto; }
  .reader-page .cta { align-items: start; gap: 16px; }
  .reader-page .evt { grid-template-columns: minmax(7rem, .55fr) minmax(0, 1.5fr); }
  .reader-page .evt .s { grid-column: 2; justify-self: start; text-align: left; }
  .reader-page .visit-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .visit-feature, .reader-page .sample-lineup { grid-template-columns: minmax(0, 1fr); }
  .reader-page .sample-lineup .catcard { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 18px; align-items: center; }
  .reader-page .sample-lineup .cc-head { border: 0; padding: 0; margin: 0; }
  .reader-page { padding-top: 92px; }
  .reader-page .masthead h1 { font-size: clamp(34px, 8.8vw, 52px); }
  .reader-page .f-grid, .home-page .f-grid, .reader-page .spec .srow,
  .reader-page .evt, .reader-page .visit-plan { grid-template-columns: minmax(0, 1fr); }
  .reader-page .spec .srow, .reader-page .evt { gap: 5px; }
  .reader-page .evt .s { grid-column: 1; }
  .layout-browse .fgroup { grid-template-columns: minmax(0, 1fr); }
  .layout-browse .fgroup + .fgroup { margin-top: 8px; }
  .layout-browse .fbtn { padding: 8px 10px; }
  .reader-page .range-cards .catcard h3 { font-size: 17px; }
  .reader-page .rows .row, .reader-page #process .row { display: block; }
  .reader-page .row .tag { display: block; margin-top: 5px; }
  .reader-page #process .row .no { display: inline; margin-right: 8px; }
  .home-page .section-heading { font-size: 28px; }
}

.layout-browse .pitem { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .layout-browse .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}