/* ===============================================================
   strawberrycongee — shared stylesheet
   Linked by every page. Change something here and it changes
   everywhere, which is the point.

   The colours all come from the PALETTE block below. If you're
   editing by hand, that's usually the only part you need.
   =============================================================== */

/* ---------------------------------------------------------------
   PALETTE

   MAIN PALETTE: saccharide

   The :root block below is a copy of whichever palette that marker
   names — it is what the site actually renders. The named blocks
   underneath are the library the editor picks from.

   Both the marker and the copy are maintained by the visual editor
   ("make this the main one"). If you edit by hand, change both.
   --------------------------------------------------------------- */
:root {
  --page:       #c7d9ea;
  --card:       #fff7f0;
  --card-alt:   #e5d9e1;
  --ink:        #3a3448;
  --ink-soft:   #5f576f;
  --bar:        #4e4f70;
  --bar-ink:    #fff7f0;
  --bar-alt:    #c09dc3;
  --nav-ink:    #3a3448;
  --bar-dim:    #cbc9e0;
  --accent:     #ebaebc;
  --accent-ink: #3a3448;
  --accent-bg:  #ffe8dc;
  --open:       #41604f;
  --open-ink:   #c8dcbe;
  --open-bg:    #c8dcbe;
  --rule:       #ada3b9;
  --visited:    #6d5480;

  /* not a colour, so the editor leaves it alone: how tall every footer
     badge is drawn. Widths follow from each gif's own proportions. */
  --badge-h: 31px;

  --font-body: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive;
  --font-mono: "Courier New", Courier, monospace;
}

/* ---- Paperback-2 — manga newsprint, red stamp for commissions ---- */
:root[data-palette="paperback"] {
  --page:       #b8c2b9;
  --card:       #e3e8e3;
  --card-alt:   #cdd5cd;
  --ink:        #382b26;
  --ink-soft:   #5d4a42;
  --bar:        #382b26;
  --bar-ink:    #b8c2b9;
  --bar-alt:    #4f3e37;
  --nav-ink:    #cdd5cd;
  --bar-dim:    #9aa89b;
  --accent:     #382b26;
  --accent-ink: #b8c2b9;
  --accent-bg:  #cdd5cd;
  --open:       #f2ece2;
  --open-ink:   #a8322a;
  --open-bg:    #a8322a;
  --rule:       #8a938a;
  --visited:    #5d4a42;
}

/* ---- NOPAL-12 — sage ground, rosewater paper ---- */
:root[data-palette="nopal"] {
  --page:       #a8b5ae;
  --card:       #ffeced;
  --card-alt:   #fbd4d2;
  --ink:        #33333c;
  --ink-soft:   #5f5f69;
  --bar:        #6f4a50;
  --bar-ink:    #ffeced;
  --bar-alt:    #5c5638;
  --nav-ink:    #f1eab6;
  --bar-dim:    #ecd4d6;
  --accent:     #cca3a3;
  --accent-ink: #33333c;
  --accent-bg:  #ffeced;
  --open:       #4d5a3c;
  --open-ink:   #f1eab6;
  --open-bg:    #f1eab6;
  --rule:       #a8b5ae;
  --visited:    #6b4f57;
}

/* ---- saccharide — pastel arcade ---- */
:root[data-palette="saccharide"] {
  --page:       #c7d9ea;
  --card:       #fff7f0;
  --card-alt:   #e5d9e1;
  --ink:        #3a3448;
  --ink-soft:   #5f576f;
  --bar:        #4e4f70;
  --bar-ink:    #fff7f0;
  --bar-alt:    #c09dc3;
  --nav-ink:    #3a3448;
  --bar-dim:    #cbc9e0;
  --accent:     #ebaebc;
  --accent-ink: #3a3448;
  --accent-bg:  #ffe8dc;
  --open:       #41604f;
  --open-ink:   #c8dcbe;
  --open-bg:    #c8dcbe;
  --rule:       #ada3b9;
  --visited:    #6d5480;
}

* { box-sizing: border-box; }

html { background: var(--page); }

body {
  margin: 0;
  padding: 16px 10px 36px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--page);
}

/* ---------------------------------------------------------------
   THE SQUIGGLE
   Borders live on a ::before overlay so the wobble filter never
   touches the text. Delete the two filter lines to go straight.
   The <filter> definitions themselves sit in each page's HTML.
   --------------------------------------------------------------- */
.wob { position: relative; }
.wob::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--ink);
  filter: url(#squiggle);
  pointer-events: none;
}
.wob-fine::before { border-width: 2px; filter: url(#squiggle-fine); }

/* ---------- shell ---------- */
.shell {
  max-width: 760px;
  margin: 0 auto;
  background: var(--card-alt);
  filter: drop-shadow(5px 5px 0 rgba(20,19,26,.28));
}

/* ---------- top banner ---------- */
.banner {
  background: var(--bar);
  color: var(--bar-ink);
  padding: 16px 16px 14px;
  text-align: center;
}
.banner h1 {
  margin: 0;
  font-size: 27px;
  letter-spacing: .5px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.4);
  word-break: break-word;
}
.banner p { margin: 4px 0 0; font-size: 13px; color: var(--bar-dim); }

/* ---------- nav strip ---------- */
nav {
  background: var(--bar-alt);
  padding: 7px 10px;
  text-align: center;
  font-size: 13px;
}
nav a { color: var(--nav-ink); margin: 0 6px; }
nav a:visited { color: var(--nav-ink); }
nav a:hover, nav a:focus-visible { background: var(--card); color: var(--bar); }

/* ---------- links ---------- */
a { color: var(--bar); }
a:visited { color: var(--visited); }
a:hover, a:focus-visible { background: var(--accent); color: var(--accent-ink); text-decoration: none; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------------------------------------------------------------
   LAYOUT
   .cols  = the two-column front page
   .wrap  = a single full-width column (404, about, etc.)
   --------------------------------------------------------------- */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  align-items: start;
}
.wrap { padding: 14px; }

/* .split = one row of the page cut into two halves, side by side. Panels go
   in either half. Only worth doing in a full-width run — in the 200px left
   column two halves would be 93px each — and on a phone the halves stack,
   left one first. */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
.split:last-child { margin-bottom: 0; }
.split > div > .panel:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  /* minmax(0,1fr), not plain 1fr: a bare 1fr track refuses to go narrower than
     its widest thing, so one 630px gif dragged the whole page sideways. */
  .cols { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the narrow side column would otherwise come first and push the
     real page below a screen of ornaments. Order moves it under, in CSS only,
     so the editor still sees the same two columns in the same order. */
  .cols > div:first-child { order: 2; }
  .banner h1 { font-size: 21px; }
  .code { font-size: 52px; }
}

/* ---------- panels ---------- */
.panel { background: var(--card); margin-bottom: 14px; }
.panel:last-child { margin-bottom: 0; }
.panel-head {
  background: var(--bar);
  color: var(--bar-ink);
  font-size: 14px;
  padding: 4px 10px;
  letter-spacing: .3px;
}
.panel-body { padding: 11px 12px; }
.panel-body.flush { padding: 0; }

/* ---------- profile pic ---------- */
.pic {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--card-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
  padding: 8px;
}
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- commission line ---------- */
.commission {
  background: var(--open-bg);
  color: var(--open);
  padding: 7px 10px;
  font-size: 13.5px;
  text-align: center;
}
.commission a { color: var(--open); }
.commission a:hover, .commission a:focus-visible { background: var(--open); color: var(--open-ink); }

/* ---------- detail table ---------- */
.details { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.details th {
  text-align: left;
  background: var(--card-alt);
  color: var(--ink);
  font-weight: bold;
  padding: 4px 7px;
  width: 42%;
  vertical-align: top;
  border-bottom: 1px solid var(--card-alt);
}
.details td { padding: 4px 7px; vertical-align: top; }

/* ---------- contact grid (the linktree bit) ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.contact a {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--card-alt);
  padding: 7px 8px;
  font-size: 12px;
  text-decoration: none;
  min-height: 42px;
}
.contact a:hover, .contact a:focus-visible { background: var(--accent); color: var(--accent-ink); }
.contact a:hover::before, .contact a:focus-visible::before { border-color: var(--accent); }
.contact .glyph { font-family: var(--font-mono); font-weight: bold; opacity: .7; }
@media (max-width: 460px) { .contact { grid-template-columns: 1fr; } }

/* ---------- blurb ---------- */
.blurb { font-size: 13.5px; }
.blurb p { margin: 0 0 9px; }
.blurb p:last-child { margin-bottom: 0; }

/* ---------- news ---------- */
.news { width: 100%; border-collapse: collapse; font-size: 13px; }
.news td { padding: 5px 7px; vertical-align: top; }
.news tr:nth-child(odd) td { background: var(--card-alt); }
.news .date { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

/* ---------- guestbook (cbox embed) ---------- */

/* The box is a page from cbox.ws sitting in a frame, so it can't grow or
   shrink to fit however many messages are in it — this height is the whole of
   it, empty or full. Cbox keeps its own bar and the name/message row pinned in
   the bottom 74px and scrolls the messages above them, so a shorter box hides
   nothing; it just shows fewer at a time. Below about 180px the form starts to
   get squeezed. The editor writes a height straight onto the frame, which
   wins over this. */
.cbox { display: block; }
.cbox iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
  background: var(--card-alt);
}

/* ---------- guestbook (hand-kept fallback) ---------- */
.gb-entry { padding: 8px 0; }
.gb-entry + .gb-entry { border-top: 1px dotted var(--rule); }
.gb-meta { font-size: 12px; color: var(--ink-soft); font-family: var(--font-mono); }
.gb-meta strong { font-family: var(--font-body); color: var(--accent); font-size: 13px; }
.gb-msg { margin: 2px 0 0; font-size: 13px; }
.gb-sign {
  display: inline-block;
  margin-top: 11px;
  background: var(--accent-bg);
  color: var(--accent);
  padding: 7px 13px;
  font-size: 13.5px;
  text-decoration: none;
}
.gb-sign:hover, .gb-sign:focus-visible { background: var(--accent); color: var(--accent-ink); }
.gb-sign:hover::before, .gb-sign:focus-visible::before { border-color: var(--accent); }
.gb-frame { width: 100%; height: 340px; border: 0; display: block; background: var(--card-alt); }

/* ---------------------------------------------------------------
   THE BIG 404
   --------------------------------------------------------------- */
.code {
  font-family: var(--font-mono);
  font-size: 74px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  color: var(--accent);
  text-shadow: 3px 3px 0 var(--accent-bg);
  margin: 4px 0 10px;
  letter-spacing: 4px;
}
.lost { text-align: center; font-size: 13.5px; }
.lost p { margin: 0 0 9px; }
.lost p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   HOW ONE LINE IS DRAWN

   A class on a single <p>. The editor sets these from the "text
   boxes" list in the inspector, and they work on any line of prose
   — inside a .blurb, a .lost, or a panel body of its own.
   --------------------------------------------------------------- */

/* smaller and softer: a subtitle, an aside, a one-line description */
p.quiet { font-size: 12.5px; color: var(--ink-soft); }

/* the opposite — the line that names the thing */
p.lead { font-size: 15.5px; font-weight: 700; line-height: 1.4; }

/* a strip of colour the full width of the panel. Several of them with the
   spacing set to tight read as a list of credits rather than as prose. */
p.band {
  background: var(--card-alt);
  padding: 4px 8px;
  border-left: 3px solid var(--accent);
}

/* the same idea, hugging the words instead of the panel. Width comes from the
   text, so a short line gets a short chip; a long one wraps inside the panel
   rather than running off it. */
p.chip {
  background: var(--accent-bg);
  padding: 3px 8px;
  width: max-content;
  max-width: 100%;
}
.lost p.chip { margin-inline: auto; }   /* the 404 column is centred */

/* typewriter, for anything that wants to read as a record */
p.mono { font-family: var(--font-mono); font-size: 12.5px; }

/* ---- air between the lines of one panel ----
   A class on the box the paragraphs sit in, so it moves all of them at once.
   Same weight as the .blurb p / .lost p rules above and written after them on
   purpose: that is what lets it win. */
.lines-tight > p { margin-bottom: 3px; }
.lines-roomy > p { margin-bottom: 17px; }
.lines-tight > p:last-child,
.lines-roomy > p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   GIFS
   Four ways to place one. All of them keep pixel art crisp and
   stop the page jumping around while images load.
   --------------------------------------------------------------- */

/* every gif on the page: crisp scaling, never overflows its column */
.gif { image-rendering: pixelated; max-width: 100%; height: auto; display: block; }

/* smooth/photographic gifs — cancels the pixel snapping */
.gif.smooth { image-rendering: auto; }

/* a) fills a panel edge to edge — pair with .panel-body.flush */
.gif-block { width: 100%; }

/* f) A CLICKABLE GIF — the picture wrapped in a link.

   The link carries the placement classes and the picture fills it, so making
   a gif clickable never moves it. width:max-content keeps the link exactly as
   wide as the picture, so only the picture is clickable and not the empty
   room beside it. */
.gif-link {
  display: block;
  width: max-content;
  max-width: 100%;
  line-height: 0;
}
.gif-link > .gif { width: 100%; }
.gif-link.gif-block { width: 100%; }

/* the usual link hover paints a block of colour behind the text; behind a
   picture that shows as nothing, so outline it instead */
.gif-link:hover, .gif-link:focus-visible {
  background: none;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* where a standalone gif sits in its panel. .gif is display:block, so this
   is just a matter of which side gets the automatic margin. */
.gif-left   { margin-left: 0;    margin-right: auto; }
.gif-center { margin-left: auto; margin-right: auto; }
.gif-right  { margin-left: auto; margin-right: 0; }

/* b) a row of stamps, blinkies, buttons. wraps on its own */
.gif-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  align-items: center;
}
.gif-strip .gif, .gif-strip .gif-link { flex: none; }

/* which end of the row the gifs bunch towards. Centre is the default, so a
   strip with none of these still behaves the way it always did. */
.gif-strip.strip-left   { justify-content: flex-start; }
.gif-strip.strip-center { justify-content: center; }
.gif-strip.strip-right  { justify-content: flex-end; }

/* How many gifs to fit across a wrapping row. Without one of these each gif
   keeps its natural size, which in a narrow column usually means it wraps
   onto a line of its own — technically wrapping, but it looks like stacking.
   Capping the width is what actually puts them side by side. */
.gif-strip.per-2 .gif, .gif-strip.per-2 .gif-link { max-width: calc(50%     - 3px); }
.gif-strip.per-3 .gif, .gif-strip.per-3 .gif-link { max-width: calc(33.333% - 4px); }
.gif-strip.per-4 .gif, .gif-strip.per-4 .gif-link { max-width: calc(25%     - 4px); }

/* "fill the panel" makes no sense in a wrapping row — it would shove every
   other gif onto a line of its own. Ignore the class rather than fight it. */
.gif-strip .gif.gif-block { width: auto; }

/* a strip needs breathing room even in a panel body that was set flush for a
   single edge-to-edge gif */
.panel-body.flush.gif-strip { padding: 8px; }

/* c) a divider gif that tiles across the full width */
.gif-divider {
  height: 22px;
  background-repeat: repeat-x;
  background-position: center;
  image-rendering: pixelated;
  margin: 10px 0;
}

/* d) inline, sitting in a line of text */
.gif-inline {
  display: inline-block;
  vertical-align: -3px;
  margin: 0 2px;
  image-rendering: pixelated;
}

/* e) NEWSPAPER — a picture beside the text.

   The picture floats, so a short paragraph sits next to it and a long one
   carries on underneath, the way a photo sits in a newspaper column. It has
   to be the FIRST thing inside the text box or the wrap starts too late;
   the editor always puts it there.
   -------------------------------------------------------------- */
.gif-side { width: 45%; }
.gif-side-left  { float: left;  margin: 2px 11px 7px 0; }
.gif-side-right { float: right; margin: 2px 0 7px 11px; }

/* Above or below the text instead of beside it. Nothing floats, so the text
   never wraps round — the picture gets a line of the panel to itself, centred
   over whatever width it was given. Works at any column width, which is why
   this is the one that still looks the same on a phone. */
.gif-side-top,
.gif-side-bottom { float: none; margin-left: auto; margin-right: auto; }
.gif-side-top    { margin-bottom: 10px; }
.gif-side-bottom { margin-top: 10px; }

/* how much of the column the picture takes */
.gif-side.side-sm   { width: 30%; }
.gif-side.side-md   { width: 45%; }
.gif-side.side-lg   { width: 62%; }
.gif-side.side-full { width: 100%; }

/* A float adds nothing to its parent's height, so a picture taller than its
   paragraph would hang out of the bottom of the panel. Matching on :has
   means there is no extra class to keep in sync — and on a browser too old
   for it the only symptom is that overhang coming back. */
.panel-body:has(> .gif-side)::after { content: ""; display: block; clear: both; }

/* The left column of the front page is only 200px wide. Floating a picture
   in there leaves a ribbon of text two words across, so it stacks instead —
   the buttons in the editor still work, the picture just sits above. */
.cols > div:first-child .gif-side.gif-side-left,
.cols > div:first-child .gif-side.gif-side-right {
  float: none; width: 100%; margin: 0 0 9px;
}

/* same problem once the whole page is phone-width. Two classes deep so it
   outweighs the .gif-side.side-md that sets the width — one class would lose
   and the picture would stay at 45% on a phone. Top and bottom are left
   alone: they never floated, so they are already fine at any width. */
@media (max-width: 640px) {
  .gif-side.gif-side-left, .gif-side.gif-side-right {
    float: none; width: 100%; margin: 0 0 9px;
  }
}

/* ---------- footer ---------- */
footer {
  background: var(--bar);
  color: var(--bar-dim);
  padding: 11px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-family: var(--font-mono);
}
/* Every badge sits on the same baseline height so the row stays tidy.
   Real gifs keep their own aspect ratio and take whatever width that
   needs — only the empty placeholders are locked to the classic 88x31. */
.badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.badges img {
  height: var(--badge-h);
  width: auto;
  max-width: 100%;
  image-rendering: pixelated;
}
.badges .badge-slot { width: 88px; height: var(--badge-h); }
.badge-slot {
  display: flex; align-items: center; justify-content: center;
  background: var(--card-alt);
  color: var(--ink-soft);
  font-size: 10px;
}

/* ---- PAGE BACKGROUND — maintained by the editor ---- */
body {
  background-image: url("/assets/bg/5.png");
  background-repeat: repeat;
  background-position: left top;
  background-size: auto;
  background-attachment: scroll;
  min-height: 100vh;
}
/* ---- end page background ---- */