/* ==========================================================================
   INTERLINK INVENT — RESET + ELEMENT DEFAULTS
   ========================================================================== */

/* ---------- Self-hosted fonts -------------------------------------------
   Drop the .woff2 files into /assets/fonts/. Until then the stack falls
   back to Futura / Century Gothic / system-ui, which is visually close.
   font-display:swap keeps first paint instant on Hostinger shared hosting. */

@font-face{font-family:'Jost';src:url('../fonts/jost-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}


/* ---------- Reset -------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* offset anchor targets so the fixed header never covers a heading */
  scroll-padding-top:calc(var(--header-h-sub) + var(--sp-5));
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink-soft);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--fw-light);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Locks scroll while the mobile menu or lightbox is open */
body.is-locked{overflow:hidden}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}

img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}

button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-appearance:none}

a{color:inherit;text-decoration:none}

hr{border:0;border-top:1px solid var(--c-rule);margin:0}


/* ---------- Headings ----------------------------------------------------
   All headings are UI-font. Display headings are light and tight; section
   labels are small, uppercase and heavily tracked.                        */

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-ui);
  font-weight:var(--fw-light);
  line-height:var(--lh-tight);
  color:var(--c-ink);
}

h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-snug)}
h4{font-size:var(--fs-h4);line-height:var(--lh-snug);letter-spacing:var(--ls-title)}
h5,h6{
  font-size:var(--fs-nano);
  font-weight:var(--fw-medium);
  text-transform:uppercase;
  letter-spacing:var(--ls-chrome);
}

p + p{margin-top:1.25em}

strong,b{font-weight:var(--fw-medium);color:var(--c-ink)}
em,i{font-style:italic}

::selection{background:var(--c-ink);color:var(--c-bg)}


/* ---------- Focus -------------------------------------------------------
   Visible for keyboard users, invisible for mouse users. Never remove.    */

:focus{outline:none}
:focus-visible{
  outline:2px solid var(--c-focus);
  outline-offset:3px;
}

/* Skip link — first tab stop on every page */
.skip-link{
  position:absolute;top:-100px;left:var(--gutter);
  z-index:var(--z-toast);
  background:var(--c-ink);color:var(--c-bg);
  padding:var(--sp-3) var(--sp-5);
  font-family:var(--font-ui);font-size:var(--fs-nano);
  text-transform:uppercase;letter-spacing:var(--ls-chrome);
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{top:var(--sp-4)}


/* ---------- Utilities ---------------------------------------------------- */

.u-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.u-container{
  width:100%;max-width:var(--max-page);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.u-container--wide  {max-width:var(--max-wide)}
.u-container--prose {max-width:calc(var(--max-prose) + var(--gutter) * 2)}
.u-container--flush {max-width:none;padding-inline:0}

.u-section   {padding-block:var(--section-y)}
.u-section--lg{padding-block:var(--section-y-lg)}
.u-section--top-0{padding-top:0}
.u-section--bot-0{padding-bottom:0}

.u-prose{max-width:var(--max-prose)}
.u-center{margin-inline:auto}
.u-text-center{text-align:center}

.u-rule{border-top:1px solid var(--c-rule)}

/* Small uppercase eyebrow label used above every section */
.u-label{
  font-family:var(--font-ui);
  font-size:var(--fs-nano);
  font-weight:var(--fw-medium);
  text-transform:uppercase;
  letter-spacing:var(--ls-chrome);
  color:var(--c-ink-mute);
}