/* The Mathologists website, brand v3 (Forest and Deep, one mint family). Shared by every rebuilt page, one page at a time.
   Values come from TM_marketing/brand/tokens/brand.css (v3.0); the look follows join.themathologists.com.au.
   Change a token in the brand repo first, then here. */

@font-face { font-family:"TM Display"; src:url("/assets/brand/tm-display-700i.woff2") format("woff2"); font-weight:700; font-style:italic; font-display:swap; }

:root {
  --tm-deep:#02271E; --tm-forest:#084F3C; --tm-paper:#FBFAF6; --tm-ink:#101613;
  --tm-mint:#86DCA9;         /* emphasised words on deep only; never text on paper */
  --tm-pale-mint:#D4EFDF;    /* buttons and kickers on deep; tints on paper */
  --tm-saffron:#F29E1F; --tm-highlight:rgba(242,158,31,.30);
  --tm-muted:#56605A; --white:#FFFFFF;
  --tm-button-on-deep-hover:#C2E8D2; --tm-button-on-paper-hover:#063F30;
  --body-ink:rgba(16,22,19,.80);
  --body-dark:rgba(251,250,246,.86); --quiet-dark:rgba(251,250,246,.72);
  --line:rgba(16,22,19,.12); --card-line:#DCE4DE; --line-dark:rgba(251,250,246,.16);
  --tm-depth-band:linear-gradient(118deg, #084F3C 0%, #05392C 62%, #02271E 100%);
  --tm-diagonal-web:repeating-linear-gradient(135deg, rgba(251,250,246,.075) 0, rgba(251,250,246,.075) 1px, rgba(251,250,246,0) 1.7px, rgba(251,250,246,0) 10.69px);
  --tm-glow:0 0 0 1.5px rgba(242,158,31,.95), 0 0 0 5px rgba(242,158,31,.22), 0 0 22px 2px rgba(242,158,31,.45);
  --display:"TM Display", "Playfair Display", Georgia, "Times New Roman", serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* course colours: a dot or a short strip that names a course, never a surface */
  --c-y10:#035F8C; --c-std:#A3562A; --c-adv:#277220; --c-ext1:#73348E; --c-ext2:#B5333E;
  /* on deep or forest the course shades nearly vanish, so they use these lighter tints, as dots only */
  --c-y10-on-deep:#40A2D4; --c-std-on-deep:#CD7C4D; --c-adv-on-deep:#5DAA4F; --c-ext1-on-deep:#A86BC2; --c-ext2-on-deep:#E0686D;
  --r-card:16px; --r-big:24px;
  --h1:clamp(40px, calc(3.4vw + 22px), 68px);
  --h2:clamp(30px, calc(1.5vw + 22px), 44px);
}

/* One committed look: the brand doesn't change with the visitor's light or dark setting. */
html { background:var(--tm-paper); scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; animation:none !important; } }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; overflow-x:clip; background:var(--tm-paper); color:var(--tm-ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; font-variant-numeric:lining-nums; }
@media (min-width: 900px) { body { font-size:18px; } }
img { max-width:100%; display:block; }
a { color:inherit; }
svg.logo, svg.icon { fill:currentColor; display:block; }
.wrap { max-width:1140px; margin:0 auto; padding-inline:20px; }
@media (min-width: 900px) { .wrap { padding-inline:32px; } }
.vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Headlines are Inter SemiBold; only the emphasised words are TM Display Bold Italic, at 1.1 em. */
h1, h2, h3 { font-family:var(--body); font-weight:600; text-wrap:balance; margin:0; }
h1 { font-size:var(--h1); line-height:1.05; letter-spacing:-.03em; }
h2 { font-size:var(--h2); line-height:1.05; letter-spacing:-.03em; }
h3 { font-size:20px; line-height:1.3; letter-spacing:-.015em; }
h1 em, h2 em { font-family:var(--display); font-weight:700; font-style:italic; font-size:1.1em; letter-spacing:-.01em; line-height:1; }
h2 em { color:var(--tm-forest); }
p { margin:0; text-wrap:pretty; }
.kicker { display:block; font:600 12px/1.4 var(--body); letter-spacing:.15em; text-transform:uppercase; color:var(--tm-forest); }
@media (min-width: 900px) { .kicker { font-size:13px; } }

/* Deep surfaces: the hero and one card per page. The tonal band with the diagonal lines across all of it. */
.on-dark { color:var(--tm-paper); }
.on-dark .kicker { color:var(--tm-pale-mint); }
.on-dark h1, .on-dark h2 { color:var(--tm-paper); }
.on-dark h1 em, .on-dark h2 em { color:var(--tm-mint); }
.ground { position:absolute; background:var(--tm-depth-band); pointer-events:none; }
.ground::after { content:""; position:absolute; inset:0; background-image:var(--tm-diagonal-web); }

/* Buttons: solid and flat pills. Forest with white text on paper; pale mint with forest text on deep. */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 28px; border-radius:999px; border:0; font:600 16px/1.2 var(--body); text-decoration:none; cursor:pointer; transition:box-shadow .18s ease, background-color .18s ease; -webkit-tap-highlight-color:transparent; }
.btn:hover, .btn:focus-visible { box-shadow:var(--tm-glow); outline:none; }
.btn-forest { background:var(--tm-forest); color:var(--white); }
.btn-pale { background:var(--tm-pale-mint); color:var(--tm-forest); }
.btn-outline-dark { background:transparent; color:var(--tm-paper); box-shadow:inset 0 0 0 1.5px rgba(251,250,246,.6); }
.btn-outline-dark:hover, .btn-outline-dark:focus-visible { box-shadow:inset 0 0 0 1.5px rgba(251,250,246,.6), var(--tm-glow); }
.arr { font-family:var(--display); font-weight:700; font-size:18px; line-height:1; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; background:var(--tm-forest); }
/* course dots: the one place a course colour appears, next to the course's name */
.dot.y10 { background:var(--c-y10); } .dot.std { background:var(--c-std); } .dot.adv { background:var(--c-adv); } .dot.ext1 { background:var(--c-ext1); } .dot.ext2 { background:var(--c-ext2); }

/* The header and footer are shared by every page, old and rebuilt: tm-chrome.css. */

/* ---------- the one deep card: the post frame, with the booklet footer on its bottom line ---------- */
.offer-card { position:relative; border-radius:var(--r-big); overflow:hidden;
  --fi:12px; --pad:16px; --ih:26px; --frame:rgba(251,250,246,.38);
  --hc:calc(var(--ih) * 130 / 677); --hrad:calc(var(--ih) * 130 / 677); --mm:calc(var(--ih) * 473 / 677); --clear:calc(var(--ih) * 16 / 60);
  padding:calc(var(--fi) + 30px) calc(var(--fi) + var(--pad)) calc(var(--fi) + var(--ih) + 30px); }
.offer-card .ground { inset:0; }
.offer-card .ground::after { background-image:repeating-linear-gradient(135deg, rgba(251,250,246,.035) 0, rgba(251,250,246,.035) 1px, rgba(251,250,246,0) 1.7px, rgba(251,250,246,0) 10.69px); }
.oframe { --gap:calc(var(--hrad) + var(--clear)); position:absolute; left:var(--fi); right:var(--fi); top:var(--fi); bottom:calc(var(--fi) + var(--ih) - var(--hc) - .75px);
  border:1.5px solid var(--frame); border-radius:12px; pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) top / 100% calc(100% - 4px) no-repeat, linear-gradient(90deg, #000 calc(50% - var(--gap)), transparent calc(50% - var(--gap)), transparent calc(50% + var(--gap)), #000 calc(50% + var(--gap))) bottom / 100% 4px no-repeat;
          mask:linear-gradient(#000 0 0) top / 100% calc(100% - 4px) no-repeat, linear-gradient(90deg, #000 calc(50% - var(--gap)), transparent calc(50% - var(--gap)), transparent calc(50% + var(--gap)), #000 calc(50% + var(--gap))) bottom / 100% 4px no-repeat; }
.ofoot { position:absolute; left:var(--fi); right:var(--fi); bottom:var(--fi); height:var(--ih); color:var(--tm-paper); pointer-events:none; }
.ofoot svg { position:absolute; left:50%; top:0; height:var(--ih); width:auto; aspect-ratio:400/677; transform:translateX(-50%); fill:currentColor; }
.ofoot .fl, .ofoot .fr { display:none; position:absolute; top:calc(var(--mm) - 5px); font:600 10px/1 var(--body); letter-spacing:.15em; text-transform:uppercase; color:var(--quiet-dark); white-space:nowrap; }
.ofoot .fl { left:var(--pad); } .ofoot .fr { right:calc(var(--pad) - .15em); }
@media (min-width: 600px) {
  .offer-card { --fi:18px; --pad:30px; --ih:32px; padding:calc(var(--fi) + 40px) calc(var(--fi) + var(--pad)) calc(var(--fi) + var(--ih) + 40px); }
  .ofoot .fl, .ofoot .fr { display:block; }
}
@media (min-width: 960px) {
  .offer-card { --fi:24px; --pad:40px; --ih:36px; padding:calc(var(--fi) + 48px) calc(var(--fi) + var(--pad)) calc(var(--fi) + var(--ih) + 52px); }
  .ofoot .fl, .ofoot .fr { top:calc(var(--mm) - 5.5px); font-size:11px; }
}

/* ---------- phones: a paper booking bar along the bottom once the hero has scrolled away ---------- */
.sticky { position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background:rgba(251,250,246,.97); box-shadow:0 -1px 0 var(--line), 0 -10px 30px rgba(2,39,30,.08); transform:translateY(calc(100% + 48px)); transition:transform .25s ease; }
.sticky.on { transform:none; }
.sticky .btn { width:100%; }   /* the brand's 54 px, like every big button */
@media (min-width: 960px) { .sticky { display:none; } }