/* R16 — additive only (loaded after r13.css + r14.css, both untouched).
   1 · Show all ↔ Show less keeps the R13 button exactly; only hover/press depth and a tiny arrow nudge are added.
   2 · Full-screen menu: the SAME top-right control stays in place above the sheet and morphs ☰ → ✕; the rest of the header
       steps back while the sheet is open. Sheet composition, type, spacing and links are unchanged. */

/* ---- 1 · Archive toggle */
.arch-more .am-face{transition:transform .3s var(--spring),box-shadow .3s var(--spring)}
@media (hover:hover){.arch-more:hover .am-face{box-shadow:inset 0 0 0 2px var(--ink),4px 6px 0 var(--blue)}}
.arch-more:active .am-face{box-shadow:inset 0 0 0 2px var(--ink),1px 1px 0 var(--blue);transition-duration:.07s}
.arch-more i{display:inline-block}
.arch-more i.nudge{animation:r16-nudge .38s var(--out)}
.arch-more.is-expanded i.nudge{animation-name:r16-nudge-up}
@keyframes r16-nudge{0%{transform:translateY(-4px);opacity:.3}100%{transform:none;opacity:1}}
@keyframes r16-nudge-up{0%{transform:translateY(4px);opacity:.3}100%{transform:none;opacity:1}}

/* ---- 2 · menu: the header sits above the sheet while it is open (only the menu control stays visible) */
.menu-open .nav,.menu-closing .nav{z-index:75}
.menu-open .nav>:not(.burger),.menu-closing .nav>:not(.burger){transition:opacity .18s ease}
.menu-open .nav>:not(.burger){opacity:0;pointer-events:none}
.menu-open .nav,.menu-open .nav.stuck{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.menu-open .nav::after{opacity:0}
/* ☰ → ✕ : the three lines meet in the middle and rotate (line pitch = 2px line + 4px gap = 6px) */
.burger i{transition:transform .28s var(--out),opacity .18s ease}
.menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* sheet: short fade + slight rise in, fade out */
.sheet:not([hidden]){animation:r16-sheet-in .22s var(--out)}
.sheet:not([hidden]) a{animation:r16-link-in .34s var(--out) both}
.sheet a:nth-child(2){animation-delay:.03s}.sheet a:nth-child(3){animation-delay:.06s}.sheet a:nth-child(4){animation-delay:.09s}
.sheet.is-closing{animation:r16-sheet-out .19s ease forwards}
@keyframes r16-sheet-in{from{opacity:0}to{opacity:1}}
@keyframes r16-link-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes r16-sheet-out{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.burger i,.menu-open .nav>*,.menu-closing .nav>*{transition:none!important}.sheet,.sheet a,.arch-more i{animation:none!important}}

/* ---- 3 · footer Patreon icon (R16 polish): same colour + hover treatment as Instagram / TikTok / YouTube.
   The official symbol file (black on white, no transparency) is used as a luminance MASK and filled with currentColor,
   so there is no blend-mode box behind it when the link lifts/tilts on hover. Same asset, same size, same position. */
.socials .patw{mix-blend-mode:normal;background:currentColor;
 -webkit-mask-image:linear-gradient(#000,#000),url(/assets/patreon-official-symbol.png);mask-image:linear-gradient(#000,#000),url(/assets/patreon-official-symbol.png);
 -webkit-mask-size:100% 100%,calc(var(--pw)*2.95) auto;mask-size:100% 100%,calc(var(--pw)*2.95) auto;
 -webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 mask-mode:alpha,luminance;-webkit-mask-composite:xor;mask-composite:exclude}
.socials .patw img{visibility:hidden}
