/* Asap, served from this site rather than from Google, so there is no second
   origin to look up, connect to and negotiate before the first heading can be
   drawn, and no third party told who is reading. One file: Google builds Asap
   as a variable font, so every weight the site asks for, 400 for the tagline,
   700 for buttons and headings, 800 for the fallback wordmark, comes out of the
   same 43 kB.

   swap means the words are readable in the fallback from the first paint and
   change face when the file lands, rather than the page holding text back. */
@font-face {
  font-family: "Asap";
  src: url("fonts/asap-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* DoDones site draft.
   Palette is sampled from the product itself: the green connectors, the tan
   and cream frames, and the deep blue frame. Blue and pink stay as accents on
   small things so the interface never reads as gendered. */

:root {
  --ground:      #fbf6ec;   /* warm page background, never plain white */
  --panel:       #f4ead8;   /* tinted card background */
  --panel-warm:  #efe1c8;
  --line:        #e3d5ba;
  --ink:         #3d382f;   /* body text */
  --ink-soft:    #6d6455;
  --green:       #58813d;   /* brand green, dark enough for white text */
  --green-soft:  #a8c68e;   /* the actual connector green */
  --blue:        #3d6b94;
  --blue-soft:   #a9c8e4;
  --pink-soft:   #efa6b8;
  --tan:         #d9be86;
  --shadow:      0 6px 18px rgba(61, 56, 47, 0.13);
  --radius:      14px;

  /* Asap first, ahead of the system rounded faces. Reached through those, a
     Mac drew headings in Apple's SF Pro Rounded and never got as far as the
     brand face,
     so the site looked different on every platform and matched neither the Etsy
     banner nor its own link preview card. Asap is the face chosen for it: a
     squarish grotesque with lightly rounded corners, whose bowls are the same
     rounded rectangles as the counters in the DoDones mark, where Nunito's
     circles argued with them.
     The rest of the list is what a browser falls back to while the file is on
     its way, or if it never arrives. */
  --font-head: "Asap", ui-rounded, "SF Pro Rounded", "Avenir Next",
               "Trebuchet MS", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.6 var(--font-body);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--font-head); color: var(--blue); line-height: 1.2; }
h1 { font-size: 2.5rem; margin: 0 0 .4rem; }
h2 { font-size: 1.6rem; margin: 2.5rem 0 .8rem; }
h3 { font-size: 1.15rem; margin: 0 0 .4rem; }

a { color: var(--green); }
a:hover { color: var(--blue); }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 720px; }

/* ---------- header ---------- */

.site_head {
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}
/* The header runs the full width of the window instead of lining up with the
   centred column the rest of the page uses. That keeps the mark and the Etsy
   button the same distance from the edges however wide the window gets, and it
   matches the header above the image editor. */
.site_head .wrap {
  max-width: none;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; padding: 8px 12px;
}

/* The logo is a DoDone in miniature: a white window in a coloured frame. */
.mark {
  display: inline-flex; flex-direction: column; gap: 3px;
  padding: 6px 8px; background: var(--green);
  border-radius: 9px; line-height: 1; text-decoration: none;
}
.mark b {
  background: #fff; color: var(--green);
  font: 800 13px/1 var(--font-head); letter-spacing: .08em;
  padding: 3px 6px; border-radius: 3px;
}
.mark span {
  color: #fff; font: 800 13px/1 var(--font-head);
  letter-spacing: .08em; padding: 0 2px;
}

/* Three parts: the mark holds the left, the Etsy button holds the right, and
   the links take the space between and centre themselves in it. */
.site_nav {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  flex: 1; justify-content: center;
}
.site_nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.site_nav a:hover { color: var(--green); }
.site_nav a.here { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }

/* Trimmed to the height of the mark beside it, so the header band stays the
   same height here as it is above the image editor. The colour is restated
   because the surrounding nav and footer rules are specific enough to win. */
.site_head .btn, .site_head .btn:hover { color: #fff; padding: 8px 18px; }

/* The menu button. It carries `hidden` in the markup and the script takes that
   off, so a page whose script does not run keeps the plain list of links rather
   than losing them behind a button that cannot open. The script also marks the
   document, and only a marked document hides the links on a narrow screen. */
.nav_toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  padding: 10px 11px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.nav_toggle span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--ink);
}
.nav_toggle:hover { border-color: var(--green-soft); }
.site_head.nav_open .nav_toggle { background: var(--panel-warm); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block; padding: 11px 20px; border-radius: 999px;
  background: var(--green); color: #fff; text-decoration: none;
  font-weight: 700; font-family: var(--font-head); letter-spacing: .01em;
}
.btn:hover { background: #47692f; color: #fff; }
.btn.ghost { background: transparent; color: var(--blue); border: 2px solid var(--tan); }
.btn.ghost:hover { background: var(--panel); color: var(--blue); }
.btn_row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.4rem; }

/* The shop has not opened yet. Everything that would have been a Buy on Etsy
   button says when it opens instead, and says it as plain text rather than as a
   control, because a button that cannot be pressed is worse than no button at
   all. The wording lives in the markup so a page whose script does not run
   still reads correctly; site.js only turns these back into links, and only
   once the shop's address has been filled in there. */
.soon {
  display: inline-block; border: 2px solid var(--tan); border-radius: 999px;
  padding: 6px 16px; font-family: var(--font-head); font-weight: 700;
  color: var(--ink-soft); white-space: nowrap; cursor: default;
}
.soon_text { color: var(--ink-soft); }

/* The same fact stated properly, where there is room for it. It is deliberately
   not a button and not green, so nothing on the page looks pressable and dead.
   Dashed, because the date is a promise rather than a thing already in place. */
.opening {
  margin: 1.4rem 0 0; max-width: 32rem;
  border: 2px dashed var(--tan); border-radius: var(--radius);
  background: #fff; padding: 14px 18px;
}
.hero .opening { margin: .8rem auto 0; }
.opening strong {
  display: block; font-family: var(--font-head);
  font-size: 1.15rem; color: var(--green);
}
.opening span {
  display: block; margin-top: .35rem;
  color: var(--ink-soft); font-size: .95rem;
}

/* ---------- the animation band ---------- */

/* The demo runs from its own page so there is only ever one copy of it.
   The band is white because the demo draws on white. */
/* The white strip is this element. The demo itself is transparent and sits on
   top of it in a much taller frame, anchored to the strip's bottom edge, so the
   room above the strip is free for a frame to open into. That room covers the
   header, and the frame is drawn above it and ignores the mouse, so the
   animation passes over the logo and the menu without swallowing their clicks.

   Lowering the strip's height does not cut anything off any more. It just means
   more of each frame stands above the white and over the page behind it. */
.belt {
  position: relative;

  /* The demo shrinks itself when the window cannot hold three DoDones across,
     so the band follows the same curve. Both work from the window width, so
     they agree without needing to talk to each other.

     The whole height is proportional, with no fixed part added on. A fixed part
     would not shrink with everything else, so the amount the frames stand proud
     of the band would drift as the window narrowed and would have to be looked
     at again at every width. This way the band, the frames and the white around
     them all change together and the proportions never move.

     350 is the height at the full scale of 1.35. Three DoDones need 870 of the
     demo's own pixels, so the scale starts coming down below a window of 1175,
     and 350 / 1175 is the 29.8vw. */
  height: min(350px, 29.8vw);

  background: #fff;
  border-bottom: 1px solid var(--line);
}
.belt iframe {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 600px; border: 0;
  pointer-events: none;
  z-index: 20;
}

/* ---------- blocks ---------- */

.hero { text-align: center; padding: 2.6rem 0 .5rem; }
.hero .tagline {
  font-family: var(--font-head); font-size: 1.3rem;
  color: var(--ink); margin: 0 0 1rem;
}
.hero p.says { max-width: 620px; margin: 0 auto; }
.hero .btn_row { justify-content: center; }

.price {
  display: inline-block; margin-top: 1.7rem;
  background: var(--panel-warm); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 16px; font-weight: 700;
}

/* Sits under the price on the home page. Someone weighing up twenty dollars
   wants to know what actually turns up, so the list is kept next to the number
   rather than buried on another page. */
.in_the_set {
  max-width: 340px;
  margin: 1.8rem auto 0;
  padding: 14px 20px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.in_the_set h2 {
  margin: 0 0 .5rem;
  font-size: 1rem;
  color: var(--ink);
}
.in_the_set ul { margin: 0; padding-left: 1.1rem; }
.in_the_set li { margin: .2rem 0; }

section { padding: 1.4rem 0 2.2rem; }

/* The first block on a page sits directly beneath the header rule, so its title
   needs more air above it than a heading further down the page does. The home
   page is unaffected, since the animation strip comes first there. */
.site_head + section { padding-top: 2rem; }
section.tinted { background: var(--panel); border-block: 1px solid var(--line); margin-top: 2.5rem; }

.lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 640px; }

/* ---------- photo grids ---------- */

.shots { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.shots.two { grid-template-columns: repeat(2, 1fr); }

/* Four placements across, so the row makes its point at a glance rather than
   filling a screen. They drop to two and then to one as the window narrows. */
.shots.four { grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .shots.four { grid-template-columns: repeat(2, 1fr); } }
/* A picture and its caption are one thing, so they sit on one white card
   rather than the caption floating on the page below a picture that has its
   own edges. The card carries the rounded corner and the lift, the picture
   fills the top of it edge to edge, and the caption sits on the same white
   underneath. Nothing else about either has to change: the card clips the
   corners the picture used to round for itself. */
/* Cards in a row end together. A grid item already stretches to the tallest
   in its row, so the figure is told to fill it and the white reaches the same
   line whether a caption runs to one line or three. */
.shot { display: flex; }
.shot figure {
  margin: 0; flex: 1;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.shot img {
  display: block; width: 100%;
  border-radius: 0; box-shadow: none; background: #fff;
}
.shot figcaption {
  margin: 0; padding: .6rem .85rem .75rem;
  color: var(--ink-soft); font-size: .95rem;
}

/* A short silent clip, treated like a photograph so it sits in the same grid.
   It plays itself because it is ten seconds of one gesture with no sound, and
   asking for a click to see a thing move is a poor trade. Anyone who would
   rather it did not move gets the poster frame instead, handled in site.js,
   which shows the closed state so the before is still visible. */
.shot .clip {
  display: block; width: 100%;
  border-radius: 0; box-shadow: none;
  background: #fff;
}

/* The same clip leading a section rather than sitting in a grid slot. It is the
   one thing on these pages that shows the gesture instead of the result, so it
   goes first and at a size worth watching. It is a portrait video, which would
   run to well over a thousand pixels tall across the full column, so it stands
   beside the words rather than above them. */
.lead_clip {
  display: flex; gap: 28px; align-items: flex-start; margin-bottom: 1.7rem;
}
.lead_clip figure {
  margin: 0; flex: 0 0 300px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.lead_clip .clip {
  display: block; width: 100%;
  border-radius: 0; box-shadow: none;
  background: #fff;
}
.lead_clip figcaption {
  margin: 0; padding: .6rem .85rem .75rem;
  color: var(--ink-soft); font-size: .95rem;
}
.lead_clip > div { flex: 1; min-width: 16rem; }
.lead_clip > div > p:first-child { margin-top: 0; }
.lead_clip .note { margin-bottom: 0; }

/* Line drawings rather than photographs. They are already on a white ground, so
   a thin border reads better than the lift the photos get, and the padding
   keeps the artwork off the edge of the card. */
.shot.diagram img {
  box-shadow: none;
  border: 0;
  padding: 10px 10px 0;
}

.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px;
}
.cards { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }

/* ---------- how-to page ---------- */

/* Short links so the shape of a long page is visible without scrolling it. */
.jump { display: flex; gap: 10px; flex-wrap: wrap; padding: 0; margin: 1.2rem 0 0; list-style: none; }
.jump a {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--panel-warm); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); font-size: .95rem; font-weight: 600;
}
.jump a:hover { background: var(--tan); }

.supply { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); padding: 0; list-style: none; margin: 0; }
.supply li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.supply strong { display: block; font-family: var(--font-head); color: var(--blue); }

.note {
  border-left: 4px solid var(--green-soft);
  background: var(--panel); border-radius: 0 8px 8px 0;
  padding: 12px 16px; margin: 1.4rem 0;
}

.todo {
  border: 2px dashed var(--tan); border-radius: var(--radius);
  padding: 16px 18px; background: #fff; color: var(--ink-soft);
}

/* ---------- footer ---------- */

.site_foot {
  margin-top: 3rem; border-top: 1px solid var(--line);
  background: var(--panel); padding: 26px 0; font-size: .95rem;
}
.site_foot .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.site_foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site_foot a { color: var(--ink); }
.site_foot .fine { color: var(--ink-soft); margin-left: auto; }

/* ---------- small screens ---------- */

@media (max-width: 760px) {
  h1 { font-size: 2rem; }
  .shots, .shots.two, .shots.four, .cards, .supply { grid-template-columns: 1fr; }
  .lead_clip { flex-direction: column; }
  .lead_clip figure { flex-basis: auto; align-self: center; max-width: 320px; }
  .site_nav { gap: 14px; width: 100%; }
  .site_foot .fine { margin-left: 0; }

  /* Six links across a phone either wrap into a column beside the mark or
     squeeze to nothing, so they go behind a button and drop below the header
     when it is pressed. The header itself keeps one row: mark, badge, button. */
  .js_nav .nav_toggle { display: flex; order: 3; }
  .js_nav .site_nav { display: none; }
  .site_head .soon { order: 2; margin-left: auto; }
  .js_nav .site_head.nav_open .site_nav {
    display: flex; order: 4; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    margin-top: 4px; padding-top: 4px;
    border-top: 1px solid var(--line);
  }
  .js_nav .site_head.nav_open .site_nav a {
    font-size: 17px; padding: 11px 4px;
  }
  .js_nav .site_head.nav_open .site_nav a + a { border-top: 1px solid var(--line); }
}

/* The brand animation replaces the CSS wordmark once lottie has loaded. The box
   holds the composition's 750 by 420 ratio so the artwork fills it instead of
   letterboxing, and matches the size used in the image editor's toolbar.

   The artwork is not centred in its composition: it carries about a tenth of
   its width as empty space on the left. The box is shifted back by that amount
   so the mark lines up with everything below it, and the strip it vacates on
   the right is taken back with a negative margin. */
.mark.is_anim {
  background: none; padding: 0; border-radius: 0;
  width: 71px; height: 40px;
  transform: translateX(-10%);
  margin-right: -7.1px;
}

/* The same animation as the home page's title, at a size worth watching. It
   plays while the demonstration above is still fetching its sprite sheets, so
   the page has something moving from the first moment rather than a heading
   over an empty strip.
 
   The artwork is not centred in its composition, leaving about a tenth of the
   width empty on its left. Centring the box would therefore leave the mark
   itself sitting right of centre, so it is shifted back by half of that. */
/* The mark and the tagline read as one thing, side by side and about the same
   height, rather than as a heading with a line under it.

   The artwork is not centred in its composition, leaving about a tenth of the
   width empty on its left. That strip is taken back out of the layout the same
   way the header does it, by shifting the box left and pulling the width in, so
   the gap to the tagline is measured from the mark itself rather than from the
   empty space beside it. */
.hero_lockup {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap;
  margin: 0 0 1.9rem;
}
.hero_mark.is_anim {
  display: block;
  width: 134px; height: 75px;
  margin: 0 -13.4px 0 0;
  transform: translateX(-10%);
}
.hero_lockup .tagline { font-size: 3.8rem; line-height: 1.05; margin: 0; }

/* Kept here rather than with the other narrow-screen rules, which sit earlier
   in the file. Two rules of the same weight are settled by which comes last,
   whatever the media query says, so an override has to follow what it
   overrides. */
@media (max-width: 760px) {
  .hero_lockup { gap: 12px; margin-bottom: 1.5rem; }
  .hero_lockup .tagline { font-size: 2.5rem; }

  /* On a phone the mark and the tagline cannot sit side by side, and stacked
     they push the description below the fold for a wordmark the reader has
     already seen in the corner. The heading is taken out of view rather than
     out of the page, so it still names the page for a screen reader and for
     search, and the mark in the corner is the one that plays instead. */
  .hero_lockup .hero_mark {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* A picture that magnifies under the pointer.

   The button is the window the magnified picture is seen through, so it carries
   the rounded corner and the shadow that the image itself carries elsewhere, and
   clips what grows past its edge. The image inside gives those up, since a
   rounded corner scaled two and a half times does not stay a rounded corner.

   The magnifying glass is the browser's own zoom-in cursor rather than a
   supplied image, so it matches whatever pointer size the reader has set. It is
   only offered where the pointer can hover, since a tap has nothing to follow. */
.zoom_btn {
  display: block; width: 100%;
  padding: 0; border: 0; background: none;
  cursor: pointer;
}
.zoom_btn.can_magnify { cursor: zoom-in; }

/* The button still clips what the magnified picture grows past, but the card
   around it is what carries the corner and the lift now. */
.shot .zoom_btn {
  overflow: hidden;
  background: #fff;
}
.shot .zoom_btn img {
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.15s ease;
}

.zoom_btn:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

/* Anyone who would rather things did not move gets the full size view on a
   click and no magnifying at all. */
@media (prefers-reduced-motion: reduce) {
  .shot .zoom_btn img { transition: none; }
}

/* Built by the script, so a page with no zoomable picture never carries it. */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(61, 56, 47, 0.88);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: 8px; background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* One row per printable sheet: what it is, what is on it, and the two ways to
   take it. The links sit at the end of the row rather than in the text, so the
   list can be scanned down for the sheet you want before you choose a format. */
.sheets { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sheets li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.sheets strong { font-family: var(--font-head); color: var(--blue); min-width: 12rem; }
.sheets .holds { color: var(--ink-soft); font-size: .95rem; flex: 1; min-width: 14rem; }
.sheets .get { display: flex; gap: 14px; white-space: nowrap; }

@media (max-width: 760px) {
  .sheets strong, .sheets .holds { min-width: 0; }
}

/* A sheet whose PDF has not been made yet. Said plainly in place of the link,
   rather than offering a link that would land on nothing. */
.sheets .soon { color: var(--ink-soft); font-style: italic; }

/* The last word on the page that argues the case, so it is given room and said
   in the heading face rather than dropped in as another paragraph. */
.closing_line {
  margin: 2.4rem 0 0;
  font-family: var(--font-head);
  font-size: 1.35rem;
  color: var(--blue);
  text-align: center;
}

/* A quiet line under the tagline, pointing at the page the family's own story
   moved to. Set small and centred so it reads as a footnote to the tagline
   rather than as another section. */
/* The family photograph on the About page. It is the evidence for the claim the
   page makes in words, so it is given the full column rather than tucked beside
   the text, and it sits directly after the sentence naming the three children. */
/* One white card holding the picture and its caption, the same as every other
   figure on the site. The caption stays centred here, where there is one wide
   picture rather than a row of them. */
.portrait {
  margin: 1.8rem 0;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.portrait img {
  display: block; width: 100%; height: auto;
  border-radius: 0; box-shadow: none;
}
.portrait figcaption {
  margin: 0; padding: .6rem .85rem .75rem;
  color: var(--ink-soft);
  font-size: .95rem; text-align: center;
}

/* Angela's own hand at the foot of the About page, the way a letter is signed.
   Left aligned with the text above it rather than centred, and no bigger than a
   signature would be on paper next to that text. */
.signed { margin: 1.6rem 0 0; }
.signed img { display: block; width: 210px; height: auto; }

.after_close {
  margin: .6rem 0 0; text-align: center;
  color: var(--ink-soft); font-size: .95rem;
}
.after_close a { color: var(--blue); }

/* ---------- the art director reference sheet ----------

   A page rather than a picture, so every word is real text: sharp at any size,
   searchable, and recoloured by changing these rules rather than by redrawing
   the sheet. The illustrations are the only images left. */

.guide { max-width: 1080px; margin: 0 auto; padding: 1.6rem 22px 0; }

.guide_head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.guide_head h1 { font-size: 2rem; margin: 0 0 .3rem; }
.guide_head .lede { margin: 0; max-width: 34rem; }

.guide_mark { margin: 0; text-align: right; line-height: 1.25; }
.guide_mark span {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: 1.5rem; color: var(--green);
}
.guide_mark em { font-style: normal; color: var(--ink-soft); font-size: .95rem; }

.g_panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 14px;
}
.g_panel h2 {
  font-size: 1.05rem; margin: 0 0 .7rem; color: #fff;
  background: var(--blue); border-radius: 6px; padding: 5px 12px;
}
.g_panel h3 { font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.g_sub { margin: -.4rem 0 .7rem; color: var(--ink-soft); font-size: .95rem; }
.g_note { margin: .7rem 0 0; color: var(--ink-soft); font-size: .9rem; }

/* Every row of figures shares one rhythm: wrap freely, sit on a common
   baseline, and never stretch a drawing to fill its slot. */
.g_row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.g_row figure { margin: 0; text-align: center; }
.g_row img { display: block; height: auto; }

.g_ages img { max-height: 150px; width: auto; }
.g_ages figcaption { margin-top: .3rem; color: var(--ink-soft); font-size: .85rem; }
.g_people img { max-height: 150px; width: auto; }

.g_faces { align-items: flex-start; }
.g_faces img { max-height: 120px; width: auto; margin: 0 auto; }
.g_faces figcaption { margin-top: .4rem; font-size: .85rem; line-height: 1.35; }
.g_faces figcaption strong { display: block; color: var(--blue); }
.g_faces figcaption span { color: var(--ink-soft); }

.g_do   { background: #fdf3f6; }
.g_done { background: #f3f8ef; }
.g_pair { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }

.g_split { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.g_split > ul { flex: 1; min-width: 14rem; }
.g_tall { max-height: 190px; width: auto; }

.g_continuity img { max-height: 150px; width: auto; }
.g_continuity figure { position: relative; }
.g_tag {
  display: inline-block; margin-bottom: .3rem; padding: 2px 12px;
  border-radius: 999px; font-family: var(--font-head); font-weight: 800;
  font-size: .8rem; color: #fff;
}
.g_tag_do { background: var(--pink-soft); color: var(--ink); }
.g_tag_done { background: var(--green); }

.g_desks { align-items: flex-start; gap: 22px; }
.g_desks figure { flex: 1; min-width: 15rem; }
.g_desks img { max-height: 150px; width: auto; margin: 0 auto; }
.g_desks figcaption { margin: .4rem 0; }
.g_mark_yes, .g_mark_no {
  font-family: var(--font-head); font-weight: 700; font-size: .9rem;
}
.g_mark_yes { color: var(--green); }
/* The one red left on the sheet. It means wrong, and that has to stay obvious,
   so it is warmed to sit with the cream rather than replaced by a site colour. */
.g_mark_no { color: #b4432f; }

.g_ticks, .g_crosses, .g_check { list-style: none; margin: 0; padding: 0; }
.g_ticks li, .g_crosses li, .g_check li {
  padding-left: 1.5rem; position: relative; margin: .25rem 0; font-size: .95rem;
}
.g_ticks li::before, .g_check li::before {
  content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700;
}
.g_crosses li::before {
  content: "✕"; position: absolute; left: 0; color: #b4432f; font-weight: 700;
}
.g_check { columns: 2; column-gap: 28px; }

.g_steps { gap: 28px; align-items: flex-start; }
.g_steps > div { flex: 1; min-width: 16rem; }
.g_steps ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .95rem; }
.g_num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: .9rem;
}

.guide_close {
  margin: 1.6rem 0 0; padding: 14px; text-align: center;
  background: var(--blue); color: #fff; border-radius: var(--radius);
  font-family: var(--font-head); font-size: 1.2rem;
}


/* The three ways of handing the sheet over, side by side at the top. */
.g_ways { gap: 26px; align-items: flex-start; }
.g_ways > div { flex: 1; min-width: 15rem; }
.g_ways p { font-size: .95rem; margin: .4rem 0 0; }
.g_acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.g_acts .btn { font-size: .9rem; padding: 7px 16px; border: 0; cursor: pointer; }
.g_plain { color: var(--blue); font-size: .9rem; }
.g_eg { color: var(--ink-soft); }
.g_eg em { font-style: normal; font-weight: 700; color: var(--ink); }

/* The age sheet is one drawing rather than nine, because the whole point of it
   is that the children get taller across the row. Cutting it up and lining the
   figures up by height would throw away the only thing it shows. */
.g_ages_row { display: block; width: 100%; height: auto; }

.g_people img { max-height: 132px; width: auto; }

/* Six DO faces against four DONE ones, so the DO panel gets the wider half. */
.g_pair { grid-template-columns: 3fr 2fr; }
.g_do .g_crosses, .g_done .g_ticks { margin-top: .8rem; font-size: .9rem; }

/* The brief in words. Real text on the page, so an AI given nothing but the
   address of this page still receives every rule, and so the copy button can
   read them straight back off it. Set small and in columns, because a reader
   who wants them will skim the headings rather than read it through. */
.g_rules { background: var(--panel); }
.g_rule { break-inside: avoid; margin-bottom: 1.1rem; }
.g_rule h3 { display: block; margin: 0 0 .3rem; color: var(--green); font-size: .98rem; }
.g_rule h4 { margin: .6rem 0 .2rem; font-size: .9rem; color: var(--blue); }
.g_rule p { margin: .35rem 0; font-size: .88rem; }
.g_rule ul, .g_rule ol { margin: .3rem 0; padding-left: 1.2rem; font-size: .88rem; }
.g_rule li { margin: .1rem 0; }

@media (max-width: 860px) {
  .g_pair { grid-template-columns: 1fr; }
  .g_check { columns: 1; }
  .guide_mark { text-align: left; }
}

/* Printed, the page furniture is noise and the panels should not be split
   across a page break. */
@media print {
  .site_head, .site_foot { display: none; }
  body { background: #fff; }
  .guide { max-width: none; padding: 0; }
  .g_panel { break-inside: avoid; border-color: #bbb; }
}