/* Each sheet follows the proportions of its approved design. Coordinates
   belong to the sheet, so the composition scales with its actual width. */
.sheet {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 1086px;
  margin-inline: auto;
  color: #20170f;
  background: #f2e2d1 url("paper-light.webp") center / 100% 100% no-repeat;
  --bronze: #784b27;
  --hairline: #a36d466e;
}
.sheet.short { aspect-ratio: 3 / 4; }
.sheet.tall { aspect-ratio: 941 / 1672; }
main > section + .sheet::before,
main > section + .sheet::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
main > section + .sheet::before {
  z-index: 5;
  inset: -2px 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #bd865300, #bf8a5530 26%, #c58f586e 57%, #dba66dbb 83%, #edc38de8);
  clip-path: polygon(0 50%, 25% 46%, 60% 33%, 100% 0, 100% 100%, 60% 67%, 25% 54%);
}
main > section + .sheet::after {
  z-index: 4;
  inset: -4px 0 auto;
  height: 8px;
  background: radial-gradient(ellipse at right, #eab38270, #eab38200 69%);
  filter: blur(1.5px);
}
@media (min-width: 768px) {
  .sheet { width: min(100%, max(660px, 75svh)); }
}
.sheet :is(h2,h3,p,figure,ul) { margin: 0; }
.sheet ul { padding: 0; list-style: none; }
.placed {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  width: var(--w);
  height: var(--h, auto);
}
.sheet .cover__brand {
  z-index: 1;
  color: var(--ink);
}
.sheet .maker {
  position: absolute;
  z-index: 1;
  left: 7.2%;
  top: 6.8%;
  color: var(--bronze);
  font: 600 2.43cqw / 1 var(--sans);
  letter-spacing: .26em;
}
.sheet.screen-03 .maker { top: 7.8%; }
.sheet.screen-07 .maker { top: 7.65%; font-size: 2.0cqw; }
.title {
  z-index: 1;
  color: var(--bronze);
  font: 400 var(--size) / .98 var(--serif);
  letter-spacing: -.023em;
}
.split-title strong { display: block; font: inherit; color: #76370e; }
.classic-title { color: #1f140c; }
.classic-title strong { font-size: 2.16em; line-height: .88; letter-spacing: -.035em; }
.geometry-title strong { font-size: 1.8em; line-height: .83; }
.copy {
  z-index: 1;
  border-inline-start: 1px solid var(--hairline);
  padding-inline-start: 4.95cqw;
  font: 400 2.65cqw / 1.28 var(--sans);
}
.screen-02 .copy { font-size: 2.47cqw; }
.screen-02 .qualification { font-size: max(8px, 1.45cqw); padding: 0; border: 0; color: #503623; }
.screen-03 .copy { font-size: 2.73cqw; }
.screen-05 .copy { padding-block: 4.3cqw 5.7cqw; padding-inline-start: 4.3cqw; font-size: 3.02cqw; }
.screen-06 .copy { padding-inline-start: 5.25cqw; font-size: 3.05cqw; }
.short .copy { padding-inline-start: 5.35cqw; font-size: 2.48cqw; }
.screen-10 .copy { padding-inline-start: 4.7cqw; font-size: 2.29cqw; }
.frame {
  overflow: hidden;
  border-radius: 2.8cqw;
  box-shadow: 0 1.45cqw 2.05cqw #62452e38;
  border: 1px solid #fff4e5d9;
  background-color: #d9c4af;
}
.frame img, .full-scene img, .production-hero img, .production-detail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.screen-02 .frame:first-of-type img { object-position: 50% 56%; }
.screen-02 .frame:nth-of-type(2) img { object-position: 50% 58%; }
.screen-03 .frame img { object-position: 50% 55%; }
.screen-04 .frame:nth-of-type(2) img { object-position: 51% 55%; }
.screen-06 .frame:nth-of-type(2) img { object-position: 62% 52%; }

.icon {
  display: block;
  width: 6.2cqw;
  height: 6.2cqw;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--bronze);
}
.features {
  z-index: 1;
  display: grid;
  grid-auto-columns: minmax(0,1fr);
  grid-auto-flow: column;
  color: #21170f;
  font: 400 2.47cqw / 1.2 var(--sans);
}
.features li { min-width: 0; }
.features li + li { border-inline-start: 1px solid var(--hairline); }
.features.five { font-size: 2.26cqw; text-align: center; }
.five li { padding-inline: .4cqw; }
.five .icon { margin: 0 auto .8cqw; width: 6.6cqw; height: 6.1cqw; }
.features.two-by-two {
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
  row-gap: 4.9cqw;
  font-size: 2.69cqw;
}
.two-by-two li {
  display: flex;
  align-items: center;
  gap: 3.7cqw;
  padding-inline-start: 0;
  border-inline-start: 0;
}
.two-by-two li:nth-child(even) { border-inline-start: 1px solid var(--hairline); padding-inline-start: 7.3cqw; }
.features.stack {
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  font-size: 2.9cqw;
}
.stack li {
  display: flex;
  align-items: center;
  gap: 5cqw;
}
.stack li + li { border-inline-start: 0; border-top: 1px solid var(--hairline); }
.stack .icon { width: 7.2cqw; height: 7.2cqw; }
.features.mirror-features {
  font-size: 3.05cqw;
  border-inline-start: 1px solid var(--hairline);
  padding-inline-start: 5.2cqw;
}
.mirror-features li { gap: 4cqw; }
.trench-row {
  display: grid;
  grid-template-columns: 64% 36%;
  align-items: center;
}
.trench-row img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: right center;
  padding-inline-end: 3.65cqw;
  filter: drop-shadow(0 1.5cqw 1.5cqw #54351e36);
}
.trench-row figcaption {
  border-inline-start: 1px solid var(--hairline);
  margin-inline-start: 2.3cqw;
  padding-inline-start: 3.55cqw;
  font: 400 3.18cqw / 1.18 var(--sans);
}
.trench-row .icon { margin-bottom: .85cqw; }
.trench-row small {
  display: table;
  padding: .85cqw 2.2cqw;
  margin-block-start: 1.7cqw;
  border: 1px solid #a26b438c;
  border-radius: 100px;
  color: var(--bronze);
  text-align: center;
  font-size: .69em;
  line-height: 1.1;
}
.trench-footer { font-size: 3cqw; }
.trench-footer li { display: flex; align-items: center; gap: 5.2cqw; }
.trench-footer .icon {
  width: 8cqw;
  height: 7cqw;
  padding-inline-end: 1cqw;
  box-sizing: content-box;
  border-inline-end: 1px solid var(--hairline);
}
.art-features li, .wide-features li {
  display: flex;
  align-items: center;
  gap: 3cqw;
}
.art-features li + li, .wide-features li + li { padding-inline-start: 4.2cqw; }
.art-features { font-size: 2.31cqw; }
.wide-features { font-size: 2.16cqw; }
.wide-features .icon { width: 5.65cqw; height: 5.65cqw; }
.screen-08 .maker, .screen-09 .maker { top: 7.65%; }
.glass-subtitle {
  color: #503420;
  font: 400 max(11px, 2.8cqw) / 1.2 var(--sans);
}
.glass-light img { object-position: right center; }
.glass-dark img { object-position: 50% 52%; }
.glass-open img { object-position: right center; }
.glass-features { font-size: max(9px, 2.18cqw); }
.glass-features li { align-items: flex-start; gap: 2.2cqw; }
.glass-features .icon { width: 5.2cqw; height: 5.2cqw; }
.glass-features strong {
  display: block;
  margin-block-end: .65cqw;
  color: var(--bronze);
  font-size: 1.08em;
}
.profile {
  background: linear-gradient(145deg,#c9b5a1,#e7d1be 75%,#c7ad96);
  box-shadow: none;
}
.profile img { position: absolute; inset: 0; }
.profile figcaption {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 1.3cqw 2.4cqw;
  min-height: 8.6cqw;
  width: 100%;
  background: #ecd6c2e3;
  font: 400 2.02cqw / 1.16 var(--sans);
}
.profile .icon { width: 4.5cqw; height: 4.5cqw; }
.round-approved img, .square-approved img { height: calc(100% - 8.4cqw); object-position: center; }
.rect-approved img, .flat-approved img { height: calc(100% - 8.4cqw); }


.production-copy p + p { margin-block-start: 1.85cqw; font-size: .84em; }
.screen-13 .production-copy { z-index: 3; padding-inline-start: 2.55cqw; font-size: 2.78cqw; }
.production-hero { z-index: 2; clip-path: polygon(0 61%,24% 27%,100% 0,100% 94%,65% 100%); }
.production-hero img { object-position: 70% 45%; }
.production-detail { overflow: hidden; clip-path: polygon(0 0,42% 20%,100% 61%,0 100%); }
.production-detail img { object-position: 45% 52%; }
.production-features { text-align: center; font-size: 2.6cqw; }
.production-features .icon { margin: 0 auto 1cqw; }
.screen-14 .title { color: #43290f; white-space: nowrap; }
.showroom-subtitle { color: #492f19; font: italic 3.75cqw / 1.1 var(--serif); }
.screen-14 .showroom-copy { padding-inline-start: 0; border: 0; color: #503420; font-size: 2.78cqw; line-height: 1.26; }
.showroom-frame { border-radius: .65cqw; }
.showroom-frame img { object-position: 50% 0%; }
.screen-14 .frame:nth-of-type(2) img { object-position: 50% 37%; }
.contacts { font: 700 2.82cqw / 1.16 var(--serif); color: #452b17; }
.contacts h3 { font: 400 4.4cqw / 1.05 var(--serif); margin-block-end: 2cqw; }
.contacts ul { background: #f9ead9b3; border-radius: .85cqw; }
.contacts li { border-block-start: 1px solid var(--hairline); }
.contacts li + li { font-size: 1.08em; }
.contacts a {
  display: flex;
  align-items: flex-start;
  gap: 1.45cqw;
  padding: 1.7cqw 1.2cqw;
  color: inherit;
  text-decoration: none;
}
.contacts a:hover { text-decoration: underline; }
.contacts a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.contacts .icon { width: 3.15cqw; height: 3.15cqw; color: inherit; }
.showroom-rule { border-top: 1px solid #6c4f38; }

@media (max-width: 540px) {
  .sheet .maker { font-size: max(8px, 2.43cqw); }
  .sheet.screen-07 .maker { font-size: max(8px, 2cqw); }
  .screen-14 .showroom-detail { width: 44%; }
  .screen-14 .contacts { inset-inline-start: 53%; width: 41%; }
  .contacts { font-size: max(11px, 2.82cqw); }
  .contacts a { min-height: 32px; }
  .features.five { font-size: max(8px, 2.26cqw); }
  .screen-02 .copy:not(.qualification) { font-size: max(9px, 2.55cqw); }
}

@media (max-width: 360px) {
  .contacts h3 { margin-block-end: 1.8cqw; }
  .contacts a { gap: 1.25cqw; padding-block: 1.5cqw; min-height: 27px; }
  .contacts .icon { width: 2.8cqw; height: 2.8cqw; }
}

/* Reserve a footer while keeping the approved composition in its original aspect ratio. */
.sheet.has-catalog {
  --catalog-height: clamp(40px, 6vw, 56px);
  box-sizing: content-box;
  border-block-end: var(--catalog-height) solid transparent;
  background-origin: border-box;
}
.catalog-link {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 6%;
  z-index: 1;
  min-height: var(--catalog-height);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font: 600 max(12px, 2.15cqw) / 1.2 var(--sans);
  color: #633816;
  text-decoration: underline;
  text-decoration-color: #98653f90;
  text-underline-offset: .24em;
}
.catalog-link .icon { width: 1.2em; height: 1.2em; stroke-width: 1.5; }
.catalog-link:hover { text-decoration-color: currentColor; }
.catalog-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.cast-iron-subtitle {
  color: #503420;
  font: 400 max(11px, 2.8cqw) / 1.24 var(--sans);
}
.cast-iron-room img { object-position: 55% 47%; }
.cast-iron-products {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 2.2cqw;
}
.cast-iron-products img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center 70%;
}
.cast-iron-products img:first-child { mix-blend-mode: multiply; }
.cast-iron-products img:last-child { filter: drop-shadow(0 .8cqw 1cqw #54351e40); }
.cast-iron-features {
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
  gap: 2.6cqw 4cqw;
  font-size: max(11px, 2.45cqw);
  line-height: 1.22;
}
.cast-iron-features li {
  display: flex;
  align-items: flex-start;
  gap: 1.9cqw;
  border-block-start: 1px solid var(--hairline);
  padding-block-start: 1.3cqw;
}
.cast-iron-features li + li { border-inline-start: 0; }
.cast-iron-features strong {
  display: block;
  margin-block-end: .45cqw;
  font-weight: 600;
  color: #633816;
}
.cast-iron-features .icon { width: 4.9cqw; height: 4.9cqw; }

@media (max-width: 540px) {
  .sheet .copy:not(.qualification) { font-size: max(10px, 2.65cqw); }
  .features:not(.five):not(.cast-iron-features) { font-size: max(9px, 2.35cqw); }
}

@media (max-width: 380px) {
  .screen-10 .wide-features { inset-block-start: 88.7%; }
  .sheet.screen-12 { aspect-ratio: 1 / 2.08; }
}