:root{
    --fog:#F2F5F4;
    --paper:#FFFFFF;
    --ink:#142238;
    --ink-soft:#4A5768;
    --wiki:#2B5DA8;
    --kelp:#2E6650;
    --tide:#CFDAD6;
    --display:"Fraunces", Georgia, serif;
    --text:"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --measure:66ch;
    --gutter:clamp(1.25rem, 4vw, 3rem);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
  body{margin:0; background:var(--fog); color:var(--ink); font-family:var(--text); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased}
  a{color:var(--wiki)}
  a:hover{color:var(--ink)}
  :focus-visible{outline:3px solid var(--wiki); outline-offset:3px; border-radius:2px}
  img{max-width:100%; height:auto; display:block}
  p{margin:0 0 1.1em}
  h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.1; margin:0; letter-spacing:-0.01em; font-variation-settings:"SOFT" 40, "WONK" 0}
  h2{font-size:clamp(2rem, 4vw, 2.9rem); font-variation-settings:"opsz" 96, "SOFT" 40}
  h3{font-size:1.5rem; font-variation-settings:"opsz" 48, "SOFT" 40}
  .wrap{max-width:1180px; margin:0 auto; padding:0 var(--gutter)}
  .skip{position:absolute; left:-999px; top:.5rem; z-index:20; background:var(--ink); color:var(--fog); padding:.5rem .9rem; border-radius:6px; text-decoration:none}
  .skip:focus{left:.75rem}

  /* citations: the one memorable device */
  .cite{font-family:var(--text); font-size:.6em; line-height:0; vertical-align:super; font-weight:500; letter-spacing:0}
  .cite a{color:var(--wiki); text-decoration:none; padding:.35em .25em; margin:0 -.1em; border-radius:3px}
  .cite a:hover{background:rgba(43,93,168,.12); color:var(--wiki)}
  @media (pointer:coarse){ .cite{font-size:.7em} .cite a{padding:.5em .4em} }

  /* nav */
  .nav{position:sticky; top:0; z-index:10; background:rgba(242,245,244,.92); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--tide)}
  .nav .wrap{display:flex; align-items:center; justify-content:space-between; min-height:3.75rem; gap:1rem; flex-wrap:wrap}
  .brand{font-family:var(--display); font-size:1.3rem; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:.6rem; font-variation-settings:"opsz" 30, "SOFT" 60}
  .brand i{width:.75rem; height:.75rem; border-radius:50%; background:var(--kelp); display:inline-block}
  .nav ul{list-style:none; margin:0; padding:0; display:flex; gap:clamp(.9rem, 2vw, 1.5rem); flex-wrap:wrap}
  .nav ul a{color:var(--ink-soft); text-decoration:none; font-size:.95rem; padding:.4rem 0; display:inline-block}
  .nav ul a:hover{color:var(--ink)}
  .menu{display:none; font:inherit; font-size:.95rem; background:none; border:1.5px solid var(--tide); border-radius:999px; padding:.4rem .9rem; color:var(--ink); cursor:pointer}
  @media (max-width:720px){
    .menu{display:inline-block}
    .nav ul{display:none; flex-basis:100%; flex-direction:column; gap:0; padding:.25rem 0 .75rem; border-top:1px solid var(--tide)}
    .nav.open ul{display:flex}
    .nav ul a{padding:.55rem 0; font-size:1.05rem}
  }

  /* hero */
  .hero{padding:clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem)}
  .hero .wrap{display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(240px, .85fr); gap:1.2rem clamp(2rem, 6vw, 5rem); align-items:start}
  .hero h1{font-size:clamp(3rem, 7vw, 5.6rem); font-variation-settings:"opsz" 144, "SOFT" 30, "WONK" 1; margin-bottom:.5rem}
  .hero .what{font-family:var(--display); font-style:italic; font-size:clamp(1.35rem, 2.4vw, 1.9rem); line-height:1.3; color:var(--kelp); margin:0 0 1.4rem; font-variation-settings:"opsz" 72, "SOFT" 60; max-width:26ch}
  .hero .lead{font-size:clamp(1.1rem, 1.5vw, 1.3rem); line-height:1.55; max-width:var(--measure)}
  .hero .where{color:var(--ink-soft); margin-top:1rem}
  .hero .where a{color:var(--ink)}
  .hatnote{font-style:italic; color:var(--ink-soft); font-size:.95rem; margin:0 0 1.6rem; padding-left:1rem; border-left:2px solid var(--tide); max-width:var(--measure)}
  .hatnote a{color:var(--wiki); text-decoration:none}
  .hatnote a:hover{text-decoration:underline}
  /* infobox: the Wikipedia device, in this site's clothes */
  .infobox{justify-self:end; width:min(100%, 340px); background:var(--paper); border:1px solid var(--tide); border-radius:6px; padding:1.25rem 1.25rem 1rem; font-size:.92rem; line-height:1.45}
  .infobox .ib-title{font-family:var(--display); font-size:1.35rem; text-align:center; margin:0 0 1rem; font-variation-settings:"opsz" 48, "SOFT" 40}
  .portrait{position:relative; width:170px; aspect-ratio:1; margin:.25rem auto 1.1rem}
  .portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; border-radius:50%; background:var(--tide)}
  .portrait::after{content:""; position:absolute; inset:-6px; border:1.5px solid var(--kelp); border-radius:50%; transform:translate(4px, 3px); pointer-events:none}
  .infobox .ib-cap{text-align:center; color:var(--ink-soft); font-size:.82rem; margin:0 0 1rem}
  .infobox dl{margin:0; display:grid; grid-template-columns:5.6rem 1fr; gap:.45rem .75rem; border-top:1px solid var(--tide); padding-top:.85rem}
  .infobox dt{font-weight:600; color:var(--ink)}
  .infobox dd{margin:0; color:var(--ink-soft)}
  .infobox dd a{color:var(--wiki); text-decoration:none}
  .infobox dd a:hover{text-decoration:underline}
  @media (max-width:820px){
    .hero .wrap{grid-template-columns:1fr}
    .infobox{justify-self:stretch; width:100%; max-width:420px; margin-top:1rem}
  }
  .hero .what .cite a{opacity:0; animation:attach .5s ease .7s forwards}
  .hero .wrap{align-items:start}
  .hero .hatnote{grid-column:1 / -1; margin-bottom:.4rem}
  @keyframes attach{to{opacity:1}}
  @media (prefers-reduced-motion:reduce){ .hero .what .cite a{opacity:1; animation:none} }

  /* doors */
  .doors{padding:clamp(1.75rem, 4vw, 2.75rem) 0 clamp(2.5rem, 6vw, 4rem); border-top:1px solid var(--tide)}
  .doors p{font-family:var(--display); font-size:1.2rem; margin-bottom:.6rem; font-variation-settings:"opsz" 30, "SOFT" 60}
  .doors ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem 2rem}
  @media (max-width:820px){ .doors ul{grid-template-columns:repeat(2, 1fr)} }
  @media (max-width:520px){ .doors ul{grid-template-columns:1fr} }
  .doors li{border-top:1px solid var(--tide); padding:.7rem 0}
  .doors a{text-decoration:none; color:var(--ink); display:block}
  .doors a b{font-weight:500; display:block}
  .doors a span{color:var(--ink-soft); font-size:.95rem}
  .doors a:hover b{color:var(--wiki)}

  /* sections */
  section.block{padding:clamp(3rem, 7vw, 5.5rem) 0; border-top:1px solid var(--tide)}
  section.block .wrap{display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:clamp(2rem, 5vw, 5rem); align-items:start}
  .main{max-width:var(--measure)}
  .main h2{margin-bottom:1rem}
  .main .lead{font-size:1.2rem; line-height:1.5; margin-bottom:1.6rem; font-family:var(--display); font-variation-settings:"opsz" 30, "SOFT" 60}
  .refs{position:sticky; top:4.75rem}
  .refs summary{font-family:var(--display); font-size:1.05rem; cursor:pointer; color:var(--ink-soft); list-style:none; padding-bottom:.5rem; border-bottom:1px solid var(--tide); margin-bottom:.75rem}
  .refs summary::-webkit-details-marker{display:none}
  .refs ol{margin:0; padding-left:2.2rem; font-size:.86rem; line-height:1.45; color:var(--ink-soft)}
  .refs li{margin-bottom:.45rem; padding:.15rem .35rem; margin-left:-.35rem; border-radius:3px; scroll-margin-top:5rem}
  .refs li::marker{color:var(--wiki); font-weight:500}
  .refs li:target{background:rgba(43,93,168,.12); color:var(--ink)}
  .refs a{color:var(--wiki); text-decoration:none; border-bottom:1px solid rgba(43,93,168,.35)}
  .refs a:hover{border-bottom-color:var(--wiki)}
  @media (max-width:900px){
    section.block .wrap{grid-template-columns:1fr}
    .refs{position:static; margin-top:1.5rem}
    .refs summary::after{content:" (tap to show)"; font-family:var(--text); font-size:.85rem}
    .refs[open] summary::after{content:" (tap to hide)"}
  }

  /* commitments */
  .commit{list-style:none; margin:0; padding:0}
  .commit li{padding:1.2rem 0; border-top:1px solid var(--tide); display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.6fr); gap:1.25rem}
  .commit li:first-child{border-top:0; padding-top:0}
  .commit b{font-family:var(--display); font-weight:400; font-size:1.35rem; line-height:1.2; font-variation-settings:"opsz" 48, "SOFT" 40}
  .commit span{color:var(--ink-soft)}
  @media (max-width:560px){ .commit li{grid-template-columns:1fr; gap:.3rem} }

  /* photo band */
  .band{padding:clamp(2rem, 5vw, 4rem) 0; border-top:1px solid var(--tide)}
  .band figure{margin:0 auto; max-width:820px}
  .band img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:4px; background:var(--tide)}
  .band figcaption{font-size:.85rem; color:var(--ink-soft); margin-top:.6rem; text-align:center}

  /* figures in prose */
  .numbers{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 2rem; margin:1.8rem 0 2.2rem; padding:1.5rem 0; border-top:1px solid var(--tide); border-bottom:1px solid var(--tide)}
  .numbers div{line-height:1.2}
  .numbers strong{display:block; font-family:var(--display); font-weight:300; font-size:2.4rem; letter-spacing:-.02em; color:var(--kelp); font-variation-settings:"opsz" 96}
  .numbers small{font-size:.9rem; color:var(--ink-soft)}

  /* timeline: a real sequence, so it gets marks */
  .timeline{list-style:none; margin:2.2rem 0 0; padding:0 0 0 1.4rem; border-left:1.5px solid var(--kelp); position:relative}
  .timeline li{position:relative; padding:0 0 1.1rem 1rem; display:grid; grid-template-columns:5.2rem 1fr; gap:.75rem; align-items:baseline}
  .timeline li::before{content:""; position:absolute; left:calc(-1.4rem - 1.5px - 4.5px); top:.55rem; width:9px; height:9px; border-radius:50%; background:var(--fog); border:1.5px solid var(--kelp)}
  .timeline li.now::before{background:var(--kelp)}
  .timeline time{font-family:var(--display); font-size:1.15rem; color:var(--kelp); font-variation-settings:"opsz" 30}
  .timeline span em{color:var(--ink-soft); font-style:normal}

  /* books */
  .book{display:grid; grid-template-columns:150px minmax(0, 1fr); gap:1.6rem; padding:2rem 0; border-top:1px solid var(--tide)}
  .book:first-of-type{border-top:0; padding-top:.5rem}
  .book img{border-radius:3px; box-shadow:0 12px 26px -16px rgba(20,34,56,.45)}
  .book h3{margin-bottom:.5rem}
  .book .start{display:inline-block; font-size:.85rem; color:var(--kelp); border:1px solid var(--kelp); border-radius:999px; padding:.1rem .6rem; margin-bottom:.6rem}
  .book blockquote{margin:0 0 1rem; padding-left:1rem; border-left:2px solid var(--kelp); font-family:var(--display); font-style:italic; font-variation-settings:"opsz" 24, "SOFT" 60; color:var(--ink-soft)}
  .book blockquote cite{display:block; font-style:normal; font-family:var(--text); font-size:.85rem; margin-top:.3rem}
  .buy{display:inline-block; padding:.55rem 1rem; border:1.5px solid var(--ink); border-radius:999px; color:var(--ink); text-decoration:none; font-weight:500; font-size:.95rem}
  .buy:hover{background:var(--ink); color:var(--fog)}
  @media (max-width:560px){ .book{grid-template-columns:1fr} .book img{width:130px} }

  /* practice and talks */
  .practice h3{margin:2rem 0 .6rem}
  .practice h3:first-of-type{margin-top:.4rem}
  .epigraph{font-family:var(--display); font-style:italic; font-size:1.3rem; line-height:1.35; margin:0 0 1.2rem; color:var(--kelp); font-variation-settings:"opsz" 48, "SOFT" 60}
  .ring{width:120px; height:120px; border-radius:50%; border:1.5px solid var(--kelp); position:relative; margin:.5rem 0 1.5rem}
  .ring::before{content:""; position:absolute; inset:14px; border-radius:50%; border:1.5px solid var(--tide)}
  .ring::after{content:""; position:absolute; inset:50px; border-radius:50%; background:var(--kelp)}
  .topics{list-style:none; margin:0 0 1.5rem; padding:0}
  .topics li{padding:.8rem 0; border-top:1px solid var(--tide)}
  .topics li:first-child{border-top:0}
  .topics b{font-family:var(--display); font-weight:400; font-size:1.25rem; display:block; font-variation-settings:"opsz" 48, "SOFT" 40}
  .topics span{color:var(--ink-soft)}
  .ways{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1rem}

  /* writing */
  .shelf{margin:0 0 2rem}
  .shelf h3{margin-bottom:.6rem}
  .shelf ul{list-style:none; margin:0; padding:0}
  .shelf li{padding:.5rem 0; border-top:1px solid var(--tide)}
  .shelf li:first-child{border-top:0}
  .shelf a{text-decoration:none; color:var(--ink); border-bottom:1px solid var(--tide)}
  .shelf a:hover{border-bottom-color:var(--ink)}
  .shelf i{color:var(--ink-soft); font-style:normal}
  .shelf i::before{content:", "}

  /* elsewhere (record page) */
  .else{display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem}
  @media (max-width:820px){ .else{grid-template-columns:repeat(2, 1fr)} }
  @media (max-width:420px){ .else{grid-template-columns:1fr} }
  .else h3{font-size:1.15rem; margin-bottom:.5rem}
  .else ul{list-style:none; margin:0; padding:0}
  .else li{padding:.25rem 0}
  .else a{text-decoration:none; color:var(--ink); border-bottom:1px solid var(--tide)}
  .else a:hover{border-bottom-color:var(--ink)}

  /* contact */
  .contact{background:var(--ink); color:var(--fog); padding:clamp(3rem, 7vw, 5.5rem) 0}
  .contact h2{color:var(--fog); font-size:clamp(2.2rem, 5vw, 3.6rem); max-width:22ch; font-variation-settings:"opsz" 144, "SOFT" 30, "WONK" 1}
  .contact p{max-width:var(--measure); color:rgba(242,245,244,.8); font-size:1.15rem}
  .contact .ways{margin-top:1.5rem}
  .contact .ways a{color:var(--fog); text-decoration:none; padding:.7rem 1.2rem; border:1.5px solid rgba(242,245,244,.5); border-radius:999px; font-weight:500}
  .contact .ways a:hover{background:var(--fog); color:var(--ink); border-color:var(--fog)}
  footer{background:var(--ink); color:rgba(242,245,244,.6); padding:1.5rem 0 2.5rem; font-size:.9rem; border-top:1px solid rgba(242,245,244,.15)}
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.75rem}
  footer .edited{flex-basis:100%; font-style:italic; color:rgba(242,245,244,.45); font-size:.85rem}
  footer a{color:rgba(242,245,244,.85); text-decoration:none}

  section.block.reception .wrap, section.block.seealso .wrap{grid-template-columns:1fr}
  section.block.seealso{padding:clamp(2rem, 5vw, 3.5rem) 0}
  .also{list-style:none; margin:.6rem 0 0; padding:0; max-width:var(--measure)}
  .also li{padding:1rem 0; border-top:1px solid var(--tide); display:grid; gap:.25rem}
  .also li:first-child{border-top:0; padding-top:.2rem}
  .also li > a{font-family:var(--display); font-size:1.35rem; color:var(--ink); text-decoration:none; font-variation-settings:"opsz" 48, "SOFT" 40}
  .also li > a:hover{color:var(--wiki)}
  .also li > span{color:var(--ink-soft)}
  .everything{margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--kelp); max-width:var(--measure); font-family:var(--display); font-size:1.2rem; line-height:1.5; font-variation-settings:"opsz" 30, "SOFT" 60}
  .everything a{color:var(--kelp); text-decoration:none; border-bottom:1.5px solid var(--kelp)}
  .everything a:hover{color:var(--ink); border-bottom-color:var(--ink)}
  /* reception */
  .reception ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2.5rem}
  .reception li{border-top:1px solid var(--tide); padding-top:1rem}
  .reception q{quotes:"\201C" "\201D"; font-family:var(--display); font-style:italic; font-size:1.2rem; line-height:1.35; display:block; margin-bottom:.5rem; font-variation-settings:"opsz" 36, "SOFT" 60}
  .reception q::before{content:open-quote} .reception q::after{content:close-quote}
  .reception cite{font-style:normal; font-size:.9rem; color:var(--ink-soft)}
  @media (max-width:640px){ .reception ul{grid-template-columns:1fr} }
  /* embedded audio/video */
  .embed{position:relative; aspect-ratio:16/9; margin:1.8rem 0 .6rem; border-radius:6px; overflow:hidden; background:var(--tide)}
  .embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
  .quote-pair blockquote{margin:0 0 .8rem; padding-left:1rem; border-left:2px solid var(--kelp); font-family:var(--display); font-style:italic; font-variation-settings:"opsz" 24, "SOFT" 60; color:var(--ink-soft)}
  .quote-pair blockquote cite{display:block; font-style:normal; font-family:var(--text); font-size:.85rem; margin-top:.3rem}
  /* contact form */
  .form{display:grid; gap:.9rem; max-width:34rem; margin-top:2rem}
  .form label{display:grid; gap:.35rem; font-size:.95rem; color:rgba(242,245,244,.8)}
  .form input,.form textarea{font:inherit; padding:.7rem .85rem; border-radius:6px; border:1.5px solid rgba(242,245,244,.35); background:rgba(242,245,244,.06); color:var(--fog)}
  .form input:focus,.form textarea:focus{outline:3px solid rgba(242,245,244,.5); outline-offset:2px; border-color:var(--fog)}
  .form textarea{min-height:8rem; resize:vertical}
  .form button{font:inherit; font-weight:500; padding:.75rem 1.3rem; border-radius:999px; border:1.5px solid var(--fog); background:var(--fog); color:var(--ink); cursor:pointer; justify-self:start}
  .form button:hover{background:var(--tide)}
  .form .hp{display:none}
  .contact .or{color:rgba(242,245,244,.6); font-size:.95rem; margin-top:1.4rem}
  /* experience page */
  .exp h2{margin-top:2.8rem}
  .exp h2:first-of-type{margin-top:0}
  .exp ul.rec{list-style:none; margin:1rem 0 0; padding:0}
  .exp ul.rec li{padding:.55rem 0; border-top:1px solid var(--tide); color:var(--ink)}
  .exp ul.rec li:first-child{border-top:0}
  .exp ul.rec a{color:var(--wiki); text-decoration:none; border-bottom:1px solid rgba(43,93,168,.35)}
  .exp ul.rec a:hover{border-bottom-color:var(--wiki)}
  .exp .skills{columns:2; column-gap:2rem; font-size:.95rem; color:var(--ink-soft); margin:0}
  .toc summary{font-family:var(--display); font-size:1.05rem; cursor:pointer; color:var(--ink-soft); list-style:none; padding-bottom:.5rem; border-bottom:1px solid var(--tide); margin-bottom:.75rem}
  .toc summary::-webkit-details-marker{display:none}
  .toc ol{margin:0; padding-left:1.4rem; font-size:.9rem; line-height:1.5}
  .toc li{margin-bottom:.25rem}
  .toc li::marker{color:var(--wiki)}
  .toc a{color:var(--ink); text-decoration:none}
  .toc a:hover{color:var(--wiki)}
  .page-head{padding:clamp(2.5rem, 6vw, 4.5rem) 0 0}
  .page-head h1{font-size:clamp(2.6rem, 6vw, 4.4rem); font-variation-settings:"opsz" 144, "SOFT" 30, "WONK" 1; margin-bottom:.8rem}
  .page-head .lead{font-size:clamp(1.1rem, 1.5vw, 1.3rem); max-width:var(--measure); color:var(--ink-soft)}

  /* publications */
  .pubs{list-style:none; margin:0; padding:0}
  .pubs > li{padding:1.4rem 0; border-top:1px solid var(--tide); display:grid; grid-template-columns:minmax(0,1fr); gap:.5rem}
  .pubs > li:first-child{border-top:0; padding-top:.2rem}
  .pubs > li > a{text-decoration:none}
  .pubs b{font-family:var(--display); font-weight:400; font-size:1.5rem; color:var(--ink); font-variation-settings:"opsz" 48, "SOFT" 40}
  .pubs > li > a:hover b{color:var(--wiki)}
  .pubs > li > span{color:var(--ink-soft)}
  .pubs .recent{list-style:none; margin:.4rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.95rem}
  .pubs .recent a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--tide)}
  .pubs .recent a:hover{border-bottom-color:var(--ink)}
  .main h3.group{font-size:1.05rem; color:var(--kelp); margin:2.2rem 0 .2rem; padding-top:1.6rem; border-top:1px solid var(--tide); font-variation-settings:"opsz" 24, "SOFT" 60}
  .main h3.group:first-of-type{margin-top:0; padding-top:0; border-top:0}
  .main h3.group + .book{border-top:0; padding-top:.6rem}
  footer .findme{display:flex; flex-wrap:wrap; gap:.3rem .9rem}
  .exp .shelves{margin-top:1rem}
  .exp .shelf h3{margin:1.4rem 0 .4rem}
  .exp .else{margin-top:1.2rem}
  .book .subtitle{font-family:var(--display); font-style:italic; color:var(--kelp); margin:-.2rem 0 .7rem; font-variation-settings:"opsz" 24, "SOFT" 60}

  /* small utilities used by the home page */
  .main.wide{max-width:none}
  .main.wide .lead{max-width:var(--measure)}
  .main .bio{margin-top:1.8rem}
  .main .note{font-size:.9rem; color:var(--ink-soft); margin-top:1.6rem}
  .main h3.later{margin-top:2.4rem}
  .main .after{margin-top:1.6rem}
  .book .beside{margin-left:.9rem; font-size:.95rem}
  .epigraph.second{font-size:1.1rem; margin-top:-.6rem}
  .contact .or a{color:var(--fog)}
  .exp .timeline{margin-top:1.4rem}
  .page-head.short{padding-bottom:clamp(3rem, 8vw, 6rem)}
  /* print: the article without the chrome */
  @media print{
    .nav, .skip, .form, .contact .or, .embed, .doors{display:none}
    body{background:#fff; color:#000}
    .refs{position:static}
    a{color:inherit}
    .refs a::after{content:" (" attr(href) ")"; font-size:.8em; color:#555}
  }