/* Shared page components: reading column, top bar, popovers, headings,
   biography, posts, news, tags and responsive layout. Load after styles.css;
   simple.css contains the final site-wide refinements and mobile sidebar.
   Keep palette/typeface variables in styles.css rather than hard-coding colours. */

body.pg{
  background:var(--cream);
  color:var(--ink);
  /* the bar is sticky, so nothing needs to reserve room for it */
  padding:0; margin:0;
}

/* The single column. Narrower than the sidebar pages' column: with no
   sidebar beside it, a wide measure would be tiring to read. */
.pg-main{ display:block; padding:2.6rem 1.5rem 0; min-width:0; }
/* Long-form posts and the error page retain their existing extra top spacing. */
.pg-main.pg-plain{ padding-top:3.4rem; }
.pg-wrap{ max-width:46rem; margin:0 auto; min-width:0; }

.pg-head{ margin:0 0 1.8rem; }
/* Page headings use a title, a lede and the existing separating hairline. */
.pg-main:not(.pg-plain) .pg-head{ margin:0 0 2rem; }
.pg-main:not(.pg-plain) .pg-head h1{ margin:0 0 1.15rem; }
.pg-main:not(.pg-plain) .pg-head::after{
  content:""; display:block; height:1px; background:var(--rule-2);
}
/* The Site Guide has no bar, so the rule above skips it, but it wants the same
   hairline. That is all "nav-head" does. The 404 keeps its tagline. */
.pg-main.pg-plain .nav-head{ margin:0 0 2rem; }
.pg-main.pg-plain .nav-head h1{ margin:0 0 1.15rem; }
.pg-main.pg-plain .nav-head::after{
  content:""; display:block; height:1px; background:var(--rule-2);
}
.pg-kicker{
  margin:0 0 .5rem; font-family:var(--font-body);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.pg-head h1{
  margin:0 0 .6rem; font-family:var(--font-head); font-weight:800;
  font-size:clamp(1.65rem, 5.6vw, 2.15rem); line-height:1.15; color:var(--ink);
}
.pg-lede{ margin:0; font-size:1.02rem; color:var(--muted); }

/* GOTCHA: the "hidden" attribute only hides at the weakest strength, so any
   rule here that sets a display would override it and the element would stay
   on screen. This settles it once for the whole site. */
[hidden]{ display:none !important; }
/* a list item a tag button has taken out (pages.js, block 7) */
.filtered-out{ display:none !important; }

.pg-section{ margin:0 0 2rem; }
.pg-section > h2{
  margin:0 0 .9rem; padding-top:.9rem;
  border-top:1px solid var(--rule-2);
  font-family:var(--font-head); font-weight:700; font-size:1.32rem; color:var(--ink);
}
.pg-section > h2:first-child{ padding-top:0; border-top:0; }
.pg-section > h3{ margin:1.6rem 0 .5rem; font-family:var(--font-head); font-size:1.1rem; }
.pg-section p{ margin:0 0 1rem; }
.pg-section p:last-child{ margin-bottom:0; }

/* A line set apart inside a section. No italics, which would fight the bold
   inside it. The inner "p" rule stops ".pg-section p" adding a gap at the end. */
.pg-section blockquote{
  margin:1.4rem 0; padding:.3rem 0 .3rem 1.1rem;
  border-left:2px solid var(--accent); color:var(--muted);
}
.pg-section blockquote p{ margin:0; }

/* small print under a list or a section */
.pg-note{ margin:.8rem 0 0; font-size:.86rem; color:var(--muted); font-style:italic; }

/* the "And also" list on the navigation page */
.nav-extras{ list-style:none; margin:0; padding:0; }
.nav-extras li{ padding:.45rem 0; border-top:1px solid var(--rule-3); font-size:.94rem; }
.nav-extras li:first-child{ border-top:0; }
.nav-extras a{ color:var(--accent); text-decoration:none; }
@media (hover: hover){ .nav-extras a:hover{ text-decoration:underline; } }

/* the three ways on from the 404 page, drawn like the sidebar's buttons */
.pg-choices{ display:flex; flex-wrap:wrap; gap:.7rem; margin:0; }
.pg-choice{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.62rem 1.2rem; border:1px solid var(--accent); border-radius:10px;
  color:var(--accent); text-decoration:none; font-size:.92rem; font-weight:600;
  transition:background-color .18s ease, color .18s ease;
}
@media (hover: hover){ .pg-choice:hover{ background:var(--accent); color:var(--on-accent); } }
.pg-choice:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* sub-headings inside the Site Guide's sections */
.nav-group{ margin:1.6rem 0 .5rem; font-size:1rem; }
.nav-group:first-of-type{ margin-top:.2rem; }
/* a tip box holding several panels: each takes its own line */
.news-tip-multi .news-tip-text{ flex:1 1 100%; }
.ui-ico{ display:inline-block; width:1em; height:1em; vertical-align:-.12em; }
.ui-ico svg{ display:block; width:100%; height:100%; }
/* several paragraphs inside one panel */
.news-tip-text p{ margin:0 0 .65rem; }
.news-tip-text p:last-child{ margin:0; }
.news-tip-text kbd{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9em;
  border:1px solid var(--line); border-radius:4px; padding:0 .3em;
}

/* "Did you know?", keeping the shape it had on the home page */
.nav-tip{ margin-top:2.4rem; }

.pg-back{ margin:0 0 1.6rem; font-size:.88rem; }
/* underlined, so it reads as a link and not as part of the sentence */
.pg-back a{ color:var(--accent); text-decoration:underline;
            text-decoration-color:var(--accent-soft); text-underline-offset:2px; }
@media (hover: hover){ .pg-back a:hover{ text-decoration-color:var(--accent); } }

.pg-foot{
  max-width:46rem; margin:3.4rem auto 0; padding:1.6rem 1.5rem 2.6rem;
  border-top:1px solid var(--rule-2);
  font-size:.82rem; color:var(--muted); text-align:center;
}
.pg-foot p{ margin:0 0 .35rem; }
.pg-foot p:last-child{ margin:0; }
.pg-foot a{ color:var(--muted); }
/* the way on for a reader who has not found what they came for */
.pg-foot .pg-foot-find{ margin-bottom:.6rem; }
.pg-foot .pg-foot-find a{ color:var(--accent); text-decoration:underline;
                          text-decoration-color:var(--accent-soft); text-underline-offset:2px; }
@media (hover: hover){ .pg-foot .pg-foot-find a:hover{ text-decoration-color:var(--accent); } }

/* =========================================================================
   2  THE TOP BAR
   ========================================================================= */
.tb{
  position:sticky; top:0; z-index:60;
  background:var(--cream);
  border-bottom:1px solid var(--rule-1);
}
.tb-inner{
  max-width:72rem; margin:0 auto; padding:.55rem 1.5rem;
  display:flex; align-items:center; gap:.9rem;
}
.tb-home{
  display:inline-flex; align-items:center; gap:.4rem; flex:none;
  color:var(--accent); text-decoration:none;
  font-size:.86rem; font-weight:600;
  padding:.3rem .55rem; border-radius:8px;
}
.tb-home-ico{ width:20px; height:20px; line-height:0; flex:none; }
.tb-home-ico svg{ display:block; width:100%; height:100%; }
@media (hover: hover){ .tb-home:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); } }

.tb-div{ width:1px; align-self:stretch; background:var(--rule-2); flex:none; }

.tb-name{
  flex:none; font-family:var(--font-head); font-weight:700; font-size:1rem;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
@media (hover: hover){ .tb-name:hover{ color:var(--accent); } }

.tb-nav{ display:flex; align-items:center; gap:.15rem; flex:1 1 auto; min-width:0; flex-wrap:wrap; }
.tb-nav a{
  padding:.34rem .6rem; border-radius:8px;
  color:var(--ink); text-decoration:none; font-size:.92rem; white-space:nowrap;
}
@media (hover: hover){ .tb-nav a:hover{ color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); } }
/* the page you are on */
.tb-nav a[aria-current="page"]{ color:var(--accent); font-weight:700; }

.tb-tools{ display:flex; align-items:center; gap:.3rem; flex:none; margin-left:auto; position:relative; }
.tb-btn{
  width:34px; height:34px; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid transparent; border-radius:50%;
  color:var(--ink);
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.tb-btn svg{ display:block; width:19px; height:19px; }
@media (hover: hover){ .tb-btn:hover{ color:var(--accent); border-color:var(--accent); } }
.tb-btn[aria-expanded="true"]{ color:var(--accent); border-color:var(--accent); }
.tb-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* the menu button, phones only */
.tb-menu{ display:none; }

/* =========================================================================
   3  THE THREE MENUS
   ========================================================================= */
.tb-pop{
  position:absolute; top:calc(100% + .55rem); right:0; z-index:70;
  min-width:13rem; padding:.7rem;
  background:var(--cream-2); color:var(--ink);
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 30px rgba(var(--shadow-rgb), .16);
}
.tb-pop[hidden]{ display:none; }
.tb-pop-wide{ min-width:17rem; }

/* the list of profiles under the globe */
.tb-links{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.tb-links a{
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .5rem; border-radius:8px;
  color:var(--ink); text-decoration:none; font-size:.88rem;
}
@media (hover: hover){ .tb-links a:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); } }
.tb-links .tb-link-ico{ width:15px; height:15px; line-height:0; flex:none; color:var(--accent); }
.tb-links .tb-link-ico svg{ display:block; width:100%; height:100%; }
/* the name takes the middle, pushing the little arrow to the right edge */
.tb-links .tb-link-name{ flex:1 1 auto; min-width:0; }
.tb-links .tb-link-out{ width:12px; height:12px; line-height:0; flex:none; opacity:.5; }
.tb-links .tb-link-out svg{ display:block; width:100%; height:100%; }
@media (hover: hover){ .tb-links a:hover .tb-link-out{ opacity:1; } }

/* the appearance menu reuses the sidebar's controls, so it needs only its
   own spacing and labels */
.tb-pop .appearance-group{ margin:0 0 1rem; }
.tb-pop .appearance-group:last-child{ margin-bottom:0; }
.tb-pop .theme-picker-label{ margin:0 0 .5rem; }

/* =========================================================================
   4  THE NOTICEBOARD
   ========================================================================= */
/* THE QUOTE OF THE DAY. The whole block leans on the accent colour, so it
   takes on each colour scheme without needing a rule per scheme. */
.quote-card{
  position:relative;
  margin:0; padding:1.8rem 1.9rem 1.4rem 5rem;
  border:1px solid var(--rule-2); border-radius:14px;
  background:color-mix(in srgb, var(--accent) 4%, var(--cream));
}
.quote-card[hidden]{ display:none; }
/* the opening mark stands in the margin the padding above leaves for it */
.quote-mark{
  position:absolute; top:1.15rem; left:1.15rem;
  font-family:var(--font-head); font-size:4.6rem; line-height:.78;
  color:color-mix(in srgb, var(--accent) 34%, transparent);
  pointer-events:none; user-select:none;
}
.quote-card blockquote{
  position:relative; margin:0;
  font-family:var(--font-head); font-size:1.24rem; line-height:1.55;
  color:var(--ink); text-wrap:pretty;
}
.quote-card figcaption{
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem;
  margin-top:1.1rem; font-size:.9rem;
}
.quote-rule{ width:2.2rem; height:1px; background:var(--accent); flex:none; }
/* the accent is pulled towards the page's ink so the name clears 4.5:1 on
   the tinted panel in every colour scheme */
.quote-card cite{
  font-style:normal; font-weight:600;
  color:color-mix(in srgb, var(--accent) 86%, var(--ink));
}
.quote-when{
  margin-left:auto; font-size:.76rem; letter-spacing:.06em;
  /* a shade darker than the usual muted grey: the tinted panel costs a little
     contrast, and this has to clear 4.5:1 in all ten colour schemes */
  text-transform:uppercase; color:color-mix(in srgb, var(--ink) 34%, var(--muted));
}

/* the short lists of recent things */
.dash-list{ list-style:none; margin:0; padding:0; }
.dash-list li{ display:flex; gap:.9rem; padding:.7rem 0; border-top:1px solid var(--rule-3); }
.dash-list li:first-child{ border-top:0; padding-top:0; }
.dash-list .pg-when{ flex:none; width:6.6rem; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); padding-top:.2rem; }
.dash-more{ display:inline-block; margin-top:.9rem; font-size:.86rem; color:var(--accent); text-decoration:none; }
@media (hover: hover){ .dash-more:hover{ text-decoration:underline; } }

/* =========================================================================
   5  BIO
   ========================================================================= */
/* THE PHOTO AND THE NAME. Deliberately the same shape as the home page's
   hero (.hero-split in styles.css); the one difference is that the frame is
   dotted here and solid there. */
.bio-hero{ display:flex; align-items:center; gap:2rem; margin:1rem 0 1.8rem; }
.bio-hero-frame{
  flex:none; padding:9px;
  border:2px dotted var(--accent); border-radius:22px;
  box-shadow:0 14px 26px rgba(var(--shadow-rgb),.14);
}
.bio-hero-frame img{
  display:block; width:clamp(118px, 32vw, 166px); height:clamp(118px, 32vw, 166px);
  border-radius:15px; object-fit:cover; background:var(--photo-bg);
  transition:opacity .15s ease;
}
/* the photo is the way into the photo gallery */
.bio-hero-frame a{ display:block; border-radius:15px; }
@media (hover: hover){ .bio-hero-frame a:hover img{ opacity:.82; } }
.bio-hero-frame a:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.bio-hero-name{ margin:0; font-family:var(--font-head); font-weight:800;
                line-height:1.12; font-size:clamp(1.55rem, 5.6vw, 2.3rem); }
/* the same line as under the name on the home page (.hero-text .eyebrow in
   styles.css), repeated because that rule is tied to the home page's markup */
.bio-hero-sub{
  margin:.5rem 0 0; font-family:var(--font-body);
  text-transform:uppercase; letter-spacing:.16em; font-size:.72rem;
  color:var(--accent);
}

/* The facts box borrows .card-panel, .contact-line and .contact-icon from
   styles.css so it cannot drift from the home page's "Get in Touch" panel.
   This is the only place in this file that leans on a sidebar class. */
.bio-panel{ margin:0 0 2.2rem;
  /* the one thing it does not take from "Get in Touch": the paper colour is
     the Noticeboard quote card's instead */
  background:color-mix(in srgb, var(--accent) 4%, var(--cream)); }

/* =========================================================================
   6  BLOGS
   ========================================================================= */
/* the row of categories above the list */
.blog-filters{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.4rem; }
.blog-filter{
  padding:.3rem .7rem; cursor:pointer;
  background:none; color:var(--ink);
  border:1px solid var(--line); border-radius:999px;
  font-family:var(--font-body); font-size:.82rem;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
@media (hover: hover){ .blog-filter:hover{ border-color:var(--accent); color:var(--accent); } }
.blog-filter.active{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.blog-filter:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.blog-count{ opacity:.7; font-size:.76rem; }
/* the round button that folds a long row of tags to two lines (›) or shows
   them all (‹). pages.js adds it, sizes it to a tag button's height and shows
   it only when the row needs more than two lines. Lit like a switched-on tag
   when the tag that is on has been folded away. */
.blog-filters-fold{
  flex:none; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; color:var(--ink);
  border:1px solid var(--line); border-radius:50%;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.blog-filters-fold svg{ display:block; width:13px; height:13px; transition:transform .15s ease; }
.blog-filters-fold[aria-expanded="true"] svg{ transform:scaleX(-1); }
@media (hover: hover){ .blog-filters-fold:hover{ border-color:var(--accent); color:var(--accent); } }
.blog-filters-fold.on{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.blog-filters-fold:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* one line per post: title and tags on the left, date and length on the right */
.post-list{ list-style:none; margin:0; padding:0; }
.post-list li{
  display:flex; align-items:baseline; gap:1rem;
  padding:.9rem 0; border-top:1px solid var(--rule-3);
}
.post-list li:first-child{ border-top:0; }
.post-list li[hidden]{ display:none; }
.post-main{ flex:1; min-width:0; }
.post-list a{ color:var(--ink); text-decoration:none; font-family:var(--font-head); font-size:1.04rem; }
@media (hover: hover){ .post-list a:hover{ color:var(--accent); text-decoration:underline; } }
.post-tags{ display:inline-flex; flex-wrap:wrap; gap:.3rem; margin-left:.5rem; vertical-align:middle; }
.post-tag{
  display:inline-block; vertical-align:baseline;
  font-size:.64em; line-height:1; padding:.2em .65em; border-radius:4px;
  background:color-mix(in srgb, var(--ink) 9%, var(--cream));
  color:color-mix(in srgb, var(--ink) 72%, var(--muted));
  position:relative; top:-.16em; white-space:nowrap;
}
.post-when{ flex:none; text-align:right; font-size:.8rem; color:var(--muted); white-space:nowrap; }
.post-blurb{ display:block; margin:.3rem 0 0; font-size:.9rem; color:var(--muted); }

/* a post page */
.post-head{ margin:0 0 1.8rem; padding-bottom:1.2rem; border-bottom:1px solid var(--rule-1); }
.post-head h1{ margin:0 0 .5rem; font-family:var(--font-head); font-weight:800; font-size:clamp(1.6rem, 5.5vw, 2.15rem); line-height:1.18; }
.post-meta{ margin:0; font-size:.84rem; color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.post-body{ font-size:1.02rem; }
.post-body p{ margin:0 0 1.15rem; }
/* the opening letter of a piece, dropped across two lines in the heading
   typeface and the accent colour, as in a magazine. "flow-root" keeps a short
   first paragraph tall enough to hold it. */
.post-body > p:first-of-type{ display:flow-root; }
.post-body > p:first-of-type::first-letter{
  float:left; margin:.08em .1em 0 0;
  font-family:var(--font-head); font-weight:700;
  font-size:3.6em; line-height:.82; color:var(--accent);
}
.post-body h2{ margin:2rem 0 .7rem; font-family:var(--font-head); font-size:1.24rem; }
.post-body blockquote{
  margin:1.4rem 0; padding:.2rem 0 .2rem 1.1rem;
  border-left:2px solid var(--accent); color:var(--muted); font-style:italic;
}
/* THE LINE OF LINKS on a blog post, used twice: above the title and under
   the last paragraph. Blog posts carry no top bar, so this line is the whole
   of their navigation. "is-top" and "is-foot" only set spacing and hairline. */
.post-line{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  font-size:.9rem; color:var(--muted); }
.post-line a{ color:var(--accent); text-decoration:none; }
@media (hover: hover){ .post-line a:hover{ text-decoration:underline; } }
.post-line.is-top{ margin:0 0 1.6rem; }
.post-line.is-foot{ margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid var(--rule-2); }

/* <h2> starts a section, <h3> a point inside it. Both are listed by the
   contents button, so both leave room above so a heading jumped to is not
   pressed against the top of the screen. */
.post-body h3{ margin:1.5rem 0 .5rem; font-family:var(--font-head); font-size:1.1rem; }
.post-body h2, .post-body h3{ scroll-margin-top:1.2rem; }

/* ---- pieces a post can use for itself. "About My Name" uses all of them;
   any other post may too. ---- */
/* a picture in a post, with a line of caption under it */
.post-figure{ margin:1.4rem 0 1.5rem; text-align:center; }
.post-figure figcaption{ margin-top:.5rem; font-size:.86rem; font-style:italic; color:var(--muted); }
/* the diya: red clay painted in gold, with a flame that flickers gently
   (and stays still for readers who have asked for less motion) */
.diya{ display:block; width:min(15rem, 72%); height:auto; margin:0 auto; overflow:visible; }
@media (prefers-reduced-motion: no-preference){
  .diya-flame{ transform-box:view-box; transform-origin:120px 126px; animation:diya-flicker 2.6s ease-in-out infinite; }
  .diya-glow{ transform-box:view-box; transform-origin:120px 78px; animation:diya-glow 2.6s ease-in-out infinite; }
}
@keyframes diya-flicker{
  0%, 100%{ transform:scale(1, 1) rotate(0deg); }
  20%{ transform:scale(.97, 1.04) rotate(-2deg); }
  45%{ transform:scale(1.02, .96) rotate(1.5deg); }
  70%{ transform:scale(.98, 1.03) rotate(-1deg); }
}
@keyframes diya-glow{
  0%, 100%{ opacity:1; transform:scale(1); }
  45%{ opacity:.75; transform:scale(.94); }
}

/* the three parts of a name, side by side; one above another on a phone */
.name-parts{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.6rem;
  margin:0 0 1.2rem;
}
.name-part{
  display:flex; flex-direction:column; gap:.15rem;
  padding:.8rem .9rem; border:1px solid var(--line); border-radius:12px;
  background:var(--cream-2);
}
.name-part-word{ font-family:var(--font-head); font-weight:700; font-size:1.12rem; color:var(--ink); overflow-wrap:anywhere; }
.name-part-label{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.name-part-note{ font-size:.84rem; color:var(--muted); }

/* the official name turning into the everyday one, with a small label under each */
.name-shift{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem 1.1rem;
  margin:0 0 1.2rem; padding:.9rem 1rem;
  border:1px solid var(--line); border-radius:12px; background:var(--cream-2); text-align:center;
}
.name-shift-side{ display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.name-shift-name{ font-family:var(--font-head); font-size:1.05rem; font-weight:700; color:var(--ink); }
.name-shift-side.is-short .name-shift-name{ font-size:1.18rem; color:var(--accent); }
.name-shift-label{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.name-shift-arrow{ font-size:1.2rem; color:var(--accent); }

/* how to say each name: its syllables in a row of boxes */
.say{ margin:0 0 1.2rem; }
.say-word{ padding:.8rem 0; border-top:1px solid var(--rule-3); }
.say-word:first-child{ border-top:0; padding-top:.2rem; }
.say-word-name{ display:block; margin-bottom:.45rem; font-family:var(--font-head); font-weight:700; }
/* one row per name, however narrow the screen: the boxes shrink to fit */
.say-syls{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 7.6rem); gap:.4rem; list-style:none; margin:0; padding:0; }
.say-syls li{
  display:flex; flex-direction:column; align-items:center;
  padding:.45rem .4rem;
  border:1px solid var(--line); border-radius:10px; background:var(--cream-2); text-align:center;
}
.say-syl{ font-family:var(--font-head); font-size:1.08rem; font-weight:700; color:var(--accent); }
.say-gu{ font-family:"Noto Serif Gujarati", var(--font-body); font-size:1.02rem; line-height:1.5; color:var(--ink); }
/* the sounds worth listening for: the sound on the left, the note beside it */
.say-notes{ margin:0 0 1.2rem; }
.say-notes > div{ display:grid; grid-template-columns:5.2rem minmax(0, 1fr); gap:.2rem 1rem; padding:.6rem 0; border-top:1px solid var(--rule-3); }
.say-notes > div:first-child{ border-top:0; }
.say-notes dt{ font-family:var(--font-head); font-weight:700; font-size:1.1rem; color:var(--accent); }
.say-notes dd{ margin:0; }
/* the name in its own scripts */
.name-scripts{ margin:0 0 1.2rem; border-left:3px solid var(--accent); padding:.2rem 0 .2rem 1rem; }
.post-body .name-scripts p{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1rem; margin:.35rem 0; }
.name-scripts-label{ flex:none; width:6.8rem; white-space:nowrap; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.name-scripts-text{ font-size:1.3rem; line-height:1.6; color:var(--ink); }
.name-scripts-text[lang="gu"]{ font-family:"Noto Serif Gujarati", var(--font-body); }
.name-scripts-text[lang="hi"]{ font-family:"Noto Serif Devanagari", var(--font-body); }

@media (max-width:640px){
  .name-parts{ grid-template-columns:minmax(0, 1fr); }
  .say-syls{ gap:.3rem; }
  .say-notes > div{ grid-template-columns:3.6rem minmax(0, 1fr); gap:.2rem .7rem; }
  .name-shift{ flex-direction:column; }
  .name-shift-arrow{ transform:rotate(90deg); }
  .name-scripts-label{ width:auto; }
}

/* THE DOCK at the corner of a blog post. It reuses the top bar's round
   buttons, and the contents panel is literally a .tb-pop, so it matches the
   menus in every colour scheme and in dark mode. */
.post-tools{
  position:fixed; z-index:60;
  right:max(1.25rem, env(safe-area-inset-right));
  bottom:calc(1.25rem + env(safe-area-inset-bottom));
}
.post-dock{
  display:flex; align-items:center; gap:.2rem;
  padding:.3rem; border-radius:999px;
  background:var(--cream-2); border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(var(--shadow-rgb), .16);
}
/* back to the top on the left, the contents on the right */
.post-dock-div{ width:1px; height:18px; background:var(--rule-2); }
/* the top button appears only once the reader is a fair way down, so the
   dock is one button wide to begin with */
#postTop{ display:none; }
#postTop.is-on{ display:inline-flex; }
#postTop:not(.is-on) + .post-dock-div{ display:none; }

/* the contents panel opens upwards out of the dock */
.post-pop{
  top:auto; bottom:calc(100% + .55rem); right:0;
  width:min(17rem, calc(100vw - 2.6rem));
  max-height:min(58vh, 22rem); overflow:auto;
}
/* the heading takes the accent colour, like the small line above a page title */
.post-pop .theme-picker-label{ margin:0 0 .45rem; padding:0 .5rem; color:var(--accent); }
.post-toc-list li.is-sub a{ padding-left:1.45rem; font-size:.84rem; }
.post-toc-none{ margin:0; padding:.1rem .5rem .2rem; font-size:.86rem; color:var(--muted); }

/* the dock floats over the foot of the page, so the footer is given room to
   sit clear of it */
.post-tools ~ .pg-foot{ padding-bottom:5rem; }

/* a finger needs a bigger target than a mouse pointer */
@media (hover: none){
  .post-dock .tb-btn{ width:40px; height:40px; }
  .post-dock .tb-btn svg{ width:21px; height:21px; }
}

/* =========================================================================
   7  PHOTOS AND NEWS
   ========================================================================= */
/* The photo grid and its lightbox are the sidebar pages' own (.gallery-grid,
.gallery-item),
so they need nothing here beyond a little more room. */
.pg-section .gallery-grid{ margin-top:.2rem; }

/* the dated list on News & Updates, and the past announcements */
.pg-news{ list-style:none; margin:0; padding:0; }
.pg-news li{ display:flex; gap:1rem; padding:.85rem 0; border-top:1px solid var(--rule-3); }
.pg-news li:first-child{ border-top:0; }
/* wide enough for a day as well as a month, without wrapping */
.pg-news .pg-when{ flex:none; width:7.6rem; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); padding-top:.2rem; }
/* THE SECOND DATE on a past announcement: the day it came down. It sits in
   the same date cell so the two read as one range and the row does not change
   shape. Quieter and not in capitals, so the eye takes the top line first. */
.pg-when .pg-until{
  display:block; margin-top:.15rem;
  font-size:.92em; letter-spacing:.04em; text-transform:none;
  color:color-mix(in srgb, var(--accent) 55%, var(--muted));
}
@media (max-width:560px){ .pg-when .pg-until{ display:inline; margin:0 0 0 .3rem; } }


/* =========================================================================
   8  RESPONSIVE — LAST IN THE FILE ON PURPOSE
   ========================================================================= */
@media (max-width:860px){
  /* Mobile titles remain in the content; simple.js condenses the brand on scroll. */
  /* Preserve the compact Biography hero spacing on narrow screens. */
  .bio-hero{ margin-top:0; }

  .tb-inner{ padding:.5rem 1rem; gap:.6rem; flex-wrap:wrap; }
  .tb-home span:not(.tb-home-ico){ display:none; }      /* the house alone */
  .tb-menu{ display:inline-flex; }
  /* the page links drop below the bar and open with the menu button */
  .tb-nav{
    order:5; flex-basis:100%; display:none;
    flex-direction:column; align-items:stretch; gap:.1rem;
    padding:.4rem 0 .6rem; border-top:1px solid var(--rule-3);
  }
  .tb-nav.open{ display:flex; }
  .tb-nav a{ padding:.5rem .6rem; }
  .pg-main{ padding:2rem 1.1rem 0; }
}

@media (max-width:560px){
  .quote-card{ padding:1.4rem 1.2rem 1.1rem 3.3rem; }
  .quote-card blockquote{ font-size:1.08rem; }
  .quote-mark{ font-size:3.4rem; top:.95rem; left:.9rem; }
  .tb-name{ font-size:.94rem; }
  .pg-head h1{ font-size:1.55rem; }
  .post-list li{ flex-direction:column; gap:.2rem; }
  .post-when{ text-align:left; }
  .pg-news li, .dash-list li{ flex-direction:column; gap:.15rem; }
  .pg-news .pg-when, .dash-list .pg-when{ width:auto; padding-top:0; }
  /* Once the name drops below the photo,
both go to the middle of the page,
the same as the home page's hero at this width. */
  .bio-hero{ flex-direction:column; align-items:center; gap:1.2rem; text-align:center; }
}