:root{
  --header-height:3.5rem; --hue-color:190;
  --first-color:hsl(var(--hue-color),64%,22%);
  --first-color-alt:hsl(var(--hue-color),64%,15%);
  --first-color-light:hsl(var(--hue-color),50%,92%);
  --title-color:hsl(var(--hue-color),64%,18%);
  --text-color:hsl(var(--hue-color),24%,30%);
  --text-color-light:hsl(var(--hue-color),8%,50%);
  --body-color:hsl(var(--hue-color),100%,99%);
  --white-color:#FFF;
  --body-font:'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --title-font:'Raleway', 'Open Sans', system-ui, sans-serif;
  --gutter:6vw;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; font-size:16px; }
@media (min-width:1440px){ html{ font-size:calc(9px + .48vw); } }
@media (min-width:2200px){ html{ font-size:20px; } }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ font-family:var(--body-font); background:var(--body-color); color:var(--text-color); line-height:1.7; }
h1,h2,h3{ font-family:var(--title-font); color:var(--title-color); font-weight:600; line-height:1.2; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--first-color); }
:focus-visible{ outline:3px solid hsl(190,70%,45%); outline-offset:2px; }

/* nav */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; height:calc(var(--header-height) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) var(--gutter) 0; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--body-color); box-shadow:0 1px 8px hsla(190,64%,15%,.15); }
.nav__logo{ font-family:var(--title-font); font-weight:700; font-size:1.05rem; color:var(--title-color); text-decoration:none; white-space:nowrap; }
.nav__links{ display:flex; gap:1.4rem; list-style:none; }
.nav__links a{ color:var(--title-color); font-size:.85rem; font-weight:600; text-decoration:none; }
.nav__links a:hover{ text-decoration:underline; }

/* hero */
.s-hero{ position:relative; min-height:62vh; display:flex; align-items:flex-end; padding:calc(var(--header-height) + 3rem) var(--gutter) 3rem; overflow:hidden; background:var(--first-color-alt); }
.s-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:sepia(.2) saturate(.85); }
.s-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, hsla(190,64%,10%,.25) 0%, hsla(190,64%,10%,.55) 50%, hsla(190,64%,8%,.92) 100%); }
.s-hero__text{ position:relative; z-index:1; max-width:min(52rem, 100%); color:#fff; }
.s-hero__kicker{ font-size:.9rem; color:hsl(190,40%,85%); margin-bottom:.8rem; }
.s-hero__kicker a{ color:inherit; }
.s-hero h1{ color:#fff; font-size:clamp(2rem, 4.6vw, 3.8rem); margin-bottom:1rem; max-width:20ch; }
.s-hero__deck{ font-size:clamp(1rem, 1.4vw, 1.25rem); color:hsl(190,30%,92%); max-width:52ch; line-height:1.55; }
.s-hero__credit{ position:absolute; right:var(--gutter); bottom:.8rem; z-index:1; font-size:.72rem; color:hsla(0,0%,100%,.7); font-style:italic; max-width:40ch; text-align:right; }

/* layout */
.s-layout{ display:grid; grid-template-columns:minmax(0, 44rem) minmax(15rem, 21rem); gap:4rem; padding:3.5rem var(--gutter) 4rem; justify-content:center; }
.s-article > * + *{ margin-top:1.15rem; }
.s-article h2{ font-size:clamp(1.35rem, 2vw, 1.7rem); margin-top:2.6rem; }
.s-article p{ font-size:1.04rem; }
.s-article .lede{ font-size:1.15rem; color:var(--title-color); }
.s-article blockquote{ margin:2rem 0; padding:.2rem 0 .2rem 1.4rem; border-left:3px solid var(--first-color); }
.s-article blockquote p{ font-family:var(--title-font); font-size:clamp(1.15rem, 1.7vw, 1.4rem); font-weight:600; color:var(--title-color); line-height:1.45; }
.s-article blockquote cite{ display:block; margin-top:.5rem; font-style:normal; font-size:.82rem; color:var(--text-color-light); }
.s-article figure{ margin:2rem 0; }
.s-article figure img{ width:100%; background:var(--first-color-light); }
.s-article figcaption{ font-size:.84rem; color:var(--text-color); margin-top:.55rem; line-height:1.45; }
.s-article figcaption span{ display:block; font-style:italic; color:var(--text-color-light); font-size:.76rem; margin-top:.15rem; }
.s-article .pair{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.s-article .pair img{ aspect-ratio:4/3; object-fit:cover; }
.s-article .inline-flag{ font-size:.85rem; background:var(--first-color-light); padding:.75rem 1rem; border-radius:4px; }
.s-article .people{ list-style:none; }
.s-article .people li{ padding:1.2rem 0; border-top:1px solid var(--first-color-light); }
.s-article .people li:last-child{ border-bottom:1px solid var(--first-color-light); }
.s-article .people h3{ font-size:1.15rem; margin-bottom:.35rem; }
.s-article .people .where{ font-size:.82rem; color:var(--text-color-light); margin-bottom:.4rem; }

/* aside */
.s-aside{ align-self:start; display:flex; flex-direction:column; gap:1.6rem; font-size:.9rem; }
.s-box{ background:var(--white-color); border:1px solid var(--first-color-light); padding:1.2rem 1.3rem; }
.s-box h2{ font-size:1rem; margin-bottom:.75rem; }
.places{ list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.places a{ display:flex; gap:.7rem; align-items:center; text-decoration:none; color:var(--title-color); font-weight:600; line-height:1.3; }
.places a:hover span{ text-decoration:underline; }
.places img{ width:3.2rem; height:2.4rem; object-fit:cover; flex:none; background:var(--first-color-light); }
.places small{ display:block; font-weight:400; color:var(--text-color-light); font-size:.78rem; }
.notes{ padding-left:1.1rem; display:flex; flex-direction:column; gap:.55rem; line-height:1.5; }
.s-method{ font-size:.82rem; line-height:1.55; color:var(--text-color); }

/* pager */
.s-pager{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:0 var(--gutter) 4rem; max-width:calc(65rem + 12vw); margin:0 auto; }
.s-pager a{ display:block; padding:1.1rem 1.3rem; background:var(--white-color); border:1px solid var(--first-color-light); text-decoration:none; }
.s-pager a:hover{ border-color:var(--first-color); }
.s-pager small{ display:block; font-size:.78rem; color:var(--text-color-light); }
.s-pager strong{ font-family:var(--title-font); color:var(--title-color); font-size:1.05rem; }
.s-pager .next{ text-align:right; grid-column:2; }

footer{ background:var(--first-color-alt); color:hsl(190,30%,88%); padding:2.5rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom,0px)); font-size:.86rem; line-height:1.6; }
footer a{ color:#fff; }

.to-top{ position:fixed; z-index:120; right:max(1.1rem, env(safe-area-inset-right,0px)); bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; gap:.4rem; padding:.7rem 1rem; border:none; border-radius:999px;
  background:var(--first-color); color:#fff; font-family:var(--body-font); font-weight:600; font-size:.82rem;
  box-shadow:0 6px 18px hsla(190,64%,12%,.35); cursor:pointer; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s, transform .25s; }
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top i{ font-size:1.1rem; }

@media (max-width:980px){
  .s-layout{ grid-template-columns:minmax(0,1fr); gap:2.5rem; }
  .s-aside{ position:static; }
}
@media (max-width:760px){
  :root{ --gutter:5vw; }
  .nav__links{ gap:1rem; }
  .nav__links .hide-sm{ display:none; }
  .nav__logo{ font-size:.95rem; }
  .s-hero{ min-height:56vh; padding-bottom:2.4rem; }
  .s-hero__credit{ display:none; }
  .s-layout{ padding-top:2.2rem; }
  .s-article .pair{ grid-template-columns:1fr; }
  .s-pager{ grid-template-columns:1fr; }
  .s-pager .next{ grid-column:auto; }
  .to-top span{ display:none; } .to-top{ padding:.8rem; }
}

  .nav__links a{ white-space:nowrap; } .nav__links .sm{ display:none; }
  @media (max-width:760px){ .nav__links .lg{ display:none; } .nav__links .sm{ display:inline; } }
  @media (max-width:480px){ .nav{ gap:.6rem; } .nav__links{ gap:.8rem !important; } .nav__links a{ font-size:.8rem !important; } .nav__logo{ font-size:.85rem !important; white-space:normal !important; line-height:1.1; max-width:6.5rem; } }