/* GENERATED by local-dev/design-import/import_design.py from the User flow storyboarding design.
   Everything is scoped to #tsk-design. The design's own palette is replaced by the site palette (tsk-brand.css). */

#tsk-design {
  --ink:#181A1D;
  --gold:#C4A935;
  --muted:#595959;

  
  --ink-soft:#2c2e31;
  --gold-soft:#d8c068;
  --gold-deep:#9c862a;
  --gold-hover:#8e6e30;
  --paper:#ffffff;
  --bone:#f5f3ee;
  --ivory:#fafaf7;
  --line:#e3e1db;
  --footer-bg:#0d0e10;

  
  --surface-page:var(--paper);
  --surface-alt:var(--ivory);
  --surface-muted:var(--bone);
  --surface-inverse:var(--ink);
  --surface-footer:var(--footer-bg);
  --border-hairline:var(--line);
  --border-inverse:rgba(255,255,255,.18);

  --text-primary:var(--ink);
  --text-secondary:var(--ink-soft);
  --text-muted:var(--muted);
  --text-on-dark:#ffffff;
  --text-on-dark-muted:rgba(246,241,231,.78);
  --text-accent:var(--gold);
  --text-accent-soft:var(--gold-soft);

  --accent:var(--gold);
  --accent-hover:var(--gold-hover);
  --accent-soft:var(--gold-soft);
  --accent-deep:var(--gold-deep);

  --success:#1d7a4f;
  --error:#e7a1a1; --font-sans:"Open Sans", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  
  --font-display:"Open Sans", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --fs-display:clamp(40px, 5vw, 72px); 
  --fs-display-2:clamp(34px, 4.4vw, 60px); 
  --fs-display-3:clamp(26px, 2.8vw, 38px); 
  --fs-body-lg:clamp(17px, 1.25vw, 19px); 
  --fs-body:16px; 
  --fs-eyebrow:11px; 
  --fs-caption:12px; 

  --lh-display:1.05; 
  --lh-display-2:1.08; 
  --lh-body:1.65; 
  --lh-body-lg:1.7; 

  --ls-display:-0.035em; 
  --ls-display-2:-0.025em; 
  --ls-display-3:-0.02em; 
  --ls-eyebrow:.22em; 
  --ls-button:.18em; 
  --ls-caption:.14em; 

  --fw-light:300; 
  --fw-regular:400; 
  --fw-medium:500; 
  --fw-semibold:600; 
  --fw-bold:700; 
  --fw-black:800; --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:80px;

  --pad-x:clamp(20px, 4vw, 56px);
  --container:1240px;
  --container-wide:1480px;
  --section-y:clamp(80px, 10vw, 160px); --radius-sharp:2px;
  --radius-image:6px;
  --radius-pill:999px;

  --shadow-card:0 30px 60px rgba(24,26,29,.08);
  --shadow-card-lg:0 40px 80px rgba(24,26,29,.16);
  --shadow-media:0 40px 90px rgba(0,0,0,.55);
  --shadow-panel:0 30px 70px rgba(0,0,0,.35);

  --ease-editorial:cubic-bezier(.2,.7,.2,1); 
  --duration-fast:.25s; 
  --duration-base:.35s; 
  --duration-slow:.6s; 
  --duration-reveal:.9s; --ink:#181A1D;
  --gold:#C4A935;
  --muted:#595959;

  
  --ink-soft:#2c2e31;
  --gold-soft:#d8c068;
  --gold-deep:#9c862a;
  --gold-hover:#8e6e30;
  --paper:#ffffff;
  --bone:#f5f3ee;
  --ivory:#fafaf7;
  --line:#e3e1db;
  --footer-bg:#0d0e10;

  
  --surface-page:var(--paper);
  --surface-alt:var(--ivory);
  --surface-muted:var(--bone);
  --surface-inverse:var(--ink);
  --surface-footer:var(--footer-bg);
  --border-hairline:var(--line);
  --border-inverse:rgba(255,255,255,.18);

  --text-primary:var(--ink);
  --text-secondary:var(--ink-soft);
  --text-muted:var(--muted);
  --text-on-dark:#ffffff;
  --text-on-dark-muted:rgba(246,241,231,.78);
  --text-accent:var(--gold);
  --text-accent-soft:var(--gold-soft);

  --accent:var(--gold);
  --accent-hover:var(--gold-hover);
  --accent-soft:var(--gold-soft);
  --accent-deep:var(--gold-deep);

  --success:#1d7a4f;
  --error:#e7a1a1; --font-sans:"Open Sans", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  
  --font-display:"Open Sans", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --fs-display:clamp(40px, 5vw, 72px); 
  --fs-display-2:clamp(34px, 4.4vw, 60px); 
  --fs-display-3:clamp(26px, 2.8vw, 38px); 
  --fs-body-lg:clamp(17px, 1.25vw, 19px); 
  --fs-body:16px; 
  --fs-eyebrow:11px; 
  --fs-caption:12px; 

  --lh-display:1.05; 
  --lh-display-2:1.08; 
  --lh-body:1.65; 
  --lh-body-lg:1.7; 

  --ls-display:-0.035em; 
  --ls-display-2:-0.025em; 
  --ls-display-3:-0.02em; 
  --ls-eyebrow:.22em; 
  --ls-button:.18em; 
  --ls-caption:.14em; 

  --fw-light:300; 
  --fw-regular:400; 
  --fw-medium:500; 
  --fw-semibold:600; 
  --fw-bold:700; 
  --fw-black:800; --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:80px;

  --pad-x:clamp(20px, 4vw, 56px);
  --container:1240px;
  --container-wide:1480px;
  --section-y:clamp(80px, 10vw, 160px); --radius-sharp:2px;
  --radius-image:6px;
  --radius-pill:999px;

  --shadow-card:0 30px 60px rgba(24,26,29,.08);
  --shadow-card-lg:0 40px 80px rgba(24,26,29,.16);
  --shadow-media:0 40px 90px rgba(0,0,0,.55);
  --shadow-panel:0 30px 70px rgba(0,0,0,.35);

  --ease-editorial:cubic-bezier(.2,.7,.2,1); 
  --duration-fast:.25s; 
  --duration-base:.35s; 
  --duration-slow:.6s; 
  --duration-reveal:.9s;
  /* design palette -> site palette (dark) */
  --ivory: var(--tsk-ink);
  --paper: var(--tsk-navy);
  --bone: var(--tsk-navy-soft);
  --ink: var(--tsk-text);
  --ink-soft: var(--tsk-text-soft);
  --muted: var(--tsk-text-muted);
  --line: var(--tsk-frame-soft);
  --gold: var(--tsk-gold);
  --gold-soft: var(--tsk-gold-soft);
  --gold-deep: var(--tsk-gold);
  --gold-hover: var(--tsk-gold-bright);
  --accent: var(--tsk-gold-soft);
  --text-primary: var(--tsk-text);
  --text-secondary: var(--tsk-text-soft);
  --text-muted: var(--tsk-text-muted);
  --surface-page: var(--tsk-ink);
  font-family: var(--tsk-sans);
  font-weight: 300;
  color: var(--tsk-text);
  background: var(--tsk-ink);
}
#tsk-design *, #tsk-design *::before, #tsk-design *::after { box-sizing: border-box; }
#tsk-design img { max-width: 100%; display: block; }
#tsk-design a { color: inherit; text-decoration: none; }
#tsk-design p { margin: 0 0 1em; }
#tsk-design h1, #tsk-design h2, #tsk-design h3 { font-family: var(--tsk-sans); margin: 0 0 .5em; }
#tsk-design em, #tsk-design i { font-style: italic; }
#tsk-design .tsk-fade { animation: tskFade .9s cubic-bezier(.2,.7,.2,1); }
#tsk-design .tsk-burns { animation: tskBurns 20s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes tskFade{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes tskBurns{from{transform:scale(1.12)}to{transform:scale(1)}}

/* desktop / phone renders of the design */
#tsk-design .tskd-m { display: none; }
@media (max-width: 767px) {
  #tsk-design .tskd-d { display: none; }
  #tsk-design .tskd-m { display: block; }
}
/* wellness "coming soon" notify form (hover/focus states from the design) */
#tsk-design .tskd-notify-input:focus { border-color: var(--gold) !important; }
#tsk-design .tskd-notify-input::placeholder { color: var(--muted); }
#tsk-design .tskd-notify-btn:hover { background: var(--gold-hover) !important; transform: translateY(-1px); }
#tsk-design .tskd-explore:hover { border-color: var(--gold) !important; }

/* the phone render's listing grid is two columns; on narrow phones that leaves ~140px cards, so stack them */
@media (max-width: 480px) {
  #tsk-design .tskd-cards { grid-template-columns: minmax(0, 1fr) !important; }
}

/* hover states recorded from the prototype */
#tsk-design .tskd-s-scp0:hover { border-color: var(--gold) !important; }
#tsk-design .tskd-s-scp1:hover { background: var(--ivory) !important; }
#tsk-design .tskd-s-scp2:hover { background: var(--gold-hover) !important; transform: translateY(-1px) !important; color: rgb(255, 255, 255) !important; }
#tsk-design .tskd-s-scp3:hover { background: var(--gold-hover) !important; transform: translateY(-1px) !important; }
#tsk-design .tskd-s-scp4:hover { transform: translateY(-4px) !important; box-shadow: rgba(0, 0, 0, 0.35) 0px 30px 60px !important; color: var(--ink) !important; }
#tsk-design .tskd-s-scp5:hover { background: var(--gold-hover) !important; color: rgb(255, 255, 255) !important; }
#tsk-design .tskd-c-scp0:hover { border-color: var(--gold) !important; }
#tsk-design .tskd-c-scp1:hover { background: var(--ivory) !important; }
#tsk-design .tskd-c-scp2:hover { background: var(--gold-hover) !important; transform: translateY(-1px) !important; color: rgb(255, 255, 255) !important; }
#tsk-design .tskd-c-scp3:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
#tsk-design .tskd-c-scp4:hover { box-shadow: rgba(0, 0, 0, 0.35) 0px 30px 60px !important; border-color: var(--gold) !important; }
#tsk-design .tskd-c-scp5:hover { box-shadow: rgba(0, 0, 0, 0.35) 0px 30px 60px !important; }
#tsk-design .tskd-c-scp6:hover { background: var(--gold) !important; color: rgb(255, 255, 255) !important; }
#tsk-design .tskd-c-scp7:hover { border-color: var(--gold) !important; color: var(--ink) !important; }
#tsk-design .tskd-c-scp8:hover { box-shadow: rgba(0, 0, 0, 0.35) 0px 30px 60px !important; transform: translateY(-4px) !important; }
#tsk-design .tskd-c-scp9:hover { color: var(--gold) !important; border-color: var(--gold) !important; }
#tsk-design .tskd-c-scpa:hover { color: var(--gold) !important; }
#tsk-design .tskd-c-scpb:hover { opacity: 0.7 !important; }
#tsk-design .tskd-c-scpc:hover { opacity: 0.68 !important; }
#tsk-design .tskd-c-scpd:hover { border-color: var(--gold) !important; box-shadow: rgba(0, 0, 0, 0.35) 0px 30px 60px !important; }