/* GLAMËA: framed navigation, a gallery setting, and approved product details. */
.site-header {
  background: rgba(255, 251, 254, .97);
  border-bottom: 1px solid #d9c2cf;
  box-shadow: 0 3px 22px #421a3109;
}
.header-inner { gap: 28px; padding-top: 17px; padding-bottom: 17px; }
.main-nav { gap: 10px; }
.main-nav a {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 12px 22px;
  border: 1px solid #ccb298;
  border-radius: 5px;
  color: #663653;
  background: linear-gradient(145deg, #fff, #f7edf3);
  box-shadow: inset 0 0 0 3px #fff9, 0 3px 10px #54203c06;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
  transition: background .2s, color .2s, box-shadow .2s;
}
.main-nav a:hover {
  color: #4c1b3e;
  border-color: #ab8551;
  background: #f0dfea;
  box-shadow: inset 0 0 0 3px #fff7, 0 5px 16px #54203c12;
}
.main-nav a[aria-current] {
  color: #fff9fc;
  border-color: #b8945f;
  background: linear-gradient(125deg, #51213f, #792f64);
  box-shadow: inset 0 0 0 3px #ffffff0f, 0 4px 14px #54203c17;
}
.button { border-radius: 5px; box-shadow: inset 0 0 0 3px #ffffff12, 0 5px 18px #5b224321; }
.button-light { box-shadow: inset 0 0 0 3px #fff7; }
.home-hero {
  padding: 24px 0 34px;
  background: radial-gradient(ellipse at 24% 65%, #f0e1e9 0, #faf4f7 53%, #eee0e6 100%);
  border-bottom: 1px solid #dfc9d5;
}
.home-hero .hero-grid {
  max-width: 1600px;
  grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
  gap: clamp(24px, 3vw, 50px);
  padding-right: clamp(22px, 2.2vw, 36px);
}
.home-hero .hero-copy { padding: 40px 0; }
.home-hero h1 { font-size: clamp(48px, 5vw, 76px); line-height: 1.06; margin-bottom: 24px; }
.home-hero .lead { font-size: 19px; max-width: 36ch; }
.home-hero .actions { gap: 20px; flex-wrap: wrap; }
.home-hero .button { font-size: 16px; padding: 15px 21px; gap: 20px; }
.home-hero .hero-detail { color: #72503f; font-size: 14px; letter-spacing: .045em; }
.hero-scene {
  position: relative;
  min-width: 0;
  width: 100%;
  align-self: center;
  overflow: hidden;
  border: 1px solid #c4a689;
  border-radius: 11px;
  background: #e4d0d0;
  box-shadow: 0 18px 40px #4a26331b, 0 0 0 5px #fff7;
}
.hero-scene > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.hero-scene figcaption {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 15px;
  align-items: end;
  padding: 17px 21px;
  border-top: 1px solid #d9c6ad;
  background: #fffbf4;
}
.hero-scene .scene-caption-label { grid-column: 1 / -1; font-family: var(--sans); color: #6a4b3d; font-size: 12px; letter-spacing: .14em; }
.hero-scene figcaption > span:not(.scene-caption-label) { font-family: var(--serif); font-size: 27px; line-height: 1.15; }
.hero-scene figcaption br { display: none; }
.hero-scene figcaption small { font-size: 12px; color: #6b5c58; }
.intent-card, .machine-card, .variant-card { border-radius: 9px; overflow: hidden; }
.intent-card { border-color: #d8c1cf; box-shadow: 0 7px 25px #4e29430a; }
.machine-card, .variant-card { border-color: #dcc6d3; box-shadow: 0 7px 25px #4e294307; }
.variant-dimensions { color: var(--plum) !important; font-variant-numeric: tabular-nums; }
.range-shortcuts a, .section-nav a { text-decoration: none; border: 1px solid #d3bda6; border-radius: 4px; padding: 9px 15px; background: #ffffffad; }
.range-shortcuts a:hover, .section-nav a:hover { background: #f0e2eb; border-color: #a58050; }
.range-shortcuts { gap: 10px; }
.section-nav > .container { padding-top: 17px; padding-bottom: 17px; gap: 10px; }
.illustrated-journeys .journey { border: 1px solid #dac3d1; border-radius: 10px; padding: 32px; box-shadow: 0 10px 28px #51244208; }
.illustrated-journeys h3 { margin-bottom: 25px; }
.journey-visual { border: 1px solid #e2d3dc; border-radius: 6px; overflow: hidden; background: #f7eff5; }
.journey-visual img { width: 100%; height: auto; }
.illustrated-journeys .steps { margin-top: 27px; }
.illustrated-journeys .steps > li > span { border-color: #cba88f; background: #fff9fc; color: #722956; }
.workflow-note { font-size: 15px; color: var(--muted); max-width: 92ch; margin: 28px 0 0; }
.packaging-grid, .loading-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: start; }
.packaging-format { padding: 30px; border: 1px solid #d3b898; border-radius: 8px; background: linear-gradient(145deg, #fffefd, #f4e7ef); box-shadow: inset 0 0 0 4px #fff8; }
.packaging-format .mini-label { font-size: 13px; line-height: 1.6; }
.packaging-size { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--plum); font-size: 64px; line-height: 1.12; margin: 20px 0 25px; }
.packaging-size > span { font-size: .6em; color: #a58259; }
.packaging-size small { display: block; font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--muted); margin-top: 7px; }
.packaging-copy h3, .loading-grid h3 { font-family: var(--serif); font-size: 31px; margin-bottom: 20px; }
.packaging-copy p, .loading-grid p:not(.fine-print) { color: var(--muted); }
.packaging-copy h3:not(:first-child) { margin-top: 32px; }
.loading-grid .specs { margin-top: 0; }
.packaging-format .specs dt, .loading-grid .specs dt { max-width: 70%; }
.packaging-format .specs dd, .loading-grid .specs dd { font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .main-nav a { padding: 12px 15px; }
  .header-inner { gap: 22px; }
  .home-hero .hero-grid { gap: 25px; }
  .home-hero .lead { font-size: 18px; }
  .hero-scene > img { aspect-ratio: 1 / 1.05; }
  .hero-scene figcaption { padding: 15px; }
  .hero-scene figcaption small { grid-column: 1 / -1; }
  .hero-scene figcaption > span:not(.scene-caption-label) { font-size: 25px; }
  .packaging-grid, .loading-grid { gap: 38px; }
}
@media (max-width: 860px) {
  .header-inner { min-height: 84px; flex-wrap: wrap; }
  .main-nav { display: none; flex-basis: 100%; width: 100%; gap: 12px; margin-top: 4px; padding-top: 16px; }
  .main-nav.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-nav a { width: 100%; padding: 14px 18px; font-size: 16px; white-space: normal; text-align: center; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 11px 17px; border: 1px solid #bea07f; border-radius: 5px; background: linear-gradient(135deg, #fff, #f2e3ec); color: #642e52; min-height: 46px; box-shadow: inset 0 0 0 3px #fff8; }
  .menu-toggle[aria-expanded=true] { background: #eddae7; }
  .home-hero .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .home-hero h1 { font-size: 45px; }
  .home-hero .hero-copy { padding: 30px 0; }
  .home-hero .hero-detail { font-size: 13px; }
  .hero-scene > img { aspect-ratio: 1 / 1.15; }
  .hero-scene figcaption br { display: block; }
  .illustrated-journeys .journey { padding: 25px; }
  .packaging-grid { gap: 30px; }
  .packaging-format { padding: 24px; }
  .packaging-size { font-size: 51px; }
}
@media (max-width: 640px) {
  .home-hero { padding: 0 0 24px; }
  .home-hero .hero-grid { grid-template-columns: minmax(0, 1fr); padding-right: var(--gutter); gap: 0; }
  .home-hero .hero-copy { padding: 33px 0 27px; }
  .home-hero h1 { font-size: clamp(47px, 11.5vw, 64px); line-height: 1.06; }
  .home-hero .lead { font-size: 18px; max-width: 36ch; }
  .home-hero .hero-detail { margin-top: 22px; font-size: 13px; letter-spacing: .035em; }
  .home-hero .actions { gap: 21px; }
  .home-hero .button { padding: 14px 20px; }
  .hero-scene { aspect-ratio: auto; }
  .hero-scene > img { aspect-ratio: 1 / 1.15; object-position: center; }
  .hero-scene figcaption { gap: 5px; padding: 13px 15px; }
  .hero-scene figcaption > span:not(.scene-caption-label) { font-size: 25px; }
  .hero-scene figcaption br { display: none; }
  .hero-scene .scene-caption-label { font-size: 12px; letter-spacing: .1em; }
  .hero-scene figcaption small { font-size: 12px; }
  .packaging-grid, .loading-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .packaging-size { font-size: 60px; }
  .packaging-format { padding: 26px; }
  .packaging-copy h3, .loading-grid h3 { font-size: 29px; }
  .workflow-note { font-size: 15px; }
  .illustrated-journeys .journey { padding: 24px; }
  .range-shortcuts a, .section-nav a { padding: 10px 13px; min-height: 44px; }
}
@media (max-width: 360px) {
  .main-nav.is-open { grid-template-columns: minmax(0, 1fr); }
  .packaging-format { padding: 22px; }
  .packaging-size { font-size: 50px; }
  .hero-scene figcaption > span:not(.scene-caption-label) { font-size: 23px; }
}