/* =========================================================
   LinesheetPro: The Sheet
   A real, print-proportioned page (A4 @ ~120dpi = 1000x1294)
   rendered in HTML, then scaled to fit any frame.
   Everything below is authored in px against that 1000px
   canvas so the designs stay pixel-true at every size.
   ========================================================= */

.sheet-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--sheet-w) / var(--sheet-h);
  overflow: hidden;
  background: var(--paper);
  border-radius: inherit;
  flex: none;
}
.sheet-frame > .sheet {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  transform: scale(var(--s, .28));
}

.sheet {
  width: 1000px;
  height: 1294px;
  background: #fff;
  color: #16130F;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  --pad: 58px;
  --ink: #16130F;
  --dim: #7C736A;
  --hair: #E2DCD2;
  --tint: #F4EFE7;
}

.sheet * { box-sizing: border-box; }
.sheet p, .sheet h1, .sheet h2, .sheet h3, .sheet h4, .sheet ul, .sheet dl { margin: 0; }
.sheet ul { list-style: none; padding: 0; }
/* SVGs carry no width/height attribute, so they'd otherwise contribute a
   300px intrinsic min-width and blow out grid tracks. */
.sheet svg { display: block; width: 100%; height: auto; }
.sheet .g2 > *, .sheet .g3 > *, .sheet .g4 > * { min-width: 0; }

/* ---- shared atoms --------------------------------------- */

.s-mono {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1;
}
.s-rule { height: 1px; background: var(--hair); border: 0; }
.s-rule--ink { background: var(--ink); height: 1.5px; }

.sheet__head {
  padding: var(--pad) var(--pad) 0;
  flex: none;
}
.sheet__body { padding: 0 var(--pad); flex: 1; min-height: 0; }
.sheet__foot {
  padding: 0 var(--pad) var(--pad);
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.sheet__topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 16px;
}
.sheet__logo {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  line-height: 1;
}

/* ---- product cell --------------------------------------- */

.prod { display: flex; flex-direction: column; gap: 12px; }
.prod__img {
  position: relative;
  background: var(--tint);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* Let the art letterbox inside the well. An inline SVG with a viewBox
   honours preserveAspectRatio, so width+height 100% fits and centres
   it whatever the drawing's own proportions are. */
.prod__img { padding: 9%; }
.prod__img svg { width: 100%; height: 100%; }
.prod__tag {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: #fff;
  color: var(--ink);
  padding: 4px 7px;
  line-height: 1;
}
.prod__sku { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; color: var(--dim); }
.prod__name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin-top: 3px; }

.prod__rows { margin-top: 9px; display: grid; gap: 4px; }
.prod__row { display: grid; grid-template-columns: 62px 1fr; gap: 8px; font-size: 10.5px; line-height: 1.35; }
.prod__row dt { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em;
                text-transform: uppercase; color: var(--dim); padding-top: 1px; }
.prod__row dd { margin: 0; color: #3B342C; }

.prod__price {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.prod__wsl { font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.prod__rrp { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--dim); }

/* colour swatches */
.sw { display: flex; gap: 5px; margin-top: 8px; align-items: center; }
.sw__dot {
  width: 13px; height: 13px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.13);
  flex: none;
}
.sw__more { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; color: var(--dim); }

/* size run strip */
.sizes { display: flex; gap: 3px; flex-wrap: wrap; }
.sizes span {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .06em;
  padding: 3px 5px;
  border: 1px solid var(--hair);
  line-height: 1;
  color: #3B342C;
}

/* ---- cover page atoms ----------------------------------- */

.cover { display: flex; flex-direction: column; height: 100%; position: relative; }
.cover__mid { flex: 1; display: grid; place-items: center; position: relative; }
.cover__title {
  font-size: 92px;
  line-height: .92;
  letter-spacing: -.045em;
  font-weight: 400;
}
.cover__sub { max-width: 42ch; }

/* ---- generic grids -------------------------------------- */
.g2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.gap-s  { gap: 16px; }
.gap-m  { gap: 26px; }
.gap-l  { gap: 40px; }

/* =========================================================
   THEME 01 / AURELIA · Modern Minimal (womenswear)
   Bone paper, hairlines, huge whitespace, ink-thin type.
   ========================================================= */

.t-aurelia {
  --ink: #1A1714;
  --dim: #8B8378;
  --hair: #E6E1D8;
  --tint: #F5F2EC;
  --pop: #E2AEA3;
  background: #FCFAF6;
  --pad: 66px;
}
.t-aurelia .sheet__logo { font-weight: 400; letter-spacing: .42em; font-size: 18px; }
.t-aurelia .cover__title { font-family: var(--font-display); font-size: 118px; letter-spacing: -.05em; }
.t-aurelia .prod__img { background: var(--tint); aspect-ratio: 3 / 4; }
.t-aurelia .prod__name { font-weight: 500; letter-spacing: 0; }

/* the cover's thin cross-rules */
.t-aurelia .cross { position: absolute; inset: 0; pointer-events: none; }
.t-aurelia .cross i { position: absolute; background: var(--hair); }

/* =========================================================
   THEME 02 / LUMEN STUDIO · Technical Lighting Catalogue
   Warm charcoal, blueprint dimension lines, spec tables.
   ========================================================= */

.t-lumen {
  --ink: #F2EDE4;
  --dim: #9A9186;
  --hair: rgba(242,237,228,.18);
  --tint: #221F1B;
  --pop: #EFC141;
  background: #191714;
  color: #F2EDE4;
  --pad: 54px;
}
.t-lumen .sheet__logo { letter-spacing: .34em; font-weight: 500; }
.t-lumen .prod__img {
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(239,193,65,.16), transparent 62%),
    #201D19;
  aspect-ratio: 1 / 1;
}
.t-lumen .prod__row dd { color: #D9D2C7; }
.t-lumen .prod__tag { background: var(--pop); color: #191714; }
.t-lumen .sizes span { border-color: var(--hair); color: #D9D2C7; }
.t-lumen .cover__title { font-family: var(--font-body); font-weight: 200; letter-spacing: -.04em; }

/* spec table */
.spec { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.spec th, .spec td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hair); }
.spec th { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em;
           text-transform: uppercase; color: var(--dim); font-weight: 400; }
.spec td { color: #D9D2C7; }
.spec tr:last-child td { border-bottom: 0; }
.spec .num { font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em; }

/* dimension callouts */
.dim-line { position: absolute; color: var(--pop); opacity: .85; }

/* =========================================================
   THEME 03 / BOLT · Pop Art (graphic streetwear)
   Ben-Day dots, 3px keylines, candy blocks, chunky grotesk.
   ========================================================= */

.t-bolt {
  --ink: #14100C;
  --dim: #6D6458;
  --hair: #14100C;
  --tint: #FFF7E4;
  --pop: #CE8879;
  background: #FFFBF2;
  --pad: 44px;
  --dots: radial-gradient(#14100C 1.6px, transparent 1.7px);
}
.t-bolt .sheet__head { padding-top: 40px; }
.t-bolt .sheet__logo {
  font-family: "Archivo Black", var(--font-body);
  font-size: 30px; letter-spacing: -.02em; text-transform: uppercase; font-weight: 400;
}
.t-bolt .cover__title {
  font-family: "Archivo Black", var(--font-body);
  font-size: 132px; line-height: .82; letter-spacing: -.045em; text-transform: uppercase;
}
.t-bolt .prod__img {
  border: 3px solid #14100C;
  aspect-ratio: 1 / 1;
  background-image: var(--dots);
  background-size: 9px 9px;
  background-color: var(--cell, #E2AEA3);
}
.t-bolt .prod__name {
  font-family: "Archivo Black", var(--font-body);
  font-weight: 400; text-transform: uppercase; font-size: 15px; letter-spacing: -.01em;
}
.t-bolt .prod__tag { border: 2px solid #14100C; background: #FFF; font-weight: 700; padding: 4px 8px; }
.t-bolt .prod__price { border-top: 2px solid #14100C; }
.t-bolt .prod__wsl { font-family: "Archivo Black", var(--font-body); font-weight: 400; font-size: 17px; }
.t-bolt .sizes span { border: 1.5px solid #14100C; font-weight: 700; }
.t-bolt .s-rule { background: #14100C; height: 2px; }

.bolt-badge {
  display: inline-grid; place-items: center;
  background: #14100C; color: #FFF;
  font-family: "Archivo Black", var(--font-body);
  text-transform: uppercase;
  padding: 7px 12px;
  font-size: 12px; letter-spacing: .02em; line-height: 1;
}
.bolt-star { position: absolute; }

/* =========================================================
   THEME 04 / MARÉE · Editorial Lookbook (resort / swim)
   Magazine grid, full-bleed colour fields, big serif italic.
   ========================================================= */

.t-maree {
  --ink: #1B2429;
  --dim: #7E8A90;
  --hair: #DCE4E7;
  --tint: #EAEDF5;
  --pop: #BAC2DC;
  background: #FBFAF7;
  --pad: 52px;
}
.t-maree .sheet__logo { font-family: var(--font-display); font-weight: 400;
                        letter-spacing: .28em; font-size: 20px; }
.t-maree .cover__title { font-family: var(--font-display); font-size: 116px; letter-spacing: -.04em; }
.t-maree .ed-serif { font-family: var(--font-display); letter-spacing: -.02em; }
.t-maree .ed-italic { font-family: var(--font-display); font-style: italic; letter-spacing: -.015em; }
.t-maree .prod__img { aspect-ratio: 3 / 4; }
.t-maree .prod__name { font-family: var(--font-display); font-weight: 400; font-size: 17px; letter-spacing: -.015em; }

/* full-bleed editorial block */
.bleed { position: relative; overflow: hidden; }
.bleed__cap {
  position: absolute; left: 18px; bottom: 16px;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; mix-blend-mode: difference;
}

/* =========================================================
   THEME 05 / MAISON NOIR · Luxe (fine jewellery)
   Near-black, hairline gold, Cormorant caps, vast margins.
   ========================================================= */

.t-noir {
  --ink: #EFE9DF;
  --dim: #948C7E;
  --hair: rgba(201,169,97,.30);
  --tint: #161513;
  --pop: #C9A961;
  background: #0E0D0C;
  color: #EFE9DF;
  --pad: 72px;
  font-family: "Cormorant Garamond", var(--font-display);
}
.t-noir .sheet__logo {
  font-family: "Cormorant Garamond", var(--font-display);
  font-weight: 300; letter-spacing: .5em; font-size: 19px;
}
.t-noir .cover__title {
  font-family: "Cormorant Garamond", var(--font-display);
  font-weight: 300; font-size: 104px; letter-spacing: .02em; line-height: 1;
}
.t-noir .prod__img {
  background: radial-gradient(70% 60% at 50% 42%, #23211D 0%, #131211 72%);
  aspect-ratio: 1 / 1;
}
.t-noir .prod__name {
  font-family: "Cormorant Garamond", var(--font-display);
  font-weight: 400; font-size: 19px; letter-spacing: .04em; text-transform: uppercase;
}
.t-noir .prod__row dd { font-family: var(--font-body); color: #CFC7B8; font-size: 10px; }
.t-noir .prod__wsl { font-family: "Cormorant Garamond", var(--font-display);
                     font-weight: 500; font-size: 20px; letter-spacing: .02em; }
.t-noir .s-mono { color: var(--dim); }
.t-noir .gold { color: var(--pop); }
.t-noir .sizes span { border-color: var(--hair); color: #CFC7B8; }

/* =========================================================
   THEME 06 / TERRA · Organic Craft (ceramics / homeware)
   Clay & mint, soft rounds, Fraunces, hand-drawn feel.
   ========================================================= */

.t-terra {
  --ink: #33291F;
  --dim: #8E7F6C;
  --hair: #E0D6C6;
  --tint: #EFE7D8;
  --pop: #A9B49B;
  background: #FAF5EB;
  --pad: 58px;
  font-family: "Fraunces", var(--font-display);
}
.t-terra .sheet__logo {
  font-family: "Fraunces", var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 40;
  font-weight: 500; letter-spacing: .16em; font-size: 22px;
}
.t-terra .cover__title {
  font-family: "Fraunces", var(--font-display);
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144;
  font-weight: 400; font-size: 100px; letter-spacing: -.03em; line-height: .96;
}
.t-terra .prod__img { border-radius: 14px; aspect-ratio: 1 / 1; }
.t-terra .prod__name {
  font-family: "Fraunces", var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 24;
  font-weight: 500; font-size: 16px; letter-spacing: -.005em;
}
.t-terra .prod__row dd, .t-terra .prod__rrp, .t-terra .prod__sku,
.t-terra .s-mono, .t-terra .sizes span { font-family: var(--font-mono); }
.t-terra .prod__row dd { font-family: var(--font-body); color: #5B4E3F; }
.t-terra .prod__wsl { font-family: "Fraunces", var(--font-display); font-weight: 600; }
.t-terra .sizes span { border-radius: 999px; padding: 3px 8px; }
.t-terra .blob { border-radius: 48% 52% 56% 44% / 52% 46% 54% 48%; }

/* =========================================================
   Shared sheet extras: order matrix + light spec table
   ========================================================= */

.mtx { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mtx th, .mtx td {
  border: 1px solid var(--hair);
  padding: 9px 6px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 400;
  height: 30px;
}
.mtx td { background: rgba(0, 0, 0, .012); }
.mtx__corner { width: 34%; border-left: 0; }
.mtx__row {
  text-align: left !important;
  padding-left: 10px !important;
  color: var(--ink) !important;
  letter-spacing: .06em;
}
.mtx__row i {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: -1px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.mtx__tot { width: 13%; background: rgba(0, 0, 0, .035) !important; color: var(--ink) !important; }

/* pop-art variant: heavy keylines, no softness */
.mtx--bold th, .mtx--bold td {
  border: 2px solid #14100C;
  color: #14100C;
  font-weight: 700;
  font-size: 9.5px;
}
.mtx--bold td { background: #fff; }
.mtx--bold .mtx__tot { background: #EFC141 !important; }
.mtx--bold .mtx__corner { background: #14100C; color: #fff !important; }

/* spec table on a light ground */
.spec--light th { color: var(--dim); }
.spec--light td { color: #4A4034; }
.spec--light th, .spec--light td { border-bottom: 1px solid var(--hair); }

/* Grid-page product cells: one aspect across every theme so an
   8-up spread lands two even rows on the page. */
.sheet .prod--g .prod__img { aspect-ratio: 4 / 5; }
.sheet .prod--g .prod__name { font-size: 13px; }
.sheet .prod--g .prod__row { grid-template-columns: 54px 1fr; font-size: 10px; }
.sheet .prod--g .prod__wsl { font-size: 14px; }
.sheet .prod--g .sw__dot { width: 11px; height: 11px; }

/* Fit-to-box art wrapper for cover and lookbook blocks. */
.sheet .art-fit { width: 100%; height: 100%; display: block; }
.sheet .art-fit svg { width: 100%; height: 100%; }