@font-face { font-family:Anton; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/anton.ttf') format('truetype'); }
:root { color-scheme:dark; --black:#101010; --bone:#fbf1e3; --rust:#b46c43; }
* { box-sizing:border-box; }
html { background:var(--black); min-height:100%; }
body { margin:0; color:var(--bone); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
.page { min-height:100svh; display:flex; flex-direction:column; padding:34px 6vw 26px; overflow:hidden; }
header { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.discord-link { display:inline-flex; align-items:center; gap:9px; color:var(--bone); text-decoration:none; text-transform:uppercase; font-size:10px; font-weight:600; letter-spacing:.12em; padding:12px 0; border-bottom:1px solid var(--rust); white-space:nowrap; }
.discord-link:hover { color:var(--rust); }
.brand { display:inline-flex; align-items:center; gap:16px; color:var(--bone); text-decoration:none; }
.brand img { width:64px; height:64px; object-fit:contain; filter:grayscale(1) contrast(10) invert(1); mix-blend-mode:screen; }
.brand span { font-family:Anton,Impact,'Arial Narrow',sans-serif; font-size:32px; line-height:1; letter-spacing:.015em; }
main { position:relative; display:flex; align-items:center; flex:1; min-height:480px; }
.copy { position:relative; z-index:1; padding:44px 0 54px; animation:arrive .8s ease-out both; }
h1 { font-family:Anton,Impact,'Arial Narrow',sans-serif; font-weight:400; font-size:clamp(110px,13.4vw,202px); line-height:1.04; letter-spacing:.005em; margin:0; }
.period { color:var(--rust); }
.accent { width:42px; height:3px; background:var(--rust); margin-top:28px; }
.coast { position:absolute; width:min(58vw,960px); aspect-ratio:56/45; right:-6vw; top:50%; transform:translateY(-46%); overflow:hidden; pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 14%); }
.coast > img { position:absolute; right:0; top:0; height:100%; width:auto; max-width:none; mix-blend-mode:lighten; }
.tide { position:absolute; inset:0; background:url('/assets/ragnarok-coast-v3.png') right top / auto 100% no-repeat; clip-path:polygon(3% 58%,58% 58%,40% 92%,3% 92%); mask-image:repeating-linear-gradient(0deg,transparent 0 6px,#000 6px 7px,transparent 7px 13px); opacity:.65; animation:tide 4.5s ease-in-out infinite alternate; }
footer { position:relative; display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:32px; font-size:9px; line-height:1.6; font-weight:600; letter-spacing:.17em; color:#aaa39a; }
.slash { margin:0 9px; color:var(--rust); }
#motion-toggle { display:inline-flex; align-items:center; gap:9px; color:#aaa39a; background:transparent; border:0; padding:10px 0 10px 10px; font:inherit; font-weight:400; font-size:9px; letter-spacing:.04em; cursor:pointer; }
#motion-toggle[hidden] { display:none; }
#motion-toggle:hover { color:var(--bone); }
.motion-icon { width:6px; height:8px; border-left:2px solid currentColor; border-right:2px solid currentColor; }
.motion-paused .motion-icon { width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid currentColor; border-right:0; }
.motion-paused .tide { animation-play-state:paused; }
a:focus-visible,button:focus-visible { outline:1px solid var(--bone); outline-offset:5px; }
@keyframes tide { from { transform:translateX(-2px); opacity:.25; } to { transform:translateX(4px); opacity:.7; } }
@keyframes arrive { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1800px) { .page { padding-left:8vw; padding-right:8vw; } .coast { right:-8vw; } }
@media(max-width:600px) {
  .page { padding:23px 25px 18px; }
  .brand { gap:10px; }
  .brand img { width:48px; height:48px; }
  .brand span { font-size:25px; }
  main { min-height:480px; display:block; }
  .copy { padding:48px 0 0; }
  h1 { font-size:clamp(92px,23.5vw,138px); line-height:1.04; }
  .accent { margin-top:22px; width:30px; height:2px; }
  .coast { width:130vw; right:-25px; top:auto; bottom:-10px; transform:none; mask-image:linear-gradient(90deg,transparent,#000 14%); }
  footer { font-size:7px; letter-spacing:.09em; align-items:center; }
  footer > span { max-width:190px; }
  .slash { margin:0 4px; }
  #motion-toggle { font-size:8px; white-space:nowrap; letter-spacing:0; }
}
@media(max-width:380px) {
  header { gap:12px; }
  .brand span { font-size:22px; }
  .discord-link { font-size:9px; letter-spacing:.08em; }
}
@media(max-height:590px) and (min-width:601px) {
  .page { padding-top:16px; padding-bottom:12px; }
  .brand img { width:46px; height:46px; }
  .brand span { font-size:25px; }
  main { min-height:300px; }
  .copy { padding:20px 0; }
  h1 { font-size:clamp(88px,10vw,120px); }
  .accent { margin-top:18px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
}