/* Shared authorial components. The practice page keeps its established layout. */
@font-face{font-family:"Fira Sans";src:url("/anger/fonts/fira-sans-400.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Caveat";src:url("/anger/fonts/caveat-400.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Caveat";src:url("/anger/fonts/caveat-700.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
:root{color-scheme:dark;--bg:#000;--paper:#f3e8d4;--ink:#f3e8d4;--muted:#b5aa96;--line:#302c24;--accent:#d6c3a5;--body-font:"Fira Sans",sans-serif;--heading-font:"Caveat",cursive}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a,button,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:16px 24px;min-height:76px;border:1px solid var(--paper);border-radius:0;font:400 32px/1.15 var(--heading-font);color:#000;background:var(--paper);text-decoration:none;cursor:pointer;transition:transform 240ms ease,background 240ms ease;transform-origin:center}
.button:disabled{opacity:.45;cursor:wait}
.button:not(:disabled):is(:hover,:focus-visible,:active){transform:rotate(-1deg);text-decoration:none}
.button-secondary{background:#000;color:var(--ink);border-color:#706653}
.button-secondary:is(:hover,:focus-visible,:active){border-color:var(--accent)}
.cta-arrow{width:24px;height:24px;flex:0 0 24px;overflow:visible}
.cta-tip{transition:transform 240ms ease}
.button:is(:hover,:focus-visible,:active) .cta-tip{transform:translate(4px,-4px)}
.site-link{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;padding:12px;min-height:44px;color:var(--ink);text-decoration:none;transition:color 280ms ease}
.site-link::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);transform:scaleX(0);transform-origin:left center;transition:transform 340ms cubic-bezier(.22,.61,.36,1);pointer-events:none}
.site-link:is(:hover,:focus-visible,:active){color:#000;text-decoration:none}
.site-link:is(:hover,:focus-visible,:active)::before{transform:scaleX(1)}
.site-link img{transition:filter 280ms ease}
.site-link:is(:hover,:focus-visible,:active) img{filter:brightness(0)}
.text-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding-block:8px;color:inherit;text-decoration:none;transition:transform 240ms ease}
.text-link:is(:hover,:focus-visible,:active){transform:rotate(-1deg);text-decoration:none}
.fold{border:1px solid #706653;background:#000;color:var(--ink);transform:rotate(-1deg);transition:transform 280ms ease,border-color 280ms ease}
.fold:is(:hover,:focus-within,[open]){transform:rotate(0);border-color:var(--accent)}
.fold summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:16px 22px;list-style:none;cursor:pointer;font:400 32px/1.2 var(--heading-font)}
.fold summary::-webkit-details-marker{display:none}
.fold-icon{flex:0 0 20px;transition:transform 260ms ease}
.fold[open] .fold-icon{transform:rotate(180deg);--icon:url('/assets/icons/minus.svg')}
.fold>div{padding:4px 22px 24px}
.fold p+p{margin-top:16px}
.social-links{display:flex;align-items:center;gap:8px}
.social-link{position:relative;isolation:isolate;display:grid;place-items:center;width:44px;height:44px;color:var(--muted);transition:transform 240ms ease,color 240ms ease}
.social-link::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);transform:scaleX(0);transform-origin:left center;transition:transform 300ms ease;pointer-events:none}
.social-link::after{content:"";position:absolute;inset:0;border:1px solid var(--accent);opacity:0;transition:opacity 240ms ease;pointer-events:none}
.social-link:is(:hover,:focus-visible,:active){transform:rotate(-1deg);color:#000}
.social-link:is(:hover,:focus-visible,:active)::before{transform:scaleX(1)}
.social-link:is(:hover,:focus-visible,:active)::after{opacity:1}
.social-icon{display:block;width:22px;height:22px;background:currentColor;mask:var(--social-icon) center/contain no-repeat;-webkit-mask:var(--social-icon) center/contain no-repeat}
.social-icon--instagram{--social-icon:url('/anger/icons/instagram.svg')}.social-icon--threads{--social-icon:url('/anger/icons/threads.svg')}.social-icon--telegram{--social-icon:url('/anger/icons/telegram.svg')}
.host-portrait{position:relative;width:100%;aspect-ratio:1;isolation:isolate;color:var(--accent)}
.host-portrait::after{content:"";position:absolute;inset:11%;border:1px solid var(--line);border-radius:50%;z-index:1;pointer-events:none}
.host-photo{position:absolute;inset:14.615%;border:1px solid #675d4c;border-radius:50%;background:#000;overflow:hidden;z-index:1}
.host-photo img,.host-photo video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.host-orbit{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.host-orbit-back{z-index:0;clip-path:inset(-4% -4% 50% -4%)}.host-orbit-front{z-index:2;clip-path:inset(50% -4% -4% -4%)}
.orbit-track{fill:none;stroke:currentColor;stroke-width:.8;opacity:.5}
.orbit-marker,.orbit-still{fill:#000;stroke:currentColor;stroke-width:1}
.orbit-still{display:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.button,.text-link,.social-link,.fold{transform:none!important}.orbit-marker{display:none}.orbit-still{display:block}}
