/*!
Theme Name: TOGI
Theme URI: https://preview-4addeae2.sitereboots.com/
Author: Site Reboots
Description: Block theme for TOGI — creator hub, clipper programme and archive.
Version: 1.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: togi
*/

@import url("assets/mechanics.css");

/* ===========================================================================
   TOGI — the skin.

   mechanics.css (imported above) owns behaviour: sticky header, burger, mobile
   nav, action bar, back-to-top, tap targets. Nothing here re-implements it.

   The idea, so the next person changing it knows what they are protecting:

   TOGI is not one channel. He is one person split across Snapchat, Instagram,
   Kick, YouTube and TikTok, and the job of this site is to send you to
   whichever one you want and to recruit the people who cut his videos up. So
   the site is built as a SWITCHBOARD: the hero is not a photograph, it is five
   channel tiles you can route yourself through.

   The shape language is THE CLIP. His whole economy is clipping — a clipper
   takes a long video, cuts a slice out of it and posts it, and the one page
   their old site built properly is the one that hires those people. So every
   panel, tile, button and image on this site has one corner cut off at the
   same angle the TOGI wordmark leans at. Nothing is rounded. Nothing is
   shadowed. Structure comes from the cut and from 1px rules.

   Section labels are TIMECODES, because everything here is video.

   Two ways of cutting a corner, and they are not interchangeable:
     .tg-cut   clip-path. Exact, but it clips the focus ring too, so it is
               only ever used on NON-focusable things (media, solid panels).
     .tg-nick  a corner triangle painted in the band colour with a gradient.
               Survives a focus ring, so every button and link tile uses it,
               and it needs --tg-nick set to whatever it is sitting on.
   =========================================================================== */

:root{
  /* ---- the four variables mechanics.css reads (the contract) ---- */
  --tg-focus:#BEE34F;
  --tg-nav-bg:#0C120D;       /* must be opaque */
  --tg-burger:#ECEFE6;
  --tg-header-h:72px;

  /* ---- palette (mirrors theme.json) ---- */
  --ink:#0C120D;
  --panel:#151E16;
  --band:#1D2A1E;
  --paper:#ECEFE6;
  --paper-2:#DCE0D2;
  --body:#C6D0C1;
  --body-ink:#2E3A2F;
  --muted:#9FAE9C;
  --gold:#E0A93C;
  --volt:#BEE34F;
  --leaf:#47611F;
  --rule:#2B3A2C;
  --rule-light:#C6CDBB;

  /* ---- the cut ---- */
  --cut:15px;                /* clip-path corner */
  --nick:11px;               /* gradient corner; ~15px along each edge */
  --tg-nick:var(--ink);      /* what a nicked thing is sitting on */

  --gut:clamp(1.25rem,4vw,2.25rem);
}

html{background:var(--ink)}
body{background:var(--ink);color:var(--body)}

/* --------------------------------------------------------------- the cut */
.tg-cut{
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.tg-cut--bl{
  clip-path:polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
/* The focus-ring-safe version. Paints a triangle of --tg-nick over the
   top-right corner, so it only looks cut against the right background —
   every band below sets --tg-nick for the things inside it. */
.tg-nick{
  background-image:linear-gradient(225deg, var(--tg-nick) var(--nick), transparent var(--nick));
}

/* ------------------------------------------------------------------ bands */
.tg-band{padding-block:clamp(3.25rem,7vw,5.75rem);padding-inline:var(--gut)}
.tg-band--ink{background:var(--ink);--tg-nick:var(--ink)}
.tg-band--panel{background:var(--panel);--tg-nick:var(--panel)}
.tg-band--band{background:var(--band);--tg-nick:var(--band)}
.tg-band--paper{background:var(--paper);--tg-nick:var(--paper)}
.tg-band--tight{padding-block:clamp(2.25rem,4.5vw,3.25rem)}
.tg-band--flush{padding-inline:0}

/* mechanics.css pins every direct child of a band to the content column.
   A row that genuinely runs edge to edge has to opt out, and 0,2,0 beats the
   0,1,0 of `.tg-band > *` so the !important there does not win. */
.tg-band > .tg-flush{margin-left:0 !important;margin-right:0 !important;width:100%}
.tg-band > .tg-wide{margin-left:auto !important;margin-right:auto !important;
  width:100%;max-width:88rem}

/* ---------------------------------------------------------------------------
   LIGHT SURFACES — read this before adding one.

   This site is dark by default, so it is the LIGHT surfaces that are the
   exception and they are not all bands. Every light surface is listed here,
   together, on purpose. ADD NEW ONES TO ALL OF THESE GROUPS.

     .tg-band--paper   the clipper band and the inner pages' prose
     .tg-card          a paper card sitting inside a paper band
     .tg-pagehead--lt  (none at present; keep the hook)
   --------------------------------------------------------------------------- */
.tg-band--paper,.tg-card{color:var(--body-ink)}
.tg-band--paper h1,.tg-band--paper h2,.tg-band--paper h3,.tg-band--paper h4,
.tg-card h1,.tg-card h2,.tg-card h3,.tg-card h4{color:var(--ink)}
.tg-band--paper p,.tg-band--paper li,.tg-card p,.tg-card li{color:var(--body-ink)}
.tg-band--paper a:not(.tg-btn),.tg-card a:not(.tg-btn){color:var(--leaf)}
.tg-band--paper a:not(.tg-btn):hover,.tg-card a:not(.tg-btn):hover{color:var(--ink)}
.tg-band--paper .tg-eyebrow,.tg-card .tg-eyebrow{color:var(--leaf)}
.tg-band--paper .tg-eyebrow i,.tg-card .tg-eyebrow i{background:var(--leaf)}
.tg-band--paper .tg-muted,.tg-card .tg-muted{color:#5A6659}
.tg-band--paper hr,.tg-card hr{border-color:var(--rule-light)}

/* --------------------------------------------------------------- type ---- */
.tg-band h2{margin:0 0 .35em}
.tg-band h3{margin:0 0 .4em}
.tg-lead{font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:1.5;max-width:46ch;color:var(--paper)}
.tg-band--paper .tg-lead{color:var(--ink)}
.tg-muted{color:var(--muted)}

/* The eyebrow is a TIMECODE, not a letterspaced label. Everything on this site
   is a video, so every section is marked with the minute it would start at. */
.tg-eyebrow{
  display:flex;align-items:center;gap:.6rem;
  margin:0 0 1.1rem;
  font-family:"Albert Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:.82rem;font-weight:700;letter-spacing:.055em;
  text-transform:uppercase;color:var(--volt);
  font-variant-numeric:tabular-nums;
}
.tg-eyebrow i{display:block;width:16px;height:3px;background:var(--volt);flex:0 0 auto}
.tg-eyebrow b{font-weight:800;font-variant-numeric:tabular-nums}

.tg-num{font-variant-numeric:tabular-nums}

/* A display figure — $100,000, 1M, 5M, $20K. These are the whole argument on
   the clipper page, so they are set in the display face at headline size. */
.tg-fig{
  font-family:"Big Shoulders Display","Arial Narrow",ui-sans-serif,sans-serif;
  font-weight:800;line-height:.86;letter-spacing:.01em;
  font-size:clamp(2.6rem,5.5vw,4.2rem);color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.tg-fig small{display:block;font-family:"Albert Sans",ui-sans-serif,sans-serif;
  font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-top:.55rem;line-height:1.3}
.tg-band--paper .tg-fig{color:var(--ink)}
.tg-band--paper .tg-fig small{color:#5A6659}

/* ------------------------------------------------------------- buttons --- */
.tg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:54px;padding:.55rem 1.65rem;
  font-family:"Big Shoulders Display","Arial Narrow",ui-sans-serif,sans-serif;
  font-size:1.3rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  text-decoration:none;border:0;cursor:pointer;
  background-color:var(--gold);color:var(--ink);
  background-image:linear-gradient(225deg, var(--tg-nick) var(--nick), transparent var(--nick));
  transition:background-color .14s ease,color .14s ease;
}
.tg-btn:hover{background-color:var(--volt);color:var(--ink)}
.tg-btn--ghost{
  background-color:transparent;color:var(--paper);
  box-shadow:inset 0 0 0 1.5px var(--rule);
}
.tg-btn--ghost:hover{background-color:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--paper)}
.tg-band--paper .tg-btn--ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px #B7C0AE}
.tg-band--paper .tg-btn--ghost:hover{background-color:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.tg-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* The core blocks' own button, so an editor-inserted button matches. */
.wp-block-button__link{
  border-radius:0 !important;min-height:54px;display:inline-flex;align-items:center;
  padding:.55rem 1.65rem;letter-spacing:.03em;text-transform:uppercase;font-size:1.3rem;
}

/* -------------------------------------------------------------- header --- */
.tg-header{background:var(--ink);border-bottom:1px solid var(--rule);--tg-nick:var(--ink)}
.tg-headbar{max-width:88rem;margin:0 auto;padding:.75rem var(--gut);min-height:72px}
.tg-brand img{display:block;height:24px;width:auto}
.tg-nav__link{
  font-family:"Big Shoulders Display","Arial Narrow",ui-sans-serif,sans-serif;
  font-size:1.26rem;font-weight:700;letter-spacing:.045em;text-transform:uppercase;
  color:var(--paper);text-decoration:none;
}
.tg-nav__link:hover,.tg-nav__link[aria-current="page"]{color:var(--volt)}
.tg-header .tg-btn{min-height:46px;font-size:1.14rem;padding:.4rem 1.15rem}

/* Desktop bar only. An unscoped display/flex rule here would override the
   mobile panel in mechanics.css, because a media query adds no specificity
   and this file loads second. */
@media (min-width:52.0625rem){
  .tg-nav__inner{display:flex;align-items:center;gap:1.9rem}
}
@media (max-width:52rem){
  /* At 390px the desktop-sized call to action takes two thirds of the bar. */
  .tg-header .tg-btn{min-height:42px;font-size:1rem;padding:.3rem .85rem}
  .tg-nav__inner{background:var(--ink)}
  .tg-header .tg-nav__link{font-size:1.9rem;border-bottom:1px solid var(--rule)}
  .tg-nav__foot .tg-btn{width:100%;margin-bottom:.6rem}
  .tg-nav__foot p{color:var(--muted);font-size:.95rem;margin:.9rem 0 0}
}

/* ---------------------------------------------------------------- hero --- */
/* Not a photograph under a gradient. The hero IS the switchboard: a headline
   and then the five channels as tiles you route yourself through. */
.tg-hero{
  background:var(--ink);--tg-nick:var(--ink);
  padding:clamp(2.75rem,6vw,4.75rem) var(--gut) 0;
  position:relative;overflow:hidden;
}
.tg-hero::before{
  content:"";position:absolute;inset:auto -10% -40% auto;width:60vw;height:60vw;
  background:radial-gradient(circle at 70% 30%, rgba(190,227,79,.085), transparent 62%);
  pointer-events:none;
}
.tg-hero__in{max-width:88rem;margin:0 auto;position:relative}
/* Above 68rem the headline leaves a large empty right half. The newest drop
   goes there: it fills the space with something a visitor actually wants and
   it keeps the hero from being a headline floating on black. */
.tg-hero__top{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:end}
@media (min-width:68rem){ .tg-hero__top{grid-template-columns:1.15fr .85fr} }

.tg-now{display:block;text-decoration:none;background-color:var(--panel);
  background-image:linear-gradient(225deg, var(--tg-nick) 16px, transparent 16px);
  padding:1.1rem 1.1rem 1.3rem}
.tg-now:hover{background-color:var(--band)}
.tg-now img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%)}
.tg-now__label{display:block;margin:1rem 0 .3rem;font-size:.78rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--volt)}
.tg-now__title{display:block;
  font-family:"Big Shoulders Display","Arial Narrow",ui-sans-serif,sans-serif;
  font-size:1.75rem;font-weight:800;line-height:1;letter-spacing:.015em;color:var(--paper)}
.tg-now:hover .tg-now__title{color:var(--volt)}
.tg-now__go{display:block;margin-top:.6rem;font-size:.86rem;color:var(--muted)}
.tg-hero h1{
  margin:0;font-size:clamp(3.4rem,11vw,7.6rem);line-height:.86;
  color:var(--paper);max-width:14ch;
}
.tg-hero h1 em{font-style:normal;color:var(--volt)}
.tg-hero__sub{max-width:44ch;margin:1.4rem 0 0;font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--body)}

/* the channel switchboard */
.tg-chans{
  display:grid;gap:1px;background:var(--rule);
  margin-top:clamp(2.25rem,4.5vw,3.25rem);
  border-top:1px solid var(--rule);
}
/* The tile has to be a shade off the hero ground, or the corner cut is
   painted in the tile's own colour and cannot be seen. */
.tg-chan{
  display:flex;flex-direction:column;gap:.45rem;
  padding:1.5rem 1.35rem 1.65rem;text-decoration:none;
  background-color:var(--panel);
  background-image:linear-gradient(225deg, var(--tg-nick) var(--nick), transparent var(--nick));
  transition:background-color .15s ease;
}
.tg-chan:hover{background-color:var(--band)}
/* A flex item in a column container stretches to the cross size by default,
   so width:auto made every 256x256 glyph a smear 26px tall and the full tile
   wide. align-self is what keeps the aspect ratio. */
.tg-chan img{height:28px;width:auto;align-self:flex-start;opacity:.92}
.tg-chan__name{
  font-family:"Big Shoulders Display","Arial Narrow",ui-sans-serif,sans-serif;
  font-size:1.7rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:var(--paper);line-height:1;margin-top:.7rem;
}
.tg-chan__handle{font-size:.88rem;font-weight:700;color:var(--volt);letter-spacing:.02em}
.tg-chan p{margin:.35rem 0 0;font-size:.95rem;line-height:1.45;color:var(--muted)}
.tg-chan__go{
  margin-top:auto;padding-top:1rem;font-size:.82rem;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--paper);
}
.tg-chan:hover .tg-chan__go{color:var(--volt)}
@media (min-width:46rem){ .tg-chans{grid-template-columns:repeat(2,1fr)} }
@media (min-width:64rem){ .tg-chans{grid-template-columns:repeat(4,1fr)} }

/* ------------------------------------------------------- video grid ------ */
.tg-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.9rem}
.tg-head h2{margin:0}
.tg-head p{margin:.4rem 0 0;max-width:50ch}

.tg-vids{display:grid;gap:clamp(1rem,2vw,1.6rem);list-style:none;margin:0;padding:0}
@media (min-width:40rem){ .tg-vids{grid-template-columns:repeat(2,1fr)} }
@media (min-width:62rem){ .tg-vids{grid-template-columns:repeat(3,1fr)} }
.tg-vids--wide{grid-template-columns:1fr}
@media (min-width:52rem){ .tg-vids--wide{grid-template-columns:repeat(2,1fr)} }

.tg-vid{margin:0}
.tg-vid a{display:block;text-decoration:none;color:inherit}
.tg-vid__shot{
  display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--panel);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.tg-vid__shot img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease,filter .35s ease;filter:saturate(.94)}
.tg-vid a:hover .tg-vid__shot img{transform:scale(1.035);filter:saturate(1.06)}
.tg-vid__tag{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:.3rem .7rem;background:var(--ink);color:var(--volt);
  font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.tg-vid h3{
  margin:.85rem 0 0;font-size:1.42rem;line-height:1.02;color:var(--paper);
  letter-spacing:.015em;
}
.tg-vid a:hover h3{color:var(--volt)}
.tg-vid p{margin:.35rem 0 0;font-size:.92rem;color:var(--muted)}

/* A deleted video has no destination, so it is not a link and must not look
   like one. Dim the still and say so. */
.tg-vid--gone .tg-vid__shot img{filter:grayscale(.72) brightness(.62)}
.tg-vid--gone h3{color:var(--body)}
.tg-vid--gone .tg-vid__tag{color:var(--muted)}

/* --------------------------------------------------------------- panels -- */
.tg-panel{
  background:var(--panel);padding:clamp(1.5rem,3vw,2.25rem);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.tg-panel h3{margin-top:0}
.tg-band--panel .tg-panel{background:var(--band)}
.tg-band--band  .tg-panel{background:var(--panel)}
.tg-card{
  background:var(--paper);padding:clamp(1.5rem,3vw,2.25rem);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

.tg-figs{display:grid;gap:1px;background:var(--rule);list-style:none;margin:2.25rem 0 0;padding:0}
.tg-figs li{background:var(--ink);padding:1.4rem 1.3rem}
.tg-band--panel .tg-figs li{background:var(--panel)}
.tg-band--band  .tg-figs li{background:var(--band)}
.tg-band--paper .tg-figs{background:var(--rule-light)}
.tg-band--paper .tg-figs li{background:var(--paper)}
@media (min-width:34rem){ .tg-figs{grid-template-columns:repeat(2,1fr)} }
@media (min-width:60rem){ .tg-figs{grid-template-columns:repeat(4,1fr)} }

/* ------------------------------------------------------- split sections -- */
.tg-split{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center}
@media (min-width:58rem){
  .tg-split{grid-template-columns:1.05fr .95fr}
  .tg-split--flip > *:first-child{order:2}
}
.tg-shot{
  display:block;width:100%;height:auto;
  clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}

/* ----------------------------------------------------------- the steps --- */
/* 1M views and 5M views. Their own page makes these the whole offer. */
.tg-steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1px;background:var(--rule-light)}
@media (min-width:48rem){ .tg-steps{grid-template-columns:repeat(2,1fr)} }
.tg-steps li{background:var(--paper);padding:1.6rem 1.4rem}
.tg-steps .tg-fig{color:var(--leaf)}
.tg-steps h3{margin:.6rem 0 .3rem}

/* ----------------------------------------------------------------- prose - */
.tg-prose{max-width:68ch}
.tg-prose h2{margin-top:2.6rem}
.tg-prose h3{margin-top:2rem;font-size:1.35rem}
.tg-prose > :first-child{margin-top:0}
.tg-prose ol,.tg-prose ul{padding-left:1.2rem}
.tg-prose li{margin-bottom:.5rem}
.tg-prose hr{border:0;border-top:1px solid var(--rule-light);margin:2.4rem 0}

/* Official Rules: numbered clauses, which is the whole document's structure. */
.tg-rules{counter-reset:clause;list-style:none;padding:0;margin:2rem 0 0}
.tg-rules > li{counter-increment:clause;padding-left:3.4rem;position:relative;margin-bottom:2rem}
.tg-rules > li::before{
  content:counter(clause,decimal-leading-zero);position:absolute;left:0;top:.1rem;
  font-family:"Big Shoulders Display","Arial Narrow",ui-sans-serif,sans-serif;
  font-weight:800;font-size:1.9rem;line-height:1;color:var(--leaf);
  font-variant-numeric:tabular-nums;
}
.tg-rules > li > h3{margin:0 0 .5rem}
.tg-rules p{margin:0 0 .7rem}

/* ------------------------------------------------------------- the form -- */
/* Class names come from 010-togi-enquiries.php, which renders the markup.
   Changing one here without changing it there silently unstyles the form. */
.tg-form{margin-top:2rem;max-width:42rem}
.tg-form h3{margin:0 0 .6rem}
.tg-form__intro{margin:0 0 1.9rem;max-width:52ch}
.tg-form form{display:grid;gap:1.1rem}
.tg-field-row{display:grid;gap:1.1rem;align-items:end}
@media (min-width:38rem){ .tg-field-row{grid-template-columns:1fr 1fr} }
.tg-field label{
  display:block;font-size:.84rem;font-weight:800;letter-spacing:.055em;
  text-transform:uppercase;margin-bottom:.45rem;color:var(--ink);
}
.tg-hint{display:block;font-size:.82rem;font-weight:500;letter-spacing:0;
  text-transform:none;color:#5A6659;margin-top:.2rem}
.tg-field input,.tg-field select,.tg-field textarea{
  width:100%;min-height:54px;padding:.8rem 1rem;
  font-family:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1.5px solid #B7C0AE;border-radius:0;
}
.tg-field textarea{min-height:140px;resize:vertical}
.tg-field input:focus,.tg-field select:focus,.tg-field textarea:focus{
  outline:3px solid var(--leaf);outline-offset:1px;border-color:var(--leaf)}
/* Off screen rather than display:none, so bots still fill it in. */
.tg-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tg-submit{
  justify-self:start;min-height:54px;padding:.55rem 1.9rem;border:0;cursor:pointer;
  font-family:"Big Shoulders Display","Arial Narrow",ui-sans-serif,sans-serif;
  font-size:1.3rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  background-color:var(--ink);color:var(--paper);
  background-image:linear-gradient(225deg, var(--tg-nick) var(--nick), transparent var(--nick));
}
.tg-submit:hover{background-color:var(--leaf)}
.tg-form__fine{font-size:.86rem;color:#5A6659;margin:0;max-width:48ch}
.tg-note{padding:1rem 1.2rem;margin:0 0 1.75rem;color:var(--ink)}
.tg-note--ok{background:#DCEABE;border-left:4px solid var(--leaf)}
.tg-note--err{background:#F5DCD4;border-left:4px solid #A3331A}
.tg-note a{color:var(--leaf)}

/* ------------------------------------------------------------ page head -- */
.tg-pagehead{
  background:var(--band);--tg-nick:var(--band);
  padding:clamp(2.5rem,5.5vw,4.25rem) var(--gut) clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--rule);
}
.tg-pagehead__in{max-width:88rem;margin:0 auto}
.tg-pagehead h1{margin:0;color:var(--paper);max-width:24ch}
.tg-pagehead p{margin:1.1rem 0 0;max-width:52ch;font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--body)}
.tg-crumbs{font-size:.86rem;color:var(--muted);margin:0 0 1rem}
.tg-crumbs a{color:var(--body)}

/* --------------------------------------------------------------- footer -- */
.tg-footer{background:var(--panel);--tg-nick:var(--panel);color:var(--body);
  border-top:1px solid var(--rule);padding:clamp(2.75rem,5vw,4rem) var(--gut) 0}
.tg-footer__in{max-width:88rem;margin:0 auto;display:grid;gap:2.25rem}
@media (min-width:52rem){ .tg-footer__in{grid-template-columns:1.35fr 1fr 1fr} }
.tg-footer img{display:block;height:22px;width:auto}
.tg-footer h2{font-size:1.3rem;color:var(--paper);margin:0 0 .9rem}
.tg-footer p{color:var(--muted);font-size:.95rem}
.tg-footer ul{list-style:none;margin:0;padding:0}
.tg-footer ul a{color:var(--body);text-decoration:none;font-size:.96rem}
.tg-footer ul a:hover{color:var(--volt)}
.tg-footer__bot{
  max-width:88rem;margin:2.5rem auto 0;padding:1.25rem 0 1.5rem;
  border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  font-size:.85rem;color:var(--muted);
}

/* ---------------------------------------------- action bar + back to top -- */
.tg-actionbar{padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom,0px));
  background:rgba(12,18,13,.96);border-top:1px solid var(--rule);--tg-nick:#0C120D}
.tg-ab{
  font-family:"Big Shoulders Display","Arial Narrow",ui-sans-serif,sans-serif;
  font-size:1.16rem;font-weight:800;letter-spacing:.035em;text-transform:uppercase;
  text-decoration:none;background-color:var(--gold);color:var(--ink);
  background-image:linear-gradient(225deg, var(--tg-nick) var(--nick), transparent var(--nick));
}
.tg-ab--alt{background-color:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule)}
.tg-top{
  width:46px;height:46px;border:0;cursor:pointer;
  background-color:var(--paper);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}
.tg-top:hover{background-color:var(--volt)}

/* --------------------------------------------------------------- misc ---- */
.tg-logos{display:flex;flex-wrap:wrap;align-items:center;gap:1.75rem;margin-top:1.75rem}
.tg-logos img{height:26px;width:auto;opacity:.78}

.tg-inline{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:1.4rem 0 0;padding:0}
.tg-inline li{
  padding:.4rem .8rem;font-size:.84rem;font-weight:700;letter-spacing:.03em;
  color:var(--body);box-shadow:inset 0 0 0 1px var(--rule);
}
.tg-band--paper .tg-inline li{color:var(--body-ink);box-shadow:inset 0 0 0 1px #B7C0AE}

/* A 16:9 still that is decoration rather than a video link. */
.tg-strip{
  display:block;width:100%;aspect-ratio:21/9;object-fit:cover;
  clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}

@media (max-width:52rem){
  .tg-hero{padding-top:2.25rem}
  .tg-head{display:block}
  .tg-head p{margin-top:.6rem}
}

/* ------------------------------------------------------ photo CTA band --- */
/* A dark band must never be the last thing before the dark footer: the two
   fuse into one slab and the heading reads as part of the footer. A page that
   should close dark closes with this instead, because the photograph makes it
   read as its own block. */
.tg-photo{
  position:relative;isolation:isolate;--tg-nick:#121A13;
  padding:clamp(3.5rem,8vw,6rem) var(--gut);
  background:#121A13;
}
.tg-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  max-width:none !important;margin:0 !important;
}
.tg-photo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg, rgba(12,18,13,.95) 0%, rgba(12,18,13,.86) 48%, rgba(12,18,13,.55) 100%);
}
.tg-photo__in{max-width:88rem;margin:0 auto}
.tg-photo h2{color:var(--paper);max-width:16ch}
.tg-photo p{max-width:46ch;color:var(--body)}