/* ==========================================================================
   auture — brand profile
   A4 landscape (297 × 210 mm), bilingual AR-dominant.
   Screen: a stack of pages on a neutral desk.
   Print : one page per sheet, no margins — export straight to PDF.
   ========================================================================== */

:root {
  --pw: 297mm;
  --ph: 210mm;
  --pad: 16mm;
}

body {
  background: #6E645A;
  line-height: 1.6;
  padding: 0;
}

/* ---------- page shell ---------- */
.page {
  position: relative;
  width: var(--pw);
  height: var(--ph);
  margin: 8mm auto;
  background: var(--parchment);
  color: var(--text);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  display: grid;
  break-after: page;
}
.page--dark { background: var(--espresso); color: var(--text-on-dark); }
.page--sand { background: var(--sand); }
.page--pad  { padding: var(--pad); }

/* running foot */
.page__foot {
  position: absolute;
  inset-inline: var(--pad);
  inset-block-end: 8mm;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 7.5pt;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-block-start: 0.4pt solid var(--rule);
  padding-block-start: 3mm;
}
.page--dark .page__foot { color: var(--text-on-dark-muted); border-color: var(--rule-on-dark); }
.page__foot .n { font-weight: 700; }

/* ---------- type scale (fixed — this is a document, not a viewport) ---------- */
.p-eyebrow {
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--walnut);
  display: flex;
  align-items: center;
  gap: 3mm;
  margin-bottom: 6mm;
}
.page--dark .p-eyebrow { color: var(--brass); }
.p-eyebrow::before { content: ""; width: 12mm; height: 0.6pt; background: currentColor; flex: none; }

.p-h1 { font-size: 34pt; line-height: 1.1;  letter-spacing: -0.02em; font-weight: 600; }
.p-h2 { font-size: 24pt; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
.p-h3 { font-size: 13pt; line-height: 1.3;  font-weight: 600; margin-bottom: 2mm; }
.p-body { font-size: 10pt; line-height: 1.75; max-width: 48em; }
.p-small { font-size: 8.5pt; line-height: 1.7; color: var(--text-muted); }
.page--dark .p-small { color: var(--text-on-dark-muted); }

/* the English shadow line under each Arabic block */
.en {
  direction: ltr;
  text-align: left;
  font-size: 8.5pt;
  line-height: 1.65;
  color: var(--text-muted);
  letter-spacing: 0.005em;
  max-width: 52em;
}
.page--dark .en { color: var(--text-on-dark-muted); }
.en--h { font-size: 11pt; font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.rule-en {
  border-block-start: 0.4pt solid var(--rule);
  margin-block-start: 4mm;
  padding-block-start: 3mm;
}
.page--dark .rule-en { border-color: var(--rule-on-dark); }

/* ---------- cover ---------- */
.cover { grid-template-columns: 1fr; }
.cover__media { position: absolute; inset: 0; }
.cover__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.cover__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,5,1,.94) 12%, rgba(12,5,1,.42) 62%, rgba(12,5,1,.55) 100%);
}
.cover__body {
  position: relative;
  align-self: end;
  padding: var(--pad);
  padding-block-end: 18mm;
  color: var(--sand);
}
.cover__mark { width: 34mm; color: var(--sand); margin-bottom: 10mm; }
.cover__title { font-size: 30pt; line-height: 1.12; font-weight: 600; max-width: 16em; letter-spacing: -0.02em; }
.cover__sub { margin-block-start: 5mm; font-size: 10.5pt; color: rgba(228,220,202,.8); max-width: 40em; }
.cover__stamp {
  position: absolute;
  inset-block-start: var(--pad);
  inset-inline-end: var(--pad);
  font-size: 7.5pt;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(228,220,202,.7);
}

/* ---------- generic layouts ---------- */
.split-2 {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.split-2 > .col { padding: var(--pad); display: flex; flex-direction: column; justify-content: center; }
.split-2 > .fig { position: relative; overflow: hidden; background: var(--bark); }
.split-2 > .fig img { width: 100%; height: 100%; object-fit: cover; }

.split-38 { grid-template-columns: 38% 1fr; }
.split-62 { grid-template-columns: 1fr 38%; }

.stack { align-content: start; }

/* three-up */
.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8mm;
  margin-block-start: 6mm;
}
.trio__fig { aspect-ratio: 1/1; overflow: hidden; background: var(--bark); margin-bottom: 4mm; position: relative; }
.trio__fig img { width: 100%; height: 100%; object-fit: cover; }
.trio__n {
  position: absolute; inset-block-start: 3mm; inset-inline-start: 3mm;
  font-size: 8pt; font-weight: 700; letter-spacing: 0.2em; color: var(--sand);
  mix-blend-mode: difference;
}

/* four-up collection */
.quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6mm;
  margin-block-start: 7mm;
}
.quad__fig { aspect-ratio: var(--frame, 3/4); overflow: hidden; background: var(--sand-deep); margin-bottom: 3mm; }

/* The small objects were shot in landscape, three to a row, so they get their
   own frame ratio rather than being cropped into the 3/4 furniture wells. */
.trio { grid-template-columns: repeat(3, 1fr); }
.trio .quad__fig { }
/* A catalogue frame must never cut the object it is showing. The chairs are
   3:4 and fill their well exactly; the boxes are square and the console is
   wide, and `cover` was slicing their sides off. `contain` on a sand mat
   shows every piece whole, which is what a printed catalogue does anyway. */
.quad__fig img { width: 100%; height: 100%; object-fit: contain; }
.quad__fig { background: var(--sand-deep); }
.quad h3 { font-size: 11pt; font-weight: 600; margin-bottom: 1mm; }
.quad .spec { font-size: 7.5pt; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.page--dark .quad .spec { color: var(--text-on-dark-muted); }

/* numbered steps */
.p-steps { counter-reset: s; margin-block-start: 5mm; list-style: none; padding: 0; }
.p-steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 16mm 1fr;
  gap: 6mm;
  padding-block: 4mm;
  border-block-end: 0.4pt solid var(--rule-on-dark);
  align-items: start;
}
.p-steps li:first-child { border-block-start: 0.4pt solid var(--rule-on-dark); }
.p-steps li::before {
  content: "0" counter(s);
  font-size: 17pt; font-weight: 700; color: var(--brass); line-height: 1;
}

/* stat row */
.p-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6mm; margin-block-start: 8mm; }
.p-stat { border-block-start: 0.6pt solid var(--rule); padding-block-start: 4mm; }
.page--dark .p-stat { border-color: var(--rule-on-dark); }
.p-stat b { display: block; font-size: 20pt; font-weight: 700; letter-spacing: -0.02em; color: var(--walnut); line-height: 1; margin-bottom: 2mm; }
.page--dark .p-stat b { color: var(--brass); }
.p-stat span { font-size: 8pt; color: var(--text-muted); }
.page--dark .p-stat span { color: var(--text-on-dark-muted); }

/* swatches */
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5mm; margin-block-start: 8mm; }
.swatch__chip { aspect-ratio: 1; border-radius: 50%; margin-bottom: 3mm; border: 0.4pt solid rgba(0,0,0,.12); }
.swatch h4 { font-size: 8.5pt; font-weight: 600; margin: 0 0 1mm; }
.swatch code { font-size: 7pt; letter-spacing: .08em; color: var(--text-muted); direction: ltr; display: block; }
.page--dark .swatch code { color: var(--text-on-dark-muted); }

/* services list */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5mm 10mm; margin-block-start: 7mm; }
.service { border-block-start: 0.4pt solid var(--rule); padding-block-start: 3.5mm; }
.page--dark .service { border-color: var(--rule-on-dark); }
.service h3 { font-size: 11pt; margin-bottom: 1.5mm; font-weight: 600; }
.service p { font-size: 8.5pt; line-height: 1.65; color: var(--text-muted); }
.page--dark .service p { color: var(--text-on-dark-muted); }

/* contact */
.contact-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10mm; margin-block-start: 9mm; }
.contact-cols h3 { font-size: 8pt; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-bottom: 3mm; }
.contact-cols p, .contact-cols a { font-size: 9.5pt; color: var(--text-on-dark-muted); text-decoration: none; line-height: 1.9; }

/* pattern strip on the back cover */
.p-band { height: 26mm; background-repeat: repeat; background-size: auto 14mm; background-position: center; }

/* ---------- screen-only toolbar ---------- */
.toolbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(26, 11, 3, .92);
  color: var(--sand);
  backdrop-filter: blur(10px);
  font-size: 13px;
}
.toolbar button {
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid rgba(228,220,202,.4);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.toolbar button:hover { background: rgba(218,158,60,.2); }
.toolbar span { opacity: .7; }

/* ---------- print ---------- */
@page { size: A4 landscape; margin: 0; }

@media print {
  body { background: #fff; }
  .toolbar { display: none !important; }
  .page {
    margin: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  .page:last-child { break-after: auto; page-break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- editions page ---------- */
.ed { }
.ed__n {
  display: block;
  font-size: 34pt;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--walnut);
  margin-bottom: 5mm;
}
.ed__n i {
  font-style: normal;
  margin-inline-start: 0.22em;
  font-size: 12pt;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* edition badge on a collection thumbnail */
.quad__fig { position: relative; }
.quad__badge {
  position: absolute;
  inset-block-start: 2.5mm;
  inset-inline-start: 2.5mm;
  padding: 1mm 2.5mm;
  border-radius: 999px;
  background: rgba(18, 7, 1, 0.72);
  color: var(--brass);
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
}

/* ---------- screen-only chrome: home link, footer, bypass link ---------- */
.toolbar__home {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid rgba(228, 220, 202, 0.4);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: background 200ms var(--ease);
}
.toolbar__home:hover { background: rgba(218, 158, 60, 0.2); }

.profile-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  padding: 2.5rem 1.25rem 3.5rem;
  background: var(--espresso-2);
  color: var(--text-on-dark-muted);
  font-size: 0.85rem;
}
.profile-foot a {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.profile-foot a:hover { color: var(--brass); border-color: var(--brass); }

@media print {
  .profile-foot, .skip-link { display: none !important; }
}

/* ---------- QR ----------
   Sits under the contact details, aligned to the same edge as the text above
   it. Printed at 24mm: comfortably above the ~20mm floor where phone cameras
   start to struggle, and the white quiet zone is baked into the image. */
.qr {
  margin: 0;
  margin-block-start: 5mm;
  display: flex;
  align-items: center;
  gap: 3mm;
}
.qr img {
  flex: 0 0 auto;
  width: 24mm;
  height: 24mm;
  background: #fff;
  padding: 1.2mm;
  border-radius: 1mm;
}
.qr figcaption {
  font-size: 6.5pt;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}
.qr .en { opacity: 0.7; }

.cover__url {
  margin-block-start: 7mm;
  font-size: 8.5pt;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--brass);
}

/* ---------- the four lines, on paper ---------- */

.lines-brief {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6mm;
  margin-block-start: 9mm;
}
.line-brief { border-block-start: 0.6pt solid var(--rule-on-dark); padding-block-start: 3mm; }
.line-brief__n {
  display: block;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brass);
  margin-bottom: 2.5mm;
}
.line-brief h3 { font-size: 12pt; font-weight: 600; margin-bottom: 1.5mm; }
.line-brief h3 .en { font-weight: 400; color: var(--text-on-dark-muted); }
.line-brief__count {
  margin-block-start: 3.5mm;
  font-size: 7pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}

/* five to a row, and two: the furniture grid bends to the line it carries */
.quint { grid-template-columns: repeat(5, 1fr); }

.duo { grid-template-columns: repeat(2, 1fr); gap: 10mm; }
.duo .quad__fig { }

.line-note-print {
  margin-block-start: 7mm;
  padding-inline-start: 3mm;
  border-inline-start: 0.8pt solid var(--brass);
  font-size: 8pt;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 62em;
}
.page--dark .line-note-print { color: var(--text-on-dark-muted); }
.line-note-print .en { display: block; opacity: 0.72; margin-block-start: 1mm; }
.line-brief__count .sep { opacity: 0.45; margin-inline: 1mm; }
.solo { grid-template-columns: 1fr; max-width: 120mm; margin-inline: auto; }
.solo .quad__fig { }
/* six frames to a sheet: two rows of three, in a shorter well */
.sext { grid-template-columns: repeat(3, 1fr); gap: 5mm 6mm; }
.sext .quad__fig { margin-bottom: 2mm; }
.sext h3 { font-size: 10pt; }
.sext .p-small, .sext .en { font-size: 7.5pt; line-height: 1.5; }

/* a sheet whose content no longer fills it is centred, not left hanging */
/* .stack sets align-content:start, so the block sits at the top of its row.
   This page lost its lower half when the identity swatches came out; centring
   the remaining content balances the sheet instead of leaving a void. */
.stack--centre { align-content: center; }
.stack--centre .services { margin-block-start: 11mm; gap: 9mm 12mm; }
.stack--centre .service h3 { font-size: 13pt; }
.stack--centre .service p { font-size: 9pt; line-height: 1.7; }

/* the parent company, on the closing sheet */
.p-owner { display: inline-block; margin-block-start: 3mm; font-size: 7.5pt; line-height: 1.7; }
.p-owner b { color: var(--brass); font-weight: 600; }
.quad .price { color: var(--brass); font-weight: 600; letter-spacing: 0; }
.page--dark .quad .price { color: var(--brass); }