:root{--coral:#AF79E2;--line:rgba(255,255,255,.4);--line-soft:rgba(255,255,255,.25)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--coral);color:#fff;font-family:"logic-monospace",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{opacity:.65}
img{display:block;max-width:100%}
h1,h2,p,ul{margin:0;}
ul{list-style:none;padding:0}

.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}

/* sidebar */
.side{border-right:1px solid var(--line);padding:36px 26px 32px;display:flex;flex-direction:column;gap:44px}
.side .mark{width:118px}
.nav{display:flex;flex-direction:column;gap:11px;font-size:13px;font-weight:500;letter-spacing:.02em}
.nav a{display:flex;justify-content:space-between}
.nav span{opacity:.55}
.nav a[aria-current]{opacity:1}
.nav a[aria-current] em{font-style:normal;border-bottom:1px solid rgba(255,255,255,.85);padding-bottom:2px}

/* interior pages */
.page-head{grid-column:1/13;font-size:11px;letter-spacing:.14em;padding-bottom:34px;display:flex;justify-content:space-between;align-items:baseline}
h2.title{grid-column:1/11;font-family: "blaacck", sans-serif; font-weight:900; font-size:90px;line-height:.96;letter-spacing:-.02em;text-wrap:pretty}
h2.title em{font-family: "blaacck", sans-serif; font-weight:900; font-size:90px;}
.prose{grid-column:1/6;margin-top:44px;display:flex;flex-direction:column;gap:20px;font-size:13px;line-height:1.8}
.prose p{margin:0}
.aside-notes{grid-column:8/13;margin-top:48px;display:flex;flex-direction:column;gap:26px;font-size:11.5px;line-height:1.7;letter-spacing:.02em}
.aside-notes dt{opacity:.6;letter-spacing:.14em;font-size:10.5px;margin-bottom:6px}
.aside-notes dd{margin:0}
.rule{grid-column:1/13;border-top:1px solid var(--line);margin-top:64px}
.group{grid-column:1/13;margin-top:26px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.group h3{grid-column:1/4;margin:0;font-size:11px;font-weight:400;letter-spacing:.14em}
.group .rows{grid-column:4/13}
.group .rows li{display:grid;grid-template-columns:1fr 240px 96px;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:12px}
.form{grid-column:1/7;margin-top:44px;display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:10.5px;letter-spacing:.14em;opacity:.7}
.field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.55);color:#fff;font:300 14px/1.5 "logic-monospace",monospace;padding:8px 0;border-radius:0}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select,.field textarea:focus{outline:0;border-bottom-color:#fff}
.field select option{color:#1a1a1a}
button.pill{background:transparent;color:#fff;font:500 11px/1 "logic-monospace",monospace;cursor:pointer;align-self:flex-start;margin-top:8px;padding:13px 24px}
button.pill:hover{background:#fff;color:var(--coral)}
@media(max-width:1080px){
  h2.title{grid-column:1/13;font-size:48px}
  h2.title em{font-size:44px}
  .prose,.aside-notes,.form{grid-column:1/13}
  .group h3{grid-column:1/13;margin-bottom:10px}
  .group .rows{grid-column:1/13}
  .group .rows li{grid-template-columns:1fr 96px;row-gap:4px}
  .group .rows .d{grid-column:1/3}
}
@media(max-width:760px){h2.title{font-size:36px}h2.title em{font-size:34px}}
.side-meta{margin-top:auto;display:flex;flex-direction:column;gap:22px;font-size:11.5px;line-height:1.7;letter-spacing:.03em}
.side-meta dt{opacity:.6;margin-bottom:4px}
.side-meta dd{margin:0}

/* main grid */
.main{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:min-content;column-gap:24px;padding:36px 40px 48px}
.topbar{grid-column:1/13;display:flex;justify-content:space-between;align-items:baseline;font-size:11px;letter-spacing:.14em;padding-bottom:34px}
.pill{border:1px solid rgba(255,255,255,.7);border-radius:100px;padding:8px 18px;letter-spacing:.1em}
h1{grid-column:1/11;font-family: "blaacck", sans-serif; font-weight:900; font-size:90px;line-height:.94;letter-spacing:.01em;text-wrap:pretty}
h1 em{font-family: "blaacck", sans-serif; font-weight:900; font-size:90px}
.lede{grid-column:1/5;margin-top:40px;font-size:18px;line-height:1.75;letter-spacing:.01em}
.hero{grid-column:6/13;margin-top:40px;aspect-ratio:16/9;background:repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 6px,transparent 6px 13px);border:1px solid rgba(255,255,255,.45);display:flex;align-items:flex-end;padding:16px}
.hero span{font-size:10.5px;letter-spacing:.1em;opacity:.85}
.hero img{width:100%;height:100%;object-fit:cover}

.sec-head{grid-column:1/13;margin-top:64px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;border-top:1px solid var(--line);padding-top:18px;font-size:11px;letter-spacing:.14em}
.sec-head b{grid-column:1/5;font-weight:400}
.sec-head i{grid-column:9/13;text-align:right;font-style:normal;opacity:.7}

.list{grid-column:1/13;margin-top:6px}
.list li{display:grid;grid-template-columns:34px 1fr 240px 96px;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid var(--line-soft);font-size:12px}
.list .n{opacity:.55}
.list .t{font-size:22px;font-weight:500;letter-spacing:-.01em}
.list .d{opacity:.75;font-size:11.5px}
.list .p{text-align:right}

.foot{grid-column:1/13;margin-top:56px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;opacity:.75}

@media(max-width:1080px){
  h1{font-size:56px;grid-column:1/13}
  h1 em{font-size:52px}
  .lede{grid-column:1/7}
  .hero{grid-column:1/13}
  .list li{grid-template-columns:28px 1fr 96px;row-gap:4px}
  .list .d{grid-column:2/4}
}
@media(max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{border-right:0;border-bottom:1px solid var(--line);gap:28px}
  .side-meta{flex-direction:row;flex-wrap:wrap;gap:24px}
  .main{padding:28px 22px 40px}
  h1{font-size:40px}h1 em{font-size:38px}
  .topbar{flex-direction:column;gap:16px;align-items:flex-start}
  .foot{flex-direction:column;gap:8px}
}