/* Soul Glow AI · v6 hero (home-v6.php), on top of v4.css.
   A planetarium dial in v4's language: ivory face, gold hairlines, serif italics, gem-like planets.
   Below it the same sky unrolled into v4's band of warm light. No rainbow, no vermilion. */
.hero-clock{min-height:auto;padding-bottom:2.4rem}
.hc-grid{--gap:clamp(2rem,4vw,5rem);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--gap);align-items:center;padding-inline:var(--pad)}
.hc-copy{display:flex;flex-direction:column;min-width:0}

/* the headline gets air: v4's tight .86 leading and -.062em tracking crowd three lines this size */
.hl.hl-c{padding-inline:0;font-size:calc(clamp(3.2rem,6vw,8rem) * var(--hs,1));line-height:.98;letter-spacing:-.045em;margin-bottom:clamp(1.6rem,4vh,2.6rem)}
.hl.hl-c .ln{padding:0 .04em .1em;margin:0 -.04em -.02em}
/* "So do you." in deep gold, with a gold hairline running on to the dial's rim */
.hl.hl-c .it{display:flex;align-items:center;gap:.28em;margin-top:.12em;padding:0 0 .26em .04em;margin-right:calc(-1 * var(--gap));
  font-size:1.08em;line-height:1;letter-spacing:-.02em;text-align:left;color:#8a5a14}
.hl.hl-c .it::after{content:'';flex:1;min-width:1.5em;height:1px;margin-top:.12em;background:linear-gradient(90deg,rgba(201,150,43,.9),rgba(201,150,43,.35) 70%,#c9962b)}
html.anim .hl.hl-c .it::after{transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.16,1,.3,1) .7s}
html.anim .hl.hl-c.go .it::after{transform:none}

.hc-copy .lede{font-size:1.05rem;max-width:46ch;margin-bottom:clamp(1.4rem,3.4vh,2.2rem)}
.hc-copy .console{max-width:560px;padding:1rem}
.hc-copy .console .cf-grid{grid-template-columns:1.25fr 1fr;grid-template-areas:"date time" "place place" "go go";gap:.8rem .6rem}
.hc-copy .console .cta{grid-area:go;width:100%;margin-top:.2rem}
.hc-copy .hint{text-align:center}

/* the dial */
.clock-wrap{display:grid;justify-items:center;gap:.9rem;min-width:0;width:min(44vw,76vh,720px)}
.clock{position:relative;width:100%;aspect-ratio:1;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.clock.dragging{cursor:grabbing}
.clock::before{content:'';position:absolute;inset:4%;border-radius:50%;background:var(--plate);filter:blur(60px);opacity:.28;z-index:-1}
.clock::after{content:'';position:absolute;inset:8% 8% -3%;border-radius:50%;background:radial-gradient(closest-side,rgba(60,38,10,.22),transparent);z-index:-2;filter:blur(20px);transform:translateY(3%)}
#dial{width:100%;height:100%;overflow:visible}
.rim{fill:none;stroke:url(#goldRim);stroke-width:5}
.tk{stroke:rgba(14,14,16,.32);stroke-width:.6}
.tk.t5{stroke:rgba(14,14,16,.5);stroke-width:.9}
.tk.t30{stroke:#b8862a;stroke-width:1.4}
.ring-line{fill:none;stroke:#c9962b;stroke-width:.9}
.sg-div{stroke:#c9962b;stroke-width:.8;opacity:.75}
.sg-name{font:italic 400 19px var(--serif);fill:var(--ink);text-anchor:middle;dominant-baseline:central;letter-spacing:.02em}
.sg-idx{font:13px 'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',serif;fill:#b8862a;text-anchor:middle;dominant-baseline:central}
.orbit{fill:none;stroke:rgba(14,14,16,.09);stroke-width:.8}
.orbit.dash{stroke-dasharray:1.5 5}
.hand-sun{stroke:#c9962b;stroke-width:2.6;stroke-linecap:round}
.hand-moon{stroke:var(--ink);stroke-width:1;stroke-linecap:round;opacity:.65}
.hand-sec{stroke:var(--ink);stroke-width:.6;opacity:.35}
.pl circle.gem{fill:url(#gem);stroke:rgba(110,70,15,.55);stroke-width:.7}
.pl.moon circle.gem{fill:url(#pearl);stroke:rgba(14,14,16,.35)}
.pl .halo{fill:#ecc15e;opacity:.55;filter:url(#sunGlow)}
.pl text{font:15px/1 'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',serif;text-anchor:middle;dominant-baseline:central;fill:#2b1c06}
.hub{fill:var(--night)}
.hub-ring{fill:none;stroke:url(#goldRim);stroke-width:1}
.hub-year{font:italic 400 46px var(--serif);fill:#ecc15e;text-anchor:middle;font-variant-numeric:tabular-nums}
.hub-date{font:500 8px var(--mono);letter-spacing:.14em;fill:var(--bone-2);text-anchor:middle}
.drag-hint{position:absolute;left:50%;bottom:-1.3rem;transform:translateX(-50%);color:var(--ink-3);font-size:.58rem;white-space:nowrap;transition:opacity .4s}
.clock.used .drag-hint{opacity:0}
.readout{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem .9rem;margin-top:.9rem;color:var(--ink-2);font-size:.6rem;min-height:2.4em;text-align:center;max-width:600px}
.readout b{color:#a8701e;font-weight:500}

/* the same sky, unrolled */
.unrolled{position:relative;margin-top:clamp(2.2rem,6vh,4rem)}
.ur-tags{position:relative;height:1.6rem;margin-inline:var(--pad)}
.ur-tags span{position:absolute;bottom:0;transform:translateX(-50%);font:500 .56rem/1 var(--mono);letter-spacing:.12em;color:var(--ink-2);white-space:nowrap;padding-bottom:.35rem;transition:left .05s linear}
.ur-tags span::after{content:'';position:absolute;left:50%;bottom:0;width:1px;height:.25rem;background:var(--ink-3)}
.ur-tags span.up{bottom:.85rem}
.ur-wrap{position:relative;height:clamp(64px,10vh,110px)}
.ur-wrap canvas{position:relative;width:100%;height:100%}
.ur-axis{position:relative;height:1.4rem;margin:.45rem var(--pad) 0;color:var(--ink-3);font-size:.54rem}
.ur-axis span{position:absolute;top:0;transform:translateX(-50%)}
.ur-axis i{position:absolute;top:-.45rem;width:1px;height:.35rem;background:var(--rule-2)}
.ur-cap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-inline:var(--pad);color:var(--ink-3);font-size:.56rem;margin-top:.4rem}

@media (max-width:980px){
  /* phones: headline, the dial right above the form so the rewind stays in view while typing */
  .hc-grid{display:flex;flex-direction:column;align-items:stretch;gap:1.3rem}
  .hl.hl-c,.hc-copy .lede{margin-bottom:0}
  /* one centred composition with the dial: the gold line drops from "So do you." onto the rim like a plumb line */
  .hero-clock .hero-meta{justify-content:center;text-align:center}
  .hl.hl-c{text-align:center;font-size:calc(clamp(2.9rem,12.6vw,5.6rem) * var(--hs,1));margin-bottom:-1.55rem}
  .hl.hl-c .it{margin:.08em 0 0;padding:0 0 0;flex-direction:column;gap:.12em;justify-content:center;font-size:1.12em}
  .hl.hl-c .it::after{flex:none;width:1px;min-width:0;height:clamp(30px,7vh,56px);margin:0;
    background:linear-gradient(180deg,rgba(201,150,43,.9),#c9962b)}
  html.anim .hl.hl-c .it::after{transform:scaleY(0);transform-origin:top}
  html.anim .hl.hl-c.go .it::after{transform:none}
  .clock-wrap{width:100%}
  .hc-copy{display:contents}
  .hl.hl-c{order:1}.clock-wrap{order:2}.console{order:3}.lede{order:4}
  .clock{width:min(88vw,500px)}
}
@media (max-width:560px){
  .hero-clock .hero-meta .live{display:none}
  .ur-cap span:last-child{display:none}
  .sg-name{font-size:21px}
}

/* language switch in the nav (includes/i18n.php sg_lang_switch) */
.lsw{position:relative;margin-left:auto;margin-right:.8rem}
.lsw summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;height:2.2rem;padding:0 .75rem;border:1px solid var(--rule-2);border-radius:999px;font-size:.66rem;user-select:none}
.lsw summary::-webkit-details-marker{display:none}
.lsw summary::after{content:'';width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.nav.on-dark .lsw summary{border-color:var(--bone-rule)}
.lsw-menu{position:absolute;right:0;top:calc(100% + .5rem);min-width:11rem;display:grid;padding:.35rem;background:var(--sheet);color:var(--ink);border:1px solid var(--rule-2);border-radius:14px;box-shadow:0 18px 40px -18px rgba(14,14,16,.35);z-index:80}
.lsw-menu a{padding:.55rem .75rem;border-radius:9px;text-decoration:none;font-size:.9rem}
.lsw-menu a:hover{background:rgba(201,150,43,.12)}
.lsw-menu a[aria-current]{color:#8a5a14;font-weight:500}
.foot-links a[aria-current]{color:#ecc15e}
@media (max-width:900px){.lsw{margin-right:.5rem}}
/* phones: brand + language switch fit; the hero form is right below, so the nav button can go */
@media (max-width:560px){.nav > .cta-sm{display:none}.lsw{margin-right:0}}