/* ============================================================
   CASSAVONA v2 — Base: fonts, reset, paper grain, reveal base
   ============================================================ */
@layer base {

  /* ---- Self-hosted fonts ---- */
  @font-face{font-family:"Libre Caslon Display";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/librecaslon-display-400.woff2") format("woff2")}
  @font-face{font-family:"Libre Caslon Text";font-style:italic;font-weight:400;font-display:swap;src:url("../assets/fonts/librecaslon-text-italic-400.woff2") format("woff2")}
  @font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/archivo-400.woff2") format("woff2")}
  @font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/archivo-500.woff2") format("woff2")}
  @font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/archivo-600.woff2") format("woff2")}
  @font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/archivo-700.woff2") format("woff2")}
  @font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/spacemono-400.woff2") format("woff2")}
  @font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/spacemono-700.woff2") format("woff2")}

  /* ---- Reset ---- */
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  html{
    -webkit-text-size-adjust:100%;text-size-adjust:100%;
    overflow-x:clip;scroll-behavior:smooth;
    scroll-padding-top:calc(var(--nav-h) + var(--space-3));
  }
  body{
    min-height:100svh;
    font-family:var(--ff-body);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;
    color:var(--text-body);background:var(--c-paper);
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    overflow-x:clip;position:relative;
  }
  img,picture,svg,video{display:block;max-width:100%}
  img{height:auto}
  input,button,textarea,select{font:inherit;color:inherit}
  button{background:none;border:0;cursor:pointer}
  a{color:inherit;text-decoration:none}
  ul[role="list"],ol[role="list"]{list-style:none;padding:0}
  summary{list-style:none}summary::-webkit-details-marker{display:none}
  :where(h1,h2,h3,h4){font-family:var(--ff-display);font-weight:400;line-height:var(--lh-head);text-wrap:balance}
  p{text-wrap:pretty}

  /* ---- Paper grain (subtle, over everything; pointer-safe) ---- */
  body::after{
    content:"";position:fixed;inset:0;z-index:5;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px;opacity:.035;mix-blend-mode:multiply;
  }
  @media (max-width:48rem){body::after{opacity:.022}}

  /* ---- Type roles ---- */
  .display{font-family:var(--ff-display);font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:-.012em;text-wrap:balance}
  .h2{font-size:var(--fs-h2)}
  .h3{font-size:var(--fs-h3)}
  .serif{font-family:var(--ff-display)}
  .italic{font-family:var(--ff-italic);font-style:italic}
  .lead{font-size:var(--fs-lead);color:var(--text-body);max-width:var(--measure);line-height:1.6}
  .kicker{
    font-family:var(--ff-mono);font-weight:400;font-size:var(--fs-mono);
    letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--c-rust-2);
  }
  .muted{color:var(--text-on-paper-soft)}
  .stamp{
    font-family:var(--ff-mono);font-size:var(--fs-caption);letter-spacing:.07em;
    text-transform:uppercase;color:var(--text-on-paper-soft);
  }

  /* ---- Focus / selection ---- */
  :focus-visible{outline:2px solid var(--focus);outline-offset:3px}
  :focus:not(:focus-visible){outline:none}
  ::selection{background:var(--c-rust);color:var(--btn-label)}

  .skip-link{
    position:fixed;top:.5rem;left:.5rem;z-index:var(--z-skip);
    background:var(--c-ink);color:var(--text-on-ink);padding:.6rem 1rem;
    font-family:var(--ff-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:.08em;
    transform:translateY(-160%);transition:transform var(--t) var(--ease);
  }
  .skip-link:focus{transform:translateY(0)}
  .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

  /* ---- Reveal base (progressive enhancement: only hides once JS present) ---- */
  html.js [data-reveal]{opacity:0;will-change:opacity,transform}
  html.js [data-reveal="up"],html.js [data-reveal=""]{transform:translateY(20px)}
  html.js [data-reveal="rise"]{transform:translateY(34px)}
  html.js [data-reveal="left"]{transform:translateX(-26px)}
  html.js [data-reveal="right"]{transform:translateX(26px)}
  html.js [data-reveal].is-in{opacity:1;transform:none;will-change:auto}
  html.js [data-reveal]{
    transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease-spring);
    transition-delay:calc(var(--i,0) * 70ms);
  }

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