/*
Theme Name: Greenie Gai
Theme URI: https://greeniegai.com
Author: Andrew Folkler
Description: Standalone theme for greeniegai.com. No parent. Every template is
  hand-coded, so a parent theme would only add a dependency that can break or
  need updating. Palette and type are the settled brand system; contrast values
  in the token block are measured, not preferences.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: greeniegai
*/

/* The whole page is scoped under .gg, which functions.php puts on <body>.
   That keeps this one file usable both here and in the standalone preview. */
/* greeniegai.com - homepage.
   Every content block sits in one 1200px box. Backgrounds still run full
   width; only the content is measured. Scoped under .gg so host resets
   cannot win the cascade. */

:root{
  --pine:#173A32; --pine-lift:#1F4B41; --cream:#F4F0E6; --cream-muted:#D8D2C2;
  --gold:#A58A5E; --gold-deep:#7C6746; --gold-lift:#B39C76;
  --charcoal:#292C2D; --charcoal-muted:#5A5F60;
  --rule:rgba(165,138,94,.32);
  --rule-cream:rgba(165,138,94,.5);
  --font-display:"Source Serif 4","Source Han Serif SC","Noto Serif SC",serif;
  --font-body:"Source Sans 3","Source Han Sans SC","Noto Sans SC",system-ui,sans-serif;
  --cream-lift:#FAF8F1;
  --gutter:clamp(1.25rem,4vw,3.25rem);
  --max:1200px;
  /* One column gap for the whole page. The hero and the cards below share it,
     which is what makes the photograph line up with the right-hand card. */
  --colgap:clamp(1.5rem,3vw,2.5rem);
}

body{ margin:0; background:#F4F0E6; }

.gg,.gg *,.gg *::before,.gg *::after{ box-sizing:border-box; }
.gg{
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.68;
  color:var(--charcoal); background:var(--cream); -webkit-font-smoothing:antialiased;
}
.gg h1,.gg h2,.gg p{ margin:0; }
.gg a{ color:inherit; }
.gg :lang(zh){ line-height:1.9; }
/* The ring has to change with the ground under it. A single cream outline
   was invisible on every cream section - measured at 1:1 against the contact
   block, the form's submit button and every link on the policy pages. Pine is
   the default because most of the page is cream, and the four dark bands flip
   it back. Anything added later inherits the right one for where it sits. */
.gg :focus-visible{ outline:2px solid var(--pine); outline-offset:3px; }
.gg .mastwrap :focus-visible,
.gg .hero :focus-visible,
.gg .says :focus-visible,
.gg .foot :focus-visible{ outline-color:var(--cream); }

/* Reachable by keyboard, out of the way otherwise. Without it, and with no
   main landmark, there was no way past the masthead. */
.gg .skip{
  position:absolute; left:1rem; top:.5rem; z-index:10;
  transform:translateY(-250%);
  background:var(--cream); color:var(--pine);
  padding:.65rem 1.1rem; border-radius:2px; text-decoration:none;
  font-family:var(--font-body); font-size:.875rem; font-weight:600;
}
.gg .skip:focus{ transform:translateY(0); }
/* The skip target takes focus programmatically, so it must not draw a ring
   around the whole page when it does. */
.gg main:focus{ outline:none; }

/* --- shell -------------------------------------------------------------- */

/* Clipped so the moon gate can run off the band's right and bottom edges. */
.gg .hero{ position:relative; background:var(--pine); color:var(--cream); overflow:hidden; }
.gg .inner{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }

/* The rule runs the full width of the band. The wordmark inside it sits on
   the box edge, and everything below aligns to that same vertical.

   The masthead carries its own pine ground rather than inheriting one from the
   hero. In the standalone preview it sat inside the hero section; in the theme
   it lives in header.php and renders on every page, including interior pages
   that have no dark band at all. Without this, cream type lands on cream. */
.gg .mastwrap{
  background:var(--pine); color:var(--cream);
  border-bottom:1px solid var(--rule); position:relative; z-index:3;
}
.gg .mast{ display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-block:1.125rem; }
.gg .wordmark{
  font-family:var(--font-display); font-size:17px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cream);
  text-decoration:none; white-space:nowrap;
}
.gg .nav{ display:flex; align-items:center; gap:1.5rem; font-size:.875rem; }
/* Padding rather than a bigger font, so the target clears 24px without the
   masthead changing size. The language button already clears it on its own. */
.gg .nav a{ color:var(--cream-muted); text-decoration:none; }
.gg .nav a:not(.lang){ display:inline-block; padding-block:3px; }
.gg .lang{
  color:var(--cream); text-decoration:none; font-size:.875rem;
  padding:.4rem .8rem; border:1px solid var(--rule); border-radius:2px;
}

/* --- hero body ---------------------------------------------------------- */

/* Identical container to .inner, and an identical two-column split. That is
   what guarantees the photograph starts on the same vertical as the right
   card below it, at every width, rather than only at exactly 1200. */
.gg .split{
  position:relative;
  max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--colgap); align-items:stretch;
}
.gg .copy{
  display:grid; gap:1.5rem; align-content:center;
  padding-block:clamp(2.75rem,5.5vw,4.5rem);
  position:relative; z-index:2;
}

.gg .h1{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2rem,4.2vw,3.25rem); line-height:1.07; letter-spacing:-.015em;
}
/* Same measure as the calls to action and the signature, so the copy block
   ends on the buttons' right edge. */
.gg .deck{ font-size:1.0625rem; color:var(--cream-muted); max-width:480px; }

/* --- photograph --------------------------------------------------------- */

/* Nudged right so the gate's ring clears the calls to action by about 110px
   at 1440. The hero clips the overflow. */
.gg .figure{ position:relative; min-height:540px; transform:translateX(clamp(0px,8.4vw,120px)); }
.gg .photo{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(165deg,#4E7367 0%,#345B50 55%,#1D3F37 100%);
}
/* Cutout hero, cut at the waist: enlarged until the band's bottom edge falls
   on the dress seam, so her clasped hands sit below it. Replaces the 9/27
   full-length figure (2026-10-02) - the hands-in-front pose read as guarded. */
.gg .photo--cutout{ background:none; }
.gg .photo--cutout img{
  position:absolute; top:11%; left:50%; transform:translateX(-50%);
  height:114%; width:auto; max-width:100%; aspect-ratio:504 / 920;
}

/* The moon gate (月洞门): the round doorway of a classical Suzhou garden
   estate, read by Chinese visitors as a fine private residence. A flat disc in
   pine-lift with one gold hairline ring - the gold is the wealth cue, kept to a
   rule as everywhere else. Its top clears the masthead and its foot runs off
   the band, so she stands in the doorway.

   Through it, a peony garden (富贵花, the flower of wealth and honour), from
   Zhang Ruoai's peony album leaf, Qing, 1700s (Cleveland Museum of Art
   1967.193.e, CC0). Leaves as ink, blooms in gold and cream, nothing above
   her shoulders but empty gate. Same box as the disc, so the garden is
   clipped to the doorway. */
.gg .figure::before,
.gg .figure::after{
  content:""; position:absolute; z-index:0; left:50%; top:7%;
  /* The vw cap keeps the ring clear of the buttons on smaller laptops; at
     1440 the band height is the limit. */
  height:min(106%,53vw); aspect-ratio:1; border-radius:50%;
  transform:translateX(-50%); pointer-events:none;
}
.gg .figure::before{
  background:var(--pine-lift);
  outline:1px solid rgba(179,156,118,.6); outline-offset:12px;
}
.gg .figure::after{ background:url(assets/img/peony-gate.webp) center / cover no-repeat; }
.gg .photo span{
  position:absolute; top:40%; left:58%; transform:translate(-50%,-50%);
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,240,230,.4); white-space:nowrap;
}

/* One layer, one hue, four ramps. A radial anchored at the bottom-left corner
   beds the identification plate; three linears release the top, left and right
   edges into the band. Every stop is pine at varying alpha, so where they
   overlap the opacity simply adds - no second colour, no seam anywhere.
   The bottom stays hard on purpose: that edge is the pine-to-cream section
   boundary, not an edge of the photograph.

   Budget, as a share of the column: left clears at 44%, right at 19%, top at
   17%. That leaves the middle for the face. Expect to retune these once a
   real portrait is in - a tighter crop may be needed. */
.gg .fade{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(88% 74% at 0% 100%,
      rgba(23,58,50,.97) 0%, rgba(23,58,50,.86) 22%,
      rgba(23,58,50,.52) 44%, rgba(23,58,50,.18) 62%,
      rgba(23,58,50,0) 78%),
    linear-gradient(180deg,
      var(--pine) 0%, rgba(23,58,50,.55) 3%,
      rgba(23,58,50,.16) 9%, rgba(23,58,50,0) 17%),
    linear-gradient(270deg,
      var(--pine) 0%, rgba(23,58,50,.5) 4%,
      rgba(23,58,50,.14) 11%, rgba(23,58,50,0) 19%),
    linear-gradient(90deg,
      var(--pine) 0%, rgba(23,58,50,.88) 5%,
      rgba(23,58,50,.48) 16%, rgba(23,58,50,.13) 30%,
      rgba(23,58,50,0) 44%);
}

/* --- matched call-to-action pair ---------------------------------------- */

.gg .cta{ display:grid; grid-template-columns:1fr 1fr; gap:.875rem 1rem; max-width:480px; }
.gg .ctacol{ display:grid; gap:.5rem; align-content:start; }
.gg .ctalbl{ font-size:.8125rem; color:var(--cream-muted); }
.gg .btn{
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:100%; min-height:46px; padding:.65rem .9rem;
  font-family:var(--font-body); font-size:.875rem; font-weight:600; letter-spacing:.02em;
  border-radius:2px; border:1px solid transparent; text-decoration:none; cursor:pointer;
}
.gg .btn--primary{ background:var(--cream); color:var(--pine); }
.gg .btn--ghost{ background:transparent; color:var(--cream); border-color:rgba(244,240,230,.55); }

/* --- tagline eyebrow + identification signature ------------------------- */

/* Each tree leads in its own language and carries the other as an eyebrow. */
.gg .eyebrow{ font-family:var(--font-display); font-size:1rem; color:var(--gold-lift); margin-bottom:-.75rem; }

/* Brokerage identification (MCL 339.2512e) as a signature under the calls to
   action, on plain pine, never over the photograph. Measured on pine:
   gold-lift 4.70:1, cream-muted about 8:1, cream 10.93:1. */
.gg .sigblock{ border-top:1px solid var(--rule); padding-top:1.25rem; max-width:480px; }
.gg .sigblock .cred{ font-size:14px; line-height:1.55; color:var(--cream-muted); }
/* 17px matches the wordmark exactly - the 2512e(3)(b) test, made visible. */
.gg .sigblock .broker{ display:block; font-size:17px; font-weight:600; color:var(--cream); }
/* The address wraps only between street and city. */
.gg .sigblock .nw{ white-space:nowrap; }

/* --- section 2: the split, hard edge off the pine ----------------------- */

.gg .paths{ background:var(--cream); padding-block:clamp(3rem,6vw,4.75rem); }
.gg .paths .cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--colgap); }
/* Cards, not a divider. The gold hairline is the keyline it is meant to be,
   and the lift is a single step off the cream ground - enough to contain,
   not enough to announce itself. */
.gg .paths .col{
  display:grid; gap:1.125rem; align-content:start;
  background:var(--cream-lift);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:clamp(1.5rem,2.8vw,2.25rem);
}

.gg .paths h2{
  font-family:var(--font-display); font-weight:400; color:var(--charcoal);
  font-size:clamp(1.375rem,2.1vw,1.75rem); line-height:1.22; text-wrap:balance;
  text-align:center;
}
/* Centred with the heading it belongs to. A ranged-left line under a centred
   one reads as an oversight rather than a choice. The questions stay left,
   because a centred bulleted list has no edge for the eye to run down. */
.gg .paths .intro{ color:var(--charcoal-muted); text-align:center; }

.gg .paths ul{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.gg .paths li{ position:relative; padding-left:1.375rem; }
/* Gold diamond. A rotated square rather than a glyph, so it stays crisp at
   any size and never picks up a font fallback. Decorative, so it carries no
   contrast requirement. Sized at 6px because rotating widens it to ~8.5px. */
.gg .paths li::before{
  content:""; position:absolute; left:1px; top:.68em;
  width:6px; height:6px; background:var(--gold);
  transform:rotate(45deg);
}
/* Plain text, not links. There are no resource pages to point at yet, and a
   question that looks clickable and is not is worse than one that never did. */

/* Ghost on cream. These route, they do not convert - the hero does that. */
.gg .go{
  justify-self:start; margin-top:.5rem;
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  padding:.6rem 1.25rem; border:1px solid var(--pine); border-radius:2px;
  color:var(--pine); background:transparent; text-decoration:none;
  font-size:.875rem; font-weight:600; letter-spacing:.02em;
  transition:background-color .18s ease, color .18s ease;
}
.gg .go:hover{ background:var(--pine); color:var(--cream); }
.gg .go:focus-visible{ outline:2px solid var(--pine); outline-offset:3px; }
/* The cards are symmetric containers, so their action centres. */
.gg .paths .go{ justify-self:center; }

/* --- responsive --------------------------------------------------------- */

@media (max-width:900px){
  .gg .split{ grid-template-columns:1fr; gap:0; }
  .gg .copy{ padding-block:clamp(2.25rem,6vw,3.25rem); }
  .gg .figure{ min-height:420px; margin-inline:calc(-1 * var(--gutter)); }
  .gg .fade{
    background:
      radial-gradient(120% 56% at 0% 100%,
        rgba(23,58,50,.97) 0%, rgba(23,58,50,.8) 26%,
        rgba(23,58,50,.4) 48%, rgba(23,58,50,0) 72%),
      linear-gradient(180deg,
        var(--pine) 0%, rgba(23,58,50,.55) 20%, rgba(23,58,50,0) 44%);
  }
  /* Stacked: no nudge, a shorter band, and a gate sized to the screen so the
     whole ring stays in view. The photo is held to the gate rather than the
     band, cropped at mid-chest. */
  .gg .figure{ transform:none; min-height:0; height:min(80vw,440px); }
  .gg .figure::before,
  .gg .figure::after{ top:min(4vw,22px); height:auto; width:min(84vw,460px); }
  .gg .photo--cutout img{ top:min(8vw,44px); height:min(117vw,640px); max-width:none; }
}

@media (max-width:820px){
  .gg .paths .cols{ grid-template-columns:1fr; gap:1.25rem; }
}
@media (max-width:520px){
  .gg .cta{ grid-template-columns:1fr; max-width:none; }
  .gg .nav a:not(.lang){ display:none; }
}

/* --- section 3: testimonials -------------------------------------------- */

/* Pine again, so the page runs dark, light, dark. A quote set large in cream
   serif on this ground reads as a pull-quote rather than a review widget. */
/* The ground is Wen Zhengming's Old Pine Tree (Ming, late 1530s; Cleveland
   Museum of Art 1964.43, CC0), its ink density printed as near-black ink on
   pine - dark marks on the ground, the way it was painted, never the reverse.
   Pure black on pine is about 2:1, so this stays a texture, and cream type
   only gains contrast over it. Pine underneath for when the image is late. */
.gg .says{
  background:var(--pine) url(assets/img/pine-ink-reviews.webp) center / cover no-repeat;
  color:var(--cream); padding-block:clamp(3rem,6vw,4.75rem);
}

.gg .says h2{
  font-family:var(--font-display); font-weight:400; color:var(--cream);
  font-size:clamp(1.375rem,2.1vw,1.75rem); line-height:1.22; text-align:center;
}

.gg .carousel{ margin-top:clamp(1.75rem,3.5vw,2.5rem); }
.gg .viewport{ overflow:hidden; }
.gg .track{
  display:flex; align-items:stretch;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.gg .slide{
  flex:0 0 100%; margin:0; padding-inline:clamp(0px,4vw,3rem);
  display:grid; gap:1.5rem; align-content:center; justify-items:center;
  text-align:center;
  /* The track geometry is exact at rest - each slide measures the viewport
     to the pixel. What read as an overflow was the 550ms in-flight frame:
     with every slide fully opaque, the outgoing quote is still legible at
     the left clip edge while the incoming one is cut mid-word at the right.
     Dropping the inactive slides out first means only one quote is ever
     readable. The opacity runs shorter than the transform on purpose, so
     the text is gone before it reaches an edge.

     Keyed off aria-hidden, which only the script sets, so with no
     JavaScript no slide is ever dimmed and slide one still shows. */
  transition:opacity .28s ease;
}
.gg .slide[aria-hidden="true"]{ opacity:0; }
/* Real italic, not a synthesised oblique - the italic axis is requested in
   the font link. Quotes run verbatim, typos and all, because a review that
   has been tidied stops sounding like a person. */
.gg .slide blockquote{
  margin:0; font-family:var(--font-display); font-weight:400; font-style:italic;
  font-size:clamp(1.1875rem,2.05vw,1.5rem); line-height:1.45;
  /* 46ch broke a three-sentence review into seven short lines inside a
     1000px slide - a narrow ragged column adrift in a wide band. 62ch is
     still inside the comfortable measure for a quote set this large, and
     it uses the box the section actually has. */
  max-width:62ch; text-wrap:pretty;
}
/* Reviewer name as a clear sign-off under the quote (Andrew, impeccable live
   2026-09-27): semibold sans at 18px, lightly tracked for gold on pine. */
.gg .slide figcaption{
  font-size:1.125rem; font-weight:600; letter-spacing:.02em; line-height:1.4;
  color:var(--gold-lift); font-style:normal;
}

.gg .dots{
  display:flex; justify-content:center; gap:0;
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
}
/* The dot stays 9px. The button around it is 24px, which is the WCAG 2.2
   minimum target, and invisible - so the control is finger sized without the
   design growing three bullets into three buttons. */
.gg .dots button{
  width:24px; height:24px; padding:0; border:0; background:transparent;
  display:grid; place-content:center; cursor:pointer;
}
.gg .dots button::before{
  content:""; width:9px; height:9px; border-radius:50%;
  border:1px solid rgba(244,240,230,.45);
  transition:background-color .2s ease, border-color .2s ease;
}
.gg .dots button[aria-current="true"]::before{ background:var(--gold); border-color:var(--gold); }
.gg .dots button:hover::before{ border-color:var(--cream); }
.gg .dots button:focus-visible{ outline-offset:0; }

@media (prefers-reduced-motion:reduce){
  .gg .track{ transition:none; }
}
/* --- section 4: about ---------------------------------------------------- */

/* Cream again, and the photograph swaps to the left so the page does not grow
   a column of portraits down one edge. Ranged left rather than centred: this
   is an asymmetric two-column, and a centred heading over one narrow column
   reads as a mistake. */
.gg .about{ background:var(--cream); padding-block:clamp(3rem,6vw,4.75rem); }
.gg .about .cols{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--colgap); align-items:center;
}

/* The framed portrait. Used by the about block and by the contact page, so
   the frame lives here and each place only says where it sits.

   start, not centre. Centred in a 528px column, a 420px portrait sits 54px
   inside the box edge, and the page grows a second left vertical that nothing
   else uses. Everything else - masthead, hero copy, the buy/sell cards, the
   contact block, the footer - starts on one line, and this starts on it too. */
.gg .shot{
  width:min(100%,420px); justify-self:start; aspect-ratio:4/5;
  border:1px solid var(--rule); border-radius:2px;
  background:linear-gradient(158deg,#EFEAD9,#DCD5C2);
  display:grid; place-content:center; gap:.3rem; text-align:center; padding:1rem;
  color:var(--gold-deep); font-size:.8125rem; letter-spacing:.04em;
  margin:0; overflow:hidden;
}
.gg .shot small{ font-size:.6875rem; opacity:.85; }
/* With a real photograph in it the frame stops being a placeholder and the
   padding would show as a mat inside the border, so it goes. */
.gg .shot:has(img){ padding:0; place-content:stretch; }
.gg .shot img{ width:100%; height:100%; object-fit:cover; display:block; }

.gg .about .bio{ display:grid; gap:1.125rem; align-content:center; }
.gg .about h2{
  font-family:var(--font-display); font-weight:400; color:var(--charcoal);
  font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.2;
}
.gg .about p{ max-width:52ch; }

@media (max-width:820px){
  .gg .about .cols{ grid-template-columns:1fr; gap:1.75rem; }
  .gg .about .shot{ width:min(100%,300px); }
}
/* --- section 5: FAQ ------------------------------------------------------ */

/* Native details/summary. No JavaScript, keyboard accessible for free, and
   every answer stays in the DOM whether open or shut - which is what lets
   answer engines lift them. */
.gg .faq{ background:var(--cream); padding-block:clamp(3rem,6vw,4.75rem); }
.gg .faq h2{
  font-family:var(--font-display); font-weight:400; color:var(--charcoal);
  font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.2; text-align:center;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.gg .faq .list{ max-width:820px; margin-inline:auto; display:grid; gap:.6rem; }

.gg .faq details{
  background:var(--cream-lift); border:1px solid var(--rule); border-radius:2px;
}
.gg .faq details{ --faq-gutter:clamp(1.1rem,2vw,1.5rem); --faq-pad-l:var(--faq-gutter);
  --faq-pad:var(--faq-gutter); }
.gg .faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.05rem calc(var(--faq-gutter) + 28px) 1.05rem var(--faq-gutter);
  font-family:var(--font-display); font-size:1.0625rem; line-height:1.4;
  color:var(--charcoal);
}
.gg .faq summary::-webkit-details-marker{ display:none; }
.gg .faq summary:focus-visible{ outline:2px solid var(--pine); outline-offset:-2px; }

/* A plus that becomes a minus. Two rules, no glyph, no arrow. The whole
   marker turns a quarter as it resolves, so the change reads as motion
   rather than as a swap. */
.gg .faq summary::before,
.gg .faq summary::after{
  content:""; position:absolute; right:var(--faq-pad); top:50%;
  width:13px; height:1px; background:var(--gold-deep);
  transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.gg .faq summary::after{ transform:rotate(90deg); }
.gg .faq details[open] summary::before{ transform:rotate(180deg); }
.gg .faq details[open] summary::after{ transform:rotate(180deg); opacity:0; }

/* Answer and question share a right edge, so both stop just short of the
   marker instead of the answer running underneath it. */
.gg .faq .answer{
  padding:0 calc(var(--faq-gutter) + 28px) 1.25rem var(--faq-gutter);
  color:var(--charcoal-muted);
  text-align:justify;
  /* Justified text on screen needs hyphenation or it opens rivers. */
  hyphens:auto;
  animation:gg-reveal .3s cubic-bezier(.4,0,.2,1);
}
/* At phone measure there are too few words a line for justification to
   spread evenly, hyphens or not, so it ranges left there. */
@media (max-width:600px){
  .gg .faq .answer{ text-align:left; }
}

@keyframes gg-reveal{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce){
  .gg .faq summary::before,.gg .faq summary::after{ transition:none; }
  .gg .faq .answer{ animation:none; }
}

/* --- section 6: contact -------------------------------------------------- */

/* The homepage calls to action jump to this section, so it needs room above
   it when it lands and no focus ring when it takes focus - it is a scroll
   target, not a control. */
.gg .contact{
  background:var(--cream); color:var(--charcoal);
  padding-block:clamp(3rem,6vw,4.75rem);
  scroll-margin-top:1.5rem;
}
.gg [tabindex="-1"]:focus{ outline:none; }
.gg .contact .cols{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--colgap); align-items:start;
}
.gg .contact h2{
  font-family:var(--font-display); font-weight:400; color:var(--charcoal);
  font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.2;
}
.gg .contact .lede{ color:var(--charcoal-muted); max-width:46ch; margin-top:.85rem; }

.gg .contact .details{ margin-top:1.75rem; font-size:.9375rem; line-height:1.7; color:var(--charcoal-muted); }
.gg .contact .details a{ color:var(--pine); text-decoration:none; border-bottom:1px solid var(--rule-cream); }
.gg .contact .details strong{ display:block; color:var(--charcoal); font-weight:600; margin-bottom:.35rem; }

/* The contact page (2026-10-03, second pass): one column on every screen -
   the map across the full container, the ask (intro + form) centred under it,
   then her details in three labelled columns. */
.gg .contact--page .inner{ display:grid; gap:clamp(2.25rem,4.5vw,3.5rem); }
.gg .contact--page .contact__ask{ width:min(100%,720px); margin-inline:auto; display:grid; gap:1.5rem; }
.gg .contact--page .lede{ margin:0; max-width:none; text-align:center; }
.gg .contact--page .lede p + p{ margin-top:.75rem; }
.gg .contact__details{
  width:min(100%,960px); margin-inline:auto; text-align:center;
  border-top:1px solid var(--rule); padding-top:clamp(1.75rem,3.5vw,2.5rem);
}
.gg .contact__who{ font-weight:600; color:var(--charcoal); margin:0 0 1.5rem; }
.gg .contact__who .sep{ color:var(--gold); margin:0 .35em; }
.gg .contact__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin:0; }
.gg .contact__cols dt{
  font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:.45rem;
}
.gg .contact__cols dd{ margin:0; color:var(--charcoal-muted); font-size:.9375rem; line-height:1.7; overflow-wrap:anywhere; }
.gg .contact__cols a{ color:var(--pine); text-decoration:none; border-bottom:1px solid var(--rule-cream); }
.gg .contact__cols .details__dir{ display:inline-block; margin-top:.4rem; font-weight:600; }
@media (max-width:700px){
  .gg .contact__cols{ grid-template-columns:1fr; gap:1.25rem; }
}

/* The Washtenaw County map. Inline SVG drawn by _build/map/render_map.py from
   Census TIGER data, printed like the paintings on the pine bands: cream and
   gold ink on pine. Town names are HTML over the drawing so they stay
   readable at phone width. */
.gg .wc-map{
  margin:0; background:var(--pine); border-radius:2px;
  padding:3px;
}
.gg .wc-map__frame{ position:relative; }
.gg .wc-map__static{ position:relative; width:min(100%,560px); margin-inline:auto; }
.gg .wc-map__svg{ display:block; width:100%; height:auto; }
.gg .wc-map .m-land{ fill:var(--pine-lift); }
.gg .wc-map .m-town path{ fill:rgba(244,240,230,.10); stroke:none; }
.gg .wc-map .m-twp path{ fill:none; stroke:rgba(244,240,230,.16); stroke-width:1; vector-effect:non-scaling-stroke; }
.gg .wc-map .m-lake path{ fill:var(--gold-lift); opacity:.55; stroke:none; }
.gg .wc-map .m-river path{ fill:none; stroke:var(--gold-lift); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.gg .wc-map .m-road path{ fill:none; stroke:rgba(244,240,230,.4); stroke-width:1.25; stroke-dasharray:6 4; vector-effect:non-scaling-stroke; }
.gg .wc-map .m-county path{ fill:none; stroke:var(--gold-lift); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.gg .wc-map .m-office circle{ fill:var(--cream); }
.gg .wc-map .m-office .m-office-ring{ fill:none; stroke:var(--cream); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.gg .wc-map__label{
  position:absolute; transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none;
  font-family:var(--font-body); font-weight:600; font-size:.8125rem; line-height:1.2;
  letter-spacing:.02em; color:var(--cream);
  /* A pine halo, so a name stays legible where it crosses a road or the river. */
  text-shadow:0 0 3px var(--pine-lift),0 0 3px var(--pine-lift),0 0 6px var(--pine-lift);
}
.gg .wc-map__label--big{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.0625rem,2vw,1.3125rem); letter-spacing:0; }
.gg .wc-map__label--office{ transform:translate(calc(-100% - 10px),-50%); text-align:right; }
.gg .wc-map__label--office span{ display:block; font-weight:400; font-size:.75rem; color:var(--cream-muted); }
/* The live layer (assets/contact-map.js). It sits over the drawing in the
   same frame, so the page never jumps when it arrives, and the drawing stays
   underneath as the fallback. Street tiles are OpenStreetMap's, tinted toward
   the paper and gold of the palette; the pin is ours. */
.gg .wc-map__frame.is-live{ height:clamp(320px,38vw,460px); }
.gg .wc-map__frame.is-live .wc-map__static{ display:none; }
.gg .wc-map__live{
  position:absolute; inset:0; z-index:1; border-radius:2px;
  background:var(--cream-muted); font-family:var(--font-body);
}
.gg .wc-map__live .leaflet-tile-pane{ filter:var(--map-tint); }
.gg .wc-map{ --map-tint:grayscale(1) sepia(.45) saturate(.8) brightness(1.04) contrast(.92); }
.gg .wc-pin span{
  display:block; width:7px; height:7px; border-radius:50%;
  background:var(--pine); border:1.5px solid var(--cream); outline:1px solid var(--pine);
  box-sizing:border-box;
}
.gg .wc-map__live .wc-pin__tip{
  background:var(--pine); color:var(--cream); border:0; border-radius:2px; box-shadow:none;
  font:600 .625rem/1.1 var(--font-body); padding:.15rem .3rem; text-align:right;
}
.gg .wc-map__live .wc-pin__tip span{ display:block; font-weight:400; font-size:.625rem; color:var(--cream-muted); }
.gg .wc-map__live .leaflet-tooltip-left.wc-pin__tip::before{ border-left-color:var(--pine); }
.gg .wc-map__live .leaflet-bar{ border:1px solid var(--rule); box-shadow:none; border-radius:2px; }
.gg .wc-map__live .leaflet-bar a{ color:var(--pine); background:var(--cream-lift); border-bottom-color:var(--rule); }
.gg .wc-map__live .leaflet-bar a:first-child{ border-radius:2px 2px 0 0; }
.gg .wc-map__live .leaflet-bar a:last-child{ border-radius:0 0 2px 2px; }
.gg .wc-map__reset a{ display:flex; align-items:center; justify-content:center; }
.gg .wc-map__live .leaflet-control-attribution{ background:rgba(250,248,241,.85); font-size:.625rem; color:var(--charcoal-muted); }
.gg .wc-map__live .leaflet-control-attribution a{ color:var(--pine); }
.gg .wc-map__hint{
  position:absolute; z-index:1000; left:50%; bottom:.75rem; transform:translateX(-50%);
  background:var(--pine); color:var(--cream); border:1px solid var(--gold-lift); border-radius:2px;
  font:600 .8125rem/1 var(--font-body); letter-spacing:.02em; padding:.55rem .8rem; cursor:pointer; white-space:nowrap;
}
.gg .wc-map__hint:focus-visible{ outline:2px solid var(--cream); outline-offset:2px; }

@media (max-width:600px){
  .gg .wc-map__label{ font-size:.6875rem; }
  .gg .wc-map__label--office span{ font-size:.625rem; }
}

.gg .form{ display:grid; gap:.85rem; }
.gg .form .row{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.gg .form label{ display:grid; gap:.35rem; font-size:.8125rem; color:var(--charcoal-muted); }
/* Every field is required, so the asterisk is noise. One line at the top of
   the form says so once instead. */
.gg .form input,
.gg .form select,
.gg .form textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--charcoal);
  background:var(--cream-lift); border:1px solid var(--rule-cream); border-radius:2px;
  padding:.65rem .8rem; width:100%;
}
.gg .form textarea{ min-height:130px; resize:vertical; }
.gg .form input:focus-visible,
.gg .form select:focus-visible,
.gg .form textarea:focus-visible{ outline:2px solid var(--pine); outline-offset:2px; }
.gg .form .note,
.gg .formwrap .note{ font-size:.8125rem; color:var(--charcoal-muted); margin:0; }
.gg .form button{
  justify-self:start; margin-top:.35rem; min-height:46px; padding:.65rem 1.6rem;
  background:var(--pine); color:var(--cream); border:1px solid var(--pine); border-radius:2px;
  font-family:var(--font-body); font-size:.875rem; font-weight:600; letter-spacing:.02em;
  cursor:pointer;
}
.gg .form button:hover{ background:transparent; color:var(--pine); }

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

/* Continues the pine rather than switching to charcoal - the two measure
   1.1:1 against each other and would read as one surface with a seam. */
/* Mount Tai (泰山), Shandong's sacred mountain - "steady as Mount Tai" - from
   Wang Hui and workshop, The Kangxi Emperor's Southern Inspection Tour, Scroll
   Three: Jinan to Mount Tai (1698; Metropolitan Museum of Art, CC0), in the
   same ink-on-pine treatment as the reviews band, edge to edge. */
.gg .foot{
  background:var(--pine) url(assets/img/taishan-footer.webp) center 30% / cover no-repeat;
  color:var(--cream-muted); border-top:1px solid var(--rule);
}
.gg .foot .grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:clamp(1.5rem,3vw,2.5rem);
  padding-block:clamp(2.5rem,5vw,3.5rem);
}
.gg .foot .id{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }

/* The brokerage mark sits beside the identification block, bottom left, and
   must render at or above the largest instance of her name on the page.
   See MCL 339.2512e(3)(b). */
.gg .foot .reo{ width:76px; height:76px; flex:none; display:block; }
.gg .foot .idtext{ font-size:.875rem; line-height:1.65; }
.gg .foot .idtext .name{
  display:block; font-family:var(--font-display); font-size:17px; font-weight:600;
  color:var(--cream); margin-bottom:.3rem;
}
.gg .foot .idtext a{ color:inherit; }

.gg .foot h3{
  font-family:var(--font-body); font-size:.6875rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-lift);
  margin:0 0 .85rem;
}
/* Same 24px floor as the masthead. Scoped to the link lists on purpose: the
   telephone and email in the identification block are inline in a block of
   text, where the target size rule does not apply, and padding there would
   break the address rhythm. */
.gg .foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.875rem; }
.gg .foot ul a{ display:inline-block; padding-block:3px; }
.gg .foot a{ color:var(--cream-muted); text-decoration:none; }
.gg .foot a:hover{ color:var(--cream); }
.gg .foot .handle{ color:var(--cream); }
/* Linked handles carry a dotted gold underline so they read as tappable;
   the WeChat ID is plain text (no public profile URL exists). */
.gg .foot a.handle{ text-decoration:underline dotted; text-decoration-color:var(--gold-lift); text-underline-offset:3px; }
.gg .foot a.handle:hover{ text-decoration-style:solid; }

.gg .foot .base{
  border-top:1px solid var(--rule); padding-block:1.75rem;
  display:grid; gap:.9rem; justify-items:stretch; text-align:center;
  font-size:.75rem; line-height:1.7;
}
/* Runs the full measure of the box rather than a centred column. */
.gg .foot .base .disc{ font-style:italic; }
/* The disclaimer above stays at .75rem - it is fine print and reads as fine
   print. This line is not: it carries the fair-housing notice and the
   brokerage attribution, which are the two things a visitor may actually
   need to read. Sized to match .idtext, the identification block it belongs
   with, rather than the disclaimer it sits under. Same cream as the rest of
   the footer, so it gains size and not volume. */
.gg .foot .base .cr{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  font-size:.875rem; line-height:1.6;
}
/* Was a bordered box with the letters EHO in it, standing in for the real
   mark. The mark carries its own "EQUAL HOUSING OPPORTUNITY" wordmark, which
   at this size is far too small to read, so the words stay in the line beside
   it and the image is the mark rather than the statement. Intrinsic
   dimensions are on the tag so the row does not shift while it loads. */
.gg .foot .eho{ height:32px; width:auto; flex:none; display:block; }

@media (max-width:900px){
  .gg .contact .cols{ grid-template-columns:1fr; gap:2rem; }
  .gg .foot .grid{ grid-template-columns:1fr 1fr; }
  .gg .foot .id{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .gg .form .row{ grid-template-columns:1fr; }
  /* Pages and Compliance stay side by side - short lists, and one column
     made the footer nearly 900px tall. Identification and Find me run full. */
  .gg .foot .grid{ grid-template-columns:1fr 1fr; row-gap:2rem; }
  .gg .foot .grid > :last-child{ grid-column:1 / -1; }
  .gg .foot h3{ font-size:.75rem; }
  .gg .foot .base{ font-size:.8125rem; }
}

/* --- the Chinese tree ---------------------------------------------------- */

/* Everything above is shared. These rules only correct the places where a
   setting tuned for Latin is wrong for Han, so /zh/ looks like the same site
   rather than like a translation that broke the layout.

   Three things are wrong for Han and only for Han:

   1. Tight leading. Latin display sizes sit happily at 1.07 because most
      letters are short; Han glyphs fill the em box, so ascenders and
      descenders of adjacent lines touch. Every heading gets its leading back.
   2. Negative tracking. Han is drawn on a fixed body already, so pulling it
      tighter closes the gaps the design depends on.
   3. Italic. There is no italic Han, so font-style:italic gets a synthesised
      slant, which is the one thing that makes CJK look cheap. The pull-quote
      and the disclaimer both ask for italic and both stop asking here.

   :lang(zh) matches zh-Hans, so this keys off <html lang> and needs no body
   class. Latin runs inside a Chinese page that are marked lang="en" - her
   name, the brokerage, REALTOR - keep the Latin settings. */

.gg .h1:lang(zh){ line-height:1.28; letter-spacing:0; }
.gg .paths h2:lang(zh),
.gg .says h2:lang(zh){ line-height:1.45; }
.gg .about h2:lang(zh),
.gg .faq h2:lang(zh),
.gg .contact h2:lang(zh){ line-height:1.4; }
.gg .faq summary:lang(zh){ line-height:1.6; }

.gg .slide blockquote:lang(zh){
  font-style:normal;
  line-height:1.8;
  /* ch measures the zero of the first available font. In Source Han that is
     a half-width figure, so 62ch lands at roughly 31 characters a line -
     inside the comfortable measure for Simplified Chinese, and close enough
     to the English column that the two pages read as one design. */
}
.gg .foot .base .disc:lang(zh){ font-style:normal; }

/* The reviews are real clients' words in English. Saying so once, here, is
   what lets the quotes be read as Chinese without any of them being passed
   off as something a person wrote. Sized and coloured as a note, not as a
   second deck. */
.gg .says .note-zh{
  margin-top:.75rem; text-align:center;
  font-size:.875rem; color:var(--cream-muted);
}

/* --- long-form pages ----------------------------------------------------- */

/* The compliance set and anything else that is a document rather than a
   layout. A short pine band so the page still opens on the brand ground,
   then one measured column on cream. */

.gg .pagehead{
  background:var(--pine); color:var(--cream);
  padding-block:clamp(2.25rem,4.5vw,3.5rem);
}
.gg .pagehead h1{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.75rem,3.4vw,2.6rem); line-height:1.15;
  letter-spacing:-.015em; text-wrap:balance;
}
.gg .pagehead h1:lang(zh){ line-height:1.3; letter-spacing:0; }
.gg .pagehead .updated{
  margin-top:.9rem; font-size:.8125rem; letter-spacing:.02em;
  color:var(--gold-lift);
}

.gg .doc{ background:var(--cream); padding-block:clamp(2.5rem,5vw,4rem); }
/* 68ch, wider than the 46ch used for a deck. Legal text is read in long
   passages rather than glanced at, and a narrow measure turns a clause into
   a column of fragments. */
.gg .prose{ max-width:68ch; }
.gg .prose > * + *{ margin-top:1.15rem; }
.gg .prose h2{
  font-family:var(--font-display); font-weight:400; color:var(--charcoal);
  font-size:clamp(1.25rem,2vw,1.5rem); line-height:1.3;
  margin-top:2.75rem; padding-top:1.5rem; border-top:1px solid var(--rule);
}
.gg .prose h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.gg .prose h3{
  font-family:var(--font-body); font-weight:600; color:var(--charcoal);
  font-size:1.0625rem; line-height:1.4; margin-top:1.9rem;
}
.gg .prose p{ color:var(--charcoal-muted); }
.gg .prose strong{ color:var(--charcoal); font-weight:600; }
.gg .prose a{ color:var(--pine); text-decoration:underline; text-underline-offset:.15em; }

.gg .prose ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.gg .prose li{ position:relative; padding-left:1.375rem; color:var(--charcoal-muted); }
.gg .prose li::before{
  content:""; position:absolute; left:1px; top:.68em;
  width:6px; height:6px; background:var(--gold); transform:rotate(45deg);
}

/* Warranty disclaimers are set in capitals because conspicuousness is the
   point of them, so the capitals stay. What they do not need is the size and
   weight of body copy shouting down the whole page - smaller, tracked out,
   on a lifted panel reads as the legal instrument it is. */
.gg .prose .legal-caps{
  font-size:.9375rem; line-height:1.7; letter-spacing:.01em;
  background:var(--cream-lift); border-left:2px solid var(--rule-cream);
  padding:1.1rem 1.25rem;
}

/* The one thing on these pages that is not boilerplate: who to contact. */
.gg .prose .contact-block{
  background:var(--cream-lift); border:1px solid var(--rule); border-radius:2px;
  padding:clamp(1.1rem,2.2vw,1.5rem); color:var(--charcoal);
}
.gg .prose .contact-block a{ color:var(--pine); }

/* --- Forminator, dressed as the site ------------------------------------- */

/* The contact form's markup comes from the plugin, so the site meets it here
   rather than the other way round. Two things follow from that.

   First, no typography settings were written into the form at all. Forminator's
   own form templates set font-family Roboto on every control, and Roboto is
   Lotus Dragon Capital's face, not this one. Leaving those settings unwritten
   and dressing the result here keeps the type decision in one place.

   Second, these class names are the plugin's, not ours. If a Forminator update
   renames them, the symptom is an unstyled form rather than a broken one, and
   the fix is in this block. The hand-built markup in front-page.php is still
   the fallback for the case where the plugin is deactivated, and it is styled
   by .gg .form above - the two sets are deliberately separate. */

.gg .formwrap{ display:grid; gap:.85rem; }
/* The plugin puts .forminator-ui on the form itself, not on a wrapper around
   it - a ".forminator-ui form" selector never matches, which is how the rows
   once ran together with Send touching the message box. Rows are spaced by
   margin rather than by a grid gap because the form also holds hidden inputs
   and an empty captcha row. The top margin is the plugin's 30px, and its
   stylesheet outranks a class, hence the one !important. */
.gg .formwrap form.forminator-ui.forminator-custom-form{ margin-top:0 !important; }

/* Forminator's cols carry their own width classes. Flex rather than grid so a
   row of one and a row of two need no separate rule. */
.gg .formwrap .forminator-row{
  display:flex; flex-wrap:wrap; gap:.85rem; margin:0 0 1.1rem;
}
.gg .formwrap .forminator-row-last{ margin:1.75rem 0 0; }
.gg .formwrap .forminator-col{ flex:1 1 100%; min-width:0; }
.gg .formwrap .forminator-col-6{ flex:1 1 calc(50% - .45rem); }
@media (max-width:560px){
  .gg .formwrap .forminator-col-6{ flex-basis:100%; }
}

/* Colour, spacing and family come from the form's own settings, which are set
   to defer to the theme - see forminator_setup.py. Size and weight are the two
   the plugin insists on writing into a per-form stylesheet keyed to
   #forminator-module-<id>, and an id beats any number of classes. These two
   declarations are the only place this file overrules the plugin by force,
   and they exist so the labels match the ones on the fallback markup rather
   than announcing themselves in 12px bold. */
.gg .formwrap .forminator-label{
  display:block; margin:0 0 .35rem;
  font-family:var(--font-body); letter-spacing:0; text-transform:none;
  color:var(--charcoal-muted);
  font-size:.8125rem !important;
  font-weight:400 !important;
}
/* Required fields are marked with Forminator's own asterisk, in red, and a
   one-line key under the form says what it means (gg_required_note()). Red is
   outside the palette on purpose: it is a convention, read in an instant.
   #A3352B is 5.9:1 on cream. The inputs also carry aria-required. */
.gg .formwrap .forminator-required,
.gg .formwrap .note--req .req{ display:inline; color:#A3352B !important; font-weight:600; }
/* Forminator gives the form a 30px bottom margin; the key sits right under Send. */
.gg .formwrap form.forminator-ui{ margin-bottom:0 !important; }
.gg .formwrap .note--req{ margin-top:.85rem; }
/* On the contact page the form is a centred column, so Send and its key centre too. */
.gg .contact--page .forminator-row-last .forminator-field,
.gg .contact--page .note--req{ text-align:center; }

.gg .formwrap .forminator-input,
.gg .formwrap .forminator-textarea,
.gg .formwrap select{
  font-family:var(--font-body); font-size:1rem; line-height:1.5;
  color:var(--charcoal); background:var(--cream-lift);
  border:1px solid var(--rule-cream); border-radius:2px;
  padding:.65rem .8rem; width:100%; box-shadow:none; height:auto;
}
.gg .formwrap .forminator-textarea{ min-height:130px; resize:vertical; }

.gg .formwrap .forminator-button-submit{
  justify-self:start; min-height:46px; padding:.65rem 1.6rem;
  background:var(--pine); color:var(--cream);
  border:1px solid var(--pine); border-radius:2px;
  font-family:var(--font-body); font-size:.875rem; font-weight:600;
  letter-spacing:.02em; cursor:pointer; text-transform:none;
}
.gg .formwrap .forminator-button-submit:hover{ background:transparent; color:var(--pine); }

/* Validation and response messages, in the palette rather than the plugin's
   default red. Pine for the confirmation, gold-deep for the errors: gold is
   never a plate here, but as text on cream it measures 4.75:1 and is the only
   warm signal the palette has. */
.gg .formwrap .forminator-error-message{
  font-size:.8125rem; color:var(--gold-deep); margin-top:.35rem;
}
.gg .formwrap .forminator-input.forminator-has_error,
.gg .formwrap .forminator-textarea.forminator-has_error,
.gg .formwrap select.forminator-has_error{ border-color:var(--gold-deep); }
.gg .formwrap .forminator-response-message{
  font-size:.9375rem; line-height:1.6; padding:.85rem 1rem; border-radius:2px;
  background:var(--cream-lift); border-left:2px solid var(--pine);
  color:var(--charcoal);
}
.gg .formwrap .forminator-response-message.forminator-error{
  border-left-color:var(--gold-deep);
}
/* Forminator ships this empty and visible, so it reserves space above the
   form until something fills it. */
.gg .formwrap .forminator-response-message:empty{ display:none; }

/* --- interior guide pages ----------------------------------------------- */

/* Data tables in prose - built for the millage table on the property tax
   page. Tabular figures because the columns are numbers meant to be compared,
   and the right-aligned last column keeps the mills in one visual line. */
.gg .prose table{
  width:100%; border-collapse:collapse;
  font-variant-numeric:tabular-nums; font-size:.9375rem;
}
.gg .prose th,
.gg .prose td{
  text-align:left; padding:.55rem .75rem;
  border-bottom:1px solid var(--rule-cream); color:var(--charcoal-muted);
}
.gg .prose thead th{
  font-size:.8125rem; letter-spacing:.02em; text-transform:uppercase;
  color:var(--gold-deep); border-bottom:1px solid var(--gold);
}
.gg .prose th:last-child,
.gg .prose td:last-child{ text-align:right; }

/* The closing ask on every guide page. Pine ground, so the focus ring flips
   to cream like the other dark bands. The .btn base is width:100% for the
   hero's grid; here it hugs its label. */
.gg .pagecta{
  background:var(--pine); color:var(--cream);
  padding-block:clamp(3rem,6vw,4.5rem); text-align:center;
}
.gg .pagecta h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.5rem,3vw,2rem); line-height:1.25;
}
.gg .pagecta h2:lang(zh){ line-height:1.45; }
.gg .pagecta p{ margin-top:.65rem; color:var(--cream-muted); }
.gg .pagecta .btn{
  display:inline-flex; width:auto;
  margin-top:1.5rem; padding-inline:1.75rem;
}
.gg .pagecta :focus-visible{ outline-color:var(--cream); }

/* The homepage's six questions are a taste of the full set. */
.gg .faq .faq-more{
  max-width:820px; margin:1.25rem auto 0; text-align:center;
  font-size:.9375rem;
}
.gg .faq .faq-more a{ color:var(--pine); text-decoration:underline; text-underline-offset:.15em; }

/* The FAQ page itself. Questions are real headings inside the summary, so the
   summary has to stop treating them as block-level or every question gains a
   line break and a heading margin it does not want. */
.gg .faq--page .list{ max-width:820px; margin-inline:auto; }
/* Questions run four steps above the answers so the eye can scan the list by
   question alone. */
.gg .faq--page summary h2{
  display:inline; margin:0;
  font-family:var(--font-display); font-weight:400; font-size:1.3125rem;
  line-height:1.35; color:var(--charcoal);
}
.gg .doc--intro{ padding-bottom:0; }

/* Centered page title at section-heading scale, for pages that open on one
   statement rather than a document. */
.gg .pagehead--center{ text-align:center; }
.gg .pagehead--center h1{ font-size:clamp(2.25rem,4.4vw,3.125rem); line-height:1.1; }
/* Contact opens on one word, so it can carry more size: never under 50px. */
.gg .pagehead--contact h1{ font-size:clamp(3.125rem,5vw,3.75rem); }

/* The disclaimer closes the page, under the form: one centered italic line
   in a hairline box, led by "Note:" in roman so the label reads as a label. */
.gg .faq-note{
  max-width:820px; margin:clamp(2.25rem,4.5vw,3.25rem) auto 0;
  padding:1rem clamp(1.25rem,3vw,2rem);
  background:var(--cream-lift); border:1px solid var(--rule); border-radius:2px;
  text-align:center; font-style:italic; font-size:.9375rem; color:var(--charcoal-muted);
}
.gg .faq-note strong{ font-style:normal; font-weight:600; color:var(--charcoal); }

/* Peony heads from the Yuan Peonies (Cleveland Museum of Art 1976.90, CC0),
   printed faint gold on the cream - a watermark in the margins, not a
   pattern. Two strips at different repeat heights so the left and right
   never line up. The question cards are opaque, so the blooms only show in
   the gutters, and they go when there is no gutter to show in. */
.gg .faq--page{
  background:
    url(assets/img/peony-margin-left.webp) left -70px top 40px / 360px auto repeat-y,
    url(assets/img/peony-margin-right.webp) right -70px top 220px / 360px auto repeat-y,
    var(--cream);
}
/* ~ not +: the FAQPage JSON-LD script sits between the two sections. */
.gg .faq--page ~ .contact{ border-top:1px solid var(--rule); }
@media (max-width:1100px){
  .gg .faq--page{ background:var(--cream); }
}
@media (max-width:600px){
  .gg .faq--page summary h2{ font-size:1.1875rem; }
}

/* --- About page (2026-09-27) --------------------------------------------- */
/* Layout from the Mobbin pass: Kalstore (portrait beside a pine intro panel),
   Complex Law (centered heading + audience cards), Swap/Ragged Edge (centered
   serif pull quote), Savor (big serif heading beside a compact text block).
   Everything centers on a ~720px column except the deliberate splits. */
.gg .ab-sec--cream{ background:var(--cream); }
/* Consecutive cream sections share one gap instead of doubling it. */
.gg .ab-sec--flush{ padding-top:0; }
.gg .ab-sec--pine{ background:var(--pine); color:var(--cream); }
/* Promises band texture (2026-10-02): Peonies, Yuan dynasty hanging scroll
   (Cleveland Museum of Art 1976.90, CC0) - the whole bush, ground to top,
   rising up each side of the band, mirrored on the right. Leaves print as
   ink a shade darker than pine, blooms in gold and cream (the Ink Way Round
   Rule's peony exception). Only the outer half of each bush shows; the card
   photos sit over its inner edge (no fade, Andrew 2026-10-02). */
.gg .ab-sec--pine:has(.ab-cards){ position:relative; overflow:hidden; isolation:isolate; padding-bottom:clamp(3rem,5vw,4rem); }
.gg .ab-sec--pine:has(.ab-cards)::before,
.gg .ab-sec--pine:has(.ab-cards)::after{
  content:""; position:absolute; z-index:-1; top:0; bottom:0; aspect-ratio:640/1060;
  background:url(assets/img/peony-tall.webp) center / 100% 100% no-repeat; pointer-events:none;
}
.gg .ab-sec--pine:has(.ab-cards)::before{ left:0; transform:translateX(-52%); }
.gg .ab-sec--pine:has(.ab-cards)::after{ right:0; transform:translateX(52%) scaleX(-1); }
@media (max-width:1180px){ .gg .ab-sec--pine:has(.ab-cards)::before, .gg .ab-sec--pine:has(.ab-cards)::after{ display:none; } }

/* 1. Intro: portrait and pine panel as equal halves, edge to edge. */
.gg .ab-intro{ display:grid; grid-template-columns:1fr 1fr; max-width:1080px; margin-inline:auto; }
.gg .ab-intro .shot{ width:100%; max-width:none; aspect-ratio:auto; min-height:100%; border:0; border-radius:2px 0 0 2px; }
/* The photo fills the panel's height, however long the intro copy runs. */
.gg .ab-intro .shot img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.gg .ab-panel{ background:var(--pine); color:var(--cream); border-radius:0 2px 2px 0;
  padding:clamp(2rem,5vw,4rem); display:grid; align-content:center; gap:1.25rem; }
.gg .ab-panel h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,3.6vw,2.875rem); line-height:1.1; }
.gg .ab-panel p{ font-size:clamp(1.0625rem,1.4vw,1.1875rem); line-height:1.65; color:var(--cream-muted); max-width:44ch; }
.gg .ab-panel p:first-of-type{ color:var(--cream); }

/* 2-6. Photo-led bands (2026-10-02). Grounds alternate cream / pine so each
   category reads as its own block; photos of her break the text. */
.gg .ab-sec{ padding-block:clamp(4rem,7.5vw,6.5rem); }
.gg .ab-sec--ink{
  background:var(--pine) url(assets/img/pine-ink-reviews.webp) center / cover no-repeat;
  color:var(--cream);
}
.gg .ab-wrap{ max-width:1120px; margin-inline:auto; padding-inline:var(--gutter); }
.gg .ab-h2{ text-wrap:balance; font-family:var(--font-display); font-weight:400; font-size:clamp(2.625rem,5.2vw,4.25rem); line-height:1.05; color:var(--charcoal); }
.gg .ab-h2 em{ font-style:italic; color:var(--gold-deep); }
.gg .ab-sec--pine .ab-h2, .gg .ab-sec--ink .ab-h2{ color:var(--cream); }
.gg .ab-sec--pine .ab-h2 em, .gg .ab-sec--ink .ab-h2 em{ color:var(--gold-lift); }
.gg .ab-center{ text-align:center; }
.gg .ab-photo{ margin:0; border:1px solid var(--rule); border-radius:2px; overflow:hidden; }
.gg .ab-photo img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Who she helps: a tall photo beside a ruled list, one row per audience. */
.gg .ab-help{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:stretch; }
/* Same outer edges as the intro above (1080px), photo a full half. */
.gg .ab-wrap.ab-help{ max-width:calc(1080px + 2 * var(--gutter)); }
.gg .ab-photo--tall{ min-height:100%; }
.gg .ab-list{ margin-top:clamp(1.5rem,3vw,2.25rem); border-top:1px solid var(--rule); }
/* Title above its text, so each answer runs the full column (~70ch). */
.gg .ab-row{ display:grid; gap:.4rem; padding:1.25rem 0; border-bottom:1px solid var(--rule); }
.gg .ab-row h3{ font-family:var(--font-display); font-weight:400; font-size:1.25rem; line-height:1.3; color:var(--charcoal); }
.gg .ab-row p{ font-size:1rem; line-height:1.6; color:var(--charcoal-muted); max-width:68ch; }
.gg .ab-row a{ color:var(--pine); }

/* The promises: pine, one photo card per promise (2026-10-02, after
   Superpower / Biograph). A flat cream chip on each photo shows the promise
   being kept; hairline gold, no shadow, per the Flat Paper Rule. */
.gg .ab-lead{ text-align:center; max-width:640px; margin:1.25rem auto 0; font-size:clamp(1.0625rem,1.3vw,1.1875rem); line-height:1.6; color:var(--cream-muted); }
.gg .ab-cards{
  list-style:none; padding:0; margin:clamp(2.5rem,5vw,3.75rem) auto 0; max-width:1080px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.5rem);
}
/* One frame for every card on both pages: 4:3 keeps whole groups in view. */
.gg .ab-card__photo{ position:relative; margin:0; aspect-ratio:4/3; border-radius:2px; overflow:hidden; background:var(--pine-lift, #1f4a40); }
.gg .ab-card__photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.gg .ab-chip{
  position:absolute; left:.6rem; right:.6rem; bottom:.6rem;
  display:grid; align-content:center; gap:.2rem; padding:.4rem .65rem; min-height:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--cream); color:var(--charcoal); border:1px solid var(--gold); border-radius:2px;
  font-size:.875rem; line-height:1.3;
}
.gg .ab-chip:lang(zh), .gg .ab-chip:lang(zh) *{ line-height:1.3; }
.gg .ab-chip__label{ font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.1rem; }
.gg .ab-chip__row{ position:relative; padding-left:1.15rem; }
.gg .ab-chip__row::before{
  content:""; position:absolute; left:0; top:.32em; width:.7rem; height:.7rem;
  border:1px solid var(--gold); border-radius:50%;
}
.gg .ab-chip__row.is-done::before{ background:var(--pine); border-color:var(--pine); }
.gg .ab-chip__row.is-done::after{
  content:""; position:absolute; left:.22rem; top:.48em; width:.3rem; height:.16rem;
  border-left:1.5px solid var(--cream); border-bottom:1.5px solid var(--cream); transform:rotate(-45deg);
}
.gg .ab-cards{ grid-auto-rows:auto; row-gap:0; }
/* Rows are shared across the cards (subgrid), so space between rows of cards
   on tablets and phones comes from the text, not the grid gap. */
.gg .ab-card p{ margin-bottom:0; }
.gg .ab-card{ display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:0; }
.gg .ab-card h3{ margin:1.15rem 0 0; font-family:var(--font-display); font-weight:400; font-size:clamp(1.125rem,1.45vw,1.3125rem); line-height:1.25; color:var(--cream); letter-spacing:-.005em; }
.gg .ab-card p{ margin-top:.45rem; font-size:1rem; line-height:1.6; color:var(--cream-muted); }
/* Audience tabs over the cards (2026-10-02). Radios are visually hidden but
   focusable; the checked one lights its label and shows its panel. Labels
   are cream-on-pine chips, the active one cream with pine text (buttons are
   pine or cream, never gold). Supports up to four tabs. */
.gg .ab-tabs{ margin-top:clamp(2rem,4vw,2.75rem); }
.gg .ab-tabs__radio{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.gg .ab-tabs__bar{ display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem; }
.gg .ab-tabs__bar label{
  cursor:pointer; padding:.6rem 1.35rem; border:1px solid rgba(179,156,118,.55); border-radius:2px;
  font-family:var(--font-display); font-size:1.125rem; line-height:1.2; color:var(--cream-muted);
  transition:background-color .2s, color .2s, border-color .2s;
}
.gg .ab-tabs__bar label:hover{ color:var(--cream); border-color:var(--gold-lift); }
.gg .ab-tabs__panel{ display:none; }
.gg .ab-tabs__panel .ab-cards{ margin-top:clamp(2rem,4vw,2.75rem); }
.gg .ab-tabs__radio:nth-of-type(1):checked ~ .ab-tabs__panels > .ab-tabs__panel:nth-child(1),
.gg .ab-tabs__radio:nth-of-type(2):checked ~ .ab-tabs__panels > .ab-tabs__panel:nth-child(2),
.gg .ab-tabs__radio:nth-of-type(3):checked ~ .ab-tabs__panels > .ab-tabs__panel:nth-child(3),
.gg .ab-tabs__radio:nth-of-type(4):checked ~ .ab-tabs__panels > .ab-tabs__panel:nth-child(4){ display:block; }
.gg .ab-tabs__radio:nth-of-type(1):checked ~ .ab-tabs__bar > label:nth-child(1),
.gg .ab-tabs__radio:nth-of-type(2):checked ~ .ab-tabs__bar > label:nth-child(2),
.gg .ab-tabs__radio:nth-of-type(3):checked ~ .ab-tabs__bar > label:nth-child(3),
.gg .ab-tabs__radio:nth-of-type(4):checked ~ .ab-tabs__bar > label:nth-child(4){ background:var(--cream); border-color:var(--cream); color:var(--pine); }
.gg .ab-tabs__radio:nth-of-type(1):focus-visible ~ .ab-tabs__bar > label:nth-child(1),
.gg .ab-tabs__radio:nth-of-type(2):focus-visible ~ .ab-tabs__bar > label:nth-child(2),
.gg .ab-tabs__radio:nth-of-type(3):focus-visible ~ .ab-tabs__bar > label:nth-child(3),
.gg .ab-tabs__radio:nth-of-type(4):focus-visible ~ .ab-tabs__bar > label:nth-child(4){ outline:2px solid var(--cream); outline-offset:3px; }

/* The story beside a photo. The last paragraph is the takeaway. */
.gg .ab-story{ display:grid; grid-template-columns:7fr 5fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:center; }
.gg .ab-story .ab-photo{ aspect-ratio:4/5; }
.gg .ab-quote{ margin:0 0 1.5rem; font-family:var(--font-display); font-size:clamp(2.25rem,4.4vw,3.375rem); line-height:1.1; color:var(--charcoal); }
.gg .ab-quote::before{ content:""; display:block; width:40px; height:1px; background:var(--gold); margin-bottom:1.5rem; }
.gg .ab-story p{ color:var(--charcoal-muted); max-width:52ch; }
.gg .ab-story p + p{ margin-top:1rem; }
.gg .ab-story p:last-child{ margin-top:1.5rem; font-family:var(--font-display); font-size:1.3125rem; line-height:1.5; color:var(--charcoal); }

/* Her own investing: text beside the bench photo, on cream (2026-10-02;
   was ink pine until the copy pass left it next to the pine promises). */
.gg .ab-invest{ display:grid; grid-template-columns:7fr 5fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:center; }
.gg .ab-invest .ab-photo{ aspect-ratio:4/5; }
.gg .ab-invest .ab-h2{ text-wrap:balance; }
.gg .ab-invest .txt{ margin-top:1.25rem; }
.gg .ab-invest .txt p{ color:var(--charcoal-muted); font-size:1.125rem; line-height:1.65; max-width:52ch; }
.gg .ab-invest .txt p + p{ margin-top:1.1rem; }

/* Press strip under the intro: label, grayscale logo, link. */
.gg .ab-press{
  max-width:1080px; margin:clamp(3rem,6vw,4.5rem) auto 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 2rem;
}
.gg .ab-press__label{ font-size:1rem; letter-spacing:.14em; text-transform:uppercase; color:var(--charcoal-muted); }
.gg .ab-press__logo img{ display:block; height:56px; width:auto; filter:grayscale(1); opacity:.9; transition:opacity .2s; }
.gg .ab-press__logo:hover img{ opacity:1; }
.gg .ab-press__more{ flex-basis:100%; text-align:center; font-size:1.1875rem; color:var(--pine); text-underline-offset:4px; }

/* Her own investing: big heading beside the text, on ink pine. */
.gg .ab-split{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.gg .ab-split .ab-h2{ font-size:clamp(2.25rem,4.4vw,3.5rem); line-height:1.05; }
.gg .ab-split .txt p{ color:var(--cream-muted); font-size:1.125rem; line-height:1.65; }
.gg .ab-split .txt p + p{ margin-top:1.1rem; }

/* Closing: a photo beside where she works and her community. */
.gg .ab-close{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.gg .ab-close .ab-photo{ aspect-ratio:3/2; }
.gg .ab-close__txt{ display:grid; gap:2rem; }
.gg .ab-close__txt > div + div{ border-top:1px solid var(--rule); padding-top:2rem; }
.gg .ab-close h2{ font-family:var(--font-display); font-weight:400; font-size:1.75rem; line-height:1.2; color:var(--charcoal); margin-bottom:.6rem; }
.gg .ab-close h2 em{ font-style:italic; color:var(--gold-deep); }
.gg .ab-close p{ color:var(--charcoal-muted); }
.gg .ab-close a{ color:var(--pine); }

@media (max-width:900px){
  .gg .ab-intro{ grid-template-columns:1fr; }
  .gg .ab-intro .shot{ border-radius:2px 2px 0 0; aspect-ratio:4/5; min-height:0; }
  .gg .ab-intro .shot img{ object-position:50% 25%; }
  .gg .ab-press__logo img{ height:40px; }
  .gg .ab-panel{ border-radius:0 0 2px 2px; }
  .gg .ab-help, .gg .ab-story, .gg .ab-split, .gg .ab-close, .gg .ab-invest{ grid-template-columns:1fr; }
  .gg .ab-cards{ grid-template-columns:repeat(2,1fr); }
  .gg .ab-card p{ margin-bottom:2rem; }
  .gg .ab-invest .ab-photo{ order:-1; aspect-ratio:3/2; }
  .gg .ab-photo--tall{ aspect-ratio:4/5; }
  .gg .ab-story .ab-photo{ order:-1; aspect-ratio:3/2; }
}
@media (max-width:600px){
  .gg .ab-row{ grid-template-columns:1fr; gap:.35rem; }
  .gg .ab-cards{ grid-template-columns:1fr; gap:0; }
  .gg .ab-card__photo{ aspect-ratio:4/3; }
  .gg .ab-chip{ font-size:.875rem; }
  .gg .ab-tabs__bar label{ padding:.5rem 1rem; font-size:1rem; }
}

/* --- phone type scale ----------------------------------------------------- */

/* At 390px every paragraph was 17px and the review ran to ten lines. Body
   steps down to the 16px phone reading size (inputs were already 16px, which
   keeps iOS from zooming on tap), the quote to 17px, and the headline up a
   step so it stays the clear first read after her face. */
@media (max-width:600px){
  .gg .h1{ font-size:2.125rem; line-height:1.08; }
  .gg .deck,
  .gg .paths .intro,
  .gg .paths li,
  .gg .about p,
  .gg .contact p{ font-size:1rem; line-height:1.62; }
  .gg .faq summary{ font-size:1rem; }
  .gg .paths h2{ font-size:1.3125rem; }
  .gg .slide blockquote{ font-size:1.0625rem; line-height:1.55; }
  .gg .slide figcaption{ font-size:1rem; }
}

/* --- Buyer's guide, /buy/ (2026-10-03) ----------------------------------- */
/* Mobbin variant B: a photo timeline down a gold hairline, alternating sides
   (Samara), a "how I work" pine panel with numbered cards (Daylight), a costs
   ledger (Lemon Squeezy / AngelList), topic cards and visible questions. One
   faint peony in each cream margin - the site's own prosperity motif, never
   a new symbol. Copy comes from the page editor, parsed in page-buy.php. */
.gg .guide-intro{ padding-block:clamp(2.25rem,4.5vw,3.25rem) 0; }
.gg .guide-intro p{ max-width:720px; margin:0 auto; text-align:center; font-size:1.125rem; color:var(--charcoal-muted); }
.gg .guide-glance{ padding-block:clamp(2rem,4vw,2.75rem) 0; }
.gg .guide-glance dl{ display:grid; grid-template-columns:repeat(3,1fr); margin:0 auto; max-width:1040px; border-block:1px solid var(--rule); }
.gg .guide-glance dl > div{ padding:1.25rem 1.5rem; }
.gg .guide-glance dl > div + div{ border-left:1px solid var(--rule); }
.gg .guide-glance dt{ font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.4rem; }
.gg .guide-glance dd{ margin:0; font-size:.9375rem; color:var(--charcoal-muted); }
.gg .guide-sec{ padding-block:clamp(3rem,6vw,4.75rem); }
.gg .guide-sec + .guide-sec{ padding-top:0; }
.gg .guide-h{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.75rem,3vw,2.375rem); line-height:1.15; color:var(--charcoal); text-align:center; margin:0 0 .6rem; }
.gg .guide-sub{ max-width:58ch; margin:0 auto clamp(2.25rem,4.5vw,3.25rem); text-align:center; color:var(--charcoal-muted); }
.gg .guide-sub p{ margin:0; }

/* The timeline. The hairline runs down the centre; each stage puts its text
   and its photo either side of it, swapping sides as it goes. */
.gg .guide-process{
  background:
    url(assets/img/peony-margin-left.webp) left -140px top 120px / 280px auto no-repeat,
    var(--cream);
}
.gg .guide-steps{ position:relative; list-style:none; margin:0 auto; padding:0; max-width:1040px; }
.gg .guide-h + .guide-steps{ margin-top:clamp(2rem,4vw,3rem); }
.gg .guide-steps::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--gold); }
.gg .guide-step{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,7vw,6rem); align-items:center; padding-bottom:clamp(2rem,3.5vw,2.75rem); }
.gg .guide-step:last-child{ padding-bottom:0; }
.gg .guide-step:nth-child(even) .guide-step__txt{ order:2; }
/* Text and photo each fill their half, so the timeline spans the same
   1040px as every other section on the page. */
.gg .guide-step__img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:2px; display:block; }
/* Every stage reads left-aligned: right-aligned paragraphs leave a ragged
   left edge. Balanced line breaks even out the right edge too. */
.gg .guide-step__txt p{ text-wrap:pretty; }
.gg .guide-step h3{ text-wrap:balance; }

.gg .guide-step__n{
  position:absolute; left:50%; top:calc(50% - 1.25rem - clamp(1rem,1.75vw,1.375rem)); transform:translateX(-50%);
  width:2.5rem; height:2.5rem; border-radius:50%; background:var(--cream); border:1px solid var(--gold);
  display:grid; place-items:center; font:600 .8125rem/1 var(--font-body); color:var(--gold-deep);
}
.gg .guide-step h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.375rem,2.2vw,1.625rem); line-height:1.2; color:var(--charcoal); margin:0 0 .75rem; }
.gg .guide-step p{ color:var(--charcoal-muted); margin:0 0 .85rem; }
.gg .guide-step ul{ margin:0; padding:0; list-style:none; }
.gg .guide-step li{ position:relative; padding-left:1.1rem; margin-bottom:.5rem; color:var(--charcoal-muted); font-size:.9375rem; }
.gg .guide-step li::before{ content:""; position:absolute; left:0; top:.7em; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.gg .guide-step li strong{ color:var(--charcoal); font-weight:600; }

/* Costs ledger. */
.gg .guide-costs{
  background:
    url(assets/img/peony-margin-right.webp) right -140px top 40px / 280px auto no-repeat,
    var(--cream);
}
.gg .guide-ledger{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; max-width:1040px; margin:0 auto; }
.gg .guide-ledger__intro h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.75rem,3vw,2.375rem); line-height:1.15; color:var(--charcoal); margin:0 0 .8rem; }
.gg .guide-ledger__intro p{ color:var(--charcoal-muted); }
.gg .guide-rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--charcoal); }
.gg .guide-rows li{ display:grid; grid-template-columns:minmax(9rem,2fr) 3fr; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--rule); align-items:baseline; }
.gg .guide-rows__label{ font-family:var(--font-display); font-size:1.125rem; color:var(--charcoal); }
.gg .guide-rows__note{ font-size:.875rem; color:var(--charcoal-muted); }
.gg .guide-rows li.is-total{ border-bottom:2px solid var(--charcoal); }
.gg .guide-rows li.is-total .guide-rows__label{ font-weight:600; }

/* How I work for you: pine panel + numbered cards. */
.gg .guide-how{ display:grid; grid-template-columns:5fr 7fr; gap:1rem; max-width:1040px; margin:0 auto; }
.gg .guide-how__lead{
  background:var(--pine) url(assets/img/pine-ink-reviews.webp) center / cover no-repeat;
  color:var(--cream); padding:clamp(1.75rem,3vw,2.5rem); border-radius:2px;
  display:flex; flex-direction:column; justify-content:flex-end; min-height:320px;
}
.gg .guide-how__lead h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,3.4vw,2.75rem); line-height:1.1; color:var(--cream); margin:0 0 .8rem; }
.gg .guide-how__lead p{ color:var(--cream-muted); margin:0; }
.gg .guide-how__cards{ display:grid; gap:1rem; }
.gg .guide-how__card{ display:grid; grid-template-columns:4.25rem 1fr; gap:1rem; background:var(--cream-lift); border:1px solid var(--rule); border-radius:2px; padding:1.25rem 1.5rem; }
.gg .guide-how__num{ font-family:var(--font-display); font-size:2.625rem; line-height:1; color:var(--gold-deep); }
.gg .guide-how__card h3{ font-size:1.0625rem; font-weight:600; color:var(--charcoal); margin:0 0 .3rem; }
.gg .guide-how__card p{ margin:0; font-size:.9375rem; color:var(--charcoal-muted); }

/* Before you buy: topic cards, each a link to the FAQ. */
.gg .guide-topics{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; max-width:1040px; margin:0 auto; }
.gg .guide-topic{ display:flex; flex-direction:column; gap:.5rem; background:var(--cream-lift); border:1px solid var(--rule); border-radius:2px; padding:1.5rem; text-decoration:none; color:inherit; }
.gg .guide-topic h3{ font-family:var(--font-display); font-weight:400; font-size:1.25rem; color:var(--charcoal); margin:0; }
.gg .guide-topic p{ margin:0; font-size:.9375rem; color:var(--charcoal-muted); }
.gg .guide-topic__more{ margin-top:auto; padding-top:.5rem; font-size:.8125rem; font-weight:600; color:var(--pine); }
.gg .guide-topic:hover{ border-color:var(--gold); }
.gg .guide-topic:focus-visible{ outline:2px solid var(--pine); outline-offset:2px; }
.gg .guide-topic--pine{ background:var(--pine); border-color:var(--pine); }
.gg .guide-topic--pine h3{ color:var(--cream); }
.gg .guide-topic--pine p{ color:var(--cream-muted); }
.gg .guide-topic--pine .guide-topic__more{ color:var(--gold-lift); }
.gg .guide-faq{ padding-top:0; }

@media (max-width:1280px){
  .gg .guide-process,.gg .guide-costs{ background:var(--cream); }
}
@media (max-width:900px){
  .gg .guide-glance dl{ grid-template-columns:1fr; }
  .gg .guide-glance dl > div + div{ border-left:0; border-top:1px solid var(--rule); }
  .gg .guide-steps::before{ left:1.25rem; }
  .gg .guide-step{ grid-template-columns:1fr; gap:1.25rem; padding-left:3.5rem; }
  .gg .guide-step:nth-child(even) .guide-step__txt{ order:0; }
  .gg .guide-step__n{ left:1.25rem; top:0; }
  .gg .guide-ledger,.gg .guide-how{ grid-template-columns:1fr; }
  .gg .guide-topics{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .gg .guide-topics{ grid-template-columns:1fr; }
  .gg .guide-rows li{ grid-template-columns:1fr; gap:.2rem; }
}

/* What is different about buying in Ann Arbor: pine band, six cream cards. */
.gg .guide-local{ background:var(--pine); padding-block:clamp(3.25rem,6.5vw,5rem); }
.gg .guide-local .guide-h{ color:var(--cream); }
.gg .guide-local .guide-sub{ color:var(--cream-muted); }
.gg .guide-local__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:1040px; margin:0 auto; }
.gg .guide-local__card{ background:var(--cream-lift); border-radius:2px; padding:1.5rem; border-top:2px solid var(--gold); }
.gg .guide-local__card h3{ font-family:var(--font-display); font-weight:400; font-size:1.25rem; color:var(--charcoal); margin:0 0 .5rem; }
.gg .guide-local__card p{ margin:0; font-size:.9375rem; color:var(--charcoal-muted); }
@media (max-width:900px){ .gg .guide-local__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .gg .guide-local__grid{ grid-template-columns:1fr; } }

/* Buy opening: moon-gate photo left, prose right. */
.gg .guide-open{ padding-block:clamp(3rem,6vw,4.75rem) 0; }
.gg .guide-open .inner{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; max-width:1040px; }
.gg .guide-open__gate{
  margin:0; width:min(100%,400px); aspect-ratio:1; justify-self:center; border-radius:50%; overflow:hidden;
  outline:1px solid var(--gold); outline-offset:12px;
}
.gg .guide-open__gate img{ width:100%; height:100%; object-fit:cover; display:block; }
.gg .guide-open__txt p{ color:var(--charcoal-muted); font-size:1.0625rem; max-width:56ch; margin:0 0 1rem; }
/* The first line of the opening reads as its headline. */
.gg .guide-open__txt p:first-child{ font-family:var(--font-display); font-size:clamp(1.75rem,3vw,2.375rem); line-height:1.2; color:var(--charcoal); margin-bottom:1.25rem; }
.gg .guide-open__txt p:last-child{ margin-bottom:0; }
@media (max-width:900px){
  .gg .guide-open .inner{ grid-template-columns:1fr; gap:2.25rem; }
  .gg .guide-open__gate{ width:min(72vw,300px); }
}