/* =========================================================================
   ank-ratna — coming soon
   =========================================================================
   Scope, deliberately: the wisdomhealingcenter.in HEADER LOCKUP, and nothing
   else. Every header value below is copied from that site's live theme
   (wisdom-healing-center v3.59.0, pulled from the running container) rather
   than re-derived by eye, so the two headers are the same header:

     ground            rgba(253,247,238,.88)  (--sand at 88%, NOT --sand-2 —
                                               sand-2 reads visibly tanner)
     backdrop-filter   saturate(1.4) blur(12px)
     border-bottom     1px solid var(--line)
     min-height        88px, padding-block 10px, sticky top 0
     mark              62px, circular
     halo ring         inset -6px, 2px solid #e9ab80, whc-ripple 3.2s
     name              Cormorant Garamond 700, --violet, clamp(18px,1rem+0.6vw,24px)

   ONE DELIBERATE DIVERGENCE from that header: the sister site sets an italic red
   tagline under the name ("Pranic Healing & Meditation Center"). This site does
   NOT — removed by request 2026-08-18 — so the lockup is the mark plus the name
   alone. Everything else above is unchanged, including the mark, so the header
   still reads as the same brand.

   The BODY is deliberately blank white. There is no footer, no navigation, no
   CTA and no content styling in this file, because there is no such markup in
   the theme yet. When the real design lands, it comes from the same source.
   ========================================================================= */

/* Self-hosted, so the display serif is not waiting on two extra connections
   (googleapis -> gstatic) and swapping in after first paint.
   🚨 The roman and italic files are a PAIR and the Google CSS lists src and
   font-weight but NOT font-style — pairing them by eye renders every upright
   heading in italic. These two mappings are carried over verbatim from the
   live theme, where they are known correct; do not "tidy" them. */
@font-face{
    font-family:"Cormorant Garamond";
    font-style:normal;
    font-weight:600 700;
    font-display:swap;
    src:url("../fonts/cormorant-roman.woff2") format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
    font-family:"Cormorant Garamond";
    font-style:italic;
    font-weight:600 700;
    font-display:swap;
    src:url("../fonts/cormorant-italic.woff2") format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    /* Only the tokens this page actually uses, at their live values. */
    --ink:       #1E1A4D;
    --ink-soft:  #4A466E;   /* 8.24:1 on sand, 9.73:1 on white                */
    --violet:    #6B2FA0;   /* brand name.    7.76:1 on sand, 8.49:1 on white */
    --red-ink:   #C62828;   /* tagline.       5.28:1 on sand                  */
    --rose-ink:  #B81361;   /* focus ring                                     */
    --sand:      #FDF7EE;
    --line:      #EDE3D6;
    --white:     #ffffff;

    --wrap:      1080px;
    --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ease:  cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* THE BLANK BACKGROUND. Explicit white on both html and body — a transparent
   body would borrow whatever ground the browser or an embedding view paints. */
html, body { background: var(--white); }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    line-height: 1.6;
    /* Header + coming-soon block are laid out as one column so the block can be
       centred in the space LEFT OVER below the header, rather than in the
       viewport (which would push it visually low by half the header's height). */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

a { color: var(--violet); }

:focus-visible { outline: 3px solid var(--rose-ink); outline-offset: 2px; border-radius: 4px; }

.wrap {
    width: min(100% - 2rem, var(--wrap));
    margin-inline: auto;
}

.skip-link {
    position: absolute; left: -9999px;
    background: var(--violet); color: #fff;
    padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip-link:focus { left: 0; top: 0; }

/* =========================================================================
   HEADER — reproduced from wisdomhealingcenter.in
   ========================================================================= */

.site-header {
    background: rgba(253, 247, 238, .88);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding-block: 10px;
    flex-wrap: wrap;
}

.site-brand__link { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.site-brand__link:hover { text-decoration: none; }

/* The halo is a ::before on a <span>, not a box-shadow on the <img>: an <img>
   cannot carry a pseudo-element, and this has to be the same construction the
   live site uses — a 2px border scaling out and fading, not a soft shadow. */
.site-brand__halo {
    position: relative;
    display: inline-flex;
    flex: none;
    border-radius: 50%;
}
.site-brand__halo::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 2px solid #e9ab80;   /* the HEADER ring; the footer's is #efdcc8 */
    animation: whc-ripple 3.2s ease-out infinite;
    pointer-events: none;
}

.site-brand__mark {
    width: 62px; height: 62px; object-fit: contain; flex: none;
    border-radius: 50%;
    transition: transform .45s var(--ease);
}
.site-brand__link:hover .site-brand__mark,
.site-brand__link:focus-visible .site-brand__mark { transform: scale(1.07) rotate(-4deg); }

.site-brand__text { display: flex; flex-direction: column; }
/* Flat 40px by request 2026-08-18, replacing the sister site's
   clamp(18px, 1rem + 0.6vw, 24px). A flat size this much larger is normally the
   thing that wraps a header on a phone, so it was MEASURED at 320/360/375/414/
   480/768/1024/1440 before shipping: "Ank Ratna" renders 175px wide at 40px
   against 214px of available room even at 320px, stays on ONE line at every
   width, and the header holds its 89px because the 46.4px line box is still
   under min-height:88px. Zero horizontal overflow throughout — so this needs no
   phone step-down.
   ⚠ That headroom is a fact about THIS NAME. A longer title (roughly >11
   characters) will not clear 320px at 40px — re-measure before changing
   @site.title, or reintroduce a clamp. */
.site-brand__name {
    font-family: var(--serif);
    font-size: 40px;
    font-weight: 700; color: var(--violet); line-height: 1.16;
}
/* NO TAGLINE on this site (removed by request 2026-08-18), so the
   .site-brand__tagline rule and the 981–1023px font-size guard that went with it
   are gone rather than left behind as dead selectors. The sister site keeps both:
     .site-brand__tagline { font-family: var(--serif); font-size: 16px;
                            font-style: italic; font-weight: 600;
                            color: var(--red-ink); line-height: 1.3; }
     @media (min-width:981px) and (max-width:1023px){ .site-brand__tagline{font-size:14px} }
   Restore those two together with the <span> in default.hbs if the line returns.
   --red-ink is retained in :root purely as the recorded value for that text. */

@keyframes whc-ripple {
    0%   { transform: scale(.94); opacity: .85; }
    70%  { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* One reduced-motion switch for the only thing that animates. */
@media (prefers-reduced-motion: reduce) {
    .site-brand__halo::before { animation: none; }
    .site-brand__mark { transition: none; }
    .site-brand__link:hover .site-brand__mark { transform: none; }
}

/* =========================================================================
   COMING SOON — the only page
   ========================================================================= */

.site-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(48px, 12vh, 120px) 0;
}

.soon { text-align: center; max-width: 640px; margin-inline: auto; }

.soon__title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(40px, 9vw, 76px);
    line-height: 1.08;
    letter-spacing: .01em;
    color: var(--violet);
    margin: 0;
}

.soon__rule {
    width: 96px; height: 1px; border: 0; margin: 26px auto;
    background: linear-gradient(90deg, rgba(217,162,43,0), rgba(217,162,43,.85), rgba(217,162,43,0));
}

.soon__text {
    font-size: clamp(15px, 2.6vw, 17px);
    color: var(--ink-soft);
    margin: 0;
}

/* =========================================================================
   KOENIG CARD CLASSES — required by gscan, not used by this theme
   =========================================================================
   gscan fails a theme with 15 errors if these are absent, and a theme that
   fails validation cannot be re-uploaded through Ghost Admin later. No
   template here renders post content — every route renders the coming-soon
   partial — so none of this can currently appear on screen. It is carried so
   the theme VALIDATES, and so the day content is switched on these cards are
   not unstyled.

   Keep this block if templates start rendering {{content}}. It is the only
   part of this stylesheet that is not about the header or the coming-soon
   page, and it is deliberate.
   ========================================================================= */

.kg-width-wide  { width: min(100vw - 2rem, 1180px); margin-inline: auto; }
.kg-width-full  { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }

.kg-gallery-container { display: flex; flex-direction: column; gap: 12px; }
.kg-gallery-row       { display: flex; gap: 12px; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kg-bookmark-card { width: 100%; }
.kg-bookmark-container {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.kg-bookmark-content     { flex: 1 1 auto; padding: 18px; }
.kg-bookmark-title       { font-weight: 700; color: var(--ink); }
.kg-bookmark-description { margin-top: 6px; color: var(--ink-soft); }
.kg-bookmark-metadata    { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--ink-soft); }
.kg-bookmark-icon        { width: 20px; height: 20px; }
.kg-bookmark-author::after { content: "•"; margin: 0 6px; }
.kg-bookmark-publisher   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kg-bookmark-thumbnail   { flex: 0 0 33%; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kg-callout-card       { display: flex; gap: 12px; padding: 16px 18px; border-radius: 10px; background: var(--sand); }
.kg-callout-emoji      { flex: none; }
.kg-callout-text       { flex: 1 1 auto; }
.kg-callout-card-grey  { background: #f4f4f6; }
.kg-callout-card-white { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.kg-callout-card-blue  { background: #e8f0fb; }
.kg-callout-card-green { background: #e8f6ee; }
.kg-callout-card-yellow{ background: #fdf6e3; }
.kg-callout-card-red   { background: #fdeceb; }
.kg-callout-card-pink  { background: #fdecf4; }
.kg-callout-card-purple{ background: #f3ecfb; }

.kg-toggle-card    { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.kg-toggle-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kg-toggle-content { margin-top: 10px; }

.kg-button-card    { display: flex; justify-content: center; }
.kg-btn            { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 999px; background: var(--violet); color: #fff; text-decoration: none; }