/* Independently Yours — webfonts.
   Client direction (Aug 2026): Georgia only, everywhere — headings, UI, body and accents.
   Georgia is a system font, so nothing is licensed and nothing loads. The four-family
   brand system (Jubilat, Proxima Nova, Abraham Lincoln, Georgia) stays documented in
   readme.md for print, decks and social; it is not in use on the website. */
:root{
  --font-display:Georgia,"Times New Roman",serif;
  --font-ui:Georgia,"Times New Roman",serif;
  --font-body:Georgia,"Times New Roman",serif;
  --font-accent:Georgia,"Times New Roman",serif;
}

/* Independently Yours — color. Values sampled directly from the 2026 brand style sheet.
   The brand lives predominantly in the green/blue end of the palette; the rest are accents.

   ECOSYSTEM RULE (Juel Brand System, 2026). Independently Yours sits inside the Juel
   Concepts ecosystem, where each entity owns a color:
     orange   = Juel Concepts (for-profit parent, marketing & ad planning) — DO NOT USE
     plum     = Crown Juels (record label & distribution)
     charcoal = Uncut Juels (podcast / experience)
     sage     = Independently Yours (nonprofit activator)  ← this brand
     yellow   = The Indie Pulse / Indie Pulse Index (nonprofit think tank)
   Orange and the Abraham Lincoln typeface are established Juel Concepts assets. Using them
   on Independently Yours surfaces creates a for-profit/nonprofit conflict, so orange is
   retired from this system: the token stays defined for cross-brand reference only and no
   semantic alias points at it. Yellow is reserved for Indie Pulse Index content. */
:root{
  /* core */
  --iy-teal-900:#014045;   /* deep teal — primary brand color */
  --iy-sage-400:#81b29a;   /* sage — secondary brand color */
  --iy-cream-100:#f2e7d7;  /* cream — primary light surface */

  /* Indie Pulse Index — the sub-brand's own color */
  --iy-yellow-400:#f3ca40;
  --iy-yellow-600:#d9a916;   /* hover/press depth of yellow */
  --iy-yellow-100:#fdf3d4;   /* pale yellow surface */

  /* accents */
  --iy-mauve-500:#785c67;
  --iy-espresso-900:#361703;

  /* ecosystem reference only — NOT for Independently Yours surfaces */
  --juel-orange:#f1762c;     /* Juel Concepts */
  --crown-plum:#610345;      /* Crown Juels */
  --uncut-charcoal:#403e3c;  /* Uncut Juels */
  --iy-plum-800:#610345;     /* legacy alias of --crown-plum; use only for error states */

  /* neutrals */
  --iy-char-800:#403e3c;
  --iy-white:#ffffff;
  --iy-cream-50:#faf5ee;
  --iy-cream-200:#e6d7c2;
  --iy-char-600:#6b6864;
  --iy-char-400:#a8a49e;
  --iy-teal-700:#0a5a60;   /* hover lift of teal-900 */
  --iy-teal-950:#012a2e;   /* press depth of teal-900 */
  --iy-sage-200:#b7d3c5;
  --iy-sage-600:#5f9179;

  /* semantic — text */
  --text-primary:var(--iy-teal-900);
  --text-body:var(--iy-char-800);
  --text-muted:var(--iy-char-600);
  --text-inverse:var(--iy-cream-100);
  --text-inverse-muted:var(--iy-sage-200);
  --text-link:var(--iy-teal-900);
  --text-link-hover:var(--iy-sage-600);
  --text-accent:var(--iy-sage-600);
  --text-pulse:var(--iy-yellow-600);

  /* semantic — surfaces */
  --surface-page:var(--iy-cream-50);
  --surface-card:var(--iy-white);
  --surface-raised:var(--iy-cream-100);
  --surface-brand:var(--iy-teal-900);
  --surface-brand-soft:var(--iy-sage-400);
  --surface-pulse:var(--iy-yellow-400);
  --surface-pulse-soft:var(--iy-yellow-100);
  --surface-dark:var(--iy-char-800);

  /* semantic — lines */
  --line-hairline:var(--iy-cream-200);
  --line-strong:var(--iy-teal-900);
  --line-inverse:rgba(242,231,215,.28);

  /* semantic — states */
  --state-focus:var(--iy-teal-900);
  --state-success:var(--iy-sage-600);
  --state-warning:var(--iy-yellow-400);
  --state-error:var(--iy-plum-800);
}

/* Independently Yours — typography scale.
   Jubilat: headings + subheads. Proxima Nova: small body copy, captions, UI.
   Abraham Lincoln: accents only (pull quotes, one-word flourishes) — never body copy.
   Georgia: large amounts of body copy. */
:root{
  --step--1:0.8125rem;  /* 13px — captions, eyebrows */
  --step-0:1rem;        /* 16px — UI default */
  --step-1:1.125rem;    /* 18px — body copy */
  --step-2:1.375rem;    /* 22px — lead paragraph */
  --step-3:1.75rem;     /* 28px — h4 / card title */
  --step-4:2.25rem;     /* 36px — h3 */
  --step-5:3rem;        /* 48px — h2 / section head */
  --step-6:4rem;        /* 64px — h1 */
  --step-7:5.25rem;     /* 84px — hero display */

  --lh-tight:1.02; /* @kind other */
  --lh-heading:1.1; /* @kind other */
  --lh-snug:1.35; /* @kind other */
  --lh-body:1.6; /* @kind other */

  --ls-display:-0.02em; /* @kind other */
  --ls-heading:-0.01em; /* @kind other */
  --ls-body:0; /* @kind other */
  --ls-eyebrow:0.16em; /* @kind other */

  --weight-regular:400; /* @kind font */
  --weight-medium:500; /* @kind font */
  --weight-semibold:600; /* @kind font */
  --weight-bold:700; /* @kind font */

  --measure-body:64ch; /* @kind other */
  --measure-lead:46ch; /* @kind other */
}

/* Independently Yours — spacing + layout. 4px base, doubling at the top end. */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  --gutter:var(--space-5);
  --section-y:var(--space-9);
  --section-y-tight:var(--space-8);
  --container-max:1200px;
  --container-narrow:720px;
  --container-pad:clamp(20px,5vw,64px);
}

/* Independently Yours — radii, borders, shadows, motion, pattern.
   The brand mark and pattern are geometric and flat: rounding is modest, shadows are
   soft and low-contrast, and nothing glows. */
:root{
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;
  --radius-xl:24px;
  --radius-pill:999px;

  --border-hairline:1px solid var(--line-hairline); /* @kind other */
  --border-strong:1.5px solid var(--line-strong); /* @kind other */
  --border-inverse:1px solid var(--line-inverse); /* @kind other */
  --focus-ring:0 0 0 3px rgba(1,64,69,.38);

  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(1,64,69,.08);
  --shadow-md:0 4px 14px rgba(1,64,69,.10);
  --shadow-lg:0 18px 40px rgba(1,64,69,.14);
  --shadow-inset-hairline:inset 0 0 0 1px var(--line-hairline);

  --ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --ease-exit:cubic-bezier(.4,0,1,1); /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:360ms; /* @kind other */

  /* pattern — extracted star tile. Always 20% opacity or less behind copy, 40% in clear space. */
  --pattern-tile:url("../assets/pattern-teal.png"); /* @kind other */
  --pattern-size:328px; /* @kind other */
  --pattern-opacity-copy:0.2; /* @kind other */
  --pattern-opacity-clear:0.4; /* @kind other */

  --protection-scrim:linear-gradient(180deg,rgba(1,42,46,0) 0%,rgba(1,42,46,.72) 100%); /* @kind other */
}

/* Independently Yours — minimal element defaults. Consumers get sane type + link colors. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--step-1);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--text-primary);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);margin:0 0 var(--space-4);font-weight:var(--weight-bold)}
h1{font-size:var(--step-6);letter-spacing:var(--ls-display);line-height:var(--lh-tight)}
h2{font-size:var(--step-5)}
h3{font-size:var(--step-4)}
h4{font-size:var(--step-3)}
h5{font-size:var(--step-2)}
p{margin:0 0 var(--space-4);max-width:var(--measure-body)}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
small,figcaption,.iy-caption{font-family:var(--font-ui);font-size:var(--step--1);color:var(--text-muted)}
.iy-eyebrow{font-family:var(--font-ui);font-size:var(--step--1);font-weight:var(--weight-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.iy-accent{font-family:var(--font-accent);font-style:italic;font-size:var(--step-4);line-height:1.2;color:var(--text-accent)}
.iy-container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--container-pad)}
.iy-pattern{position:relative;isolation:isolate}
.iy-pattern::before{content:"";position:absolute;inset:0;background-image:var(--pattern-tile);background-size:var(--pattern-size);opacity:var(--pattern-opacity-copy);z-index:-1;pointer-events:none}


@keyframes iy-star-spin{to{transform:rotate(360deg)}}body{background:var(--surface-page)}.ph{background:var(--iy-cream-100);border:1.5px dashed var(--iy-char-400);border-radius:var(--radius-md);display:grid;place-items:center;font-family:var(--font-ui);font-size:13px;color:var(--text-muted);text-align:center;padding:16px}.band{padding:var(--section-y) 0}.wrap{max-width:var(--container-max);margin:0 auto;padding-inline:var(--container-pad)}
/* ---- Mobile layout (added for launch) ----
   Page layouts use inline two/three-column grids. Below 760px, stack them into one column
   and scale the large headings down so nothing overlaps or runs off screen. */
html,body{overflow-x:hidden}
img{max-width:100%;height:auto}
@media (max-width:760px){
  [style*="grid-template-columns: minmax(0"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(3"]{grid-template-columns:minmax(0,1fr) !important}
  :root{--step-7:3rem;--step-6:2.5rem;--step-5:2rem;--step-4:1.625rem;--section-y:var(--space-8)}
  h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
}

/* ---- Readability over the star pattern (Oct 2026) ----
   Softer pattern everywhere, plus a tinted "shade box" behind copy that sits on a pattern. */
[aria-hidden="true"][style*="pattern-star-alpha"]{opacity:.12 !important}
.iy-shade{border-radius:var(--radius-lg);padding:clamp(24px,3.4vw,48px)}
.iy-shade--teal{background:rgba(1,42,46,.86)}
.iy-shade--cream{background:rgba(250,245,238,.93)}
.iy-shade--pulse{background:rgba(253,243,212,.92)}

/* ---- Home: 12-week program chart ---- */
.iy-stages{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--space-5);margin-top:var(--space-6)}
.iy-stage{background:var(--iy-white);border:1.5px solid var(--iy-cream-200);border-top:6px solid var(--iy-teal-900);border-radius:var(--radius-md);padding:var(--space-6)}
.iy-stage + .iy-stage{border-top-color:var(--iy-sage-400)}
.iy-stage__head{display:flex;gap:var(--space-4);align-items:center;margin-bottom:var(--space-3)}
.iy-stage__num{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--iy-teal-900);color:var(--iy-cream-100);display:grid;place-items:center;font-weight:700;font-size:var(--step-1)}
.iy-stage + .iy-stage .iy-stage__num{background:var(--iy-sage-600)}
.iy-stage__list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:var(--space-2) var(--space-5)}
.iy-stage + .iy-stage .iy-stage__list{grid-template-columns:1fr}
.iy-stage__list li{position:relative;padding-left:22px;font-size:var(--step-0);line-height:1.45;color:var(--text-body)}
.iy-stage__list li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;background:url("../assets/icon-star-black.png") center/contain no-repeat;opacity:.75}

/* ---- About: board + advisory council ---- */
.iy-people{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:0}
.iy-people li{padding:var(--space-4) 0;border-top:1.5px solid var(--iy-cream-200)}
.iy-people li:last-child{border-bottom:1.5px solid var(--iy-cream-200)}
.iy-people__name{font-size:var(--step-2);font-weight:700;color:var(--iy-teal-900);line-height:1.2}
.iy-people__role{font-size:var(--step-0);color:var(--text-muted);margin-top:2px}

@media (max-width:760px){
  .iy-stages{grid-template-columns:1fr}
  .iy-shade{padding:22px 18px}
}