:root{
      --blue-deep:#0c2b4d;
      --blue:#174f7c;
      --blue-open:#1f6aa5;
      --ink:#171717;
      --muted:#707070;
      --line:#dddddd;
      --line-soft:#eeeeee;
      --paper:#ffffff;
      --measure:620px;
      --side:220px;
      --gap:42px;
    }

    *{box-sizing:border-box}
    html{font-size:17px;scroll-behavior:smooth}

    body{
      margin:0;
      background:var(--paper);
      color:var(--ink);
      font-family:"PT Serif",Georgia,"Times New Roman",serif;
      font-weight:400;
      line-height:1.68;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }

    a{color:inherit}
    button,input{font:inherit}

    .accent{
      height:4px;
      background:linear-gradient(90deg,var(--blue-deep),var(--blue-open) 58%,var(--blue));
    }

    /* ---------- Fixed site chrome ---------- */

    .site-chrome{
      position:sticky;
      top:0;
      z-index:60;
      background:#fff;
    }

    .masthead{
      position:relative;
      background:#fff;
      border-bottom:0;
    }

    .masthead::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:1px;
      background:linear-gradient(
        90deg,
        rgba(23,79,124,.44) 0%,
        rgba(31,106,165,.27) 44%,
        rgba(23,79,124,.11) 100%
      );
      pointer-events:none;
    }

    .masthead-inner{
      max-width:1120px;
      margin:0 auto;
      padding:27px 30px 22px;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:28px;
    }

    .identity a{
      display:inline-block;
      color:var(--ink);
      text-decoration:none;
      font-family:"Iowan Old Style","Baskerville","Palatino Linotype",Georgia,serif;
      font-size:29px;
      font-weight:400;
      line-height:1.04;
      letter-spacing:-.018em;
    }

    .identity p{
      margin:7px 0 0;
      color:#3f627c;
      font:12px/1.35 Arial,Helvetica,sans-serif;
      letter-spacing:.035em;
    }

    .music-staff{
      display:inline-flex;
      align-items:center;
      margin-left:4px;
      color:var(--blue-deep);
      vertical-align:-4px;
    }

    .music-staff svg{
      display:block;
      overflow:visible;
    }

    .top-tools{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      align-items:center;
      gap:8px 15px;
      font:600 12px/1.2 "Source Sans Pro",Arial,Helvetica,sans-serif;
      letter-spacing:.025em;
    }

    .top-tools button,
    .top-tools a{
      appearance:none;
      border:0;
      background:none;
      padding:0 0 3px;
      cursor:pointer;
      color:#343434;
      text-decoration:none;
      border-bottom:1px solid transparent;
    }

    .top-tools button:hover,
    .top-tools a:hover,
    .top-tools button[aria-expanded="true"]{
      color:var(--blue);
      border-bottom-color:var(--blue);
    }

    .top-tools .dot{
      color:#b0b0b0;
      font-size:10px;
      user-select:none;
    }

    .top-archive-button,
    .top-archive-dot{
      display:none;
    }

    /* ---------- Top utility bands ---------- */

    .utility-band{
      display:none;
      position:fixed;
      top:calc(var(--chrome-height, 96px) + 28px);
      left:auto;
      right:30px;
      width:var(--side);
      z-index:26;
      background:#fff;
    }

    .utility-band.open{
      display:block;
    }

    .utility-inner{
      width:100%;
      margin:0;
      padding:0;
    }

    .utility-label{
      margin:0 0 10px;
      color:var(--blue);
      font:600 13px/1.2 Arial,Helvetica,sans-serif;
      letter-spacing:.01em;
      text-transform:none;
    }


    .search-row,
    .subscribe-row{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:0;
      width:100%;
    }

    .search-row input,
    .subscribe-row input{
      height:40px;
      min-width:0;
      border:1px solid #bfc6cc;
      background:#fff;
      color:var(--ink);
      padding:0 11px;
      outline:none;
      font:14px Arial,Helvetica,sans-serif;
    }

    .search-row input:focus,
    .subscribe-row input:focus{
      border-color:var(--blue);
      box-shadow:none;
    }

    .utility-band .action{
      height:40px;
      border:0;
      background:var(--blue);
      color:#fff;
      padding:0 14px;
      cursor:pointer;
      font:600 11px Arial,Helvetica,sans-serif;
      letter-spacing:.03em;
    }

    .utility-band .action:hover{background:var(--blue-open)}

    .utility-note,
    .subscribe-status{
      margin:8px 0 0;
      color:var(--muted);
      font:12px/1.45 "Source Sans Pro",Arial,Helvetica,sans-serif;
    }

    .subscribe-status{
      display:none;
      color:var(--blue);
    }

    /* ---------- Stable reading frame ---------- */

    .frame{
      max-width:var(--measure);
      margin:0 auto;
      padding:62px 0 92px;
      display:block;
    }

    /* Left archive lives in reserved space. It never overlaps or pushes the reading column. */
    .archive-side{
      min-height:0;
    }

    .archive-fixed-inner{
      position:fixed;
      top:calc(var(--chrome-height, 96px) + 28px);
      left:30px;
      width:var(--side);
      z-index:24;
    }

    .archive-toggle{
      appearance:none;
      border:0;
      background:none;
      padding:0 0 4px;
      color:var(--blue);
      cursor:pointer;
      font-family:Arial,Helvetica,sans-serif;
      font-size:15px;
      font-weight:600;
      border-bottom:1px solid #b9cad8;
    }

    .archive-toggle:hover{border-bottom-color:var(--blue-open)}

    .archive-panel{
      max-height:0;
      opacity:0;
      overflow:hidden;
      transition:max-height .28s ease, opacity .2s ease, margin .2s ease;
      margin-top:0;
    }

    .archive-panel.open{
      max-height:calc(100vh - var(--chrome-height, 96px) - 74px);
      opacity:1;
      overflow:auto;
      overscroll-behavior:contain;
      margin-top:18px;
      padding-right:10px;
    }

    .archive-year{
      margin:0 0 20px;
      color:#171717;
      font:700 15px/1.2 Arial,Helvetica,sans-serif;
      letter-spacing:0;
    }

    .archive-month-group{
      margin:0;
    }

    .archive-month-group + .archive-month-group{
      margin-top:22px;
    }

    .archive-month{
      margin:0;
    }

    .archive-month-toggle{
      appearance:none;
      border:0;
      background:none;
      padding:0;
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:var(--blue);
      cursor:pointer;
      font:600 11px/1.25 Arial,Helvetica,sans-serif;
      letter-spacing:.045em;
      text-transform:uppercase;
    }

    .archive-month-toggle:hover{
      color:var(--blue-open);
    }

    .archive-caret{
      display:inline-block;
      width:8px;
      font-size:9px;
      line-height:1;
      transform:rotate(0deg);
      transform-origin:center;
      transition:transform .15s ease;
    }

    .archive-month-group.collapsed .archive-caret{
      transform:rotate(-90deg);
    }

    .archive-month-group.collapsed .archive-list{
      display:none;
    }

    .archive-list{
      list-style:none;
      margin:7px 0 0;
      padding:0 0 0 14px;
      border:0;
    }

    .archive-list li{
      padding:2px 0 4px;
      border:0;
    }

    .archive-list a{
      color:#333;
      text-decoration:none;
      font-family:Arial,Helvetica,sans-serif;
      font-size:12.5px;
      font-weight:400;
      line-height:1.45;
    }

    .archive-list a:hover{
      color:var(--blue);
      text-decoration:underline;
      text-underline-offset:3px;
    }

    .mobile-archive-inline{
      display:none;
    }

    .mobile-archive-inline button{
      appearance:none;
      border:0;
      background:none;
      padding:0 0 4px;
      color:var(--blue);
      cursor:pointer;
      font-family:Arial,Helvetica,sans-serif;
      font-size:14px;
      font-weight:600;
      border-bottom:1px solid #b9cad8;
    }

    .mobile-archive-inline button:hover{
      border-bottom-color:var(--blue);
    }


    .archive-drawer-backdrop,
    .archive-drawer{
      display:none;
    }

    .archive-drawer-backdrop{
      position:fixed;
      top:var(--chrome-height, 96px);
      right:0;
      bottom:0;
      left:0;
      background:rgba(255,255,255,.05);
      z-index:42;
    }

    .archive-drawer{
      position:fixed;
      top:var(--chrome-height, 96px);
      left:0;
      bottom:0;
      width:min(300px,82vw);
      background:#fff;
      border-right:1px solid rgba(23,79,124,.34);
      border-top:1px solid rgba(23,79,124,.14);
      box-shadow:none;
      z-index:43;
      transform:translateX(-102%);
      transition:transform .22s ease;
      overflow:auto;
    }

    .archive-drawer.open{
      transform:translateX(0);
    }

    .archive-drawer-backdrop.open{
      display:block;
    }

    .archive-drawer-head{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      min-height:34px;
      padding:0 18px;
      border-bottom:0;
      background:#fff;
    }

    .archive-drawer-head button{
      appearance:none;
      border:0;
      background:none;
      color:#555;
      cursor:pointer;
      padding:2px 0 2px 10px;
      font:400 22px/1 Arial,Helvetica,sans-serif;
    }

    .archive-drawer-body{
      padding:12px 22px 30px;
    }

    /* Right side is intentionally quiet: visual counterweight, not a tool column. */
    .quiet-side{
      min-height:1px;
    }

    .reading{
      width:100%;
      min-width:0;
    }

    .search-status{
      display:none;
      margin:0 0 42px;
      padding:10px 13px;
      border-left:3px solid var(--blue);
      background:#f7f9fb;
      color:#404040;
      font:12px/1.45 Arial,Helvetica,sans-serif;
    }

    /* ---------- Essays ---------- */

    .post{
      position:relative;
      padding:0 0 86px;
      margin:0 0 78px;
      scroll-margin-top:calc(var(--chrome-height, 96px) + 28px);
    }

    .post::after{
      content:"";
      position:absolute;
      left:calc(-1 * (var(--side) + var(--gap)));
      width:calc(100% + (var(--side) + var(--gap)) * 2);
      bottom:0;
      height:1px;
      background:linear-gradient(
        90deg,
        transparent 0%,
        #e2e6ea 7%,
        #dfe4e8 50%,
        #e2e6ea 93%,
        transparent 100%
      );
    }

    .post h1,
    .post h2{
      margin:0 0 22px;
      color:#111;
      font-family:Arial,Helvetica,sans-serif;
      font-weight:600;
      letter-spacing:0;
      line-height:1.12;
    }

    .post h1{font-size:2.02rem}
    .post h2{font-size:1.84rem}

    .post p{
      margin:0 0 1.16em;
      font-size:1rem;
    }

    .article-tail{
      margin-top:30px;
    }

    .article-close{
      height:1px;
      width:100%;
      background:linear-gradient(90deg,var(--blue) 0%, var(--blue-open) 36%, #c9d5df 100%);
    }

    .article-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      min-height:20px;
      margin-top:9px;
      color:var(--blue-deep);
      font:600 11px/1.25 "Source Sans Pro",Arial,Helvetica,sans-serif;
      letter-spacing:.025em;
    }

    .article-date{
      order:1;
      margin-left:0;
      margin-right:auto;
      white-space:nowrap;
      color:var(--blue-deep);
      text-align:left;
    }

    .context-link{
      order:2;
      margin-left:auto;
      margin-right:0;
      min-width:24px;
      text-align:right;
    }

    .context-link:empty{
      display:none;
    }

    .context-link a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:24px;
      height:24px;
      color:var(--blue);
      text-decoration:none;
      border:0;
      font:700 14px/1 Arial,Helvetica,sans-serif;
    }

    .context-link a svg{
      width:17px;
      height:17px;
    }

    .context-link a svg{
      display:block;
    }

    .context-link a:hover{
      color:var(--blue-open);
      transform:translateY(-1px);
    }

    .context-link a:focus-visible{
      outline:1px solid var(--blue);
      outline-offset:3px;
    }

    .footer{
      color:#7b7b7b;
      font:10px/1.5 Arial,Helvetica,sans-serif;
      display:flex;
      justify-content:space-between;
      gap:18px;
    }

    .footer a{
      color:var(--blue);
      text-decoration:none;
    }

    .footer a:hover{
      text-decoration:underline;
      text-underline-offset:3px;
    }

    /* ---------- Responsive ---------- */

    @media (max-width:1040px){
      .frame{
        grid-template-columns:170px minmax(0,var(--measure)) 1fr;
        column-gap:30px;
      }
    }




    .compact-controls,
    .compact-menu{
      display:none;
    }

    .compact-controls button{
      appearance:none;
      border:0;
      background:none;
      color:#1b1b1b;
      cursor:pointer;
      padding:4px;
    }

    .compact-menu-button{
      width:28px;
      height:28px;
      display:inline-flex;
      flex-direction:column;
      justify-content:center;
      gap:4px;
    }

    .compact-menu-button span{
      display:block;
      width:20px;
      height:1.5px;
      background:currentColor;
    }

    .utility-close{
      display:none;
    }

    /* ---------- Wide-screen rail mode ---------- */
    @media (min-width:1181px){
      .site-chrome{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        width:300px;
        z-index:60;
        background:#fff;
        border-right:0;
      }

      .site-chrome::after{
        content:"";
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        width:6px;
        background:linear-gradient(
          180deg,
          var(--blue-open) 0%,
          #3e79a5 46%,
          #9dbbd0 100%
        );
        pointer-events:none;
      }

      .site-chrome .accent{
        display:block;
        width:calc(100% - 6px);
        height:6px;
        background:linear-gradient(
          90deg,
          var(--blue-deep) 0%,
          var(--blue-open) 72%,
          #3e79a5 100%
        );
      }

      .masthead{
        height:100%;
      }

      .masthead::after{
        display:none;
      }

      .masthead-inner{
        max-width:none;
        margin:0;
        padding:28px 34px 24px 30px;
        display:block;
      }

      .identity a{
        font-size:29px;
      }

      .identity p{
        margin-top:8px;
      }

      .top-tools{
        display:block;
        margin:0;
        font-size:12px;
      }

      .tool-group-main{
        position:absolute;
        top:475px;
        left:30px;
      }

      .tool-group-main button{
        display:block;
        width:max-content;
        margin:0 0 11px;
        padding:0 0 2px;
      }

      .tool-group-main .top-archive-button{
        display:none;
      }

      .tool-group-external{
        position:absolute;
        left:30px;
        bottom:30px;
      }

      .tool-group-external a{
        display:block;
        width:max-content;
        margin:0 0 9px;
        padding-bottom:2px;
      }

      .compact-controls{
        display:none;
      }

      /* Desktop Archive sits above Search / Subscribe in the rail hierarchy. */
      .archive-fixed-inner{
        top:190px;
        left:30px;
        width:240px;
      }

      .archive-panel.open{
        max-height:220px;
      }

      /* Search / Subscribe open under their middle-rail controls. */
      .utility-band{
        top:545px;
        left:30px;
        right:auto;
        width:240px;
        z-index:28;
        background:#fff;
      }

      .utility-inner{
        width:100%;
      }

      /* Reading lives in the remaining viewport and centers independently. */
      .frame{
        max-width:none;
        margin:0 0 0 300px;
        padding:62px 0 92px;
      }

      .reading{
        width:var(--measure);
        margin:0 auto;
      }

      .quiet-side{
        display:none;
      }

      .post::after{
        left:-9%;
        width:118%;
      }
    }

    @media (min-width:1500px){
      .archive-fixed-inner,
      .utility-band{
        left:30px;
      }
    }

    @media (max-width:1180px){
      .masthead-inner{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:start;
        column-gap:18px;
        padding:18px 20px 15px;
      }

      .identity{
        min-width:0;
      }

      .identity a{
        display:block;
        font-size:27px;
        white-space:nowrap;
      }

      .identity p{
        display:inline-flex;
        align-items:center;
        gap:4px;
        margin:7px 0 0;
        white-space:nowrap;
        font-size:11px;
        letter-spacing:.02em;
      }

      .music-staff{
        flex:0 0 auto;
        margin-left:2px;
      }

      .music-staff svg{
        width:40px;
        height:15px;
      }

      .top-tools{
        display:none;
      }

      .compact-controls{
        display:flex;
        align-items:center;
        gap:8px;
        margin-top:1px;
      }

      .compact-menu{
        display:none;
        position:fixed;
        top:var(--chrome-height, 96px);
        left:0;
        right:0;
        bottom:0;
        z-index:58;
        background:#fff;
        padding:34px max(24px, calc((100vw - 620px) / 2));
        overflow:auto;
      }

      .compact-menu.open{
        display:block;
      }

      .compact-menu-close{
        position:absolute;
        top:18px;
        right:22px;
        appearance:none;
        border:0;
        background:none;
        color:#555;
        cursor:pointer;
        font:400 25px/1 Arial,Helvetica,sans-serif;
      }

      .compact-menu-main{
        margin-top:26px;
      }

      .compact-menu-main button,
      .compact-menu-external a{
        display:block;
        width:max-content;
        appearance:none;
        border:0;
        background:none;
        padding:0;
        color:#222;
        text-decoration:none;
        cursor:pointer;
        font:600 16px/1.3 Arial,Helvetica,sans-serif;
      }

      .compact-menu-main button + button{
        margin-top:18px;
      }

      .compact-menu-external{
        margin-top:58px;
      }

      .compact-menu-external a + a{
        margin-top:13px;
      }

      .utility-band{
        left:0;
        right:0;
        top:var(--chrome-height, 96px);
        bottom:0;
        width:auto;
        padding:38px max(24px, calc((100vw - 620px) / 2));
        border:0;
        background:#fff;
        overflow:auto;
        z-index:59;
      }

      .utility-inner{
        position:relative;
        width:100%;
        max-width:620px;
        margin:0 auto;
        padding:0;
      }

      .utility-close{
        display:block;
        position:absolute;
        top:-24px;
        right:0;
        appearance:none;
        border:0;
        background:none;
        color:#555;
        cursor:pointer;
        padding:0;
        font:400 25px/1 Arial,Helvetica,sans-serif;
      }

      .frame{
        display:block;
        max-width:var(--measure);
        padding:48px 22px 72px;
      }

      .archive-side{
        display:none;
      }

      .archive-drawer{
        display:block;
        left:0;
        right:0;
        width:auto;
        border-right:0;
      }

      .archive-drawer-head{
        padding-right:22px;
      }

      .archive-drawer-body{
        max-width:620px;
        margin:0 auto;
        padding-left:24px;
        padding-right:24px;
      }

      .quiet-side{
        display:none;
      }

      .post::after{
        left:0;
        width:100%;
      }
    }

    @media (max-width:600px){
      html{font-size:16px}

      .masthead-inner{
        padding:15px 16px 13px;
        column-gap:10px;
      }

      .identity a{
        font-size:23px;
      }

      .identity p{
        margin-top:6px;
        font-size:9.5px;
        letter-spacing:.01em;
      }

      .music-staff svg{
        width:31px;
        height:12px;
      }

      .compact-controls{
        gap:5px;
      }

      .compact-menu,
      .utility-band{
        padding-left:20px;
        padding-right:20px;
      }

      .utility-inner{
        padding:0;
      }

.search-row,
      .subscribe-row{
        grid-template-columns:1fr;
        gap:7px;
      }

      .frame{
        padding:42px 20px 62px;
      }

      .post{
        padding-bottom:64px;
        margin-bottom:56px;
      }

      .post h1{font-size:1.94rem}
      .post h2{font-size:1.72rem}

      .article-meta{
        align-items:center;
      }

      .context-link{text-align:right}

      .footer{display:block}
      .footer span + span{
        display:block;
        margin-top:5px;
      }
    }
  
    /* ==========================================================
       V34 — stable two-mode architecture
       ========================================================== */

    .music-staff{display:none !important}

    .music-note{
      display:inline-block;
      margin-left:5px;
      color:var(--blue-deep);
      font-family:"Apple Symbols","Noto Music","Segoe UI Symbol",serif;
      font-size:16px;
      line-height:1;
      vertical-align:-1px;
    }

    .control-close{
      display:none;
      font:400 23px/1 Arial,Helvetica,sans-serif;
    }

    .compact-control.is-open .control-icon{display:none}
    .compact-control.is-open .control-close{display:block}

    .footer-links{display:none}

    /* ---------- WIDE MODE: fixed left rail ---------- */
    @media (min-width:1181px){
      .site-chrome{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        width:300px;
        z-index:60;
        background:#fff;
        border:0;
      }

      /* Quiet L-shaped structural boundary. */
      .site-chrome::before{
        content:"";
        position:absolute;
        top:0;
        left:0;
        right:2px;
        height:2px;
        background:linear-gradient(
          90deg,
          var(--blue-deep) 0%,
          var(--blue-open) 72%,
          rgba(31,106,165,.60) 100%
        );
        pointer-events:none;
      }

      .site-chrome::after{
        content:"";
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        width:2px;
        background:linear-gradient(
          180deg,
          var(--blue-deep) 0%,
          rgba(31,106,165,.72) 46%,
          rgba(31,106,165,.18) 100%
        );
        pointer-events:none;
      }

      .site-chrome .accent{
        display:none !important;
      }

      .masthead{
        height:100%;
        border:0;
      }

      .masthead::after{display:none !important}

      .masthead-inner{
        max-width:none;
        margin:0;
        padding:28px 30px 24px;
        display:block;
      }

      .identity a{
        font-size:29px;
      }

      .identity p{
        margin:8px 0 0;
        font-size:12px;
      }

      .music-note{
        font-size:16px;
      }

      /* Wide mode has no text control list in the upper masthead.
         Search + Subscribe are already fully open, Archive has its own section. */
      .tool-group-main{
        display:none !important;
      }

      .compact-controls{
        display:none !important;
      }

      .top-tools{
        display:block !important;
        margin:0;
      }

      .tool-group-external{
        position:absolute;
        left:30px;
        bottom:30px;
      }

      .tool-group-external a{
        display:block;
        width:max-content;
        margin:0 0 10px;
        padding:0 0 2px;
        color:#222;
        text-decoration:none;
        font:600 12px/1.3 Arial,Helvetica,sans-serif;
      }

      .tool-group-external a:hover{
        color:var(--blue);
      }

      /* Archive: upper rail. Existing expandable directory is preserved. */
      .archive-side{
        display:block !important;
        min-height:0;
      }

      .archive-fixed-inner{
        position:fixed;
        top:155px;
        left:30px;
        width:240px;
        z-index:64;
      }

      .archive-toggle{
        font-size:14px;
      }

      .archive-panel.open{
        max-height:170px;
        overflow:auto;
        overscroll-behavior:contain;
        margin-top:14px;
        padding-right:8px;
      }

      /* Search: always visible in middle rail. */
      #searchBand{
        display:block !important;
        position:fixed;
        top:370px;
        left:30px;
        right:auto;
        bottom:auto;
        width:240px;
        padding:0;
        border:0;
        background:#fff;
        z-index:63;
      }

      /* Subscribe: always visible below Search. */
      #subscribeBand{
        display:block !important;
        position:fixed;
        top:475px;
        left:30px;
        right:auto;
        bottom:auto;
        width:240px;
        padding:0;
        border:0;
        background:#fff;
        z-index:63;
      }

      .utility-inner{
        position:static;
        width:100%;
        max-width:none;
        margin:0;
        padding:0;
      }

      .utility-label{
        margin-bottom:8px;
        font-size:13px;
      }

      .search-row,
      .subscribe-row{
        grid-template-columns:minmax(0,1fr) auto;
      }

      .utility-close{display:none !important}

      /* Article region is independent of the rail. */
      .frame{
        max-width:none;
        margin:0 0 0 300px;
        padding:62px 0 92px;
        display:block;
      }

      .reading{
        width:var(--measure);
        margin:0 auto;
      }

      .quiet-side{display:none !important}

      .archive-drawer,
      .archive-drawer-backdrop{
        display:none !important;
      }

      .post::after{
        left:-9%;
        width:118%;
      }

      .footer-links{display:none}
    }

    /* ---------- COMPACT MODE: identity + three controls ---------- */
    @media (max-width:1180px){
      .site-chrome{
        position:sticky;
        top:0;
        z-index:70;
        background:#fff;
      }

      .site-chrome::before,
      .site-chrome::after{
        display:none !important;
      }

      .site-chrome .accent{
        display:block !important;
        height:4px;
        background:linear-gradient(
          90deg,
          var(--blue-deep),
          var(--blue-open) 58%,
          var(--blue)
        );
      }

      .masthead{
        position:relative;
        background:#fff;
      }

      .masthead::after{
        display:block !important;
        height:1px;
      }

      .masthead-inner{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:start;
        gap:16px;
        padding:17px 20px 15px;
      }

      .identity{
        min-width:0;
      }

      .identity a{
        display:block;
        white-space:nowrap;
        font-size:27px;
      }

      .identity p{
        display:block;
        margin:7px 0 0;
        white-space:nowrap;
        font-size:11px;
        letter-spacing:.02em;
      }

      .music-note{
        margin-left:4px;
        font-size:14px;
      }

      .top-tools{
        display:none !important;
      }

      .compact-controls{
        display:flex !important;
        align-items:center;
        gap:6px;
        margin-top:1px;
      }

      .compact-control{
        appearance:none;
        width:30px;
        height:30px;
        border:0;
        background:none;
        color:#222;
        cursor:pointer;
        padding:5px;
        display:flex;
        align-items:center;
        justify-content:center;
      }

      .control-icon-archive{
        width:18px;
        display:flex;
        flex-direction:column;
        gap:3px;
      }

      .control-icon-archive i{
        display:block;
        height:1.4px;
        background:currentColor;
      }

      .control-icon-archive i:nth-child(1){width:18px}
      .control-icon-archive i:nth-child(2){width:14px}
      .control-icon-archive i:nth-child(3){width:10px}

      /* All three tools open in the same stable reading sheet.
         Nothing pushes the article or changes scroll position. */
      .utility-band{
        display:none;
        position:fixed;
        top:var(--chrome-height, 96px);
        left:0;
        right:0;
        bottom:0;
        width:auto;
        padding:36px max(24px, calc((100vw - 620px) / 2));
        border:0;
        background:#fff;
        z-index:66;
        overflow:auto;
      }

      .utility-band.open{
        display:block;
      }

      .utility-inner{
        width:100%;
        max-width:620px;
        margin:0 auto;
        padding:0;
      }

      .utility-close{
        display:none !important;
      }

      .archive-side{
        display:none !important;
      }

      .archive-drawer-backdrop{
        display:none !important;
      }

      .archive-drawer{
        display:none;
        position:fixed;
        top:var(--chrome-height, 96px);
        left:0;
        right:0;
        bottom:0;
        width:auto;
        transform:none !important;
        background:#fff;
        border:0;
        box-shadow:none;
        z-index:66;
        overflow:auto;
      }

      .archive-drawer.open{
        display:block;
      }

      .archive-drawer-head{
        display:none !important;
      }

      .archive-drawer-body{
        max-width:620px;
        margin:0 auto;
        padding:36px 24px 50px;
      }

      .frame{
        display:block;
        max-width:var(--measure);
        margin:0 auto;
        padding:48px 22px 72px;
      }

      .reading{
        width:100%;
        margin:0;
      }

      .quiet-side{display:none !important}

      .post::after{
        left:0;
        width:100%;
      }

      .footer{
        display:flex;
        align-items:center;
        justify-content:space-between;
        flex-wrap:wrap;
        gap:10px 18px;
      }

      .footer-links{
        display:inline-flex;
        align-items:center;
        gap:8px;
      }

      .footer-links a{
        color:#666;
        text-decoration:none;
      }

      .footer-links a:hover{
        color:var(--blue);
      }

      .footer-dot{
        color:#aaa;
      }
    }

    @media (max-width:600px){
      .masthead-inner{
        padding:14px 15px 12px;
        gap:7px;
      }

      .identity a{
        font-size:22px;
      }

      .identity p{
        margin-top:5px;
        font-size:9.4px;
        letter-spacing:.005em;
      }

      .music-note{
        margin-left:2px;
        font-size:12px;
      }

      .compact-controls{
        gap:1px;
      }

      .compact-control{
        width:27px;
        height:27px;
        padding:4px;
      }

      .control-icon svg{
        width:17px;
        height:17px;
      }

      .control-icon-archive{
        width:16px;
      }

      .control-icon-archive i:nth-child(1){width:16px}
      .control-icon-archive i:nth-child(2){width:12px}
      .control-icon-archive i:nth-child(3){width:9px}

      .utility-band{
        padding:30px 20px 46px;
      }

      .archive-drawer-body{
        padding:30px 20px 46px;
      }
    }

  
    /* ==========================================================
       V35 — two-mode architecture
       ========================================================== */

    .external-divider{color:#999}
    .music-staff{display:none !important}

    .music-note{
      display:inline-block;
      margin-left:5px;
      color:var(--blue-deep);
      font-family:"Apple Symbols","Noto Music","Segoe UI Symbol",serif;
      font-size:16px;
      line-height:1;
      vertical-align:-1px;
    }

    .archive-main-view[hidden],
    .compact-hub[aria-hidden="true"]{
      display:none !important;
    }

    .archive-main-view{
      width:100%;
      min-height:60vh;
      padding:0 0 70px;
    }

    .archive-main-head{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:24px;
      margin-bottom:42px;
    }

    .archive-main-head h1{
      margin:0;
      color:#111;
      font-family:Arial,Helvetica,sans-serif;
      font-size:2.02rem;
      font-weight:600;
      line-height:1.12;
    }

    .archive-main-head button{
      appearance:none;
      border:0;
      background:none;
      padding:0;
      color:var(--blue);
      cursor:pointer;
      font:600 11px/1.2 Arial,Helvetica,sans-serif;
    }

    .archive-main-year h2{
      margin:0 0 28px;
      color:#171717;
      font:700 15px/1.2 Arial,Helvetica,sans-serif;
    }

    .archive-main-month + .archive-main-month{margin-top:34px}

    .archive-main-month h3{
      margin:0 0 10px;
      color:var(--blue);
      font:600 12px/1.2 Arial,Helvetica,sans-serif;
      letter-spacing:.035em;
      text-transform:uppercase;
    }

    .archive-main-month ul{
      list-style:none;
      margin:0;
      padding:0 0 0 14px;
    }

    .archive-main-month li + li{margin-top:8px}

    .archive-main-month a{
      color:#282828;
      text-decoration:none;
      font:400 14px/1.45 Arial,Helvetica,sans-serif;
    }

    .archive-main-month a:hover{
      color:var(--blue);
      text-decoration:underline;
      text-underline-offset:3px;
    }

    @media (min-width:1181px){
      /* Quiet, proprietary blue L-shape: structure without becoming the focal point. */
      .site-chrome::before{
        content:"";
        position:absolute;
        top:0;
        left:0;
        right:2px;
        height:2px;
        background:linear-gradient(
          90deg,
          rgba(12,43,77,.76) 0%,
          rgba(31,106,165,.50) 68%,
          rgba(31,106,165,.18) 100%
        );
        pointer-events:none;
      }

      .site-chrome::after{
        content:"";
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        width:2px;
        background:linear-gradient(
          180deg,
          rgba(12,43,77,.66) 0%,
          rgba(31,106,165,.38) 33%,
          rgba(31,106,165,.10) 76%,
          rgba(31,106,165,0) 100%
        );
        pointer-events:none;
      }

      .site-chrome .accent{display:none !important}

      .archive-fixed-inner{
        top:150px !important;
        left:30px !important;
        width:240px !important;
      }

      .archive-toggle{font-size:14px !important}

      /* Search and Subscribe are permanently open in the rail. */
      #searchBand{
        display:block !important;
        position:fixed !important;
        top:225px !important;
        left:30px !important;
        right:auto !important;
        width:240px !important;
        padding:0 !important;
        border:0 !important;
        background:#fff !important;
        z-index:63 !important;
      }

      #subscribeBand{
        display:block !important;
        position:fixed !important;
        top:350px !important;
        left:30px !important;
        right:auto !important;
        width:240px !important;
        padding:0 !important;
        border:0 !important;
        background:#fff !important;
        z-index:63 !important;
      }

      .utility-inner{
        position:static !important;
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
      }

      .utility-close{display:none !important}

      .tool-group-main{display:none !important}

      .tool-group-external{
        position:fixed !important;
        top:485px !important;
        left:30px !important;
        bottom:auto !important;
        width:240px !important;
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
      }

      .tool-group-external a{
        display:inline !important;
        width:auto !important;
        margin:0 !important;
        color:#333 !important;
        font:600 11.5px/1.3 Arial,Helvetica,sans-serif !important;
      }

      .compact-controls,
      .compact-hub{display:none !important}

      .archive-panel{display:none !important}

      .archive-toggle[aria-expanded="true"]{
        color:var(--blue-deep);
        border-bottom-color:var(--blue);
      }

      .posts-view[hidden]{display:none !important}
    }

    @media (max-width:1180px){
      .top-tools{display:none !important}

      .compact-controls{
        display:flex !important;
        align-items:center;
        margin-top:0;
      }

      .compact-menu-button{
        appearance:none;
        width:32px;
        height:32px;
        border:0;
        background:none;
        color:#1d1d1d;
        cursor:pointer;
        padding:5px;
        display:flex;
        align-items:center;
        justify-content:center;
      }

      .menu-lines{
        width:21px;
        display:flex;
        flex-direction:column;
        gap:4px;
      }

      .menu-lines i{
        display:block;
        width:21px;
        height:1.5px;
        background:currentColor;
      }

      .menu-close{
        display:none;
        font:400 26px/1 Arial,Helvetica,sans-serif;
      }

      .compact-menu-button.is-open .menu-lines{display:none}
      .compact-menu-button.is-open .menu-close{display:block}

      .compact-hub{
        position:fixed;
        top:var(--chrome-height, 96px);
        left:0;
        right:0;
        bottom:0;
        z-index:66;
        background:#fff;
        overflow:auto;
      }

      .compact-hub[aria-hidden="false"]{display:block !important}

      .compact-hub-inner{
        max-width:620px;
        margin:0 auto;
        padding:36px 24px 56px;
      }

      .compact-hub-archive-link,
      .compact-hub-back{
        appearance:none;
        border:0;
        background:none;
        padding:0;
        color:var(--blue);
        cursor:pointer;
        font:600 14px/1.2 Arial,Helvetica,sans-serif;
      }

      .compact-hub-home > .compact-hub-archive-link{margin-bottom:34px}

      .compact-hub-section + .compact-hub-section{margin-top:32px}

      .compact-hub-section h2,
      .compact-hub-archive h2{
        margin:0 0 10px;
        color:#111;
        font:600 14px/1.2 Arial,Helvetica,sans-serif;
      }

      .compact-search-row,
      .compact-subscribe-row{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        gap:0;
      }

      .compact-search-row input,
      .compact-subscribe-row input{
        min-width:0;
        height:40px;
        border:1px solid #cfd6dc;
        border-radius:0;
        padding:0 11px;
        background:#fff;
        color:#222;
        outline:none;
        font:12px Arial,Helvetica,sans-serif;
      }

      .compact-search-row button,
      .compact-subscribe-row button{
        height:40px;
        border:0;
        background:var(--blue);
        color:#fff;
        padding:0 13px;
        cursor:pointer;
        font:600 11px Arial,Helvetica,sans-serif;
      }

      .compact-subscribe-status{
        display:none;
        margin:8px 0 0;
        color:#777;
        font:11px/1.4 Arial,Helvetica,sans-serif;
      }

      .compact-hub-external{
        margin-top:58px;
        display:flex;
        align-items:center;
        gap:8px;
        color:#aaa;
        font:600 12px/1.3 Arial,Helvetica,sans-serif;
      }

      .compact-hub-external a{
        color:#333;
        text-decoration:none;
      }

      .compact-hub-back{
        margin-bottom:26px;
        font-size:11px;
      }

      .compact-hub-archive h2{
        font-size:19px;
        margin-bottom:28px;
      }

      .compact-hub .archive-month-group + .archive-month-group{margin-top:24px}

      /* Old compact sheets/drawer are retired; the hub is the only compact control surface. */
      #searchBand,
      #subscribeBand,
      .archive-drawer,
      .archive-drawer-backdrop{
        display:none !important;
      }
    }

    @media (max-width:600px){
      .compact-hub-inner{padding:30px 20px 48px}
      .compact-menu-button{width:29px;height:29px}
      .menu-lines{width:19px}
      .menu-lines i{width:19px}
    }

  
    /* ==========================================================
       V36 — descriptor + Archive scale refinement
       ========================================================== */

    /* In split-screen widths there is enough horizontal room:
       keep the descriptor beside the blog name to reduce vertical density.
       On phones it returns below the name. */
    @media (min-width:601px) and (max-width:1180px){
      .identity{
        display:flex !important;
        align-items:baseline !important;
        gap:12px !important;
        min-width:0;
      }

      .identity a{
        flex:0 0 auto;
        display:block;
      }

      .identity p{
        flex:0 0 auto;
        display:inline-flex !important;
        align-items:center;
        margin:0 !important;
        white-space:nowrap;
      }

      .music-note{
        margin-left:4px;
      }
    }

    @media (max-width:600px){
      .identity{
        display:block !important;
      }

      .identity p{
        display:block !important;
        margin-top:5px !important;
      }
    }

    /* Wide Archive should read as a directory title, not a new article headline.
       Its hierarchy now matches the compact Archive view. */
    @media (min-width:1181px){
      .archive-main-head{
        display:block !important;
        margin-bottom:28px !important;
      }

      .archive-main-head button{
        display:block;
        margin:0 0 24px;
        font-size:11px;
      }

      .archive-main-head h1{
        margin:0 !important;
        color:#111;
        font:600 19px/1.2 Arial,Helvetica,sans-serif !important;
        letter-spacing:0;
      }
    }

  
    /* ==========================================================
       V37 — Archive hierarchy refinement
       ========================================================== */

    /* Wide Archive: the active rail control already identifies the view.
       The directory therefore begins directly with the year. */
    @media (min-width:1181px){
      .archive-main-view{
        padding-top:0 !important;
      }

      .archive-main-year{
        padding-top:0;
      }

      .archive-main-year h2{
        margin-top:0 !important;
      }
    }

    /* Compact control center: Archive, Search, Subscribe are peer sections. */
    @media (max-width:1180px){
      .compact-hub-home > .compact-hub-archive-link{
        margin-bottom:0 !important;
      }

      .compact-hub-section + .compact-hub-section{
        margin-top:32px !important;
      }

      .compact-hub-archive-entry{
        margin:0;
      }

      .compact-hub-archive-link{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:space-between;
        appearance:none;
        border:0;
        background:none;
        padding:0;
        color:#111 !important;
        cursor:pointer;
        font:600 14px/1.2 Arial,Helvetica,sans-serif !important;
        text-align:left;
      }

      .archive-entry-arrow{
        color:var(--blue);
        font-size:14px;
        font-weight:400;
      }
    }

  
    /* ==========================================================
       V38 — compact hierarchy + wide Archive disclosure
       ========================================================== */

    @media (min-width:601px) and (max-width:1180px){
      .identity{
        display:block !important;
      }

      .identity a{
        display:block !important;
      }

      .identity p{
        display:block !important;
        margin:7px 0 0 !important;
        white-space:nowrap;
      }
    }

    /* Keep the Archive arrow visually attached to the label. */
    @media (max-width:1180px){
      .compact-hub-archive-link{
        width:max-content !important;
        justify-content:flex-start !important;
        gap:7px !important;
      }
    }

    /* Wide Archive months use the same disclosure logic as compact Archive. */
    @media (min-width:1181px){
      .archive-main-month-title{
        margin:0 0 10px;
      }

      .archive-main-month-toggle{
        appearance:none;
        border:0;
        background:none;
        padding:0;
        display:inline-flex;
        align-items:center;
        gap:6px;
        color:var(--blue);
        cursor:pointer;
        font:600 12px/1.2 Arial,Helvetica,sans-serif;
        letter-spacing:.035em;
        text-transform:uppercase;
      }

      .archive-main-month-toggle:hover{
        color:var(--blue-open);
      }

      .archive-main-caret{
        display:inline-block;
        width:8px;
        font-size:9px;
        line-height:1;
        transform:rotate(0deg);
        transform-origin:center;
        transition:transform .15s ease;
      }

      .archive-main-month.collapsed .archive-main-caret{
        transform:rotate(-90deg);
      }

      .archive-main-month.collapsed ul{
        display:none;
      }
    }

  
    /* ==========================================================
       V39 — interaction color logic + field copy
       ========================================================== */

    /* Navigational actions are blue; input-section titles remain black. */
    @media (min-width:1181px){
      .archive-toggle{
        color:var(--blue) !important;
      }

      .archive-toggle[aria-expanded="true"]::after{
        content:" ×";
        margin-left:5px;
        color:var(--blue);
        font-weight:400;
      }

      .tool-group-external a{
        color:var(--blue) !important;
      }

      .tool-group-external a:hover{
        color:var(--blue-open) !important;
      }

      #searchBand .utility-label,
      #subscribeBand .utility-label{
        color:#111 !important;
      }
    }

    @media (max-width:1180px){
      .compact-hub-archive-link{
        color:var(--blue) !important;
      }

      .archive-entry-arrow{
        color:var(--blue) !important;
      }

      .compact-hub-external a{
        color:var(--blue) !important;
      }

      .compact-hub-external a:hover{
        color:var(--blue-open) !important;
      }

      .compact-hub-section h2{
        color:#111 !important;
      }
    }

  
    /* ==========================================================
       V40 — final line-weight and link affordance refinements
       ========================================================== */

    @media (max-width:1180px){
      .menu-lines{
        width:19px !important;
        gap:4px !important;
      }

      .menu-lines i{
        width:19px !important;
        height:1px !important;
        background:currentColor;
      }

      .menu-close{
        position:relative;
        width:18px;
        height:18px;
        font-size:0 !important;
      }

      .menu-close::before,
      .menu-close::after{
        content:"";
        position:absolute;
        left:8.5px;
        top:1px;
        width:1px;
        height:16px;
        background:currentColor;
        transform-origin:center;
      }

      .menu-close::before{transform:rotate(45deg)}
      .menu-close::after{transform:rotate(-45deg)}
    }

    /* Wide Archive reads as a navigational action, just like the external links. */
    @media (min-width:1181px){
      .archive-toggle::after{
        content:" →";
        margin-left:5px;
        color:var(--blue);
        font-weight:400;
      }

      .archive-toggle[aria-expanded="true"]::after{
        content:" ×";
        margin-left:5px;
        color:var(--blue);
        font-weight:400;
      }
    }

  
    /* ==========================================================
       V41 — final visibility + control-weight refinement
       ========================================================== */

    @media (max-width:1180px){
      .menu-lines{
        width:21px !important;
        gap:4px !important;
      }

      .menu-lines i{
        width:21px !important;
        height:1.5px !important;
        background:currentColor;
      }

      .menu-close{
        position:static !important;
        width:auto !important;
        height:auto !important;
        display:none;
        font:400 26px/1 Arial,Helvetica,sans-serif !important;
      }

      .menu-close::before,
      .menu-close::after{
        content:none !important;
      }

      .compact-menu-button.is-open .menu-lines{display:none}
      .compact-menu-button.is-open .menu-close{display:block}
    }

  
    /* ==========================================================
       V42 — restore original menu interaction + simplify Archive
       ========================================================== */

    @media (max-width:1180px){
      .compact-menu-button{
        appearance:none !important;
        width:28px !important;
        height:28px !important;
        border:0 !important;
        background:none !important;
        color:#1d1d1d !important;
        cursor:pointer !important;
        padding:0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        flex-direction:column !important;
        gap:0 !important;
      }

      /* Original three-line menu mark. */
      .menu-lines{
        width:21px !important;
        display:flex !important;
        flex-direction:column !important;
        gap:4px !important;
      }

      .menu-lines i{
        display:block !important;
        width:21px !important;
        height:1.5px !important;
        background:currentColor !important;
      }

      /* Original typographic ×. No custom lines, no pseudo-elements. */
      .menu-close{
        position:static !important;
        width:auto !important;
        height:auto !important;
        display:none !important;
        color:currentColor !important;
        font:400 26px/1 Arial,Helvetica,sans-serif !important;
      }

      .menu-close::before,
      .menu-close::after{
        display:none !important;
        content:none !important;
      }

      .compact-menu-button.is-open .menu-lines{
        display:none !important;
      }

      .compact-menu-button.is-open .menu-close{
        display:block !important;
      }

      /* Compact Archive now starts directly with the year after the Menu return control. */
      .compact-hub-archive > .archive-year{
        margin-top:0 !important;
      }

      .compact-hub-back{
        margin-bottom:26px !important;
      }
    }

    @media (max-width:600px){
      .compact-menu-button{
        width:28px !important;
        height:28px !important;
      }

      .menu-lines{
        width:21px !important;
      }

      .menu-lines i{
        width:21px !important;
      }
    }

  
    /* ==========================================================
       V43 — exact V36 menu mark + clearer compact Archive hierarchy
       ========================================================== */

    @media (max-width:1180px){
      /* Restore V36 button geometry. */
      .compact-menu-button{
        appearance:none !important;
        width:32px !important;
        height:32px !important;
        border:0 !important;
        background:none !important;
        color:#1d1d1d !important;
        cursor:pointer !important;
        padding:5px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
      }

      .menu-lines{
        width:21px !important;
        display:flex !important;
        flex-direction:column !important;
        gap:4px !important;
      }

      .menu-lines i{
        display:block !important;
        width:21px !important;
        height:1.5px !important;
        background:currentColor !important;
      }

      /* This intentionally restores the V36 visual:
         a short horizontal rule with the typographic × beneath it. */
      .menu-close{
        position:static !important;
        display:none !important;
        width:20px !important;
        height:1.5px !important;
        background:currentColor !important;
        color:currentColor !important;
        overflow:visible !important;
        font:400 26px/1 Arial,Helvetica,sans-serif !important;
      }

      .menu-close::before,
      .menu-close::after{
        display:none !important;
        content:none !important;
      }

      .compact-menu-button.is-open .menu-lines{
        display:none !important;
      }

      .compact-menu-button.is-open .menu-close{
        display:block !important;
      }

      /* "← Menu" is navigation, not Archive content.
         Shift it slightly left and reduce its visual weight so 2026
         clearly becomes the first level of the directory itself. */
      .compact-hub-archive{
        position:relative;
      }

      .compact-hub-back{
        display:block !important;
        width:max-content !important;
        margin:0 0 30px -16px !important;
        padding:0 !important;
        color:#557995 !important;
        font:500 11px/1.2 Arial,Helvetica,sans-serif !important;
        letter-spacing:.01em;
      }

      .compact-hub-archive > .archive-year{
        margin-top:0 !important;
      }
    }

    @media (max-width:600px){
      .compact-menu-button{
        width:29px !important;
        height:29px !important;
      }

      .menu-lines{
        width:19px !important;
      }

      .menu-lines i{
        width:19px !important;
      }

      .compact-hub-back{
        margin-left:-8px !important;
      }
    }

  
    /* ==========================================================
       V44 — corrected compact interaction icon
       Closed: three-line menu
       Open: two short lines + × underneath
       ========================================================== */

    @media (max-width:1180px){
      .compact-menu-button{
        width:32px !important;
        height:32px !important;
        padding:4px !important;
      }

      .menu-lines{
        width:20px !important;
        display:flex !important;
        flex-direction:column !important;
        gap:4px !important;
      }

      .menu-lines i{
        display:block !important;
        width:20px !important;
        height:1.5px !important;
        background:currentColor !important;
      }

      .menu-close{
        position:static !important;
        width:20px !important;
        height:26px !important;
        background:none !important;
        display:none !important;
        overflow:visible !important;
        color:currentColor !important;
        font:inherit !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:2px !important;
      }

      .menu-close::before,
      .menu-close::after{
        content:none !important;
        display:none !important;
      }

      .menu-close-lines{
        width:20px;
        display:flex !important;
        flex-direction:column;
        align-items:center;
        gap:3px;
        background:none !important;
        height:auto !important;
      }

      .menu-close-lines i{
        display:block;
        width:18px;
        height:1.5px;
        background:currentColor;
      }

      .menu-close-x{
        display:block !important;
        width:auto !important;
        height:auto !important;
        margin-top:0;
        background:none !important;
        font:400 20px/.85 Arial,Helvetica,sans-serif !important;
      }

      .compact-menu-button.is-open .menu-lines{
        display:none !important;
      }

      .compact-menu-button.is-open .menu-close{
        display:flex !important;
      }
    }

    @media (max-width:600px){
      .compact-menu-button{
        width:29px !important;
        height:29px !important;
        padding:3px !important;
      }

      .menu-lines,
      .menu-close{
        width:19px !important;
      }

      .menu-lines i{
        width:19px !important;
      }

      .menu-close-lines{
        width:19px !important;
      }

      .menu-close-lines i{
        width:17px !important;
      }

      .menu-close-x{
        font-size:19px !important;
      }
    }

  
    /* ==========================================================
       V45 — definitive compact menu control
       Closed = standard 3-line hamburger
       Open   = single × in the same position
       ========================================================== */

    @media (max-width:1180px){
      .compact-menu-button{
        appearance:none !important;
        width:32px !important;
        height:32px !important;
        border:0 !important;
        background:none !important;
        color:#1d1d1d !important;
        cursor:pointer !important;
        padding:5px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
      }

      /* Reset the generic old `span` rule on the wrapper itself. */
      .compact-menu-button > .menu-lines{
        width:21px !important;
        height:auto !important;
        background:none !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:4px !important;
        overflow:visible !important;
      }

      .compact-menu-button > .menu-lines > i{
        display:block !important;
        width:21px !important;
        height:1.5px !important;
        min-height:1.5px !important;
        background:currentColor !important;
        flex:0 0 1.5px !important;
      }

      .compact-menu-button > .menu-close{
        position:static !important;
        width:auto !important;
        height:auto !important;
        min-height:0 !important;
        background:none !important;
        display:none !important;
        overflow:visible !important;
        color:currentColor !important;
        font:400 26px/1 Arial,Helvetica,sans-serif !important;
      }

      .compact-menu-button > .menu-close::before,
      .compact-menu-button > .menu-close::after{
        content:none !important;
        display:none !important;
      }

      .compact-menu-button.is-open > .menu-lines{
        display:none !important;
      }

      .compact-menu-button.is-open > .menu-close{
        display:block !important;
      }
    }

    @media (max-width:600px){
      .compact-menu-button{
        width:29px !important;
        height:29px !important;
        padding:4px !important;
      }

      .compact-menu-button > .menu-lines{
        width:19px !important;
      }

      .compact-menu-button > .menu-lines > i{
        width:19px !important;
      }

      .compact-menu-button > .menu-close{
        font-size:24px !important;
      }
    }

  
    /* ==========================================================
       V46 — align compact Archive return with Archive entry
       ========================================================== */

    @media (max-width:1180px){
      /* Archive → and ← Menu now occupy the same horizontal start point.
         No left offset, so the pointer does not need to travel sideways. */
      .compact-hub-back{
        display:block !important;
        width:max-content !important;
        margin:0 0 30px 0 !important;
        padding:0 !important;
        color:var(--blue) !important;
        font:600 14px/1.2 Arial,Helvetica,sans-serif !important;
        letter-spacing:0 !important;
      }
    }

    @media (max-width:600px){
      .compact-hub-back{
        margin-left:0 !important;
      }
    }

  
    /* ==========================================================
       V48 — distinctive two-line menu; V46 reading layout preserved
       ========================================================== */

    @media (max-width:1180px){
      .compact-menu-button{
        width:32px !important;
        height:32px !important;
        padding:5px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
      }

      .compact-menu-button > .menu-duoline-svg{
        display:block !important;
        width:21px !important;
        height:21px !important;
        flex:0 0 auto !important;
      }

      .compact-menu-button > .menu-close{
        display:none !important;
        width:auto !important;
        height:auto !important;
        min-height:0 !important;
        background:none !important;
        color:currentColor !important;
        font:400 26px/1 Arial,Helvetica,sans-serif !important;
      }

      .compact-menu-button.is-open > .menu-duoline-svg{
        display:none !important;
      }

      .compact-menu-button.is-open > .menu-close{
        display:block !important;
      }
    }

    @media (max-width:600px){
      .compact-menu-button{
        width:29px !important;
        height:29px !important;
        padding:4px !important;
      }

      .compact-menu-button > .menu-duoline-svg{
        width:19px !important;
        height:19px !important;
      }

      .compact-menu-button > .menu-close{
        font-size:24px !important;
      }
    }

  
    /* ==========================================================
       V49 — subtle wide-screen reading offset
       ========================================================== */

    @media (min-width:1181px){
      .reading{
        transform:translateX(-70px);
      }
    }

  
    /* ==========================================================
       TITLE FONT TEST — Newsreader Medium
       Only article-title typography changes.
       ========================================================== */
    .post h1,
    .post h2 {
      font-family:"Newsreader", Georgia, "Times New Roman", serif !important;
      font-weight:500 !important;
      font-size:1.95rem !important;
      line-height:1.14 !important;
      letter-spacing:-0.012em !important;
      color:#141414 !important;
      margin-bottom:21px !important;
    }

    @media (max-width:600px){
      .post h1,
      .post h2 {
        font-size:1.76rem !important;
        line-height:1.16 !important;
      }
    }

  
    /* ==========================================================
       A MOON'S BLOG — site-name test: Calligraphic — Cormorant Garamond Italic
       Article titles remain Newsreader Medium.
       ========================================================== */

    .identity a{
      font-family:"Cormorant Garamond", Garamond, Georgia, serif !important;
      font-style:italic !important;
      font-weight:600 !important;
      letter-spacing:-0.015em !important;
      text-transform:none !important;
    }

/* ==========================================================
   CMS article images — optional, original or display-cropped
   The media file itself is never altered.
   ========================================================== */
.post-media{
  margin:0;
}

.post-media--before-text{
  margin:0 0 28px;
}

.post-media--after-paragraph{
  margin:2px 0 28px;
}

.post-media--after-text{
  margin:18px 0 0;
}

.post-image{
  margin:0 0 28px;
}

.post-image:last-child{
  margin-bottom:0;
}

/* Image width is independent from crop ratio and placement. */
.post-image-width--auto.post-image--original{
  width:fit-content;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

.post-image-width--auto:not(.post-image--original),
.post-image-width--full{
  width:100%;
}

.post-image-width--medium{
  width:76%;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

.post-image-width--small{
  width:58%;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

.post-image-frame{
  width:100%;
  overflow:hidden;
  background:#f7f7f7;
}

.post-image img{
  display:block;
  width:100%;
  max-width:100%;
}

.post-image--original .post-image-frame{
  overflow:visible;
  background:transparent;
}

.post-image--original img{
  width:auto;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.post-image--square .post-image-frame{
  aspect-ratio:1 / 1;
}

.post-image--landscape_4_3 .post-image-frame{
  aspect-ratio:4 / 3;
}

.post-image--wide_16_9 .post-image-frame{
  aspect-ratio:16 / 9;
}

.post-image--square img,
.post-image--landscape_4_3 img,
.post-image--wide_16_9 img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.post-image-position--center img{object-position:center center}
.post-image-position--top img{object-position:center top}
.post-image-position--bottom img{object-position:center bottom}
.post-image-position--left img{object-position:left center}
.post-image-position--right img{object-position:right center}

.post-image figcaption{
  margin:9px 0 0;
  color:#707070;
  font:11px/1.45 Arial,Helvetica,sans-serif;
}

@media (max-width:600px){
  .post-image-width--medium{
    width:92%;
  }

  .post-image-width--small{
    width:78%;
  }

  .post-media--before-text{
    margin-bottom:24px;
  }

  .post-media--after-paragraph{
    margin-bottom:24px;
  }

  .post-media--after-text{
    margin-top:16px;
  }

  .post-image{
    margin-bottom:24px;
  }

  .post-image figcaption{
    margin-top:8px;
    font-size:10.5px;
  }
}