/* Rose-Nel brand catalogue sheet - designed on a 1084 x 1600 canvas.
   Everything is sized in --u (1 design pixel), so the sheet scales to any width. */
.sheet-wrap { container-type: inline-size; width: 100%; }
.sheet { --u: calc(100cqw / 1084); }
.sheet.fixed { --u: 1px; width: 1084px; height: 1600px; }
.sheet {
  width: 100%; aspect-ratio: 1084 / 1600; position: relative; overflow: hidden;
  background: #121316; color: #E9EAEC; font-family: "Roboto Condensed", "Oswald", "Arial Narrow", sans-serif;
  display: grid;
  grid-template-rows: calc(var(--u) * 148) calc(var(--u) * 532) calc(var(--u) * 445) calc(var(--u) * 220) calc(var(--u) * 180) calc(var(--u) * 75);
  line-height: 1.25; text-align: left;
}
.sheet * { box-sizing: border-box; margin: 0; padding: 0; }
.sheet > section, .sheet > header, .sheet > footer { position: relative; min-height: 0; overflow: hidden; }
.s-glow { color: #F0D8B4; text-shadow: 0 0 calc(var(--u) * 14) rgba(240, 216, 180, .45), 0 0 calc(var(--u) * 3) rgba(240, 216, 180, .35); }
.sheet .rule-top { border-top: calc(var(--u) * 2) solid #7d6240; }

/* header */
.s-head { background: #0B0B0B; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 22) 0 calc(var(--u) * 20); }
.s-head img { height: calc(var(--u) * 118); width: auto; display: block; }
.s-head .r { text-align: center; }
.s-head .r b { display: block; font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: calc(var(--u) * 40); letter-spacing: .12em; white-space: nowrap; }
.s-head .r span { display: block; font-family: "Oswald", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; font-size: calc(var(--u) * 15.4); color: #b38a5a; margin-top: calc(var(--u) * 8); white-space: nowrap; }

/* hero */
.s-hero { background: #131417; display: grid; grid-template-columns: calc(var(--u) * 676) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: calc(var(--u) * 22) calc(var(--u) * 0) calc(var(--u) * 22) calc(var(--u) * 30); border-top: calc(var(--u) * 2) solid #7d6240; }
.s-hero .ph { width: calc(var(--u) * 642); height: calc(var(--u) * 488); border: calc(var(--u) * 5) solid #B49060; background: #000; position: relative; }
.s-hero .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-hero .col { padding: calc(var(--u) * 8) calc(var(--u) * 18) 0 calc(var(--u) * 14); }
.s-name { height: calc(var(--u) * 80); display: flex; align-items: flex-end; justify-content: center; text-align: center; font-family: "Cinzel", Georgia, serif; font-weight: 500; text-transform: uppercase; font-size: calc(var(--u) * 50); line-height: .98; letter-spacing: .02em; }
.s-div { display: flex; align-items: center; margin: calc(var(--u) * 6) calc(var(--u) * 4) calc(var(--u) * 8); color: #B49060; }
.s-div::before, .s-div::after { content: ""; flex: 1; height: calc(var(--u) * 2); background: #B49060; }
.s-div i { font-style: normal; font-size: calc(var(--u) * 20); padding: 0 calc(var(--u) * 6); line-height: 1; }
.s-spec { display: grid; grid-template-columns: calc(var(--u) * 148) 1fr; row-gap: 0; font-size: calc(var(--u) * 19.5); }
.s-spec dt { text-transform: uppercase; height: calc(var(--u) * 35); display: flex; align-items: center; letter-spacing: .01em; }
.s-spec dd { height: calc(var(--u) * 35); display: flex; align-items: center; color: #dfe0e3; }
.s-spec dd.sm { font-size: calc(var(--u) * 17); }

/* pedigree band */
.s-ped { background: #131417; display: grid; grid-template-columns: calc(var(--u) * 500) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: calc(var(--u) * 16) 0 0 calc(var(--u) * 28); border-top: calc(var(--u) * 2) solid #7d6240; position: relative; }
.s-photos { display: grid; grid-template-columns: calc(var(--u) * 235) calc(var(--u) * 235); gap: calc(var(--u) * 10); align-content: start; }
.s-photos .f { height: calc(var(--u) * 408); border: calc(var(--u) * 4) solid #B49060; background: #000; position: relative; overflow: hidden; }
.s-photos .f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-photos .f .lb { position: absolute; left: calc(var(--u) * 8); top: calc(var(--u) * 6); font-size: calc(var(--u) * 15); font-weight: 600; color: #fff; text-shadow: 0 0 calc(var(--u) * 4) #000, 0 0 calc(var(--u) * 6) #000; letter-spacing: .04em; }
.s-ped.has-note .s-photos .f { height: calc(var(--u) * 352); }
.s-note { position: absolute; left: calc(var(--u) * 28); width: calc(var(--u) * 800); top: calc(var(--u) * 394); font-size: calc(var(--u) * 30); line-height: 1.12; white-space: nowrap; font-weight: 400; color: #fff; text-shadow: 0 0 calc(var(--u) * 14) rgba(240, 216, 180, .55); padding-top: calc(var(--u) * 6); }
.s-pedcol { padding-left: calc(var(--u) * 5); position: relative; }
.s-pedcol .h { display: flex; align-items: center; gap: calc(var(--u) * 16); margin: calc(var(--u) * 4) calc(var(--u) * 6) calc(var(--u) * 14) 0; font-family: "Cinzel", Georgia, serif; font-size: calc(var(--u) * 24); letter-spacing: .12em; color: #9C7854; justify-content: center; }
.s-pedcol .h::before, .s-pedcol .h::after { content: ""; flex: 1; height: calc(var(--u) * 2); background: #7d6240; }
.pg { display: grid; grid-template-columns: calc(var(--u) * 76) calc(var(--u) * 180) calc(var(--u) * 68) calc(var(--u) * 180); align-items: center; height: calc(var(--u) * 156); margin-bottom: calc(var(--u) * 19); }
.pg .tw { display: flex; align-items: center; gap: calc(var(--u) * 7); }
.pg .tg { background: #B49060; color: #fff; font-weight: 700; font-size: calc(var(--u) * 17); padding: calc(var(--u) * 3) calc(var(--u) * 8); text-align: center; letter-spacing: .03em; line-height: 1.15; }
.pg .ar { color: #cfd1d6; font-style: normal; font-size: calc(var(--u) * 20); line-height: 1; }
.bx { border: calc(var(--u) * 2) solid #cfd1d6; background: #16171B; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; text-transform: uppercase; font-size: calc(var(--u) * 17); line-height: 1.15; padding: calc(var(--u) * 4) calc(var(--u) * 6); height: calc(var(--u) * 66); overflow: hidden; letter-spacing: .01em; }
.pg .gps { display: grid; gap: calc(var(--u) * 24); }
.pg svg { width: 100%; height: calc(var(--u) * 156); display: block; }
.pg svg path { stroke: #cfd1d6; fill: none; stroke-width: 1.4; }
.pg svg polygon { fill: #cfd1d6; }
.pg .mid { height: calc(var(--u) * 66); }

/* about / features */
.s-about { background: #131417; display: grid; grid-template-columns: calc(var(--u) * 448) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); border-top: calc(var(--u) * 2) solid #7d6240; }
.s-about .a { min-height: 0; padding: calc(var(--u) * 10) calc(var(--u) * 16) 0 calc(var(--u) * 10); border-right: calc(var(--u) * 2) solid #7d6240; margin: calc(var(--u) * 12) 0; display: flex; flex-direction: column; }
.s-about .a .h, .s-about .k .h { display: flex; align-items: center; gap: calc(var(--u) * 14); font-family: "Cinzel", Georgia, serif; font-size: calc(var(--u) * 22); letter-spacing: .12em; color: #9C7854; justify-content: center; margin-bottom: calc(var(--u) * 10); flex: none; }
.s-about .h::before, .s-about .h::after { content: ""; flex: 1; height: calc(var(--u) * 2); background: #7d6240; }
.s-about .a p { font-size: calc(var(--u) * 20); line-height: 1.34; color: #dedfe3; overflow: hidden; flex: 1; min-height: 0; }
.s-about .k { padding: calc(var(--u) * 14) calc(var(--u) * 22) 0 calc(var(--u) * 28); }
.s-about .k .h { margin-bottom: calc(var(--u) * 10); }
.s-feat { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 5) calc(var(--u) * 10); }
.s-feat li { display: flex; align-items: center; gap: calc(var(--u) * 12); font-size: calc(var(--u) * 19.5); min-height: calc(var(--u) * 31); line-height: 1.12; }
.s-feat svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); flex: none; stroke: #B49060; fill: none; stroke-width: 1.8; }

/* info band */
.s-info { background: #0e0e10; display: grid; grid-template-columns: calc(var(--u) * 356) calc(var(--u) * 322) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); border-top: calc(var(--u) * 2) solid #7d6240; }
.s-info > div { border-left: calc(var(--u) * 2) solid #7d6240; margin: calc(var(--u) * 12) 0; }
.s-info > div:first-child { border-left: 0; }
.s-price { text-align: center; padding-top: calc(var(--u) * 2); }
.s-price .l, .s-loc .l { font-family: "Oswald", sans-serif; font-weight: 300; letter-spacing: .22em; font-size: calc(var(--u) * 36); color: #9C7854; text-transform: uppercase; line-height: 1; }
.s-price .v { font-family: "Cinzel", Georgia, serif; font-weight: 400; font-size: calc(var(--u) * 64); letter-spacing: .06em; line-height: 1.1; margin-top: calc(var(--u) * 14); white-space: nowrap; }
.s-price .n { font-family: "Cinzel", Georgia, serif; font-size: calc(var(--u) * 12); letter-spacing: .08em; color: #E9EAEC; margin-top: calc(var(--u) * 6); text-transform: uppercase; }
.s-loc { padding: calc(var(--u) * 2) 0 0 calc(var(--u) * 20); }
.s-loc .l { margin-left: calc(var(--u) * 8); }
.s-loc .b { display: flex; align-items: center; gap: calc(var(--u) * 24); margin-top: calc(var(--u) * 14); }
.s-loc svg { width: calc(var(--u) * 50); height: calc(var(--u) * 62); flex: none; stroke: #B49060; fill: none; stroke-width: 1.8; margin-left: calc(var(--u) * 6); }
.s-loc .t { font-size: calc(var(--u) * 26); line-height: 1.12; }
.s-ct { padding: calc(var(--u) * 6) 0 0 calc(var(--u) * 28); display: grid; align-content: space-evenly; font-size: calc(var(--u) * 19.5); }
.s-ct div { display: flex; align-items: center; gap: calc(var(--u) * 16); white-space: nowrap; }
.s-ct svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); flex: none; stroke: #B49060; fill: none; stroke-width: 1.8; }

.s-foot { background: #0B0B0B; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 24); border-top: calc(var(--u) * 2) solid #7d6240; font-weight: 300; letter-spacing: .01em; }

/* sold / reserved stamp */
.s-stamp { position: absolute; top: calc(var(--u) * 230); left: calc(var(--u) * 120); transform: rotate(-14deg); border: calc(var(--u) * 7) solid #d9b27a; color: #F0D8B4; font-family: "Cinzel", Georgia, serif; font-size: calc(var(--u) * 92); letter-spacing: .14em; padding: calc(var(--u) * 6) calc(var(--u) * 40); background: rgba(0, 0, 0, .55); text-shadow: 0 0 calc(var(--u) * 16) rgba(240, 216, 180, .5); z-index: 5; }

/* gradient text only when not exporting (html2canvas can't clip text) */
.sheet:not(.fixed) .s-glow.g { background: linear-gradient(180deg, #F0D8B4 0%, #E3C79c 40%, #B49060 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; filter: drop-shadow(0 0 calc(var(--u) * 10) rgba(240, 216, 180, .35)); }

/* cover + back pages for the digital catalogue */
.sheet.cover { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 38%, #2a1f14 0%, #0B0B0B 62%); border: 0; }
.sheet svg polygon { stroke: none; }
.sheet.cover .em { width: calc(var(--u) * 560); margin-bottom: calc(var(--u) * 10); }
.sheet.cover .t1 { font-family: "Cinzel", Georgia, serif; font-size: calc(var(--u) * 92); letter-spacing: .14em; margin-top: calc(var(--u) * 20); }
.sheet.cover .t2 { font-family: "Oswald", sans-serif; letter-spacing: .26em; color: #B49060; font-size: calc(var(--u) * 22); text-transform: uppercase; margin-top: calc(var(--u) * 22); }
.sheet.cover .t3 { font-size: calc(var(--u) * 28); color: #dcdde0; margin-top: calc(var(--u) * 60); line-height: 1.5; }
.sheet.cover .line { width: calc(var(--u) * 360); height: calc(var(--u) * 2); background: linear-gradient(90deg, transparent, #B49060, transparent); margin: calc(var(--u) * 34) 0; }
.sheet.cover .tg { font-family: "Oswald", sans-serif; letter-spacing: .1em; color: #9C7854; font-size: calc(var(--u) * 20); text-transform: uppercase; position: absolute; bottom: calc(var(--u) * 70); }
.sheet.cover .ct { font-size: calc(var(--u) * 30); line-height: 1.7; }
.sheet.cover .ct small { display: block; font-family: "Oswald", sans-serif; letter-spacing: .2em; color: #B49060; font-size: calc(var(--u) * 17); text-transform: uppercase; margin-top: calc(var(--u) * 20); }
