/* ==========================================================================
   Parts shared by the front page and the lower pages:
   site header, breadcrumbs, article lists, squares, search box, chips, footer
   ========================================================================== */

/* ---------- site header on lower pages (the front page uses the first view instead) ---------- */
.sitehead{position:relative;z-index:30;background:var(--paper);border-bottom:2px solid var(--ink)}
.sitehead__bar{display:flex;align-items:center;gap:8px;max-width:var(--page-max);height:60px;margin:0 auto;padding:0 calc(var(--m) - 8px) 0 var(--m)}
.sitehead__logo{margin-right:auto;font-size:20px;font-weight:900;line-height:1;letter-spacing:.02em;white-space:nowrap}
.sitehead__util{display:none}
.sitehead__util a,.sitehead__search{display:inline-flex;align-items:center;min-height:44px;padding:0 .7em;font-size:16px;font-weight:700;white-space:nowrap}
.sitehead__util a:hover,.sitehead__search:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em;text-decoration-color:var(--ul)}
.sitehead__search[aria-current="page"],.sitehead__util a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.35em}
@media (min-width:900px){.sitehead__util{display:flex}}
.sitehead__cats{max-width:var(--page-max);margin:0 auto;padding:0 var(--m)}
/* below 1024px the row scrolls sideways; the fade shows which side has more (data-scroll is set by the
   inline script in sitehead.html; without it only the right side fades) */
.sitehead__cats ul{--fade:linear-gradient(90deg,#000 calc(100% - 32px),transparent);display:flex;gap:0;margin-left:-.8em;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:var(--fade);mask-image:var(--fade)}
.sitehead__cats ul::after{content:"";flex:none;width:32px}
.sitehead__cats ul[data-scroll="mid"]{--fade:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
.sitehead__cats ul[data-scroll="end"]{--fade:linear-gradient(90deg,transparent,#000 32px)}
.sitehead__cats ul[data-scroll="none"]{--fade:none}
.sitehead__cats ul::-webkit-scrollbar{display:none}
.sitehead__cats a{position:relative;display:inline-flex;align-items:center;height:46px;padding:0 .8em;font-size:16px;font-weight:700;white-space:nowrap;color:var(--ink-2)}
.sitehead__cats a:hover{color:var(--ink)}
.sitehead__cats a[aria-current]{color:var(--ink)}
.sitehead__cats a[aria-current]::after{content:"";position:absolute;left:.8em;right:.8em;bottom:-2px;height:5px;background:var(--ink)}
@media (min-width:1024px){.sitehead__cats ul{--fade:none}.sitehead__cats ul::after{content:none}}

/* ---------- breadcrumbs ---------- */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 .5em;font-size:16px;line-height:1.6;color:var(--ink-2)}
.crumbs li{display:inline-flex;align-items:center;gap:.5em}
.crumbs li+li::before{content:"/";color:var(--hair)}
.crumbs a{display:inline-flex;align-items:center;min-height:40px}
@media (max-width:599px){.crumbs li:has([aria-current]){display:none}}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.3em}

/* ---------- squares: one per layer ---------- */
.cell{display:block;flex:none;width:28px;height:28px;background:var(--lc)}
a.cell{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
a.cell:hover,a.cell:focus-visible{transform:scale(1.18)}
a.cell:focus-visible{outline-offset:2px}
.cell--empty{background:none;border:2px dashed var(--ink-2)}
.cell.is-current{outline:3px solid var(--ink);outline-offset:3px}

/* ---------- article list ---------- */
.entry{border-top:1px solid var(--ink)}
.entry__link{display:grid;grid-template-columns:3.4em minmax(0,1fr);column-gap:24px;padding:28px 0 34px}
.entry__no{font-family:var(--lat);font-stretch:75%;font-weight:400;font-size:clamp(52px,5vw,64px);line-height:.8;color:var(--ul);font-feature-settings:normal;width:1em}
.entry__body{display:flex;flex-direction:column;gap:12px;min-width:0}
.entry__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;font-size:16px;line-height:1.4;color:var(--ink-2)}
.entry__meta .layer{color:var(--ink)}
.entry__meta time{font-feature-settings:"tnum" 1}
.entry__title{display:flex;flex-direction:column;gap:6px;font-weight:700;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
@supports (word-break:auto-phrase){.entry__title{word-break:auto-phrase}}
.entry__main{font-size:clamp(19px,2vw,22px);line-height:1.55;letter-spacing:0}
.entry__sub{font-size:16px;line-height:1.7;font-weight:500;color:var(--ink-2)}
.entry__ex{font-size:16px;line-height:1.8;font-weight:500;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.entry__link:hover .entry__main{text-decoration:underline;text-decoration-color:var(--ul);text-decoration-thickness:2px;text-underline-offset:.18em}
@media (min-width:1280px){
  .entries{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--gut) * 1.6)}
}
/* compact list without numbers (article footers, search) */
.entries--plain .entry__link{grid-template-columns:minmax(0,1fr);padding:22px 0 26px}
.entries--plain .entry__no{display:none}
.entries--plain .entry__main{font-size:clamp(18px,1.6vw,20px)}
mark{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--l6) 30%,transparent) 0);color:inherit}

/* ---------- search box ---------- */
.search{display:flex;gap:0;margin-top:22px;max-width:520px;border:2px solid var(--ink)}
.search input{flex:1;min-width:0;height:52px;padding:0 16px;border:0;background:var(--paper);font-size:16px;font-weight:500;color:var(--ink);-webkit-appearance:none;appearance:none;border-radius:0}
.search input::placeholder{color:var(--ink-2);opacity:1}
.search input:focus-visible{outline:3px solid var(--ul);outline-offset:-5px}
.search button{flex:none;padding:0 22px;background:var(--ink);color:var(--paper);font-size:16px;font-weight:900}
.search--big{max-width:720px}
.search--big input{height:64px;font-size:18px}

/* ---------- chips (filters, jump links) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:0 16px;border:2px solid var(--ink);font-size:16px;font-weight:700;line-height:1.3;white-space:nowrap}
.chip[aria-pressed="true"],.chip[aria-current]{background:var(--ink);color:var(--paper)}
.chip .layer::before{width:.8em;height:.8em}
.chip:hover{background:var(--paper-2)}
.chip[aria-pressed="true"]:hover,.chip[aria-current]:hover{background:var(--ink)}
.chip span.n{font-weight:500;font-feature-settings:"tnum" 1;opacity:.8}

/* ---------- small section heading used inside lower pages ---------- */
.subh{display:flex;flex-direction:column;gap:2px;margin-bottom:20px}
.subh .micro{color:var(--ink-2)}
.subh h2,.subh__t{font-size:clamp(22px,2vw,26px);font-weight:900;line-height:1.35;letter-spacing:-.01em}

/* ---------- pagination (WordPress paginate_links; not used while every archive fits on one page) ---------- */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:40px}
.pager a,.pager span{display:inline-grid;place-items:center;min-width:48px;height:48px;padding:0 12px;border:2px solid var(--ink);font-family:var(--lat);font-stretch:75%;font-size:26px;line-height:1;font-feature-settings:normal}
.pager [aria-current]{background:var(--ink);color:var(--paper)}
.pager .pager__dots{border-color:transparent}
.pager .pager__step{font-family:var(--jp);font-size:16px;font-weight:700}

/* ---------- footer ---------- */
.foot{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + 24px)}
@media (min-width:600px){.foot{padding-bottom:110px}}
.foot--sub{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.foot__strata{height:36px;background:linear-gradient(to bottom,var(--l6) 0 16.67%,var(--l5) 16.67% 33.34%,var(--l4) 33.34% 50%,var(--l3) 50% 66.67%,var(--l2) 66.67% 83.34%,var(--l1) 83.34%)}
.foot__in{display:grid;grid-template-columns:minmax(0,1fr);gap:40px var(--gut);max-width:var(--page-max);margin:0 auto;padding:48px var(--m) 32px}
@media (min-width:900px){.foot__in{grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr)}}
.foot__logo{font-size:28px;font-weight:900;line-height:1.1;letter-spacing:.02em}
.foot__meaning{margin-top:12px;max-width:26em;font-size:16px;line-height:1.8;color:var(--ink-2)}
.foot__nav h2{margin-bottom:10px}
.foot__nav a{display:inline-flex;align-items:baseline;gap:.4em;min-height:40px;padding:6px 0;font-size:16px;font-weight:700;line-height:1.5}
.foot__nav a span{font-weight:500;color:var(--ink-2)}
.foot__nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
.foot__copy{max-width:var(--page-max);margin:0 auto;padding:0 var(--m)}
.chip:disabled{border-color:var(--hair);color:var(--ink-2);cursor:default;background:none}
.chip:disabled .layer::before{opacity:.35}

/* logged in: WordPress's admin bar sits at the top (32px; 46px up to 782px; below 600px it scrolls away) */
.admin-bar{--wpadmin:32px}
@media (max-width:782px){.admin-bar{--wpadmin:46px}}
@media (min-width:601px){
  .admin-bar .readbar,.admin-bar .topbar{top:var(--wpadmin)}
  .admin-bar .toc,.admin-bar .ts-rail{top:calc(76px + var(--wpadmin))}
  .admin-bar .arch__aside{top:calc(24px + var(--wpadmin))}
}
@media (min-width:1024px){.admin-bar .sec__head{top:calc(var(--topbar-h) + 32px + var(--wpadmin))}}