/* Noël d'Altitude — look book shared styles (square 1080×1080 pages) */
:root{
  --burgundy:#4F1118; --burgundy-deep:#430E14;
  --green:#2F4233; --green-deep:#26352A;
  --stone:#D6CEC3; --stone-2:#E7E1D8; --stone-3:#EFEAE2;
  --ink:#2B2B2B; --ink-soft:#6A645C;
  --paper:#F9F9F7; --gold:#C2A269; --champagne:#F2E9D8;
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Montserrat', system-ui, sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; background:#26221F; font-family:var(--sans); color:var(--ink); }
img{ display:block; }

/* screen chrome */
.toolbar{ position:fixed; top:0; left:0; right:0; z-index:90; display:flex; justify-content:space-between; align-items:center; padding:14px 28px; color:var(--champagne); font-size:11px; letter-spacing:.28em; text-transform:uppercase; background:rgba(22,18,16,.86); backdrop-filter:blur(6px); }
.toolbar .btns{ display:flex; gap:12px; }
.toolbar button, .toolbar a{ font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; background:none; border:1px solid rgba(242,233,216,.45); padding:9px 18px; cursor:pointer; text-decoration:none; }
.toolbar button:hover, .toolbar a:hover{ background:var(--champagne); color:#26221F; }

#zoom{ transform-origin:top center; }
.doc{ width:1080px; margin:74px auto 60px; display:flex; flex-direction:column; gap:30px; }

/* page */
.page{ position:relative; width:1080px; height:1080px; background:var(--paper); overflow:hidden; box-shadow:0 14px 50px rgba(0,0,0,.45); }
.page.dark{ color:var(--champagne); }

/* folio */
.folio{ position:absolute; top:52px; left:72px; right:72px; z-index:5; display:flex; justify-content:space-between; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-soft); padding-bottom:14px; border-bottom:1px solid rgba(43,43,43,.16); }
.dark .folio, .onimg.folio{ color:rgba(242,233,216,.85); border-bottom-color:rgba(242,233,216,.3); }

/* shared type */
.k{ font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--cw, var(--gold)); margin-bottom:18px; }
h1,h2{ font-family:var(--serif); font-weight:500; margin:0; }
.lead{ font-family:var(--serif); font-style:italic; font-size:24px; }
p.body{ font-size:17px; line-height:1.75; font-weight:300; color:var(--ink); }
.dark p.body{ color:rgba(242,233,216,.88); }

/* cover & back */
.pg-cover, .pg-back{ display:flex; align-items:center; justify-content:center; text-align:center; }
.pg-cover .scrim{ position:absolute; inset:0; background:linear-gradient(rgba(28,12,12,.32), rgba(28,12,12,.62)); z-index:2; }
.pg-cover image-slot{ position:absolute; inset:0; width:1080px; height:1080px; }
.cover-in{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:26px; }
.cover-in .seal{ height:108px; }
.cover-in .kk{ font-size:13px; letter-spacing:.42em; text-transform:uppercase; }
.cover-in h1{ font-size:104px; line-height:1.05; }
.cover-in .sub{ font-size:13px; letter-spacing:.34em; text-transform:uppercase; opacity:.85; }
.cover-in .rule{ width:64px; height:1px; background:currentColor; opacity:.6; }
.pg-back .cover-in .seal{ height:128px; }
.pg-back h2{ font-size:46px; max-width:660px; line-height:1.3; }
.pg-back .contact{ font-size:13px; letter-spacing:.26em; text-transform:uppercase; line-height:2.3; opacity:.9; }

/* cover contents */
.has-contents .cover-in{ gap:20px; }
.has-contents .cover-in .seal{ height:84px; }
.has-contents .cover-in h1{ font-size:84px; }
.cover-in .contents{ margin-top:30px; display:grid; gap:11px; min-width:400px; text-align:left; }
.contents a{ display:flex; align-items:baseline; gap:14px; font-size:11.5px; letter-spacing:.28em; text-transform:uppercase; color:rgba(242,233,216,.85); cursor:pointer; }
.contents a i{ flex:1; border-bottom:1px dotted rgba(242,233,216,.35); transform:translateY(-3px); }
.contents a b{ font-weight:500; }
.contents a:hover{ color:#fff; }
/* light-page variant */
.pg-split .contents{ margin-top:36px; min-width:0; }
.contents.ink a{ color:var(--ink-soft); }
.contents.ink a i{ border-bottom-color:rgba(43,43,43,.3); }
.contents.ink a:hover{ color:var(--burgundy); }

/* split page (intro / add-on) */
.pg-split{ display:grid; grid-template-columns:470px 1fr; gap:56px; padding:150px 72px 72px; }
.pg-split image-slot{ width:470px; height:858px; }
.pg-split .tx{ display:flex; flex-direction:column; justify-content:center; padding-right:6px; }
.pg-split h2{ font-size:58px; line-height:1.12; margin-bottom:26px; }
.pg-split .lead{ margin:0 0 22px; }

/* full-bleed hero */
.pg-hero image-slot{ position:absolute; inset:0; width:1080px; height:1080px; }
.plate{ position:absolute; left:72px; bottom:72px; z-index:4; background:rgba(249,249,247,.94); padding:34px 44px 36px; max-width:520px; }
.page[style*="--cw"] .plate{ border-left:10px solid var(--cw); }
.plate .k{ margin-bottom:10px; }
.plate h2{ font-size:54px; line-height:1.05; }
.plate .lead{ font-size:19px; color:var(--ink-soft); margin:12px 0 0; }

/* details page — copy band + trio */
.pg-details{ padding:150px 72px 64px; display:flex; flex-direction:column; }
.band{ display:grid; grid-template-columns:1fr 360px; gap:48px; align-items:end; margin-bottom:34px; }
.band h2{ font-size:54px; line-height:1.05; }
.band p.body{ margin:14px 0 0; max-width:560px; }
.sws{ display:flex; flex-direction:column; gap:13px; justify-self:end; padding-bottom:6px; }
.sw{ display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); }
.sw i{ width:26px; height:26px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(43,43,43,.18); }
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; flex:1; }
.trio figure{ margin:0; display:flex; flex-direction:column; gap:12px; }
.trio image-slot{ width:100%; height:528px; }
.trio figcaption{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); }

/* mini trio inside split page */
.mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
.mini figure{ margin:0; display:flex; flex-direction:column; gap:8px; }
.mini image-slot{ width:100%; height:158px; }
.mini figcaption{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); }

/* colourway accent */
.cwbar{ position:absolute; left:0; top:0; bottom:0; width:10px; background:var(--cw, var(--gold)); }

@media print{
  body{ background:#fff; }
  .toolbar{ display:none; }
  #zoom{ transform:none !important; height:auto !important; }
  .doc{ margin:0; gap:0; }
  .page{ box-shadow:none; break-after:page; }
  @page{ size:1080px 1080px; margin:0; }
}