/* Graphic Illusion — brochure design system, landscape edition.
   Rules of the system:
   · Images are never tiles. They run edge to edge, full height, zero gutter.
   · Most pages carry NO margin. Margin is a deliberate event, not a default.
   · Three page temperaments alternate so a flip-through has rhythm:
     PHOTO (full bleed) · NAVY (type only) · PAPER (white, structured).
   · Orange is a block or a rule. Never a tint, never a fill behind text.
   · Scale does the talking: 110pt next to 8pt on the same page. */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Inter:wght@300;400;500&family=Newsreader:ital,opsz,wght@1,6..72,200;1,6..72,300&display=swap");

:root{
  --ink:#1F2A44;
  --ink-80:#4A5468;
  --ink-55:#7C8598;
  --accent:#D9622B;
  --paper:#FFFFFF;
  --rule:#DCE0E7;
  --wash:#F2F3F6;
}

doc-page:not(:defined){visibility:hidden}
body{margin:0;color:var(--ink);font-family:Inter,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}

/* 297×210 landscape. every .page is a size container; all sizing in cqw
   so one layout holds on A4 and Letter alike. */
.page{position:relative;background:var(--paper);overflow:hidden;display:flex;flex-direction:column}
.navy{background:var(--ink);color:#fff}
.ink-bg{background:var(--ink)}
.pad{padding:6cqw}
.pad-lg{padding:8cqw}
.pad-x{padding-left:6cqw;padding-right:6cqw}
.grow{flex:1;min-height:0}
.stack{display:flex;flex-direction:column}
.row{display:flex}
.between{justify-content:space-between}
.center{align-items:center}
.end{align-items:flex-end}
.mid{justify-content:center}
.g1{gap:1cqw}.g2{gap:2cqw}.g3{gap:3cqw}.g4{gap:4cqw}

/* ---- type: landscape A4 is 842pt wide, so 1cqw ≈ 8.4pt ---- */
.mega{font-family:Oswald,sans-serif;font-weight:700;font-size:11.5cqw;line-height:1.08;letter-spacing:-.015em;text-transform:uppercase;margin:0}
.display{font-family:Oswald,sans-serif;font-weight:600;font-size:6.4cqw;line-height:1.09;letter-spacing:-.008em;text-transform:uppercase;margin:0;text-wrap:balance}
.h1{font-family:Oswald,sans-serif;font-weight:600;font-size:5cqw;line-height:1.09;text-transform:uppercase;margin:0;text-wrap:balance}
.h2{font-family:Oswald,sans-serif;font-weight:500;font-size:3.2cqw;line-height:1.1;text-transform:uppercase;margin:0;text-wrap:balance}
.h3{font-family:Oswald,sans-serif;font-weight:500;font-size:1.9cqw;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;margin:0}
.h4{font-family:Oswald,sans-serif;font-weight:500;font-size:1.3cqw;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;margin:0}
.kicker{font-family:Oswald,sans-serif;font-weight:500;font-size:.95cqw;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-55)}
.lead{font-size:1.85cqw;line-height:1.36;font-weight:300;color:var(--ink-80);margin:0;text-wrap:pretty}
.body{font-size:1.45cqw;line-height:1.58;margin:0;text-wrap:pretty}
.body-sm{font-size:1.2cqw;line-height:1.55;color:var(--ink-80);margin:0;text-wrap:pretty}
.fine{font-size:1cqw;line-height:1.5;color:var(--ink-55);margin:0;text-wrap:pretty}
.quote{font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:200;font-size:4.4cqw;line-height:1.1;margin:0;text-wrap:balance}
.accent{color:var(--accent)}
.measure{max-width:38ch}
.measure-sm{max-width:30ch}
.navy .kicker,.navy .fine{color:rgba(255,255,255,.55)}
.navy .lead,.navy .body-sm{color:rgba(255,255,255,.76)}
.navy .body{color:rgba(255,255,255,.88)}

/* ---- the orange devices ---- */
.bar{height:.45cqw;background:var(--accent);border:0;margin:0;width:7cqw}
.bar-full{height:.45cqw;background:var(--accent);border:0;margin:0;width:100%}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.navy .rule{background:rgba(255,255,255,.18)}
.block{background:var(--accent);color:#fff}

/* ---- full-bleed media ---- */
.bleed{position:absolute;inset:0}
.bleed>*{width:100%;height:100%}
.bleed img{width:100%;height:100%;object-fit:cover;display:block}
.veil-l{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(31,42,68,.94) 0%,rgba(31,42,68,.55) 38%,rgba(31,42,68,0) 76%)}
.veil-b{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(31,42,68,.9) 0%,rgba(31,42,68,.25) 34%,rgba(31,42,68,0) 62%)}
.veil-t{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(31,42,68,.62) 0%,rgba(31,42,68,0) 40%)}

/* caption plate: an orange rule, a brand, a line. nothing else on the image. */
.plate{position:absolute;left:6cqw;bottom:6cqw;display:flex;flex-direction:column;gap:.9cqw;color:#fff;max-width:34cqw}
.plate .bar{width:4.5cqw}
.plate b{font-family:Oswald,sans-serif;font-weight:600;font-size:2.1cqw;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.plate span{font-size:1.15cqw;line-height:1.4;color:rgba(255,255,255,.8)}

/* ---- strips: images at full page height, zero gutter, edge to edge ---- */
.strips{display:grid;height:100%;width:100%}
.strips>figure{position:relative;margin:0;overflow:hidden;background:var(--ink)}
.strips>figure>img,.strips>figure>image-slot{position:absolute;inset:0;width:100%;height:100%}
.strips>figure>img{object-fit:cover;display:block}
.strips figcaption{position:absolute;left:1.6cqw;bottom:1.6cqw;right:1.6cqw;font-family:Oswald,sans-serif;font-weight:500;font-size:.95cqw;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 .1cqw .6cqw rgba(0,0,0,.6)}
.s2{grid-template-columns:1fr 1fr}
.s3{grid-template-columns:repeat(3,1fr)}
.s4{grid-template-columns:repeat(4,1fr)}
.s5{grid-template-columns:repeat(5,1fr)}
.strips.rows2{grid-template-rows:1fr 1fr}

/* ---- split pages ---- */
.split{display:grid;height:100%;width:100%}
.split-45{grid-template-columns:45fr 55fr}
.split-40{grid-template-columns:40fr 60fr}
.split-55{grid-template-columns:55fr 45fr}
.half{position:relative;overflow:hidden;display:flex;flex-direction:column}
.half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- lists ---- */
.dl{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.dl li{font-size:1.28cqw;line-height:1.4;padding:.95cqw 0;border-bottom:1px solid var(--rule)}
.navy .dl li{border-bottom-color:rgba(255,255,255,.16)}
.dl li:last-child{border-bottom:0}

/* ---- pricing table: landscape is its natural home ---- */
.ptable{width:100%;border-collapse:collapse;font-size:1.12cqw}
.ptable th,.ptable td{text-align:center;padding:.66cqw .6cqw;border-bottom:1px solid var(--rule)}
.ptable tbody th{text-align:left;font-weight:400;color:var(--ink);white-space:nowrap}
.ptable thead th{font-family:Oswald,sans-serif;font-weight:600;font-size:1.3cqw;letter-spacing:.12em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:.7cqw;vertical-align:bottom}
.ptable thead th span{display:block;font-family:Oswald,sans-serif;font-weight:300;font-size:2.9cqw;letter-spacing:-.01em;margin-top:.3cqw;line-height:1}
.ptable td{color:var(--ink-80)}
.ptable .yes{color:var(--ink)}
.ptable .no{color:#B6BCC8}
.ptable .hi{background:#FBF1EA}
.ptable thead th.hi{border-bottom-color:var(--accent)}
.ptable thead th.hi span{color:var(--accent)}
.tag{display:inline-block;font-family:Oswald,sans-serif;font-weight:600;font-size:.82cqw;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--accent);padding:.26cqw .6cqw;margin-bottom:.5cqw}

.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw 3cqw;margin:0;padding:0;list-style:none}
.notes li{font-size:1cqw;line-height:1.45;color:var(--ink-55)}

/* ---- folio ---- */
.folio{position:absolute;right:6cqw;bottom:4cqw;font-family:Oswald,sans-serif;font-weight:400;font-size:.95cqw;letter-spacing:.28em;color:var(--ink-55);z-index:2}
.folio-light{color:rgba(255,255,255,.5)}

/* ---- wordmark, masked so one file prints navy or white ---- */
.mark{display:block;height:auto;aspect-ratio:219/38;object-fit:contain}
.mark-w{filter:brightness(0) invert(1)}