/* ===========================================================
   BASE — reset, grid system, motion primitives
=========================================================== */

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

html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.5;
  overflow-x: hidden;   /* oversized type is allowed to extend past the grid */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1,h2,h3,h4{ margin: 0; font-weight: inherit; }
p{ margin: 0; }

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

:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper); padding: 14px 20px;
  font-size: var(--t-sm);
}
.skip-link:focus{ left: 16px; top: 16px; }

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

/* -----------------------------------------------------------
   GRID — 12 columns, page padding on .pad, full-bleed children
   live outside it.
----------------------------------------------------------- */
.pad{ padding-inline: var(--pad); }

.grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
@media (max-width: 760px){
  .grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
}

/* column span helpers */
.c-1{ grid-column: span 1; }  .c-2{ grid-column: span 2; }
.c-3{ grid-column: span 3; }  .c-4{ grid-column: span 4; }
.c-5{ grid-column: span 5; }  .c-6{ grid-column: span 6; }
.c-7{ grid-column: span 7; }  .c-8{ grid-column: span 8; }
.c-9{ grid-column: span 9; }  .c-10{ grid-column: span 10; }
.c-11{ grid-column: span 11; } .c-12{ grid-column: span 12; }

@media (max-width: 760px){
  [class*="c-"]{ grid-column: 1 / -1; }
}

.band{ padding-block: var(--band); }
.band-sm{ padding-block: calc(var(--band) * 0.55); }

.measure{ max-width: 58ch; }
.measure-sm{ max-width: 44ch; }

/* -----------------------------------------------------------
   BUTTONS / LINKS
----------------------------------------------------------- */
.cta{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border-radius: 100px;
  border: 1px solid var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
}
.cta:hover{ background: var(--ink); color: var(--paper); }
.cta-solid{ background: var(--ink); color: var(--paper); }
.cta-solid:hover{ background: transparent; color: var(--ink); }

/* Underline that draws in from the left on hover. */
.ul-link{
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.ul-link::after{
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.ul-link:hover::after, .ul-link:focus-visible::after{ transform: scaleX(1); }

/* -----------------------------------------------------------
   MOTION PRIMITIVES
   One shared reveal. Elements opt in with [data-reveal];
   stagger via --d. Everything is disabled under
   prefers-reduced-motion.
----------------------------------------------------------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .9s var(--ease-out) var(--d, 0s),
    transform .9s var(--ease-out) var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal].in{ opacity: 1; transform: none; }

/* Line-by-line clip reveal for display type. */
.line-mask{ overflow: hidden; display: block; }
.line-mask > span{
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-out) var(--d, 0s);
  will-change: transform;
}
.loaded .line-mask > span,
.in .line-mask > span{ transform: none; }

/* Images scale down gently into place as they enter. */
[data-img-reveal]{
  overflow: hidden;
}
[data-img-reveal] > *{
  transform: scale(1.06);
  opacity: 0;
  transition: transform 1.4s var(--ease-out), opacity 1s var(--ease-out);
}
[data-img-reveal].in > *{ transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal]{ opacity: 1; transform: none; }
  .line-mask > span{ transform: none; }
  [data-img-reveal] > *{ transform: none; opacity: 1; }
  .parallax{ transform: none !important; }
}