/* The Mindfulness Place, the brand.
   ONE stylesheet for every page on every site: the garden, the programme pages
   on all four verticals, the education packages page, terms, about, the join
   and thanks pages. The source is brand/tmp.css at the repo root.
   tools/apply-brand.py copies it to each site as /tmp.css and links it last on
   every page, so it wins. Never edit the copies. Edit this, run the script,
   and the whole brand changes everywhere at once.

   What lives here: the typeface, the colours, the vertical themes, the type
   scale and weights, buttons, labels, the header name, the statement band.
   What does not: page layout. Programme pages share brand/programme.css; the
   garden keeps garden.css; a few one-off pages keep their own layout styles.

   Sections:
   1. Everyone: font, colours, accents
   2. Programme pages   [data-tmp="programme"]
   3. The garden        [data-tmp="garden"], 3b. its vertical sheets
   4. About, terms, cards [data-tmp="about" | "terms" | "card"] */

@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800&display=swap');

/* ---------- 1. everyone ---------- */
:root{
  --cream:#F2F0EB; --ink:#33302C; --mid:#6B6B62; --rule:#D4D0C8; --stone:#C9C4B8; --white:#FFFFFF;
  --tmp-sport:#4C9487; --tmp-sport-t:#C3DFDA;
  --tmp-edu:#688ABB;   --tmp-edu-t:#C1CEE2;
  --tmp-pro:#9180B4;   --tmp-pro-t:#CDC5DD;
  --tmp-life:#BE765F;  --tmp-life-t:#E3C8BF;
  --display:"Gabarito","Helvetica Neue",Arial,sans-serif;
  --serif:"Gabarito","Helvetica Neue",Arial,sans-serif;
  --sans:"Gabarito","Helvetica Neue",Arial,sans-serif;
  --mono:"Gabarito","Helvetica Neue",Arial,sans-serif;
}
/* on terms, --body is a text colour, not a font */
html:not([data-tmp="terms"]){--body:"Gabarito","Helvetica Neue",Arial,sans-serif}
body{font-weight:400}
/* the accent: the second half of a headline, slanted */
h1 em,h2 em,h3 em{font-style:italic;font-synthesis:style}

/* ---------- 2. programme pages ---------- */
[data-tmp="programme"]{
  --cream:#F2F0EB;
  --ink:#33302C;
  --mid:#6B6B62;
  --faint:#8A877E;
  --rule:#D4D0C8;
  --stone:#C9C4B8;
  --white:#FFFFFF;
  --shell:#FFFFFF;
  --paper:#FFFFFF;
  --sport:var(--tmp-sport);
  --sport-soft:var(--tmp-sport-t);
  --tint:rgba(76,148,135,.07);
  --serif:"Gabarito","Helvetica Neue",Arial,sans-serif;
  --sans:"Gabarito","Helvetica Neue",Arial,sans-serif;
  --mono:"Gabarito","Helvetica Neue",Arial,sans-serif;
  --display:"Gabarito","Helvetica Neue",Arial,sans-serif;
  --frame:1240px;
}
[data-tmp="programme"] body.v-edu{ --sport:var(--tmp-edu); --sport-soft:var(--tmp-edu-t); --tint:rgba(104,138,187,.07) }
[data-tmp="programme"] body.v-pro{ --sport:var(--tmp-pro); --sport-soft:var(--tmp-pro-t); --tint:rgba(145,128,180,.07) }
[data-tmp="programme"] body.v-life{ --sport:var(--tmp-life); --sport-soft:var(--tmp-life-t); --tint:rgba(190,118,95,.07) }

[data-tmp="programme"] body{font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.65;color:var(--ink);background:var(--cream)}

/* ---------- type ---------- */
[data-tmp="programme"] h1,[data-tmp="programme"] h2,[data-tmp="programme"] h3,[data-tmp="programme"] h4{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.04}
[data-tmp="programme"] h1 em,[data-tmp="programme"] h2 em,[data-tmp="programme"] h3 em,[data-tmp="programme"] .it,[data-tmp="programme"] .claim .it,[data-tmp="programme"] .dark em,[data-tmp="programme"] .close em{
  font-style:italic;font-synthesis:style;font-weight:800;color:var(--sport)
}
[data-tmp="programme"] .it{color:var(--sport)}
[data-tmp="programme"] .hero h1{font-size:clamp(44px,6vw,88px);letter-spacing:-.045em}
[data-tmp="programme"] .hero h1 em{color:var(--sport);margin-top:.04em}
[data-tmp="programme"] .sec h2,[data-tmp="programme"] .cat h2,[data-tmp="programme"] .runs h2,[data-tmp="programme"] .acc h2,[data-tmp="programme"] .faq h2{font-size:clamp(34px,4.2vw,56px)}
[data-tmp="programme"] h3{letter-spacing:-.02em;line-height:1.12}
[data-tmp="programme"] .lede,[data-tmp="programme"] .hero__sub{font-size:clamp(17px,1.5vw,20px);color:#3a3a36;line-height:1.6}
[data-tmp="programme"] .hero__sub{margin-top:28px}
[data-tmp="programme"] .hero__note{color:var(--mid);font-size:14px}

/* labels: Gabarito 600, spaced caps */
[data-tmp="programme"] .eyebrow,[data-tmp="programme"] .pattern__no,[data-tmp="programme"] .cat__n,[data-tmp="programme"] .cat__for,[data-tmp="programme"] .cat__ss,[data-tmp="programme"] .cat__stat span,[data-tmp="programme"] .dash__cap,[data-tmp="programme"] .price__terms,[data-tmp="programme"] .price__fig span,[data-tmp="programme"] .sess__no,[data-tmp="programme"] .runs__it h4,[data-tmp="programme"] .foot,[data-tmp="programme"] .sample__no,[data-tmp="programme"] .sample__who,[data-tmp="programme"] .sample__voices p,[data-tmp="programme"] .bio__role,[data-tmp="programme"] .shot--place b,[data-tmp="programme"] .steps b{
  font-family:var(--mono);font-weight:600;letter-spacing:.14em;text-transform:uppercase
}
[data-tmp="programme"] .eyebrow{font-size:12px;color:var(--mid)}
[data-tmp="programme"] .pattern__no,[data-tmp="programme"] .steps b{color:var(--sport)}
[data-tmp="programme"] .runs__it h4,[data-tmp="programme"] .price__terms{color:var(--ink)}

/* ---------- buttons ---------- */
[data-tmp="programme"] .btn{
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;
  border-radius:99px;padding:14px 26px;line-height:1.2;
  background:var(--ink);color:var(--cream);transition:background .2s,color .2s,transform .2s
}
[data-tmp="programme"] .btn:hover{background:var(--sport);color:var(--ink)}
[data-tmp="programme"] .quiet{
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--ink);border-bottom:2px solid var(--sport);padding-bottom:2px
}
[data-tmp="programme"] .quiet:hover{color:var(--sport);border-color:var(--sport)}

/* ---------- header: heart mark and the one-line name ---------- */
[data-tmp="programme"] .top{background:color-mix(in srgb,var(--cream) 92%,transparent);border-bottom:1px solid var(--rule)}
[data-tmp="programme"] .top__in{height:64px}
[data-tmp="programme"] .brand{gap:10px;min-width:0}
[data-tmp="programme"] .brand__mk{width:30px;height:28px}
[data-tmp="programme"] .brand__txt{
  font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;
  text-transform:none;line-height:1.1;white-space:nowrap;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis
}
[data-tmp="programme"] .brand__txt em{font-style:italic;font-synthesis:style;color:var(--sport)}
[data-tmp="programme"] .brand__txt i{
  display:inline;font-style:normal;font-weight:500;font-size:15px;letter-spacing:-.01em;
  color:var(--mid);padding-left:12px;margin-left:6px;border-left:1px solid var(--rule)
}
[data-tmp="programme"] .top__garden,[data-tmp="programme"] .top__contact{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--mid)}
[data-tmp="programme"] .top__garden:hover,[data-tmp="programme"] .top__contact:hover{color:var(--ink)}
[data-tmp="programme"] .top .btn{padding:11px 20px;font-size:14px}
@media (max-width:860px){[data-tmp="programme"] .brand__txt i{display:none}}
@media (max-width:560px){
  [data-tmp="programme"] .brand__txt{font-size:15px}
  [data-tmp="programme"] .top .btn{padding:10px 14px;font-size:13px}
}
@media (max-width:420px){[data-tmp="programme"] .brand__txt{display:none}}

/* ---------- hero ---------- */
[data-tmp="programme"] .hero{padding:88px 0 104px}
[data-tmp="programme"] .hero__img{border:0;border-radius:3px}

/* ---------- sections: editorial, like the guidelines ----------
   Big headlines, a numbered label above each one, ruled columns instead of
   boxed cards, and full-bleed bands of ink and the vertical colour. */
[data-tmp="programme"] body{counter-reset:sec}
[data-tmp="programme"] .sec{border-top:0;padding:clamp(80px,10vw,136px) 0}
[data-tmp="programme"] .sec__head{gap:0;margin-bottom:clamp(36px,4.4vw,56px)}
[data-tmp="programme"] .sec h2,[data-tmp="programme"] .cat h2,[data-tmp="programme"] .runs h2,[data-tmp="programme"] .acc h2,[data-tmp="programme"] .faq h2,[data-tmp="programme"] .produces h2{font-size:clamp(40px,5.8vw,84px);letter-spacing:-.045em;max-width:16ch}
[data-tmp="programme"] .sec__head .lede{margin-top:24px}

/* the numbered label: 01 What it produces */
[data-tmp="programme"] .sec__head > .eyebrow,[data-tmp="programme"] .produces > div > .eyebrow:first-child,[data-tmp="programme"] .portal__grid > div > .eyebrow:first-child{
  display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(22px,3vw,40px);color:var(--ink);font-size:11.5px
}
[data-tmp="programme"] .sec__head > .eyebrow::before,[data-tmp="programme"] .produces > div > .eyebrow:first-child::before,[data-tmp="programme"] .portal__grid > div > .eyebrow:first-child::before{
  counter-increment:sec;content:counter(sec,decimal-leading-zero);
  font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.03em;color:var(--sport);text-transform:none;line-height:1
}
[data-tmp="programme"] .produces > div > h2,[data-tmp="programme"] .portal__grid > div > h2{margin-top:0!important}

/* the pattern: three ruled columns, big numbers */
[data-tmp="programme"] .pattern{border-top:0;gap:clamp(18px,3vw,40px)}
[data-tmp="programme"] .pattern div,[data-tmp="programme"] .pattern div:not(:first-child){border:0;border-top:1px solid var(--ink);padding:22px 0 0;font-size:18px;line-height:1.55;color:var(--ink)}
[data-tmp="programme"] .pattern__no{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.03em;text-transform:none;margin-bottom:12px;line-height:1}
[data-tmp="programme"] .claim{margin-top:clamp(56px,7vw,96px);font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:1.04;font-size:clamp(36px,5vw,72px);max-width:18ch}

/* lists are ruled rows */
[data-tmp="programme"] .plist{border-top:1px solid var(--ink)}
[data-tmp="programme"] .plist li{font-size:18px;color:var(--ink);padding:16px 0;line-height:1.45}
[data-tmp="programme"] .plist li::before{display:none}
[data-tmp="programme"] .steps{gap:0;border-top:1px solid var(--ink);margin-top:clamp(28px,3vw,40px)}
[data-tmp="programme"] .steps li{grid-template-columns:56px 1fr;padding:16px 0;border-bottom:1px solid var(--rule);font-size:17px;color:var(--ink);align-items:baseline}
[data-tmp="programme"] .steps b{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em;text-transform:none;padding:0}

/* who it is for: ruled columns, no boxes */
[data-tmp="programme"] .who{gap:clamp(18px,3vw,40px)}
[data-tmp="programme"] .who div,[data-tmp="programme"] .acc__card{background:none!important;border:0;border-top:1px solid var(--ink);border-radius:0;padding:22px 0 0}
[data-tmp="programme"] .who h3{font-size:clamp(24px,2.2vw,30px);font-weight:800;letter-spacing:-.03em;margin-bottom:14px}
[data-tmp="programme"] .who p{font-size:17px;color:#3a3a36}
[data-tmp="programme"] .acc__card{border-top:2px solid var(--ink);padding-top:26px}
[data-tmp="programme"] .acc__card h4{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:32px}
[data-tmp="programme"] .acc__card li{font-size:17px;color:var(--ink)}

/* the statement band takes the vertical colour, full bleed */
[data-tmp="programme"] .dark{background:var(--sport);color:var(--ink);padding:clamp(100px,13vw,180px) 0;text-align:left}
[data-tmp="programme"] .dark p{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:1.04;font-size:clamp(38px,6vw,92px);max-width:17ch;margin:0}
[data-tmp="programme"] .dark em{color:var(--white)}

/* the close stays ink */
[data-tmp="programme"] .close{padding:clamp(100px,12vw,170px) 0;text-align:left}
[data-tmp="programme"] .close .wrap{display:flex;flex-direction:column;align-items:flex-start}
[data-tmp="programme"] .close p,[data-tmp="programme"] .close h2{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:1.04;font-size:clamp(38px,5.6vw,84px);max-width:18ch;margin:0}
[data-tmp="programme"] .close em,[data-tmp="programme"] .close .it{color:var(--sport-soft)}
[data-tmp="programme"] .close .hero__act{justify-content:flex-start;margin-top:clamp(36px,4vw,56px)}
[data-tmp="programme"] .close .btn{background:var(--cream);color:var(--ink)}
[data-tmp="programme"] .close .btn:hover{background:var(--sport-soft)}
[data-tmp="programme"] .close .quiet{color:var(--cream);border-bottom-color:var(--sport-soft)}

/* portal preview */
[data-tmp="programme"] .portal{background:var(--white)}
[data-tmp="programme"] .dash__img{border-radius:3px;border:1px solid var(--rule);box-shadow:0 30px 70px rgba(51,48,44,.14)}
[data-tmp="programme"] .dash__cap{font-size:11.5px;color:var(--mid)}

/* sessions: a ruled list, the number in colour */
[data-tmp="programme"] .sess{border-top:2px solid var(--ink)}
[data-tmp="programme"] .sess a,[data-tmp="programme"] .sec:nth-of-type(even) .sess a{background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0!important;padding:18px 0;grid-template-columns:64px 1fr}
[data-tmp="programme"] .sess a:last-child{border-bottom:1px solid var(--rule)}
[data-tmp="programme"] .sess a:hover,[data-tmp="programme"] .sess a:not(:last-child):hover{border-color:var(--rule);margin-bottom:0}
[data-tmp="programme"] .sess a.is-sample{background:none}
[data-tmp="programme"] .sess__no{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--sport)}
[data-tmp="programme"] .sess__nm{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:clamp(20px,2vw,26px);line-height:1.15}

/* sample player */
[data-tmp="programme"] .sample{border-top:1px solid var(--ink)}
[data-tmp="programme"] .sample__nm{font-family:var(--display);font-weight:800;letter-spacing:-.03em}
[data-tmp="programme"] .sample__voice{font-family:var(--sans);font-weight:500}
[data-tmp="programme"] .sample__voice span{font-family:var(--sans);font-weight:600}

/* price: the offer on white, what you get on the vertical colour */
[data-tmp="programme"] .price{border:0;border-radius:3px;overflow:hidden;background:var(--white)}
[data-tmp="programme"] .price__l{border-right:0}
[data-tmp="programme"] .price__r{background:var(--sport);color:var(--ink)}
[data-tmp="programme"] .price__r .eyebrow{color:var(--ink)}
[data-tmp="programme"] .price__r .plist{border-top-color:var(--ink)}
[data-tmp="programme"] .price__r .plist li{color:var(--ink);border-bottom-color:rgba(51,48,44,.18);font-size:17px}
[data-tmp="programme"] .price__r .trial__cols>div+div{border-left-color:rgba(51,48,44,.18)}
[data-tmp="programme"] .price__fig strong{font-family:var(--display);font-weight:800;letter-spacing:-.05em;font-size:clamp(64px,7vw,96px)}
[data-tmp="programme"] .price__terms{font-size:11.5px}
[data-tmp="programme"] .guar{border-left:0;border-radius:3px;color:var(--ink);background:var(--tint);box-shadow:inset 4px 0 0 var(--sport);font-size:15.5px}
@media (max-width:900px){[data-tmp="programme"] .price__l{border-bottom:0}}

/* catalogue, runs, faq */
[data-tmp="programme"] .cat__hd{border-bottom:2px solid var(--ink)}
[data-tmp="programme"] .cat__hd h3{font-family:var(--display);font-weight:800;letter-spacing:-.035em;font-size:clamp(28px,3vw,40px)}
[data-tmp="programme"] .cat__nm{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:21px}
[data-tmp="programme"] .cat__stat b{font-family:var(--display);font-weight:800;letter-spacing:-.05em;font-size:clamp(48px,5vw,72px);color:var(--sport)}
[data-tmp="programme"] .runs{background:var(--white)}
[data-tmp="programme"] .runs__it{border-top:1px solid var(--ink);padding-top:20px}
[data-tmp="programme"] .runs__it p{color:var(--ink);font-size:17px}
[data-tmp="programme"] .faq__list{border-top:2px solid var(--ink)}
[data-tmp="programme"] .faq__it h4{font-family:var(--display);font-weight:800;letter-spacing:-.025em;font-size:22px;line-height:1.2}
[data-tmp="programme"] .faq__it p{color:#3a3a36;font-size:17px}

/* bio */
[data-tmp="programme"] .bio{align-items:center}
[data-tmp="programme"] .bio h3{font-size:clamp(32px,3.4vw,48px);letter-spacing:-.04em}
[data-tmp="programme"] .bio img,[data-tmp="programme"] .bio .shot{border-radius:3px;border:0}
[data-tmp="programme"] .bio p{color:#3a3a36;font-size:17px}

/* footer */
[data-tmp="programme"] .foot{font-size:11.5px;color:var(--mid)}

@media (max-width:900px){
  [data-tmp="programme"] .pattern{grid-template-columns:1fr;gap:28px}
  [data-tmp="programme"] .pattern div,[data-tmp="programme"] .pattern div:not(:first-child){padding:20px 0 0}
  [data-tmp="programme"] .who{gap:32px}
}

/* forms on the page */
[data-tmp="programme"] .mfs-trial,[data-tmp="programme"] .mfs-trial *{font-family:var(--sans)}

/* small screens: the garden link is the arrow alone, as before */
@media (max-width:480px){[data-tmp="programme"] .top__garden{font-size:0;letter-spacing:0}}

/* pages with no photograph yet: the headline runs wider and a little smaller */
[data-tmp="programme"] .hero--plain h1{font-size:clamp(44px,5.4vw,78px);max-width:18ch}

/* two-column sections: the headline shares the row, so it steps down a size */
[data-tmp="programme"] .produces h2,[data-tmp="programme"] .portal__grid h2,[data-tmp="programme"] .walk h2{font-size:clamp(36px,4.2vw,62px);max-width:14ch}

/* the statement band: the first sentence on its own line, the rest below it,
   set wide so it reads as two thoughts, not a stack of short lines */
[data-tmp="programme"] .dark p{max-width:none;font-size:clamp(34px,4.4vw,64px);line-height:1.06}
[data-tmp="programme"] .dark__lead{display:inline-block;margin-bottom:.18em}

/* the statement band: the first sentence is the plain line, the second sentence
   is the accent, slanted and in the tint, the way the guidelines pair
   "Equipped." with "Not fixed." */
[data-tmp="programme"] .dark__rest{font-style:italic;font-synthesis:style;color:var(--white)}
[data-tmp="programme"] .dark__rest em{color:inherit}

/* ---------- 3. the garden ---------- */
[data-tmp="garden"] .brand span{font-family:var(--display);font-weight:800;font-size:clamp(16px,1.35vw,19px);
  letter-spacing:-.02em;text-transform:none}
[data-tmp="garden"] .bar nav a{font-weight:600;font-size:12px;letter-spacing:.12em}
[data-tmp="garden"] .bar nav a.signin{border-radius:99px;padding:9px 16px}
/* the promise: one line on anything wider than a tablet, the second half
   slanted the way every TMP headline is ("Equipped. Not fixed."). Cream, not
   pure white, so it sits in the palette over the film. */
[data-tmp="garden"] .hero h1{font-weight:800;letter-spacing:-.045em;line-height:1.04;white-space:nowrap;
  font-size:clamp(30px,4.5vw,84px);margin:0 0 18px;color:var(--cream);text-shadow:0 2px 30px rgba(20,19,17,.6)}
[data-tmp="garden"] .hero h1 em{font-weight:800}
[data-tmp="garden"] .hero p{font-family:var(--body);font-weight:500;font-size:clamp(16px,1.35vw,21px);
  letter-spacing:-.005em;text-transform:none;line-height:1.4;color:var(--cream);opacity:.94;
  max-width:none;margin:0 auto;white-space:nowrap;text-shadow:0 1px 14px rgba(20,19,17,.75),0 1px 3px rgba(20,19,17,.5)}
/* the four places, bold, each in its vertical's tint: the same colours as the
   four paths below them */
[data-tmp="garden"] .hero p .tmp-w{font-weight:800;letter-spacing:-.01em}
[data-tmp="garden"] .hero p .tmp-w--sport{color:var(--tmp-sport-t)}
[data-tmp="garden"] .hero p .tmp-w--edu{color:var(--tmp-edu-t)}
[data-tmp="garden"] .hero p .tmp-w--pro{color:var(--tmp-pro-t)}
[data-tmp="garden"] .hero p .tmp-w--life{color:var(--tmp-life-t)}
@media (max-width:899px){
  [data-tmp="garden"] .hero h1{white-space:normal;font-size:clamp(36px,9.6vw,54px);line-height:1.02;margin-bottom:14px}
  [data-tmp="garden"] .hero h1 em{display:block}
  [data-tmp="garden"] .hero p{font-size:16px;max-width:30ch;white-space:normal;text-wrap:balance}
}
[data-tmp="garden"] .path .name{font-weight:700;font-size:clamp(13px,1.3vw,16px);letter-spacing:.12em}
[data-tmp="garden"] .path .count{font-weight:600;font-size:clamp(10px,.85vw,11px);letter-spacing:.1em}
[data-tmp="garden"] .sheet__back{font-weight:600;font-size:12px;letter-spacing:.1em;border-radius:99px}
[data-tmp="garden"] .doors b,[data-tmp="garden"] .door span{font-weight:600;font-size:10.5px}
[data-tmp="garden"] .sheet__eyebrow{font-weight:600;font-size:12px;letter-spacing:.14em}
[data-tmp="garden"] .sheet__head h2{font-weight:800;letter-spacing:-.045em;line-height:1.04;font-size:clamp(36px,5.6vw,76px)}
[data-tmp="garden"] .sheet__head h2 em{font-style:italic}
[data-tmp="garden"] .sec>h3{font-weight:600;font-size:12px;letter-spacing:.14em}
[data-tmp="garden"] .tab{font-weight:600;font-size:12px;letter-spacing:.1em;border-radius:99px}
[data-tmp="garden"] .pack h4{font-weight:800;letter-spacing:-.035em;line-height:1.06}
[data-tmp="garden"] .pack .holds,[data-tmp="garden"] .pack .worth,[data-tmp="garden"] .pack .price span,
[data-tmp="garden"] .grp__h>i,[data-tmp="garden"] .progs a i,[data-tmp="garden"] .soon,[data-tmp="garden"] .garden-legal,
[data-tmp="garden"] .menu{font-weight:600;letter-spacing:.12em}
[data-tmp="garden"] .pack ul li{font-weight:500;font-size:13px;letter-spacing:0;text-transform:none}
[data-tmp="garden"] .pack .price b{font-weight:800;letter-spacing:-.05em}
[data-tmp="garden"] .pack .go,[data-tmp="garden"] .sheet__foot a{font-weight:600;font-size:12px;letter-spacing:.1em;border-radius:99px}
[data-tmp="garden"] .grp__h>span{font-weight:800;letter-spacing:-.035em}
[data-tmp="garden"] .progs a em{font-family:var(--display);font-style:normal;font-weight:700;letter-spacing:-.02em}

[data-tmp="garden"] .path .name,[data-tmp="garden"] .menu{border-radius:99px}
[data-tmp="garden"] .path .name{padding:.9em 1.25em .9em 1.4em}

/* ---------- 3b. the vertical sheet ----------
   Click a door and the garden turns to paper. Cream ground, charcoal type,
   and the vertical's colour marks things without flooding them: the dot, the
   accent line, the live count, the tile you are on. Same look as the brand
   book and the programme pages. garden.js sets --c (the colour) and --ct
   (its tint) on the sheet. */
[data-tmp="garden"] .sheet{--ct:var(--tmp-sport-t)}
[data-tmp="garden"] .stage.sheeting>video{filter:grayscale(1) brightness(1.55) contrast(.7)}
[data-tmp="garden"] .sheet__bg video{opacity:.3;filter:saturate(.85) brightness(1.2)}
[data-tmp="garden"] .sheet__bg .scrim{background:
  linear-gradient(to bottom,
    color-mix(in srgb, var(--ct) 46%, rgba(242,240,235,.5)) 0%,
    color-mix(in srgb, var(--ct) 22%, rgba(242,240,235,.86)) 34%,
    rgba(242,240,235,.96) 62%, #F2F0EB 86%)}

/* the sticky row */
[data-tmp="garden"] .sheet__nav::before{background:rgba(242,240,235,.7)}
[data-tmp="garden"] .sheet__back{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.1em;
  color:var(--ink);background:rgba(255,255,255,.6);border:1px solid rgba(51,48,44,.2);border-radius:99px;
  padding:10px 18px;transition:background .25s,color .25s,border-color .25s}
[data-tmp="garden"] .sheet__back:focus{outline:none}
[data-tmp="garden"] .sheet__back:focus-visible{outline:2px solid var(--c);outline-offset:3px}
[data-tmp="garden"] .sheet__back:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
[data-tmp="garden"] .doors{gap:8px}
[data-tmp="garden"] .doors b{font-weight:600;font-size:11px;letter-spacing:.12em;color:rgba(51,48,44,.55);
  text-shadow:none;margin-right:6px}
[data-tmp="garden"] .door{opacity:1;gap:8px;padding:6px 15px 6px 7px;border-radius:99px;
  background:rgba(255,255,255,.55);border:1px solid rgba(51,48,44,.16);
  transition:background .25s,border-color .25s}
[data-tmp="garden"] .door img{width:22px}
[data-tmp="garden"] .door span{font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--ink);text-shadow:none}
[data-tmp="garden"] .door:hover{background:var(--dt,#fff);border-color:transparent}

/* the line: charcoal, then the accent in the vertical's colour */
/* the mark and the line sit together the way the name sits beside the mark
   in the lockup: two lines of type about nine tenths of the mark's height,
   type at .432 of the mark, the gap at .27. --mk is the mark's height. */
[data-tmp="garden"] .sheet__head{--mk:clamp(110px,11.8vw,176px);display:grid;grid-template-columns:auto 1fr;
  align-items:center;column-gap:calc(var(--mk) * .27);row-gap:clamp(18px,2.8vh,28px);
  padding-bottom:clamp(30px,6vh,64px)}
[data-tmp="garden"] .sheet__head>div{display:contents}
[data-tmp="garden"] .sheet__head>img{filter:none;grid-row:2;grid-column:1;height:var(--mk);width:auto}
[data-tmp="garden"] .sheet__head .sheet__eyebrow{grid-row:1;grid-column:1/-1;margin:0}
[data-tmp="garden"] .sheet__eyebrow{display:flex;align-items:center;gap:9px;
  font-weight:600;font-size:12px;letter-spacing:.14em;color:var(--ink);margin-bottom:16px}
[data-tmp="garden"] .sheet__eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
[data-tmp="garden"] .sheet__head h2{grid-row:2;grid-column:2;color:var(--ink);letter-spacing:-.025em;line-height:1.03;
  font-size:calc(var(--mk) * .432);text-wrap:initial}
[data-tmp="garden"] .sheet__head h2 em{display:block;color:var(--c);font-weight:800}

/* the groups: a ruled list, the count as a chip */
[data-tmp="garden"] .grp{margin:0;border-top:1px solid rgba(51,48,44,.14)}
[data-tmp="garden"] .grp:last-child{border-bottom:1px solid rgba(51,48,44,.14)}
[data-tmp="garden"] .grp__h{border:0;padding:clamp(18px,2.6vh,26px) 0;gap:16px}
[data-tmp="garden"] .grp__h:hover{border:0}
[data-tmp="garden"] .grp__h>span{border-left:0;padding-left:0;color:var(--ink);
  font-size:clamp(24px,2.7vw,36px);letter-spacing:-.03em;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
[data-tmp="garden"] .grp__h:hover>span{transform:translateX(4px)}
[data-tmp="garden"] .grp__h>i{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(51,48,44,.55);padding:8px 13px;border-radius:99px;border:1px solid rgba(51,48,44,.18)}
[data-tmp="garden"] .grp__h>i.is-live{color:var(--ink);background:var(--ct);border-color:transparent}
[data-tmp="garden"] .grp__h>i.is-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
[data-tmp="garden"] .grp__h::after{width:10px;height:10px;margin:0 6px 0 4px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink)}
[data-tmp="garden"] .grp__h:hover::after{border-color:var(--c)}
[data-tmp="garden"] .grp .progs{padding:4px 0 clamp(24px,3.4vh,34px)}

/* the programmes: white cards, the tint when you are on one */
[data-tmp="garden"] .progs{gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
[data-tmp="garden"] .progs a{position:relative;min-height:88px;padding:20px 56px 20px 22px;
  background:#fff;border:1px solid rgba(51,48,44,.1);border-radius:0;color:var(--ink);
  transition:background .25s,border-color .25s}
[data-tmp="garden"] .progs a em{font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1.2}
[data-tmp="garden"] .progs a:not(.is-soon)::after{content:"";position:absolute;right:24px;top:50%;
  width:8px;height:8px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);
  transform:translateY(-50%) rotate(45deg);transition:right .3s cubic-bezier(.2,.7,.3,1)}
[data-tmp="garden"] .progs a:hover{background:var(--ct);border-color:transparent;color:var(--ink)}
[data-tmp="garden"] .progs a:hover::after{right:19px}
[data-tmp="garden"] .progs a:hover i{color:rgba(51,48,44,.6)}
[data-tmp="garden"] .progs a.is-soon{opacity:1;background:transparent;border:1px dashed rgba(51,48,44,.22)}
[data-tmp="garden"] .progs a.is-soon em{color:rgba(51,48,44,.5)}
[data-tmp="garden"] .progs a i{font-weight:600;font-size:10.5px;letter-spacing:.1em;color:rgba(51,48,44,.45)}

/* programmes and packs */
[data-tmp="garden"] .tabs{background:rgba(255,255,255,.7);border:1px solid rgba(51,48,44,.14);border-radius:99px}
[data-tmp="garden"] .tab{color:rgba(51,48,44,.6)}
[data-tmp="garden"] .tab:hover{color:var(--ink)}
[data-tmp="garden"] .tab[aria-selected="true"]{background:var(--ink);color:var(--cream)}
[data-tmp="garden"] .pack{background:#fff;border:1px solid rgba(51,48,44,.1);border-radius:0;
  backdrop-filter:none;-webkit-backdrop-filter:none}
[data-tmp="garden"] .pack::before{display:none}
[data-tmp="garden"] .pack h4{color:var(--ink)}
[data-tmp="garden"] .pack .who{color:rgba(51,48,44,.78)}
[data-tmp="garden"] .pack .holds{color:var(--ink);opacity:.6}
[data-tmp="garden"] .pack ul li{background:var(--ct);color:var(--ink);border-radius:14px;min-height:40px;padding:8px 14px}
[data-tmp="garden"] .pack ul li.plus{background:transparent;border:1px solid rgba(51,48,44,.22);color:rgba(51,48,44,.75)}
[data-tmp="garden"] .pack .price b{color:var(--c)}
[data-tmp="garden"] .pack .go{background:var(--ink);color:var(--cream);transition:background .25s,color .25s}
[data-tmp="garden"] .pack .go:hover{background:var(--c);color:var(--ink)}

/* the foot */
[data-tmp="garden"] .sheet__foot a{transition:background .25s,color .25s,border-color .25s;padding:15px 24px}
[data-tmp="garden"] .sheet__foot .primary{background:var(--ink);color:var(--cream)}
[data-tmp="garden"] .sheet__foot .primary:hover{background:var(--c);color:var(--ink)}
[data-tmp="garden"] .sheet__foot .ghost{background:rgba(255,255,255,.6);border:1px solid rgba(51,48,44,.2);color:var(--ink)}
[data-tmp="garden"] .sheet__foot .ghost:hover{background:#fff;border-color:rgba(51,48,44,.4)}

@media (max-aspect-ratio:1/1){
  [data-tmp="garden"] .door{padding:5px}
  [data-tmp="garden"] .doors{gap:6px}
  /* on a phone it is the stacked lockup: type at .306 of the mark, gap at .19 */
  [data-tmp="garden"] .sheet__head{--mk:clamp(90px,28vw,140px);grid-template-columns:1fr;
    row-gap:calc(var(--mk) * .19)}
  [data-tmp="garden"] .sheet__head h2{grid-row:3;grid-column:1;font-size:calc(var(--mk) * .306)}
  [data-tmp="garden"] .grp__h{flex-wrap:wrap;row-gap:10px}
  [data-tmp="garden"] .grp__h>span{flex-basis:100%;font-size:26px}
  [data-tmp="garden"] .grp__h::after{position:absolute;right:2px;top:30px}
  [data-tmp="garden"] .grp__h{position:relative;padding-right:30px}
  [data-tmp="garden"] .progs{grid-template-columns:1fr 1fr;gap:8px}
  [data-tmp="garden"] .progs a{min-height:74px;padding:14px 30px 14px 14px}
  [data-tmp="garden"] .progs a em{font-size:15px}
  [data-tmp="garden"] .progs a:not(.is-soon)::after{right:13px;width:6px;height:6px}
  [data-tmp="garden"] .progs a:hover::after{right:10px}
}

/* the band. The mark and the line sit on charcoal, the way the feed tiles do
   in the brand book, so both halves of the mark and both lines of the
   headline hold their contrast. The nav bar is the same charcoal, so the two
   read as one piece. Programmes below stay on cream. Scott, 28 October 2026. */
[data-tmp="garden"] .sheet__bg .scrim{background:
  linear-gradient(to bottom, rgba(242,240,235,.9) 0%, rgba(242,240,235,.95) 50%, #F2F0EB 86%)}
[data-tmp="garden"] .sheet__head{position:relative;isolation:isolate;margin-bottom:clamp(34px,6vh,64px);
  padding-bottom:clamp(40px,7vh,72px)}
[data-tmp="garden"] .sheet__head h2{color:var(--cream)}
[data-tmp="garden"] .sheet__head h2 em{color:var(--ct)}
[data-tmp="garden"] .sheet__head .sheet__eyebrow{color:rgba(242,240,235,.8)}
[data-tmp="garden"] .sheet__nav::before{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  -webkit-mask-image:none;mask-image:none;transition:background .3s ease}
[data-tmp="garden"] .sheet__nav.is-solid::before{background:rgba(51,48,44,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
[data-tmp="garden"] .sheet__nav{padding-bottom:clamp(14px,2.4vh,22px)}
[data-tmp="garden"] .sheet__back{color:var(--cream);background:rgba(242,240,235,.08);border-color:rgba(242,240,235,.3)}
[data-tmp="garden"] .sheet__back:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
[data-tmp="garden"] .doors b{color:rgba(242,240,235,.55)}
[data-tmp="garden"] .door{background:rgba(242,240,235,.08);border-color:rgba(242,240,235,.22)}
[data-tmp="garden"] .door span{color:var(--cream)}
[data-tmp="garden"] .door:hover{background:var(--dt);border-color:transparent}
[data-tmp="garden"] .door:hover span{color:var(--ink)}
[data-tmp="garden"] .grp:first-child{border-top:0}
/* the garden keeps playing under the band. It is the same film, in the same
   place, as the one behind the sheet, so nothing moves: inside the band it
   just turns to cream lines on charcoal. garden.js trims the band to the
   header as you scroll, and the nav goes solid once the header has gone. */
[data-tmp="garden"] .sheet__bg .band{z-index:1;background:var(--ink);clip-path:inset(0 0 100% 0)}
[data-tmp="garden"] .sheet__bg .band video{-webkit-mask-image:none;mask-image:none;opacity:.22;
  mix-blend-mode:screen;filter:grayscale(1) invert(1) sepia(.45) contrast(1.15)}

/* ---------- 4. about: the manifesto on the notebook page ---------- */
[data-tmp="about"] .brand span{font-family:var(--display);font-weight:800;font-size:clamp(15px,1.3vw,18px);letter-spacing:-.02em;text-transform:none}
[data-tmp="about"] .bar nav a{font-weight:600;font-size:12px;letter-spacing:.12em}
[data-tmp="about"] .meta,[data-tmp="about"] .seal span,[data-tmp="about"] .foot a{font-weight:600;letter-spacing:.12em}
[data-tmp="about"] .m{font-weight:500;letter-spacing:-.01em}
[data-tmp="about"] .m .open,[data-tmp="about"] .m .close{font-weight:800;letter-spacing:-.035em}
[data-tmp="about"] .m .before,[data-tmp="about"] .m .close,[data-tmp="about"] .m em{font-style:italic;font-synthesis:style}
[data-tmp="about"] .m .believe em{font-weight:600}

/* ---------- terms ---------- */
[data-tmp="terms"] .brand span{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;text-transform:none}
[data-tmp="terms"] h1{font-weight:800;letter-spacing:-.045em;line-height:1.04;font-size:clamp(44px,6.4vw,84px)}
[data-tmp="terms"] h2{font-weight:800;letter-spacing:-.035em;line-height:1.06;font-size:clamp(30px,3.6vw,44px)}
[data-tmp="terms"] h3{font-weight:600;letter-spacing:.12em}
[data-tmp="terms"] .eyebrow,[data-tmp="terms"] .updated,[data-tmp="terms"] .toc__label,[data-tmp="terms"] .toc a .n,
[data-tmp="terms"] .sec-n,[data-tmp="terms"] .top-link,[data-tmp="terms"] .foot,[data-tmp="terms"] .top a.back{font-weight:600;letter-spacing:.12em}
[data-tmp="terms"] .sec-n,[data-tmp="terms"] .toc a .n{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:14px}
[data-tmp="terms"] .sec-n{font-size:28px;line-height:1;color:var(--ink)}

/* ---------- thanks and moment: the small cards ---------- */
[data-tmp="card"] .brand span{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;text-transform:none}
[data-tmp="card"] h1{font-weight:800;letter-spacing:-.04em;line-height:1.04;font-size:clamp(34px,5.4vw,48px)}
[data-tmp="card"] .eyebrow,[data-tmp="card"] label,[data-tmp="card"] .foot a{font-weight:600;letter-spacing:.12em}
[data-tmp="card"] button,[data-tmp="card"] .btn{font-weight:600;font-size:14px;letter-spacing:0;text-transform:none;border-radius:99px}

/* ---------- the soft palette: contrast rules ----------
   The vertical colours are deep pastels. Each holds 3:1 on cream, enough for
   headlines, accents and big numbers, not for small type. So: buttons are
   charcoal with cream type, text on a vertical colour is charcoal, the accent
   on a vertical colour is white, and small labels stay charcoal. */
[data-tmp="programme"] .sample__voice[aria-pressed="true"]{color:var(--ink)}
[data-tmp="programme"] .sample__voice[aria-pressed="true"] span{color:rgba(51,48,44,.7)}
[data-tmp="programme"] .sample__play{color:var(--ink)}