/*
 * 03-nav.css  —  左ナビゲーションとモバイルメニュー
 *
 * このファイル群は読み込み順がそのままカスケードになる。
 * functions.php の ichika_style_parts() が順番を持っている。
 * 並べ替える前に tools/vr の回帰テストを走らせること。
 */

.global-nav-grid{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:12px;
}
/* v0.3.4 mobile */
@media(max-width:900px){
  .global-nav-grid{height:auto;min-height:0;margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:10px}
}
@media(max-width:480px){
  .global-nav-grid{gap:8px;margin-top:8px}
}
/* v0.3.5: mobile hamburger navigation */
.mobile-bar{display:none}
@media(max-width:900px){
  .mobile-bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      min-height:64px;
      padding:12px 16px;
      background:var(--deep-red);
      color:#fff;
    }
  .mobile-brand{
      min-width:0;
      color:#fff;
    }
  .mobile-brand-name{
      display:block;
      max-width:70vw;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-size:1.08rem;
      font-weight:800;
      letter-spacing:.01em;
    }
  .mobile-menu-toggle{
      width:44px;
      height:44px;
      padding:9px;
      border:0;
      background:transparent;
      color:#fff;
      cursor:pointer;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:5px;
    }
}
@media(max-width:900px){
  .global-nav-grid{
      display:none;
      position:absolute;
      top:100%;
      left:0;
      right:0;
      z-index:120;
      height:auto;
      min-height:0;
      margin:0;
      padding:10px;
      grid-template-columns:1fr 1fr;
      gap:8px;
      background:var(--paper);
      border-bottom:1px solid rgba(17,11,35,.12);
      box-shadow:0 10px 24px rgba(17,11,35,.12);
    }
  .global-nav-grid.is-open{
      display:grid;
    }
}
@media(max-width:900px){
  body.mobile-menu-open{
      overflow:hidden;
    }
}
@media(max-width:480px){
  .mobile-bar{
      min-height:58px;
      padding:10px 12px;
    }
  .mobile-brand-name{
      font-size:1rem;
      max-width:68vw;
    }
  .global-nav-grid{
      grid-template-columns:1fr;
    }
}
/* v0.5.3: title tile artwork */
.home-identity .home-name,
.home-identity .home-tagline{
  position:relative;
  z-index:1;
  text-shadow:0 2px 10px rgba(17,11,35,.35);
}
/* v0.5.17: asymmetric desktop navigation rhythm (45:55 / 55:45 / 45:55). */
@media (min-width:901px){
  .global-nav-grid{
      grid-template-columns:repeat(20,minmax(0,1fr));
    }
  .global-nav-grid > .nav-about,
    .global-nav-grid > .nav-notes,
    .global-nav-grid > .nav-contact{
      grid-column:span 9;
    }
}
@media (min-width:901px){
  .global-nav-grid > .nav-works,
  .global-nav-grid > .nav-trpg{
      grid-column:span 11;
    }
}
/* v0.5.18: edge-to-edge desktop left panel.
   Keep internal tile padding/borders; remove only the panel's outer padding and inter-tile gaps. */
@media (min-width:901px){
  .global-nav-grid{
      gap:0;
    }
}
/* v0.5.19: push the asymmetric navigation further on desktop.
   Left-side cells keep left-aligned labels; right-side cells anchor labels to the right edge. */
@media (min-width:901px){
  .global-nav-grid > .nav-about,
    .global-nav-grid > .nav-works,
    .global-nav-grid > .nav-contact{
      justify-content:flex-start;
      text-align:left;
    }
}
@media (min-width:901px){
  .global-nav-grid > .nav-notes,
  .global-nav-grid > .nav-trpg{
      justify-content:flex-end;
      text-align:right;
    }
}
/* The close mark should sit directly on the red header, without a button box. */
@media (max-width:900px){
  .menu-toggle[aria-expanded="true"],
  .mobile-menu-toggle[aria-expanded="true"]{
      border-color:transparent;
      box-shadow:none;
      background:transparent;
      outline:none;
    }
}
/* v0.8.4: the book-cover face is reserved for the site name.
   Navigation, headings and reading content use the platform-native Gothic
   stack defined at the top of this stylesheet for clarity. */
.home-name,
.mobile-brand-name{
  font-family:var(--font-brand);
  font-style:normal;
  font-weight:700;
  letter-spacing:.03em;
}
.global-left .home-name{
  display:block;
  font-size:clamp(2.5rem,4.45vw,5.4rem);
  line-height:1.08;
  white-space:nowrap;
}
.global-left .home-name::first-letter{
  font-size:1.25em;
  line-height:.8;
}
.global-left .home-tagline{
  display:flex;
  align-items:center;
  gap:.7em;
  font-family:var(--font-tagline);
  font-size:clamp(1rem,1.28vw,1.35rem);
  font-weight:500;
  letter-spacing:.075em;
  line-height:1.5;
  margin-top:clamp(18px,1.5vw,24px);
  color:rgba(255,247,240,.88);
  opacity:1;
  white-space:nowrap;
}
.global-left .home-tagline::before{
  content:"";
  flex:0 0 clamp(24px,2.2vw,38px);
  height:1px;
  background:currentColor;
  opacity:.65;
}
@media (min-width:901px){
  .global-left .home-name{
      font-size:clamp(2.2rem,4.1vw,4.9rem);
    }
  .global-left .home-tagline{
      font-size:clamp(.92rem,1.15vw,1.2rem);
    }
}
/* v0.9.9: site logo support.

   WordPress already offered a logo upload (add_theme_support('custom-logo')
   was declared in v0.1) but nothing ever rendered it. It now appears in the
   title panel, with a Customizer checkbox to hide the site name and tagline
   so the logo can stand on its own.

   A logo is typically a pale mark made for a dark ground, and the board
   underneath is bright at the top, so the gradient evens out when a logo is
   present: still deeper at the bottom, but no longer near-clear up top. */
.home-logo{
  display:block;
  position:relative;
  z-index:1;
  width:100%;
  min-width:0;
}
.home-logo-image{
  display:block;
  width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  /* The tile's own text-shadow does not apply to an image, so the mark gets
     its own, matched to it. Keeps a white logo off a pale wood chip. */
  filter:drop-shadow(0 2px 10px rgba(17,11,35,.35));
}
/* With the name and tagline still shown, the logo shares the tile with
     them and takes the upper half. On its own it may use the whole tile. */
@media (min-width:901px){
  .global-left .home-identity.has-logo .home-logo{
      max-height:58%;
    }
  .global-left .home-identity.is-logo-only .home-logo{
      max-height:100%;
    }
  .global-left .home-identity.has-logo .home-logo-image{
      max-height:100%;
    }
}
/* The bar is a compact strip and this kind of wide script logo is not
   identifiable once shrunk into it, so the logo sits beside the site name
   rather than replacing it. The hide setting deliberately does not apply
   here — see header.php. */
@media (max-width:900px){
  .mobile-brand.has-logo{
      display:flex;
      align-items:center;
      gap:10px;
    }
  .mobile-brand-logo{
      display:block;
      flex:0 0 auto;
      width:auto;
      height:auto;
      max-height:40px;
      max-width:34vw;
      object-fit:contain;
    }
  .mobile-brand.has-logo .mobile-brand-name{
      max-width:48vw;
    }
  .mobile-bar:has(.mobile-brand.has-logo){
      min-height:68px;
    }
}
/* v1.0.3: heading structure.

   The front page had no heading elements at all — the section labels were
   divs and the card titles were plain links — so screen readers had nothing
   to navigate by and search engines saw no structure. The labels are now h2,
   card titles are h3 there and h2 on archives (where they sit directly under
   the page h1), and the site identity is the h1 on the home screen only.

   These rules exist so that change is invisible: author class rules already
   beat the browser's default font-size and weight for headings, but margins
   were only partly specified, so the defaults would have leaked in. */
h1.home-name,
h1.home-logo{
  margin-top:0;
  margin-bottom:0;
}
@media (max-width:900px){
  #mobile-nav.global-nav-grid,
    .global-nav-grid.is-open{
      background:#000;
    }
}
.mobile-bar,
#mobile-nav.global-nav-grid,
.global-nav-grid.is-open{
  background:var(--nav-aubergine);
}
/* Remove gold/brown framing from every navigation tile and the header edge. */
.mobile-bar,
#mobile-nav.global-nav-grid{
  border-color:transparent;
}
/* Mobile menu must visually connect directly to the header. */
@media (max-width:900px){
  .mobile-bar{
      border:0;
      box-shadow:none;
    }
  #mobile-nav.global-nav-grid,
    .global-nav-grid.is-open{
      margin:0;
      padding:0;
      gap:0;
      border:0;
      box-shadow:none;
    }
}
/* ==========================================================================
   左ナビゲーション（.global-left）
   v1.1.38: 15ルールに分散していた定義を統合。!important 14個を削除。
   デスクトップ = 縦2分割グリッド / 900px以下 = 画面上部の固定バー
   ========================================================================== */
.global-left{
  position:sticky;
  top:0;
  box-sizing:border-box;
  height:100vh;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:minmax(0,2fr) minmax(0,3fr);
  gap:0;
  overflow:hidden;
  background:var(--nav-aubergine);
  border-color:transparent;
}
@media (max-width:900px){
  .global-left{
      z-index:100;
      display:block;
      width:100%;
      max-width:none;
      height:auto;
      min-height:0;
      gap:12px;
      grid-template-rows:minmax(240px,2fr) minmax(400px,3fr);
      overflow:visible;
      border-bottom:0;
    }
}
@media (max-width:560px){
  .global-left{
      grid-template-rows:minmax(210px,2fr) minmax(360px,3fr);
    }
}
/* --- デスクトップ（基準） --- */
.global-left .home-identity{
  align-items:flex-start;
  background-attachment:scroll;
  background-clip:border-box;
  background-color:#251e3f;
  background-image:url("../../assets/images/houndstooth.png");
  background-origin:padding-box;
  background-position:left top;
  background-repeat:repeat;
  background-size:144px 144px;
  border-bottom-color:#21182f;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-left-color:#21182f;
  border-left-style:solid;
  border-left-width:1px;
  border-right-color:#21182f;
  border-right-style:solid;
  border-right-width:1px;
  border-top-color:#21182f;
  border-top-style:solid;
  border-top-width:1px;
  box-shadow:inset 0 -1px 0 #3a2d4a;
  color:#fff;
  display:flex;
  flex-direction:column;
  font-size:clamp(1rem,2vw,1.35rem);
  font-weight:800;
  grid-column:1/-1;
  height:100%;
  justify-content:flex-end;
  min-height:0;
  min-width:0;
  overflow:hidden;
  padding-bottom:clamp(18px,3vw,36px);
  padding-left:clamp(18px,3vw,36px);
  padding-right:clamp(18px,3vw,36px);
  padding-top:clamp(18px,3vw,36px);
  position:relative;
  transition:none;
  width:100%;
  z-index:1;
}
.global-left .home-identity::after{
  background-attachment:scroll;
  background-clip:border-box;
  background-color:transparent;
  background-image:none;
  background-origin:padding-box;
  background-position:0% 0%;
  background-repeat:repeat;
  background-size:auto;
  bottom:0;
  content:"";
  left:0;
  pointer-events:none;
  position:absolute;
  right:0;
  top:0;
  transition:none;
  z-index:0;
}
.global-left .home-identity:hover::after{
  background-color:rgba(17,11,35,.28);
}
.global-left .home-identity:focus-visible{
  outline-color:#6d50c5;
  outline-offset:-2px;
  outline-width:2px;
}
.global-left .home-identity:focus-visible::after{
  background-color:rgba(17,11,35,.28);
}
.global-left .home-identity.has-logo{
  column-gap:clamp(10px,1.2vw,20px);
  justify-content:center;
  row-gap:clamp(10px,1.2vw,20px);
}
.global-left .home-identity.has-logo::after{
  background-color:initial;
  background-image:linear-gradient(180deg,
    rgba(17,11,35,.44) 0%,
    rgba(17,11,35,.46) 45%,
    rgba(17,11,35,.56) 78%,
    rgba(17,11,35,.64) 100%);
}
.global-left .home-identity.has-logo:hover::after{
  background-image:linear-gradient(180deg,
    rgba(17,11,35,.54) 0%,
    rgba(17,11,35,.56) 45%,
    rgba(17,11,35,.66) 78%,
    rgba(17,11,35,.74) 100%);
}
.global-left .home-identity.has-logo:focus-visible::after{
  background-image:linear-gradient(180deg,
    rgba(17,11,35,.54) 0%,
    rgba(17,11,35,.56) 45%,
    rgba(17,11,35,.66) 78%,
    rgba(17,11,35,.74) 100%);
}
.global-nav-grid .home-tile{
  align-items:flex-end;
  background-attachment:scroll;
  background-clip:border-box;
  background-color:#21182f;
  background-image:none;
  background-origin:padding-box;
  background-position:0% 0%;
  background-repeat:repeat;
  background-size:auto;
  border-bottom-color:transparent;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-left-color:transparent;
  border-left-style:solid;
  border-left-width:1px;
  border-right-color:transparent;
  border-right-style:solid;
  border-right-width:1px;
  border-top-color:transparent;
  border-top-style:solid;
  border-top-width:1px;
  color:#d9bd72;
  display:flex;
  font-size:clamp(1.05rem,1.85vw,1.45rem);
  font-weight:700;
  height:100%;
  letter-spacing:.01em;
  min-height:0;
  min-width:0;
  padding-bottom:clamp(16px,1.9vw,34px);
  padding-left:clamp(16px,1.9vw,34px);
  padding-right:clamp(16px,1.9vw,34px);
  padding-top:clamp(16px,1.9vw,34px);
  position:relative;
  transition:background-color .15s ease,
      color .15s ease,
      border-color .15s ease,
      box-shadow .15s ease;
  width:100%;
  z-index:1;
}
.global-nav-grid .home-tile:hover{
  background-color:#d9bd72;
  color:var(--nav-aubergine);
}
.global-nav-grid .home-tile:focus-visible{
  background-color:#d9bd72;
  color:var(--nav-aubergine);
  outline-color:#6d50c5;
  outline-offset:-2px;
  outline-width:2px;
}
.global-nav-grid .home-tile.is-current{
  background-color:#2a203a;
  color:#ead28f;
}
.global-nav-grid .home-tile.is-current:hover{
  background-color:#d9bd72;
  color:var(--nav-aubergine);
}
.global-nav-grid .home-tile.is-current:focus-visible{
  background-color:#d9bd72;
  box-shadow:inset 0 -4px 0 #d9bd72,
    0 0 0 3px rgba(217,189,114,.16);
  color:var(--nav-aubergine);
}
/* --- 900px以下 --- */
@media (max-width:900px){
  .global-left .home-identity{
      border-bottom-color:rgba(17,11,35,.16);
      border-left-color:rgba(17,11,35,.16);
      border-right-color:rgba(17,11,35,.16);
      border-top-color:rgba(17,11,35,.16);
      box-shadow:none;
      display:none;
      height:auto;
      min-height:180px;
      padding-bottom:24px;
      padding-left:24px;
      padding-right:24px;
      padding-top:24px;
    }
  .global-left .home-identity:focus-visible{
      outline-color:#4a3097;
      outline-offset:3px;
      outline-width:3px;
    }
  .global-left .home-identity.has-logo{
      column-gap:normal;
      justify-content:flex-end;
      row-gap:normal;
    }
  .global-nav-grid .home-tile{
      font-size:clamp(1rem,2vw,1.35rem);
      height:auto;
      min-height:64px;
      padding-bottom:16px;
      padding-left:16px;
      padding-right:16px;
      padding-top:16px;
      transition:.2s;
    }
  .global-nav-grid .home-tile:focus-visible{
      outline-color:#4a3097;
      outline-offset:3px;
      outline-width:3px;
    }
}
/* --- 560px以下 --- */
@media (max-width:560px){
  .global-left .home-identity{
      font-size:.9rem;
    }
  .global-nav-grid .home-tile{
      font-size:.9rem;
    }
}
/* --- 480px以下 --- */
@media (max-width:480px){
  .global-left .home-identity{
      min-height:150px;
      padding-bottom:20px;
      padding-left:20px;
      padding-right:20px;
      padding-top:20px;
    }
  .global-nav-grid .home-tile{
      font-size:.88rem;
      min-height:56px;
    }
}
/* Desktop left navigation */
@media (min-width:901px){
  #mobile-nav.global-nav-grid{
      position:relative;
      display:flex;
      flex-direction:column;
      width:100%;
      height:100%;
      min-height:0;
      margin:0;
      padding-bottom:clamp(54px,5.5vw,72px);
      gap:0;
      background:var(--nav-aubergine);
    }
  #mobile-nav.global-nav-grid > .home-tile{
      flex:1 1 0;
      width:100%;
      height:auto;
      min-height:0;
      align-items:center;
      justify-content:center;
      padding:clamp(14px,1.45vw,24px) clamp(18px,1.9vw,34px);
      border:0;
      border-bottom:1px solid rgba(217,189,114,.13);
      text-align:center;
    }
  #mobile-nav.global-nav-grid > .home-tile:hover{
      background-color:#21182f;
      color:#fff3c4;
    }
  #mobile-nav.global-nav-grid > .home-tile.is-current{
      background-color:#2a203a;
    }
  #mobile-nav.global-nav-grid > .home-tile.is-current:hover{
      background-color:#2a203a;
      color:#fff3c4;
    }
  #mobile-nav.global-nav-grid > .nav-social{
      position:absolute;
      right:clamp(14px,1.45vw,24px);
      bottom:clamp(12px,1.25vw,20px);
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:12px;
      z-index:4;
    }
  .nav-social-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:32px;
      height:32px;
      padding:0;
      color:#d9bd72;
      font-size:1.15rem;
      line-height:1;
      text-decoration:none;
      transition:color .15s ease,transform .15s ease;
    }
  .nav-social-link:hover{
      color:#fff3c4;
      transform:translateY(-1px);
    }
  .nav-social-link:focus-visible{
      color:#fff3c4;
      outline:2px solid #d9bd72;
      outline-offset:3px;
      border-radius:4px;
    }
}
@media (max-width:900px){
  #mobile-nav.global-nav-grid > .nav-social{
      grid-column:1 / -1;
      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:14px;
      padding:10px 6px 4px;
    }
  .nav-social-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px;
      height:44px;
      color:#d9bd72;
      font-size:1.2rem;
      text-decoration:none;
    }
  .nav-social-link:hover,
    .nav-social-link:focus-visible{
      color:#fff3c4;
    }
  .nav-social-link:focus-visible{
      outline:2px solid #d9bd72;
      outline-offset:2px;
      border-radius:4px;
    }
}
/* The stacked desktop menu is now visually continuous: no separator rules. */
@media (min-width:901px){
  #mobile-nav.global-nav-grid > .home-tile{
      border-bottom:0;
    }
}
/* Give the social dock a little breathing room from the right edge. */
@media (min-width:901px){
  #mobile-nav.global-nav-grid > .nav-social{
      right:clamp(20px,1.8vw,32px);
    }
}
/* On mobile, the opened menu itself only occupies the actual menu surface.
   It must not leave an invisible full-screen layer over the page, so controls
   below the menu remain clickable. */
@media (max-width:900px){
  #mobile-nav.global-nav-grid,
    #mobile-nav.global-nav-grid.is-open,
    .global-nav-grid,
    .global-nav-grid.is-open{
      height:auto;
      min-height:0;
      max-height:none;
    }
}
/* Any decorative/pseudo overlay attached to the mobile navigation must not
     intercept pointer input intended for the page underneath. */
@media (max-width:900px){
  #mobile-nav.global-nav-grid::before,
    #mobile-nav.global-nav-grid::after{
      pointer-events:none;
    }
  #mobile-nav.global-nav-grid > .nav-social{
      padding-right:14px;
    }
}
/* ==========================================================================
   v1.1.72 — current-page color + hover ornaments
   ========================================================================== */
#mobile-nav.global-nav-grid > .home-tile{
  position:relative;
  font-family:"Almendra", Georgia, serif;
  font-weight:700;
  letter-spacing:.055em;
}
/* Current page: keep one line and distinguish the label by color. */
#mobile-nav.global-nav-grid > .home-tile::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(50% - 1.02em);
  width:min(58%, 132px);
  height:1px;
  background:currentColor;
  opacity:.82;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  pointer-events:none;
}
#mobile-nav.global-nav-grid > .home-tile.is-current{
  color:#fff3c4;
}
#mobile-nav.global-nav-grid > .home-tile.is-current::before{
  transform:translateX(-50%) scaleX(1);
}
/* Hover/focus ornament: two small dots appear on both sides of the label.
   No image asset is required. */
#mobile-nav.global-nav-grid > .home-tile::after{
  content:"●";
  position:absolute;
  left:50%;
  top:50%;
  width:calc(100% - clamp(54px,5vw,92px));
  color:currentColor;
  font-family:Georgia, serif;
  font-size:.38em;
  line-height:1;
  letter-spacing:0;
  text-align:left;
  text-shadow:calc(100% - .38em) 0 0 currentColor;
  opacity:0;
  transform:translate(-50%,-50%) scale(.75);
  transition:opacity .16s ease,transform .16s ease;
  pointer-events:none;
}
/* Use two generated circular ornaments via radial backgrounds; this replaces
   text-shadow in browsers where percentage shadow offsets are unsupported. */
#mobile-nav.global-nav-grid > .home-tile::after{
  content:"";
  width:min(78%, 190px);
  height:7px;
  background:
    radial-gradient(circle at left center,currentColor 0 2.5px,transparent 2.8px),
    radial-gradient(circle at right center,currentColor 0 2.5px,transparent 2.8px);
  text-shadow:none;
}
#mobile-nav.global-nav-grid > .home-tile:hover::after,
#mobile-nav.global-nav-grid > .home-tile:focus-visible::after{
  opacity:.9;
  transform:translate(-50%,-50%) scale(1);
}
@media (min-width:901px){
  #mobile-nav.global-nav-grid > .home-tile.is-current,
    #mobile-nav.global-nav-grid > .home-tile.is-current:hover{
      background-color:#21182f;
    }
}
@media (prefers-reduced-motion:reduce){
  #mobile-nav.global-nav-grid > .home-tile::after{
      transition:none;
    }
}
/* No underline for any navigation state. */
#mobile-nav.global-nav-grid > .home-tile::before,
#mobile-nav.global-nav-grid > .home-tile.is-current::before{
  content:none;
}
/* Ordinary menu labels use the theme's original color.
   Only the page currently being viewed changes to a white-family color. */
#mobile-nav.global-nav-grid > .home-tile.is-current{
  color:#fffaf0;
}
/* Apply the same current-page color treatment on desktop and responsive nav. */
#mobile-nav.global-nav-grid > .home-tile.is-current{
  color:#fffaf0;
}
/* Keep hover/focus ornaments available in responsive navigation too. */
@media (max-width:900px){
  #mobile-nav.global-nav-grid > .home-tile{
      position:relative;
    }
  #mobile-nav.global-nav-grid > .home-tile::after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width:min(78%, 190px);
      height:7px;
      background:
        radial-gradient(circle at left center,currentColor 0 2.5px,transparent 2.8px),
        radial-gradient(circle at right center,currentColor 0 2.5px,transparent 2.8px);
      opacity:0;
      transform:translate(-50%,-50%) scale(.75);
      transition:opacity .16s ease,transform .16s ease;
      pointer-events:none;
    }
  #mobile-nav.global-nav-grid > .home-tile:hover::after,
    #mobile-nav.global-nav-grid > .home-tile:focus-visible::after{
      opacity:.9;
      transform:translate(-50%,-50%) scale(1);
    }
}
/* Center the social icon row on both desktop and responsive layouts. */
@media (min-width:901px){
  #mobile-nav.global-nav-grid > .nav-social{
      left:50%;
      right:auto;
      transform:translateX(-50%);
      justify-content:center;
    }
}
@media (max-width:900px){
  #mobile-nav.global-nav-grid > .nav-social{
      justify-content:center;
      padding-left:0;
      padding-right:0;
    }
}
@media (min-width:901px){
  #mobile-nav.global-nav-grid{
      padding-bottom:0;
    }
  #mobile-nav.global-nav-grid > .home-tile{
      flex:0 0 auto;
      min-height:clamp(50px,5.8vh,66px);
      padding:10px clamp(12px,1.15vw,22px);
      font-size:.94em;
      letter-spacing:.02em;
    }
}
/* SNS sits directly after CONTACT in normal document flow. */
@media (min-width:901px){
  #mobile-nav.global-nav-grid > .nav-social{
      position:static;
      left:auto;
      right:auto;
      top:auto;
      bottom:auto;
      transform:none;
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      margin:0;
      padding:11px 12px 14px;
    }
  #mobile-nav.global-nav-grid > .nav-social .nav-social-name{
      display:none;
    }
}
/* Responsive menu:
   closed = keep the theme's original hidden state.
   open = two columns: page links left, SNS list right. */
@media (max-width:900px){
  #mobile-nav.global-nav-grid.is-open{
      display:grid;
      grid-template-columns:minmax(0,56%) minmax(0,44%);
      grid-auto-rows:minmax(48px,auto);
      align-items:start;
      gap:0;
      width:100%;
      height:auto;
      min-height:0;
      max-height:none;
    }
  #mobile-nav.global-nav-grid.is-open > .home-tile{
      grid-column:1;
      width:100%;
      min-height:48px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:9px 10px;
      border:0;
      font-size:.92em;
      letter-spacing:.015em;
    }
  #mobile-nav.global-nav-grid.is-open > .home-tile:nth-of-type(1){grid-row:1}
  #mobile-nav.global-nav-grid.is-open > .home-tile:nth-of-type(2){grid-row:2}
  #mobile-nav.global-nav-grid.is-open > .home-tile:nth-of-type(3){grid-row:3}
  #mobile-nav.global-nav-grid.is-open > .home-tile:nth-of-type(4){grid-row:4}
  #mobile-nav.global-nav-grid.is-open > .home-tile:nth-of-type(5){grid-row:5}
  #mobile-nav.global-nav-grid.is-open > .nav-social{
      grid-column:2;
      grid-row:1 / span 5;
      align-self:start;
      justify-self:stretch;
      display:flex;
      flex-direction:column;
      flex-wrap:nowrap;
      align-items:center;
      justify-content:flex-start;
      gap:3px;
      margin:0;
      padding:8px 8px 12px;
    }
  #mobile-nav.global-nav-grid.is-open > .nav-social .nav-social-link{
      width:min(100%,128px);
      min-width:0;
      height:38px;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:8px;
      padding:0 8px;
      font-size:1rem;
      text-align:left;
    }
  #mobile-nav.global-nav-grid.is-open > .nav-social .nav-social-link .nav-social-icon{
      width:20px;
      flex:0 0 20px;
      text-align:center;
    }
  #mobile-nav.global-nav-grid.is-open > .nav-social .nav-social-name{
      display:inline;
      font-family:var(--font-body);
      font-size:.82rem;
      line-height:1;
      letter-spacing:.01em;
      white-space:nowrap;
    }
}
/* ==========================================================================
   v1.1.78 — wider responsive page-menu column + larger labels
   ========================================================================== */
@media (max-width:900px){
  #mobile-nav.global-nav-grid.is-open{
      grid-template-columns:minmax(0,64%) minmax(0,36%);
    }
  #mobile-nav.global-nav-grid.is-open > .home-tile{
      min-height:54px;
      padding:10px 14px;
      font-size:1.04em;
      letter-spacing:.02em;
    }
  #mobile-nav.global-nav-grid.is-open > .nav-social{
      padding:9px 6px 12px;
    }
  #mobile-nav.global-nav-grid.is-open > .nav-social .nav-social-link{
      width:min(100%,116px);
      height:40px;
      gap:7px;
      padding:0 5px;
    }
  #mobile-nav.global-nav-grid.is-open > .nav-social .nav-social-name{
      font-size:.88rem;
    }
}
/* Desktop:
   - reserve roughly the bottom 20% as empty space
   - split the remaining nav area into six equal rows:
     five page links + one SNS row
   - enlarge page-label typography
   - keep SNS icon-only and slightly smaller than menu text */
@media (min-width:901px){
  #mobile-nav.global-nav-grid{
      display:grid;
      grid-template-columns:1fr;
      grid-template-rows:repeat(6,minmax(0,1fr)) minmax(20%,20%);
      align-items:stretch;
      gap:0;
      min-height:0;
      padding:0;
    }
  #mobile-nav.global-nav-grid > .home-tile{
      width:100%;
      min-height:0;
      height:auto;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0 14px;
      font-size:clamp(1.12rem,1.35vw,1.42rem);
      line-height:1.15;
      letter-spacing:.025em;
    }
  #mobile-nav.global-nav-grid > .home-tile:nth-of-type(1){grid-row:1}
  #mobile-nav.global-nav-grid > .home-tile:nth-of-type(2){grid-row:2}
  #mobile-nav.global-nav-grid > .home-tile:nth-of-type(3){grid-row:3}
  #mobile-nav.global-nav-grid > .home-tile:nth-of-type(4){grid-row:4}
  #mobile-nav.global-nav-grid > .home-tile:nth-of-type(5){grid-row:5}
  #mobile-nav.global-nav-grid > .nav-social{
      grid-row:6;
      position:static;
      width:100%;
      min-height:0;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      margin:0;
      padding:0 12px;
      transform:none;
    }
  #mobile-nav.global-nav-grid > .nav-social .nav-social-link{
      width:1.05em;
      height:1.05em;
      padding:0;
      font-size:clamp(.98rem,1.08vw,1.16rem);
      line-height:1;
    }
  #mobile-nav.global-nav-grid > .nav-social .nav-social-name{
      display:none;
    }
}
/* Responsive SNS list:
   keep the whole account list centered as a block, but align its contents left. */
@media (max-width:900px){
  #mobile-nav.global-nav-grid.is-open > .nav-social{
      align-items:center;
    }
  #mobile-nav.global-nav-grid.is-open > .nav-social .nav-social-link{
      width:min(100%,128px);
      justify-content:flex-start;
      text-align:left;
    }
  #mobile-nav.global-nav-grid.is-open > .nav-social .nav-social-name{
      text-align:left;
    }
}
/* ==========================================================================
   v1.1.81 — larger desktop SNS + further-left responsive SNS
   ========================================================================== */
@media (min-width:901px){
  #mobile-nav.global-nav-grid > .nav-social .nav-social-link{
      width:1.18em;
      height:1.18em;
      font-size:clamp(1.12rem,1.22vw,1.30rem);
    }
}
@media (max-width:900px){
  #mobile-nav.global-nav-grid.is-open > .nav-social{
      align-items:flex-start;
      padding-left:2px;
      padding-right:6px;
    }
  #mobile-nav.global-nav-grid.is-open > .nav-social .nav-social-link{
      width:min(100%,128px);
      margin-left:0;
      padding-left:2px;
    }
}
/* Responsive: give the SNS column a little more room again and restore
   a modest inset on its left edge. */
@media (max-width:900px){
  #mobile-nav.global-nav-grid.is-open{
      grid-template-columns:minmax(0,60%) minmax(0,40%);
    }
  #mobile-nav.global-nav-grid.is-open > .nav-social{
      align-items:flex-start;
      padding-left:10px;
      padding-right:6px;
    }
  #mobile-nav.global-nav-grid.is-open > .nav-social .nav-social-link{
      margin-left:0;
      padding-left:4px;
    }
}
/* ==========================================================================
   v1.1.94 — desktop navigation labels: 42px equivalent
   ========================================================================== */
@media (min-width:901px){
  #mobile-nav.global-nav-grid > .home-tile{
      font-size:2.625rem;
    }
  #mobile-nav.global-nav-grid > .home-tile::after{
      width:20rem;
      max-width:calc(100% - 1.5rem);
    }
}
/* ==========================================================================
   v1.2.1 — desktop SNS icons: 42px, matching the navigation labels

   v1.1.99 grew these with the rail, up to 250px. At a normal window that put
   them at 103-150px, which read as five billboards under five words -- the
   marks ended up louder than the navigation they sit beneath. 42px is the same
   size as the labels above them (2.625rem), so the row reads as one more line
   of the menu rather than as a separate block.

   The size is carried on the box, not on font-size: a percentage in font-size
   resolves against the parent's font size rather than its width, so keeping the
   box authoritative leaves the door open for a responsive rule later without
   that trap. The mark fills the box.

   42 x 5 + 24 x 4 = 306px, inside the 396px rail at the 901px breakpoint, so
   the row never wraps or overflows.
   ========================================================================== */
@media (min-width:901px){
  #mobile-nav.global-nav-grid > .nav-social{
      gap:1.5rem;
      /* The nav is a fixed six-row grid with no row gap, and this row centres
         its icons inside an 80px track -- so neither margin nor padding moves
         them by the amount asked for (a centred box absorbs half of either).
         A translate moves the row exactly 12px and leaves the track alone; the
         empty 120px row underneath has the space to take it. */
      transform:translateY(12px);
    }
  #mobile-nav.global-nav-grid > .nav-social .nav-social-link{
      flex:0 0 auto;
      width:42px;
      height:42px;
    }
  #mobile-nav.global-nav-grid > .nav-social .nav-social-icon{
      width:100%;
      height:100%;
    }
}
/* ============================================================
   v1.1.87 — inline social marks
   Replaces the Font Awesome glyphs. Sizing is unchanged: the mark
   is 1em square and every existing rule drives it through the
   font-size already set on .nav-social-link, exactly as the icon
   font did. fill:currentColor keeps the hover and focus colours
   working with no extra rules.
   ============================================================ */
.nav-social-icon{display:block;width:1em;height:1em;fill:currentColor}