@font-face {
  font-family: 'Sora';
  src: url('../assets/fonts/Sora-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../assets/fonts/Sora-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zodiak Variable';
  src: url('../assets/fonts/Zodiak-Variable.ttf') format('truetype-variations'),
       url('../assets/fonts/Zodiak-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zodiak Variable';
  src: url('../assets/fonts/Zodiak-VariableItalic.ttf') format('truetype-variations'),
       url('../assets/fonts/Zodiak-VariableItalic.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-sora); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul{ margin:0; padding:0; font-weight:400; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
/* Text links: same colour as the surrounding text, underlined */
.text-link,
.legal-body a,
.footer-social a,
.footer-links a,
.footer-legal a{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.text-link:hover,
.legal-body a:hover,
.footer-social a:hover,
.footer-links a:hover,
.footer-legal a:hover{ opacity:0.7; }
button{ font-family:inherit; }

/* ---- Responsive grid ----
   Breakpoints (1440 / 810) confirmed directly from the live site's own
   CSS media queries — every responsive rule on loraaistudio.com uses only
   these two.
   Column counts (12/6/4) are from Laura's grid brief. Margin, however,
   was measured directly on the live page (element.left at several widths)
   and does NOT match that brief: it holds at 64px across the whole
   desktop+tablet range (810px and up) and only drops, to 24px (not 32),
   below 810px. Using the measured values here — flagged to Laura since
   it contradicts the numbers she gave.
   Desktop  >=1440px: 12 columns, 64px margin, 32px gutter (fixed at the
            1440 reference frame width — 64*2 + 12*80 + 11*32 = 1440)
   Tablet   810-1439px: 6 columns, 64px margin, 32px gutter
   Mobile   <810px:     4 columns, 24px margin, 24px gutter
*/
:root{
  --grid-margin: 64px;
  --grid-gutter: 32px;
  --grid-cols: 12;
}
@media (max-width:1439px){
  :root{ --grid-cols:6; }
}
@media (max-width:809px){
  :root{ --grid-margin:24px; --grid-gutter:24px; --grid-cols:4; }
}

.wrap{
  max-width:1440px; margin:0 auto;
  padding-inline: var(--grid-margin);
}
.grid{
  display:grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gutter);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}