
@layer base, components, pages;
@font-face{font-family:Cinzel;src:url("/assets/fonts/Cinzel-latin.woff2") format("woff2");font-weight:400 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cinzel;src:url("/assets/fonts/Cinzel-latin-ext.woff2") format("woff2");font-weight:400 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Jost;src:url("/assets/fonts/Jost-latin.woff2") format("woff2");font-weight:300 700;font-display:swap}
@layer base{
  :root{
    --corner-shape:superellipse(-0.3);
    --frame-green:#4A4632; --frame-green-light:#7A6F4C;
    --inner-line:rgba(150,140,100,.2);
    --card-border:1.5px; --card-radius:14px; --inner-inset:5px;
    --gold-dark:#8A6A3A; --gold:#C9A56A; --gold-light:#F4DDA8; --gold-highlight:#FFF3D6;
    --silver-light:#E4E4E8; --bronze-light:#E0A56C;
    --mottle:url("/assets/site/decor/mottle.svg");
    --button-height:56px;
    --button-font-size:16px;
    --button-pad-x:52px;
    --button-min-width:240px;
    --button-arrow-right:22px;
    --space-button:12px;
    --button-arrow-glow:rgba(255,195,110,1);
    --button-arrow-glow-dim:rgba(255,190,100,.35);
    --button-arrow-pulse:1.4s;
    --button-lift:-3px;
    --button-hover-tint:rgba(255,190,120,.14);
    --button-hover-glow:rgba(240,150,60,.38);
    --button-ease:.22s ease-out;
    --button-text:#F3EBDD;
    --ground:#040B07;
    --green-deepest:#0b120d;
    --card-solid:#191D10;
    --card-solid-dark:#0E1109;
    --footer-mid:#040806;
    --field-tint:rgba(233,225,207,.05);
    --field-ground:rgba(2,6,4,.55);
    --well-line:color-mix(in srgb,var(--gold-dark) 38%,transparent);
    --well-shadow:inset 0 0 0 var(--border-thin) var(--well-line),inset 0 3px 14px rgba(0,0,0,.55),
      inset 0 -1px 0 var(--field-tint);
    --field-fill:rgba(233,225,207,.08);
    --field-line:rgba(184,148,90,.6);
    --notice-good:#86B36A;
    --notice-bad:#D77A6A;
    --old-gold:rgba(184,148,90,.45);
    --old-gold-strong:#9C7C48;
    --text:#E9E1CF;
    --text-muted:rgba(233,225,207,.68);
    --heading:#E8CFA0;
    --heading-light:#F1DEB6;
    --nav-text:#E6DCC4;
    --title-gold-top:#F2E6C8;
    --title-gold-light:#DDC293;
    --title-gold-mid:#BE9865;
    --title-gold-deep:#9C774A;
    --title-gold-foot:#C9A474;
    --title-rim:#3A1F07;
    --title-metal:linear-gradient(180deg,var(--title-gold-top) 8%,var(--title-gold-light) 30%,var(--title-gold-mid) 52%,
      var(--title-gold-deep) 70%,var(--title-gold-foot) 92%);
    --metal-quiet:drop-shadow(0 0 .6px var(--title-rim)) drop-shadow(0 1px 0 var(--title-rim)) drop-shadow(0 3px 6px rgba(0,0,0,.75));
    --art-raid:#A2473A;
    --danger-light:#E0907F;
    --danger-dark:#6E2E26;
    --art-mplus:#4F7896;
    --art-social:#6F8B45;
    --art-gildenbesprechung:#7D6391;
    --art-leitungsbesprechung:#7E7160;
    --art-geburtstag:#A0636F;
    --stand-zu:#9CC08A;
    --stand-ab:#E2705C;
    --stand-spaeter:#E8C26A;
    --stand-bank:#9A8E85;
    --stand-open:#C9A56A;
    --archived:#E2705C;
    --warning:#E8C26A;
    --author-rey:var(--gold);
    --author-livia:#7D6391;
    --author-aaron:#4F7896;
    --author-kira:#6F8B45;
    --progress-down:#86B36A;
    --progress-current:var(--gold);
    --progress-open:rgba(233,225,207,.28);
    --ink:#3B2A18;
    --ink-muted:rgba(59,42,24,.6);
    --paper-light:#F4E9D2;
    --parse-grey:#666666; --parse-green:#1EFF00; --parse-blue:#0070FF; --parse-purple:#A335EE;
    --parse-orange:#FF8000; --parse-pink:#E268A8; --parse-gold:#E5CC80;
    --quality-veteran:#1EFF00; --quality-champion:#0070DD; --quality-hero:#A335EE; --quality-myth:#FF8000;
    --feat-raid:#C0392B; --feat-social:#D0508A; --feat-unbroken:#C8743A; --feat-keystone:#3E7FD6;
    --feat-quill:#2FA8A0; --feat-fire:#8E5BC9; --feat-rooted:#3E9C5C; --feat-wreath:#D9B04C;
    --feat-spezial:#C3CBD6;
    --song-line:rgba(18,14,9,.72);
    --song-note:rgb(14,11,7);
    --mist:rgba(255,244,236,.97);
    --mist-mid:rgba(255,236,224,.62);
    --mist-edge:rgba(255,232,220,.22);
    --mist-strength:.9;
    --discord:#5865F2; --bnet:#4381C3;
    --rule-line:var(--inner-line);
    --rule-size:100%;
    --rule-gradient:linear-gradient(90deg,transparent,var(--old-gold) 18%,var(--old-gold) 82%,transparent);
    --rule-top:var(--rule-gradient) 0 0/100% var(--border-thin) no-repeat;
    --rule-gradient-y:linear-gradient(180deg,transparent,var(--old-gold) 18%,var(--old-gold) 82%,transparent);
    --card-shadow:0 28px 60px 4px rgba(0,0,0,.95),0 10px 22px rgba(0,0,0,.8),0 0 90px 24px rgba(0,0,0,.7);
    --box-band-edge:rgba(0,0,0,.42);
    --box-band-line:rgba(0,0,0,.14);
    --veil-mid:rgba(5,9,6,.55);
    --text-shadow:0 2px 12px rgba(0,0,0,.85);
    --text-shadow-soft:0 1px 3px rgba(0,0,0,.6);
    --text-shadow-onimage:0 1px 2px rgba(0,0,0,.95),0 3px 10px rgba(0,0,0,.85),0 8px 34px rgba(0,0,0,.7);
    --title-halo:drop-shadow(0 8px 64px rgba(0,0,0,.6));
    --text-halo:0 8px 64px rgba(0,0,0,.55);
    --lyrics-veil:rgba(4,7,5,.62);
    --lyrics-shadow:0 0 2px rgba(0,0,0,1),0 1px 3px rgba(0,0,0,.95),0 2px 9px rgba(0,0,0,.9),0 0 22px rgba(0,0,0,.8);
    --tagline-shadow:0 1px 2px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.55);
    --text-cloud:rgba(3,6,4,.68);
    --text-cloud-blur:7px;
    --text-cloud-dim:.72;
    --vignette:rgba(3,6,4,.97);
    --vignette-mid:rgba(3,6,4,.62);
    --image-radius:8px;
    --border-thin:1px;
    --border-gold:1.5px;
    --space-1:6px; --space-2:12px; --space-3:20px; --space-4:32px; --space-5:56px; --space-6:96px;
    --content-width:1760px;
    --reading-width:72ch;
    --page-gutter:max(var(--space-4),calc((100% - var(--content-width)) / 2));
    --stage-width:1920px;
    --stage-height:900px;
    --stage-aspect:calc(32 / 15);
    --stage-edge:#000;
    --zoom-damp:.15;
    --zoom:1;
    --view-height:calc(100svh / var(--zoom));
    --view-width:min(100vw / var(--zoom),max(var(--stage-width),var(--view-height) * var(--stage-aspect)));
    --stage-fade:clamp(0px,100vw / var(--zoom) - var(--view-width),120px);
    --stage-bleed:max(0px,(100vw / var(--zoom) - var(--view-width)) / 2);
    --page-image-height:calc(var(--view-width) * 9 / 16);
    --page-image-width:calc(var(--page-image-height) * 16 / 9);
    --page-image-left:calc((100% - var(--page-image-width)) / 2);
    --header-unit:calc(min(var(--view-width), 1824px) / 2507);
    --header-height:calc(255 * var(--header-unit));
    --header-field-center:calc(124 * var(--header-unit));
    --header-top:calc(var(--space-4) - 59 * var(--header-unit));
    --header-brightness:.72;
    --header-crest-size:calc(183 * var(--header-unit));
    --header-crest-left:calc(var(--space-4) * -.25);
    --header-wordmark-height:calc(52.2 * var(--header-unit));
    --header-pad-left:calc(79 * var(--header-unit));
    --header-pad-right:calc(92 * var(--header-unit));
    --header-login-height:max(38px,calc(66 * var(--header-unit)));
    --header-login-size:max(13px,calc(20.6 * var(--header-unit)));
    --light-eye:rgba(200,255,170,.95);      --light-eye-halo:rgba(95,230,95,.5);
    --light-lantern:rgba(255,232,170,.95);  --light-lantern-halo:rgba(255,150,50,.5);
    --nav-size:max(15px,calc(27.5 * var(--header-unit)));
    --nav-gap:max(24px,calc(60.5 * var(--header-unit)));
    --nav-leaf:max(10px,calc(19.2 * var(--header-unit)));
    --nav-optical-y:0px;
    --nav-glow:rgba(255,214,140,.75);
    --nav-glow-soft:rgba(240,170,80,.25);
    --nav-glow-size:30px;
    --sticky-height:64px;
    --sticky-reach:48px;
    --sticky-in:.55s cubic-bezier(.34,1.5,.64,1);
    --sticky-out:.3s cubic-bezier(.5,0,.75,0);
    --sticky-nav-gap:36px;
    --sticky-bg:rgba(4,8,6,.72);
    --sticky-blur:8px;
    --sheet-bg:rgba(4,8,6,.96);
    --sheet-backdrop:rgba(2,5,3,.62);
    --account-gear:max(30px,calc(54 * var(--header-unit)));
    --account-name-size:max(17px,calc(34 * var(--header-unit)));
    --account-hello-size:max(12px,calc(20 * var(--header-unit)));
    --pen-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21l3.8-1 11-11-2.8-2.8-11 11L3 21zm14.6-16.2l2.6 2.6 1.4-1.4a1.2 1.2 0 000-1.7l-.9-.9a1.2 1.2 0 00-1.7 0z'/%3E%3C/svg%3E");
    --ground-edge:linear-gradient(#000,transparent);
    --ground-edge-height:26%;
    --ground-texture:url("/assets/site/decor/leaf-background.webp");
    --flat-scroll:url("/assets/site/icons/flat/scroll.webp");
    --flat-calendar:url("/assets/site/icons/flat/calendar.webp");
    --flat-community:url("/assets/site/icons/flat/community.webp");
    --flat-megaphone:url("/assets/site/icons/flat/megaphone.webp");
    --flat-guild:url("/assets/site/icons/flat/guild.webp");
    --flat-leaf:url("/assets/site/icons/flat/leaf.webp");
    --flat-leaf-crest:url("/assets/site/icons/flat/leaf-crest.webp");
    --ground-tile:640px;
    --ground-brightness:.85;
    --page-image:none;
    --page-title-gap:80px;
    --page-content-gap:130px;
    --page-image-run:300px;
    --page-title-size:clamp(34px,5.2vw,72px);
    --page-divider-width:min(380px,55%);
    --vine-scale:.4;
    --vine-shadow:drop-shadow(0 4px 10px rgba(0,0,0,.6));
    --vine-fill:rgba(40,29,18,.74);
    --vine-blur:6px;
    --foliage-scale:.6;
    --foliage-period:calc(1671px * var(--foliage-scale));
    --vine-span:calc(316px * var(--foliage-scale));
    --vine-out:calc(var(--vine-span) * .38);
    --leaf-bleed:calc((100% - 100vw / var(--zoom)) / 2);
    --leaf-edge:calc(var(--leaf-bleed) - var(--vine-out));
    --foliage-cluster-scale:.45;
    --corner-size:1.5;
    --corner-in:110px;
    --bush-scale:.78;
    --bush-in:40px;
    --bush-lift:.55;
    --bush-tone:.75;
    --foliage-reach:28px;
    --foliage-brightness:.62;
    --foliage-shadow:0 14px 20px rgba(0,0,0,.7);
    --painted-size:44px;
    --painted-depth:drop-shadow(0 2px 3px rgba(0,0,0,.7));
    --icon-module:32px;
    --avatar-size:96px;
    --section-icon:46px;
    --event-date-width:112px;
    --event-kind-width:84px;
    --event-kind-size:46px;
    --event-motif-width:44%;
    --event-row-height:92px;
    --content-lag:90px;
    --reveal-shift:28px;
    --reveal-time:.9s;
    --reveal-ease:cubic-bezier(.2,.7,.2,1);
  }
  :root,.vine-frame{
    --vine-rail-top:calc(74.5px * var(--vine-scale));
    --vine-rail-right:calc(71.5px * var(--vine-scale));
    --vine-rail-bottom:calc(85px * var(--vine-scale));
    --vine-rail-left:calc(67px * var(--vine-scale));
  }
  @media (max-width:1240px){
    :root{
      --header-top:0px;
      --header-height:var(--sticky-height);
      --page-title-gap:80px;
      --page-image-run:300px;
    }
  }
  @media (max-width:900px){
    :root{
      --page-gutter:max(var(--space-3),calc((100% - var(--content-width)) / 2));
      --page-image-run:240px;
      --page-image-height:max(var(--view-width) * 9 / 16,var(--view-height));
      --ground-edge-height:13.7%;
      --page-title-gap:56px;
      --page-content-gap:90px;
      --ground-tile:420px;
      --vine-edge:8px;
    }
  }
  @media (max-width:620px){
    :root{
      --page-image-run:190px;
      --ground-tile:300px;
      --vine-scale:.3;
      --avatar-size:64px;
    }
  }
  @supports (scale:calc(100vw / 1px)){
    :root{--zoom:max(1,1 + (min(100vw / var(--stage-width),100vh / var(--stage-height)) - 1) * var(--zoom-damp))}
  }
  html{zoom:var(--zoom);background:var(--stage-edge);overflow-x:clip}
  body{margin:0 auto;max-width:var(--view-width);overflow-x:clip;background:var(--green-deepest);color:var(--text);font:17px/1.45 Jost}
  @media (min-aspect-ratio:32/15){
    body{mask:linear-gradient(90deg,transparent,#000 var(--stage-fade),#000 calc(100% - var(--stage-fade)),transparent)}
    body:has(.foliage){mask:none}
  }
  *{box-sizing:border-box}
  a{color:inherit;text-decoration:none}
  img{display:block}
  :root{
    --cursor:      url("/assets/site/cursor/arrow-36.webp") 4 3,auto;
    --cursor-click:url("/assets/site/cursor/hand-36.webp") 6 3,pointer;
    --cursor-grab: grab;
    --cursor-hold: grabbing;
    --tip-offset-x: 36px;
    --tip-offset-y: 20px;
    --cursor-reach-y: 33px;
    --cursor-reach-x: 36px;
  }
  :root,body{cursor:var(--cursor)}
  a[href],button,summary,label[for],select,
  [role="button"],[role="tab"],[role="option"],
  input[type="range"],input[type="checkbox"],input[type="radio"],
  input[type="file"],input[type="color"]{cursor:var(--cursor-click)}
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  textarea{cursor:text}
  button:disabled,select:disabled,[aria-disabled="true"]{cursor:not-allowed}
  .muted{color:var(--text-muted)}
  html.menu-open,html.menu-open body{overflow:clip}
}
