:root{
  --navy:#071525;
  --navy2:#0c2238;
  --ivory:#f4efe4;
  --paper:#fbf8f0;
  --cream:#efe5d3;
  --bronze:#b98748;
  --bronze2:#d4a96a;
  --charcoal:#20242a;
  --muted:#69717a;
}
*{box-sizing:border-box}
html{background:#d8d2c6}
body{margin:0;background:#d8d2c6;color:var(--charcoal);font-family:Arial, Helvetica, sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.book{width:210mm;margin:0 auto;padding:8mm 0}
.page{position:relative;width:210mm;height:297mm;overflow:hidden;margin:0 auto 8mm;background:var(--paper);box-shadow:0 12px 40px rgba(0,0,0,.22)}
@page{size:A4;margin:0}
@media print{html,body{background:white}.book{padding:0}.page{margin:0;box-shadow:none;page-break-after:always;break-after:page}}

h1,h2,h3,h4,p{margin:0}p{font-size:10.3pt;line-height:1.58}h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.03em;font-size:34pt;line-height:.98}.kicker,.eyebrow{font-size:8pt;letter-spacing:.32em;text-transform:uppercase;color:var(--bronze);font-weight:700}.page-number{position:absolute;top:13mm;right:14mm;color:#b7aa98;font-size:8pt;letter-spacing:.2em}.page-number.light{color:rgba(255,255,255,.45)}

.cover{background:var(--navy);color:white}.cover-photo{position:absolute;inset:0;background:url('../images/portrait-cover.jpg') center center/cover no-repeat;filter:saturate(.9) contrast(1.06)}.cover-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,21,37,.9) 0%,rgba(7,21,37,.56) 34%,rgba(7,21,37,.12) 70%),linear-gradient(0deg,rgba(7,21,37,.75) 0%,rgba(7,21,37,.08) 42%)}.cover-rule{position:absolute;left:13mm;top:13mm;width:14mm;height:270mm;border-left:1.6mm solid var(--bronze)}.cover-copy{position:absolute;left:25mm;top:34mm;width:98mm}.cover-copy h1{font-family:Georgia,'Times New Roman',serif;text-transform:uppercase;font-size:48pt;line-height:.86;letter-spacing:.02em;font-weight:400}.cover-copy h1 span{display:block}.cover-roles{margin-top:13mm;display:flex;flex-direction:column;gap:4mm;font-size:11pt;letter-spacing:.28em;text-transform:uppercase;font-weight:700}.tagline{margin-top:15mm;width:72mm;font-family:Georgia,'Times New Roman',serif;font-size:15pt;line-height:1.25;color:#f3e8d1}.location{position:absolute;right:18mm;bottom:18mm;font-size:8pt;letter-spacing:.32em;text-transform:uppercase;color:#f1e6d0}.cover .eyebrow{margin-bottom:6mm;color:var(--bronze2)}

.page-light{background:var(--paper)}.page-cream{background:var(--ivory)}.page-dark{background:var(--navy);color:#f7f0e6}.bronze{color:var(--bronze2)}
.story{padding:24mm 20mm}.story .opening-line{width:156mm;margin-top:11mm;font-size:31pt}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:16mm;margin-top:20mm;width:140mm}.story-grid p+p{margin-top:6mm}.margin-stats{position:absolute;right:16mm;bottom:18mm;width:48mm;display:grid;gap:8mm}.margin-stats div{border-top:1px solid var(--bronze);padding-top:4mm}.margin-stats strong{display:block;font-family:Georgia,serif;font-size:28pt;color:var(--bronze)}.margin-stats span{font-size:7.5pt;text-transform:uppercase;letter-spacing:.18em;color:#4b5157}
.story-cont{padding:28mm 24mm}.pull-quote{font-family:Georgia,serif;font-size:30pt;line-height:1.02;color:var(--navy);width:145mm}.story-cont-copy{margin-top:20mm;columns:2;column-gap:16mm}.story-cont-copy p{break-inside:avoid;margin-bottom:6mm}.at-glance-inline{position:absolute;left:24mm;bottom:22mm;display:flex;gap:10mm}.at-glance-inline div{width:42mm}.at-glance-inline strong{font-family:Georgia,serif;font-size:27pt;color:var(--bronze)}.at-glance-inline span{display:block;font-size:7.5pt;letter-spacing:.14em;text-transform:uppercase}

.career{padding:24mm 22mm}.career h2{width:145mm;margin-top:10mm;color:#fff}.vertical{position:relative;margin-top:18mm;padding-left:15mm;width:160mm}.vertical:before{content:"";position:absolute;left:3mm;top:3mm;bottom:3mm;width:1px;background:var(--bronze)}.vertical article{position:relative;margin-bottom:12mm}.vertical article:before{content:"";position:absolute;left:-15mm;top:1mm;width:6mm;height:6mm;border-radius:50%;background:var(--bronze)}.vertical .year{font-size:8pt;letter-spacing:.22em;color:var(--bronze2);text-transform:uppercase}.vertical h3{font-family:Georgia,serif;font-size:20pt;font-weight:400;margin-top:2mm}.vertical h4{font-size:8.5pt;letter-spacing:.14em;text-transform:uppercase;color:#bdc7d0;margin-top:1mm}.vertical p{margin-top:3mm;color:#e8ded1;width:130mm}

.nation,.world{padding:22mm 18mm}.nation h2,.world h2{font-size:28pt;width:150mm;margin-top:8mm}.nation-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:7mm;margin-top:14mm}.feature-card{border:1px solid rgba(7,21,37,.16);padding:7mm;min-height:53mm;background:rgba(255,255,255,.42)}.feature-card h3{font-family:Georgia,serif;font-size:19pt;font-weight:400;color:var(--navy);margin-bottom:4mm}.feature-card p+p{margin-top:3mm}.feature-card span{color:var(--bronze);text-transform:uppercase;letter-spacing:.12em;font-size:8pt}.gold-card{background:linear-gradient(135deg,rgba(185,135,72,.18),rgba(255,255,255,.45));border-color:rgba(185,135,72,.45)}.small-note{position:absolute;left:18mm;bottom:12mm;font-size:7.8pt;color:#6a6258;letter-spacing:.05em}
.world-map{position:absolute;right:-22mm;top:55mm;width:120mm;height:120mm;border-radius:50%;border:1px solid rgba(185,135,72,.35);opacity:.45}.world-map:before{content:"";position:absolute;inset:22mm;border:1px solid rgba(185,135,72,.4);border-radius:50%}.world-map:after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px solid rgba(185,135,72,.4)}.assignment-list{margin-top:12mm;display:grid;grid-template-columns:1fr 1fr;gap:6mm;width:168mm}.assignment-list article{border-left:1.3mm solid var(--bronze);padding:4mm 5mm;background:rgba(255,255,255,.37)}.assignment-list span{font-size:7.5pt;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);font-weight:700}.assignment-list h3{font-family:Georgia,serif;font-size:17pt;font-weight:400;margin:1mm 0 2mm}.assignment-list p{font-size:9.3pt;line-height:1.48}

.recognition{padding:22mm 18mm}.recognition h2{font-size:28pt;width:150mm;margin-top:7mm}.recognition-intro{width:120mm;margin-top:8mm;color:#e9dfcf}.award-timeline{position:relative;margin-top:12mm;display:grid;grid-template-columns:repeat(5,1fr);gap:4mm}.award-timeline:before{content:"";position:absolute;left:0;right:0;top:10mm;height:1px;background:var(--bronze)}.award-timeline div{position:relative;padding-top:17mm}.award-timeline div:before{content:"";position:absolute;top:8mm;left:0;width:5mm;height:5mm;border-radius:50%;background:var(--bronze)}.award-timeline span{font-family:Georgia,serif;font-size:22pt;color:var(--bronze2)}.award-timeline h3{font-size:8pt;letter-spacing:.1em;text-transform:uppercase;margin-top:3mm;color:#fff}.award-timeline p{font-size:8.3pt;line-height:1.4;color:#d7cab9;margin:1mm 0 3mm}.recognition-stats{position:absolute;left:18mm;right:18mm;bottom:18mm;display:flex;justify-content:space-between;border-top:1px solid rgba(185,135,72,.7);padding-top:8mm}.recognition-stats strong{display:block;font-family:Georgia,serif;font-size:32pt;color:var(--bronze2)}.recognition-stats span{font-size:8pt;letter-spacing:.15em;text-transform:uppercase;color:#e7dccb}

.foundations{padding:22mm 20mm}.foundations h2{margin-top:8mm}.foundation-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:14mm;margin-top:15mm}.foundation-grid h3{font-family:Georgia,serif;font-size:18pt;font-weight:400;color:var(--navy);margin-bottom:4mm}.foundation-grid p+p,.foundation-grid h3:not(:first-child){margin-top:8mm}.chips{display:flex;flex-wrap:wrap;gap:2.5mm}.chips span{font-size:8.5pt;padding:2.2mm 3.2mm;border:1px solid rgba(7,21,37,.2);border-radius:20mm;background:#fff}.foundations blockquote{position:absolute;left:20mm;right:20mm;bottom:18mm;margin:0;padding:8mm 10mm;border-left:1.8mm solid var(--bronze);font-family:Georgia,serif;font-size:17pt;line-height:1.25;color:var(--navy);background:rgba(185,135,72,.09)}

.milestones{padding:24mm 17mm}.milestones h2{margin-top:8mm;width:160mm}.horizontal-timeline{margin-top:22mm;display:grid;grid-template-columns:repeat(9,1fr);gap:0;border-top:1px solid var(--bronze)}.horizontal-timeline div{padding:8mm 3mm 0;position:relative;min-height:68mm}.horizontal-timeline div:before{content:"";position:absolute;top:-2.2mm;left:3mm;width:4.4mm;height:4.4mm;border-radius:50%;background:var(--bronze)}.horizontal-timeline span{display:block;font-family:Georgia,serif;font-size:17pt;color:var(--bronze)}.horizontal-timeline p{font-size:8.4pt;line-height:1.35;margin-top:3mm}.timeline-note{position:absolute;left:18mm;right:18mm;bottom:24mm;border-top:1px solid rgba(7,21,37,.22);padding-top:7mm;font-family:Georgia,serif;font-size:15pt;line-height:1.35;color:var(--navy)}

.closing{background:var(--paper);color:var(--charcoal)}.closing-photo{position:absolute;left:0;top:0;bottom:0;width:84mm;background:url('../images/portrait-closing.jpg') center center/cover no-repeat}.closing-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,21,37,.05),rgba(7,21,37,.0))}.closing-copy{position:absolute;left:99mm;top:25mm;right:17mm}.closing-copy .kicker{margin-bottom:9mm}.closing-copy p{font-size:10.2pt;line-height:1.6;margin-bottom:5mm}.contact{margin-top:12mm;border-top:1px solid rgba(7,21,37,.16);padding-top:7mm}.contact h3{font-family:Georgia,serif;font-size:19pt;font-weight:400;color:var(--navy);margin-bottom:3mm}.closing-line{position:absolute;left:99mm;right:16mm;bottom:17mm;font-family:Georgia,serif;font-size:25pt;line-height:1.04;color:var(--navy)}
/* Edition II image handling update */
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% center;filter:saturate(.9) contrast(1.06)}
.cover-photo{display:none}
/* Cover layout refinement: keep name in left negative space, not over face */
.cover-img{object-position:72% center;}
.cover-copy{left:22mm;top:32mm;width:82mm;}
.cover-copy h1{font-size:40pt;line-height:.88;}
.cover-roles{margin-top:12mm;gap:3.6mm;font-size:10pt;}
.tagline{margin-top:14mm;width:66mm;font-size:14pt;}
/* Simulated magazine layering: title sits behind the subject where they meet */
.cover-img{z-index:0;}
.cover-vignette{z-index:1;}
.cover-copy{z-index:2;}
.cover-foreground{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;z-index:3;clip-path:polygon(35% 8%, 67% 8%, 80% 27%, 81% 82%, 34% 86%, 25% 33%);}
.cover-foreground{filter:saturate(.9) contrast(1.06);}
.cover-rule,.location{z-index:4;}
/* Final PDF-safe cover: text remains in the left negative space */
.cover-foreground{display:none !important;}
.cover-copy{left:20mm;top:36mm;width:64mm;z-index:2;}
.cover-copy h1{font-size:34pt;line-height:.9;}
.cover-roles{margin-top:11mm;gap:3mm;font-size:9pt;letter-spacing:.24em;}
.tagline{margin-top:13mm;width:60mm;font-size:13pt;}
.cover-vignette{background:linear-gradient(90deg,rgba(7,21,37,.95) 0%,rgba(7,21,37,.72) 32%,rgba(7,21,37,.14) 68%),linear-gradient(0deg,rgba(7,21,37,.70) 0%,rgba(7,21,37,.04) 46%);}
/* Shift portrait right to keep cover typography off face */
.cover-img{object-position:84% center;}
.cover-foreground{object-position:84% center;}
/* keep cover name fully clear of the subject */
.cover-copy h1{font-size:28pt;line-height:.96;}
.cover-copy{left:20mm;top:39mm;width:52mm;}
.cover-roles{font-size:8.4pt;gap:2.7mm;margin-top:10mm;}
.tagline{font-size:12.2pt;width:54mm;margin-top:12mm;}
/* Timeline readability refinement */
.horizontal-timeline{margin-top:16mm;display:grid;grid-template-columns:repeat(3,1fr);gap:8mm;border-top:0;}
.horizontal-timeline div{min-height:34mm;padding:5mm 5mm 4mm;border-top:1px solid var(--bronze);background:rgba(255,255,255,.35)}
.horizontal-timeline div:before{display:none;}
.horizontal-timeline span{font-size:20pt;}
.horizontal-timeline p{font-size:9.5pt;line-height:1.4;}
.timeline-note{font-size:14pt;bottom:20mm;}

/* =========================================================
   WEBSITE EXPERIENCE
   Full-width responsive presentation for gladstonetaylor.com.
   The print rules above still preserve the A4/PDF composition.
   ========================================================= */
@media screen {
  html { background: var(--paper); scroll-behavior: smooth; }
  body { background: var(--paper); overflow-x: hidden; }
  .book { width: 100%; margin: 0; padding: 0; }
  .page {
    width: 100%;
    height: auto;
    min-height: 100svh;
    margin: 0;
    box-shadow: none;
    overflow: hidden;
  }

  /* Consistent editorial content measure on wide displays */
  .story,
  .story-cont,
  .career,
  .nation,
  .world,
  .recognition,
  .foundations,
  .milestones {
    padding-left: max(5vw, calc((100vw - 1280px) / 2));
    padding-right: max(5vw, calc((100vw - 1280px) / 2));
    padding-top: clamp(72px, 8vw, 128px);
    padding-bottom: clamp(72px, 8vw, 128px);
  }

  p { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.68; }
  h2 { font-size: clamp(46px, 5vw, 76px); line-height: .98; }
  .kicker,.eyebrow { font-size: clamp(11px, .75vw, 13px); }
  .page-number { top: 32px; right: max(4vw, calc((100vw - 1280px) / 2)); }

  /* COVER — immersive rather than an A4 sheet */
  .cover { min-height: 100svh; }
  .cover-img {
    object-position: 68% center;
    width: 100%; height: 100%;
  }
  .cover-vignette {
    background:
      linear-gradient(90deg, rgba(7,21,37,.96) 0%, rgba(7,21,37,.80) 25%, rgba(7,21,37,.28) 54%, rgba(7,21,37,.06) 78%),
      linear-gradient(0deg, rgba(7,21,37,.72) 0%, rgba(7,21,37,.04) 52%);
  }
  .cover-rule {
    left: max(3.5vw, calc((100vw - 1380px) / 2));
    top: 5vh;
    width: 0;
    height: 90vh;
    border-left-width: 4px;
  }
  .cover-copy {
    left: max(6vw, calc((100vw - 1240px) / 2));
    top: 13vh;
    width: min(470px, 38vw);
  }
  .cover-copy h1 {
    font-size: clamp(56px, 6.5vw, 104px);
    line-height: .84;
    letter-spacing: .01em;
  }
  .cover-roles {
    margin-top: clamp(30px, 5vh, 55px);
    gap: 12px;
    font-size: clamp(13px, 1vw, 17px);
    letter-spacing: .26em;
  }
  .tagline {
    width: min(440px, 34vw);
    margin-top: clamp(36px, 6vh, 70px);
    font-size: clamp(21px, 1.8vw, 30px);
    line-height: 1.3;
  }
  .location {
    right: max(5vw, calc((100vw - 1280px) / 2));
    bottom: 5vh;
    font-size: 12px;
  }

  /* STORY */
  .story .opening-line {
    width: min(1020px, 82vw);
    margin-top: clamp(30px, 4vw, 64px);
    font-size: clamp(46px, 5.2vw, 82px);
  }
  .story-grid {
    width: min(900px, 72vw);
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: clamp(36px, 5vw, 80px);
    margin-top: clamp(55px, 7vw, 100px);
  }
  .margin-stats {
    right: max(5vw, calc((100vw - 1280px) / 2));
    bottom: clamp(60px, 7vw, 110px);
    width: min(280px, 20vw);
    gap: 30px;
  }
  .margin-stats strong { font-size: clamp(42px, 4vw, 64px); }
  .margin-stats span { font-size: 11px; }

  .story-cont { min-height: 86svh; }
  .pull-quote { width: min(980px, 78vw); font-size: clamp(45px, 5.2vw, 78px); }
  .story-cont-copy { width: min(980px, 80vw); margin-top: 70px; column-gap: 70px; }
  .at-glance-inline {
    position: static;
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 32px;
    width: min(900px, 80vw);
  }
  .at-glance-inline div { width: auto; border-top: 1px solid var(--bronze); padding-top: 16px; }
  .at-glance-inline strong { font-size: clamp(42px, 4vw, 64px); }

  /* CAREER */
  .career h2 { width: min(980px, 82vw); }
  .vertical { width: min(980px, 82vw); margin-top: 70px; padding-left: 58px; }
  .vertical:before { left: 12px; }
  .vertical article { margin-bottom: 58px; }
  .vertical article:before { left: -58px; width: 20px; height: 20px; }
  .vertical h3 { font-size: clamp(30px, 3vw, 46px); }
  .vertical h4 { font-size: 12px; }
  .vertical p { width: min(800px, 68vw); color:#e8ded1; }

  /* DOCUMENTING A NATION */
  .nation h2,.world h2 { width: min(1000px, 82vw); font-size: clamp(44px, 4.7vw, 72px); }
  .nation-grid {
    width: min(1240px, 90vw);
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 26px;
    margin-top: 56px;
  }
  .feature-card { padding: clamp(26px, 3vw, 44px); min-height: 0; }
  .feature-card h3 { font-size: clamp(28px, 2.5vw, 40px); }
  .small-note {
    position: static;
    margin-top: 28px;
    font-size: 12px;
  }

  /* REPRESENTING A NATION */
  .world-map {
    width: min(44vw, 620px); height: min(44vw, 620px);
    right: -9vw; top: 21vh;
  }
  .assignment-list {
    width: min(1040px, 78vw);
    margin-top: 56px;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 22px;
  }
  .assignment-list article { padding: 24px 28px; }
  .assignment-list h3 { font-size: clamp(26px, 2.3vw, 38px); }
  .assignment-list p { font-size: clamp(15px, 1vw, 18px); }

  /* RECOGNITION */
  .recognition h2 { width: min(980px, 82vw); font-size: clamp(44px, 4.7vw, 72px); }
  .recognition-intro { width: min(760px, 65vw); margin-top: 36px; }
  .award-timeline {
    width: min(1260px, 92vw);
    margin-top: 72px;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 24px;
  }
  .award-timeline div { padding-top: 72px; }
  .award-timeline:before { top: 38px; }
  .award-timeline div:before { top: 29px; width: 18px; height: 18px; }
  .award-timeline span { font-size: clamp(36px, 3.5vw, 56px); }
  .award-timeline h3 { font-size: 12px; }
  .award-timeline p { font-size: 14px; }
  .recognition-stats {
    position: static;
    width: min(1100px, 88vw);
    margin-top: 72px;
    padding-top: 30px;
  }
  .recognition-stats strong { font-size: clamp(44px, 4vw, 66px); }

  /* FOUNDATIONS */
  .foundation-grid {
    width: min(1180px, 90vw);
    grid-template-columns: .9fr 1.4fr;
    gap: clamp(50px, 7vw, 100px);
    margin-top: 64px;
  }
  .foundation-grid h3 { font-size: clamp(28px, 2.4vw, 38px); }
  .chips { gap: 12px; }
  .chips span { font-size: 14px; padding: 10px 16px; }
  .foundations blockquote {
    position: static;
    width: min(1120px, 90vw);
    margin: 80px 0 0;
    padding: 34px 44px;
    font-size: clamp(27px, 2.6vw, 42px);
  }

  /* CAREER TIMELINE */
  .horizontal-timeline {
    width: min(1240px, 92vw);
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 24px;
    margin-top: 64px;
  }
  .horizontal-timeline div { min-height: 150px; padding: 24px; }
  .horizontal-timeline span { font-size: clamp(34px, 3vw, 48px); }
  .horizontal-timeline p { font-size: 16px; }
  .timeline-note {
    position: static;
    width: min(1120px, 90vw);
    margin-top: 64px;
    font-size: clamp(22px, 2vw, 30px);
  }

  /* CLOSING — split editorial hero */
  .closing { min-height: 100svh; background: var(--navy); color: #f7f0e6; }
  .closing-photo { left:auto; right:0; width:50vw; background-position:center center; }
  .closing-photo:after {
    background: linear-gradient(90deg, var(--navy) 0%, rgba(7,21,37,.62) 20%, rgba(7,21,37,0) 58%);
  }
  .closing-copy {
    left: max(6vw, calc((100vw - 1240px) / 2));
    top: 11vh;
    right: auto;
    width: min(560px, 39vw);
  }
  .closing-copy p { font-size: clamp(16px, 1.08vw, 19px); }
  .contact { border-top-color: rgba(255,255,255,.22); }
  .contact h3 { color: var(--bronze2); }
  .closing-line {
    left: max(6vw, calc((100vw - 1240px) / 2));
    right: auto;
    width: min(570px, 40vw);
    bottom: 8vh;
    font-size: clamp(34px, 3.7vw, 58px);
    color: var(--bronze2);
  }
}

/* Tablet */
@media screen and (max-width: 980px) {
  .page { min-height: auto; }
  .story,.story-cont,.career,.nation,.world,.recognition,.foundations,.milestones { padding: 72px 7vw; }
  .cover-copy { width: 46vw; left: 7vw; top: 12vh; }
  .cover-copy h1 { font-size: clamp(48px, 8vw, 72px); }
  .cover-img { object-position: 72% center; }
  .tagline { width: 42vw; }
  .story .opening-line,.story-grid,.pull-quote,.story-cont-copy,.career h2,.vertical,.nation h2,.world h2,.assignment-list,.recognition h2,.recognition-intro,.foundation-grid,.foundations blockquote,.horizontal-timeline,.timeline-note { width: 100%; }
  .story-grid { grid-template-columns: 1fr 1fr; }
  .margin-stats { position: static; width: 100%; margin-top: 52px; grid-template-columns: repeat(3,1fr); }
  .nation-grid,.assignment-list { grid-template-columns: 1fr 1fr; }
  .award-timeline { width:100%; grid-template-columns: repeat(2,1fr); }
  .award-timeline:before { display:none; }
  .award-timeline div { padding: 20px 0; border-top:1px solid var(--bronze); }
  .award-timeline div:before { display:none; }
  .closing-copy { width: 46vw; left: 6vw; }
  .closing-photo { width: 48vw; }
  .closing-line { width: 46vw; left: 6vw; }
}

/* Mobile: convert spreads into a readable single-column feature */
@media screen and (max-width: 680px) {
  .page { min-height: auto; }
  .story,.story-cont,.career,.nation,.world,.recognition,.foundations,.milestones { padding: 64px 24px; }
  .page-number { display:none; }
  p { font-size:16px; line-height:1.7; }
  h2 { font-size: 42px; }

  .cover { min-height: 92svh; }
  .cover-img { object-position: 64% center; }
  .cover-vignette { background: linear-gradient(0deg,rgba(7,21,37,.94) 0%,rgba(7,21,37,.52) 48%,rgba(7,21,37,.14) 100%); }
  .cover-rule { left: 20px; top: 5vh; height: 82vh; border-left-width: 3px; }
  .cover-copy { left: 38px; right: 24px; top: auto; bottom: 18vh; width:auto; }
  .cover-copy h1 { font-size: clamp(50px, 15vw, 72px); }
  .cover-roles { margin-top: 24px; font-size: 11px; gap:8px; }
  .tagline { width: 86%; margin-top: 28px; font-size: 20px; }
  .location { left:38px; right:auto; bottom:5vh; font-size:10px; }

  .story .opening-line { width:100%; font-size: 43px; }
  .story-grid,.nation-grid,.assignment-list,.foundation-grid,.horizontal-timeline,.at-glance-inline { grid-template-columns: 1fr; width:100%; }
  .story-grid { gap: 0; }
  .story-grid > div + div { margin-top: 24px; }
  .margin-stats { grid-template-columns: 1fr 1fr; }
  .story-cont-copy { columns:1; width:100%; }
  .pull-quote { width:100%; font-size: 42px; }
  .vertical { width:100%; padding-left:42px; }
  .vertical p { width:100%; }
  .world-map { display:none; }
  .assignment-list { width:100%; }
  .recognition-intro { width:100%; }
  .award-timeline { grid-template-columns:1fr; }
  .recognition-stats { width:100%; flex-direction:column; gap:26px; }
  .foundation-grid { gap:48px; }
  .foundations blockquote { width:100%; padding:26px; font-size:26px; }
  .horizontal-timeline { grid-template-columns:1fr; }
  .timeline-note { width:100%; font-size:22px; }

  .closing { min-height:auto; padding-bottom:0; }
  .closing-photo { position:relative; width:100%; height:62svh; min-height:460px; background-position:center 20%; }
  .closing-photo:after { background: linear-gradient(0deg,var(--navy) 0%,rgba(7,21,37,.08) 45%); }
  .closing-copy { position:relative; left:auto; top:auto; width:100%; padding:56px 24px 20px; }
  .closing-line { position:relative; left:auto; right:auto; bottom:auto; width:100%; padding:20px 24px 72px; font-size:40px; }
}

/* ==========================================================
   WEB HERO FIX — preserve the original portrait composition
   The print/PDF rules remain unchanged. On screen, the cover
   portrait is contained at full height on the right so the
   subject's head and camera are never cropped by wide displays.
   ========================================================== */
@media screen and (min-width: 681px) {
  .cover {
    min-height: 100svh;
    height: 100svh;
    background: var(--navy);
    overflow: hidden;
  }

  .cover-img {
    inset: 0 0 0 auto;
    width: 62vw;
    height: 100%;
    object-fit: contain;
    object-position: right center;
    filter: saturate(.9) contrast(1.06);
  }

  /* Blend the contained portrait into the navy negative space. */
  .cover-vignette {
    background:
      linear-gradient(90deg,
        var(--navy) 0%,
        rgba(7,21,37,.98) 29%,
        rgba(7,21,37,.82) 43%,
        rgba(7,21,37,.30) 61%,
        rgba(7,21,37,.08) 78%,
        rgba(7,21,37,.10) 100%),
      linear-gradient(0deg,rgba(7,21,37,.45) 0%,rgba(7,21,37,0) 34%);
  }

  .cover-copy {
    left: max(6vw, calc((100vw - 1440px) / 2));
    top: 11vh;
    width: min(500px, 38vw);
  }

  .cover-copy h1 {
    font-size: clamp(58px, 5.4vw, 92px);
    line-height: .86;
  }

  .cover-roles {
    margin-top: 42px;
    font-size: clamp(11px, .9vw, 15px);
    gap: 11px;
  }

  .tagline {
    margin-top: 54px;
    width: min(430px, 31vw);
    font-size: clamp(22px, 1.75vw, 31px);
  }

  .cover-rule {
    left: max(3.4vw, calc((100vw - 1540px) / 2));
    top: 5vh;
    height: 90vh;
  }

  .location {
    left: max(6vw, calc((100vw - 1440px) / 2));
    right: auto;
    bottom: 5vh;
  }
}

/* Very wide monitors: give the portrait more breathing room instead of zooming it. */
@media screen and (min-aspect-ratio: 2/1) and (min-width: 1200px) {
  .cover-img { width: 56vw; }
}

/* ==========================================================
   WEB v3 — editorial hero alignment + persistent navigation
   Keeps the original supplied portrait untouched. The portrait
   is scaled by viewport height and positioned within the hero,
   rather than being cropped or pinned to the far-right edge.
   ========================================================== */
@media screen {
  section[id] { scroll-margin-top: 74px; }

  .site-nav {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    min-height: 66px;
    padding: 0 max(3.2vw, calc((100vw - 1460px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    color: #f7f0e6;
    background: linear-gradient(180deg, rgba(3,12,22,.90), rgba(3,12,22,.64));
    border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
  }
  .site-nav a { color: inherit; text-decoration: none; }
  .nav-brand {
    flex: 0 0 auto;
    color: var(--bronze2) !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .23em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(16px, 1.8vw, 31px);
    min-width: 0;
  }
  .nav-links a {
    position: relative;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .88;
    transition: opacity .18s ease, color .18s ease;
  }
  .nav-links a:hover,
  .nav-links a:focus-visible { opacity: 1; color: var(--bronze2); }
  .print-profile {
    appearance: none;
    border: 1px solid rgba(201,151,76,.76);
    background: rgba(185,135,72,.18);
    color: #f5d59c;
    padding: 11px 16px;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
  }
  .print-profile:hover { background: rgba(185,135,72,.31); }
}

@media screen and (min-width: 981px) {
  .cover {
    min-height: 100svh;
    height: 100svh;
    background: var(--navy);
    overflow: hidden;
  }

  /* Override the earlier right-anchored hero treatment. */
  .cover-img {
    top: 0;
    bottom: auto;
    right: auto;
    left: 68%;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: fill;
    object-position: center;
    transform: translateX(-50%);
    filter: saturate(.9) contrast(1.06);
  }

  .cover-vignette {
    background:
      linear-gradient(90deg,
        rgba(7,21,37,.98) 0%,
        rgba(7,21,37,.91) 23%,
        rgba(7,21,37,.62) 39%,
        rgba(7,21,37,.19) 58%,
        rgba(7,21,37,.03) 73%,
        rgba(7,21,37,.18) 100%),
      linear-gradient(0deg,rgba(7,21,37,.50) 0%,rgba(7,21,37,.0) 39%);
  }

  .cover-rule {
    left: max(4.8vw, calc((100vw - 1440px) / 2));
    top: 11vh;
    height: 80vh;
    border-left-width: 3px;
  }

  .cover-copy {
    left: max(7.3vw, calc((100vw - 1360px) / 2));
    top: 17vh;
    width: min(520px, 38vw);
  }

  .cover-copy h1 {
    font-size: clamp(58px, 5.5vw, 92px);
    line-height: .86;
  }

  .cover-roles {
    margin-top: clamp(28px, 4vh, 44px);
    font-size: clamp(11px, .82vw, 14px);
    gap: 10px;
  }

  .tagline {
    width: min(440px, 31vw);
    margin-top: clamp(34px, 5vh, 58px);
    font-size: clamp(21px, 1.6vw, 28px);
  }

  .location {
    left: max(7.3vw, calc((100vw - 1360px) / 2));
    right: auto;
    bottom: 6vh;
  }
}

/* Wide-screen tuning: keep the subject editorially centred instead of
   drifting to the right as the viewport gets wider. */
@media screen and (min-width: 1500px) and (min-aspect-ratio: 16/9) {
  .cover-img { left: 69%; }
}
@media screen and (min-width: 1900px) {
  .cover-img { left: 67%; }
  .cover-copy { width: 540px; }
}

@media screen and (min-width: 681px) and (max-width: 980px) {
  .site-nav { min-height: 60px; padding: 0 22px; }
  .nav-brand { display:none; }
  .nav-links { width:100%; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }
  .nav-links::-webkit-scrollbar { display:none; }
  .cover-img {
    top:0; right:auto; bottom:auto; left:69%;
    height:100%; width:auto; max-width:none;
    object-fit:fill; transform:translateX(-50%);
  }
}

@media screen and (max-width: 680px) {
  .site-nav {
    min-height: 52px;
    padding: 0 14px;
  }
  .nav-brand { display:none; }
  .nav-links {
    width: 100%;
    justify-content:flex-start;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display:none; }
  .nav-links a { font-size:9px; }
  .print-profile { display:none; }
  section[id] { scroll-margin-top: 54px; }
}

@media print {
  .site-nav { display:none !important; }
}


/* =========================================================
   WEB V4 — hero alignment to match the magazine/PDF cover
   Uses the original supplied portrait without altering likeness.
   ========================================================= */
@media screen {
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    min-height: 64px;
    padding: 0 3.25vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(180deg, rgba(7,21,37,.92), rgba(7,21,37,.62) 72%, rgba(7,21,37,0));
    backdrop-filter: blur(3px);
  }
  .nav-brand,
  .nav-links a,
  .print-profile,
  .talk-button {
    text-decoration: none;
  }
  .nav-brand {
    color: var(--bronze);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }
  .nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(14px, 1.75vw, 30px);
    white-space: nowrap;
  }
  .nav-links > a:not(.print-profile):not(.talk-button) {
    color: rgba(255,255,255,.88);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    font-weight: 700;
  }
  .nav-links > a:not(.print-profile):not(.talk-button):hover { color: var(--bronze); }
  .talk-button,
  .print-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--bronze);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10px;
    font-weight: 800;
    transition: .2s ease;
  }
  .talk-button { color: var(--bronze); background: transparent; }
  .print-profile { color: #fff; background: rgba(185,135,72,.92); }
  .talk-button:hover { background: rgba(185,135,72,.12); }
  .print-profile:hover { background: var(--bronze); }

  /* Magazine-cover composition on wide screens:
     the original portrait is kept at full viewport height and moved inward
     so the subject occupies the centre/right of the composition rather
     than being pinned to the browser edge. */
  .cover {
    position: relative;
    min-height: 100svh;
    background: #071525;
  }
  .cover-img {
    position: absolute;
    top: 0;
    bottom: auto;
    left: 37.5vw;
    right: auto;
    width: auto;
    height: 100svh;
    max-width: none;
    object-fit: contain;
    object-position: center center;
    filter: saturate(.9) contrast(1.06);
    z-index: 0;
  }
  .cover-vignette {
    z-index: 1;
    background:
      linear-gradient(90deg, rgba(7,21,37,.96) 0%, rgba(7,21,37,.84) 26%, rgba(7,21,37,.45) 43%, rgba(7,21,37,.11) 66%, rgba(7,21,37,.06) 100%),
      linear-gradient(0deg, rgba(7,21,37,.70) 0%, rgba(7,21,37,.02) 48%);
  }
  .cover-copy {
    left: max(6vw, calc((100vw - 1280px) / 2));
    top: 16vh;
    width: min(470px, 34vw);
    z-index: 2;
  }
  .cover-copy h1 {
    font-size: clamp(52px, 5.7vw, 92px);
    line-height: .88;
  }
  .cover-roles {
    margin-top: clamp(26px, 4vh, 44px);
  }
  .tagline {
    width: min(430px, 31vw);
    margin-top: clamp(30px, 4.8vh, 54px);
    font-size: clamp(20px, 1.55vw, 27px);
  }
  .cover-rule {
    left: max(3.3vw, calc((100vw - 1390px) / 2));
    top: 7vh;
    height: 86vh;
  }
  .location {
    left: max(6vw, calc((100vw - 1280px) / 2));
    right: auto;
    bottom: 4.5vh;
  }
}

@media screen and (min-aspect-ratio: 2/1) {
  .cover-img { left: 42vw; }
}

@media screen and (max-width: 1100px) {
  .site-nav { padding: 0 20px; overflow-x: auto; }
  .nav-brand { display: none; }
  .nav-links { width: max-content; min-width: 100%; justify-content: flex-start; gap: 18px; }
  .cover-img { left: 34vw; }
  .cover-copy { width: min(440px, 43vw); }
  .tagline { width: min(410px, 39vw); }
}

@media screen and (max-width: 760px) {
  .site-nav { min-height: 56px; }
  .nav-links > a:not(.talk-button):not(.print-profile) { display:none; }
  .nav-links { justify-content: flex-end; }
  .cover { min-height: 100svh; }
  .cover-img {
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
  }
  .cover-vignette {
    background:
      linear-gradient(180deg, rgba(7,21,37,.2) 0%, rgba(7,21,37,.18) 38%, rgba(7,21,37,.88) 72%, rgba(7,21,37,.98) 100%),
      linear-gradient(90deg, rgba(7,21,37,.74), rgba(7,21,37,.05) 70%);
  }
  .cover-copy {
    left: 24px;
    right: 24px;
    top: auto;
    bottom: 16vh;
    width: auto;
  }
  .cover-copy h1 { font-size: clamp(46px, 15vw, 72px); }
  .cover-roles { margin-top: 20px; font-size: 11px; gap: 8px; }
  .tagline { margin-top: 22px; width: min(90vw, 430px); font-size: 19px; }
  .cover-rule { left: 14px; top: 11vh; height: 76vh; }
  .location { left: 24px; bottom: 4vh; }
}

/* WEB V5 — lock cover elements to one shared magazine canvas.
   This preserves the PDF's relative portrait/text alignment on wide screens
   while allowing navy to extend beyond the portrait on ultrawide displays. */
@media screen and (min-width: 761px) {
  .cover {
    --cover-h: 100svh;
    --cover-w: calc(var(--cover-h) * 0.6666667);
    --cover-left: calc(50vw - (var(--cover-w) / 2));
    min-height: var(--cover-h);
    overflow: hidden;
  }
  .cover-img {
    top: 0;
    left: var(--cover-left) !important;
    width: var(--cover-w) !important;
    height: var(--cover-h) !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
  .cover-copy {
    left: calc(var(--cover-left) + (var(--cover-w) * 0.092)) !important;
    top: 11.5vh !important;
    width: calc(var(--cover-w) * 0.39) !important;
  }
  .cover-copy h1 {
    font-size: clamp(34px, calc(var(--cover-w) * 0.061), 58px) !important;
    line-height: .92 !important;
  }
  .cover-roles {
    margin-top: 4.2vh !important;
    font-size: clamp(8px, calc(var(--cover-w) * 0.012), 11px) !important;
    gap: 1.1vh !important;
  }
  .tagline {
    width: calc(var(--cover-w) * 0.31) !important;
    margin-top: 4.8vh !important;
    font-size: clamp(12px, calc(var(--cover-w) * 0.021), 18px) !important;
    line-height: 1.22 !important;
  }
  .cover-rule {
    left: calc(var(--cover-left) + (var(--cover-w) * 0.047)) !important;
    top: 2.8vh !important;
    height: 94vh !important;
  }
  .location {
    left: auto !important;
    right: calc((100vw - var(--cover-w)) / 2 + (var(--cover-w) * 0.075)) !important;
    bottom: 4.3vh !important;
  }
  .cover-vignette {
    background:
      linear-gradient(90deg, rgba(7,21,37,.58) 0%, rgba(7,21,37,.28) 28%, rgba(7,21,37,.03) 58%, rgba(7,21,37,.03) 100%),
      linear-gradient(0deg, rgba(7,21,37,.38) 0%, rgba(7,21,37,.01) 44%) !important;
  }
}

/* =========================================================
   V6 COVER — web hero uses the exact magazine-cover geometry.
   All portrait and typography elements share one A4-ratio stage,
   so their relative positions no longer drift on wide displays.
   ========================================================= */
@media screen and (min-width: 769px) {
  .cover {
    min-height: 100svh;
    background: #071525;
    overflow: hidden;
  }
  .cover-stage {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100svh;
    width: 70.707svh; /* A4 width/height: 210/297 */
    max-width: 100vw;
    transform: translateX(-50%);
    overflow: hidden;
    background: #071525;
  }
  .cover-stage .cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    filter: saturate(.9) contrast(1.06);
    z-index: 0;
  }
  .cover-stage .cover-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg,rgba(7,21,37,.86) 0%,rgba(7,21,37,.55) 31%,rgba(7,21,37,.12) 68%,rgba(7,21,37,.02) 100%),
      linear-gradient(0deg,rgba(7,21,37,.60) 0%,rgba(7,21,37,.03) 48%);
  }
  .cover-stage .cover-rule {
    position: absolute;
    left: 5.8%;
    top: 3.1%;
    height: 93.1%;
    width: 0;
    border-left: clamp(2px,.22svh,4px) solid var(--bronze);
    z-index: 3;
  }
  .cover-stage .cover-copy {
    position: absolute;
    left: 10.1%;
    top: 9.6%;
    width: 42%;
    z-index: 3;
  }
  .cover-stage .cover-copy .eyebrow {
    margin: 0 0 3.4svh 0;
    font-size: clamp(8px, .78svh, 12px);
    letter-spacing: .30em;
    color: var(--bronze2);
  }
  .cover-stage .cover-copy h1 {
    margin: 0;
    font-size: clamp(38px, 5.25svh, 70px);
    line-height: .90;
    letter-spacing: .015em;
    font-weight: 400;
  }
  .cover-stage .cover-roles {
    margin-top: 4.1svh;
    gap: 1.05svh;
    font-size: clamp(9px, 1.08svh, 14px);
    letter-spacing: .25em;
  }
  .cover-stage .tagline {
    margin-top: 4.8svh;
    width: 95%;
    font-size: clamp(14px, 1.62svh, 22px);
    line-height: 1.25;
  }
  .cover-stage .location {
    position: absolute;
    right: 5.7%;
    bottom: 4.6%;
    z-index: 3;
    font-size: clamp(7px, .72svh, 10px);
    letter-spacing: .32em;
  }
}

@media screen and (max-width: 768px) {
  .cover-stage { position:absolute; inset:0; width:100%; height:100%; }
}

/* =========================================================
   WEB V7 COVER — full-viewport editorial composition.
   The supplied portrait remains untouched. On widescreen displays
   it fills the hero, but is anchored toward the TOP so the crop is
   taken primarily from the lower body rather than the head/face.
   Text/rule positioning follows the proportions of the PDF cover.
   ========================================================= */
@media screen and (min-width: 769px) {
  .cover {
    position: relative;
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
    background: #071525;
  }

  /* Undo the narrow A4 stage from V6. The stage is the viewport. */
  .cover-stage {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    transform: none !important;
    overflow: hidden;
    background: #071525;
  }

  .cover-stage .cover-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    /* Preserve the head and camera on 16:9 / ultrawide displays. */
    object-position: 50% 13% !important;
    filter: saturate(.9) contrast(1.06);
    z-index: 0;
  }

  .cover-stage .cover-vignette {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    background:
      linear-gradient(90deg,
        rgba(7,21,37,.95) 0%,
        rgba(7,21,37,.82) 22%,
        rgba(7,21,37,.48) 37%,
        rgba(7,21,37,.15) 56%,
        rgba(7,21,37,.03) 76%),
      linear-gradient(0deg,
        rgba(7,21,37,.70) 0%,
        rgba(7,21,37,.15) 38%,
        rgba(7,21,37,.02) 65%);
  }

  .cover-stage .cover-rule {
    position: absolute !important;
    left: 5.6vw !important;
    top: 6.5vh !important;
    height: 87vh !important;
    width: 0 !important;
    border-left: 3px solid var(--bronze) !important;
    z-index: 3;
  }

  .cover-stage .cover-copy {
    position: absolute !important;
    left: 8.6vw !important;
    top: 14.5vh !important;
    width: min(29vw, 520px) !important;
    z-index: 3;
  }

  .cover-stage .cover-copy .eyebrow {
    margin: 0 0 clamp(18px, 2.4vh, 30px) 0 !important;
    font-size: clamp(9px, .72vw, 12px) !important;
    letter-spacing: .30em !important;
  }

  .cover-stage .cover-copy h1 {
    margin: 0 !important;
    font-size: clamp(52px, 4.8vw, 88px) !important;
    line-height: .88 !important;
    letter-spacing: .01em !important;
  }

  .cover-stage .cover-roles {
    margin-top: clamp(28px, 4.2vh, 46px) !important;
    gap: 10px !important;
    font-size: clamp(10px, .78vw, 14px) !important;
    letter-spacing: .25em !important;
  }

  .cover-stage .tagline {
    margin-top: clamp(34px, 5.1vh, 58px) !important;
    width: min(25vw, 420px) !important;
    font-size: clamp(17px, 1.35vw, 25px) !important;
    line-height: 1.28 !important;
  }

  .cover-stage .location {
    position: absolute !important;
    left: auto !important;
    right: 6.4vw !important;
    bottom: 5.2vh !important;
    z-index: 3;
    font-size: clamp(8px, .58vw, 10px) !important;
    letter-spacing: .32em !important;
  }
}

/* Slightly less aggressive crop on conventional laptop ratios. */
@media screen and (min-width: 769px) and (max-aspect-ratio: 16/10) {
  .cover-stage .cover-img { object-position: 50% 9% !important; }
}

/* =========================================================
   WEB V8 COVER — exact PDF-cover composition on desktop.
   The original portrait is never cropped or repositioned independently.
   The portrait and all cover typography share one 2:3 artboard,
   matching the PDF page geometry. Extra widescreen area is simply navy.
   ========================================================= */
@media screen and (min-width: 769px) {
  :root { --profile-nav-h: 44px; }

  .cover {
    position: relative !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    background: #071525 !important;
  }

  .cover-stage {
    position: absolute !important;
    top: var(--profile-nav-h) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    height: calc(100svh - var(--profile-nav-h)) !important;
    width: calc((100svh - var(--profile-nav-h)) * 0.6666667) !important;
    max-width: 100vw !important;
    aspect-ratio: 2 / 3 !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important;
    background: #071525 !important;
  }

  .cover-stage .cover-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: fill !important;
    object-position: center center !important;
    transform: none !important;
    filter: saturate(.90) contrast(1.06) !important;
    z-index: 0 !important;
  }

  .cover-stage .cover-vignette {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
      linear-gradient(90deg,
        rgba(7,21,37,.42) 0%,
        rgba(7,21,37,.22) 31%,
        rgba(7,21,37,.06) 59%,
        rgba(7,21,37,.01) 100%),
      linear-gradient(0deg,
        rgba(7,21,37,.44) 0%,
        rgba(7,21,37,.08) 43%,
        rgba(7,21,37,.01) 73%) !important;
  }

  /* Coordinates below are proportional to the approved PDF cover. */
  .cover-stage .cover-rule {
    position: absolute !important;
    left: 4.8% !important;
    top: 2.7% !important;
    bottom: auto !important;
    height: 93.2% !important;
    width: 0 !important;
    border-left: clamp(2px, .20svh, 4px) solid var(--bronze) !important;
    z-index: 3 !important;
  }

  .cover-stage .cover-copy {
    position: absolute !important;
    left: 8.0% !important;
    top: 9.6% !important;
    width: 40.5% !important;
    right: auto !important;
    z-index: 3 !important;
  }

  .cover-stage .cover-copy .eyebrow {
    margin: 0 0 3.4% 0 !important;
    font-size: clamp(8px, .78svh, 12px) !important;
    line-height: 1.35 !important;
    letter-spacing: .30em !important;
    color: var(--bronze2) !important;
  }

  .cover-stage .cover-copy h1 {
    margin: 0 !important;
    font-size: clamp(37px, 5.05svh, 68px) !important;
    line-height: .90 !important;
    letter-spacing: .015em !important;
    font-weight: 400 !important;
  }

  .cover-stage .cover-roles {
    margin-top: 4.0svh !important;
    gap: .95svh !important;
    font-size: clamp(9px, 1.02svh, 14px) !important;
    letter-spacing: .25em !important;
  }

  .cover-stage .tagline {
    margin-top: 4.7svh !important;
    width: 92% !important;
    font-size: clamp(14px, 1.52svh, 21px) !important;
    line-height: 1.26 !important;
  }

  .cover-stage .location {
    position: absolute !important;
    left: auto !important;
    right: 5.7% !important;
    bottom: 4.6% !important;
    top: auto !important;
    z-index: 3 !important;
    font-size: clamp(7px, .70svh, 10px) !important;
    letter-spacing: .32em !important;
  }

  /* Make the fixed navigation independent from the magazine artboard. */
  .site-nav {
    height: var(--profile-nav-h) !important;
    min-height: var(--profile-nav-h) !important;
    z-index: 50 !important;
  }
}

/* On portrait/tablet screens, fit the entire cover artboard by width. */
@media screen and (min-width: 769px) and (max-aspect-ratio: 4/5) {
  .cover-stage {
    width: 100vw !important;
    height: 150vw !important;
    max-height: calc(100svh - var(--profile-nav-h)) !important;
  }
}