/* interfulgent.com: "The Range", from the approved home page mockup v5 (design/mockups/2026-10-10-the-range-home-v5.html).
   Fonts are served from this site (SIL Open Font Licence; licences beside the files). */
@font-face{font-family:"Recursive";src:url("fonts/recursive-latin-full-normal.woff2") format("woff2");font-weight:400 760;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  --g:#121110;--g2:#24221F;--ln:rgba(242,237,228,.12);--ln2:rgba(242,237,228,.26);
  --tx:#F3EEE6;--tx2:#C4BCAF;--tx3:#9A9285;
  --m1:#B5480F;--m2:#E8962A;--m3:#F7C35A;
  --body:#E0703A;--mind:#EDA23C;--soul:#F7D774;
  --bgrad:linear-gradient(45deg,#E8962A,#FFD27A);
  --mgrad:linear-gradient(45deg,#B5480F,#E8962A 50%,#FFE6A0);
  --range:linear-gradient(90deg,#E0703A,#EDA23C 50%,#F7D774);
  --arc:linear-gradient(90deg,#C2541A,#F2A93B 55%,#FFE6A0);
  --olc:#B9B0A2;
  /* Each section's own part of the spectrum (options item B2, pick 2A): Learning the lightest yellows, Training
     the middle oranges, the Institute the darkest burnt orange. The first is the outline of the key word, the
     other two the ends of the gradient rule under the section heading. */
  --learn:#F7D774;--learn-a:#F7C35A;--learn-b:#FFE6A0;
  --train:#E8962A;--train-a:#E0803A;--train-b:#F2A93B;
  --inst:#C2541A;--inst-a:#B5480F;--inst-b:#D2652A;
  --gut:48px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--g);color:var(--tx);font-family:Recursive,system-ui,-apple-system,"Segoe UI",sans-serif;font-variation-settings:"CASL" 0,"MONO" 0;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,li,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
svg{display:block}
.wrap{max-width:1296px;margin:0 auto;padding:0 var(--gut)}
.mono,.lab{font-variation-settings:"MONO" 1,"CASL" 0}
.lab{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3);font-weight:500}
:focus-visible{outline:2px solid var(--m3);outline-offset:3px;border-radius:4px}

/* ---------- outline words (after the UnCubed Mac mode word: IBM Plex Sans Bold, stroked, tracking -3%) ---------- */
.ol{display:block;font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:700;font-size:clamp(72px,11vw,164px);line-height:.9;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:.021em var(--olc);font-variation-settings:normal;margin-left:-.045em}
@supports not (-webkit-text-stroke:1px #000){.ol{color:var(--olc)}}
.ol-s{display:block;font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:700;font-size:46px;line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.35px var(--olc);margin-left:-.04em}

/* ---------- hero ---------- */
.hero{position:relative;height:clamp(560px,44vw,720px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:var(--g)}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(18,17,16,.95) 0%,rgba(18,17,16,.86) 26%,rgba(18,17,16,.45) 50%,rgba(18,17,16,0) 72%),
    linear-gradient(180deg,rgba(18,17,16,.6) 0%,rgba(18,17,16,0) 22%,rgba(18,17,16,0) 72%,#121110 100%)}
.hero > .bar,.hero > .copy{position:relative;z-index:2}
.bar{position:absolute!important;top:0;left:0;right:0}
.bar .wrap{display:flex;align-items:center;gap:24px;padding-top:26px;padding-bottom:26px}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:44px;height:44px}
.brand .wm{font-size:24px;font-weight:560;font-variation-settings:"CASL" .5;letter-spacing:.004em}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:30px;font-size:15.5px;font-weight:520;color:var(--tx);text-shadow:0 1px 8px rgba(18,17,16,.7)}
.bar nav .sup{padding-left:30px;border-left:1px solid var(--ln2);color:var(--m3)}
.copy{padding-top:56px}
.copy h1{font-size:clamp(34px,4.2vw,60px);line-height:1.08;font-weight:660;font-variation-settings:"CASL" .25;letter-spacing:-.014em;max-width:12.5em}
.copy h1 span{display:block}
.copy .sub{margin-top:22px;font-size:19px;line-height:1.5;color:#E9E2D6;max-width:25em;text-wrap:pretty}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:32px;min-height:50px;padding:14px 26px;border-radius:12px;background:var(--bgrad);color:#1A0D02;font-weight:690;font-size:16.5px}
.cta .ar{width:18px;height:18px}

/* ---------- shared ---------- */
.ar{width:.5em;height:.5em;flex:none}
.sec{padding:84px 0;border-top:1px solid var(--ln)}
.sec .note{font-size:17px;color:var(--tx2);max-width:38em;margin-top:12px;text-wrap:pretty}
.sec .note span{display:block}
.sec.first{border-top:0;padding-top:48px}
.shd{margin-bottom:52px}
.blk{margin-bottom:36px}
.blk h3{font-size:34px;line-height:1.12;font-weight:640;font-variation-settings:"CASL" .2;letter-spacing:-.012em;text-wrap:balance}
.blk .note{margin-top:10px}
.ext{width:.8em;height:.8em;flex:none}

/* ---------- next talk ticket ---------- */
.ticket{display:grid;grid-template-columns:200px minmax(0,1fr) 180px 280px;background:var(--g2);border:1px solid var(--ln);border-radius:18px;overflow:hidden;position:relative}
.t-date{padding:30px 0 30px 32px;display:flex;flex-direction:column}
.t-date .day{font-size:116px;line-height:.86;font-weight:760;font-variation-settings:"CASL" .3;background:var(--mgrad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:12px 0 10px;letter-spacing:-.03em}
.t-date .mon{font-size:18px;font-weight:620}
.t-date .time{font-size:15px;color:var(--tx2);margin-top:auto;padding-top:18px}
.t-main{padding:30px 36px 32px 16px;min-width:0}
.t-main h3{font-size:clamp(34px,3.3vw,46px);overflow-wrap:break-word;line-height:1.02;font-weight:720;font-variation-settings:"CASL" .15;letter-spacing:-.018em;margin:12px 0 8px}
.t-main .say{font-size:16.5px;color:var(--tx2);margin-top:14px;max-width:34em;text-wrap:pretty}
.t-main .say q{color:var(--tx);quotes:"\201C" "\201D"}
.t-main .where{margin-top:20px;font-size:14px;color:var(--tx2);text-wrap:balance}
.t-fly{display:block;padding:22px 4px 22px 0;align-self:center}
.t-fly img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 6px 22px rgba(0,0,0,.45);transform:rotate(1.5deg);transition:transform .2s}
.t-fly:hover img{transform:rotate(0) scale(1.03)}
.t-stub{padding:30px 30px 26px 34px;border-left:2px dashed rgba(242,237,228,.2);position:relative;display:flex;flex-direction:column}
.t-stub::before,.t-stub::after{content:"";position:absolute;left:-14px;width:26px;height:26px;border-radius:50%;background:var(--g);border:1px solid var(--ln)}
.t-stub::before{top:-14px}.t-stub::after{bottom:-14px}
.t-stub .price{font-size:34px;font-weight:720;line-height:1.1;margin-top:10px}
.t-stub .price small{font-size:16px;font-weight:500;color:var(--tx2)}
.t-stub .free{font-size:15.5px;color:var(--tx2);margin-top:4px;margin-bottom:20px}
.btn{display:block;margin-top:auto;padding:14px 16px;border-radius:12px;background:var(--bgrad);color:#1A0D02;font-weight:680;font-size:15.5px;text-align:center}
.t-stub .host{font-size:12.5px;color:var(--tx3);margin-top:12px;line-height:1.4;text-wrap:pretty}


/* ---------- learn: seminars ---------- */
.sems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 56px}
.semc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:26px;align-items:start}
.semc .pic{position:relative;display:block;margin-bottom:26px}
.semc .pic img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:12px;box-shadow:0 0 0 1px rgba(242,237,228,.1)}
.semc .play{position:absolute;left:14px;bottom:-30px;width:48px;height:48px;border-radius:50%;background:var(--sc);display:grid;place-items:center;box-shadow:0 0 0 5px var(--g),0 6px 18px rgba(0,0,0,.45)}
.semc .play svg{width:19px;height:19px;margin-left:3px;color:#121110}
.semc .len{display:block;font-size:13px;color:var(--tx3);font-variation-settings:"MONO" 1}
.semc h4{font-size:22px;line-height:1.2;font-weight:650;font-variation-settings:"CASL" .2;margin-top:4px;text-wrap:balance}
.semc h4 a{color:var(--tx)}
.semc p{font-size:15px;line-height:1.5;color:var(--tx2);margin-top:8px;text-wrap:pretty}
.semc .watch{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-weight:620;font-size:15.5px;color:var(--sc)}

/* ---------- learn: apps ---------- */
.apps-wrap{margin-top:88px;padding-top:56px;border-top:1px solid var(--ln)}
.apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 32px}
.app img{width:64px;height:64px;border-radius:14.3px;display:block;box-shadow:0 0 0 1px rgba(242,237,228,.09)}
.app h4{font-size:19px;font-weight:650;margin-top:16px;line-height:1.2}
.app .st{display:inline-block;margin-top:8px;padding:2px 10px;border:1px solid var(--ln2);border-radius:999px;font-size:12px;line-height:1.5;color:var(--tx2);font-variation-settings:"MONO" 1}
.app .what{font-size:15px;color:var(--tx);line-height:1.45;margin-top:10px;text-wrap:pretty}
.app .for{font-size:14.5px;color:var(--tx2);line-height:1.45;margin-top:8px;text-wrap:pretty}
.app .for b{font-weight:620;color:var(--c)}
.app .dom{display:inline-block;margin-top:12px;font-size:12.5px;font-variation-settings:"MONO" 1;color:var(--c)}
.app .dom.none{color:var(--tx3)}

.help{margin-top:60px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px;padding:28px 32px;border-radius:16px;background:var(--g2);border:1px solid var(--ln2)}
.help .q{font-size:24px;line-height:1.2;font-weight:650;font-variation-settings:"CASL" .2;color:var(--tx)}
.help p{font-size:15.5px;color:var(--tx2);margin-top:6px;max-width:30em;text-wrap:pretty}
.help .addr{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:620;color:var(--m3);font-variation-settings:"MONO" 1}
.help .addr .ext{width:20px;height:20px}
.help:hover .addr{text-decoration:underline;text-underline-offset:4px}

/* ---------- train: the range ---------- */
.range{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}
.grp{position:relative}
.grp.b{--c:var(--body)}.grp.m{--c:var(--mind)}.grp.e{--c:var(--soul)}
/* Each strand's icon beside its heading (options item B3, pick 3A), in place of the colour bar and dots. */
.grp h3{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;font-size:27px;line-height:1.12;font-weight:640;color:var(--c);margin-bottom:10px}
.grp h3 span{text-wrap:balance}
.grp h3 .strand{display:block;width:44px;height:44px}
.grp.b h3{font-variation-settings:"CASL" 0}.grp.m h3{font-variation-settings:"CASL" .55}.grp.e h3{font-variation-settings:"CASL" 1}
.kind{font-size:14px;font-weight:600;color:var(--tx3);margin:26px 0 2px;font-variation-settings:"MONO" 1}
details.it{border-top:1px solid var(--ln)}
details.it summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 22px;column-gap:14px;align-items:start;padding:14px 0 15px}
details.it summary::-webkit-details-marker{display:none}
details.it summary h4{font-size:17px;font-weight:620;line-height:1.3;text-wrap:balance}
details.it summary .meta{font-size:13px;color:var(--tx2);margin-top:5px;font-variation-settings:"MONO" 1;line-height:1.5;text-wrap:balance}
details.it summary .meta span{display:block;text-wrap:balance}
details.it summary .tg{width:22px;height:22px;margin-top:1px;color:var(--c);grid-column:2;grid-row:1}
details.it summary .tg .v{transition:opacity .15s}
details.it[open] summary .tg .v{opacity:0}
details.it summary:hover h4{color:var(--c)}
.it .bd{padding:0 0 20px;font-size:15px;line-height:1.5;color:var(--tx2)}
.it .bd p{text-wrap:pretty}
.it .bd p+p{margin-top:8px}
/* One frame for every training picture (W1 revisions A3): flyers, slides and covers show whole, on a dark mat. */
.fr{margin:0;padding:8px;background:var(--g2);border:1px solid var(--ln);border-radius:10px;display:flex;justify-content:center;align-items:center}
.fr img{display:block;max-width:100%;width:auto;height:auto;max-height:340px;border-radius:4px}
.it .bd .fr{margin-bottom:14px}
.course-head.has-cover{display:grid;grid-template-columns:minmax(0,1fr) 260px;column-gap:56px;align-items:center}
.fr.cover img{max-height:none}
.it .bd .slides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:-6px 0 14px}
.it .bd .slides .fr{margin:0;padding:4px;border-radius:8px}
.it .bd .slides .fr img{max-height:none;border-radius:3px}
.it .bd .when{display:block;margin-top:10px;font-size:13px;color:var(--tx3);font-variation-settings:"MONO" 1}
.it .bd .lec{margin-top:10px}
.it .bd .lec li{padding:7px 0;border-top:1px solid var(--ln);color:var(--tx)}
.it .bd .lec li small{display:block;font-size:13.5px;color:var(--tx2);margin-top:2px}
.it .bd .lec a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--c);margin-top:3px}
.tbc{color:var(--m3);font-variation-settings:"MONO" 1;font-size:.86em}
.range-foot{margin-top:48px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;font-size:15.5px;color:var(--tx2)}
.range-foot p{max-width:40em;text-wrap:pretty}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--tx)}
.more .ar{width:15px;height:15px;color:var(--m3)}

/* ---------- institute and about ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:start}
.split h3{font-size:34px;line-height:1.12;font-weight:640;font-variation-settings:"CASL" .2;letter-spacing:-.012em}
.split p.lead{font-size:17.5px;color:var(--tx2);max-width:30em;text-wrap:pretty}
.split p.lead + p.lead{margin-top:14px}
.split h2.h3{font-size:34px;line-height:1.12;font-weight:640;font-variation-settings:"CASL" .2;letter-spacing:-.012em;text-wrap:balance}
.split .strap{margin-top:12px}
.prose ul.creds{list-style:none;padding-left:0}
.creds li{padding:12px 0;border-top:1px solid var(--ln);color:var(--tx)}
.creds li small{display:block;font-size:14.5px;color:var(--tx2);margin-top:2px;text-wrap:pretty}
.cred-logos{display:flex;flex-wrap:wrap;align-items:center;gap:28px 40px;margin:28px 0 0;padding-top:24px;border-top:1px solid var(--ln)}
.cred-logos img{height:96px;width:auto;display:block}
.split .links{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px 32px}
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
.level{position:relative}
.level .glyph{display:block;width:48px;height:48px;margin-bottom:8px}
.level h4{font-size:22px;font-weight:660;color:var(--tx);font-variation-settings:"CASL" .2}
.level p{font-size:15px;color:var(--tx2);margin-top:6px;line-height:1.45;text-wrap:pretty}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--ln)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:28px;padding-bottom:36px;font-size:14px;color:var(--tx3)}
.foot .wrap span:first-child{margin-right:auto}

/* ---------- narrower ---------- */
/* The ticket keeps four columns only where the title fits beside the flyer and the stub (W1 revisions A1):
   below 1280 the flyer and the stub move to a second row, flyer under the date. */
@media (max-width:1279px){
  .ticket{grid-template-columns:170px minmax(0,1fr)}
  .t-main h3{font-size:clamp(32px,4.4vw,46px)}
  .t-fly{grid-column:1;padding:4px 18px 26px 32px;align-self:start}
  .t-stub{grid-column:2;border-left:0;border-top:2px dashed rgba(242,237,228,.2);padding:24px 28px 26px}
  .t-stub::before{left:-14px;top:-14px}.t-stub::after{left:auto;right:-14px;top:-14px;bottom:auto}
}
@media (max-width:1100px){
  .apps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sems{grid-template-columns:minmax(0,1fr);max-width:760px}
}
@media (max-width:900px){
  .range{column-gap:28px}
  .btn{margin-top:18px}
  .apps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .help .addr{margin-left:0}
}
@media (max-width:760px){
  :root{--gut:16px}
  .ol{font-size:clamp(64px,19vw,96px);-webkit-text-stroke-width:1.75px}
  .ol-s{font-size:40px;-webkit-text-stroke-width:1.25px}
  .hero{height:auto;min-height:600px;justify-content:flex-end}
  .hero > img{object-position:38% 50%}
  .hero::after{background:linear-gradient(180deg,rgba(18,17,16,.72) 0%,rgba(18,17,16,0) 24%,rgba(18,17,16,.35) 40%,rgba(18,17,16,.9) 64%,#121110 100%)}
  .bar .wrap{flex-wrap:wrap;gap:12px;padding-top:16px;padding-bottom:16px}
  .brand svg{width:36px;height:36px}.brand .wm{font-size:22px}
  .bar nav{margin-left:0;width:100%;gap:8px;font-size:14px;justify-content:space-between}
  .bar nav .sup{padding-left:10px}
  .copy{padding-top:200px;padding-bottom:36px}
  .copy h1{font-size:33px;line-height:1.1}
  .copy .sub{font-size:17px;margin-top:16px}
  .cta{margin-top:24px;width:100%;justify-content:center}
  .sec{padding:52px 0}
  .sec.first{padding-top:16px}
  .sec .note{font-size:16px}
  .shd{margin-bottom:34px}
  .blk h3,.split h3,.split h2.h3{font-size:27px}
  .ticket{grid-template-columns:minmax(0,1fr)}
  .t-date{padding:22px 20px 0;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px}
  .t-date .lab{width:100%}
  .t-date .day{font-size:64px;margin:6px 0 0}
  .t-date .time{margin-top:0;padding-top:0;width:100%}
  .t-main{padding:18px 20px 24px}
  .t-main h3{font-size:clamp(26px,8vw,30px)}
  .t-fly{grid-column:1;padding:0 20px 8px;max-width:300px;justify-self:center}
  .t-stub{grid-column:1;padding:24px 20px 22px}
  .sems{row-gap:44px}
  .semc{grid-template-columns:minmax(0,1fr)}
  .semc .pic img{max-width:420px}
  .semc .pic{margin-bottom:34px}
  .semc .play{left:14px}
  .apps-wrap{margin-top:60px;padding-top:44px}
  .apps{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .app{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px}
  .app img{width:52px;height:52px;border-radius:11.6px;grid-row:span 6}
  .app h4{margin-top:2px;font-size:18px}
  .app .st{justify-self:start;margin-top:6px}
  .app .what{margin-top:6px}
  .app .dom{justify-self:start;margin-top:8px}
  .help{padding:22px 20px;margin-top:44px}
  .help .q{font-size:21px}
  .help .addr{font-size:18px}
  .range{grid-template-columns:minmax(0,1fr)}
  .grp{margin-bottom:40px}
  .grp h3{font-size:24px;grid-template-columns:36px minmax(0,1fr);column-gap:12px}
  .grp h3 .strand{width:36px;height:36px}
  .split{grid-template-columns:1fr;row-gap:28px}
  .levels{grid-template-columns:1fr;row-gap:22px}
  .foot .wrap{padding-top:22px}
  .foot .wrap span:first-child{flex-basis:100%}
}

/* ---------- additions for the full site (not in the mockup) ---------- */
.skip{position:absolute;left:-9999px;top:8px;z-index:10;padding:10px 14px;border-radius:8px;background:var(--g2);color:var(--tx)}
.skip:focus{left:16px}
.preview-note{background:var(--m1);color:#fff;text-align:center;font-size:14px;padding:6px 16px}
.bar.static{position:relative!important;border-bottom:1px solid var(--ln)}
.bar nav a[aria-current="page"]{color:var(--m3)}
.split.end{align-items:end}
.lead.gap{margin-top:14px}
.phd{padding:56px 0 36px}
.phd h1{font-size:clamp(30px,3.6vw,46px);line-height:1.1;font-weight:660;font-variation-settings:"CASL" .25;letter-spacing:-.012em;margin-top:18px;text-wrap:balance}
.phd h1.ol{margin-top:0;font-variation-settings:normal}
.phd .note{font-size:17px;color:var(--tx2);max-width:38em;margin-top:12px;text-wrap:pretty}
.phd .note span{display:block}
.prose{max-width:40em}
.prose p,.prose li{font-size:17px;line-height:1.6;color:var(--tx2);text-wrap:pretty}
.prose p+p,.prose ul+p,.prose p+ul{margin-top:14px}
.prose h2{font-size:26px;line-height:1.2;font-weight:640;font-variation-settings:"CASL" .2;color:var(--tx);margin:40px 0 12px;text-wrap:balance}
.prose h3{font-size:20px;font-weight:640;color:var(--tx);margin:28px 0 8px;text-wrap:balance}
.prose ul{list-style:disc;padding-left:1.2em}
.prose li+li{margin-top:6px}
.prose a{text-decoration:underline;text-underline-offset:3px;color:var(--tx)}
.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 24px;font-size:16px;margin:4px 0 8px}
.facts dt{color:var(--tx3);font-variation-settings:"MONO" 1;font-size:13px;padding-top:3px}
.facts dd{margin:0;color:var(--tx)}
.prose + .facts,.get + .facts{margin-top:24px}
.strap{display:block;margin-top:10px;font-size:15px;color:var(--m3);font-variation-settings:"MONO" 1}
.it .bd .more{margin-top:12px}
.history li{display:grid;grid-template-columns:170px minmax(0,1fr);column-gap:24px;padding:12px 0;border-top:1px solid var(--ln)}
.history .when{font-size:13px;color:var(--tx3);font-variation-settings:"MONO" 1;padding-top:3px}
.history .what{font-size:16px;color:var(--tx);text-wrap:pretty}
.history .what small{display:block;font-size:14.5px;color:var(--tx2);margin-top:2px;text-wrap:pretty}
.members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;margin-top:8px}
.member{padding-top:16px;border-top:3px solid var(--m2)}
.member .lvl{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--tx);font-variation-settings:"MONO" 1;margin:0 0 6px}
.member .lvl .glyph{width:24px;height:24px;flex:none}
.member h3{font-size:21px;font-weight:650}
.member .acc{margin-top:8px}
.member .acc li{font-size:14px;color:var(--tx2);padding-left:14px;position:relative}
.member .acc li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--m2)}
.member p{font-size:15px;color:var(--tx2);margin-top:4px}
.member a{color:var(--m3);font-variation-settings:"MONO" 1;font-size:14px}
.app-head{display:flex;gap:22px;align-items:center}
.app-head img{width:96px;height:96px;border-radius:21.5px;box-shadow:0 0 0 1px rgba(242,237,228,.09)}
.app-head .st{display:inline-block;margin-top:8px;padding:2px 10px;border:1px solid var(--ln2);border-radius:999px;font-size:12px;color:var(--tx2);font-variation-settings:"MONO" 1}
.get{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.get .btn{margin-top:0;display:inline-block;min-width:220px}
@media (max-width:760px){
  .phd{padding:32px 0 24px}
  .history li{grid-template-columns:1fr;row-gap:4px}
  .members{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr;gap:2px}
  .facts dd{margin-bottom:10px}
  .app-head img{width:72px;height:72px;border-radius:16px}
}
/* The narrowest phones (320 wide): the menu and the support address fit without sideways scrolling. */
@media (max-width:400px){
  .bar nav{font-size:13px;gap:4px}
  .bar nav .sup{padding-left:6px}
  .help .addr{font-size:16px}
}
@media (max-width:760px){
  .course-head.has-cover{grid-template-columns:minmax(0,1fr)}
  .course-head .fr.cover{max-width:220px;margin-bottom:24px}
}

/* ---------- home page: a short taste of each section (W1 revisions A5) ---------- */
.taste-learn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;row-gap:40px;align-items:start}
.taste-learn .more{margin-top:20px}
.sem-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sem-strip img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 0 0 1px rgba(242,237,228,.1)}
.app-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px}
.app-strip a{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:14px;line-height:1.3;color:var(--tx2)}
.app-strip img{width:52px;height:52px;border-radius:11.6px;box-shadow:0 0 0 1px rgba(242,237,228,.09)}
.app-strip a:hover span{color:var(--tx)}
.samples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.sample .fr{aspect-ratio:4/3}
.sample .fr img{max-height:100%}
.sample h4{font-size:18px;line-height:1.25;font-weight:640;margin-top:14px;text-wrap:balance}
.sample p{font-size:13.5px;color:var(--tx2);margin-top:4px;font-variation-settings:"MONO" 1;text-wrap:balance}
.sample:hover h4{color:var(--m3)}
@media (max-width:1100px){
  .samples{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .taste-learn{grid-template-columns:minmax(0,1fr)}
  .samples{gap:28px 16px}
  .sample h4{font-size:16px}
  .app-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 10px}
  .app-strip a{font-size:12.5px}
}

/* ---------- section colours (options item B2, pick 2A: solid outline and gradient rule) ---------- */
/* A section's class sets the outline colour of its large key words (.ol and .ol-s read --olc) and the two
   ends of the rule under its heading. About keeps the neutral outline. */
.s-learn{--olc:var(--learn);--sa:var(--learn-a);--sb:var(--learn-b)}
.s-train{--olc:var(--train);--sa:var(--train-a);--sb:var(--train-b)}
.s-inst{--olc:var(--inst);--sa:var(--inst-a);--sb:var(--inst-b)}
.srule::after{content:"";display:block;height:4px;border-radius:4px;margin-top:14px;background:linear-gradient(90deg,var(--sa,var(--m2)),var(--sb,var(--m3)))}

/* ---------- membership glyphs (options item B4, the final set) ---------- */
/* On the home page's Institute section: the three glyphs in a row, from Trainee to Supervisor. */
.glyphs{display:flex;gap:20px;margin-top:24px}
.glyphs li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.glyphs .glyph{display:block;width:48px;height:48px}
/* The level's name under its glyph: the small mono style of the directory's level line, in the cream text colour. */
.glyphs .gname{font-size:13.5px;line-height:1.3;font-weight:600;color:var(--tx);font-variation-settings:"MONO" 1;white-space:nowrap}
/* On a phone the levels stack, so each glyph stands beside its level's name and description. */
@media (max-width:760px){
  .level{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;align-items:center}
  .level .glyph{grid-row:span 2;align-self:start;margin:0}
}