/* ==========================================================================
   ASCENIX V8  ·  LOUD
   2026-07-29. Loads last and overrides v7.

   Journey, second time of asking: "move away from the cleanness a little bit
   ... more design, more cool animations, text, and a lot more typography."

   V7 read "less clean" as density and that was only half of it. The site was
   still one typeface at one weight doing every job, which is what actually
   made it quiet. A page has no typographic voice if display, body and label
   are the same face at 400 and 510.

   So V8 is a type system, not a texture pass:

   1. ANTON CARRIES THE DISPLAY. Condensed, black, set in caps at sizes the old
      grid could not hold. Inter drops back to what it is good at, body and UI,
      which is also what the corrections ledger says it is for (C-0006 permits
      Inter as body, never as the hero face; the V5 override that put it in the
      hero was for an Apple-clean look this rebuild is deliberately leaving).
   2. THE SCALE GETS CONTRAST. Display to body was 2.3x. It is now up to 7x at
      desktop, which is what makes a page read as designed rather than typed.
   3. NUMERALS BECOME GRAPHICS. Section numbers were 11px mono labels. They are
      now set in Anton at display size and treated as furniture.
   4. RULES GET WEIGHT. Hairlines everywhere is a clean-site tell. Structural
      rules go to 2px and 3px ink; hairlines stay for row separation only.

   Nothing here is costume. No fake instrument panels, no invented vocabulary,
   no trade-journal dressing. Ledger C-0002.
   ========================================================================== */

:root{
  --f-display:"Anton", "Arial Narrow", Impact, sans-serif;

  /* the display scale. Anton is condensed, so it takes far larger sizes than a
     normal grotesk before it feels big, and it needs positive tracking at
     small sizes or the counters close up. */
  --d-xl:clamp(3.4rem, 1.7rem + 7.4vw, 8.5rem);   /* 54px to 136px, caps ~1280 */
  --d-lg:clamp(2.6rem, 1.6rem + 4.4vw, 5.6rem);   /* 42px to 90px  */
  --d-md:clamp(2rem,   1.5rem + 2.2vw, 3.2rem);   /* 32px to 51px  */
  --d-sm:clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);  /* 24px to 34px  */

  --rule:2px;
  --rule-heavy:3px;
}

/* --------------------------------------------------------------- display -- */
.dsp{
  font-family:var(--f-display);
  font-weight:400;              /* Anton ships one weight and it is already black */
  text-transform:uppercase;
  letter-spacing:-.012em;       /* condensed faces need far less negative tracking */
  line-height:.9;
  text-wrap:balance;
  color:var(--ink);
}
.dsp--xl{ font-size:var(--d-xl); line-height:.86; letter-spacing:-.018em; }
.dsp--lg{ font-size:var(--d-lg); }
.dsp--md{ font-size:var(--d-md); line-height:.95; }
.dsp--sm{ font-size:var(--d-sm); line-height:1; letter-spacing:0; }
.band--dark .dsp{ color:#FFFFFF; }

/* the one accent, used the same way it is used in the index: to mark the thing
   the sentence is built to arrive at */
.dsp em{
  font-style:normal;
  box-shadow:inset 0 -.13em 0 var(--pick);
}
.band--dark .dsp em{ box-shadow:inset 0 -.13em 0 var(--pick); }

/* Anton has no italic and no lighter cut, so emphasis inside display type has
   to come from colour and rule, never from a second weight. */
.dsp .out{
  color:transparent;
  -webkit-text-stroke:1.5px var(--ink);
}
.band--dark .dsp .out{ -webkit-text-stroke-color:rgba(255,255,255,.55); }

/* ------------------------------------------------------- section numerals -- */
/* was an 11px mono label. Now it is the largest thing in the section header and
   the heading sits against it. */
.docnum{
  display:flex; align-items:baseline; gap:clamp(14px,2vw,26px);
  margin-bottom:var(--s4);
  border-bottom:var(--rule) solid var(--ink);
  padding-bottom:var(--s3);
}
.docnum b{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.6rem,1.7rem + 3.6vw,4.6rem);
  line-height:.8; letter-spacing:-.02em;
  color:var(--ink); flex:0 0 auto;
}
.docnum{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em;
         text-transform:uppercase; color:var(--muted); }
.band--dark .docnum{ border-bottom-color:rgba(255,255,255,.55); color:rgba(255,255,255,.66); }
.band--dark .docnum b{ color:#FFFFFF; }
/* the rule after the label, so the header reads as a ruled masthead */
.docnum::after{
  content:""; flex:1; height:var(--rule); background:var(--ink);
  align-self:center; opacity:.14;
}
.band--dark .docnum::after{ background:#FFFFFF; opacity:.22; }

/* ------------------------------------------------------------- headings --- */
/* every h2 that was not given an explicit display class still has to move off
   the old flat scale, or half the site stays quiet */
.h2, .stmt{
  font-family:var(--f-display); font-weight:400;
  text-transform:uppercase; letter-spacing:-.014em; line-height:.92;
  font-variation-settings:normal;
}
.h2{ font-size:var(--d-lg); }
.stmt{ font-size:var(--d-lg); max-width:20ch; }
.stmt--wide{ max-width:26ch; }
.stmt em, .em-word{
  font-style:normal; color:inherit;
  box-shadow:inset 0 -.13em 0 var(--pick);
}
.band--dark .em-word{ color:#FFFFFF; }

/* the index rows keep Inter: they are read, not looked at. Only the row title
   picks up a little more weight so the group labels can sit quieter. */
.index__body h3{ font-weight:600; font-variation-settings:"wght" 600; letter-spacing:-.014em; }

/* ------------------------------------------------------------- the lede --- */
.lede{ font-size:clamp(1.06rem,1rem + .34vw,1.22rem); color:var(--muted); }

/* ==========================================================================
   THE MARQUEE
   A band of moving type in the flow of the page, not fixed to an edge, so it
   is not the "custom scrollbar" thing the ledger bans (C-0003). It exists to
   put movement and voice in a place the old page had a gap.
   ========================================================================== */
.mq{
  position:relative; overflow:hidden;
  border-top:var(--rule-heavy) solid var(--ink);
  border-bottom:var(--rule-heavy) solid var(--ink);
  background:var(--ink); color:var(--paper);
  padding:clamp(10px,1.1vw,16px) 0;
}
.mq__track{
  display:flex; width:max-content;
  animation:mqRun 42s linear infinite;
  will-change:transform;
}
.mq__track span{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.5rem,1.1rem + 1.7vw,2.6rem);
  line-height:1; letter-spacing:.005em;
  padding-right:clamp(28px,3vw,58px);
  white-space:nowrap; color:var(--paper);
}
.mq__track span i{ font-style:normal; color:var(--pick); padding-right:clamp(28px,3vw,58px); }
@keyframes mqRun{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.mq:hover .mq__track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){
  .mq__track{ animation:none; }
  .mq{ overflow-x:auto; }
}

/* ==========================================================================
   LINE REVEAL
   Display headings arrive a line at a time from behind their own baseline.
   Transform and opacity only, so it stays on the compositor. novarus-v8.js
   splits the lines; without JS the text is simply visible, which is the
   correct no-JS state.
   ========================================================================== */
/* padding plus a matching negative margin gives the glyphs room inside a box
   that is clipping them. Anton is set at line-height .84 to .9, which is
   tighter than its own cap height, so without this the tops of letters get
   shaved by the very box that makes the reveal work. */
.ln{ display:block; overflow:hidden; padding-block:.09em; margin-block:-.09em; }
.ln > i{
  display:block; font-style:normal;
  transform:translate3d(0,105%,0);
  transition:transform 760ms cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i, 0) * 78ms);
}
.is-in .ln > i, .ln.is-in > i{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .ln > i{ transform:none; transition:none; }
}

/* ==========================================================================
   STATEMENT BAND
   Full bleed, near black, one very large line. This is the "loud" that a page
   of ruled rows cannot supply on its own: it is the only place the type is
   allowed to be the whole composition.
   ========================================================================== */
.say{
  background:var(--void); color:#FFFFFF;
  padding-block:clamp(58px,7vw,120px);
  position:relative; overflow:hidden;
}
.say .dsp{ color:#FFFFFF; max-width:22ch; }
.say__meta{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
  margin-top:var(--s6); display:flex; gap:var(--s5); flex-wrap:wrap;
}
/* an oversized ghost numeral behind the statement, clipped by the band */
.say__ghost{
  position:absolute; right:-2vw; bottom:-6vh; z-index:0;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(14rem,26vw,30rem); line-height:.72;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.1);
  pointer-events:none; user-select:none;
}
.say > .container{ position:relative; z-index:1; }

/* ==========================================================================
   THE PEOPLE
   Two named rows. The site has claimed "the two people you actually talk to"
   since it was written and never said who they are, which is the cheapest
   trust win available and the one piece of proof that needs nobody's
   permission.
   ========================================================================== */
.who{ display:grid; gap:0; margin-top:var(--s6); border-top:var(--rule) solid var(--ink); }
.band--dark .who{ border-top-color:rgba(255,255,255,.55); }
/* a fixed first column, not `auto`: with `auto` the body copy starts wherever
   that person's name happens to end, so the two paragraphs did not line up */
.who__row{
  display:grid; grid-template-columns:minmax(0,10rem) 1fr; gap:clamp(16px,3vw,44px);
  align-items:start; padding:clamp(22px,2.6vw,34px) 0;
  border-bottom:1px solid var(--line);
}
.who__name{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:var(--d-sm); line-height:.9; letter-spacing:-.01em;
  color:var(--ink);
}
.band--dark .who__name{ color:#FFFFFF; }
.who__role{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); display:block; margin-top:8px;
}
.who__body p{ color:var(--muted); max-width:56ch; }
.who__body p + p{ margin-top:var(--s3); }

/* ==========================================================================
   THE NOT LIST
   What they do not do, set as loudly as what they do. It is the most
   distinctive copy an honest agency can write and it costs nothing to be true.
   ========================================================================== */
.nots{ display:grid; gap:0; margin-top:var(--s6); }
.nots__row{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,2.4vw,32px);
  align-items:baseline; padding:clamp(15px,1.7vw,22px) 0;
  border-top:1px solid var(--line);
}
.nots__row:last-child{ border-bottom:1px solid var(--line); }
.nots__x{
  font-family:var(--f-display); font-size:var(--d-sm); line-height:.9;
  color:var(--pick); text-transform:uppercase;
}
.nots__t{ font-weight:600; font-variation-settings:"wght" 600; }
/* the container is 1112px at desktop, which is about 110 characters of body
   copy on one line. Nothing past roughly 70 is comfortable to read. */
.nots__t span{ display:block; font-weight:400; font-variation-settings:"wght" 400;
               color:var(--muted); margin-top:5px; font-size:.95rem; line-height:1.55;
               max-width:72ch; }
.nots__t{ max-width:72ch; }

/* ==========================================================================
   FAQ
   More text, and the kind search engines read. Native details/summary, so it
   works with no JS and is keyboard operable for free.
   ========================================================================== */
.faq{ margin-top:var(--s6); border-top:var(--rule) solid var(--ink); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  padding:clamp(17px,1.9vw,24px) 0;
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.12rem,1rem + .7vw,1.6rem); line-height:1.02; letter-spacing:-.008em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--f-mono); font-size:1.1rem; color:var(--muted);
  flex:0 0 auto; transition:transform 200ms cubic-bezier(.4,0,.2,1);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--pick-ink); }
.faq__a{ padding-bottom:clamp(18px,2vw,26px); color:var(--muted); max-width:66ch; }
.faq__a p + p{ margin-top:var(--s3); }

/* ==========================================================================
   ADJUSTMENTS THE LOUDER TYPE FORCES
   ========================================================================== */
/* The manifesto is running text and must never become Anton: a condensed caps
   face is unreadable at paragraph length. It is now a supporting paragraph
   under the display line, which is where the volume went instead.

   `.hero h1` in novarus.css is (0,1,1) and sets the old 2.6-to-5.4rem size, so
   the kicker has to be matched at (0,2,1) or the display scale loses to it. */
.hero h1.hero__kicker{
  font-family:var(--f-display); font-weight:400;
  text-transform:uppercase;
  font-size:var(--d-xl); line-height:.84; letter-spacing:-.018em;
  color:var(--ink); margin:var(--s4) 0 0; max-width:15ch;
}
.hero__manifesto{ max-width:min(100%, 64rem); }
.hero .manifesto{
  margin-top:var(--s5); max-width:52ch;
  font-size:clamp(1.02rem,.97rem + .4vw,1.2rem);
  line-height:1.55; color:var(--muted); letter-spacing:0;
}
.hero .manifesto b{
  color:var(--ink); font-weight:600; font-variation-settings:"wght" 600;
  box-shadow:inset 0 -.32em 0 var(--pick-wash);
}

/* the index group labels now sit under much louder headings, so they need to
   hold their own without competing */
.index__grplbl{ font-size:11px; letter-spacing:.14em; color:var(--ink-2); }
.index__grplbl::after{ height:1px; }

@media (max-width:600px){
  .docnum{ flex-wrap:wrap; gap:10px; }
  .docnum::after{ display:none; }
  .say__ghost{ font-size:12rem; right:-8vw; }
}

/* ==========================================================================
   INNER PAGES
   Ledger C-0010: a change is not done until it is on every page. The first V8
   pass moved the homepage onto Anton and left services, work, pricing and
   contact entirely in Inter, which made the site read as two different sites.

   `.phero h1` is (0,1,1) and sets its own size, so the display class has to be
   matched at that weight or it loses, the same trap as `.hero h1`.
   ========================================================================== */
.phero h1.dsp{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:var(--d-lg); line-height:.88; letter-spacing:-.016em;
  max-width:16ch;
}
.phero h1.dsp em, .phero h1.dsp .em-word{
  font-style:normal; box-shadow:inset 0 -.12em 0 var(--pick);
}

/* the service panels: their headings were the same size as the body copy under
   them, which is why that page had no hierarchy at all */
.idx__panel h2.dsp, .idx__panel h3.dsp{ font-size:var(--d-md); max-width:18ch; }
.idx__panel .idx__spec{ margin-top:var(--s5); }

/* the 404 has no h2 in the body, so its display line is the h1 only */
.phero .lede{ margin-top:var(--s4); }