:root { color-scheme: dark; font-family: "Instrument Sans", Arial, sans-serif; --red: #bd111f; }
* { box-sizing: border-box; }
body { margin: 0; background: #161719; }
#reader { height: 100vh; height: 100dvh; display: grid; grid-template-rows: minmax(0,1fr) auto; background: radial-gradient(ellipse at 50% 35%, #373337, #171719 67%); }
#reader:fullscreen { width: 100%; height: 100%; }
#reader.expanded { position: fixed; inset: 0; z-index: 2; }
#viewport { display: flex; overflow: auto; padding: 16px 12px; touch-action: pan-y; user-select: none; scrollbar-width: none; }
#viewport::-webkit-scrollbar { display: none; }
#book-shell { flex: none; margin: auto; }
#book { filter: drop-shadow(0 12px 24px #0006); }
#book .stf__wrapper { height: 100%; }
.page { position: relative; width: 100%; height: 100%; background: #f8f8f7; color: #222427; container-type: inline-size; overflow: hidden; }
#book .--landscape .page.--simple:not([data-density="hard"])::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 5%;
  z-index: 1;
  pointer-events: none;
}
#book .--landscape .page.--simple.--left::after {
  right: 0;
  background: linear-gradient(to left, rgb(35 30 28 / 15%), rgb(35 30 28 / 4%) 42%, transparent);
}
#book .--landscape .page.--simple.--right::after {
  left: 0;
  background: linear-gradient(to right, rgb(35 30 28 / 11%), rgb(35 30 28 / 3%) 45%, transparent);
}
.page img { -webkit-user-drag: none; }
.page.--simple.--right { cursor: grab; }
.page.--simple.--left { cursor: grab; }
#viewport:active .page { cursor: grabbing; }
.page a { cursor: pointer; }
nav { position: relative; z-index: 1; justify-self: center; display: flex; align-items: center; gap: 2px; margin: 0 8px max(10px,env(safe-area-inset-bottom)); background: #252427; border: 1px solid #444247; border-radius: 13px; padding: 3px; }
button { cursor: pointer; border: 0; color: #f8f6f4; background: transparent; border-radius: 8px; min-width: 39px; height: 40px; font-size: 23px; }
button:hover:not(:disabled) { background: #403d42; }
button:disabled { opacity: .34; cursor: default; }
#reset, output { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
output { min-width: 62px; text-align: center; }
.divider { width: 1px; height: 20px; background: #525056; margin: 0 2px; }
.product-page .eyebrow {
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  color: #555960;
  font-size: 2cqw;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.35;
}
.product-page .eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #dadcde;
}
.cover { height: 100%; position: relative; isolation: isolate; overflow: hidden; padding: 9cqw; background: linear-gradient(158deg,#fff 12%,#e4e5e6 100%); }
.cover .brand { width: 21cqw; height: auto; display: block; }
.cover-heading { margin-top: 14cqw; }
.cover-heading h1, .cover-heading h2 { font-size: 5.4cqw; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; margin: 0; }
.cover-heading p { color: #8c1821; font-size: 2.65cqw; font-weight: 700; letter-spacing: .19em; margin: 2cqw 0 0; }
.cover-chair { position: absolute; z-index: -1; inset: 34cqw 0 0; width: 100%; height: calc(100% - 34cqw); object-fit: cover; object-position: center; mix-blend-mode: multiply; mask-image: linear-gradient(transparent,black 18%); }
.back-cover {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  justify-items: center;
  text-align: center;
  background: radial-gradient(ellipse at 50% 42%, #fff 10%, #f2f2f0 64%, #e2e3e2);
}
.back-cover-photo {
  position: relative;
  display: grid;
  place-items: center;
  width: min(67cqw, 100%);
  margin: 0;
}
.back-cover-photo::before {
  content: "";
  position: absolute;
  top: 77%;
  left: 17%;
  right: 17%;
  height: 5cqw;
  border-radius: 50%;
  background: rgb(40 34 29 / 23%);
  filter: blur(2.5cqw);
}
.back-cover-photo img {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse at center, black 61%, transparent 96%);
}
.back-cover .cover-heading { margin: 0; }
.back-cover .cover-heading h2 { font-size: 4.65cqw; }
.cover-site {
  width: 100%;
  border-top: 1px solid #9ba0a866;
  padding-top: 3cqw;
  margin-top: 5cqw;
  font-size: 2.65cqw;
  color: #42474e;
  text-decoration: none;
}
.editorial, .product-page { height: 100%; padding: 8cqw; display: flex; flex-direction: column; }
.editorial { background: linear-gradient(155deg,#fff 20%,#f0f0ef); }
.editorial header { border-bottom: 1px solid #d9dbdd; padding-bottom: 3cqw; }
.editorial header img { display: block; width: 20cqw; }
.editorial h2, .product-page h2 { font-size: 5.65cqw; font-weight: 650; margin: 5cqw 0 3cqw; line-height: 1.12; letter-spacing: -.035em; }
.editorial-body > p { margin: 0; font-size: 3.15cqw; line-height: 1.55; max-width: 73cqw; color: #494c50; }
.editorial-photo { margin: 6cqw 0 4cqw; display: grid; place-items: center; min-height: 0; background: radial-gradient(ellipse at 50% 26%,#fff,#e6e7e7); overflow: hidden; }
.about .editorial-photo { flex: 1; }
.editorial-photo img { height: 100%; width: 100%; min-height: 0; object-fit: contain; mix-blend-mode: multiply; }
.editorial footer, .product-page footer { border-top: 1px solid #d9dbdd; padding-top: 3cqw; font-size: 2.2cqw; color: #555960; font-weight: 650; letter-spacing: .09em; }
.contact h2 { margin-bottom: 6cqw; }
.contact dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 5cqw; }
.contact dl div { border-top: 1px solid #d9dbdd; padding: 3cqw 0; }
.contact .address { grid-column: 1 / -1; }
.contact dt { display: flex; align-items: center; gap: 1.25cqw; font-size: 2.45cqw; font-weight: 700; color: #555960; }
.contact dt svg { width: 3.5cqw; height: 3.5cqw; fill: none; stroke: #951d27; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.contact dd { margin: 1.1cqw 0 0 4.75cqw; font-size: 2.85cqw; line-height: 1.45; overflow-wrap: anywhere; }
.contact a { color: inherit; text-decoration: none; }
.contact a:hover, .cover-site:hover { text-decoration: underline; }
.contact-photo { flex: 1; min-height: 0; margin: 4cqw 0 0; background: radial-gradient(ellipse at 50% 30%,#fff,#e4e6e7); display: grid; place-items: center; overflow: hidden; }
.contact-photo img { width: 100%; height: 100%; min-height: 0; object-fit: contain; mix-blend-mode: multiply; }
.product-page h2 { margin: 2.7cqw 0 4.5cqw; }
.products {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(var(--count), minmax(0, 1fr));
  gap: 2.35cqw;
  margin-bottom: 4cqw;
}
.product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.product {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  align-items: center;
  gap: 2.5cqw;
  padding: 1.8cqw;
  border: 1px solid #e0e0de;
  border-radius: 1.1cqw;
  background: #fff;
}
.product-photo {
  position: relative;
  align-self: stretch;
  min-height: 0;
  background: #f3f3f2;
  border-radius: .65cqw;
}
.product-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 1.3cqw;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.product-copy { min-width: 0; }
.product-code { margin: 0 0 .6cqw; color: #6d7075; font-size: 1.85cqw; letter-spacing: .06em; font-weight: 650; }
.product h3 {
  margin: 0 0 1.15cqw;
  font-size: 3.45cqw;
  line-height: 1.12;
  letter-spacing: -.025em;
}
.product dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .42cqw .85cqw;
  margin: 0;
  color: #414448;
  font-size: 2.12cqw;
  line-height: 1.25;
}
.product dl > div { min-width: 0; }
.product .full-spec { grid-column: 1 / -1; }
.product dt, .product dd { display: inline; margin: 0; }
.product dt { font-weight: 650; }
.product dt::after { content: " · "; color: #777a80; }
.product .swatches { display: inline-flex; align-items: center; gap: .55cqw; vertical-align: middle; }
.swatches span { width: 1.65cqw; height: 1.65cqw; background: #9b8476; }
.swatches span:nth-child(2) { background: #323035; }
.swatches span:nth-child(3) { background: #000; }
.product-price {
  width: fit-content;
  max-width: 100%;
  margin: 1.3cqw 0 0;
  padding: .2cqw 1.8cqw .2cqw 1.45cqw;
  box-shadow: inset 0 0 0 1px #e6d6d8;
  border-inline-start: 1px solid #a1222f;
  border-radius: .55cqw;
  background:
    linear-gradient(90deg, #fbf7f7 18%, rgb(251 247 247 / 25%)),
    repeating-linear-gradient(135deg, #f4e7e9 0 .38cqw, #fcf8f8 .38cqw 1.05cqw);
  color: #811c27;
  font-size: 3.15cqw;
  font-weight: 750;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.footer-site { letter-spacing: .02em; }
.product-grid .product {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1.7cqw;
}
.product-grid .product h3 { font-size: 3.1cqw; }
.product-page footer { display: flex; justify-content: space-between; }
@media (max-width: 420px) { button { min-width: 34px; } }