/* Shared object-tab navigation for the standalone subpages.
   Header markup (static, outside <x-dc>): .site-index holds .site-home, four .site-tab--*, then an empty
   .site-rule and an empty .site-tabmark. The rule is one solid 1.5px line; the tabmark is the current tab's
   folder outline (inked by transitions.js, a CSS border until then) and carries the rule's gap with it, so a
   tab→tab view transition slides the gap along with the outline. transitions.css names these parts. */
.site-shell-header{width:min(1180px,100%);container-type:inline-size}
.site-header-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
/* The identity (design/2026-09-identity, candidate B, the seals): one link home, drawn, no font glyphs. Its name is
   visually hidden text with lang spans; the drawing is an aria-hidden SVG: the written inscription (.site-identity-tag)
   beside a white-text seal (弗雷 down its right column, 德 the left) and a red-text seal (FRED YANG). The mark is the
   pen's target (Tier.wire in site.js and lib/home/desk.js): its line box ends at the seals' bottom edge, so the hover
   line hangs from there. Phones scale the same drawing. Its markup is copied into every static header, the building/
   pages and the vt-harness, and Reading's compact header carries the white-text seal alone (.brand-mark, a named
   image, not a link): edit them all. */
.site-identity{position:relative;z-index:1;display:inline-block;padding:4px 10px 8px 2px;color:var(--ink,#33302B);line-height:0}
.site-identity-name{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.site-identity-mark{display:block;line-height:0;font-size:24px}
.site-identity-art{display:inline;vertical-align:baseline;width:168px;height:68px;overflow:visible}
.site-identity-tag path{fill:none;stroke:var(--ink,#33302B);stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.site-identity-seal .seal-body{fill:var(--mark,#D9695A)}
.site-identity-seal .seal-cut{fill:none;stroke:var(--paper,#FBF6EC);stroke-linecap:square;stroke-linejoin:miter}
.site-identity-seal .seal-line{fill:none;stroke:var(--mark,#D9695A);stroke-linecap:square;stroke-linejoin:miter}
.site-identity-ticks path{fill:none;stroke:var(--ink,#33302B);stroke-width:1.6;stroke-linecap:round}
.site-header-status{padding-top:10px;color:var(--pencil);font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.04em}

/* Shared bilingual masthead for the four home destinations. */
.subpage-intro{position:relative;display:grid;grid-template-columns:minmax(230px,.72fr) minmax(300px,1.28fr);align-items:end;gap:clamp(34px,7vw,92px);width:100%}
.subpage-intro--solo{grid-template-columns:1fr}
.subpage-title-group{min-width:0}
.subpage-title-kicker{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.subpage-title-number{color:var(--pencil);font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;line-height:1;letter-spacing:.08em}
.subpage-title-en{color:var(--soft);font-family:"Fraunces",serif;font-size:clamp(17px,1.8vw,21px);font-weight:500;line-height:1;letter-spacing:.01em}
.subpage-title{font-size:clamp(50px,6vw,72px);line-height:.96;white-space:nowrap}
.subpage-title-mark{color:var(--mark)}
.subpage-note{justify-self:end;width:min(100%,620px);color:var(--soft);font-size:clamp(19px,2.2vw,24px);line-height:1.38}

/* The labels stand 16px above the nav's bottom so a hover underline (baseline + 3px) keeps ≥10px of air over
   the rule (scripts/verify/pen-spacing.mjs); the objects above them rose 7px (6px on phones), and so did the nav. */
.site-index{--site-tab-width:90px;--site-active-width:0px;--site-active-right:0px;--site-tab-h:81px;height:93px;display:flex;align-items:flex-end;gap:0;padding-right:10px;position:relative;color:var(--ink)}
.site-index:has(.site-tab--writing[aria-current="page"]){--site-active-width:var(--site-tab-width);--site-active-right:calc(10px + var(--site-tab-width) + var(--site-tab-width) + var(--site-tab-width))}
.site-index:has(.site-tab--building[aria-current="page"]){--site-active-width:var(--site-tab-width);--site-active-right:calc(10px + var(--site-tab-width) + var(--site-tab-width))}
.site-index:has(.site-tab--shooting[aria-current="page"]){--site-active-width:var(--site-tab-width);--site-active-right:calc(10px + var(--site-tab-width))}
.site-index:has(.site-tab--about[aria-current="page"]){--site-active-width:var(--site-tab-width);--site-active-right:10px}
.site-index a:hover{color:var(--ink)}
.site-rule{position:absolute;z-index:0;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);pointer-events:none}
.site-tabmark{position:absolute;z-index:3;right:var(--site-active-right);bottom:0;box-sizing:border-box;width:var(--site-active-width);height:var(--site-tab-h);border:1px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;pointer-events:none}
.site-tabmark::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--site-nav-paper,var(--paper))}
.site-tabmark.is-inked{border-color:transparent}
.site-tabmark svg{position:absolute;left:-1px;top:-1px;overflow:visible}
.site-tabmark path{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.site-index:not(:has(.site-tab[aria-current="page"])) .site-tabmark{display:none}
.site-home,.site-tab{position:relative;z-index:1;display:block;flex:none}
.site-home{width:142px;height:60px;margin-right:auto;margin-bottom:-1.5px}
.site-home-object{position:absolute;left:0;bottom:0;width:68px;height:60px;object-fit:contain;object-position:center bottom;pointer-events:none;transition:transform .14s ease}
.site-home:hover .site-home-object,.site-home:focus-visible .site-home-object{transform:translateX(3px)}
.site-home .site-nav-label{left:78px;right:auto;bottom:17.5px;width:auto;text-align:left}

.site-tab{--label-bottom:16px;--label-height:12px;--object-gap:1px;box-sizing:border-box;width:var(--site-tab-width);height:69px;margin-bottom:0;border:0;border-radius:0;background:transparent;overflow:visible}
.site-tab:hover{background:transparent}
.site-home:focus-visible,.site-tab:focus-visible{outline:1.5px dashed var(--ink);outline-offset:-4px}
.site-tab[aria-current="page"]{height:var(--site-tab-h);z-index:3}
.site-nav-label{position:absolute;left:5px;right:5px;bottom:var(--label-bottom,16px);height:var(--label-height,12px);text-align:center;color:var(--soft);font-family:"IBM Plex Mono","Noto Sans SC",monospace;font-size:10.5px;font-weight:500;line-height:var(--label-height,12px);letter-spacing:.01em;white-space:nowrap;transition:color .14s ease}
.site-index .site-nav-label .en{display:inline!important}
.site-home:hover .site-nav-label,.site-home:focus-visible .site-nav-label,.site-tab:hover .site-nav-label,.site-tab:focus-visible .site-nav-label,.site-tab[aria-current="page"] .site-nav-label{color:var(--ink)}

.site-nav-object{--nav-lift:0px;--nav-tilt:0deg;--nav-scale:1;--nav-art-x:0px;--nav-art-y:0px;position:absolute;left:50%;bottom:calc(var(--label-bottom) + var(--label-height) + var(--object-gap));display:block;width:60px;height:60px;pointer-events:none;transform:translateX(-50%) translateY(var(--nav-lift)) rotate(var(--nav-tilt)) scale(var(--nav-scale));transform-origin:bottom center;background-repeat:no-repeat;background-position:calc(50% + var(--nav-art-x)) calc(50% + var(--nav-art-y));background-size:100% 100%;transition:transform .16s cubic-bezier(.2,.7,.2,1)}
.site-nav-book{--nav-art-x:-2px;background-image:url("../../assets/nav-book-light.png");background-image:image-set(url("../../assets/nav-book-light.png") 1x,url("../../assets/nav-book-light@2x.png") 2x)}
.site-nav-laptop{--nav-art-x:3px;--nav-art-y:-2px;background-image:url("../../assets/nav-laptop-light.png");background-image:image-set(url("../../assets/nav-laptop-light.png") 1x,url("../../assets/nav-laptop-light@2x.png") 2x)}
.site-nav-camera{--nav-art-x:1px;--nav-art-y:9px;background-image:url("../../assets/nav-camera-light.png");background-image:image-set(url("../../assets/nav-camera-light.png") 1x,url("../../assets/nav-camera-light@2x.png") 2x)}
.site-nav-frame{--nav-art-x:2px;--nav-art-y:8px;background-image:url("../../assets/nav-frame-light.png");background-image:image-set(url("../../assets/nav-frame-light.png") 1x,url("../../assets/nav-frame-light@2x.png") 2x)}

html.dark .site-home-object{filter:invert(1) sepia(.18) saturate(.55) brightness(1.08)}
html.dark .site-nav-book{background-image:url("../../assets/nav-book-dark.png");background-image:image-set(url("../../assets/nav-book-dark.png") 1x,url("../../assets/nav-book-dark@2x.png") 2x)}
html.dark .site-nav-laptop{background-image:url("../../assets/nav-laptop-dark.png");background-image:image-set(url("../../assets/nav-laptop-dark.png") 1x,url("../../assets/nav-laptop-dark@2x.png") 2x)}
html.dark .site-nav-camera{background-image:url("../../assets/nav-camera-dark.png");background-image:image-set(url("../../assets/nav-camera-dark.png") 1x,url("../../assets/nav-camera-dark@2x.png") 2x)}
html.dark .site-nav-frame{background-image:url("../../assets/nav-frame-dark.png");background-image:image-set(url("../../assets/nav-frame-dark.png") 1x,url("../../assets/nav-frame-dark@2x.png") 2x)}
@media (hover:hover){
  .site-tab--writing:hover .site-nav-book,.site-tab--writing:focus-visible .site-nav-book{--nav-lift:-2px;--nav-tilt:-3deg}
  .site-tab--building:hover .site-nav-laptop,.site-tab--building:focus-visible .site-nav-laptop{--nav-lift:-2px}
  .site-tab--shooting:hover .site-nav-camera,.site-tab--shooting:focus-visible .site-nav-camera{--nav-lift:-1px;--nav-tilt:-2deg;--nav-scale:1.04}
  .site-tab--about:hover .site-nav-frame,.site-tab--about:focus-visible .site-nav-frame{--nav-lift:-1px;--nav-tilt:2deg}
}

.site-index--reading{position:relative;z-index:4;margin-top:4px}
/* Reading's nav sits on the cover art, where a paper strip would show; its tab never moves, so the gap is a mask */
.site-index--reading .site-tabmark::before{display:none}
.site-index--reading .site-rule{-webkit-mask-image:linear-gradient(to right,black 0,black calc(100% - var(--site-active-right) - var(--site-active-width)),transparent calc(100% - var(--site-active-right) - var(--site-active-width)),transparent calc(100% - var(--site-active-right)),black calc(100% - var(--site-active-right)),black 100%);mask-image:linear-gradient(to right,black 0,black calc(100% - var(--site-active-right) - var(--site-active-width)),transparent calc(100% - var(--site-active-right) - var(--site-active-width)),transparent calc(100% - var(--site-active-right)),black calc(100% - var(--site-active-right)),black 100%)}

@media (max-width:640px){
  .site-identity{padding-right:8px}
  .site-identity-art{width:147px;height:59.5px}
  .site-header-status{padding-top:8px;font-size:10.5px}
  .subpage-intro{grid-template-columns:1fr;gap:16px}
  .subpage-title-kicker{gap:8px;margin-bottom:6px}
  .subpage-title{font-size:clamp(44px,14vw,56px)}
  .subpage-note{justify-self:stretch;width:100%;font-size:clamp(18px,5.6vw,22px)}
  /* phone tabs share what the header has left after the home link (74 px: scaled sticker + "home"), 48–54 px each */
  .site-index{--site-tab-mobile-width:clamp(48px,(100cqw - 80px) / 4,54px);--site-tab-h:66px;height:72px;display:grid;grid-template-columns:64px minmax(0,1fr) repeat(4,var(--site-tab-mobile-width));gap:0;padding-right:6px}
  .site-index:has(.site-tab--writing[aria-current="page"]){--site-active-width:var(--site-tab-mobile-width);--site-active-right:calc(6px + var(--site-tab-mobile-width) + var(--site-tab-mobile-width) + var(--site-tab-mobile-width))}
  .site-index:has(.site-tab--building[aria-current="page"]){--site-active-width:var(--site-tab-mobile-width);--site-active-right:calc(6px + var(--site-tab-mobile-width) + var(--site-tab-mobile-width))}
  .site-index:has(.site-tab--shooting[aria-current="page"]){--site-active-width:var(--site-tab-mobile-width);--site-active-right:calc(6px + var(--site-tab-mobile-width))}
  .site-index:has(.site-tab--about[aria-current="page"]){--site-active-width:var(--site-tab-mobile-width);--site-active-right:6px}
  .site-tabmark{border-radius:5px 5px 0 0}
  .site-home{grid-column:1 / span 2;width:auto;height:50px;margin:0 0 -1.5px}
  .site-home-object{bottom:6px;transform:scale(.72);transform-origin:bottom left}
  .site-home:hover .site-home-object,.site-home:focus-visible .site-home-object{transform:translateX(3px) scale(.72)}
  .site-home .site-nav-label{left:50px;bottom:17.5px}
  .site-tab:nth-of-type(2){grid-column:3}.site-tab:nth-of-type(3){grid-column:4}.site-tab:nth-of-type(4){grid-column:5}.site-tab:nth-of-type(5){grid-column:6}
  .site-tab,.site-tab:nth-of-type(n){--label-bottom:16px;--label-height:11px;width:auto;height:58px;margin:0;border-radius:0}
  .site-tab[aria-current="page"]{height:var(--site-tab-h)}
  .site-nav-object{--nav-scale:.72}
  .site-nav-label{left:0;right:0;font-size:10px;letter-spacing:0}
  .site-index--reading{margin-top:0}
}

/* a header under 280 px (Reading at 320: 22 px page padding) steps the labels to 9.5 px, the phone floor (P0 item 5) */
@container (max-width:280px){.site-index .site-nav-label{font-size:9.5px}}

@media (prefers-reduced-motion:reduce){
  .site-home-object,.site-tab,.site-nav-object{animation:none!important;transition:none!important}
  .site-nav-object{--nav-lift:0px!important;--nav-tilt:0deg!important}
}
@media (forced-colors:active){
  .site-identity-tag path,.site-identity-seal .seal-line{stroke:CanvasText}
  .site-identity-seal .seal-body{fill:CanvasText}
  .site-identity-seal .seal-cut{stroke:Canvas}
  .site-rule{background:CanvasText}
  .site-tabmark{border-color:CanvasText}
  .site-tabmark::before{background:Canvas}
  .site-tabmark path{stroke:CanvasText}
}