/* CT Geo Quiz website. Same cut-paper look as the app: cream grained paper, blue-black ink,
   card stock that presses, torn edges, and one job per accent colour. */
@font-face { font-family: Chillax; src: url("/fonts/Chillax-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Chillax; src: url("/fonts/Chillax-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --paper: #F7F5EC; --paper-2: #F0EDE0; --card: #FCFBF6; --ink: #12161C; --muted: #565B63; --rule: #D7D4C9;
  --pear: #F7D21A; --pear-deep: #C9A000; --blue: #0064BE; --coral: #FF5E63; --mint: #70E093; --edge: #D2C6AA;
  --sugar: #C6DFEF; --sand: #D9AC69; --fringe: #FEFCF8;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .09 0 0 0 0 .11 0 0 0 .5 -.19'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tear-bottom: polygon(0 0, 100% 0, 100% calc(100% - 7px), 97% calc(100% - 3px), 93% calc(100% - 8px), 88% calc(100% - 4px), 83% calc(100% - 9px), 78% calc(100% - 3px), 72% calc(100% - 7px), 66% calc(100% - 2px), 60% calc(100% - 8px), 54% calc(100% - 4px), 48% calc(100% - 9px), 42% calc(100% - 3px), 36% calc(100% - 7px), 30% calc(100% - 2px), 24% calc(100% - 8px), 18% calc(100% - 4px), 12% calc(100% - 9px), 6% calc(100% - 3px), 0 calc(100% - 7px));
  --tear-top: polygon(0 6px, 5% 2px, 11% 8px, 17% 3px, 23% 7px, 29% 1px, 35% 6px, 41% 2px, 47% 8px, 53% 3px, 59% 7px, 65% 2px, 71% 8px, 77% 3px, 83% 7px, 89% 2px, 95% 7px, 100% 3px, 100% 100%, 0 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--grain), var(--paper);
  font: 500 1.125rem/1.55 Chillax, ui-rounded, system-ui, sans-serif;
}
::selection { background: var(--pear); color: var(--ink); }
a { color: var(--blue); text-underline-offset: 0.18em; }
a:focus-visible, .stock:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
.wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 42rem); margin-inline: auto; }

/* Header: the name, and two card-stock links */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; }
.name { display: flex; align-items: center; gap: 0.7rem; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.name img { width: 40px; height: 40px; border-radius: 10px; }
.top nav { display: flex; gap: 0.6rem; }

/* Card stock: a solid lower edge that the face sinks into when pressed */
.stock {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.1rem;
  font: 600 1rem Chillax, ui-rounded, system-ui, sans-serif; color: var(--ink); text-decoration: none;
  background: var(--grain), var(--card); border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--rule), 0 5px 0 0 var(--edge);
  transition: translate 0.12s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}
.stock:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1px var(--rule), 0 7px 0 0 var(--edge); }
.stock:active { translate: 0 4px; box-shadow: inset 0 0 0 1px var(--rule), 0 1px 0 0 var(--edge); }
.stock[aria-current] { background: var(--ink); color: var(--paper); box-shadow: 0 5px 0 0 #000; }
.tag { display: inline-block; padding: 0.55rem 1rem; border-radius: 16px; font-weight: 600; background: var(--grain), var(--pear); box-shadow: 0 5px 0 0 var(--pear-deep); }

/* Home */
.hero { display: grid; gap: 3rem; align-items: center; padding: 2.5rem 0 4rem; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
.hero p.lede { font-size: 1.25rem; color: var(--muted); max-width: 30rem; margin: 1.25rem 0 1.75rem; }
.shots { display: flex; gap: 1rem; justify-content: center; }
.shots img { width: min(30%, 15rem); height: auto; border-radius: 18px; filter: drop-shadow(1.5px 2.5px 1.5px rgb(18 22 28 / 0.1)) drop-shadow(6px 14px 16px rgb(18 22 28 / 0.16)); }
.shots img:nth-child(1) { rotate: -3deg; translate: 0 0.8rem; }
.shots img:nth-child(3) { rotate: 3deg; translate: 0 0.8rem; }
@media (min-width: 60rem) { .hero { grid-template-columns: 1fr 1.05fr; } }

.band { background: var(--grain), var(--ink); color: var(--paper); clip-path: var(--tear-top); padding: 4.5rem 0 4rem; margin-top: 1rem; }
.band a { color: var(--pear); }
.how { display: grid; gap: 2.5rem; padding: 1rem 0 4rem; }
.how h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 0.6rem; }
.how p { color: var(--muted); margin: 0; }
.how .row { display: grid; gap: 1.5rem; align-items: center; }
.how img { width: min(100%, 17rem); height: auto; border-radius: 18px; justify-self: center; filter: drop-shadow(6px 14px 16px rgb(18 22 28 / 0.16)); }
@media (min-width: 48rem) {
  .how .row { grid-template-columns: 1fr 17rem; gap: 4rem; }
  .how .row:nth-child(even) { grid-template-columns: 17rem 1fr; }
  .how .row:nth-child(even) img { order: -1; }
}
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.5rem; background: var(--grain), var(--pear); padding: 2.5rem 2rem 2.8rem; clip-path: var(--tear-bottom); filter: drop-shadow(6px 14px 16px rgb(18 22 28 / 0.13)); margin-bottom: 4rem; }
.figures b { display: block; font-size: clamp(2.8rem, 7vw, 4rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }

/* Text pages */
.sheet { background: var(--grain), var(--card); padding: clamp(1.5rem, 5vw, 3.5rem); padding-bottom: 4rem; clip-path: var(--tear-bottom); margin: 1rem auto 0; }
.paper-shadow { filter: drop-shadow(1.5px 2.5px 1.5px rgb(18 22 28 / 0.1)) drop-shadow(6px 14px 16px rgb(18 22 28 / 0.13)); padding-bottom: 4rem; }
.sheet h1 { font-size: clamp(2.1rem, 6vw, 3.2rem); margin-bottom: 0.4rem; }
.sheet h2 { font-size: 1.4rem; margin: 2.2rem 0 0.5rem; }
.sheet .when { color: var(--muted); }
mark { background: color-mix(in oklab, var(--pear) 60%, transparent); color: inherit; padding: 0 0.15em; }

footer { padding: 2rem 0 3rem; color: var(--muted); font-size: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.band footer { color: #C9CDD3; padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .stock { transition: none; } }
.name { white-space: nowrap; }
@media (max-width: 27rem) { .top nav { gap: 0.4rem; } .top .stock { padding: 0 0.75rem; min-height: 44px; font-size: 0.95rem; } .name { font-size: 1.1rem; gap: 0.5rem; } .name img { width: 34px; height: 34px; } }