:root{
    --paper:#eff0ed;
    --ink:#050045;
    --ink-soft:#4b4877;
    --ultra:#1b0fc4;
    --lift:#76a0ff;
    --tint:#d3e7ff;
    --peri:#b4c424;
    --paper-soft:#a9a8bb;

    --pane-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='12' y='0' width='.5' height='60' fill='rgba(27,15,196,.075)'/%3E%3Crect x='24' y='0' width='.5' height='60' fill='rgba(27,15,196,.075)'/%3E%3Crect x='36' y='0' width='.5' height='60' fill='rgba(27,15,196,.075)'/%3E%3Crect x='48' y='0' width='.5' height='60' fill='rgba(27,15,196,.075)'/%3E%3Crect x='0' y='12' width='60' height='.5' fill='rgba(27,15,196,.075)'/%3E%3Crect x='0' y='24' width='60' height='.5' fill='rgba(27,15,196,.075)'/%3E%3Crect x='0' y='36' width='60' height='.5' fill='rgba(27,15,196,.075)'/%3E%3Crect x='0' y='48' width='60' height='.5' fill='rgba(27,15,196,.075)'/%3E%3Crect x='0' y='0' width='.5' height='60' fill='rgba(27,15,196,.075)'/%3E%3Crect x='0' y='0' width='60' height='.5' fill='rgba(27,15,196,.075)'/%3E%3C/svg%3E");
    --pane-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='12' y='0' width='.5' height='60' fill='rgba(118,160,255,.14)'/%3E%3Crect x='24' y='0' width='.5' height='60' fill='rgba(118,160,255,.14)'/%3E%3Crect x='36' y='0' width='.5' height='60' fill='rgba(118,160,255,.14)'/%3E%3Crect x='48' y='0' width='.5' height='60' fill='rgba(118,160,255,.14)'/%3E%3Crect x='0' y='12' width='60' height='.5' fill='rgba(118,160,255,.14)'/%3E%3Crect x='0' y='24' width='60' height='.5' fill='rgba(118,160,255,.14)'/%3E%3Crect x='0' y='36' width='60' height='.5' fill='rgba(118,160,255,.14)'/%3E%3Crect x='0' y='48' width='60' height='.5' fill='rgba(118,160,255,.14)'/%3E%3Crect x='0' y='0' width='.5' height='60' fill='rgba(118,160,255,.14)'/%3E%3Crect x='0' y='0' width='60' height='.5' fill='rgba(118,160,255,.14)'/%3E%3C/svg%3E");
    --pane-drench:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='12' y='0' width='.5' height='60' fill='rgba(255,255,255,.1)'/%3E%3Crect x='24' y='0' width='.5' height='60' fill='rgba(255,255,255,.1)'/%3E%3Crect x='36' y='0' width='.5' height='60' fill='rgba(255,255,255,.1)'/%3E%3Crect x='48' y='0' width='.5' height='60' fill='rgba(255,255,255,.1)'/%3E%3Crect x='0' y='12' width='60' height='.5' fill='rgba(255,255,255,.1)'/%3E%3Crect x='0' y='24' width='60' height='.5' fill='rgba(255,255,255,.1)'/%3E%3Crect x='0' y='36' width='60' height='.5' fill='rgba(255,255,255,.1)'/%3E%3Crect x='0' y='48' width='60' height='.5' fill='rgba(255,255,255,.1)'/%3E%3Crect x='0' y='0' width='.5' height='60' fill='rgba(255,255,255,.1)'/%3E%3Crect x='0' y='0' width='60' height='.5' fill='rgba(255,255,255,.1)'/%3E%3C/svg%3E");
  }

  *,*::before,*::after{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);
       font-family:"Sometype Mono",ui-monospace,monospace;font-weight:400;
       -webkit-font-smoothing:antialiased}
  .ser{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400;
       font-variation-settings:"opsz" 60}

  section{padding-block:clamp(40px,5.5vw,68px);background-repeat:repeat;background-position:0 0}
  .inner{max-width:980px;margin:0 auto;padding-inline:clamp(16px,5vw,44px)}
  .eyebrow{display:flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.2em;
           text-transform:uppercase;font-weight:700;margin-bottom:18px}
  .eyebrow::before{content:"";width:30px;height:1px;background:currentColor;flex:none}
  p{margin:0}
  .body{font-size:13px;line-height:1.75;max-width:52ch}
  .body + .body{margin-top:12px}
  .body strong{font-weight:700}
  .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,44px);align-items:start}
  @media (max-width:800px){ .cols{grid-template-columns:minmax(0,1fr)} }

  /* availability: peridot set INTO a rule, never a container */
  .raise{display:flex;align-items:center}
  .raise i{height:1px;background:rgba(5,0,69,.26);flex:none;width:30px}
  .raise i.run{flex:1 1 auto;width:auto;min-width:14px}
  .raise span{background:var(--peri);color:var(--ink);flex:none;
              font-size:10.5px;font-weight:700;letter-spacing:.14em;
              text-transform:uppercase;padding:6px 12px}
  @media (max-width:540px){
    .raise i{width:14px}
    .raise span{letter-spacing:.06em;padding:6px 9px}
  }

  nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;
      background:rgba(239,240,237,.93);border-bottom:1px solid rgba(5,0,69,.14)}
  nav .inner{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
             padding-block:10px;flex-wrap:wrap}
  nav .mark{font-size:13px;font-weight:700;letter-spacing:-.01em;
            display:flex;align-items:center;gap:11px}

  /* ---------- JLA monogram: a block set into a rule ---------- */
  .jla{display:inline-flex;align-items:center;flex:none}
  .jla i{height:1px;background:currentColor;opacity:.32;flex:none;width:9px}
  .jla i.run{width:20px}
  .jla b{background:var(--mono-bg,var(--ultra));color:var(--mono-fg,#fff);
         font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:500;
         letter-spacing:-.02em;line-height:1;padding:4px 7px 5px;font-size:13px}
  .jla.lg b{font-size:22px;padding:7px 12px 8px}
  .jla.lg i{width:16px}
  .jla.lg i.run{width:44px}
  nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
  nav a{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
        text-decoration:none;font-weight:700}
  nav a:hover{color:var(--ultra)}
  .mdchip{font-family:inherit;font-size:10.5px;letter-spacing:.12em;font-weight:700;
          color:var(--ultra);background:transparent;border:1px solid rgba(27,15,196,.4);
          padding:3px 8px;cursor:pointer;text-transform:uppercase}
  .mdchip:hover{background:rgba(27,15,196,.08)}
  .mdchip[aria-pressed="true"]{background:var(--ultra);color:#fff;border-color:var(--ultra)}
  .mdchip:focus-visible{outline:2px solid var(--ultra);outline-offset:2px}

  /* 01 paper */
  #hero{background-color:var(--paper);background-image:var(--pane-paper);
        padding-block:clamp(48px,7vw,86px)}
  #hero .eyebrow{color:var(--ultra)}
  .name{margin:0 0 20px;font-size:clamp(3rem,10vw,6rem);line-height:.86;letter-spacing:-.025em}
  #hero .body{color:var(--ink-soft)}
  #hero .body strong{color:var(--ink)}
  .actions{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:24px}
  .btn{display:inline-block;padding:11px 22px;font-size:10.5px;letter-spacing:.14em;
       text-transform:uppercase;font-weight:700;text-decoration:none;background:var(--ultra);color:#fff}
  .lnk{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
       color:var(--ultra);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
  .hero-raise{margin-top:34px}

  /* 02 inverse */
  #about{background-color:var(--ink);color:var(--paper);background-image:var(--pane-ink)}
  #about .eyebrow{color:var(--lift)}
  .claim{margin:0 0 20px;font-size:clamp(1.6rem,3.9vw,2.6rem);line-height:1.1;
         letter-spacing:-.012em;max-width:17ch}
  .claim em{font-style:inherit;color:var(--lift)}
  #about .body{color:var(--paper-soft)}
  #about .body strong{color:var(--paper)}
  .pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
  .pill{font-size:10.5px;padding:5px 11px;border:1px solid rgba(239,240,237,.22);color:var(--paper-soft)}
  .pill.now{border-color:var(--peri);color:var(--peri);font-weight:700}

  /* 03 paper: programmes */
  #work{background-color:var(--paper);background-image:var(--pane-paper)}
  /* flagship sits full width above the pair */
  .flagship{margin-bottom:clamp(32px,5vw,52px);padding-bottom:clamp(32px,5vw,52px);
            border-bottom:1px solid rgba(5,0,69,.18)}
  .flagship .prog-title{font-size:clamp(1.8rem,4.4vw,2.9rem);max-width:22ch}
  .flagship .credits{max-width:720px;font-size:11.5px}
  .flagship .prog-house{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .flagship .prog-house a{color:var(--ink-soft);text-decoration:none;letter-spacing:.12em}
  .flagship .prog-house a:hover{color:var(--ultra)}
  .todo{background:var(--peri);color:var(--ink);padding:1px 6px;font-weight:700}

  .progs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,30px)}
  @media (max-width:980px){ .progs{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:700px){
    .progs{grid-template-columns:minmax(0,1fr);gap:0}
    .progs .prog + .prog{margin-top:26px;padding-top:26px;border-top:1px solid rgba(5,0,69,.18);
                         padding-left:0;border-left:0}
  }
  .prog{min-width:0}
  @media (min-width:701px){
    .progs .prog + .prog{padding-left:clamp(20px,3vw,30px);border-left:1px solid rgba(5,0,69,.18)}
  }
  .progs .credits{grid-template-columns:minmax(54px,64px) minmax(0,1fr);gap:0 10px;font-size:10.5px}
  .progs .prog-title{font-size:clamp(1.2rem,2.2vw,1.5rem);max-width:none}
  .prog-house{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
              color:var(--ultra);margin-bottom:8px}
  .prog-title{margin:0 0 16px;font-size:clamp(1.35rem,2.7vw,1.85rem);line-height:1.08;
              letter-spacing:-.012em;max-width:17ch}
  .credits{display:grid;grid-template-columns:minmax(62px,78px) minmax(0,1fr);gap:0 13px;
           font-size:11px;line-height:1.6;margin:0}
  .credits > div{display:contents}
  .credits dt,.credits dd{padding:7px 0;border-top:1px solid rgba(5,0,69,.16);margin:0}
  .credits dt{color:var(--ink-soft);font-weight:700}
  .credits dd{color:var(--ink)}
  .credits dd.aside{font-style:italic;color:var(--ink-soft)}
  .credits dd b{font-weight:700;font-variant-numeric:tabular-nums}
  .credits dd a{color:var(--ultra);text-decoration:none;
                border-bottom:1px solid rgba(27,15,196,.4);padding-bottom:1px}
  .credits dd a:hover{border-bottom-color:var(--ultra)}

  /* 04 inverse: the ledger */
  #resume{background-color:var(--ink);color:var(--paper);background-image:var(--pane-ink)}
  #resume .eyebrow{color:var(--lift)}
  .ledger{margin:0;display:grid;grid-template-columns:minmax(88px,108px) minmax(0,1fr);gap:0 20px}
  @media (max-width:640px){ .ledger{grid-template-columns:minmax(0,1fr);gap:0} }
  .ledger > div{display:contents}
  .ledger .yr,.ledger .rec{padding:14px 0;border-top:1px solid rgba(239,240,237,.2);margin:0}
  @media (max-width:640px){
    .ledger .yr{padding-bottom:2px}
    .ledger .rec{padding-top:2px;border-top:0}
  }
  .ledger.tight .yr,.ledger.tight .rec{padding:9px 0}
  .ledger.tight .role{font-size:12px;font-weight:700;line-height:1.4}
  .ledger.tight .org{font-size:11px;margin-top:2px}
  .ledger .yr{font-size:11px;font-variant-numeric:tabular-nums;color:var(--paper-soft);
              font-weight:700;letter-spacing:.01em}
  .ledger .role{font-size:13.5px;color:var(--paper);font-weight:700;line-height:1.35}
  .ledger .org{font-size:11px;color:var(--lift);margin-top:3px}
  .ledger .say{font-size:11px;color:var(--paper-soft);margin-top:6px;line-height:1.6;max-width:62ch}
  .ledger .say b{color:var(--paper);font-weight:700}
  .ledger .rec.lean .role{font-weight:400;color:var(--paper-soft);font-size:11.5px;line-height:1.7}
  .ledger .rec.lean .role + .role{margin-top:2px}
  .ledger .wh{color:var(--paper-soft);opacity:.6;font-variant-numeric:tabular-nums}
  .resume-actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
  #resume .lnk{color:var(--lift)}

  .creds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px clamp(20px,4vw,44px);
         margin-top:30px;padding-top:22px;border-top:1px solid rgba(239,240,237,.2)}
  @media (max-width:640px){ .creds{grid-template-columns:minmax(0,1fr);gap:18px} }
  .creds h3{margin:0 0 10px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
            font-weight:700;color:var(--lift)}
  .cred-row{display:grid;grid-template-columns:minmax(88px,108px) minmax(0,1fr);gap:0 20px}
  @media (max-width:640px){ .cred-row{grid-template-columns:minmax(0,1fr);gap:4px} }
  .cred-yr{font-size:11px;font-variant-numeric:tabular-nums;color:var(--paper-soft);font-weight:700}
  .cred-v{font-size:11.5px;line-height:1.7;color:var(--paper-soft)}
  .cred-v b{color:var(--paper);font-weight:700}

  /* 05 drench */
  #contact{background-color:var(--ultra);color:#fff;background-image:var(--pane-drench)}
  #contact .eyebrow{color:var(--tint)}
  .contact-h{margin:0 0 14px;font-size:clamp(1.8rem,4.6vw,3rem);line-height:1.04;letter-spacing:-.018em}
  #contact .body{color:rgba(255,255,255,.78)}
  .boxes{display:flex;flex-direction:column;gap:10px}
  .box{padding:13px 16px;border:1px solid rgba(255,255,255,.32);text-decoration:none;display:block}
  .box:hover{background:rgba(255,255,255,.08)}
  .box .k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
  .box .v{font-size:13.5px;margin-top:3px;color:#fff;display:block}
  .box.now{border-color:var(--peri)}
  .box.now .k{color:var(--peri);font-weight:700}

  footer{background:var(--ink);color:var(--paper-soft);padding-block:18px;font-size:10px}
  footer .inner{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
  footer .jla{--mono-bg:var(--lift);--mono-fg:var(--ink);color:var(--paper-soft)}
  footer .left{display:flex;align-items:center;gap:12px}





  /* the two invitation items sit together at the end, after the sections.
     Grouping does the work a marker was doing: extra space, nothing drawn. */
  nav li.group-start{margin-left:10px}
  /* ---------- take menu ---------- */
  nav li.has-menu{position:relative}
  .takebtn{font-family:inherit;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
           font-weight:700;color:var(--ink-soft);background:none;border:0;padding:0;
           cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .takebtn:hover,.takebtn[aria-expanded="true"]{color:var(--ultra)}
  .takebtn svg{width:7px;height:7px;flex:none;transition:transform .15s}
  .takebtn[aria-expanded="true"] svg{transform:rotate(180deg)}
  .takebtn:focus-visible{outline:2px solid var(--ultra);outline-offset:3px}
  .takemenu{display:block;gap:0;flex-wrap:nowrap;
            position:absolute;top:calc(100% + 11px);right:0;z-index:30;
            width:min(304px,calc(100vw - 32px));background:var(--paper);
            border:1px solid rgba(5,0,69,.3);padding:0;margin:0;list-style:none}
  .takemenu[hidden]{display:none}
  .takemenu .lead{font-size:10px;line-height:1.6;color:var(--ink-soft);
                  padding:11px 14px;border-bottom:1px solid rgba(5,0,69,.18);margin:0}
  .takemenu a{display:block;padding:11px 14px;text-decoration:none;color:var(--ink);
              border-bottom:1px solid rgba(5,0,69,.14);
              text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:400}
  .takemenu li:last-child a{border-bottom:0}
  .takemenu a:hover,.takemenu a:focus-visible{background:rgba(27,15,196,.07);outline:0}
  .takemenu .f{display:inline-block;font-size:8.5px;font-weight:700;letter-spacing:.16em;
               color:#fff;background:var(--ultra);padding:2px 5px 3px;margin-right:8px;
               vertical-align:1px}
  .takemenu .k{font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none}
  .takemenu .d{display:block;font-size:10px;color:var(--ink-soft);margin-top:4px;
               line-height:1.5;text-transform:none;letter-spacing:0;font-weight:400}

  /* ---------- the .md flip ---------- */
  #mdview{background-color:var(--paper);background-image:var(--pane-paper);
          padding-block:clamp(32px,4.5vw,56px)}
  .mdhead{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline;
          padding-bottom:14px;margin-bottom:30px;border-bottom:1px solid rgba(5,0,69,.2)}
  .mdhead h2{margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
             font-weight:700;color:var(--ultra)}
  .mdhead p{font-size:11px;color:var(--ink-soft);line-height:1.6;max-width:62ch}
  .mdhead code{background:rgba(5,0,69,.08);padding:1px 5px}
  .mdhead a{color:var(--ultra)}

  /* syntax stays visible; everything else is actually styled */
  #mdbody{max-width:74ch}
  #mdbody .g{color:var(--ink-soft);opacity:.34;font-weight:400;font-style:normal}
  #mdbody p{font-size:12.5px;line-height:1.85;color:var(--ink-soft);margin:0 0 15px}
  #mdbody b{color:var(--ink);font-weight:700}
  #mdbody i{font-style:italic}
  #mdbody a{color:var(--ultra);text-decoration:none;
            border-bottom:1px solid rgba(27,15,196,.35)}
  #mdbody a:hover{border-bottom-color:var(--ultra)}
  #mdbody .mh{margin:0 0 14px;line-height:1.15}
  #mdbody .mh1{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400;
               font-size:clamp(2rem,5vw,2.9rem);letter-spacing:-.022em;color:var(--ink)}
  #mdbody .mh1 .g{font-family:"Sometype Mono",monospace;font-size:.32em;
                  vertical-align:.5em;letter-spacing:0}
  #mdbody .mh2{font-size:15px;font-weight:700;color:var(--ultra);
               margin-top:34px;padding-top:13px;border-top:1px solid rgba(5,0,69,.16)}
  #mdbody .mh3{font-size:12.5px;font-weight:700;color:var(--ink);margin-top:22px}
  #mdbody blockquote{margin:0 0 16px;padding-left:14px;
                     border-left:2px solid var(--peri);font-size:12.5px;
                     line-height:1.8;color:var(--ink-soft);max-width:60ch}
  #mdbody .mli{font-size:12.5px;line-height:1.8;color:var(--ink-soft);
               margin-bottom:3px;padding-left:2.2ch;text-indent:-2.2ch}
  #mdbody .mhr{margin:26px 0;font-size:11px}
  @media print{ #mdview{display:none !important} }

  /* ---------- print ---------- */
  @media print{
    @page{ margin:14mm }
    nav,.actions,.hero-raise,.resume-actions,.boxes{display:none !important}
    body{background:#fff !important;color:#000;font-size:10pt}
    section{padding-block:0 !important;background:#fff !important;
            background-image:none !important;color:#000 !important;
            break-inside:avoid}
    #about,#resume,#contact{background:#fff !important;color:#000 !important}
    #about .body,#resume .ledger .say,#contact .body{color:#222 !important}
    #about .body strong,.ledger .role,.ledger .say b{color:#000 !important}
    .eyebrow,.prog-house,.ledger .org,#about .eyebrow,#resume .eyebrow,
    #contact .eyebrow,.claim em{color:#1b0fc4 !important}
    .ledger .yr,.credits dt,.cred-yr,.cred-v{color:#333 !important}
    .ledger .yr,.ledger .rec{border-top-color:#bbb !important}
    .jla b{background:#1b0fc4 !important;color:#fff !important;
           -webkit-print-color-adjust:exact;print-color-adjust:exact}
    .raise span,.todo{background:#b4c424 !important;color:#000 !important;
           -webkit-print-color-adjust:exact;print-color-adjust:exact}
    a{color:#1b0fc4 !important;text-decoration:none}
    footer{background:#fff !important;color:#555 !important;border-top:1px solid #bbb}
  }

  /* ---------- source note ---------- */
  #source{background-color:var(--paper);background-image:var(--pane-paper);
          padding-block:clamp(34px,4.5vw,52px)}
  #source .eyebrow{color:var(--ultra)}
  .srcgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
           gap:clamp(14px,2.4vw,24px);margin-top:18px}
  @media (max-width:700px){ .srcgrid{grid-template-columns:minmax(0,1fr)} }
  .srcgrid a{display:block;padding:12px 14px;border:1px solid rgba(5,0,69,.2);
             text-decoration:none;color:var(--ink)}
  .srcgrid a:hover{border-color:var(--ultra);background:rgba(27,15,196,.05)}
  .srcgrid .k{display:block;font-size:12px;font-weight:700;color:var(--ultra)}
  .srcgrid .d{display:block;font-size:10.5px;color:var(--ink-soft);
              margin-top:4px;line-height:1.55}
  a.mdchip{text-decoration:none;display:inline-block}

  /* ---------- writing ---------- */
  nav .mark a{text-decoration:none;color:inherit}
  a.jla{text-decoration:none}

  #writinglist{background-color:var(--paper);background-image:var(--pane-paper);
               padding-block:clamp(44px,6vw,76px);min-height:60vh}
  #writinglist .eyebrow{color:var(--ultra)}
  .listttl{margin:0 0 16px;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.04;
           letter-spacing:-.02em}
  #writinglist .body{color:var(--ink-soft)}
  #writinglist .body a{color:var(--ultra)}
  .postlist{margin-top:34px;border-top:1px solid rgba(5,0,69,.2)}
  a.postrow{display:grid;grid-template-columns:minmax(104px,132px) minmax(0,1fr);
            gap:4px 22px;padding:17px 0;border-bottom:1px solid rgba(5,0,69,.16);
            text-decoration:none;color:var(--ink)}
  @media (max-width:620px){ a.postrow{grid-template-columns:minmax(0,1fr);gap:5px} }
  a.postrow:hover{background:rgba(27,15,196,.05)}
  .postrow .pd{font-size:10.5px;font-weight:700;letter-spacing:.06em;
               color:var(--ink-soft);font-variant-numeric:tabular-nums;padding-top:3px}
  .postrow .pt{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400;
               font-size:clamp(1.2rem,2.4vw,1.55rem);line-height:1.15;
               letter-spacing:-.012em}
  a.postrow:hover .pt{color:var(--ultra)}
  .postrow .pk{grid-column:2;font-size:11.5px;line-height:1.65;color:var(--ink-soft);
               max-width:62ch}
  @media (max-width:620px){ .postrow .pk{grid-column:1} }

  #post{display:block;background-color:var(--paper);background-image:var(--pane-paper);
        padding-block:clamp(44px,6vw,76px)}
  #post .eyebrow{color:var(--ultra)}
  .postttl{margin:0 0 18px;font-size:clamp(2rem,5.4vw,3.4rem);line-height:1.02;
           letter-spacing:-.024em;max-width:20ch}
  .dek{margin:0 0 34px;font-size:14.5px;line-height:1.7;color:var(--ink-soft);
       max-width:56ch;padding-bottom:22px;border-bottom:1px solid rgba(5,0,69,.2)}
  .prose{max-width:62ch}
  .prose p{margin:0 0 17px;font-size:13.5px;line-height:1.85;color:var(--ink-soft)}
  .prose strong{color:var(--ink);font-weight:700}
  .prose em{font-style:italic}
  .prose a{color:var(--ultra);text-decoration:none;
           border-bottom:1px solid rgba(27,15,196,.4)}
  .prose a:hover{border-bottom-color:var(--ultra)}
  .prose h2{margin:38px 0 14px;font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.15;
            letter-spacing:-.012em;color:var(--ink);
            font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400}
  .prose h3{margin:28px 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;
            text-transform:uppercase;color:var(--ultra)}
  .prose ul{margin:0 0 17px;padding:0;list-style:none}
  .prose li{position:relative;padding-left:17px;margin-bottom:7px;font-size:13.5px;
            line-height:1.8;color:var(--ink-soft)}
  .prose li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:1px;
                    background:var(--ultra)}
  .prose blockquote{margin:24px 0;padding:2px 0 2px 18px;
                    border-left:2px solid var(--peri);font-size:14.5px;line-height:1.75;
                    color:var(--ink);max-width:54ch}
  .prose hr{border:0;border-top:1px solid rgba(5,0,69,.2);margin:34px 0}
  .prose code{background:rgba(5,0,69,.08);padding:1px 5px;font-size:.92em}
  .backlink{margin:44px 0 0;padding-top:20px;border-top:1px solid rgba(5,0,69,.2);
            font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
  .backlink a{color:var(--ultra);text-decoration:none;
              border-bottom:1px solid currentColor;padding-bottom:2px}
  @media print{
    #post{background:#fff !important;background-image:none !important}
    .prose p,.prose li{color:#222 !important}
    .backlink{display:none}
  }