/* hoodystudios.com
   The app's "Cozy Sunday" paper kit, in CSS. Same idea as the game: the page
   hands you pieces of paper. Values are lifted from FrolfyTheme.swift and
   PaperCard.swift so the site and the app are the same object, not two takes
   on one.

   Anything with a number in it here has a twin in the app. If you change a
   sheet's corner or the tear line's dash, change it there too or the two drift
   and nobody notices for months. */

:root {
  /* FrolfyPalette */
  --cream: #EDE7DA;
  --paper-top: #FBF8F2;
  --paper-bottom: #F2ECDE;
  --tag-top: #F8F2E2;
  --tag-bottom: #EFE6CE;

  --ink: #24201A;
  /* The app's inkSoft is 0.55, which is right for a label next to a big number
     and too pale for a page of running text: on paper it lands around 4:1.
     Body copy gets its own, darker token; --ink-soft stays the app's value and
     is used the way the app uses it, on meta lines and the footer. */
  --ink-body: rgba(36, 32, 26, 0.82);
  --ink-soft: rgba(36, 32, 26, 0.55);
  --ink-faint: rgba(36, 32, 26, 0.35);
  --hairline: rgba(36, 32, 26, 0.12);
  --tear: rgba(36, 32, 26, 0.2);

  --orange: #E0762B;
  --amber: #E3B23C;
  --green: #386F45;
  --blue: #3073AE;

  --sky-1: #FFE8C2;
  --sky-2: #FFD9AC;
  --sky-3: #CFE6E8;
  --sky-4: #8FCBE0;

  --drop: 0 12px 25px rgba(6, 14, 20, 0.10);
  --drop-soft: 0 6px 14px rgba(6, 14, 20, 0.07);
  --radius: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cream: #17150F;
    --paper-top: #232019;
    --paper-bottom: #1C1A14;
    --tag-top: #262218;
    --tag-bottom: #1E1B13;

    --ink: #F2EDE1;
    --ink-body: rgba(242, 237, 225, 0.84);
    --ink-soft: rgba(242, 237, 225, 0.6);
    --ink-faint: rgba(242, 237, 225, 0.38);
    --hairline: rgba(242, 237, 225, 0.13);
    --tear: rgba(242, 237, 225, 0.22);

    --orange: #F0985A;
    --amber: #E3B23C;
    --green: #6FA97C;

    --drop: 0 12px 25px rgba(0, 0, 0, 0.35);
    --drop-soft: 0 6px 14px rgba(0, 0, 0, 0.25);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--cream);
  color: var(--ink);
  font: 16.5px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Baloo 2 stand-in, same call the app makes: the system rounded face. */
h1, h2, h3, .mark, .stamp, .dial-num {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  letter-spacing: -0.015em;
}

a { color: var(--orange); font-weight: 700; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

.wrap { max-width: 640px; margin: 0 auto; }

/* ---------- the header, a strip of tag stock ---------- */

.topbar {
  background: linear-gradient(180deg, var(--tag-top), var(--tag-bottom));
  border-bottom: 1px solid var(--hairline);
  padding: 14px 22px;
}
.topbar .inner {
  max-width: 640px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
}
.topbar .mark { font-weight: 800; font-size: 17.5px; margin-right: auto; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 16px; }
.topbar nav a { font-size: 14.5px; font-weight: 700; color: var(--ink-soft); }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--orange); }

/* ---------- the sky, four stops, same as the game ---------- */

.sky {
  background: linear-gradient(180deg,
    var(--sky-1) 0%, var(--sky-2) 26%, var(--sky-3) 66%, var(--sky-4) 100%);
  padding: 66px 22px 74px;
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  .sky { background: linear-gradient(180deg, #3A2D1C 0%, #33301F 26%, #24333A 66%, #16323F 100%); }
}
.sky h1 { font-size: clamp(36px, 9vw, 54px); font-weight: 800; margin: 0 0 8px; color: #24201A; }
.sky .tagline { margin: 0; font-weight: 700; color: rgba(36, 32, 26, 0.6); }
@media (prefers-color-scheme: dark) {
  .sky h1 { color: var(--ink); }
  .sky .tagline { color: var(--ink-soft); }
}

/* ---------- paper ---------- */

main { padding: 46px 22px 60px; }
section { margin-bottom: 40px; }
section:last-child { margin-bottom: 0; }

/* PaperSurface: top-lit gradient, generous corner, drop on the sheet. */
.paper {
  background: linear-gradient(180deg, var(--paper-top), var(--paper-bottom));
  border-radius: var(--radius);
  box-shadow: var(--drop);
  padding: 26px 28px;
}
.paper + .paper { margin-top: 16px; }

/* The bag-tag stock, a shade deeper so two sheets never read as one. */
.tag {
  background: linear-gradient(180deg, var(--tag-top), var(--tag-bottom));
  border-radius: var(--radius);
  box-shadow: var(--drop-soft);
  padding: 22px 24px;
}

h1.page { font-size: clamp(32px, 7.5vw, 42px); font-weight: 800; margin: 0 0 4px; }
.updated { color: var(--ink-faint); font-size: 14px; font-weight: 700; margin: 0 0 30px; }

/* StampBadge: heavy tracked caps in a 2.5px outlined box, tilted like it was
   pressed by hand. */
.stamp {
  display: inline-block;
  font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--green) 85%, transparent);
  border: 2.5px solid color-mix(in srgb, var(--green) 75%, transparent);
  border-radius: 8px;
  padding: 4px 11px;
  transform: rotate(-1.5deg);
  margin-bottom: 16px;
}
.stamp.amber { color: color-mix(in srgb, var(--amber) 90%, transparent);
               border-color: color-mix(in srgb, var(--amber) 80%, transparent); }
.stamp.orange { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 75%, transparent); }
.stamp.blue { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 70%, transparent); }

h2 { font-size: 21px; font-weight: 800; margin: 0 0 10px; }
h3 { font-size: 18.5px; font-weight: 800; margin: 26px 0 8px; }
h3:first-child { margin-top: 0; }

p, li { color: var(--ink-body); }
.updated, footer .entity { color: var(--ink-faint); }
p { margin: 0 0 13px; }
p:last-child { margin-bottom: 0; }
ul { margin: 0 0 13px; padding-left: 20px; }
li { margin-bottom: 7px; }
strong { color: var(--ink); font-weight: 700; }

/* PerforatedDivider: a 2px dashed rule with a 22px notch bitten out of each
   edge. The notches are painted in the colour behind the sheet, exactly as the
   app does it, which is why this only works on a sheet sitting on the cream. */
.tear {
  position: relative;
  height: 0;
  border-top: 2px dashed var(--tear);
  margin: 24px -28px;
}
.tear::before, .tear::after {
  content: "";
  position: absolute; top: -11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cream);
}
.tear::before { left: -11px; }
.tear::after { right: -11px; }

/* The beats list: a coloured dot per line, cycling the game's tones. */
ul.beats { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; }
ul.beats li { display: flex; gap: 11px; align-items: baseline; }
ul.beats .dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber); transform: translateY(-1px);
}
ul.beats li:nth-child(2) .dot { background: var(--green); }
ul.beats li:nth-child(3) .dot { background: var(--orange); }
ul.beats li:nth-child(4) .dot { background: var(--blue); }

/* ---------- the footer, a tear-off stub ---------- */

footer {
  padding: 0 22px 52px;
}
footer .stub {
  max-width: 640px; margin: 0 auto;
  background: linear-gradient(180deg, var(--tag-top), var(--tag-bottom));
  border-radius: var(--radius);
  box-shadow: var(--drop-soft);
  padding: 24px 28px 22px;
}
footer nav { display: flex; flex-wrap: wrap; gap: 15px; }
footer nav a { color: var(--ink-soft); font-weight: 700; font-size: 14.5px; }
footer .entity {
  font-style: normal;
  font-size: 13.5px; line-height: 1.62; color: var(--ink-faint);
  margin: 0;
}
footer .entity strong { color: var(--ink-soft); font-weight: 800; }
footer .entity a { color: var(--ink-soft); font-weight: 700; }