/* ===========================================================================
   jonnyelliott.com · the system layer
   ---------------------------------------------------------------------------
   Every page carries its own long stylesheet, built up over time. Rewriting
   sixteen of those by hand is how a site ends up half redesigned, so instead
   each page wraps what it already had in @layer legacy and this file lands in
   @layer system on top. Layers beat specificity, so nothing here needs !important
   and nothing here has to out-guess a selector written a year ago.

   What this layer owns: type, colour, spacing rhythm, shape, elevation, focus,
   motion, and the handful of components where the old styling was doing the
   most damage. What it deliberately does not own: layout. Grids and flex rules
   stay where they are.
   =========================================================================== */
@layer system {

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* Grounds. The old ground was a strong cream and every card was white on top
     of it, which left almost no separation and made the whole site one colour.
     Paper is barely off white, cards are pure white, and the difference is now
     carried by a hairline rather than by a shadow. */
  --paper:#F8F6F1;
  --sand:#F0EBDF;
  --surface:#FFFFFF;
  --navy:#00071B;
  --panel:#0B1120;
  --black:#070910;

  /* Ink. Warm, because the ground is warm. --ink-2 is the exact grey already
     hardcoded in a hundred places on this site, so nothing looks out of step. */
  --ink:#171512;
  --ink-2:#54504a;
  --ink-3:#6E6A5E;
  --muted:#6E6A5E;

  /* Lines do the work shadows used to do. */
  --line:#E7E1D6;
  --line-2:#D6CFC0;
  --line-dark:rgba(255,255,255,.10);
  --line-dark-2:rgba(255,255,255,.20);

  /* One accent, in two tones: the bright one for dark grounds and small marks,
     the deep one wherever it has to be read as text on paper. */
  --teal:#00B28F;
  --tealb:#15C6A3;
  --teal-ink:#06705C;
  --teal-wash:#EAF5F1;
  --gold:#E7B878;
  --goldsoft:#F2D6AC;
  --gold-ink:#6F5424;
  --white:var(--paper);          /* legacy names, kept so old rules still resolve */
  --cream:var(--paper);

  /* Shape. Four steps, and a button that is not a pill. */
  --r-1:4px; --r-2:8px; --r-3:12px; --r-btn:6px;

  /* Elevation, used sparingly and never as decoration. */
  --e-1:0 1px 2px rgba(23,21,18,.04);
  --e-2:0 1px 2px rgba(23,21,18,.05), 0 14px 30px -20px rgba(23,21,18,.30);

  /* Type. Newsreader carries an optical size axis, so headlines tighten as they
     grow instead of being one drawing stretched across every size. */
  --display:"Newsreader",Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --measure:64ch;
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.18s;

  --gap-section:clamp(3.5rem,2rem + 6vw,7rem);
}

/* ------------------------------------------------------------------ base -- */
html{-webkit-text-size-adjust:100%; scrollbar-gutter:stable; scroll-behavior:smooth}
/* Deliberately no background and no colour here. The ground comes from each
   page's own body rule, which resolves --white to the new paper, and several
   pages are navy end to end: repainting them from this layer turned their
   white text into black text on black. */
body{
  font-family:var(--sans); font-size:17px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}
img,svg,video,canvas{display:block; max-width:100%}
hr{border:0}
::selection{background:var(--teal-wash); color:var(--ink)}
.dark ::selection,.mid ::selection,.hero ::selection{background:rgba(0,178,143,.28); color:#fff}

/* One focus ring, visible on both grounds, following the shape of the thing. */
:focus-visible{outline:2px solid var(--teal-ink); outline-offset:3px; border-radius:var(--r-1)}
.dark :focus-visible,.mid :focus-visible,.hero :focus-visible,.nav :focus-visible,
footer :focus-visible{outline-color:var(--tealb)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ------------------------------------------------------------------ type -- */
h1,h2,h3,.hero h1,.lead{font-family:var(--display); font-optical-sizing:auto}
/* Anything with an id can be jumped to, and the sticky bar is 60 odd pixels. */
[id]{scroll-margin-top:5.5rem}
h1,h2,h3{
  font-weight:450; font-style:normal;
  line-height:1.08; letter-spacing:-.012em; text-wrap:balance;
  font-variant-numeric:lining-nums;
}
h1{font-size:clamp(2.35rem,1.5rem + 3.2vw,3.9rem); line-height:1.03; letter-spacing:-.022em}
h2{font-size:clamp(1.85rem,1.35rem + 2.1vw,2.85rem); letter-spacing:-.018em}
h3{font-size:clamp(1.2rem,1.06rem + .6vw,1.5rem); line-height:1.18; letter-spacing:-.01em}
h4{font-family:var(--sans); font-weight:700; letter-spacing:-.005em; line-height:1.25}


p{line-height:1.65; text-wrap:pretty}
/* Weight only. An earlier version set colour:inherit here, which quietly beat
   every legacy rule that had deliberately made a <b> white on a dark panel. */
strong,b{font-weight:700}

/* The standfirst under a heading. Serif italic at a light weight, which is the
   one place on the page a little flourish is earned. It is kept for .lead only:
   .lead is a line or two, and five lines of italic serif is a chore to read. */
.lead{
  font-family:var(--display); font-style:italic; font-weight:350;
  font-size:clamp(1.15rem,1rem + .6vw,1.45rem); line-height:1.45;
  letter-spacing:-.005em; max-width:34em; text-wrap:pretty;
}
.sub,.hero .sub{
  font-family:var(--sans); font-style:normal; font-weight:300;
  font-size:clamp(1.05rem,.96rem + .45vw,1.24rem); line-height:1.58;
  letter-spacing:-.002em; max-width:36em; text-wrap:pretty;
}


/* Small caps labels. They were 800 weight, which made every section shout its
   own name before you got to the heading. */
.pre,.eyebrow,.kick,.abtag,.ftag,.ventures .vh,.rung .tag,.sh-kind,.mini-tag,.pop{
  font-family:var(--sans); font-weight:600; font-size:.6875rem;
  letter-spacing:.15em; text-transform:uppercase; line-height:1.3;
}
.pre,.eyebrow{margin:0 0 .9rem; color:var(--teal-ink)}
.pre.gold,.eyebrow.gold{color:var(--gold-ink)}
.dark .pre,.dark .eyebrow,.hero .pre,.hero .eyebrow,.mid .pre,.mid .eyebrow,
[data-ground=dark] .pre,[data-ground=dark] .eyebrow,
header.page .pre,header.page .eyebrow{color:var(--teal)}
/* The banner at the top of the terms, privacy and 404 pages is navy while the
   rest of the page is paper, so the type inside it needs the dark treatment. */
header.page .lead,header.page .sub,header.page p{color:#C4CBD4}
header.page h1,header.page h2{color:#fff}
.dark .pre.gold,.dark .eyebrow.gold,.hero .pre.gold,.hero .eyebrow.gold,
.mid .pre.gold,.mid .eyebrow.gold,.hero .kick,
[data-ground=dark] .pre.gold,[data-ground=dark] .eyebrow.gold{color:var(--gold)}

/* A rule is a hairline, not a fading gradient. */
.rule{height:1px; width:44px; background:var(--line-2); margin:0 0 1.4rem; opacity:1; border:0}
/* Headings carry no bottom margin on this site, so a rule that follows one sat
   flush against its descenders and read as an underline rather than a divider. */
h1 + .rule,h2 + .rule,h3 + .rule{margin-top:1.15rem}
.dark .rule,.mid .rule,.hero .rule,footer .rule{background:rgba(255,255,255,.24)}
.center .rule,.rule.center{margin-left:auto; margin-right:auto}

/* Prose links carry a real underline, set below the baseline so descenders
   are not cut through. */
p a:not(.btn),li a:not(.btn),dd a:not(.btn){
  color:var(--teal-ink); text-decoration:underline;
  text-decoration-thickness:.055em; text-underline-offset:.19em;
  text-decoration-color:color-mix(in srgb,var(--teal-ink) 40%,transparent);
  transition:text-decoration-color var(--dur) var(--ease);
}
p a:not(.btn):hover{text-decoration-color:var(--teal-ink)}
.dark p a:not(.btn),.dark li a:not(.btn),.mid p a:not(.btn),.mid li a:not(.btn),
[data-ground=dark] p a:not(.btn),[data-ground=dark] li a:not(.btn),
header.page p a:not(.btn),header.page li a:not(.btn){color:var(--tealb)}
/* The footer rows are a menu, not prose. They were being given the prose link
   colour, which is a deep teal chosen to be read on paper and not on navy. */
footer p a:not(.btn),footer li a:not(.btn),.legal a,.fl a{
  color:#B9B4A9; text-decoration:none;
}
footer p a:not(.btn):hover,.legal a:hover,.fl a:hover{color:#fff; text-decoration:underline}

/* Every figure that sits in a column lines up. */
.pprice,.abp,.fig,.total,.pyr,.rung .cost .amt,.carebox .cbuy .amt,.ocard .price,.sh-price b{
  font-family:var(--display); font-weight:500; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

section{padding:var(--gap-section) 0}

/* ----------------------------------------------------------------- shape -- */
.area,.bandpromise,.faq details,.figbox,.ml-slot,.note,.proof,.theme,.vcard,.vchip,
.vrow a,.fv a,.capnote,.card,.col,.lay,.ps-screen,.q,.qual .b,.said blockquote,.tile,
.total,.loop .stepc,.tool,.guarantee,.rung .promise,.embed,.embed iframe,.crossp,.shot,
.scale label,input,textarea,select{border-radius:var(--r-2)}
.above .ab,.cap,.capture,.carebox .cb,.carebox .cbuy,.cta-band,.ocard,.pkg,div.price,
.result,.stack,.start,.loop,.heroimg{border-radius:var(--r-3)}
.btn,.nav .links .navcta,.nav .links .navlogin,.fsoc a,.socials a,.gbadge,
.capture input[type=email],.pkg .pop,.ps-chip{border-radius:var(--r-btn)}

/* Shadows were doing the job a border should do. Cards are defined by a
   hairline now, and nothing lifts off the page when you point at it. */
.card,.col,.faq details,.faq details[open],.ocard,.pkg,.pkg.featured,.q,.stack,.tile,
.ps-screen,.ps-chip,.shot,.btn,.btn.dark,.btn.gold,.btn.primary{box-shadow:none}
/* .price is a card on the web design page, where it declares its own border,
   and a plain centred block on the offer page with no padding at all. Giving it
   a border here drew a box round the second one and sat the button on the edge
   of it, so this rule leaves .price alone. */
.card,.col,.ocard,.pkg,.q,.stack,.tile,.faq details,.area,.vchip,.vcard,.lay,.tool,
.said blockquote,.carebox .cb{
  border:1px solid var(--line);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover,.col:hover,.ocard:hover,.pkg:hover,.tile:hover,.vchip:hover,.vcard:hover,
.lay:hover,.tool:hover,.fv a:hover,.vrow a:hover{
  transform:none; box-shadow:none; border-color:var(--line-2);
}
.faq details[open]{border-color:var(--line-2)}
.heroimg{filter:none}
.dark .card,.dark .col,.dark .tile,.dark .vchip,.dark .vcard,.dark .lay,.dark .tool,
.dark .area,.dark .q,.dark .stack,.dark .said blockquote,
.mid .card,.mid .tile,.mid .area,.mid .vchip{border-color:var(--line-dark)}
.dark .card:hover,.dark .tile:hover,.dark .vchip:hover,.dark .lay:hover,.dark .tool:hover,
.dark .area:hover,.mid .card:hover,.mid .tile:hover{border-color:var(--line-dark-2)}


/* --------------------------------------------------------------- buttons -- */
.btn{
  font-family:var(--sans); font-weight:600; font-size:.875rem; letter-spacing:.005em;
  line-height:1.2; padding:.78rem 1.3rem; border:1px solid transparent;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.btn.lg{font-size:.95rem; padding:.95rem 1.6rem}
.btn:hover{transform:none; box-shadow:none}
.btn.primary{background:var(--teal); color:#04231b; border-color:var(--teal)}
.btn.primary:hover{background:var(--teal-ink); color:#fff; border-color:var(--teal-ink)}
.btn.dark{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn.dark:hover{background:#000; border-color:#000}
.btn.gold{background:var(--gold); color:#2b1c08; border-color:var(--gold)}
.btn.gold:hover{background:var(--goldsoft); border-color:var(--goldsoft)}
/* Ghost on paper is a teal outline; ghost on navy is a white one. It was one
   rule before, which is why the same button was invisible on half the site. */
.btn.ghost{background:transparent; border-color:var(--teal-ink); color:var(--teal-ink)}
.btn.ghost:hover{background:var(--teal-wash); border-color:var(--teal-ink); color:var(--teal-ink)}
.dark .btn.ghost,.mid .btn.ghost,.hero .btn.ghost,footer .btn.ghost,
.start .btn.ghost,.cap .btn.ghost,.above .ab .btn.ghost,.carebox .cbuy .btn.ghost,
header.page .btn.ghost,[data-ground=dark] .btn.ghost{
  border-color:rgba(255,255,255,.26); color:#EFEBE2;
}
.dark .btn.ghost:hover,.mid .btn.ghost:hover,.hero .btn.ghost:hover,footer .btn.ghost:hover,
.start .btn.ghost:hover,.cap .btn.ghost:hover,.above .ab .btn.ghost:hover,
header.page .btn.ghost:hover,[data-ground=dark] .btn.ghost:hover{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.5); color:#fff;
}
.btn.ghostd{background:transparent; border-color:rgba(255,255,255,.26); color:#EFEBE2}
.btn.ghostd:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.5); color:#fff}

/* ------------------------------------------------------------------- nav -- */
.nav{background:color-mix(in srgb,var(--navy) 88%,transparent); border-bottom:1px solid var(--line-dark)}
.nav .in{padding:.9rem 1.5rem}
.nav .brandmark{font-family:var(--sans); font-weight:800; letter-spacing:-.03em; font-size:1.2rem}
.nav .links a{font-size:.8125rem; font-weight:500; color:#C6C1B7; letter-spacing:.005em}
.nav .links a:hover{color:#fff}
.nav .links a::after{height:1px; bottom:-3px; background:var(--tealb)}
.nav .links .navcta{background:var(--teal); color:#04231b; font-weight:600; font-size:.8125rem; padding:.6rem 1.05rem}
.nav .links .navcta:hover{background:var(--tealb)}
.nav .links .navlogin{font-weight:500; font-size:.8125rem; padding:.55rem 1rem;
  border:1px solid rgba(255,255,255,.22); color:#C6C1B7}
.nav .links .navlogin:hover{border-color:rgba(255,255,255,.45); color:#fff}

/* ------------------------------------------------------------------ hero -- */
/* Where a dark hero meets a dark section, a 10% hairline disappears and the
   two read as one long slab. This is the one place the line needs to be seen. */
.hero{border-bottom:1px solid rgba(255,255,255,.16)}
.hero::before{opacity:.55}
.hero::after{opacity:.5}
.hero .kick{color:var(--gold); margin-bottom:1.4rem}

/* ------------------------------------------------------------ components -- */
/* The rail down the left of a callout is the single most over-used card
   decoration there is. These say what they are with a label instead. */
.bandpromise,.capnote{
  background:var(--surface); border:1px solid var(--line); border-left-width:1px;
  padding:1.05rem 1.25rem; color:var(--ink-2);
}
/* The promise inside a rung is a sentence he would say, not a boxed callout.
   A hairline above it is enough. */
.rung .promise{background:transparent; border:0; border-top:1px solid var(--line);
  padding:.9rem 0 0; color:#3a362f}
.bandpromise b,.capnote b{
  display:block; font-family:var(--sans); font-weight:600; font-size:.6875rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.45rem;
}
.capnote{border-left-width:1px}
/* The same rail again, this time on the two dark cards and the guarantee note
   inside a package. Hairline above rather than a stripe beside. */
.above .ab .abg{border-left:0; padding-left:0; padding-top:.95rem; margin-top:.2rem;
  border-top:1px solid var(--line-dark-2)}
.guarantee{border-left:0; padding-left:0; padding-top:.95rem;
  border-top:1px solid var(--line); background:transparent}
.dark .guarantee,.mid .guarantee{border-top-color:var(--line-dark-2)}
/* A dashed rule is the one border style that always looks like a placeholder. */
.pkg .pfit{border-top:1px solid var(--line); color:var(--ink-3)}

/* Ticks in feature lists take the readable teal, not the bright one. */
.pkg .plist li::before,.carebox .cb li::before,.nods li::before,.qn{color:var(--teal-ink)}
/* Small print on a white card. These were a bright teal, a warm grey and a
   pale gold, all of which fall short of readable at eleven pixels. */
.vchip span{color:var(--ink-3)}
.vchip b + span,.vstrip .vchip span:first-of-type{color:var(--ink-3)}
.ocard .badge{color:var(--gold-ink)}
.ocard.teal .badge{color:var(--teal-ink)}
.ocard.navy .badge{color:var(--ink-2)}

/* The featured package is marked by a border and a quiet label, not a glow. */
.pkg.featured{border-color:var(--teal-ink); box-shadow:none}
.pkg .pop{background:var(--teal-ink); color:#fff; font-weight:600; letter-spacing:.12em;
  font-size:.625rem; padding:.3rem .6rem}

/* Quotes hang their opening mark into the margin, which is the difference
   between a quote that is set and one that is just indented. */
.said blockquote{hanging-punctuation:first; text-indent:0}
.said blockquote p{font-family:var(--display); font-size:1.02rem; line-height:1.55; color:var(--ink)}
.said cite{font-family:var(--sans)}
.said cite span{color:var(--ink-3); font-weight:500}

.faq summary{font-family:var(--sans); font-weight:600; font-size:1rem}
.faq summary::after{color:var(--ink-3); font-weight:400}
.faq details[open] summary{color:var(--ink)}

/* Definition rows inside a ladder rung. */
.rung dt{color:var(--ink-3); font-weight:600}
.rung .tag,.rung.on .tag{color:var(--teal-ink)}
/* The step numerals are set in the serif, like the prices. */
.step .n{font-family:var(--display); font-weight:500; font-style:italic}
.rung h3{font-family:var(--display); font-weight:450}
.rung .cost .per{color:var(--ink-3)}
.rung .vs{color:var(--ink-3)}

/* Footer. */
footer{background:var(--navy); border-top:1px solid var(--line-dark)}
.footmark{font-family:var(--sans); font-weight:800; letter-spacing:-.03em}
.fsoc a,.socials a{background:transparent; border:1px solid rgba(255,255,255,.16);
  font-weight:500; font-size:.78rem}
.fsoc a:hover,.socials a:hover{transform:none; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.04)}
.fv a,.vrow a{background:transparent; border:1px solid rgba(255,255,255,.11)}
.fv a:hover,.vrow a:hover{transform:none; background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.28)}
.legal,.fl{color:#9A948A; font-size:.78rem}
/* Some pages give p a colour picked for the body, and it follows the paragraph
   into the navy footer, where it is invisible. */
footer p{color:#9A948A}
footer .footmark{color:#fff}

/* Forms. */
input,textarea,select{font-family:var(--sans); font-size:1rem; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); padding:.7rem .85rem}
input:focus,textarea:focus,select:focus{border-color:var(--teal-ink); outline-offset:1px}
label{font-family:var(--sans); font-weight:600; font-size:.8125rem; letter-spacing:.01em}

/* Nothing scrolls the page sideways, whatever ends up in it. */
table,pre{display:block; max-width:100%; overflow-x:auto}
}

/* ---------------------------------------------------------------------------
   Print. Somebody will put the prices in front of a business partner on paper,
   and a navy page with a sticky menu across it is not that. Layered after the
   system block so it wins wherever it needs to.
   --------------------------------------------------------------------------- */
@media print{
  @page{margin:18mm 16mm}
  :root{--paper:#fff}
  html,body{background:#fff!important; color:#000!important; font-size:11pt}
  .nav,.burger,.navtoggle,.hero::before,.hero::after,footer .fsoc,footer .socials,
  footer .ventures,.btn,.sh-form,.capture,form{display:none!important}
  .hero,.dark,.mid,footer,.start,.cap,.above .ab,.carebox .cbuy{
    background:#fff!important; color:#000!important; border:0!important;
  }
  .dark h1,.dark h2,.dark h3,.mid h1,.mid h2,.mid h3,.hero h1,.hero .sub,
  .dark p,.mid p,footer p,footer a{color:#000!important}
  .card,.col,.ocard,.pkg,.q,.stack,.tile,.area,.vchip,.vcard,.lay,.tool,
  .said blockquote,.carebox .cb,div.price,.rung .promise,.bandpromise,.capnote{
    border:1px solid #bbb!important; box-shadow:none!important; break-inside:avoid;
  }
  section{padding:14pt 0!important}
  h1,h2,h3{break-after:avoid}
  .rung,.pkg,.faq details{break-inside:avoid}
  .faq details{border:0!important} .faq details summary::after{content:""}
  /* A printed page cannot be clicked, so the address goes next to the words. */
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:8.5pt; color:#555}
  a[href^="#"]::after,a[href^="mailto"]::after{content:""}
  img{max-width:100%!important}
}