/* ============================================================
   Drawn By Us — website styles, built on the brand kit tokens.
   ============================================================ */

@font-face {
  font-family: "Ingway Hand";
  src: url("fonts/IngwayHand.otf") format("opentype"),
       url("fonts/IngwayHand.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: block;
}

:root {
  --paper: #fbfbf6;
  --rule: #b9cde6;
  --margin: #e0827f;
  --ink: #232329;
  --ink-soft: #5d6070;
  --pen: #2c4f9e;
  --highlight: #fff07a;
  --locked: rgba(120, 122, 135, .13);

  --line: 34px;
  --gutter: 54px;          /* margin line sits at gutter - 12px */
  --page-edge: 18px;
  --stack: 22px;
  --column: 680px;         /* website column (the apps use 560px) */
  --tap-min: 48px;

  --font-hand: "Ingway Hand", "Comic Neue", "Segoe Print", "Bradley Hand", cursive;
}
@media (min-width: 641px) { :root { --gutter: 96px; } }

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

/* ---------- the ruled exercise-book page ---------- */
body {
  min-height: 100vh;
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, transparent calc(var(--gutter) - 12px), var(--margin) calc(var(--gutter) - 12px), var(--margin) calc(var(--gutter) - 10px), transparent calc(var(--gutter) - 10px)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line));
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 23px;
  line-height: var(--line);
}
/* hide text until the handwriting font is in, so nothing flashes */
main, .ribbon, footer { opacity: 0; transition: opacity .2s; }
.ready main, .ready .ribbon, .ready footer { opacity: 1; }

h1, h2, h3 { font-weight: normal; margin: 0; text-wrap: balance; }
h1 { font-size: 54px; line-height: calc(var(--line) * 2); }
h2 { font-size: 36px; line-height: calc(var(--line) * 1.5); margin-top: var(--line); }
h3 { font-size: 30px; line-height: var(--line); }
p  { margin: 0 0 var(--line); }
a  { color: inherit; }
:focus-visible { outline: 3px dashed var(--pen); outline-offset: 5px; border-radius: 4px; }

.center { text-align: center; }
.muted { color: var(--ink-soft); }
.hl { background: linear-gradient(transparent 18%, var(--highlight) 18%, var(--highlight) 88%, transparent 88%);
      padding: 0 .2em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tip { font-size: 20px; color: var(--ink-soft); border-left: 3px solid var(--margin); padding-left: 12px; }

/* ---------- hand-drawn boxes (boxes.js draws the border) ---------- */
.hb { position: relative; isolation: isolate; }
.hb > svg.rough { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); pointer-events: none; overflow: visible; z-index: -1; }
.hb > svg.rough path { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }

/* ---------- top ribbon ---------- */
.ribbon {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: calc(var(--line) * 2);
  padding: 0 var(--page-edge) 0 var(--gutter);
  background: var(--paper);
  border-bottom: 2px dashed var(--rule);
}
.ribbon .brand { font-size: 32px; text-decoration: none; white-space: nowrap; }
.ribbon nav { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.ribbon nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 14px; font-size: 22px; text-decoration: none;
  transition: transform .12s ease;
}
.ribbon nav a:active { transform: translateY(2px) rotate(-.4deg); }

/* ---------- page column ---------- */
main {
  max-width: calc(var(--column) + var(--gutter) + var(--page-edge) * 2);
  margin: 0 auto;
  padding: var(--line) var(--page-edge) calc(var(--line) * 3) calc(var(--gutter) + var(--page-edge));
}
@media (min-width: 900px) { main { padding-left: var(--page-edge); } }

/* ---------- logo ---------- */
.logo { display: block; width: 280px; max-width: 70%; height: auto; margin: 0 auto var(--line); }

/* ---------- video ---------- */
.video { aspect-ratio: 16 / 9; margin: var(--line) 0 calc(var(--line) * 1.5); display: grid; place-items: center; }
.video .inside { text-align: center; color: var(--ink-soft); padding: 0 20px; }
.video svg { width: 84px; height: 84px; display: block; margin: 0 auto 6px; }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 66px; min-width: 220px;
  padding: 10px 26px; font-size: 30px; text-decoration: none;
  transition: transform .12s ease;
}
.btn.big { min-height: 80px; font-size: 36px; }
.btn:active { transform: translateY(2px) rotate(-.4deg); }
.btn-row { display: flex; gap: var(--stack); justify-content: center; flex-wrap: wrap; margin: var(--line) 0; }
.link { font-size: 24px; color: var(--ink-soft); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- home: words on the left, pinned photos on the right ---------- */
main.wide { max-width: calc(1040px + var(--gutter) + var(--page-edge) * 2); }
@media (min-width: 900px) { main.wide { padding-left: calc(var(--gutter) + var(--page-edge)); } }
main.wide .join { max-width: 680px; margin-left: auto; margin-right: auto; }
.about-row { display: grid; gap: var(--line); margin-top: var(--line); }
.about-row .about-text h2 { margin-top: 0; }
@media (min-width: 900px) {
  .about-row { gap: 48px; }
}
@media (max-width: 899px) {
  .pinboard { order: -1; max-width: 420px; width: 100%; margin: 0 auto; }
}

.pinboard { position: relative; padding-top: 22px; }
.pinned {
  margin: 0; padding: 14px 14px 0;
  transform: rotate(-2deg); transition: transform .6s ease;
}
.pinned .pin { position: absolute; top: -26px; left: 50%; width: 34px; height: 46px; margin-left: -17px; z-index: 2; }
.slides { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s ease;
}
.slides img.show { opacity: 1; }
/* the dots sit in the white strip at the bottom of the photo print */
.dots { display: flex; justify-content: center; gap: 2px; padding: 4px 0 6px; }
.dots button { width: 30px; height: 30px; padding: 6px; border: 0; background: none; cursor: pointer; }
.dots svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 2.2; }
.dots .now svg { fill: var(--highlight); }

/* side by side: the photo stretches to exactly the height of the words next to it */
@media (min-width: 900px) {
  .about-row { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .about-text > :last-child { margin-bottom: 0; }
  .pinboard { display: flex; flex-direction: column; }
  .pinned { flex: 1; display: flex; flex-direction: column; min-height: 300px; }
  .slides { flex: 1; aspect-ratio: auto; }
}

/* ---------- mailing list box ---------- */
.join { padding: 26px 28px 30px; margin: calc(var(--line) * 1.5) 0 var(--line); text-align: center; }
.join h2 { margin-top: 0; }
.join p { margin-bottom: 22px; }
.join .tip { display: inline-block; border: 0; padding: 0; margin: 18px 0 0; }

/* ---------- values list ---------- */
.values { list-style: none; padding: 0; margin: 0 0 var(--line); counter-reset: v; }
.values li { position: relative; padding-left: 46px; margin-bottom: var(--line); }
.values li::before { counter-increment: v; content: counter(v) "."; position: absolute; left: 4px; top: 0; font-size: 30px; color: var(--margin); }
.values h3 { font-size: 30px; line-height: var(--line); }

/* note for things still to write — delete these once the words are in */
.todo { color: var(--ink-soft); border: 2px dashed var(--ink-soft); border-radius: 6px; padding: 0 8px; font-size: 18px; }

/* ---------- photos (behind the scenes) ---------- */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px var(--stack); margin: var(--line) 0; }
.photo { margin: 0; padding: 10px 10px 4px; text-align: center; }
.photo:nth-child(odd) { transform: rotate(-1.5deg); }
.photo:nth-child(even) { transform: rotate(1.2deg); }
.photo .pic { aspect-ratio: 1; display: grid; place-items: center; color: var(--ink-soft); font-size: 18px; border: 2px dashed var(--rule); }
.photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.photo figcaption { font-size: 22px; margin-top: 4px; }

/* ---------- big drawn mark on the mailing list pages ---------- */
.mark { width: 130px; height: 130px; display: block; margin: 0 auto 10px; }

/* ---------- socials, locked to the bottom of the left margin ---------- */
.socials {
  position: fixed; left: 0; bottom: 14px; z-index: 20;
  width: calc(var(--gutter) - 12px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.socials a { display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); transition: transform .12s ease; }
.socials a:hover { transform: rotate(-6deg); }
.socials svg, .socials img { width: 32px; height: 32px; }
@media (min-width: 641px) { .socials svg, .socials img { width: 40px; height: 40px; } .socials { gap: 12px; bottom: 22px; } }

/* ---------- footer ---------- */
footer { text-align: center; color: var(--ink-soft); font-size: 18px; padding: 0 var(--page-edge) var(--line) var(--gutter); }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  body { font-size: 21px; }
  h1 { font-size: 42px; }
  h2 { font-size: 32px; }
  .ribbon { position: relative; flex-direction: column; align-items: flex-start; justify-content: center; padding: 6px 10px 10px var(--gutter); gap: 6px; }
  .ribbon .brand { font-size: 28px; }
  .ribbon nav { justify-content: flex-start; gap: 10px; }
  .ribbon nav a { font-size: 19px; padding: 0 9px; min-height: 40px; }
  .logo { width: 210px; }
  .btn { font-size: 26px; min-width: 0; }
  .btn.big { font-size: 30px; }
  .join { padding: 22px 16px 24px; }
}

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