*,*::before,*::after{box-sizing:border-box}
  body{margin:0;background:#F3EFE4;color:#201F1D;
       font-family:Lora,Georgia,serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
  a{color:#8A5F1E}
  a:hover{color:#C99A4E}

  header{background:#1B120B;color:#F7F1E6;padding:clamp(28px,4vw,44px) clamp(20px,4.5vw,72px)}
  .head-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
  /* logo-wordmark.png (1983×793) has a transparent margin around the mark (mark: x 331–1630, y 121–654).
     --logo-ink is the height of the visible mark; negative margins cut the file's margin out of the layout. */
  .head-inner > a:first-child{display:block;flex:none;line-height:0}
  .head-inner img{--logo-ink:72px;display:block;width:auto;max-width:none;
       height:calc(var(--logo-ink) * 793 / 534);
       margin:calc(var(--logo-ink) * -121 / 534) calc(var(--logo-ink) * -352 / 534)
              calc(var(--logo-ink) * -138 / 534) calc(var(--logo-ink) * -331 / 534)}
  .back{margin-left:auto;color:#F0E9DC;text-decoration:none;font-size:14.5px}
  .back:hover{text-decoration:underline;color:#fff}
  .langs{display:flex;gap:4px;font-size:12.5px;letter-spacing:.14em}
  .langs a{padding:5px 7px;color:rgba(240,233,220,.6);text-decoration:none;border-bottom:1px solid transparent}
  .langs a:hover{color:#fff}
  .langs a[aria-current]{color:#F0E9DC;border-bottom-color:#C99A4E}

  main{max-width:900px;margin:0 auto;padding:clamp(34px,5vw,64px) clamp(20px,4.5vw,40px) clamp(50px,6vw,90px)}
  .kicker{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(32,31,29,.55);margin:0 0 14px}
  h1{font-family:"Cormorant Garamond",Garamond,serif;font-weight:400;
     font-size:clamp(32px,4.4vw,52px);line-height:1.1;letter-spacing:-.012em;margin:0 0 10px}
  .updated{color:rgba(32,31,29,.6);font-size:14.5px;margin:0 0 40px}
  h2{font-family:"Cormorant Garamond",Garamond,serif;font-weight:500;
     font-size:clamp(22px,2.6vw,30px);line-height:1.2;margin:44px 0 14px;
     padding-top:22px;border-top:1px solid rgba(32,31,29,.16)}
  h3{font-size:16px;font-weight:500;margin:26px 0 8px}
  p,li{color:rgba(32,31,29,.86)}
  ul{padding-left:22px}
  li{margin-bottom:9px}
  table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
  th,td{text-align:left;padding:11px 14px;border:1px solid rgba(32,31,29,.18);vertical-align:top}
  th{background:rgba(32,31,29,.05);font-weight:500}
  code{font-family:ui-monospace,Consolas,monospace;font-size:13.5px;
       background:rgba(32,31,29,.07);padding:2px 6px;border-radius:2px}
  .note{border-left:2px solid #C99A4E;background:rgba(201,154,78,.10);
        padding:16px 20px;margin:26px 0;font-size:15px}
  .todo{background:#FFF3CD;border:1px solid #C99A4E;padding:16px 20px;margin:26px 0;font-size:15px}
  .todo strong{color:#8A5F1E}
  footer{border-top:1px solid rgba(32,31,29,.16);
         max-width:900px;margin:0 auto;padding:26px clamp(20px,4.5vw,40px) 50px;
         font-size:14px;color:rgba(32,31,29,.65)}
  @media (max-width:640px){
    .head-inner img{--logo-ink:56px}
    table,tbody,tr,td,th{display:block;width:100%}
    th{border-bottom:none}
    td{border-top:none}
  }