/* Cut-paper design system for pages the agent builds. Colours come from the agent's palette via CSS vars. */
:root {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --cut-shadow: drop-shadow(1.5px 2.5px 0 rgb(31 42 68 / .22));
}

.site {
  --paper: #F7F2E7; --ink: #1F2A44; --accent: #E8503A; --accent2: #6BAA5C;
  color: var(--ink);
  font-family: Nunito, system-ui, sans-serif;
}
.page-root { display: flex; flex-direction: column; gap: 54px; transform: var(--tf); transition: transform 600ms; }

.c-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; transform: var(--tf); }
.c-row > * { flex: 1 1 0; min-width: min(150px, 100%); } /* too narrow to read: wrap onto a new line instead */
.c-row > .t-image { flex: 0 0 auto; } /* a picture takes its own width; the words get the rest */
.c-row.align-center { align-items: center; }
.c-stack { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; transform: var(--tf); }
.c-stack.align-center { align-items: center; text-align: center; }
.c-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; transform: var(--tf); }
/* A collage places each child freely: centre at left/top, width in %, set inline by render.js. */
.c-collage { height: var(--h, 440px); width: 100%; align-self: stretch; transform: var(--tf); } /* its children are absolutely placed, so it has no width of its own */
/* A child's left/top start at its centre spot (render.js); app.js moves it to its top-left corner before it's ever
   painted, so nothing here animates into place and translate stays free for hover and wobble. */
.c-collage > * { position: absolute !important; margin: 0 !important; }
.c-collage .p-image { width: 100% !important; }
.c-collage .p-image img { width: auto; max-width: 100%; max-height: 220px; } /* tall pictures shouldn't tower over the board */
.c-collage > .t-image { z-index: 1; }
.c-collage > :not(.t-image) { z-index: 2; } /* words always sit on top of pictures */
/* Phones: a collage is too cramped to place freely, so its pieces stack; big type steps down. */
/* On phones a collage zig-zags down the page, pieces alternating left and right, instead of one centred column. */
@media (max-width: 700px) {
  .c-collage { height: auto; display: flex; flex-direction: column; gap: 6px; }
  .c-collage > * { position: relative !important; left: auto !important; top: auto !important; width: auto !important; max-width: 70%; }
  .c-collage .t-image .caption { max-width: 100%; }
  .c-collage > .piece { margin-inline: 0; align-self: flex-start; }
  .c-collage > .piece:nth-child(even) { align-self: flex-end; }
  .c-collage .p-image { width: min(220px, 100%) !important; }
}
@media (max-width: 700px) { .c-row { flex-direction: column; } .c-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Every leaf is a piece of paper with a slight hand-placed tilt and a hard, short shadow. */
.piece { --flip: translate(0px, 0px); position: relative; transform: var(--flip) var(--tf); filter: var(--cut-shadow); }
.piece.ghost { filter: none; outline: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); outline-offset: 2px; border-radius: 6px; transform: none; }
.piece.ghost > * { visibility: hidden; }
.piece.land { animation: land 420ms cubic-bezier(.2, 1.4, .4, 1); }
@keyframes land { from { transform: var(--tf) scale(1.06) translateY(-6px); } }
.piece.slap { animation: slap 420ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes slap { from { transform: var(--tf) scale(1.5) translateY(-30px); opacity: 0; } }
.piece.poof { animation: poof 520ms cubic-bezier(.3, 1.5, .5, 1); }
/* A new page's pieces drop onto the sheet one after another (app.js staggers animation-delay). */
.piece.deal { animation: deal-in 420ms cubic-bezier(.2, 1.3, .4, 1) backwards; }
@keyframes deal-in { from { transform: var(--tf) translateY(-26px) rotate(-3deg) scale(1.04); opacity: 0; } }
@keyframes poof { 0% { transform: var(--tf) scale(.8); } 60% { transform: var(--tf) scale(1.06); } }

.paper-accent { background: var(--accent) var(--grain); color: var(--paper); }
.paper-accent2 { background: var(--accent2) var(--grain); color: var(--paper); }
.paper-paper { background: color-mix(in srgb, var(--paper) 55%, white) var(--grain); color: var(--ink); }
.paper-ink { background: var(--ink) var(--grain); color: var(--paper); }

.p-nav { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 10px; border-bottom: 3px solid var(--ink); }
.p-nav b { font-size: 22px; font-weight: 900; }
.p-nav span { display: flex; gap: 22px; }
.p-nav i { font-style: normal; font-weight: 800; font-size: 15px; }
.t-nav { filter: none; }

.p-heading { margin: 0; font-weight: 900; line-height: 1.02; letter-spacing: -0.01em; }
.p-heading.size-xl { font-size: 52px; }
.p-heading.size-l { font-size: 40px; }
.p-heading.size-m { font-size: 28px; }
.p-heading.paper-accent, .p-heading.paper-accent2 {
  padding: 12px 26px 14px 18px;
  clip-path: polygon(0 0, 97% 0, 99.3% 9%, 96.8% 17%, 99.6% 26%, 97.2% 35%, 100% 44%, 97.4% 53%, 99.2% 62%, 96.9% 71%, 99.7% 80%, 97.3% 89%, 99% 95%, 97.5% 100%, 0 100%);
}

.p-text { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; max-width: 34em; }
.piece a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.piece a:hover { color: var(--accent); }
.t-text, .t-list, .t-quote, .t-stat, .t-heading:not(:has(.paper-accent, .paper-accent2)) { filter: none; }
/* Restyled words: a cut-out picture of them at the words' own size, with the paper shadow; the words stay for screen readers. */
.p-letters img { display: block; max-width: none; height: auto; }
.piece:has(> .p-letters) { filter: var(--cut-shadow); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.p-button { display: inline-block; padding: 12px 22px; border-radius: 4px; font-size: 18px; font-weight: 900; }
.t-button { align-self: flex-start; }
.c-stack.align-center > .t-button, .c-row.align-center > .t-button { align-self: center; }

.p-search { display: flex; gap: 10px; align-items: center; }
.p-search .field { display: flex; align-items: center; gap: 10px; min-width: min(360px, 60vw); padding: 12px 18px; background: #fffdf8 var(--grain); border: 2.5px solid var(--ink); border-radius: 999px; font-weight: 700; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.p-search svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }

.p-art { aspect-ratio: 1; }
.p-art.size-s { width: 96px; }
.p-art.size-m { width: 170px; }
.p-art.size-l { width: 250px; }
.p-art svg, .card-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.t-art { filter: none; display: flex; justify-content: center; }

.p-card { height: 100%; padding: 14px 16px 16px; border-radius: 4px; background: color-mix(in srgb, var(--paper) 55%, white) var(--grain); display: flex; flex-direction: column; gap: 4px; }
.card-art { width: 84px; height: 84px; margin: 0 auto 6px; }
.p-card h3 { margin: 0; font-size: 20px; font-weight: 900; text-align: center; }
.p-card p { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; }

.p-badge { width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 14px; transform: rotate(-9deg); font-size: 16px; font-weight: 900; line-height: 1.1; }
.t-badge { align-self: center; flex: 0 1 auto; }

.p-sign { display: flex; flex-direction: column; align-items: center; }
.p-sign .board { background: #FFFBF2 var(--grain); padding: 14px 20px; border-radius: 3px; font-size: 22px; font-weight: 900; text-align: center; transform: rotate(-3deg); }
.p-sign .stick { width: 10px; height: 34px; background: #B08556 var(--grain); }
.t-sign { align-self: center; flex: 0 1 auto; }
.p-sign .board { max-width: 440px; }

.p-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 17px; font-weight: 700; }
.p-list li::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 10px; background: var(--accent); transform: rotate(8deg); }
.p-quote { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.3; }
.p-quote::before { content: "\201C"; color: var(--accent); font-size: 1.6em; line-height: 0; vertical-align: -0.35em; margin-right: 4px; }
.p-quote cite { display: block; margin-top: 6px; font-size: 14px; font-style: normal; font-weight: 800; opacity: .7; }
.p-stat b { display: block; font-size: 46px; font-weight: 900; line-height: 1; color: var(--accent); }
.p-stat span { font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.p-footer { padding-top: 10px; border-top: 3px solid var(--ink); font-size: 14px; font-weight: 800; }
.t-footer { filter: none; }
.p-gap { min-height: 70px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* Fonts and caps from a node's style. */
.font-marker, .font-marker * { font-family: "Permanent Marker", cursive !important; font-weight: 400 !important; }
.font-serif, .font-serif * { font-family: Fraunces, Georgia, serif !important; }
.font-mono, .font-mono * { font-family: "Space Mono", ui-monospace, monospace !important; }
.font-comic, .font-comic * { font-family: "Comic Neue", "Comic Sans MS", cursive !important; }
.caps, .caps * { text-transform: uppercase; }

/* Mischief pieces overlap whatever comes before them. Stamps, tape, stickers and decals take up no space in the
   layout (a zero-size anchor after the piece they cover), so slapping one on never reflows the page. */
.t-stamp, .t-tape, .t-sticker, .t-decal { flex: 0 0 0 !important; width: 0; height: 0; margin: 0 !important; align-self: center; z-index: 3; }
.t-stamp > *, .t-tape > *, .t-sticker > *, .t-decal > * { position: absolute; left: 0; top: 0; translate: -50% -80%; }
.t-popup { z-index: 3; align-self: center; flex: 0 1 auto; }
/* Most are stuck onto the corner of the piece before them (render.js draws them inside it). */
.c-row, .c-stack, .c-grid, .c-collage { position: relative; }
.piece.stuck { position: absolute; z-index: 3; width: auto; height: auto; flex: none !important; }
.piece.stuck > * { position: static; translate: none; }
.piece.stuck.s0 { right: 0; top: 0; translate: 30% -30%; }
.piece.stuck.s1 { left: 0; bottom: 0; translate: -30% 30%; }
.piece.stuck.s2 { left: 0; top: 0; translate: -30% -30%; }
/* Stickers stay inside their picture, in its emptiest corner (app.js), clear of other pieces' words and the screen's edge. */
.piece.stuck.t-decal { translate: 0 0; }
.t-stamp { filter: none; }
.p-stamp { white-space: nowrap; padding: 8px 18px; border: 5px double #C8352B; border-radius: 6px; color: #C8352B; font-size: 30px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-12deg); opacity: .88; }
.t-tape { filter: none; }
.p-tape { min-width: 220px; padding: 8px 26px; background: rgb(235 220 180 / .82); color: #1F2A44; font: 400 20px "Permanent Marker", cursive; text-align: center; transform: rotate(4deg); clip-path: polygon(2% 0, 98% 4%, 100% 50%, 97% 100%, 3% 96%, 0 50%); }
.p-sticker { width: 140px; height: 140px; display: grid; place-items: center; text-align: center; padding: 26px; font-size: 16px; font-weight: 900; line-height: 1.05; transform: rotate(10deg);
  clip-path: polygon(50% 0, 61% 14%, 79% 9%, 80% 27%, 97% 33%, 88% 50%, 97% 67%, 80% 73%, 79% 91%, 61% 86%, 50% 100%, 39% 86%, 21% 91%, 20% 73%, 3% 67%, 12% 50%, 3% 33%, 20% 27%, 21% 9%, 39% 14%); }
.t-popup { margin-top: -110px; }
.p-popup { width: min(360px, 80vw); background: #FFFDF8 var(--grain); border: 2.5px solid var(--ink); border-radius: 6px; overflow: hidden; }
.p-popup .bar { display: flex; justify-content: space-between; padding: 6px 12px; background: var(--ink); color: var(--paper); font-weight: 900; font-size: 14px; }
.p-popup .bar i { font-style: normal; }
.p-popup p { margin: 12px 14px; font-weight: 800; font-size: 16px; }
.p-popup .btns { display: flex; gap: 8px; padding: 0 14px 14px; }
.p-popup .p-button { font-size: 14px; padding: 8px 14px; }

/* Notes, dividers and captions. */
.p-note { width: fit-content; min-width: 170px; max-width: 300px; min-height: 120px; padding: 18px 16px; font: 400 19px/1.25 "Permanent Marker", cursive; transform: rotate(-2deg); }
.p-divider { width: 100%; min-width: 120px; height: 14px; }
.p-divider.look-line { border-top: 3px solid var(--ink); height: 0; }
.p-divider.look-double { border-top: 3px double var(--ink); border-bottom: 3px solid var(--ink); height: 7px; }
.p-divider.look-wavy { background: radial-gradient(circle at 10px -4px, transparent 9px, var(--ink) 10px, var(--ink) 12px, transparent 13px) 0 0 / 20px 14px repeat-x; }
.p-divider.look-stars { background: radial-gradient(circle, var(--accent) 3.5px, transparent 4.5px) 0 50% / 26px 14px repeat-x; }
.t-image .caption { margin-top: 8px; padding: 5px 10px; max-width: 260px; background: color-mix(in srgb, var(--paper) 40%, white); font-size: 14px; font-weight: 600; line-height: 1.35; text-align: left; }
.t-image { flex-direction: column; align-items: center; width: fit-content; margin-inline: auto; }

/* Illustrations drawn by the image model: cut-out stickers with the same hard paper shadow. */
.t-image, .t-decal { filter: none; display: flex; justify-content: center; }
.p-image { display: grid; place-items: center; } /* pictures are cropped to their subject, so the box takes their shape */
.p-image.size-s { width: 110px; }
.p-image.size-m { width: 190px; }
.p-image.size-xl { width: 340px; }
.p-image.size-l { width: 260px; }
.p-decal img, .card-img img { width: 100%; height: 100%; object-fit: contain; display: block; filter: var(--cut-shadow); }
.p-image img { width: 100%; height: auto; max-height: 360px; object-fit: contain; display: block; filter: var(--cut-shadow); }
.card-img { width: 128px; height: 128px; margin: 0 auto 6px; }
.p-decal { width: 76px; height: 76px; transform: rotate(-10deg); }
.pic-wait, .pic-fail { width: 100%; height: 100%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.pic-wait { animation: pic-wait 1.1s ease-in-out infinite alternate; }
@keyframes pic-wait { to { opacity: .35; transform: scale(.92); } }

/* Phones: big type steps down (after the base sizes, so it wins). */
@media (max-width: 700px) {
  .t-heading .p-letters img { max-width: 100%; } /* a restyled heading shrinks to fit the phone rather than run off it */
  .p-decal { width: 60px; height: 60px; }
  .p-heading.size-xl { font-size: 34px; }
  .p-heading.size-l { font-size: 26px; }
}