/* dentthefuture.com · Expedition design (from concepts/a)
   Layout: 12-column asymmetric editorial grid; photos sit off-axis, text holds a 7-col measure;
   one saturated Dent-blue band per page carries the call to action. */
@font-face { font-family:"Antenna"; src:url("fonts/Antenna-Regular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Agenda"; src:url("fonts/Agenda-Regular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Agenda"; src:url("fonts/Agenda-RegularItalic.otf") format("opentype"); font-style:italic; font-weight:400; font-display:swap; }

:root {
  --paper:#f7f9fb;      /* cool off-white, biased toward the blue */
  --ink:#16202a;
  --muted:#5b6774;
  --line:rgba(22,32,42,.14);
  --blue:#0066b3;
  --on-blue:#ffffff;
  --blue-soft:#e3eef7;
  --display:"Antenna","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --body:"Agenda","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --max:1240px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0e151c; --ink:#e7edf2; --muted:#93a1ae; --line:rgba(231,237,242,.14);
    --blue:#5aaee8; --on-blue:#06121c; --blue-soft:#13283a; color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --paper:#0e151c; --ink:#e7edf2; --muted:#93a1ae; --line:rgba(231,237,242,.14);
  --blue:#5aaee8; --on-blue:#06121c; --blue-soft:#13283a; color-scheme:dark;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:18px/1.6 var(--body); }
img { max-width:100%; display:block; }
h1,h2,h3 { font-family:var(--display); font-weight:400; margin:0; line-height:1.04; text-wrap:balance; letter-spacing:-.01em; }
p { margin:0; }
a { color:var(--blue); text-underline-offset:3px; }
a:focus-visible, .btn:focus-visible { outline:3px solid var(--blue); outline-offset:3px; border-radius:2px; }

.wrap { max-width:var(--max); margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width:700px) { .wrap { padding-left:max(40px, env(safe-area-inset-left, 0px)); padding-right:max(40px, env(safe-area-inset-right, 0px)); } }
.grid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; }

/* Concept strip */
.concept { font:500 12px/1 var(--data); letter-spacing:.04em; color:var(--muted); border-bottom:1px solid var(--line); }
.concept .wrap { display:flex; justify-content:space-between; gap:16px; padding-block:10px; }
.concept a { color:inherit; }

/* Header */
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:28px; }
.logo { width:118px; height:auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo { filter:invert(1) hue-rotate(180deg) brightness(1.1); } }
:root[data-theme="dark"] .logo { filter:invert(1) hue-rotate(180deg) brightness(1.1); }
.nav { display:flex; gap:28px; list-style:none; margin:0; padding:0; font-size:16px; }
.nav a { color:var(--ink); text-decoration:none; padding-block:4px; border-bottom:2px solid transparent; }
.nav a:hover { border-color:var(--line); }
.nav a[aria-current="page"] { border-color:var(--blue); }

.label { font:500 12px/1.3 var(--data); letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.coord { font:400 13px/1.4 var(--data); color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.01em; }

/* Hero */
.hero { padding-block:24px 96px; }
.hero .grid { align-items:end; row-gap:40px; }
.hero-text { grid-column:1 / span 7; }
.hero-text h1 { font-size:clamp(46px, 7.4vw, 104px); max-width:11ch; margin-top:18px; }
.hero-text .lede { font-size:clamp(19px, 1.9vw, 23px); line-height:1.5; color:var(--muted); max-width:36ch; margin-top:32px; }
.hero-photo { grid-column:9 / span 4; margin:0; }
.hero-photo img { width:100%; aspect-ratio:4/5; object-fit:cover; }
figcaption { display:flex; justify-content:space-between; gap:12px; margin-top:10px; font:400 12px/1.4 var(--data); color:var(--muted); }

.stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; margin-top:72px; padding-top:28px; border-top:1px solid var(--ink); }
.stat b { display:block; font:400 clamp(40px,4.4vw,60px)/1 var(--display); font-variant-numeric:tabular-nums; }
.stat span { display:block; margin-top:10px; font-size:15px; line-height:1.4; color:var(--muted); max-width:20ch; }

/* Blue band (the one bold move) */
.band { background:var(--blue); color:var(--on-blue); }
.band .wrap { padding-block:64px; }
.band .label, .band .coord { color:var(--on-blue); opacity:.82; }
.next { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto; gap:32px 48px; align-items:end; }
.next .when { font:400 clamp(64px,9vw,128px)/.86 var(--display); font-variant-numeric:tabular-nums; }
.next .when small { display:block; font:400 15px/1.3 var(--data); letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; opacity:.85; }
.next h2 { font-size:clamp(30px,3.4vw,46px); }
.next p { margin-top:12px; max-width:44ch; font-size:18px; opacity:.92; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:16px 26px; font:400 17px/1 var(--body); text-decoration:none; background:var(--ink); color:var(--paper); border-radius:999px; white-space:nowrap; transition:transform .2s ease; }
.btn:hover { transform:translateY(-2px); }
.band .btn { background:var(--on-blue); color:var(--blue); }
.band .btn:focus-visible { outline-color:var(--on-blue); }

/* Sections */
.sec { padding-block:112px; }
.sec-head { grid-column:1 / span 5; }
.sec-head h2 { font-size:clamp(34px,4vw,56px); margin-top:14px; }
.sec-body { grid-column:7 / span 6; }

.pillar { padding-block:28px; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 24px; }
.pillar:first-child { border-top:0; padding-top:0; }
.pillar h3 { font-size:28px; }
.pillar p { grid-column:1 / -1; color:var(--muted); font-size:17px; max-width:52ch; }
.pillar .where { grid-column:1 / -1; margin-top:8px; }
.pillar .more { grid-column:1 / -1; margin-top:6px; font-size:16px; }

/* Photo spread */
.spread { padding-bottom:24px; }
.spread .grid { row-gap:40px; }
.spread .a { grid-column:1 / span 7; margin:0; }
.spread .b { grid-column:9 / span 4; margin:120px 0 0; }
.spread img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.spread .b img { aspect-ratio:4/5; }

/* Expedition log */
.log { list-style:none; margin:56px 0 0; padding:0; }
.log li { display:grid; grid-template-columns:120px minmax(0,1fr) 220px; gap:8px 32px; padding-block:26px; border-top:1px solid var(--line); align-items:baseline; }
.log li:last-child { border-bottom:1px solid var(--line); }
.log time { font:400 14px/1.4 var(--data); color:var(--blue); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.log h3 { font-size:clamp(22px,2.2vw,28px); line-height:1.15; }
.log p { color:var(--muted); font-size:17px; margin-top:6px; max-width:58ch; }
.log .place { text-align:right; }
.log .place b { display:block; font:400 15px/1.3 var(--body); color:var(--ink); }

/* Passport */
.price { display:flex; align-items:baseline; gap:12px; margin-top:40px; }
.price b { font:400 clamp(56px,6vw,84px)/1 var(--display); font-variant-numeric:tabular-nums; color:var(--blue); }
.price span { font-size:18px; color:var(--muted); }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:28px; }
.actions .note { font-size:15px; color:var(--muted); }

.itin { list-style:none; margin:0; padding:0; }
.itin li { padding-block:30px; border-top:1px solid var(--line); }
.itin li:first-child { border-top:0; padding-top:0; }
.itin h3 { font-size:clamp(24px,2.4vw,32px); }
.itin p { color:var(--muted); font-size:17px; margin-top:10px; max-width:54ch; }
.stops { display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:14px; }

.mosaic { padding-bottom:16px; }
.mosaic .grid { row-gap:24px; align-items:start; }
.mosaic figure { margin:0; }
.mosaic img { width:100%; object-fit:cover; }
.mosaic .m1 { grid-column:1 / span 4; }
.mosaic .m1 img { aspect-ratio:2/3; }
.mosaic .m2 { grid-column:5 / span 8; }
.mosaic .m2 img { aspect-ratio:3/2; }
.mosaic .m3 { grid-column:5 / span 5; margin-top:-8%; }
.mosaic .m3 img { aspect-ratio:3/2; }

.invite .grid { align-items:center; row-gap:40px; }
.invite figure { grid-column:1 / span 6; margin:0; }
.invite figure img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.invite .copy { grid-column:8 / span 5; }
.invite h2 { font-size:clamp(36px,4.4vw,60px); }
.invite p { margin-top:18px; max-width:40ch; opacity:.92; }

footer { border-top:1px solid var(--line); }
footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-block:32px 48px; font-size:15px; color:var(--muted); }

/* Gentle load */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo img, .hero-text h1 { animation:rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero-photo img { animation-delay:.12s; }
  @keyframes rise { from { transform:translateY(14px); } to { transform:none; } }
}
@media (prefers-reduced-motion: reduce) { .btn { transition:none; } }

/* Tablet */
@media (max-width:980px) {
  .hero-text { grid-column:1 / -1; }
  .hero-photo { grid-column:1 / span 8; }
  .sec-head, .sec-body { grid-column:1 / -1; }
  .sec-body { margin-top:40px; }
  .next { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); }
  .next .cta-wrap { grid-column:1 / -1; }
  .log li { grid-template-columns:110px minmax(0,1fr); }
  .log .place { grid-column:2; text-align:left; }
  .spread .a { grid-column:1 / span 8; }
  .spread .b { grid-column:7 / span 6; margin-top:-60px; }
  .invite figure, .invite .copy { grid-column:1 / -1; }
}
/* Phone */
@media (max-width:640px) {
  body { font-size:17px; }
  .grid { column-gap:12px; }
  .top .wrap { padding-block:20px; }
  .nav { gap:20px; }
  .hero { padding-bottom:64px; }
  .hero-photo { grid-column:1 / -1; }
  .stats { grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 16px; margin-top:48px; }
  .sec { padding-block:72px; }
  .next { grid-template-columns:minmax(0,1fr); gap:20px; }
  .band .wrap { padding-block:48px; }
  .log li { grid-template-columns:minmax(0,1fr); gap:4px; }
  .log .place { grid-column:1; }
  .spread .a, .spread .b { grid-column:1 / -1; margin-top:0; }
  .mosaic .m1 { grid-column:1 / span 5; }
  .mosaic .m2 { grid-column:6 / span 7; }
  .mosaic .m3 { grid-column:1 / -1; margin-top:0; }
  .concept .wrap { font-size:11px; }
}