/* h2ostorybooks.com — faithful rebuild
   ------------------------------------------------------------------
   TWO COLOURS AND THE CREAM. Hanna chose this on 30 July 2026: her own
   water blue for the words, her own gold, and the cream that has been
   the background of this site all along. The navy from the cap
   photograph is retired. Nothing here was invented; the palette is her
   thirteen-year-old logo at the size of a website.

     WATER BLUE      every single word on the site, one value, no
       #006a7a       exceptions. hue 188.                       6.1:1
     GOLD  #7c6914   where you are: the page you're on in the nav bar,
                     the web address, her name and email at the foot of
                     the page, and the wordmark and logo. Her own
                     wordmark gold, verified pixel for pixel.   5.3:1
     CREAM #fdfcf8   the ground everything is measured against.

   That is the whole palette. Two colours you can name and the cream.
   The warm grey that used to set dates and captions is gone; so are the
   three depths of blue I had been using for body, headings and quotes.
   Hanna spotted the three depths herself and said the blue was not
   consistent. She was right, and consistency won.

   It is called WATER BLUE, not teal. Hanna named it so herself in 2026,
   and the name is the more accurate of the two: the logo is H2O, the H2O
   is water, and the H2O is also her initials — Hanna Hymans Ostroff:
   H, H, O. Two H's and an O. So this is not a colour that happens to sit
   on her logo. It is the colour of her name and of water at once.

   #00788b is verified against Hanna's original logo file, kept in
   /originals: 18,905 pixels of exactly this value, unaltered. It has
   never been adjusted, and it must not be.

   And a thing worth keeping on the record. Hanna chose this water blue
   for her logo thirteen years ago. Her son Zachary chose the colour of
   his one-of-a-kind guitar, an instrument he built himself. Where the
   light rolls off the curve of that guitar, the paint measures hue 190.
   This water blue is hue 188. Two degrees apart — the same hue, arrived
   at separately, neither of them knowing. The saturations differ (his
   paint is metallic and muted at .35; this is vivid at 1.00), so they
   are not the same colour. But they are the same hue, and that is why
   every blue on this site sits together without argument.

   Both of them reached for a water word without conferring: she calls
   hers water blue, and the guitar's is a lake blue. And that is not a
   guess or a borrowed finish name — CONFIRMED BY HANNA, 30 July 2026:
   Zachary told her the name himself. "Zach's Lake Blue" is the name he
   chose, together with the people he was working with on creating the
   guitar. So the earlier speculation here about Fender's Lake Placid
   Blue is closed: the colour has its own name because Zachary gave it
   one. Mother and son each named their blue for water, separately, and
   the two paints sit two degrees of hue apart.

   The periwinkle/lavender has been retired — Hanna, 2026. The brown of
   the old logo (#543816) is not used anywhere.

   TWO BLUES UNDER CONSIDERATION, named by Hanna, both measured from her
   photograph IMG_0176 of Zachary's guitar and his velvet jacket:

     ZACH'S LAKE BLUE    #346685  the shadowed edge of the body, case
                                  open. hue 203, sat .44.        6.0:1
                         #29546c  the lower bout in IMG_0178, where the
                                  same paint goes deeper. hue 201.5,
                                  sat .45 — reading weight.      7.9:1
       Both are the paint itself, unaltered, like the water blue and the gold.
       (Superseded: #436885 / #32516a were read through the plexiglass,
        which cost 4 degrees of hue and a third of the saturation. Also
        superseded: #2b546e, which I derived by darkening #346685 before
        Hanna's third photograph showed the paint already does it.)
     ZACH'S ROYAL BLUE   #2f3b74  the velvet in fuller light. 10.2:1
                         #434c7b  one step up, for headings.  8.0:1

   Hanna named them. "Lake" is hers twice over: she called the guitar
   lake blue on sight, and a lake is also a pigment made by fixing a dye
   onto a base — so the name reads as paint to a painter and as water to
   everyone else, on a site whose name is water and her initials both.

   Neither is in the stylesheet yet — they live in the test switcher
   how-should-the-words-look.html until Hanna chooses.
   ------------------------------------------------------------------ */

:root{
  --gold:#7c6914;
  --gold-light:#a08a2e;

  /* ONE BLUE FOR EVERY WORD ON THE SITE. Hanna noticed on 30 July 2026 that the
     blue was not consistent — the H2O in the logo read as one blue and the text
     as another. She was right: I had been using three depths of it, body deeper
     than headings deeper than quotes. That was my idea, not hers, and it is now
     retired. Every word on this site is --type, a single value. Hierarchy comes
     from size, which is how a book does it. */
  /* Hanna chose this depth on 30 July 2026, seeing all four rendered at full
     page size beside her logo. She tried the deepest first and found it too dark
     — "they all just appear when it's three deeper... the two deeper is still
     dark" — and settled on the second of the four. It is one step down from her
     logo's exact H2O, which keeps it plainly the logo blue while reading more
     easily than the logo colour itself would. 6.1:1 is comfortably above the
     4.5:1 threshold, so this is not a legibility compromise. */
  --type:#006a7a;          /* THE one blue. hue 187.9.  6.1:1 on the cream */

  /* WATER BLUE, hue 188, the ladder — kept only as a record of what was measured.
     Nothing but --type may be used for text. */
  --water:#00788b;         /* the logo exactly, unaltered              5.0:1 */
  --water-mid:#006a7a;     /* == --type                                6.1:1 */
  --water-deep:#005d6b;    /* one deeper, tried and found dark         7.4:1 */
  --water-soft:#64b7c4;    /* far too light for type: rules and edges only */
  --ink:var(--type);
  --accent:var(--water);
  --accent-light:var(--water-soft);
  /* the warm grey #6b665d that used to set dates and captions is gone too — it
     was a third colour, and Hanna asked for two. Small print is now --type at a
     small size, which reads as small print because of its size, not its colour. */
  --rule:#e6e0d2;
  --cream:#fdfcf8;
  --calm:#f6f3ea;
}

/* The spiritual direction page used to swap its accent to gold. With the
   headings now navy and the gold reserved for the nav, that swap only tinted
   one border on one page, which is the sort of thing nobody could explain.
   Retired. The body class is still emitted, so restoring it is one line:
   body.keeps-gold{--accent:#7c6914;--accent-light:#a08a2e} */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* THE SIZE OF THE WORDS. Everything else on the site — testimonials, cards,
   blog titles, the Aya line, the pager — was scaled by the same ratio so that
   nothing is left sized for the old 18px and looking orphaned beside it.
 Hanna: "I personally like the larger type because
   it's easier for me to read." This is the largest of the three she tested —
   22px, with a shorter line to match, because long lines undo the benefit of
   big type. 22 was tried first and Hanna found it too large on the page, so this
   is 20 — the middle of the three, still well up from the 18 the site started at.
   Measured cost against 18: about a third of a screen on most pages. No words
   were cut, and none need to be. */
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  font-size:20px;
  line-height:1.80;
}

a{color:var(--type);text-decoration:none;border-bottom:1px solid rgba(0,106,122,.34)}
a:hover{border-bottom-color:var(--type)}

.wrap{max-width:680px;margin:0 auto;padding:0 26px}

/* ---------- header ---------- */
header.site{padding:38px 0 6px;text-align:center}
header.site .wordmark img{width:100%;max-width:430px;height:auto}
header.site .wordmark{display:inline-block;border:0}
/* the web address takes the gold of the wordmark directly above it, and a
   little more size, so the gold is unmistakably the same gold */
header.site .tagline{
  margin:8px 0 0;color:var(--gold);font-size:16px;letter-spacing:.15em;
  text-transform:lowercase;font-family:Helvetica,Arial,sans-serif;
}

nav.site{margin-top:26px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:13px 0}
nav.site ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px}
nav.site a{
  border:0;color:var(--type);font-family:Helvetica,Arial,sans-serif;
  font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;
}
/* the page you are on, and anything under the cursor, goes gold — the same gold
   as the wordmark above it and the H2Ostorybooks logo below */
nav.site a:hover,nav.site a[aria-current="page"]{color:var(--gold)}

/* ---------- page body ---------- */
main{padding:44px 0 10px}
h1{
  font-size:33px;line-height:1.28;font-weight:normal;color:var(--type);
  margin:0 0 26px;text-align:center;
}
/* headings take the water blue one depth up from the reading text */
h2{font-size:24px;line-height:1.35;font-weight:normal;color:var(--type);margin:44px 0 14px}
p{margin:0 0 20px}
em,i{font-style:italic}

figure{margin:0 0 30px;text-align:center}
figure img{max-width:100%;height:auto}
.portrait img{width:440px;max-width:100%;border-radius:3px}
.centred{text-align:center}
/* the friendly close-up — kept modest in size so it reads as a greeting */
/* The photograph at the top of the Spiritual Direction page. The 300px width
   below suited the upright portrait that used to sit here. Hanna's photograph
   (created by her, 31 July 2026) — her grandmother Yoshiko's pearls laid as an
   infinity sign interwoven with a heart, holding the crystal lotus from Isabel
   Aya with the candle lit — is wider than it is tall, so it gets more room and
   sits centered, like the quiet centerpiece it is. The full story is with the
   markup in build_site.py. */
.greeting{margin:26px 0 30px;text-align:center}
.greeting img{width:520px;max-width:100%;border-radius:4px}
/* stands in for the photograph Hanna is choosing. Nothing here ships. */
.photo-placeholder{
  width:300px;max-width:72%;margin:0 auto;aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--water-soft);border-radius:4px;background:var(--calm);
  color:var(--type);font-family:Helvetica,Arial,sans-serif;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;
}

/* pull quotes — the three lines from her bio page */
.quotes{margin:46px 0 10px;border-top:1px solid var(--rule);padding-top:36px}
/* the quotes take the exact water blue of the H2O in the logo — #00788b measures
   5.0:1 on the cream, so it passes as body text without being altered at all */
.quote{
  text-align:center;color:var(--type);font-size:22px;line-height:1.5;
  margin:0 auto 30px;max-width:600px;
}

/* testimonials
   NO BLUE HAIRLINE DOWN THE SIDE. Hanna asked for it to come off on 30 July 2026, on
   the condition that "the testimonials should still stand out apart from the rest of
   the text." It was the last pale blue (#64b7c4) touching anything a reader looks at,
   and at 2.4:1 it was far too light to be type — it only ever worked as a line, and
   even then it was a third colour in a two-colour palette.
   What makes a testimonial stand out now, with no colour doing the work:
     the panel      — the warm cream #f6f3ea, a shade off the page's own #fdfcf8
     the inset      — the panel sits 10px wider than the text column on each side,
                      so her paragraphs run past it and it reads as a held-apart block
     the size       — 19px against the 20px of her own writing
     the attributor — "— Dawn" in Helvetica beneath, which her prose never uses
   Four quiet differences instead of one loud line. To put the line back, it is the
   single declaration border-left:3px solid var(--water-soft). */
blockquote{
  margin:0 -10px 30px;padding:24px 30px;background:var(--calm);border-radius:3px;
  font-size:19px;line-height:1.7;
}
blockquote p:last-of-type{margin-bottom:0}
blockquote cite{
  display:block;margin-top:14px;font-style:normal;color:var(--type);
  font-family:Helvetica,Arial,sans-serif;font-size:15px;letter-spacing:.05em;
}

/* the Spiritual Directors International list — her original line breaks */
.sdi p{margin:0 0 14px;padding-left:14px}

/* video */
.video{position:relative;padding-bottom:56.25%;height:0;margin:0 0 30px;background:#000}
.video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* Aya tagline — her original font choice was Fjalla One */
.aya-line{
  font-family:"Fjalla One",Georgia,serif;font-size:27px;line-height:1.4;
  color:var(--type);text-align:center;margin:30px 0 34px;
}

/* platform badges */
.badges{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px;margin:26px 0 10px}
.badges a{border:0}
.badges img{height:46px;width:auto}
/* the SteamVR file has a lot of transparent padding, and the Oculus wordmark none —
   these two rules only even out the optical size; the image files are untouched */
.badges img[src*="Steam"]{height:126px;margin:-40px 0}
.badges img[src*="oculus"]{height:36px}

/* home page */
.home-hero{text-align:center;margin-bottom:10px}
.home-hero img{width:300px;max-width:70%;height:auto;border-radius:3px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px;margin:38px 0 10px}
.card{
  display:block;border:1px solid var(--rule);border-radius:3px;padding:22px 20px;
  background:#fff;color:var(--type);text-align:center;
}
/* The card's edge on hover was the pale #64b7c4 as well. With the testimonial line
   gone there was no reason to keep one last pale blue alive on the home page, and the
   deep blue is a clearer signal that the card is about to be clicked. */
.card:hover{border-color:var(--type)}
.card .t{font-size:20px;line-height:1.35;display:block}

/* blog
   THE DATES ARE GONE. Hanna asked for this on 30 July 2026, having read the posts
   through: "I just want to remove the dates. Otherwise, it looks very good." Two
   rules used to set them — .post-meta under each post's title, and .post-list .d
   beside each title in the list — and both are now deleted rather than hidden, so
   nothing invisible is left behind for anyone to wonder about later. The h1 no
   longer needs the -14px pull that closed the gap above the date line, so the
   title's own bottom margin does the spacing on its own. The dates still live in
   the web addresses (/2021/02/04/...), which are thirteen years old and stay. */
.post-list{list-style:none;margin:0;padding:0}
.post-list li{border-bottom:1px solid var(--rule);padding:20px 0}
.post-list li:last-child{border-bottom:0}
.post-list a{border:0;color:var(--type);font-size:24px;display:block}
.post-list a:hover{color:var(--accent)}
.comment{margin:36px 0 0;padding-top:24px;border-top:1px solid var(--rule)}
.comment .c{background:var(--calm);padding:18px 22px;font-size:19px;margin:0}
/* Greg's name under his comment. This was 13px while the identical job elsewhere on
   the site — the "— Dawn" under the testimonial — was 15px. Two sizes doing one job,
   which the 30 July 2026 sweep caught. Both are 15px now. */
.comment .who{
  color:var(--type);font-family:Helvetica,Arial,sans-serif;font-size:15px;
  letter-spacing:.06em;margin:10px 0 0;
}
.pager{display:flex;justify-content:space-between;gap:18px;margin:44px 0 0;font-size:16px}

/* footer */
footer.site{margin-top:70px;border-top:1px solid var(--rule);padding:34px 0 56px;text-align:center}
/* The logo used to sit at opacity:.9 here, which sounds harmless but wasn't:
   90% of #7c6914 over the cream renders as #88772b, so the logo's gold was
   measurably paler than every other gold on the page. Full opacity now — the
   logo shows its own colour, which is the same #7c6914 as the line beneath it. */
footer.site img{width:250px;max-width:62%;height:auto}
/* Hanna's name and email at the foot of every page. This line was a warm grey
   (#6b665d) until 30 July 2026, which is why it never looked like the gold —
   it wasn't the gold. It is now #7c6914 exactly: the same gold as the wordmark,
   the web address under it, the current nav tab, and the H2Ostorybooks logo
   directly above this line. 5.26:1 on the cream. Enlarged 13px → 15px so the
   colour has enough letter to show itself, the same reason the tagline is 16px. */
footer.site p{
  margin:16px 0 0;color:var(--gold);font-family:Helvetica,Arial,sans-serif;
  font-size:15px;letter-spacing:.05em;
}
footer.site a{color:var(--gold);border-bottom-color:rgba(124,105,20,.34)}
footer.site a:hover{border-bottom-color:var(--gold)}

/* on a phone, the same increase, scaled to the narrower screen */
@media (max-width:600px){
  body{font-size:19px}
  h1{font-size:28px}
  h2{font-size:23px}
  .quote{font-size:21px}
  .aya-line{font-size:24px}
  main{padding-top:34px}
}