@font-face{font-family:'IS';src:url('assets/InstrumentSerif-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IS';src:url('assets/InstrumentSerif-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}

:root{
  --paper:#F6F0E8; --ink:#211A1B; --burg:#651C2B; --rose:#C9A3A0; --soft:#6B5F5C;
  --line:rgba(33,26,27,.13);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-size:16px;line-height:1.8;letter-spacing:.005em;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.display,.marks{font-family:'IS',Georgia,serif;font-weight:400;letter-spacing:-.005em}
em,i{font-style:italic}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- header ---------- */
.hdr{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;
  align-items:center;padding:40px 7vw}
.hdr.on-paper .mark-paper{display:none}
.hdr.on-burg .mark-ink{display:none}
.mark{width:148px;height:auto}
nav{display:flex;align-items:center}
nav a{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;padding-bottom:4px}
nav a+a{margin-left:30px}
.hdr.on-burg nav a{color:rgba(246,240,232,.78)}
.hdr.on-paper nav a{color:var(--soft)}
nav a.here{border-bottom:1px solid currentColor}
.menu-btn{display:none}

/* ---------- hero ---------- */
.hero{min-height:760px;background:var(--burg);color:var(--paper);display:flex;align-items:flex-end;
  padding:170px 7vw 110px}
.hero.paper{background:var(--paper);color:var(--ink)}
.hero h1{font-size:112px;line-height:.99;max-width:12em}
.hero.small h1{font-size:82px}
.hero h1 em{color:var(--rose)}
.hero.paper h1 em{color:var(--burg)}
.hero .kicker{font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(246,240,232,.6);margin-bottom:34px}
.hero.paper .kicker{color:var(--soft)}
.hero .sub{margin-top:30px;font-size:19px;line-height:1.9;color:rgba(246,240,232,.82);max-width:30em}
.hero.paper .sub{color:var(--soft)}

/* ---------- links & buttons ---------- */
.go{display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding-bottom:6px;
  border-bottom:1px solid var(--rose);margin-top:52px}
.go.tight{margin-top:32px}
.on-dark .go,.hero .go,.field .go,.bleed .go{color:var(--paper);border-bottom-color:rgba(246,240,232,.5)}
.go.ink{color:var(--ink);border-bottom-color:var(--burg)}
.go+.go{margin-left:40px}

/* ---------- sections ---------- */
section{padding:170px 7vw}
section.tight{padding:110px 7vw}
.lede{font-size:17px;color:var(--soft);max-width:44em}
.display{font-size:56px;line-height:1.1;max-width:16em}
.display em{color:var(--burg)}
.eye{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--burg);margin-bottom:26px}
.body{max-width:36em;color:var(--soft);margin-top:26px;font-size:16.5px}
.rule{border-top:1px solid var(--line)}

/* portrait split */
.split{display:flex;align-items:center;padding:170px 7vw}
.split .ph{flex:0 0 44%;max-width:520px}
.split .tx{flex:1;padding-left:8vw}
.split.rev .tx{padding-left:0;padding-right:8vw}
.split .tx h2{font-size:38px;line-height:1.22;max-width:14em}
.split .tx h2 em{color:var(--burg)}

/* full-bleed image */
.bleed{position:relative;height:720px;overflow:hidden;padding:0;margin:0;width:100%}
.bleed.tall{height:860px}
.bleed img{width:100%;height:100%;object-fit:cover}
.bleed .scrim{position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(0deg,rgba(20,12,14,.86) 0%,rgba(20,12,14,.34) 48%,rgba(20,12,14,.05) 80%)}
.bleed .cap{position:absolute;left:7vw;right:7vw;bottom:92px;color:var(--paper)}
.bleed h2{font-size:58px;line-height:1.1;max-width:13em;color:var(--paper)}
.bleed h2 em{color:var(--rose)}
.bleed .attrib{margin-top:26px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--rose)}

/* burgundy field */
.field{background:var(--burg);color:var(--paper)}
.field h2{font-size:58px;line-height:1.1;max-width:13em}
.field h2 em{color:var(--rose)}
.field .body{color:rgba(246,240,232,.86)}
.field .eye{color:var(--rose)}
.field .meta{margin-top:30px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,240,232,.5)}

/* stacked scan-path blocks */
.stack .item{padding:96px 0;border-top:1px solid var(--line)}
.stack .item:first-child{border-top:0;padding-top:0}
.stack h2{font-size:44px;line-height:1.16;max-width:17em}
.stack h2 em{color:var(--burg)}
.stack p{max-width:36em;color:var(--soft);margin-top:22px;font-size:16.5px}
.stack p.stackline{font-family:'IS',Georgia,serif;font-size:26px;line-height:1.5;color:var(--ink);margin-top:26px}
.pending{color:var(--burg);font-weight:600}

/* record */
.rec{font-family:'IS',Georgia,serif;font-size:40px;line-height:1.45;max-width:15em}

/* credentials */
.marks{font-size:17px;letter-spacing:.2em;margin-bottom:32px}
.cred p{max-width:44em;color:var(--soft);margin-bottom:14px;font-size:16.5px}

/* lists (media, writing) */
.list .row{display:flex;padding:30px 0;border-top:1px solid var(--line);align-items:baseline}
.list .row:last-child{border-bottom:1px solid var(--line)}
.list .when{flex:0 0 150px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.list .what{flex:1}
.list .what .t{font-family:'IS',Georgia,serif;font-size:27px;line-height:1.25}
.list .what .d{color:var(--soft);margin-top:6px;max-width:40em;font-size:16px}
.list .what .lk{margin-top:10px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--burg)}
.list .what .lk a{border-bottom:1px solid var(--rose);padding-bottom:3px;margin-right:22px}

/* talks */
.talk{padding:80px 0;border-top:1px solid var(--line)}
.talk h3{font-size:40px;line-height:1.15;max-width:15em}
.talk .sub{font-family:'IS',Georgia,serif;font-size:22px;color:var(--burg);margin-top:12px;max-width:24em}
.talk p{max-width:38em;color:var(--soft);margin-top:22px;font-size:16.5px}
.talk .for{margin-top:22px;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--soft)}

/* facts table */
table{width:100%;border-collapse:collapse;margin-top:26px;font-size:16px}
td{padding:13px 20px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
td:first-child{width:36%;color:var(--soft)}
td strong{font-weight:600}
.strings dt{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--burg);margin-top:26px}
.strings dd{margin-top:6px;max-width:44em}
.warn{color:var(--burg)}

/* bio blocks */
.bio{border-top:1px solid var(--line);padding:38px 0}
.bio .n{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--burg);margin-bottom:16px}
.bio p{max-width:42em;margin-bottom:14px}

/* quote */
.quote{font-family:'IS',Georgia,serif;font-size:30px;line-height:1.4;max-width:22em}
.quotes{margin-top:44px;max-width:1150px;font-size:0}
.quotes blockquote{display:inline-block;vertical-align:top;width:47%;margin:0 0 60px 0;
  border-left:2px solid var(--rose);padding-left:34px;font-size:16px}
.quotes blockquote:nth-child(even){margin-left:5%}
.quotes blockquote p{font-family:'IS',Georgia,serif;font-size:23px;line-height:1.45;color:var(--ink);max-width:none}
.quotes cite{display:block;margin-top:22px;font-style:normal;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--burg)}
.quotes cite span{display:block;margin-top:5px;letter-spacing:.12em;color:var(--soft)}
.quote .who{font-family:inherit;display:block;margin-top:22px;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft)}

/* form */
form{max-width:640px;margin-top:44px}
label{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);
  margin:26px 0 8px}
input,select,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:14px 0;font-family:inherit;font-size:17px;color:var(--ink);border-radius:0}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--burg)}
button{margin-top:44px;background:none;color:var(--ink);border:0;border-bottom:1px solid var(--burg);
  padding:0 0 6px;font-family:inherit;font-size:12px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.hero button,.field button{color:var(--paper);border-bottom-color:var(--rose)}

/* close + footer */
.close{background:var(--burg);color:var(--paper);text-align:center;padding:190px 7vw}
.close h2{font-size:74px;line-height:1.05;margin-bottom:22px}
.close p{color:rgba(246,240,232,.72);margin-bottom:52px}
.ftr{padding:70px 7vw;text-align:center;border-top:1px solid var(--line)}
.ftr .mark{width:140px;margin:0 auto 30px}
.ftr nav{justify-content:center;flex-wrap:wrap}
.ftr nav a{color:var(--soft);margin:0 16px 10px;font-size:11.5px}
.ftr .fine{margin-top:26px;font-size:13px;color:var(--soft)}
.ftr .credit{margin-top:30px}
.ftr .credit a{border-bottom:1px solid rgba(107,95,92,.35);padding-bottom:2px}


/* ---------- canonical sentence, set as a statement ---------- */
.canon{font-family:'IS',Georgia,serif;font-weight:400;font-size:40px;line-height:1.2;
  letter-spacing:-.005em;max-width:22em;color:var(--ink)}
.canon em{color:var(--burg)}

/* ---------- video ---------- */
.vid{margin-top:56px;width:100%;max-width:none}
.vidwrap{position:relative;width:100%;padding-top:56.25%;overflow:hidden;cursor:pointer;background:var(--ink)}
.vidwrap img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.vidwrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.vidwrap .play{position:absolute;top:50%;left:70%;width:86px;height:86px;margin:-43px 0 0 -43px;
  border:1px solid rgba(246,240,232,.85);border-radius:50%;background:rgba(33,26,27,.28)}
.vidwrap .play:after{content:'';position:absolute;top:50%;left:52%;margin:-13px 0 0 -8px;
  border-left:21px solid rgba(246,240,232,.95);border-top:13px solid transparent;border-bottom:13px solid transparent}
.field .vid{max-width:none}

/* ---------- speaking: talks beside a vertical image ---------- */
.talks-wrap{display:flex;align-items:flex-start;padding:170px 7vw}
.talks-col{flex:1;min-width:0}
.talks-img{flex:0 0 38%;max-width:500px;margin-left:5vw;position:sticky;top:60px}
.talks-img img{width:100%;display:block}

/* header collapses earlier than the rest: nine items need room */
@media (max-width:1180px){
  nav{display:none}
  nav.open{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;
    background:var(--burg);align-items:center;justify-content:center;z-index:30}
  nav.open a{color:var(--paper);font-size:13px;letter-spacing:.24em;margin:14px 0}
  nav.open a+a{margin-left:0}
  .menu-btn{display:block;background:none;border:0;padding:0;margin:0;
    font-size:10px;letter-spacing:.26em;text-transform:uppercase;cursor:pointer;position:relative;z-index:40}
  .hdr.on-burg .menu-btn{color:rgba(246,240,232,.8)}
  .hdr.on-paper .menu-btn{color:var(--soft)}
  .ftr nav{display:flex;position:static;background:none;flex-direction:row;flex-wrap:wrap}
  .ftr nav a{color:var(--soft);font-size:10px;margin:0 14px 10px}
}

/* ---------- mobile ---------- */
@media (max-width:900px){
  body{font-size:14px}
  .hdr{padding:22px 7vw}
  .mark{width:112px}
  nav{display:none}
  nav.open{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;
    background:var(--burg);align-items:center;justify-content:center;z-index:30}
  nav.open a{color:var(--paper);font-size:13px;letter-spacing:.24em;margin:14px 0}
  nav.open a+a{margin-left:0}
  .menu-btn{display:block;background:none;border:0;padding:0;margin:0;color:inherit;
    font-size:10px;letter-spacing:.26em;text-transform:uppercase;cursor:pointer;position:relative;z-index:40}
  .hdr.on-burg .menu-btn{color:rgba(246,240,232,.8)}
  .hdr.on-paper .menu-btn{color:var(--soft)}
  .hero{min-height:520px;padding:130px 7vw 70px}
  .hero h1,.hero.small h1{font-size:38px;line-height:1.08;max-width:none}
  section{padding:80px 7vw}
  section.tight{padding:60px 7vw}
  .split{display:block;padding:80px 7vw}
  .split.rev{display:flex;flex-direction:column-reverse}
  .split.rev .tx{padding-right:0;padding-top:0;padding-bottom:36px}
  .split .ph{max-width:none}
  .split .tx{padding-left:0;padding-top:40px}
  .split .tx h2{font-size:26px;max-width:none}
  .display{font-size:28px;max-width:none}
  .bleed{height:430px}
  .bleed.tall{height:520px}
  .bleed .cap{bottom:50px}
  .bleed h2{font-size:26px;max-width:none}
  .field h2{font-size:27px;max-width:none}
  .stack .item{padding:56px 0}
  .stack h2{font-size:26px;max-width:none}
  .rec{font-size:23px;max-width:none}
  .talk h3{font-size:26px;max-width:none}
  .talk .sub{font-size:17px}
  .list .row{display:block}
  .list .when{margin-bottom:8px}
  .list .what .t{font-size:20px}
  .marks{font-size:13px;letter-spacing:.14em;line-height:1.9}
  .quote{font-size:20px;max-width:none}
  .quotes{margin-top:32px}
  .quotes blockquote{width:100%;margin:0 0 40px 0;padding-left:22px}
  .quotes blockquote:nth-child(even){margin-left:0}
  .quotes blockquote p{font-size:18px}
  .close{padding:90px 7vw}
  .close h2{font-size:34px}
  td{display:block;border-bottom:0;padding:2px 0}
  td:first-child{width:auto;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding-top:16px}
  tr{display:block;border-bottom:1px solid var(--line);padding-bottom:12px}
  .go+.go{margin-left:0;display:block;margin-top:18px}

  .canon{font-size:24px;max-width:none}
  .vid{margin-top:36px}
  .vidwrap .play{width:62px;height:62px;margin:-31px 0 0 -31px;left:70%}
  .vidwrap .play:after{border-left-width:16px;border-top-width:10px;border-bottom-width:10px;margin:-10px 0 0 -6px}
  .talks-wrap{display:block;padding:80px 7vw}
  .talks-img{max-width:none;margin-left:0;margin-top:44px;position:static}

}