:root{
  --bg:#f2f3f1; --ink:#1b2224; --ink-2:#4a5558; --fog:#c9d1d0; --fog-l:#e1e6e5; --sea:#3f5e66; --sea-d:#2f474e; --moss:#6b7a4f;
  --max:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.7 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--sea-d)}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:500;line-height:1.04;letter-spacing:-.015em}
:focus-visible{outline:2px solid var(--sea);outline-offset:4px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--ink);padding:8px 14px;z-index:20}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.label{font:600 11.5px/1.3 "IBM Plex Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--sea)}

header.site{position:relative;z-index:3}
header.site .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:8px 26px;padding-top:20px;padding-bottom:20px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;margin-right:auto;font:500 24px/1 "Playfair Display",serif;letter-spacing:-.01em}
nav.main{display:flex;flex-wrap:wrap;gap:2px 18px;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
nav.main a{color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
nav.main a:hover,nav.main a[aria-current]{border-color:var(--ink)}
nav.main a.in{color:var(--sea-d);font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;font:600 14px/1.2 "IBM Plex Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer}
.btn-sea{background:var(--sea);color:#fff}
.btn-sea:hover{background:var(--sea-d)}
.btn-line{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-line:hover{background:var(--fog-l)}
.ctas{display:flex;gap:12px;flex-wrap:wrap}

/* home hero: big photo, headline set off its edge */
.cover{display:grid;gap:0}
.cover figure{margin:0}
.cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cover .words{padding:26px 0 0}
.cover h1{font-size:clamp(44px,7.6vw,112px);margin:0 0 18px;max-width:11ch}
.cover h1 em{font-style:italic;color:var(--sea)}
.cover .lede{max-width:40ch;font-size:18px;color:var(--ink-2);margin:0 0 24px}
.cover .facts{display:flex;flex-wrap:wrap;gap:6px 26px;margin:22px 0 0;padding:0;list-style:none;font-size:14.5px;color:var(--ink-2)}
.cover .facts b{color:var(--ink);font-weight:600}
@media(min-width:960px){
  .cover{grid-template-columns:repeat(12,1fr);align-items:center}
  .cover figure{grid-column:5/13;grid-row:1}
  .cover img{aspect-ratio:4/3.3}
  .cover .words{grid-column:1/7;grid-row:1;position:relative;z-index:2;background:var(--bg);padding:36px 44px 36px 0}
  .cover h1{font-size:clamp(56px,5.6vw,84px)}
}

section{padding:80px 0}
h2{font-size:clamp(34px,4.6vw,60px);margin:0 0 14px}
.intro{max-width:52ch;color:var(--ink-2);margin:0 0 36px}

.sessions{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));border-top:1px solid var(--ink)}
.session{padding:28px 28px 30px 0;border-bottom:1px solid var(--fog)}
@media(min-width:960px){.session+.session{padding-left:28px;border-left:1px solid var(--fog)}}
.session h3{font-size:34px;margin:10px 0 8px}
.session .price{font:500 22px/1 "Playfair Display",serif;color:var(--sea-d);margin:0 0 12px}
.session .price small{font:500 12px "IBM Plex Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-right:6px}
.session p{margin:0;color:var(--ink-2)}
.session ul{margin:14px 0 0;padding:0;list-style:none;font-size:15px}
.session li{padding:6px 0;border-top:1px solid var(--fog-l)}

/* editorial asymmetric grid */
.ed{display:grid;gap:18px}
.ed figure{margin:0}
.ed img{width:100%;object-fit:cover}
.ed figcaption{font-size:13.5px;color:var(--ink-2);padding-top:10px;max-width:36ch}
.ed figcaption b{display:block;font:500 italic 22px/1.2 "Playfair Display",serif;color:var(--ink);margin-bottom:4px}
.ed .a img{aspect-ratio:4/5}
.ed .b img{aspect-ratio:3/2}
.ed .c img{aspect-ratio:1/1}
@media(min-width:960px){
  .ed{grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
  .ed .a{grid-column:1/7;grid-row:1/3}
  .ed .b{grid-column:8/13;margin-top:90px}
  .ed .c{grid-column:9/13}
  .ed .c figcaption{margin-left:0}
}

.how{background:var(--ink);color:#dfe5e4}
.how h2{color:#fff}
.how .intro{color:#aebcbc}
.how .label{color:var(--fog)}
.how-grid{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:center}
.how ol{list-style:none;padding:0;margin:0;counter-reset:s}
.how li{counter-increment:s;display:grid;grid-template-columns:54px 1fr;padding:16px 0;border-top:1px solid #36403f}
.how li::before{content:counter(s);font:italic 500 30px/1 "Playfair Display",serif;color:var(--fog)}
.how li strong{color:#fff;display:block;font-weight:600}
.how figure{margin:0}
.how img{width:100%;aspect-ratio:4/5;object-fit:cover}
.how a:not(.btn){color:#fff}

.quote blockquote{max-width:26ch}
.quote blockquote{margin:0;font:italic 400 clamp(26px,3.4vw,40px)/1.25 "Playfair Display",serif}
.quote footer{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:18px}

.inquire{border-top:1px solid var(--ink)}
.inquire .row{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:end}

/* sessions page */
.page-head{padding-top:30px;padding-bottom:30px}
.page-head h1{font-size:clamp(48px,8vw,120px);margin:0 0 16px}
.page-head .intro{font-size:18px}
.detail{display:grid;gap:28px;padding:56px 0;border-top:1px solid var(--ink)}
.detail figure{margin:0}
.detail img{width:100%;aspect-ratio:4/3;object-fit:cover}
.detail h2{font-size:clamp(36px,4.4vw,56px)}
.detail dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:22px 0;padding:0}
.detail dt{font:600 11.5px/1.9 "IBM Plex Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--sea)}
.detail dd{margin:0}
@media(min-width:960px){
  .detail{grid-template-columns:repeat(12,1fr);align-items:start}
  .detail figure{grid-column:1/7}
  .detail .txt{grid-column:8/13}
  .detail.flip figure{grid-column:7/13;grid-row:1}
  .detail.flip .txt{grid-column:1/6;grid-row:1}
}
.extras{list-style:none;padding:0;margin:0;columns:2 280px;column-gap:40px}
.extras li{break-inside:avoid;display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--fog)}

/* stories */
.story{padding:60px 0;border-top:1px solid var(--ink)}
.story .kicker{display:flex;flex-wrap:wrap;gap:6px 20px;margin-bottom:14px}
.story h2{font-size:clamp(40px,6vw,84px);max-width:14ch;margin:0 0 26px}
.story .lead{font:400 21px/1.55 "Playfair Display",serif;max-width:36ch;margin:0 0 34px}
.story .lead::first-letter{float:left;font-size:72px;line-height:.86;padding:6px 10px 0 0;color:var(--sea)}
.story .body{columns:2 300px;column-gap:40px;color:var(--ink-2);max-width:900px;margin-top:34px}
.story .body p{margin:0 0 14px}
.full{margin:0}
.full img{width:100%;aspect-ratio:21/9;object-fit:cover}
.full figcaption,.pair figcaption{font-size:13.5px;color:var(--ink-2);padding-top:10px}
.pair{display:grid;gap:18px;margin-top:24px}
.pair figure{margin:0}
.pair img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media(min-width:960px){.pair{grid-template-columns:5fr 7fr;align-items:end}.pair .wide img{aspect-ratio:3/2}}

footer.site{padding:46px 0;border-top:1px solid var(--ink);font-size:14.5px}
footer.site h3{font-size:26px;margin:0 0 8px}
footer.site p{margin:0 0 4px;color:var(--ink-2)}
.cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.concept{margin-top:28px;padding-top:16px;border-top:1px solid var(--fog);font-size:13.5px;color:var(--ink-2)}
.concept strong{color:var(--ink)}
