:root { container-type: inline-size; }

/* Keep the masthead controls in the reading column while the surface spans the page. */
body[class] > :is(.catalog-top, .openline-mast, .transit-wayfinding, .forge-entry,
  .rainbow-gateway, .storybook-library-door, .matsuri-entrance, .quiet-header, .plain-navigation,
  .glide-departure, .shore-header, .contour-masthead, .memo-header, .radiant-header,
  .hedge-header, .drafting-header, .nest-header, .plinth-header, .module-header, .filament-header,
  .channel-header, .margin-header, .stitch-header, .foundation-header, .reflection-header,
  .score-header, .material-header, .bearing-header, .bough-header, .typeset-header,
  .weft-header, .angle-header, .kindling-header, .longitude-header, .depth-header,
  .gild-header, .inlet-bar, .voussoir-portal, .sundeck-sunbar, .tributary-header,
  .specimen-station, .conservatory-gate, .coil-header, .ridge-header) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--site-content-edge);
  box-shadow: inset 0 -1px color-mix(in srgb, currentColor 16%, transparent);
}
body > :is(.grain-fixed-top, .pace-top) { width: 100%; max-width: none; }
.catalog-home > .catalog-top { background: var(--paper); }

/* Former 100vw covers included the scrollbar, shifting their artwork and content. */
body[class] main :is(.groove-listening-table, .orrery-frontispiece, .openline-front-page,
  .transit-departure, .forge-workbench, .wind-introduction, .skyrail-opening-frame,
  .rainbow-welcome, .forward-introduction, .brief-workspace, .storybook-prologue,
  .night-console, .matsuri-market-hall, .pelagic-first-current, .comic-opening,
  .airpost-postcard, .level-welcome, .module-stage, .reflection-arrival,
  .bearing-arrival, .bough-arrival, .typeset-cover-sheet, .angle-opening, .longitude-opening,
  .gild-arrival, .voussoir-foundation, .sundeck-welcome, .tributary-source, .specimen-opening,
  .outlook-arrival, .conservatory-arrival, .coil-introduction, .ridge-cover),
.pixel-home .pixel-workbench .pixel-welcome {
  box-sizing: border-box;
  inline-size: 100cqw;
  max-inline-size: none;
  margin-inline: calc(50% - 50cqw);
}
main .ridge-cover > header { inline-size: auto; margin-inline: 0; }

/* These covers previously stopped at the content column. */
body[class] main :is(.drafting-introduction, .drafting-pavilion-study, .nest-picture-cover,
  .channel-welcome, .margin-cover, .stitch-first-light, .foundation-overview,
  .score-overture, .material-opening, .weft-introduction, .kindling-welcome,
  .depth-opening, .inlet-expedition) {
  box-sizing: border-box;
  inline-size: 100cqw;
  max-inline-size: none;
  margin-inline: calc(50% - 50cqw);
  border-inline: 0;
  border-radius: 0;
  padding-inline: max(20px, calc((100cqw - 1160px) / 2));
}
body[class] main .drafting-pavilion-study { padding-inline: 0; }
main .nest-picture-cover { margin-top: 0; }
.nest-home main .nest-picture-cover { padding-inline: max(20px, calc((100cqw - 1160px) / 2)); }

/* Move permanent side controls into the page flow so the cover can span both edges. */
.quiet-home, .motion-home, .drafting-home { padding-right: 0; }
.quiet-home .quiet-header > .quiet-register {
  position: static;
  width: auto;
  height: auto;
  min-height: 44px;
  padding: 10px 18px;
  writing-mode: horizontal-tb;
  letter-spacing: 0;
}
.motion-home .motion-screen-section,
.drafting-home .drafting-reading-map {
  position: static;
  width: auto;
  min-width: 0;
  overflow: visible;
}
.motion-home .motion-screen-section {
  max-width: 1160px;
  margin: 30px max(20px, calc((100% - 1160px) / 2));
}
.motion-home .motion-screen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 12px;
}
.drafting-home .drafting-reading-map nav a:nth-child(n) { color: #25496c; }

.ed-inner main .ed-inner-cover,
.template-folio main .folio-notebook-cover,
.template-orbit main :is(.orbit-manual-heading,.orbit-inner-hero) {
  box-sizing: border-box;
  inline-size: 100cqw;
  max-inline-size: none;
  margin-inline: calc(50% - 50cqw);
  border-inline: 0;
  border-radius: 0;
  padding-inline: max(20px, calc((100cqw - 1160px) / 2));
}
.ed-column main .ed-inner-cover { background-color: var(--wash); }

/* A page's masthead, cover and pricing section use the same content edges. */
body[class] {
  --site-content-max: 1240px;
  --site-min-gutter: clamp(16px, 3.3vw, 40px);
  --site-content-edge: max(var(--site-min-gutter), calc((100cqw - var(--site-content-max)) / 2));
  --site-content-width: calc(100cqw - 2 * var(--site-content-edge));
}
body:is(.template-bloom, .template-ledger, .template-parlor, .template-route, .template-foundry,
  .template-meadow, .template-archive, .template-island, .template-radar, .template-courtyard,
  .template-indexer, .template-spectrum, .template-almanac, .template-fluent, .template-north,
  .template-form, .template-ribbon, .template-observatory, .template-common, .template-vertex,
  .template-strata, .template-solstice, .template-nocturne, .template-verdigris, .template-summit,
  .template-meridian, .template-sonata, .template-kinetic, .template-oasis, .template-argon,
  .template-verge, .template-rivulet) { --site-content-max: 1200px; }
body:is(.template-clarity, .template-mezzanine, .template-halcyon, .template-relay, .template-terrace,
  .template-mosaic, .template-keystone, .template-fieldnote, .template-vantage, .template-arcadia,
  .template-helix, .template-seaglass) { --site-content-max: 1280px; }
body:is(.template-emberline, .template-apex) { --site-content-max: 1160px; }
body.template-orbit { --site-content-max: 1220px; }
body.catalog-home { --site-content-max: 1180px; }
body.ed-inner { --site-content-max: 1160px; }
body.template-folio:not(.catalog-home) { --site-content-max: 1200px; }

@media (max-width: 600px) {
  body[class] { --site-min-gutter: 16px; }
}

.catalog-home .catalog-body,
.template-seaglass :is(.sg-menubar, .sg-hero-layout, #plans > .sg-shell),
.template-orbit :is(.orbit-command-row, #plans.orbit-plan-hangar, .orbit-manual),
.ed .ed-header-row,
.ed .ed-inner-main {
  width: var(--site-content-width);
  max-width: none;
}
.catalog-home[data-catalog-layout] .catalog-hero,
.orbit-flight-home .orbit-station > .orbit-hero,
.ed-inner main .ed-inner-cover,
.template-folio main .folio-notebook-cover,
.template-orbit main :is(.orbit-manual-heading,.orbit-inner-hero) {
  padding-inline: var(--site-content-edge);
}
.template-orbit main .orbit-manual-heading { margin-inline: calc(50% - 50cqw); }

body[class] > header:has(> a),
.catalog-home > :is(header,[role="banner"]).catalog-top {
  padding-inline: var(--site-content-edge);
}
body.motion-home > .motion-header { padding-inline: var(--site-content-edge); }
.template-parlor > .openline-mast > :is(div, nav.desktop-primary-links) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
@media (min-width: 768px) {
  body[class] > :is(.tsukimi-noren,.concierge-header,.shore-header,.conservatory-gate) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    gap: 10px clamp(12px, 2.2vw, 30px);
  }
  body[class] > :is(.tsukimi-noren,.concierge-header,.shore-header,.conservatory-gate) > a:first-of-type {
    grid-area: 1 / 1;
    margin-inline: 0;
    justify-self: start;
  }
  body[class] > :is(.tsukimi-noren,.concierge-header,.shore-header,.conservatory-gate) > nav {
    grid-area: 1 / 2;
    width: auto;
    margin-inline: 0;
    justify-self: end;
  }
  body[class] > :is(.tsukimi-noren,.concierge-header,.shore-header,.conservatory-gate) > [data-track-register] {
    grid-area: 1 / 3;
    margin-inline: 0;
    justify-self: end;
  }
}
.catalog-home > .catalog-editorial {
  justify-content: stretch;
  text-align: start;
}
.catalog-home > .catalog-editorial :is(div,nav) { justify-content: flex-start; }

body[class] :is(.grain-fixed-top > .grain-header, .pace-top > .pace-header,
  .grain-fixed-top > nav, .pace-top > nav, .transit-route-directory) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--site-content-edge);
}

body[class]:not(.catalog-home,.template-seaglass,.template-orbit) main #plans {
  box-sizing: border-box;
  width: var(--site-content-width);
  max-width: none;
  margin-inline: calc((100% - var(--site-content-width)) / 2);
  padding-inline: 0;
}
.civic-home main .civic-service-hub {
  display: block;
  width: var(--site-content-width);
}
.civic-home main .civic-service-hub .civic-hub-directory {
  position: static;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 124px), 1fr));
  margin-block-end: 24px;
}
body.template-apex main #plans {
  width: 100cqw;
  margin-inline: calc(50% - 50cqw);
  padding-inline: var(--site-content-edge);
}
.stitch-home #plans .stitch-chapter-title {
  margin-inline: 0;
  padding-inline: 0;
}
.stitch-home #plans .stitch-chapter-title > div { padding-inline: 0; }
.stitch-home .stitch-first-light .stitch-read-plans { margin: 0; }

/* Keep artwork full bleed. The inset only defines the cover's content tracks. */
body[class] main :is(.groove-listening-table, .orrery-frontispiece, .openline-front-page,
  .transit-departure, .forge-workbench, .wind-introduction, .skyrail-opening-frame, .rainbow-welcome,
  .forward-introduction, .brief-workspace, .storybook-prologue, .night-console, .matsuri-market-hall,
  .pelagic-first-current, .comic-opening, .airpost-postcard, .case-opening, .tsukimi-evening,
  .actuation-opening, .cloud-billboard, .openair-campaign, .quiet-opening, .concierge-introduction,
  .lightfield-opening, .thought-introduction, .routing-route-poster, .motion-opening, .celadon-overview,
  .plain-frontispiece, .glide-horizon, .shore-frontispiece, .contour-cover, .memo-open-notebook,
  .radiant-sunroom, .grain-opening, .level-welcome, .hedge-showcase, .drafting-introduction,
  .nest-picture-cover, .pace-opening, .module-stage, .filament-opening, .channel-welcome,
  .margin-cover, .stitch-first-light, .foundation-overview, .reflection-arrival, .score-overture,
  .material-opening, .bearing-arrival, .bough-arrival, .typeset-cover-sheet, .weft-introduction,
  .angle-opening, .kindling-welcome, .longitude-opening, .depth-opening, .gild-arrival,
  .inlet-expedition, .voussoir-foundation, .sundeck-welcome, .tributary-source, .specimen-opening,
  .outlook-arrival, .conservatory-arrival, .coil-introduction),
.pixel-home .pixel-workbench .pixel-welcome {
  padding-inline: var(--site-content-edge);
}
body[class] main :is(.civic-service-brief, .plinth-introduction, .ridge-cover) > header {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding-inline: var(--site-content-edge);
}

body[class] main :is(.groove-listening-table > .groove-record-sleeve,
  .transit-departure > header, .forward-introduction > header, .brief-workspace > .brief-opening,
  .comic-opening > header, .actuation-opening > header, .plain-frontispiece > .plain-introduction,
  .outlook-arrival > header),
.pixel-home .pixel-workbench .pixel-welcome > div {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.margin-home main .margin-cover { display: block; }
.margin-home .margin-cover .margin-introduction { grid-area: auto; }

main :is(#plans, .ed-plan, .sg-plan, .orbit-vessel, .folio-package)
  :is(strong,b,[class*="-price"],[class*="-charge"]) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (min-width: 768px) {
  [data-extended-navigation] :is(body > header, body > [role="banner"], body > .pace-top,
    body > .grain-fixed-top, .sg-menubar, .orbit-command-row, .ed-header-row):has(> nav) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
    justify-content: space-between;
  }
  [data-extended-navigation] :is(body > header, body > [role="banner"], body > .pace-top,
    body > .grain-fixed-top, .sg-menubar, .orbit-command-row, .ed-header-row)
    > nav:not(.catalog-mobile-shortcuts),
  [data-extended-navigation] body > .transit-route-directory {
    display: flex;
    flex: 0 0 100%;
    order: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 6px 14px;
    overflow: visible;
    justify-content: flex-start;
  }
  [data-extended-navigation] :is(body > header, body > [role="banner"], body > .pace-top,
    body > .grain-fixed-top, .sg-menubar, .orbit-command-row, .ed-header-row)
    > nav:not(.catalog-mobile-shortcuts) > :is(ul,ol,menu,.independent-desktop-links) {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px 14px;
    justify-content: flex-start;
  }
  [data-extended-navigation] :is(body > header, body > [role="banner"], body > .pace-top,
    body > .grain-fixed-top, .sg-menubar, .orbit-command-row, .ed-header-row) > nav a {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  [data-extended-navigation] :is(body > header, body > [role="banner"], .sg-menubar, .orbit-command-row,
    .ed-header-row) > a:is([data-track-register],.catalog-utility > a:last-child) { white-space: nowrap; }
}

@media (min-width: 768px) {
  body > :is(.catalog-top, .brief-masthead, .glide-departure, .tsukimi-noren, .concierge-header, .shore-header,
    .conservatory-gate, .bearing-header, .drafting-header, .filament-header, .channel-header,
    .stitch-header, .weft-header, .kindling-header, .longitude-header, .gild-header, .sundeck-sunbar)
    > nav:not(.catalog-mobile-shortcuts),
  .pace-top > nav, .orbit-command-row > nav, .folio-sidebar > nav {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block: 4px;
  }
  body > :is(.catalog-top, .brief-masthead, .glide-departure, .tsukimi-noren, .concierge-header, .shore-header,
    .conservatory-gate, .bearing-header, .drafting-header, .filament-header, .channel-header,
    .stitch-header, .weft-header, .kindling-header, .longitude-header, .gild-header, .sundeck-sunbar)
    > nav:not(.catalog-mobile-shortcuts) :is(ul,.independent-desktop-links),
  .pace-top > nav > ul, .orbit-command-row > nav > .orbit-command-links, .folio-sidebar > nav > ul {
    flex-wrap: nowrap;
  }
  body > :is(.catalog-top, .brief-masthead, .glide-departure, .tsukimi-noren, .concierge-header, .shore-header,
    .conservatory-gate, .bearing-header, .drafting-header, .filament-header, .channel-header,
    .stitch-header, .weft-header, .kindling-header, .longitude-header, .gild-header, .sundeck-sunbar)
    > nav:not(.catalog-mobile-shortcuts) a,
  .pace-top > nav a, .orbit-command-row > nav a, .folio-sidebar > nav a {
    white-space: nowrap;
    overflow-wrap: normal;
  }
  body > .catalog-index > nav { display: flex; gap: 12px; align-self: center; }
  .catalog-top .catalog-index-link { gap: 4px; }
  body > .bearing-header, body > .bearing-header > nav { overflow: visible; max-height: none; }
  body > .bearing-header > nav {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(max-content, 1fr);
    overflow-x: auto;
  }
  body > .bearing-header > nav a { padding-inline: clamp(5px, 1vw, 15px); }
  .pace-top > nav > ul { width: max-content; }
  .pace-top > nav { justify-content: safe center; }
  body > .transit-route-directory {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
  }
  body > .transit-route-directory > a { padding-inline: 3px; font-size: clamp(12px, 1.35vw, 16px); }
}

@media (min-width: 768px) and (max-width: 1150px) {
  body[class] > :is(.tsukimi-noren,.concierge-header,.shore-header,.conservatory-gate) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  body[class] > :is(.tsukimi-noren,.concierge-header,.shore-header,.conservatory-gate) > nav {
    grid-area: 2 / 1 / 3 / -1;
    justify-self: stretch;
    justify-content: safe center;
  }
  body[class] > :is(.tsukimi-noren,.concierge-header,.shore-header,.conservatory-gate) > [data-track-register] {
    grid-area: 1 / 2;
  }
  body > :is(.catalog-masthead,.catalog-command,.catalog-crossbar,.catalog-utility,.catalog-index,.brief-masthead) {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  body > :is(.catalog-masthead,.catalog-command,.catalog-crossbar,.catalog-utility,.catalog-index,.brief-masthead)
    > nav:not(.catalog-mobile-shortcuts) {
    order: 1;
    flex: 1 1 100%;
    gap: clamp(9px, 1.4vw, 16px);
  }
  .catalog-top .catalog-index-link [aria-hidden] { display: none; }
  .orbit-command-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .orbit-command-row > nav {
    grid-area: 2 / 1 / 3 / -1;
    justify-content: safe start;
  }
  .orbit-command-row > nav > .orbit-command-links { width: max-content; gap: 6px; }
  .orbit-command-row > nav a { padding-inline: 7px; }
  .folio-sidebar > nav { order: 1; flex-basis: 100%; }
  .folio-sidebar { flex-wrap: wrap; }
  .folio-sidebar > nav > ul { gap: 6px; }
  .folio-sidebar > nav a { padding-inline: 5px; }
  body > .glide-departure { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  body > .glide-departure > nav { grid-area: 2 / 1 / 3 / -1; }
  body > .glide-departure > [data-track-register] { grid-area: 1 / 2; }
}

@media (min-width: 768px) and (max-width: 900px) {
  body > :is(.filament-header,.channel-header,.stitch-header,.drafting-header,.weft-header,
    .kindling-header,.longitude-header,.gild-header,.sundeck-sunbar) > nav {
    column-gap: 12px;
    justify-content: safe start;
  }
  body > :is(.filament-header,.drafting-header,.sundeck-sunbar) > nav .independent-desktop-links { column-gap: 10px; }
  body > .drafting-header > nav a { padding-inline: 7px; }
  body > .sundeck-sunbar > nav a { padding-inline: 6px; }
  body > .pace-top > nav a { padding-inline: 7px; }
  body.filament-home > .filament-header > nav { grid-column: 1 / -1; order: 1; }
}

@media (min-width: 801px) and (max-width: 1150px) {
  body > :is(.memo-header,.radiant-header,.level-header,.hedge-header,
    .drafting-header,.nest-header,.module-header) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 20px;
    padding-block: 12px;
  }
  body > :is(.memo-header,.radiant-header,.level-header,.hedge-header,
    .drafting-header,.nest-header,.module-header) > nav {
    grid-area: 2 / 1 / 3 / -1;
    width: 100%;
  }
  body > :is(.memo-header,.radiant-header,.level-header,.hedge-header,
    .drafting-header,.nest-header,.module-header) > [data-track-register] { grid-area: 1 / 2; }
}

@media (max-width: 767px) {
  body > .bearing-header {
    position: static;
    max-height: none;
    overflow: visible;
  }
  body > .bearing-header > nav { grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr)); }
  body > .bearing-header > nav a { padding-inline: 4px; }
  body > .pace-top { position: static; }
  body > .pace-top > nav {
    display: block;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .pace-top > nav > ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,88px),1fr));
    gap: 4px;
  }
  .pace-top > nav a { padding-inline: 4px; border: 0; }
}