/* Visual thesis: nocturnal fashion photography, bone product planes, quiet typography.
   Content: campaign / selected originals / featured garment / brand statement.
   Motion: staggered hero entrance, gentle image scale, precise hover and reveal. */
:root {
  --display: Inter, Arial, sans-serif;
  --ink: #101010;
  --paper: #e9e7e2;
  --muted: #696762;
  --line: #ceccc6;
  --orange: #ff9c00;
  --header: 76px;
  --gutter: clamp(24px, 4.15vw, 80px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}
html { scroll-padding-top: calc(var(--header) + 20px); }
body { background: var(--paper); font-family: var(--display); font-size: 16px; }
h1, h2, h3, h1 em, h2 em, h3 em {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1.04;
  text-transform: none;
  font-style: normal;
}
:is(h1, h2, h3) em { color: inherit; }
.eyebrow {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.content-width { max-width: 1800px; }
.section-space { padding-block: clamp(76px, 8vw, 128px); }
.heading-period { color: inherit; }
.button {
  min-height: 52px;
  padding: 15px 24px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  clip-path: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
.button:hover, .button-orange:hover { background: #333; color: var(--paper); }
.button-orange { background: var(--ink); color: var(--paper); }
.text-link {
  min-height: 44px;
  padding-block: 9px;
  gap: 30px;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 400;
  border-bottom: 1px solid currentColor;
}
.text-link svg { width: 20px; height: 20px; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 5px;
}

/* A quiet, persistent masthead. */
/* Horizontal lockups pair the original symbol with a single wordmark. Keep the
   existing navigation and motion; the isolated mark needs no extra animation. */
.astronaut-mark { display: block; flex: none; width: 29px; height: 36px; overflow: hidden; }
.header { background: var(--ink); color: var(--paper); border: 0; gap: 28px; }
.brand { gap: 12px; }
.brand .brand-astronaut { width: 23px; height: 31px; }
.brand > .brand-name {
  display: block;
  font-family: var(--display);
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: -.045em;
  font-weight: 550;
  white-space: nowrap;
}
.header nav { gap: 28px; font-size: 12px; }
.header nav > a { padding-block: 24px; }
.header nav > a:hover, .header .nav-group summary:hover { color: #b6b3ad; }
.header-actions { gap: 13px; }
.cart-button { font-size: 12px; }
.header svg { width: 20px; height: 20px; }
.nav-group summary { padding-block: 25px; }
.submenu {
  top: 58px;
  padding: 22px 24px;
  background: var(--ink);
  border: 1px solid #ffffff24;
  box-shadow: none;
  color: var(--paper);
}
.submenu a { padding-block: 7px; }
.submenu a:hover { color: #b6b3ad; }

/* The first screen is one photographic composition. */
.nocturne-hero {
  position: relative;
  isolation: isolate;
  height: calc(100svh - var(--header));
  min-height: 540px;
  max-height: 1200px;
  overflow: hidden;
  background: #171717;
  color: #f0eee9;
}
.nocturne-hero-image, .nocturne-hero-shade { position: absolute; inset: 0; }
.nocturne-hero-image { z-index: -3; overflow: hidden; }
.nocturne-hero-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 42%;
  animation: nocturne-image 1.9s var(--ease) both;
}
.nocturne-hero-shade {
  z-index: -2;
  background: linear-gradient(0deg, #080808e0 0%, #08080845 33%, #08080800 66%),
    linear-gradient(180deg, #08080855 0%, #08080800 27%);
}
.nocturne-kicker {
  position: absolute;
  top: 32px;
  left: var(--gutter);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .15em;
  animation: nocturne-enter 1.1s .15s var(--ease) both;
}
.nocturne-hero-copy {
  position: absolute;
  inset: auto var(--gutter) 64px;
}
.nocturne-hero h1 {
  font-size: clamp(48px, 7.75vw, 150px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.065em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: nocturne-enter 1.2s .2s var(--ease) both;
}
.nocturne-hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 32px;
  animation: nocturne-enter 1.2s .35s var(--ease) both;
}
.nocturne-hero-bottom > p { font-size: 10px; line-height: 1.6; letter-spacing: .13em; }
.nocturne-hero-bottom .text-link { min-width: 200px; justify-content: space-between; }
.campaign-credit {
  position: absolute;
  right: var(--gutter);
  bottom: 18px;
  color: #c8c5c0;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .035em;
}

/* The garments are the focus; the catalog imagery remains untouched. */
.section-heading { gap: 30px; margin-bottom: 40px; align-items: flex-end; }
.section-heading .eyebrow { color: var(--muted); margin-bottom: 20px; }
.section-heading h2 {
  font-size: clamp(36px, 4.2vw, 68px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -.055em;
  text-transform: none;
}
.section-heading > .text-link { margin-bottom: 0; font-size: 13px; }
.product-grid { gap: 42px 22px; }
.nocturne-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
.product-image, .main-product-image { background: #dfdcd6; }
.product-image { aspect-ratio: 4 / 5; margin-bottom: 18px; }
.product-image img { background: transparent; object-fit: cover; mix-blend-mode: multiply; }
.product-card h3 {
  max-width: 100%;
  font-family: var(--display);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 450;
  letter-spacing: -.015em;
  text-transform: none;
}
.product-card .price { font-size: 12px; color: var(--muted); margin-top: 6px; }
.product-explore {
  background: #101010eb;
  color: var(--paper);
  padding: 13px 16px;
  font-size: 12px;
  font-weight: 400;
}
.product-card:hover .product-image img { transform: scale(1.025); }

.nocturne-feature { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--ink); color: var(--paper); }
.nocturne-feature-image { min-width: 0; overflow: hidden; background: #d8d5cf; }
.nocturne-feature-image img {
  width: 100%; height: 100%;
  min-height: 680px;
  object-fit: cover;
  object-position: 50% 34%;
  transform: scale(1.05) translateY(calc(var(--depth, 0px) * .35));
  transition: transform .8s var(--ease);
}
.nocturne-feature:hover .nocturne-feature-image img { transform: scale(1.065) translateY(calc(var(--depth, 0px) * .35)); }
.nocturne-feature-copy { padding: 80px clamp(36px, 6.5vw, 108px); align-self: center; }
.nocturne-feature-copy .eyebrow { color: #aaa7a1; margin-bottom: 38px; }
.nocturne-feature h2 {
  font-size: clamp(48px, 6.3vw, 101px);
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.06em;
}
.nocturne-feature-copy > p:not(.eyebrow) { max-width: 300px; color: #aaa7a1; margin-top: 32px; font-size: 14px; line-height: 1.8; }
.nocturne-feature-copy .text-link { margin-top: 30px; }
.nocturne-statement {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  align-items: start;
  gap: 70px;
  padding-block: clamp(90px, 10vw, 160px);
}
.nocturne-mascot { width: 104px; height: auto; justify-self: center; margin-top: 42px; }
.nocturne-statement .eyebrow { color: var(--muted); margin-bottom: 28px; }
.nocturne-statement h2 { font-size: clamp(50px, 6.3vw, 100px); font-weight: 400; line-height: 1; letter-spacing: -.06em; }
.nocturne-statement p:not(.eyebrow) { max-width: 380px; font-size: 15px; color: var(--muted); line-height: 1.8; margin-top: 30px; }
.nocturne-statement .text-link { margin-top: 26px; }

/* Footer: useful, unembellished, unmistakably the brand. */
.nocturne-footer { padding: 68px var(--gutter) 26px; background: var(--ink); color: var(--paper); }
.nocturne-footer-top { display: flex; justify-content: space-between; gap: 45px; padding-bottom: 60px; }
.nocturne-footer-top > a { font-size: clamp(25px, 3.2vw, 50px); line-height: 1.08; font-weight: 400; letter-spacing: -.045em; }
.nocturne-footer-top .brand-name { font-size: 17px; line-height: 1.2; font-weight: 500; letter-spacing: -.045em; }
.nocturne-footer-top p { margin-top: 18px; font-size: 13px; line-height: 1.8; color: #aaa7a1; max-width: 285px; }
.nocturne-footer-links { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: clamp(30px, 5vw, 85px); max-width: 730px; padding-bottom: 50px; }
.nocturne-footer-links h2 { font-size: 11px; font-weight: 500; letter-spacing: 0; margin: 0 0 19px; text-transform: none; }
.nocturne-footer-links a { display: block; color: #aaa7a1; font-size: 12px; line-height: 1.6; padding-block: 7px; }
.nocturne-footer a:hover { color: #f8f6f0; }
.nocturne-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 40px;
  border-top: 1px solid #ffffff26;
  padding-block: 23px;
  font-size: 11px;
  line-height: 1.8;
  color: #aaa7a1;
}
.nocturne-footer-bottom > div { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.nocturne-footer-bottom a { display: inline-block; padding-block: 5px; }
.nocturne-footer-bottom .socials { margin: 0; font-size: inherit; flex-direction: row; }
.nocturne-footer-wordmark {
  margin-top: 35px;
  font-size: clamp(25px, 7.8vw, 160px);
  line-height: 1;
  font-weight: 450;
  letter-spacing: -.065em;
  white-space: nowrap;
}
.nocturne-footer .image-credit { color: #8d8a85; font-size: 10px; line-height: 1.7; margin-top: 28px; max-width: 620px; }

/* Collection and archive share a clear, useful product system. */
.shop-page, .product-page { padding-top: 34px; padding-bottom: 100px; }
.breadcrumbs { font-size: 11px; color: var(--muted); margin-bottom: 40px; }
.catalog-heading {
  display: flex;
  margin-inline: 0;
  padding: 28px 0 46px;
  background: none;
  color: var(--ink);
  margin-bottom: 0;
}
.catalog-heading .eyebrow { font-size: 10px; margin-bottom: 22px; color: var(--muted); }
.catalog-heading h1 {
  max-width: 1150px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(52px, 7.3vw, 112px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.06em;
  text-transform: none;
}
.catalog-intro { max-width: 440px; font-size: 15px; line-height: 1.8; color: var(--muted); margin-top: 26px; }
.catalog-heading > p { max-width: 300px; font-size: 14px; line-height: 1.8; color: var(--muted); }
.collection-tabs { display: flex; gap: 34px; align-items: center; border-bottom: 1px solid var(--line); overflow-x: auto; }
.collection-tabs > span { margin-left: auto; max-width: 235px; font-size: 11px; line-height: 1.6; color: var(--muted); text-align: right; }
.collection-tabs a { white-space: nowrap; padding-block: 16px; font-size: 12px; line-height: 1.6; color: var(--muted); border-bottom: 1px solid transparent; }
.collection-tabs a[aria-current] { color: var(--ink); border-color: var(--ink); }
.shop-toolbar { padding-block: 23px; margin-bottom: 20px; border-block: 0; }
.catalog-search { width: min(420px, 48%); border-color: #aaa7a0; }
.catalog-search input { font-size: 14px; }
.sort-label, .sort-label select { font-size: 12px; }
.shop-layout { display: block; }
.categories { display: flex; flex-wrap: wrap; gap: 8px 28px; border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 28px; }
.categories a { display: block; border: 0; padding: 8px 0; font-size: 12px; min-height: 36px; color: var(--muted); margin: 0; }
.categories a[aria-current] { background: transparent; color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 6px; }
.categories a[aria-current]:before { display: none; }
.catalog-count { font-size: 11px; color: var(--muted); margin-bottom: 26px; }
.catalog .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 22px; }
.catalog .product-image { aspect-ratio: 4 / 5; }
.edited-collection { display: block; }
.edited-collection .nocturne-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.archive-link { margin-top: 45px; font-size: 13px; color: var(--muted); }
.archive-link a { text-decoration: underline; text-underline-offset: 5px; }

/* Garment pages allow more space for the original imagery. */
.product-detail { grid-template-columns: 1.22fr 1fr; gap: clamp(44px, 7vw, 115px); }
.product-visual { position: sticky; top: calc(var(--header) + 24px); }
.main-product-image { position: relative; top: auto; }
.main-product-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; }
.product-image-label { font-size: 10px; letter-spacing: .05em; top: 19px; left: 20px; color: var(--muted); }
.product-info { padding-top: 18px; }
.product-info > .eyebrow { font-size: 10px; line-height: 1.8; color: var(--muted); margin-bottom: 24px; }
.product-info h1 {
  font-size: clamp(36px, 3.8vw, 62px);
  font-family: var(--display);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -.055em;
  text-transform: none;
}
.product-info .detail-price { font-size: 18px; margin-block: 27px; }
.price-caption { display: block; font-size: 10px; color: var(--muted); margin-top: 5px; }
.product-intro { font-family: var(--display); font-size: 14px; line-height: 1.85; color: var(--muted); padding-top: 10px; margin-bottom: 24px; }
.product-facts { margin: 32px 0; font-size: 12px; }
.product-facts > div { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding-block: 10px; }
.product-facts dt { color: var(--muted); }
.product-facts dd { margin: 0; line-height: 1.8; }
.variant-label { font-size: 10px; letter-spacing: .08em; font-weight: 500; }
.variant { background: transparent; border-color: #b9b6af; font-size: 14px; min-height: 50px; }
.sales-status { border-top: 1px solid var(--line); margin-block: 30px; padding-top: 25px; }
.sales-status strong { font-size: 12px; font-weight: 500; }
.sales-status strong:before { width: 4px; height: 4px; background: #7b7872; }
.sales-status p { font-size: 12px; line-height: 1.8; margin-top: 9px; }
.product-source-note { font-size: 11px; line-height: 1.8; color: var(--muted); margin-top: 20px; }
.product-accordion { padding-block: 21px; margin-top: 24px; }
.product-accordion summary { font-size: 13px; font-weight: 500; min-height: 30px; }
.product-accordion .description { font-size: 14px; line-height: 1.85; }
.product-info .product-meta { font-size: 11px; line-height: 1.8; }
.gallery-thumbs { flex-wrap: wrap; }
.gallery-thumbs button[aria-pressed=true] { border-color: var(--ink); outline: 1px solid var(--ink); }
.related-products { margin-top: 100px; padding-top: 75px; }
.related-products .section-heading h2 { font-size: clamp(36px, 4.2vw, 68px); }

/* The editorial and service pages belong to the same calm identity. */
.page-intro { padding-block: 72px 64px; }
.page-intro > .eyebrow { font-size: 10px; margin-bottom: 28px; }
.page-intro h1 { font-size: clamp(54px, 7.5vw, 115px); line-height: 1.02; font-weight: 400; letter-spacing: -.06em; }
.intro-description { font-size: 16px; line-height: 1.8; max-width: 630px; }
.story-opening { background: var(--ink); color: var(--paper); }
.story-opening h1 { font-size: clamp(54px, 6.3vw, 104px); line-height: 1.02; font-weight: 400; letter-spacing: -.06em; color: var(--paper); }
.story-opening h1 em { color: inherit; }
.story-opening-copy > .eyebrow { font-size: 10px; }
.story-opening-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.8; color: #b7b3ac; }
.editorial-statement h2, .founder-copy > h2, .process-intro h2 { font-size: clamp(38px, 4.3vw, 68px); line-height: 1.08; font-weight: 400; letter-spacing: -.055em; }
.editorial-statement p:not(.eyebrow), .founder-copy p:not(.eyebrow) { font-size: 16px; line-height: 1.85; }
.principle-row h3 { font-size: 30px; font-weight: 400; line-height: 1.15; letter-spacing: -.045em; }
.quiet-cta h2 { font-size: clamp(44px, 6vw, 88px); font-weight: 400; line-height: 1.03; letter-spacing: -.055em; }
.process-row h2 { font-size: 48px; font-weight: 400; line-height: 1.05; letter-spacing: -.055em; }
.brand-message { background: var(--ink); color: var(--paper); }
.brand-message .eyebrow { color: #b7b3ac; }
.brand-message h2 { font-size: clamp(44px, 6vw, 88px); line-height: 1.04; font-weight: 400; letter-spacing: -.055em; }
.brand-message p:not(.eyebrow) { color: #b7b3ac; }
.clarity-hero h1 { font-size: clamp(43px, 5.5vw, 86px); font-weight: 400; line-height: 1.04; letter-spacing: -.055em; }
.crew-title h2 { font-size: 32px; font-weight: 400; line-height: 1.1; letter-spacing: -.045em; }
.crew-profile blockquote { font-size: clamp(23px, 2.1vw, 32px); font-weight: 400; letter-spacing: -.03em; }
.contact-method > a { font-family: var(--display); font-size: clamp(22px, 2.6vw, 40px); font-weight: 400; line-height: 1.4; letter-spacing: -.045em; }
.contact-support { background: #dcd9d2; color: var(--ink); }
.contact-support > img { width: 67px; background: none; padding: 0; }
.contact-support h2 { font-size: 39px; font-weight: 400; line-height: 1.06; }
.contact-support p, .contact-support .text-link { color: var(--muted); }
.faq-group h2 { font-size: 32px; font-weight: 400; line-height: 1.15; letter-spacing: -.045em; }
.faq-item summary { font-size: 15px; }
.policy-intro h1 { font-size: clamp(50px, 6vw, 96px); line-height: 1.02; }
.policy-notice { background: #dfdcd5; border-color: #c9c6bf; }
.policy-document h2 { font-weight: 500; }
.journal-entry h2, .home-journal .journal-entry h2 { font-size: 30px; line-height: 1.15; font-weight: 400; letter-spacing: -.045em; }
.journal-image > span { background: var(--paper); color: var(--ink); }
.journal-index .journal-entry:first-child h2 { font-size: clamp(38px, 4.4vw, 67px); line-height: 1.08; font-weight: 400; letter-spacing: -.055em; }
.journal-article h2 { font-size: 34px; font-weight: 400; line-height: 1.2; letter-spacing: -.045em; }
.home-journal { background: #191919; }
dialog { background: var(--paper); color: var(--ink); border: 0; }
dialog h2 { font-family: var(--display); font-size: 38px; font-weight: 400; line-height: 1.1; letter-spacing: -.05em; }
.empty-state h1 { font-size: clamp(52px, 7vw, 100px); font-weight: 400; line-height: 1.04; letter-spacing: -.055em; }

@keyframes nocturne-enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes nocturne-image {
  from { opacity: .65; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 1100px) and (min-width: 801px) {
  .brand > .brand-name { font-size: 12px; }
  .brand .brand-astronaut { width: 21px; height: 29px; }
  .header { gap: 20px; }
  .header nav { gap: 20px; font-size: 11px; }
  .header-actions { gap: 5px; }
  .bag-label { display: none; }
  .nocturne-feature-image img { min-height: 560px; }
  .nocturne-feature-copy { padding: 60px 40px; }
  .nocturne-footer-links { gap: 30px; }
  .catalog .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  :root { --header: 68px; --gutter: 22px; }
  .header { gap: 12px; }
  .brand { gap: 8px; }
  .brand > .brand-name { display: block; font-size: 11px; letter-spacing: -.04em; }
  .brand .brand-astronaut { width: 19px; height: 27px; }
  .header-actions { margin-left: auto; gap: 0; }
  .header-actions .icon-button { width: 34px; }
  .cart-button { width: 32px; }
  .bag-label { display: none; }
  .menu-toggle { width: 34px; min-height: 44px; align-items: flex-end; }
  .menu-toggle span { width: 21px; }
  .header nav { padding: 22px var(--gutter) 55px; background: var(--ink); }
  .header nav > a { font-size: 28px; font-weight: 400; min-height: 66px; letter-spacing: -.045em; }
  .header .nav-group summary { font-size: 28px; font-weight: 400; letter-spacing: -.045em; }
  .header .submenu { border: 0; padding: 10px 0 20px; }
  .header .submenu a { font-size: 14px; padding-block: 10px; }
  .nocturne-hero { min-height: 490px; max-height: 1000px; }
  .nocturne-hero-image img { object-position: 64% 39%; }
  .nocturne-hero-shade { background: linear-gradient(0deg, #080808e8 0%, #0808085c 38%, #08080800 68%), linear-gradient(180deg, #08080866, #08080800 27%); }
  .nocturne-kicker { top: 25px; font-size: 11px; }
  .nocturne-hero-copy { bottom: 58px; }
  .nocturne-hero h1 { font-size: clamp(47px, 11.4vw, 82px); white-space: normal; max-width: 680px; line-height: .98; letter-spacing: -.065em; }
  .nocturne-hero-bottom { align-items: flex-start; flex-direction: column; gap: 19px; margin-top: 25px; }
  .nocturne-hero-bottom > p { font-size: 11px; letter-spacing: .09em; }
  .nocturne-hero-bottom .text-link { min-width: 190px; font-size: 13px; }
  .campaign-credit { bottom: 17px; font-size: 10px; }
  .section-space { padding-block: 66px; }
  .section-heading { gap: 22px; margin-bottom: 30px; }
  .section-heading .eyebrow { font-size: 11px; margin-bottom: 16px; }
  .section-heading h2 { font-size: 37px; line-height: 1.04; }
  .section-heading > .text-link { font-size: 12px; gap: 15px; white-space: normal; flex: none; }
  .nocturne-edit .section-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .product-grid, .nocturne-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .product-image, .catalog .product-image { aspect-ratio: 3 / 4; margin-bottom: 14px; }
  .product-card h3 { font-size: 12px; line-height: 1.5; }
  .product-card .price { font-size: 12px; margin-top: 6px; }
  .nocturne-edit .nocturne-grid { grid-template-columns: 1fr; gap: 36px; }
  .nocturne-edit .product-image { aspect-ratio: 4 / 4.7; }
  .nocturne-edit .product-card h3 { font-size: 14px; }
  .nocturne-feature { grid-template-columns: 1fr; }
  .nocturne-feature-image { aspect-ratio: 4 / 4.6; }
  .nocturne-feature-image img { min-height: 0; object-position: 50% 30%; }
  .nocturne-feature-copy { padding: 56px var(--gutter) 66px; }
  .nocturne-feature-copy .eyebrow { margin-bottom: 27px; }
  .nocturne-feature h2 { font-size: clamp(54px, 11vw, 82px); }
  .nocturne-feature-copy > p:not(.eyebrow) { margin-top: 28px; font-size: 14px; max-width: 340px; }
  .nocturne-statement { grid-template-columns: 1fr; gap: 40px; padding-block: 80px; }
  .nocturne-mascot { width: 64px; justify-self: start; margin-top: 0; }
  .nocturne-statement .eyebrow { margin-bottom: 23px; }
  .nocturne-statement h2 { font-size: clamp(49px, 10.8vw, 80px); }
  .nocturne-statement p:not(.eyebrow) { font-size: 14px; margin-top: 27px; }
  .nocturne-footer { padding-top: 54px; }
  .nocturne-footer-top { display: block; padding-bottom: 35px; }
  .nocturne-footer-top > a { display: inline-block; font-size: 31px; }
  .nocturne-footer-top .brand-name { font-size: 16px; }
  .nocturne-footer-top p { font-size: 12px; }
  .nocturne-footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 0; padding-bottom: 35px; }
  .nocturne-footer-links h2 { font-size: 11px; margin-bottom: 14px; }
  .nocturne-footer-links a { font-size: 12px; min-height: 40px; padding-block: 10px; }
  .nocturne-footer-bottom { display: block; font-size: 10px; padding-block: 23px 0; }
  .nocturne-footer-bottom > div { gap: 8px 22px; margin-top: 17px; }
  .nocturne-footer-bottom .socials { margin-top: 17px; }
  .nocturne-footer-wordmark { white-space: normal; font-size: 11.3vw; line-height: 1; max-width: 640px; margin-top: 44px; }
  .nocturne-footer .image-credit { font-size: 11px; margin-top: 26px; }
  .shop-page, .product-page { padding-top: 25px; padding-bottom: 66px; }
  .breadcrumbs { font-size: 10px; line-height: 1.8; margin-bottom: 26px; }
  .catalog-heading { padding: 17px 0 34px; display: block; }
  .catalog-heading .eyebrow { font-size: 11px; margin-bottom: 20px; }
  .catalog-heading h1 { font-size: clamp(43px, 10.5vw, 70px); line-height: 1.04; letter-spacing: -.055em; overflow-wrap: normal; hyphens: auto; }
  .catalog-intro { font-size: 14px; margin-top: 23px; }
  .catalog-heading > p { font-size: 14px; margin-top: 23px; }
  .collection-tabs { gap: 22px; }
  .collection-tabs > span { max-width: 125px; font-size: 11px; }
  .collection-tabs a { padding-block: 15px; }
  .shop-toolbar { display: flex; gap: 16px; padding-block: 20px; margin-bottom: 18px; }
  .catalog-search { width: 50%; }
  .catalog-search input { font-size: 16px; }
  .sort-label { font-size: 0; }
  .sort-label select { font-size: 12px; max-width: 135px; padding-left: 0; }
  .categories { flex-wrap: nowrap; overflow-x: auto; gap: 23px; padding-bottom: 15px; margin-bottom: 24px; }
  .categories a { min-height: 44px; display: flex; align-items: center; font-size: 12px; white-space: nowrap; flex: none; }
  .catalog-count { font-size: 11px; margin-bottom: 23px; }
  .catalog .product-grid, .edited-collection .nocturne-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .product-detail { grid-template-columns: 1fr; gap: 37px; }
  .product-visual { position: static; }
  .product-info { padding-top: 0; }
  .product-info > .eyebrow { font-size: 11px; margin-bottom: 20px; }
  .product-info h1 { font-size: 40px; font-weight: 400; line-height: 1.05; }
  .product-info .detail-price { font-size: 18px; margin-block: 24px; }
  .product-intro { font-size: 16px; }
  .product-image-label { top: 16px; left: 16px; font-size: 11px; }
  .product-facts { margin-block: 25px; }
  .variant { font-size: 16px; }
  .sales-status strong, .sales-status p { font-size: 12px; }
  .product-accordion summary { font-size: 14px; }
  .related-products { margin-top: 60px; padding-top: 50px; }
  .related-products .section-heading h2 { font-size: 36px; }
  .page-intro { padding-block: 47px; }
  .page-intro h1, .policy-intro h1 { font-size: clamp(43px, 10.4vw, 72px); line-height: 1.04; }
  .page-intro > .eyebrow { font-size: 11px; margin-bottom: 25px; }
  .intro-description { font-size: 15px; }
  .story-opening h1 { font-size: clamp(53px, 12.5vw, 88px); line-height: 1; }
  .story-opening-copy { padding-block: 48px; }
  .story-opening-copy > p:not(.eyebrow) { font-size: 15px; }
  .editorial-statement h2, .founder-copy > h2, .process-intro h2 { font-size: 38px; line-height: 1.08; }
  .principle-row h3 { font-size: 27px; }
  .quiet-cta h2, .brand-message h2 { font-size: 44px; }
  .process-row h2 { font-size: 37px; }
  .clarity-hero h1 { font-size: clamp(44px, 10.2vw, 72px); }
  .crew-title h2 { font-size: 29px; }
  .contact-method > a { font-size: clamp(23px, 6vw, 35px); }
  .contact-support h2 { font-size: 35px; }
  .faq-group h2 { font-size: 28px; }
  .journal-entry h2, .journal-index .journal-entry:first-child h2 { font-size: 33px; line-height: 1.12; }
  .journal-article h2 { font-size: 29px; }
  dialog h2 { font-size: 34px; }
}

@media (max-width: 370px) {
  :root { --gutter: 18px; }
  .header { gap: 7px; }
  .brand > .brand-name { font-size: 10px; }
  .brand { gap: 6px; }
  .brand .brand-astronaut { width: 17px; height: 25px; }
  .header-actions .icon-button { width: 30px; }
  .cart-button { width: 28px; }
  .menu-toggle { width: 30px; }
  .nocturne-hero h1 { font-size: 11.8vw; }
  .nocturne-hero-bottom > p { font-size: 10px; }
  .nocturne-footer-links { gap: 16px; }
  .nocturne-footer-links a { font-size: 11px; }
  .nocturne-footer-wordmark { font-size: 11.7vw; }
  .product-info h1 { font-size: 36px; }
  .product-card h3 { font-size: 12px; }
  .nocturne-grid, .catalog .product-grid { gap: 28px 12px; }
}

@media (max-height: 700px) and (min-width: 801px) {
  .nocturne-hero { min-height: 460px; }
  .nocturne-hero-copy { bottom: 50px; }
  .nocturne-hero-bottom { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nocturne-hero *, .nocturne-feature-image img, .product-image img,
  .product-explore, .text-link svg, .js-motion .reveal {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  .js-motion .reveal { opacity: 1; }
}