/* Austin Creator Brief — webfonts.
   SUBSTITUTION NOTE: no font binaries were supplied. Display uses Archivo
   (variable width axis, set to 62% = "Archivo Condensed"); body uses Inter.
   Swap in licensed binaries + local @font-face when available. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..100,400..800&family=Inter:wght@400;500;600&display=swap");
:root{
  --font-display:"Archivo","Archivo Narrow","Oswald",Impact,sans-serif;
  --font-body:"Inter","Helvetica Neue",Helvetica,sans-serif;
  --font-display-stretch:62%;
  --font-weight-display:700;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
}
/* Three brand colors. Everything else is a derived neutral. */
:root{
  /* base */
  --acb-cream:#F7F4EF;
  --acb-crimson:#C8102E;
  --acb-ink:#111111;
  /* derived neutrals (do not add a 4th brand color) */
  --acb-bone:#EDE9E1;      /* subtle fill / zebra rows */
  --acb-ash:#D6D1C7;       /* hairline rules, borders */
  --acb-graphite:#6E6A63;  /* secondary type, placeholders, meta */

  /* states */
  --acb-crimson-press:#A50D26;   /* 12% darker, press only */
  --acb-ink-press:#000000;

  /* semantic aliases — reference these in product work */
  --surface-page:var(--acb-cream);
  --surface-card:#FFFFFF;
  --surface-sunken:var(--acb-bone);
  --surface-inverse:var(--acb-ink);

  --text-primary:var(--acb-ink);
  --text-secondary:var(--acb-graphite);
  --text-placeholder:var(--acb-graphite);
  --text-inverse:var(--acb-cream);
  --text-accent:var(--acb-crimson);

  --accent:var(--acb-crimson);
  --link:var(--acb-crimson);
  --link-hover:var(--acb-ink);

  --border-hairline:var(--acb-ash);
  --border-strong:var(--acb-ink);
  --rule-accent:var(--acb-crimson);
}
/* 8px base scale. --space-1 is the only sub-8 step (4px), for tick-level detail. */
:root{
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:40px;
  --space-7:48px;
  --space-8:64px;
  --space-9:80px;
  --space-10:96px;
  --space-11:128px;
  --space-12:160px;

  /* hard-edged brand: radius is effectively zero */
  --radius-none:0px;
  --radius-sm:2px;   /* max permitted, inputs/chips only */

  /* rules */
  --rule-hairline:1px;
  --rule-medium:2px;
  --rule-heavy:4px;
  --border-hairline-style:var(--rule-hairline) solid var(--border-hairline);
}
/* Type scale. Desktop values on :root; mobile overrides at <=640px.
   Display = Archivo @ 62% width, all caps, tight tracking.
   Body = Inter, sentence case. */
:root{
  --display-xl-size:96px;   --display-xl-lh:0.88; /* @kind other */  --display-xl-ls:-0.03em; /* @kind other */
  --display-l-size:72px;    --display-l-lh:0.90; /* @kind other */   --display-l-ls:-0.026em; /* @kind other */
  --display-m-size:54px;    --display-m-lh:0.92; /* @kind other */   --display-m-ls:-0.022em; /* @kind other */
  --h1-size:40px;           --h1-lh:1.00; /* @kind other */          --h1-ls:-0.016em; /* @kind other */
  --h2-size:30px;           --h2-lh:1.06; /* @kind other */          --h2-ls:-0.012em; /* @kind other */
  --h3-size:22px;           --h3-lh:1.16; /* @kind other */          --h3-ls:-0.006em; /* @kind other */
  --body-lg-size:19px;      --body-lg-lh:1.58; /* @kind other */     --body-lg-ls:0em; /* @kind other */
  --body-size:17px;         --body-lh:1.65; /* @kind other */        --body-ls:0em; /* @kind other */
  --small-size:15px;        --small-lh:1.55; /* @kind other */       --small-ls:0em; /* @kind other */
  --caption-size:13px;      --caption-lh:1.45; /* @kind other */     --caption-ls:0.01em; /* @kind other */
  --eyebrow-size:12px;      --eyebrow-lh:1.00; /* @kind other */     --eyebrow-ls:0.14em; /* @kind other */
}
@media (max-width:640px){
  :root{
    --display-xl-size:52px;  --display-xl-lh:0.90; /* @kind other */  --display-xl-ls:-0.024em; /* @kind other */
    --display-l-size:40px;   --display-l-lh:0.92; /* @kind other */   --display-l-ls:-0.02em; /* @kind other */
    --display-m-size:32px;   --display-m-lh:0.94; /* @kind other */   --display-m-ls:-0.018em; /* @kind other */
    --h1-size:28px;          --h1-lh:1.04; /* @kind other */          --h1-ls:-0.012em; /* @kind other */
    --h2-size:24px;          --h2-lh:1.10; /* @kind other */          --h2-ls:-0.008em; /* @kind other */
    --h3-size:19px;          --h3-lh:1.18; /* @kind other */          --h3-ls:-0.004em; /* @kind other */
    --body-lg-size:17px;     --body-lg-lh:1.6; /* @kind other */
    --body-size:16px;        --body-lh:1.62; /* @kind other */
    --small-size:14px;       --small-lh:1.5; /* @kind other */
    --caption-size:12px;     --caption-lh:1.4; /* @kind other */
    --eyebrow-size:11px;     --eyebrow-ls:0.12em; /* @kind other */
  }
}
/* Ready-made text classes */
.acb-display-xl,.acb-display-l,.acb-display-m{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:var(--font-weight-display);text-transform:uppercase;color:var(--text-primary)}
.acb-display-xl{font-size:var(--display-xl-size);line-height:var(--display-xl-lh);letter-spacing:var(--display-xl-ls)}
.acb-display-l{font-size:var(--display-l-size);line-height:var(--display-l-lh);letter-spacing:var(--display-l-ls)}
.acb-display-m{font-size:var(--display-m-size);line-height:var(--display-m-lh);letter-spacing:var(--display-m-ls)}
.acb-h1,.acb-h2,.acb-h3{font-family:var(--font-display);font-stretch:var(--font-display-stretch);font-weight:var(--font-weight-display);text-transform:uppercase;color:var(--text-primary)}
.acb-h1{font-size:var(--h1-size);line-height:var(--h1-lh);letter-spacing:var(--h1-ls)}
.acb-h2{font-size:var(--h2-size);line-height:var(--h2-lh);letter-spacing:var(--h2-ls)}
.acb-h3{font-size:var(--h3-size);line-height:var(--h3-lh);letter-spacing:var(--h3-ls)}
.acb-body-lg,.acb-body,.acb-small,.acb-caption{font-family:var(--font-body);font-weight:var(--font-weight-regular);color:var(--text-primary)}
.acb-body-lg{font-size:var(--body-lg-size);line-height:var(--body-lg-lh)}
.acb-body{font-size:var(--body-size);line-height:var(--body-lh)}
.acb-small{font-size:var(--small-size);line-height:var(--small-lh)}
.acb-caption{font-size:var(--caption-size);line-height:var(--caption-lh);letter-spacing:var(--caption-ls);color:var(--text-secondary)}
.acb-eyebrow{font-family:var(--font-body);font-weight:var(--font-weight-semibold);font-size:var(--eyebrow-size);line-height:var(--eyebrow-lh);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--accent)}
:root{
  --grid-desktop-columns:12; /* @kind other */
  --grid-desktop-gutter:24px;
  --grid-desktop-margin:48px;
  --grid-max-width:1200px;
  --measure-text:680px;      /* max reading width for body copy */

  --grid-mobile-columns:4; /* @kind other */
  --grid-mobile-gutter:16px;
  --grid-mobile-margin:20px;

  --breakpoint-mobile:640px;
  --breakpoint-tablet:1024px;
}
.acb-container{width:100%;max-width:var(--grid-max-width);margin:0 auto;padding-inline:var(--grid-desktop-margin)}
.acb-grid{display:grid;grid-template-columns:repeat(var(--grid-desktop-columns),1fr);gap:var(--grid-desktop-gutter)}
@media (max-width:640px){
  .acb-container{padding-inline:var(--grid-mobile-margin)}
  .acb-grid{grid-template-columns:repeat(var(--grid-mobile-columns),1fr);gap:var(--grid-mobile-gutter)}
}
/* The bracket device — four crimson corner brackets with tick marks on the
   inner edge of each arm. Three scales: frame / card / mark. */
:root{
  --bracket-color:var(--acb-crimson);

  --bracket-frame-stroke:6px;
  --bracket-frame-arm:96px;
  --bracket-frame-inset:32px;
  --bracket-frame-tick-len:12px;
  --bracket-frame-tick-weight:2px;
  --bracket-frame-tick-gap:12px;

  --bracket-card-stroke:4px;
  --bracket-card-arm:44px;
  --bracket-card-inset:16px;
  --bracket-card-tick-len:8px;
  --bracket-card-tick-weight:1.5px;
  --bracket-card-tick-gap:8px;

  --bracket-mark-stroke:2px;
  --bracket-mark-arm:8px;
  --bracket-mark-size:18px;
  --bracket-mark-inset:0px;
  --bracket-mark-tick-len:0px;
  --bracket-mark-tick-weight:0px;
  --bracket-mark-tick-gap:0px;
}
body{background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--body-size);line-height:var(--body-lh);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none;border-bottom:var(--rule-hairline) solid var(--link);transition:color .12s linear,border-color .12s linear}
a:hover{color:var(--link-hover);border-bottom-color:var(--link-hover)}
a:active{color:var(--acb-crimson-press)}
::selection{background:var(--acb-crimson);color:var(--acb-cream)}
hr{border:0;border-top:var(--rule-hairline) solid var(--border-hairline);margin:var(--space-5) 0}
