/* Ptakim! web pages — shared styles
   Concept: "פתקים / slips from the bowl." Every page is a paper slip on a table.
   New page: add <folder>/index.html, link this stylesheet, reuse the .slip / .eyebrow markup. */

:root {
  --table:      #ddcdac;  /* the surface the slip rests on */
  --paper:      #f3e9d6;  /* kraft / manila slip */
  --paper-edge: #e4d5b7;  /* torn-edge shadow */
  --ink:        #2a2018;  /* body text */
  --ink-soft:   #6b5d4a;  /* captions, metadata */
  --correct:    #2c7a3a;  /* swipe-right green — headings, links */
  --skip:       #c2410c;  /* swipe-left burnt orange — the "last updated" slip */
  --rule:       #d9c9a6;

  --slip-max:    680px;
  --bowl-max:    460px;

  --font-display: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* torn top edge — one reusable SVG mask, used by .slip--torn */
  --torn-edge:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 12 V5 L6 6 L12 3 L18 7 L24 4 L30 6 L36 2 L42 6 L48 4 L54 7 L60 3 L66 6 L72 4 L78 7 L84 3 L90 6 L96 4 L102 7 L108 4 L114 6 L120 4 V12 Z' fill='%23fff'/%3E%3C/svg%3E")
      top left / 120px 12px repeat-x,
    linear-gradient(#fff 0 0) 0 12px / 100% calc(100% - 12px) no-repeat;
}

/* Deliberately light-only: a paper slip resting on a table reads as a lit surface.
   Viewers in dark mode get a bright page — normal and expected for a legal/support page. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--table);
  padding: clamp(1.5rem, 5vw, 4rem) 1rem;
}

/* ---- the slip -------------------------------------------------------------- */

.slip {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  padding: clamp(1.75rem, 5vw, 3rem);
  box-shadow:
    0 1px 0 var(--paper-edge),
    0 18px 40px -18px rgba(20, 14, 6, 0.45);
}

/* torn top edge — reusable SVG mask (--torn-edge defined in :root) */
.slip--torn {
  padding-top: clamp(2.25rem, 6vw, 3.5rem);
  -webkit-mask: var(--torn-edge);
          mask: var(--torn-edge);
}

/* fold crease */
.slip__crease {
  border: 0;
  border-top: 1px dashed var(--rule);
  margin: 1.75rem 0;
}

/* ---- shared type -------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 2.7rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0.35rem 0 0;
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--correct);
  margin: 2.25rem 0 0.5rem;
  scroll-margin-top: 1.5rem;
}

p  { margin-bottom: 0.85rem; }
ul { padding-left: 1.35rem; margin-bottom: 0.85rem; }
li { margin-bottom: 0.3rem; }

a {
  color: var(--correct);
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-thickness: 2px; }

:where(a, .slip-link):focus-visible {
  outline: 2px solid var(--correct);
  outline-offset: 3px;
  border-radius: 1px;
}

strong { font-weight: 700; }

/* "last updated" slip */
.updated {
  display: inline-block;
  margin-top: 2.5rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  color: var(--paper);
  background: var(--skip);
}

/* back link */
.back {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}
.back:hover { color: var(--correct); }

/* ---- content-page shell -------------------------------------------------------------- */

.page {
  max-width: var(--slip-max);
  margin: 0 auto;
}

.toc {
  margin: 1.5rem 0 0.5rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.35);
  border-left: 3px solid var(--correct);
  font-size: 0.92rem;
}
.toc ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.toc li { margin-bottom: 0.15rem; }

/* ---- the bowl (landing) -------------------------------------------------------------- */

.bowl {
  max-width: var(--bowl-max);
  margin: 0 auto;
  text-align: center;
}

.bowl__lead {
  margin: 0.75rem auto 2.5rem;
  color: var(--ink-soft);
  max-width: 22em;
}

.stack {
  display: grid;
  gap: 1.1rem;
  text-align: left;
}

.slip-link {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border-radius: 2px;
  padding: 1.25rem 1.4rem;
  box-shadow:
    0 1px 0 var(--paper-edge),
    0 14px 30px -16px rgba(20, 14, 6, 0.5);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.slip-link::before {
  content: "";
  display: block;
  border-top: 1px dashed var(--rule);
  margin-bottom: 0.9rem;
}
.slip-link:hover,
.slip-link:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 var(--paper-edge),
    0 20px 38px -16px rgba(20, 14, 6, 0.55);
}
.slip-link b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
}
.slip-link span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.bowl__foot {
  margin-top: 2.75rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .slip-link { transition: none; }
}