/* Eskala Residence — base element defaults built on the tokens.
   Editorial, warm, calm. */

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg-page);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-weight:var(--fw-light);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Headings */
h1,h2,h3,h4{
  margin:0 0 .4em;
  color:var(--text-primary);
  font-weight:var(--fw-regular);
  line-height:var(--lh-snug);
  text-wrap:balance;
}
h1{font-family:var(--font-display);font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
h2{font-family:var(--font-serif);font-size:var(--fs-h2);line-height:var(--lh-snug)}
h3{font-family:var(--font-serif);font-size:var(--fs-h3)}
h4{font-family:var(--font-body);font-size:var(--fs-title);font-weight:var(--fw-medium)}

p{margin:0 0 1em;max-width:var(--measure);text-wrap:pretty}

/* Editorial serif italic accent, e.g. "of Elevated Living" */
em,.serif-italic{font-family:var(--font-serif);font-style:italic;font-weight:var(--fw-light)}

/* Tracked eyebrow / overline label */
.overline{
  font-family:var(--font-body);
  font-size:var(--fs-overline);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-overline);
  text-transform:uppercase;
  color:var(--text-accent);
}

a{color:var(--accent);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--accent-hover)}

img{max-width:100%;display:block}

hr{border:none;border-top:1px solid var(--divider);margin:var(--sp-6) 0}

::selection{background:var(--accent-soft);color:var(--maroon-dark)}

:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-xs)}

/* Layout helpers */
.container{max-width:var(--max-width);margin-inline:auto;padding-inline:var(--gutter)}

/* Subtle entrance motion utilities */
@keyframes eskala-fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes eskala-fade{from{opacity:0}to{opacity:1}}
.fade-up{animation:eskala-fade-up var(--dur-slow) var(--ease-out) both}
.fade-in{animation:eskala-fade var(--dur-slow) var(--ease-out) both}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}