/* ---------------------------------------------------------------------------
   base.css: the design tokens, the reset, and the pieces every section uses
   (the type roles, buttons, the five colors, photographs).

   The idea is the rainforest: walking into the store is walking into the
   jungle. Deep canopy greens for the openers and the menu, a pale mist
   green for the pages, wood and soil for the footer. The five room colors
   still mean a room, so fish are always blue and puppies always yellow.
   Buttons are stickers that lift when you point at them. Nothing moves on
   its own. A new section should use these pieces rather than invent a new
   look.

   Sizes are in cqw, a share of the site's width, because `.site` is a size
   container (see chrome.css). The panel's Read Mode narrows it and the type
   follows.
   --------------------------------------------------------------------------- */

:root {
  --white: #FFFFFF;
  --ink: #0D0D0D;           /* words, outlines and shadows */
  --quiet: #4A4A4A;         /* quieter words, 8.9:1 on white */
  --soft-line: #DDDDDD;     /* the thin line between rows of a list */
  --yellow: #FFE600;
  --pink: #FF8AD8;
  --blue: #3D5AFE;
  --green: #00E08A;
  --orange: #FF6B1A;

  /* The rainforest. */
  --canopy: #0B2E22;        /* the openers and the menu */
  --emerald: #0F4D36;
  --leaf: #1E7A4E;
  --fern: #2FA866;
  --moss: #6CBF4E;
  --mist: #EEF7F0;          /* the page */
  --sun: #FFE08A;           /* the picked out word, on canopy */
  --bark: #5B3A24;
  --bark-dark: #3B2516;
  --soil: #1E140D;          /* the footer */
  --forest-ink: #0B241A;    /* words on the logbook's white pages */

  --rule: 3px solid var(--ink);
  --shadow: 6px 6px 0 var(--ink);

  --display: 'Bowlby One', 'Arial Black', Impact, sans-serif;
  --body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 4cqw, 56px);
  --measure: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--mist); }

body {
  margin: 0;
  background: var(--mist);
  color: var(--forest-ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Words wider than the line break rather than run off the page; at the
   designed sizes it never happens. */
h1, h2, h3, p, dd, li { overflow-wrap: break-word; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
main:focus { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* The side space grows on a wide screen so the words stay in a column of
   --measure, while a section's color still runs edge to edge. */
.pad { padding-inline: max(var(--gutter), (100cqw - var(--measure)) / 2); }

/* ---- Type roles ---------------------------------------------------------- */
.h1, .h2, .h3, .label {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .95;
  text-wrap: balance;
}
.h1 { font-size: clamp(42px, 7.6cqw, 118px); }
.h2 { font-size: clamp(32px, 5cqw, 72px); }
.h3 { font-size: clamp(22px, 2.4cqw, 30px); line-height: 1.02; }
.label { font-size: 15px; line-height: 1.2; letter-spacing: .02em; }
.lead { font-size: clamp(18px, 1.6cqw, 21px); line-height: 1.5; max-width: 46ch; }
.quiet { color: var(--quiet); }

/* A room's name, underlined in its color. */
.tag { display: inline-block; padding-bottom: 3px; border-bottom: 5px solid var(--c, var(--ink)); }

/* ---- The five colors ------------------------------------------------------
   Each room has one, and `data-color` hands it to whatever is inside as --c,
   with --on-c for words on top of it. Blue is the only dark one. */
[data-color="blue"]   { --c: var(--blue);   --on-c: var(--white); }
[data-color="yellow"] { --c: var(--yellow); --on-c: var(--ink); }
[data-color="green"]  { --c: var(--green);  --on-c: var(--ink); }
[data-color="orange"] { --c: var(--orange); --on-c: var(--ink); }
[data-color="pink"]   { --c: var(--pink);   --on-c: var(--ink); }

/* ---- Buttons: stickers that lift when you point at them --------------------
   The first link in a section is the main one, in pink; the rest are white.
   Pressing squeezes it a little. */
.links { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: var(--rule);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 5px 0 var(--ink);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.btn--main { background: var(--pink); }
.btn:hover { transform: translate(-3px, -4px); box-shadow: 6px 8px 0 var(--ink); }
.btn:active { transform: scale(.97); box-shadow: 0 2px 0 var(--ink); }
.btn:not([href]) { cursor: default; }

/* The same lift for anything else that is one big link, like a room tile. */
.lifts { transition: transform .15s, box-shadow .15s; }
.lifts:hover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--ink); }
.lifts:active { transform: scale(.98); }

/* ---- Photographs ------------------------------------------------------- */
.photo { width: 100%; object-fit: cover; background: #EEE; }
.photo--framed { border: var(--rule); box-shadow: var(--shadow); }
.photo--blank { display: grid; place-items: center; min-height: 200px; padding: 16px; border: var(--rule); background: #F3F3F3; }
.photo-note { color: var(--quiet); font-weight: 700; text-align: center; }

/* ---- Section settings: the Settings panel on any section ---------------- */
.bg-yellow { background: var(--yellow); }
.bg-pink   { background: var(--pink); }
.bg-green  { background: var(--green); }
.bg-blue   { background: var(--blue); color: var(--white); }
.bg-black  { background: var(--ink); color: var(--white); }
.bg-blue .quiet, .bg-black .quiet { color: inherit; opacity: .88; }
/* A colored band is outlined top and bottom like everything else. Two bands
   in a row share one line, and the first band meets the header's line. */
:is(.bg-yellow, .bg-pink, .bg-green, .bg-blue, .bg-black) { border-block: var(--rule); }
:is(.bg-yellow, .bg-pink, .bg-green, .bg-blue, .bg-black) + :is(.bg-yellow, .bg-pink, .bg-green, .bg-blue, .bg-black),
main > :is(.bg-yellow, .bg-pink, .bg-green, .bg-blue, .bg-black):first-child { border-top: 0; }
main > :is(.bg-yellow, .bg-pink, .bg-green, .bg-blue, .bg-black):last-child { border-bottom: 0; }
.space-less { padding-block: clamp(28px, 4cqw, 48px) !important; }
.space-more { padding-block: clamp(80px, 11cqw, 150px) !important; }

/* Motion turned down, by the system or by the panel's Stop Animations: the
   resting state is the end of every transition, and buttons stay put when
   pointed at. Repeated under the panel's attribute so both switches do the
   same thing; see hdco-a11y/ACCESSIBILITY.md. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .btn:hover, .lifts:hover { transform: none; }
}
html[data-a11y-stop-anim] *, html[data-a11y-stop-anim] *::before, html[data-a11y-stop-anim] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
html[data-a11y-stop-anim] .btn:hover, html[data-a11y-stop-anim] .lifts:hover { transform: none; }