/* Peelgood's site. One stylesheet for the board (index) and the plain pages behind it.

   The two faces are served from here rather than from Google Fonts, so that a page which
   says the app sends nothing to anyone does not itself send every visitor's address to a
   third party. Both are SIL Open Font Licence; the files are Google's latin builds. */
@font-face{font-family:'Kalam'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/kalam-400.woff2) format('woff2')}
@font-face{font-family:'Kalam'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/kalam-700.woff2) format('woff2')}
@font-face{font-family:'Nunito'; font-style:normal; font-weight:400 700; font-display:swap; src:url(fonts/nunito.woff2) format('woff2')}

/*

   The paper colours are the app's own (Peelgood/Design/Palette.swift) and never change
   with the theme: the icon keeps its notes full colour on a dark ground, and so does this
   page. Only the ground, the app's own voice (hint, footer, legal pages) and the shadow
   move between light and dark. The two grounds are the icon's, measured off an iOS 26
   render: white sliding to #EAEAEA at the foot in light, #323231 to #141414 in dark. */
:root{
  color-scheme:light dark;
  --ground:#FFFFFF;
  --ground-deep:#EAEAEA;
  --wash:rgba(255,255,255,.30);  /* Icon Composer's glass: the ground washing up the paper */
  --rim:rgba(255,255,255,.38);   /* the hairline specular edge each note has in light */
  --voice:#1A1A1A;               /* the app's voice, on the ground */
  --voice-muted:#5F6462;         /* 5:1 on the foot of the light ground, where the pager and footer sit */
  --voice-link:#2E5F8A;          /* StickerInk.navy */
  --hairline:rgba(26,26,26,.14);
  --shadow:rgba(26,26,26,.30);
  --shadow-soft:rgba(26,26,26,.16);
  --focus:#3B7A57;               /* Paper.pen */

  --ink:#1A1A1A;                 /* handwriting on paper, both themes */
  --ring:#8A8F8C;                /* Paper.muted: the circled number's ring */

  --yellow:#F5D547; --yellow-fold:#D9BC3C;
  --pink:#F2A6B8;   --pink-fold:#D98FA0;
  --blue:#A9CBE8;   --blue-fold:#8FB2CE;
  --green:#B9D8C4;  --green-fold:#A0C0AB;
  --lilac:#D9C9E8;  --lilac-fold:#BFB0CE;
  --white:#FDFDFB;  --white-fold:#E4E4DE;
  --navy:#2E5F8A;

  /* One note's side. The pile is 1.55 of it wide, which is what clears a 375pt phone.
     The rem floor is for zoom: a note sized by the viewport alone never gets bigger
     when a narrow window is zoomed, because the viewport shrinks with it. */
  --n:max(min(64vw, 400px), 12rem);

  /* Two voices, the app's own rule: handwriting is anything the couple wrote or chose,
     rounded sans is anything the app says. Kalam stands in for the app's Bradley Hand the
     same way Bradley Hand stands in for a licensed face. */
  --hand:'Kalam','Bradley Hand','Segoe Print','Comic Sans MS',cursive;
  --app:'Nunito',ui-rounded,-apple-system,'SF Pro Rounded',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#323231; --ground-deep:#141414;
    --wash:rgba(19,20,20,.30); --rim:rgba(255,255,255,.06);
    --voice:#F1F1EE; --voice-muted:#9C9F9D; --voice-link:#A9CBE8;
    --hairline:rgba(255,255,255,.14);
    --shadow:rgba(0,0,0,.62); --shadow-soft:rgba(0,0,0,.40);
    --focus:#B9D8C4;
  }
}

*{box-sizing:border-box}
/* The gradient runs once from the top of the document to its foot. It is not pinned to
   the viewport: iOS ignores background-attachment:fixed, and a gradient sized to one
   viewport then tiles down a long page with a seam at every fold. */
html{min-height:100%; background:var(--ground-deep)}
body{
  margin:0; min-height:100dvh; color:var(--voice);
  background:var(--ground);
  background-image:linear-gradient(180deg, var(--ground) 0%, var(--ground) 12%, var(--ground-deep) 100%);
  font-family:var(--app); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--voice-link)}
:focus-visible{outline:2px solid var(--focus); outline-offset:4px; border-radius:6px}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}

/* ---------- the board: pile, pager, footer ---------- */
.door{min-height:100dvh; display:grid; grid-template-rows:1fr auto auto; justify-items:center}
.stage{display:grid; place-items:center; width:100%; padding:6vh 0 2vh}
.stack{
  position:relative; width:calc(var(--n) * 1.55); height:calc(var(--n) * 1.42); max-width:100vw;
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:pan-y; user-select:none;
  border-radius:12px;
}

/* One note: a wrapper that carries the shadow and the transform, and inside it the paper,
   clipped to the cut-corner shape. The split is because a clipped element cannot cast a
   box-shadow, so the shadow is a filter on the wrapper. */
.note{
  position:absolute; left:50%; top:50%; width:var(--n); height:var(--n);
  margin:calc(var(--n) / -2) 0 0 calc(var(--n) / -2);
  filter:drop-shadow(0 8px 10px var(--shadow-soft));
  transition:transform 620ms cubic-bezier(.22,.9,.24,1), opacity 320ms ease, filter 620ms ease;
  will-change:transform;
}
/* The slots are the icon's own placements: the front note sits 12.5% left and 5.5% down
   of the canvas centre and the back note the mirror, which on a note-sized unit is the
   ±20% / ±9% here, with the icon's -10° and +8°. */
.note.s0{transform:translate(-20%, 9%) rotate(-10deg); z-index:3; filter:drop-shadow(0 16px 18px var(--shadow))}
.note.s1{transform:translate(20%, -9%) rotate(8deg); z-index:2}
.note.s2{transform:translate(5%, -2%) rotate(-3deg) scale(.985); z-index:1; filter:drop-shadow(0 6px 8px var(--shadow-soft))}
.note.buried{transform:translate(5%, -2%) rotate(-3deg) scale(.985); z-index:0; opacity:0; pointer-events:none}
/* Peeled off toward the hand that took it: down and left, turning as it goes. */
.note.leaving{
  transform:translate(-64%, 46%) rotate(-26deg) scale(1.03); opacity:0; z-index:4;
  transition:transform 520ms cubic-bezier(.45,.02,.75,.3), opacity 300ms ease-in 200ms, filter 300ms;
  filter:drop-shadow(0 26px 26px var(--shadow));
}
.note.snap{transition:none !important}

/* Without the script there is no pile to page through, so the notes simply stack down
   the page in order and every word is readable. The script marks <html> the moment it
   runs, so this only ever applies when it did not. */
html:not(.js) .stack{width:auto; height:auto; max-width:calc(var(--n) + 40px); cursor:auto; display:grid; gap:28px; padding:20px}
html:not(.js) .note{position:static; margin:0; transform:none; opacity:1; filter:drop-shadow(0 8px 10px var(--shadow-soft))}
html:not(.js) .paper{position:relative; width:var(--n); height:var(--n)}
html:not(.js) .pager{display:none}

.paper{
  position:absolute; inset:0; background:var(--paper); color:var(--ink);
  clip-path:polygon(0 0, 100% 0, 100% 81.5%, 81.5% 100%, 0 100%);
  padding:9% 10% 12% 10%;
  font-family:var(--hand); isolation:isolate;
}
.paper > *{position:relative; z-index:1}
/* Icon Composer's glass, as it renders: not a highlight but the ground washing ~30% up the
   paper from the foot, plus a hairline light rim in light. */
.paper::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--wash) 100%);
  box-shadow:inset 0 0 0 1px var(--rim);
}
/* The fold: the same paper turned back on itself in the cut corner. */
.paper::after{
  content:""; position:absolute; right:0; bottom:0; width:18.5%; height:18.5%; z-index:-1;
  background:var(--fold); clip-path:polygon(0 0, 100% 0, 0 100%);
}
.note[data-color="pink"]   .paper{--paper:var(--pink);   --fold:var(--pink-fold)}
.note[data-color="yellow"] .paper{--paper:var(--yellow); --fold:var(--yellow-fold)}
.note[data-color="blue"]   .paper{--paper:var(--blue);   --fold:var(--blue-fold)}
.note[data-color="green"]  .paper{--paper:var(--green);  --fold:var(--green-fold)}
.note[data-color="lilac"]  .paper{--paper:var(--lilac);  --fold:var(--lilac-fold)}
.note[data-color="white"]  .paper{--paper:var(--white);  --fold:var(--white-fold)}

/* What is written on a note. A note behind the front one keeps its writing faint until it
   comes forward: the icon's notes are blank, and two notes' worth of words at once is a
   wall, not a pile. */
.paper > *{transition:opacity 420ms ease}
html.js .note:not(.s0) .paper > *{opacity:.22}
html.js .note.leaving .paper > *{opacity:1}

.paper h1,.paper h2{margin:0; font-weight:700; line-height:1.05; letter-spacing:-.01em; text-wrap:balance}
.paper h1{font-size:calc(var(--n) * .175); margin-top:calc(var(--n) * .025); max-width:74%}
.paper h2{font-size:calc(var(--n) * .12); max-width:78%}
.paper p{margin:calc(var(--n) * .045) 0 0; font-size:calc(var(--n) * .07); line-height:1.3; max-width:88%}
.paper p.eg{color:rgba(26,26,26,.74)} /* 6:1 on the yellow, still 4:1 under the dark wash */
.paper .tag{margin-top:calc(var(--n) * .035); font-size:calc(var(--n) * .062); line-height:1.25}
/* A link on paper is written in ink, like everything else on it: the navy sticker ink
   fell under 3:1 once the dark wash reached the foot of the note. */
.paper a{color:var(--ink); text-decoration-thickness:1.5px; text-underline-offset:.12em}

/* The circled number in a note's corner. On the board it is what the note is worth; here
   it is where you are in the pile. */
.num{
  position:absolute; top:7%; right:8%; width:calc(var(--n) * .135); height:calc(var(--n) * .135);
  border:1.5px solid var(--ring); border-radius:50% 48% 52% 50% / 52% 50% 50% 48%;
  transform:rotate(-6deg); display:grid; place-items:center;
  font-size:calc(var(--n) * .066); font-weight:700; color:#3F4442; line-height:1; /* 5:1 on the pink */
}

/* Stickers: a white die-cut edge round an ink shape, lifted a hair off the paper. */
.sticker{position:absolute; filter:drop-shadow(0 1.5px 1.5px rgba(26,26,26,.28)); pointer-events:none}
.sticker svg{display:block; width:100%; height:100%; overflow:visible}

/* The App Store pill on the last note. Black on paper in both themes: it is a badge, and
   the paper does not change with the theme either. */
.store{
  display:inline-flex; align-items:center; gap:.5em; margin-top:calc(var(--n) * .045);
  background:#1A1A1A; color:#FDFDFB; border-radius:999px; padding:.45em 1em .45em .85em;
  font-family:var(--app); font-size:calc(var(--n) * .055); font-weight:700; letter-spacing:.005em;
  white-space:nowrap;
}
.store svg{width:1.15em; height:1.15em; fill:currentColor}
.store small{font-weight:600; opacity:.7; font-size:.85em}

/* Read aloud but not drawn: the live region that says which note arrived. */
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* The pager is the board's own week nav, borrowed. */
.pager{
  display:flex; align-items:center; gap:.4em; font-family:var(--hand); font-size:22px; color:var(--voice-muted);
  padding:0 0 4vh; user-select:none;
}
.pager button{width:44px; height:44px; display:grid; place-items:center; color:var(--voice-muted); border-radius:50%}
.pager button:hover{color:var(--voice)}
.pager svg{width:20px; height:20px; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.pager .where{min-width:7.5em; text-align:center; font-variant-numeric:tabular-nums}

footer{
  width:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.35em 1.1em;
  padding:0 20px 22px; font-size:13px; color:var(--voice-muted);
}
footer a{color:inherit; text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); text-underline-offset:.15em}
footer a:hover{color:var(--voice); text-decoration-color:currentColor}
footer .sep{opacity:.5}

/* ---------- the plain pages: privacy, terms, support ----------
   Anything legal is a plain page in the app's own voice, not dressed-up paper: a person
   should be able to tell they are reading about their data and not a note. */
.page{max-width:65ch; margin:0 auto; padding:7vh 24px 10vh; font-size:17px; line-height:1.62}
.page .back{display:inline-flex; align-items:center; gap:.3em; font-family:var(--hand); font-size:21px; color:var(--voice-muted); text-decoration:none; margin-bottom:5vh}
.page .back:hover{color:var(--voice)}
.page .back svg{width:18px; height:18px; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.page h1{font-size:34px; line-height:1.15; margin:0 0 .25em; font-weight:700; letter-spacing:-.015em; text-wrap:balance}
.page .meta{color:var(--voice-muted); font-size:14px; margin:0 0 2.2em}
.page h2{font-size:20px; margin:2em 0 .5em; font-weight:700; letter-spacing:-.01em}
.page p,.page li{margin:0 0 1em}
.page ul{padding-left:1.2em}
.page .lede{font-size:20px; line-height:1.5}
.page hr{border:0; border-top:1px solid var(--hairline); margin:2.5em 0}
.page .foot{font-size:14px; color:var(--voice-muted)}
.page + footer{padding-top:0}

@media (prefers-reduced-motion:reduce){
  .note,.note.leaving{transition:opacity 260ms ease !important; filter:drop-shadow(0 8px 10px var(--shadow-soft)) !important}
  .note.leaving{transform:translate(-20%, 9%) rotate(-10deg)}
}
@media (max-height:720px){ :root{--n:min(64vw, 300px)} .stage{padding-top:3vh} }
@media (max-height:600px){ :root{--n:min(64vw, 250px)} }