:root{
  --bg: #0b1020;
  --paper: #ffffff;
  --ink: #111827;
  --muted: #4b5563;
  --brand: #0b5bd3;
  --brand-2: #0ea5e9;
  --accent: #f59e0b;
  --accent-2: #22c55e;
  --rule: #e5e7eb;

  --radius: 16px;
  --shadow: 0 12px 35px rgba(17,24,39,.14);

  --serif: "Playfair Display", "Georgia", "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", Roboto, Arial, system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --a4-w: 210mm;
  --a4-h: 297mm;
  --pad: 14mm;
}

*{ box-sizing: border-box; }
html{ height: auto; }
body{
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--ink);
  background: #0b1020;
}

a{ color: inherit; }

/* ======= Screen preview frame ======= */
.preview{
  padding: 24px;
  display: grid;
  gap: 24px;
  justify-content: center;
}
.page{
  width: var(--a4-w);
  min-height: var(--a4-h);
  background: var(--paper);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: visible;
  position: relative;
}

/* ======= Shared page layout ======= */
.page__inner{
  padding: var(--pad);
  height: 100%;
}

.kicker{
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  color: rgba(17,24,39,.65);
}
.h1{
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 40px;
  line-height: 1.02;
  margin: 10px 0 8px;
}
.h2{
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: 24px;
  line-height: 1.12;
  margin: 0 0 10px;
}
.h3{
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -.01em;
  font-size: 15px;
  margin: 0 0 8px;
}
.lede{
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(17,24,39,.82);
  max-width: 78ch;
}
.p{
  font-size: 13px;
  line-height: 1.65;
  color: rgba(17,24,39,.86);
  margin: 0;
}
.small{
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(17,24,39,.70);
}
.rule{
  height: 1px;
  background: var(--rule);
  margin: 14px 0;
}
.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(11,91,211,.08);
  color: #0b5bd3;
  font-weight: 700;
  font-size: 12px;
}
.badge .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0b5bd3;
}

/* ======= Cover ======= */
.page--cover{
  background: radial-gradient(1200px 450px at 8% 18%, rgba(14,165,233,.35), transparent 60%),
              radial-gradient(900px 520px at 90% 20%, rgba(245,158,11,.20), transparent 62%),
              linear-gradient(160deg, #0b1020 0%, #0a1630 55%, #071026 100%);
  color: #ffffff;
}
.page--cover .page__inner{ padding: 0; }
.cover{
  height: var(--a4-h);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.cover__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18mm var(--pad) 10mm;
}
.logo{
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo img{ height: 40px; width: auto; }
.logo--cover img{ height: 64px; }
.logo__name{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 12.5px;
  opacity: .92;
}
.issue{
  text-align: right;
  font-size: 12px;
  opacity: .85;
}
.cover__hero{
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14mm;
  align-items: center;
}
.cover__title .kicker{ color: rgba(255,255,255,.75); }
.cover__title .h1{ color: #fff; }
.cover__title .lede{ color: rgba(255,255,255,.88); }

.heroCard{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
}
.heroCard__img{
  height: 120mm;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.heroCard__caption{
  padding: 10mm 10mm 8mm;
}
.heroCard__caption .h3{ color: rgba(255,255,255,.95); }
.heroCard__caption .small{ color: rgba(255,255,255,.80); }

.cover__bottom{
  padding: 10mm var(--pad) 12mm;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12mm;
  border-top: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.16));
}
.stats{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.stat{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.stat__n{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}
.stat__l{
  font-size: 11.5px;
  opacity: .82;
  margin-top: 4px;
}
.contact{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.contact .small{ color: rgba(255,255,255,.85); }
.contact a{ color: #ffffff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }

/* ======= Inner pages header ======= */
.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.header__left{
  display: flex;
  align-items: center;
  gap: 10px;
}
.header__left img{ height: 28px; width: auto; }
.header__right{
  font-size: 11.5px;
  color: rgba(17,24,39,.65);
}

/* ======= Content grids ======= */
.grid-2{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14mm;
  margin-top: 12mm;
}
.grid-3{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8mm;
}
.card{
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 10mm;
  background: #fff;
}
.card--tint{
  background: linear-gradient(180deg, rgba(11,91,211,.06), rgba(14,165,233,.04));
  border-color: rgba(11,91,211,.14);
}

.figure{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.figure img{
  width: 100%;
  height: 66mm;
  object-fit: cover;
  object-position: center;
  display: block;
}
.figure .cap{
  padding: 8px 10px;
  border-top: 1px solid var(--rule);
  background: #fff;
  font-size: 11.5px;
  color: rgba(17,24,39,.70);
}

/* Pull quote: designed to feel editorial (less "AI card") */
.pullquote{
  position: relative;
  border-radius: 16px;
  padding: 12px 14px 12px 14px;
  border: 1px solid rgba(17,24,39,.10);
  background:
    radial-gradient(480px 140px at 12% 20%, rgba(245,158,11,.16), transparent 62%),
    radial-gradient(380px 140px at 92% 10%, rgba(34,197,94,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.96));
}
.pullquote:before{
  content: "“";
  position: absolute;
  left: 10px;
  top: -8px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: rgba(17,24,39,.18);
}
.pullquote__text{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: rgba(17,24,39,.86);
  margin-left: 18px;
}
.pullquote__meta{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  margin-left: 18px;
  color: rgba(17,24,39,.62);
  font-size: 11.5px;
}
.pullquote__meta .line{
  height: 1px;
  width: 28px;
  background: rgba(17,24,39,.22);
}

.list{
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(17,24,39,.86);
}

/* Image fit helpers to reduce aggressive cropping */
.fit-contain{
  object-fit: contain !important;
  background: #f3f4f6;
}
.fit-soft{
  object-position: 50% 35% !important;
}

/* Mosaic galleries */
.mosaic{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6mm;
}
.mosaic__tile{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #fff;
  position: relative;
  min-height: 44mm;
}
.mosaic__tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.mosaic__cap{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(17,24,39,.08);
  font-size: 11.5px;
  color: rgba(17,24,39,.72);
  backdrop-filter: blur(6px);
}
.span-12{ grid-column: span 12; }
.span-8{ grid-column: span 8; }
.span-7{ grid-column: span 7; }
.span-6{ grid-column: span 6; }
.span-5{ grid-column: span 5; }
.span-4{ grid-column: span 4; }
.span-3{ grid-column: span 3; }

/* Compact two-column blocks */
.twoCol{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8mm;
}
.pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(17,24,39,.03);
  color: rgba(17,24,39,.76);
  font-size: 12px;
  font-weight: 700;
}
.pill .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

/* ======= Spread images ======= */
.spread{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8mm;
  margin-top: 10mm;
}
.spread--stack{
  grid-template-columns: 1fr;
  gap: 5mm;
}
.spread--stack .photo img{
  height: 62mm;
}
.photo{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #fff;
}
.photo img{
  width: 100%;
  height: 78mm;
  object-fit: cover;
  object-position: center;
  display: block;
}
.photo .cap{
  padding: 8px 10px;
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  color: rgba(17,24,39,.70);
}

.footer{
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 9mm;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(17,24,39,.55);
}
.footer__tag{
  font-family: var(--mono);
  letter-spacing: .04em;
}

/* ======= Mobile responsive ======= */
@media screen and (max-width: 800px){
  body{ background: var(--paper); }
  .preview{ padding: 0; gap: 0; }
  .page{
    width: 100%;
    min-height: auto;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 3px solid var(--rule);
  }
  .page__inner{ padding: 5vw; height: auto; }

  /* Inner page headers: stack cleanly on mobile */
  .header{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .header__left{ width: 100%; }
  .header__left img{ height: 26px; }
  .header__right{
    width: 100%;
    text-align: left;
  }

  /* Cover */
  .cover{ height: auto; min-height: 100svh; }
  .cover__top{ padding: 6vw 5vw 3vw; flex-wrap: wrap; gap: 8px; }
  .cover__hero{ grid-template-columns: 1fr; gap: 5vw; padding: 3vw 5vw; }
  .cover__bottom{ grid-template-columns: 1fr; gap: 4vw; padding: 5vw; }
  .heroCard__img{ height: 55vw; }
  .h1{ font-size: clamp(24px, 7vw, 40px); }
  .h2{ font-size: clamp(18px, 5vw, 24px); }
  .lede{ font-size: 13px; }

  /* Grids stack to single column */
  .grid-2{ grid-template-columns: 1fr; gap: 5vw; margin-top: 5vw; }
  .grid-3{ grid-template-columns: 1fr; gap: 4vw; }
  .twoCol{ grid-template-columns: 1fr; gap: 4vw; }

  /* Mosaic to single column */
  .mosaic{ grid-template-columns: 1fr; gap: 3vw; }
  .span-12,.span-8,.span-7,.span-6,.span-5,.span-4,.span-3{ grid-column: span 1; }
  .mosaic__tile{ min-height: 50vw; }

  /* Fluid images */
  .figure img{ height: auto !important; min-height: 40vw; max-height: 70vw; }
  .photo img{ height: auto !important; min-height: 40vw; max-height: 70vw; }
  .spread{ grid-template-columns: 1fr; }
  .spread--stack .photo img{ height: auto !important; min-height: 40vw; }

  /* Footer in-flow on mobile (not absolute) */
  .footer{
    position: relative;
    left: 0; right: 0; bottom: 0;
    margin-top: 5vw;
    padding-top: 3vw;
    border-top: 1px solid var(--rule);
  }
  .page--cover .cover__bottom + .footer,
  .page--cover .footer{ display: none; }

  /* Compact spacing */
  .card{ padding: 5vw; }
  .stat{ padding: 8px 10px; }
  .stat__n{ font-size: 18px; }
  .stats{ gap: 8px; }
  .badge{ font-size: 11px; flex-wrap: wrap; }
  .logo--cover img{ height: 48px; }
}

/* ======= Tablet ======= */
@media screen and (min-width: 801px) and (max-width: 1024px){
  .preview{ padding: 16px; }
}

/* ======= Print: each page = exactly one A4 sheet ======= */
@page{
  size: A4;
  margin: 0;
}
@media print{
  html, body{ height: auto; background: #fff; margin: 0; }
  .preview{ padding: 0; gap: 0; }

  .page{
    width: 210mm;
    height: 297mm;
    min-height: 297mm;
    max-height: 297mm;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    border: none;
    page-break-after: always;
    break-after: page;
    page-break-inside: avoid;
    break-inside: avoid;
    position: relative;
  }
  .page:last-child{ page-break-after: auto; break-after: auto; }

  .page__inner{
    padding: 12mm;
    height: 297mm;
    max-height: 297mm;
    overflow: hidden;
  }
  .page--cover .page__inner{ padding: 0; height: 297mm; }
  .cover{ height: 297mm; }

  /* Compact spacing to help content fit within one page */
  .grid-2{ margin-top: 9mm; gap: 10mm; }
  .grid-3{ gap: 5mm; }
  .mosaic{ gap: 4mm; }
  .card{ padding: 7mm; }
  .rule{ margin: 7px 0; }
  .twoCol{ gap: 6mm; }
  .list{ font-size: 12px; line-height: 1.55; }
  .p{ font-size: 12px; line-height: 1.55; }
  .pullquote{ padding: 10px 12px; }
  .pullquote__text{ font-size: 14px; }
  .footer{ bottom: 7mm; }

  /* Prevent block-level splitting */
  .card, .figure, .photo, .pullquote, .mosaic__tile, .spread{
    page-break-inside: avoid;
    break-inside: avoid;
  }
  img{ page-break-inside: avoid; break-inside: avoid; }

  a{ color: inherit; text-decoration: none; }
}