/* Global styles (extracted from the original design) */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0}
::selection{background:#9e2b25;color:#f3efe7}
#styleDrawer .sd-sec{margin-bottom:24px}
#styleDrawer .sd-sec h3{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#9b938a;margin:0 0 10px}
#styleDrawer #sd-origin{font-family:'Source Serif 4',serif;font-size:15.5px;font-weight:600;color:#14110f;margin:0;line-height:1.5}
#styleDrawer #sd-desc p{font-family:'Source Serif 4',serif;font-size:15px;line-height:1.64;color:#33302b;margin:0 0 12px}
#styleDrawer #sd-desc p.dsub{font-family:'Spectral',serif;font-weight:700;font-size:15px;color:#14110f;margin:18px 0 6px}
#styleDrawer #sd-desc ul{margin:6px 0 14px;padding-left:20px}
#styleDrawer #sd-desc li{font-family:'Source Serif 4',serif;font-size:14.5px;line-height:1.55;color:#33302b;margin:5px 0}
#styleDrawer .acc{border:1px solid #e4e0d8;border-radius:10px;overflow:hidden}
#styleDrawer .acc-item + .acc-item{border-top:1px solid #e4e0d8}
#styleDrawer .acc-h{width:100%;text-align:left;background:#faf8f4;border:none;cursor:pointer;padding:13px 15px;font-family:'Spectral',serif;font-size:14.5px;font-weight:600;color:#14110f;display:flex;justify-content:space-between;align-items:center;gap:10px}
#styleDrawer .acc-h:hover{background:#f2ede5}
#styleDrawer .acc-h .ar{color:#b6ada1;font-size:11px;transition:transform .18s;flex:0 0 auto}
#styleDrawer .acc-item.open .acc-h .ar{transform:rotate(90deg)}
#styleDrawer .acc-item.open .acc-h{color:var(--rc,#9e2b25)}
#styleDrawer .acc-b{display:none;padding:6px 16px 16px}
#styleDrawer .acc-item.open .acc-b{display:block}
#styleDrawer .acc-b p{font-family:'Source Serif 4',serif;font-size:14px;line-height:1.62;color:#33302b;margin:0 0 11px}
#styleDrawer .acc-b ul{margin:6px 0 12px;padding-left:20px}
#styleDrawer .acc-b li{font-family:'Source Serif 4',serif;font-size:14px;line-height:1.55;color:#33302b;margin:5px 0}
#styleDrawer .acc-b a{color:#9e2b25;word-break:break-word}
#styleDrawer .rel a{display:inline-flex;gap:6px;align-items:baseline;margin:0 6px 7px 0;font-family:'Inter',sans-serif;font-size:12.5px;background:#fff;border:1px solid #e4e0d8;border-radius:8px;padding:6px 11px;cursor:pointer;color:#14110f;text-decoration:none;transition:border-color .14s}
#styleDrawer .rel a:hover{border-color:#9e2b25}
#styleDrawer .rel a small{color:#9b938a}
#styleDrawer .src div{font-family:'Inter',sans-serif;font-size:12px;color:#5c554d;line-height:1.5;padding:7px 0;border-top:1px dashed #e4e0d8}
#styleDrawer .src div:first-child{border-top:none;padding-top:0}
#styleDrawer #sd-photo{font-family:'Inter',sans-serif;font-size:12px;color:#9b938a;font-style:italic;margin:0;line-height:1.5}
#styleFilterBar button[data-fg]:hover{filter:brightness(.96)}
#treeSvg .tnode{transition:opacity .22s ease}
#treeSvg .tnbg{transition:stroke .15s ease,stroke-width .15s ease}
#treeSvg .tedge{transition:opacity .22s ease,stroke .2s ease,stroke-width .2s ease}
#treeSvg .tnode:hover .tnbg{filter:drop-shadow(0 5px 13px rgba(20,17,15,.16))}
#styleSearch:focus{border-color:#9e2b25}
/* ===== RESPONSIVE / MOBILE ===== */
[data-mobile-toggle]{display:none}
@media (max-width:880px){
  [data-article-grid]{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
  [data-toc-rail]{display:none!important}
  #eraRibbon div:has(> [data-era]){flex-wrap:wrap!important}
  #eraRibbon [data-era]{flex:1 1 84px!important;min-width:84px!important}
  /* max-height only: the pane's height is measured to the map, so a floor here would re-open the gap */
  #treeScroll{max-height:calc(100dvh - 98px)!important}
  [data-tree-stage]{padding-bottom:44px!important}
  #treeHint [data-hint-full]{display:none!important}
  #treeHint [data-hint-short]{display:inline!important}
}
@media (max-width:720px){
  [data-desktop-menu]{display:none!important}
  [data-mobile-toggle]{display:inline-flex!important}
  [data-nav-inner]{padding:0 16px!important;gap:12px!important}
  [data-hero='home']{padding:74px 22px 66px!important}
  [data-hero='article']{padding:58px 22px 40px!important}
  [data-hero='styles']{padding:60px 22px 46px!important}
  #treeScroll{max-height:calc(100dvh - 84px)!important}
  [data-tree-stage]{max-width:100%!important;padding-left:16px!important;padding-right:16px!important;padding-bottom:16px!important}
}
@media (min-width:721px){
  [data-mobile-panel]{display:none!important}
}
@media (max-width:480px){
  [data-hero='home']{padding:58px 20px 52px!important}
}

/* --- view switching (replaces the React sc-if rendering) --- */
.dc-view{display:none}
.dc-view.active{display:block}
.dc-dropdown[hidden],[data-mobile-panel][hidden]{display:none!important}

/* ============================================================
   THE HEAD — the mounting of a hanging scroll
   ============================================================
   Two moving parts, both driven by html[data-scrolled] (set in script.js):

   1. The head condenses as soon as the reader leaves the top. The Chinese
      byline 歐陽文庫 does not merely fade — it collapses its own height, so
      the wordmark settles into the centre of a shorter bar instead of
      leaving a hole where the byline was. The mark shrinks with it.
   2. The mark is a struck medallion: two faces on a shared 3-D plane with a
      real edge between them, so a click turns it on its vertical axis like a
      pendant on a cord rather than spinning it flat like a sticker.

   The mobile drawer and #treeScroll still subtract a fixed 66px/98px/84px
   rather than --oa-nav-h. That is on purpose: both are max-height CAPS, so
   against the condensed 56px bar they simply come out ~10px conservative —
   whereas feeding them a value that changes on scroll would animate the height
   of the styles map while the reader is scrolling it. */
:root{
  --oa-nav-h:66px;          /* bar height at rest */
  --oa-mark-h:47px;         /* medallion height at rest */
  /* Thickness and perspective are kept as ratios of the mark, not fixed px, so
     the medallion reads the same when the head condenses and it drops to 38px.
     6.4x height was picked by eye against the real mark: shorter and the tile
     keystones, longer and the turn flattens into a sticker. */
  --oa-mark-t:calc(var(--oa-mark-h) * .034);   /* half the thickness */
  --oa-mark-persp:calc(var(--oa-mark-h) * 6.4);
  --oa-mark-edge:#9c2c17;   /* the mark's own deep tone — set per colour in script.js */
  --oa-mark-edge-lit:#ea6a44;
  --oa-ease:cubic-bezier(.32,.72,0,1);
  /* The turn is deliberately symmetric: it reaches 90° — edge-on — at exactly
     half its duration, which is what lets the cast shadow below pinch in step
     with it off a plain 50% keyframe. Reach for an asymmetric curve here and
     the two drift apart. */
  --oa-turn-ease:cubic-bezier(.65,0,.35,1);
  --oa-turn-dur:.8s;
}
html[data-scrolled]{--oa-nav-h:56px;--oa-mark-h:38px}

[data-nav-inner]{height:var(--oa-nav-h);transition:height .34s var(--oa-ease)}
[data-site-header]{transition:box-shadow .35s var(--oa-ease)}
html[data-scrolled] [data-site-header]{box-shadow:0 14px 30px -26px rgba(20,17,15,.75)}

#brandLogoSub{
  display:block;overflow:hidden;pointer-events:none;
  max-height:2rem;opacity:1;margin-top:3px;
  transition:max-height .34s var(--oa-ease),opacity .22s ease,margin-top .34s var(--oa-ease);
}
html[data-scrolled] #brandLogoSub{max-height:0;opacity:0;margin-top:0}

/* --- the medallion ----------------------------------------------------- */
.oa-medallion{
  position:relative;display:block;flex:0 0 auto;
  height:var(--oa-mark-h);
  width:calc(var(--oa-mark-h) * 340 / 520);   /* the logo's own proportion */
  perspective:var(--oa-mark-persp);
  transition:height .34s var(--oa-ease),width .34s var(--oa-ease);
}
/* the contact shadow: the pendant sits above the paper rather than on it */
.oa-medallion::before{
  content:"";position:absolute;z-index:-1;
  left:6%;right:6%;bottom:-2px;height:6px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(20,17,15,.34),transparent 70%);
}
/* Two turns compose here, each with its own weight: the tilt is the quick lean
   toward the reader on hover, the inner is the slow half-turn on click. */
.oa-medallion-tilt{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transition:transform .24s cubic-bezier(.3,.6,.3,1);
}
.oa-medallion-inner{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateY(var(--oa-turn,0deg));
  transition:transform var(--oa-turn-dur) var(--oa-turn-ease);
}
.oa-face{
  position:absolute;inset:0;
  border-radius:calc(var(--oa-mark-h) * 48 / 520);  /* the SVG's own corner, to scale */
  backface-visibility:hidden;
  overflow:hidden;
}
.oa-face img{display:block;width:100%;height:100%}
/* the struck bevel. An inset shadow on the <img> itself would paint under the
   image, so the rim rides on top as its own layer. */
.oa-face::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:
    inset 0 .7px .7px rgba(255,255,255,.5),
    inset 0 -.7px .7px rgba(20,17,15,.4),
    inset 0 0 0 .5px rgba(20,17,15,.22);
}
.oa-face-front{transform:translateZ(var(--oa-mark-t))}
.oa-face-back{transform:rotateY(180deg) translateZ(var(--oa-mark-t))}
/* The two rims of metal between the faces. Only the left and right edges are
   ever seen in a turn about the vertical axis — top and bottom stay edge-on to
   the eye — so only those two are built. */
.oa-edge{
  top:4%;bottom:4%;position:absolute;
  width:calc(var(--oa-mark-t) * 2);
  border-radius:1px;
  /* struck metal, never a gap: every stop stays opaque and in the mark's own
     hue, lit at the top where the tile's gradient is lit and deepening down */
  background:linear-gradient(180deg,
    var(--oa-mark-edge-lit),
    var(--oa-mark-edge) 58%,
    color-mix(in srgb,var(--oa-mark-edge) 58%,#14110f));
}
.oa-edge-l{left:0;transform:translateX(calc(var(--oa-mark-t) * -1)) rotateY(90deg)}
.oa-edge-r{right:0;transform:translateX(var(--oa-mark-t)) rotateY(90deg)}

/* hover: the medallion leans a little toward the reader, as if picked up */
#brandLogoBtn:hover .oa-medallion-tilt,
#brandLogoBtn:focus-visible .oa-medallion-tilt{transform:rotateY(-15deg)}

/* Click: a half-turn onto the other face. script.js re-strikes that face
   before the turn starts, while it is still facing away — so the colour is
   never seen changing, only its result. The turn angle itself is --oa-turn,
   which script.js winds on by 180° per click. */

/* the cast shadow pinches as the medallion goes edge-on and there is almost
   nothing left to cast */
@keyframes oaMedallionCast{
  0%,100%{transform:scaleX(1);opacity:1}
  50%{transform:scaleX(.28);opacity:.45}
}
.oa-medallion.oa-turning::before{animation:oaMedallionCast var(--oa-turn-dur) var(--oa-turn-ease)}

@media (prefers-reduced-motion: reduce){
  /* the head still condenses and the mark still turns to its next colour — it
     just arrives instead of travelling */
  [data-nav-inner],[data-site-header],#brandLogoSub,
  .oa-medallion,.oa-medallion-tilt,.oa-medallion-inner{transition:none}
  .oa-medallion.oa-turning::before{animation:none}
  #brandLogoBtn:hover .oa-medallion-tilt,
  #brandLogoBtn:focus-visible .oa-medallion-tilt{transform:none}
}