@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/SpaceGrotesk.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f7f3ea;
  --brown: #4a2414;
  --cream: #fffaf0;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; color: var(--brown); background: var(--paper) url("assets/paper.webp") center / 720px repeat; font-family: "Space Grotesk", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a, button { color: inherit; font: inherit; }
a { text-decoration: none; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--brown); outline-offset: 4px; }
::selection { color: var(--cream); background: var(--brown); }
.skip { position: fixed; z-index: 20; left: 16px; top: 16px; padding: 11px 15px; color: var(--cream); background: var(--brown); transform: translateY(-180%); }
.skip:focus { transform: none; }

.paper-page { position: relative; min-height: 100svh; padding: 28px clamp(24px,5vw,76px) 34px; }
header { position: absolute; left: clamp(24px,5vw,76px); right: clamp(24px,5vw,76px); top: 28px; display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 650; letter-spacing: .08em; }
.mark { display: grid; place-items: center; width: 42px; aspect-ratio: 1; border: 2px solid var(--brown); border-radius: 50%; font-family: Georgia, serif; font-style: italic; }

.hero { min-height: calc(100svh - 62px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px,3vh,34px); padding-top: 50px; }
h1 { margin: 0; font-size: clamp(48px,7vw,104px); font-weight: 570; line-height: .9; letter-spacing: -.075em; }
.logo { display: block; width: min(46vw,520px); height: auto; filter: drop-shadow(0 22px 14px #3d1d1244); user-select: none; -webkit-user-drag: none; }

.buttons { display: grid; grid-template-columns: repeat(4,minmax(130px,1fr)); gap: 10px; width: min(780px,100%); }
.buttons a, .buttons button { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 18px; color: var(--cream); background: var(--brown); border: 2px solid var(--brown); border-radius: 10px; font-size: 15px; font-weight: 650; letter-spacing: .06em; transition: color .2s ease, background .2s ease, transform .2s ease; }
.buttons a:not([aria-disabled="true"]):hover, .buttons button:hover { color: var(--brown); background: transparent; transform: translateY(-3px); }
.buttons [aria-disabled="true"] { opacity: .55; cursor: default; }

.toast { position: fixed; z-index: 15; left: 50%; bottom: 24px; width: max-content; max-width: calc(100% - 36px); padding: 12px 17px; color: var(--cream); background: var(--brown); border-radius: 99px; box-shadow: 0 12px 30px #3d1d1238; opacity: 0; transform: translate(-50%,10px); pointer-events: none; font-size: 14px; transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 760px) {
  .hero { gap: 24px; }
  h1 { font-size: clamp(46px,14vw,82px); }
  .logo { width: min(76vw,500px); }
  .buttons { grid-template-columns: repeat(2,1fr); width: min(520px,100%); }
}

@media (max-width: 460px) {
  .paper-page { padding-inline: 18px; }
  header { left: 18px; right: 18px; }
  .mark { width: 38px; }
  h1 { font-size: 13.5vw; }
  .logo { width: 84vw; }
  .buttons { gap: 8px; }
  .buttons a, .buttons button { min-height: 50px; padding-inline: 13px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition: none !important; }
}