/* ==========================================================================
   ChinnA's Events: base.css
   Design tokens, reset, typography, layout primitives, motion system.
   ========================================================================== */

/* --------------------------------------------------
   1 · TOKENS
   -------------------------------------------------- */
:root{
  /* Core palette */
  --ink:        #171717;
  --ink-deep:   #0D0D0C;
  --ink-800:    #1C1B19;
  --ink-700:    #262421;
  --ivory:      #F7F3EA;
  --navy:       #172A46;   /* secondary, used sparingly, ~10% of the page */
  --cream:      #EFE8DE;
  --champagne:  #E3D7C2;
  --gold:       #B89B5E;
  --gold-soft:  #D2BB8B;
  --gold-deep:  #8F7742;
  --taupe:      #8A8177;

  /* Semantic: light surfaces */
  --on-light:        #171717;
  --on-light-muted:  #5C574F;
  --line-light:      rgba(23,23,23,.14);
  --line-light-soft: rgba(23,23,23,.08);

  /* Semantic: dark surfaces */
  --on-dark:         #F1ECE4;
  --on-dark-muted:   rgba(241,236,228,.62);
  --line-dark:       rgba(241,236,228,.16);
  --line-dark-soft:  rgba(241,236,228,.08);

  /* Type */
  --serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1440px;
  --sec-y: clamp(5.5rem, 11vw, 11rem);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --nav-h: 112px;   /* sized around the logo lockup, which is four lines deep */
}

@media (max-width: 900px){ :root{ --nav-h: 78px; } }


/* --------------------------------------------------
   2 · RESET
   -------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: var(--nav-h);
}

body{
  margin:0;
  /* Dark canvas: every section paints its own background, so this only shows
     behind the curved bottom corners of the page and in overscroll, both
     places where it should read as the footer. */
  background: var(--ink-deep);
  color: var(--on-light);
  font-family: var(--sans);
  font-size: clamp(1rem, .25vw + .94rem, 1.0625rem);
  font-weight:400;
  line-height: 1.75;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked{ overflow:hidden; }

/* The hidden attribute must beat component display rules: .svc-card is
   display:flex and .gal__item is inline-block, and an author rule outranks
   the UA's [hidden]{display:none}, so JS hiding a card did nothing.
   Filtering and Load More both depend on this. */
[hidden]{ display:none !important; }

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

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

:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
/* <main> only takes focus so the skip link can land there. Outlining the
   whole page would look like a fault; the jump itself is the feedback. */
#main:focus,
#main:focus-visible{ outline:none; }

.skip-link{
  position:absolute; top:-100px; left:1rem; z-index:9999;
  background: var(--ink); color: var(--ivory);
  padding:.75rem 1.25rem; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
}
.skip-link:focus{ top:1rem; }

/* Anchor target must not generate a line box above the hero */
#top{ display:block; height:0; }


/* --------------------------------------------------
   3 · LAYOUT PRIMITIVES
   -------------------------------------------------- */
.container{
  width:100%;
  max-width: var(--maxw);
  margin-inline:auto;
  padding-inline: var(--gutter);
}

.section{ padding-block: var(--sec-y); }


/* --------------------------------------------------
   4 · TYPOGRAPHY
   -------------------------------------------------- */
.h2{
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(2.25rem, 5.1vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.015em;
}
.h2 em{
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

.eyebrow{
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.35rem;
}

.eyebrow--rule{
  display:flex; align-items:center; gap:1rem;
}
.eyebrow--rule::before{
  content:""; width: clamp(28px, 5vw, 64px); height:1px;
  background: currentColor; opacity:.7; flex:none;
}

.lede{
  font-size: clamp(1.02rem, .5vw + .92rem, 1.2rem);
  line-height: 1.7;
}

.rule{
  width: 64px; height:1px;
  background: var(--line-light);
  margin: 2rem 0;
}
.rule--gold{ background: var(--gold); opacity:.55; }

/* Underline-sweep text link with arrow */
.link-arrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.8rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  padding-bottom:.55rem;
  position:relative;
  color: var(--on-light);
}
.link-arrow::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: currentColor; opacity:.28;
  transform-origin: left;
  transition: transform .6s var(--ease), opacity .4s;
}
.link-arrow span{ transition: transform .5s var(--ease); color: var(--gold); }
.link-arrow:hover::after{ opacity:1; }
.link-arrow:hover span{ transform: translateX(7px); }


/* --------------------------------------------------
   5 · MOTION SYSTEM
   -------------------------------------------------- */

/* Scroll reveal. Hidden only when JS is present and able to reveal. */
.js [data-reveal]{
  opacity:0;
  transform: translateY(26px);
  transition:
    opacity  .95s var(--ease) var(--d, 0ms),
    transform .95s var(--ease) var(--d, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in,
.js.reveal-off [data-reveal]{
  opacity:1;
  transform:none;
}

/* Masked line reveal (hero headline).
   padding-bottom keeps serif descenders clear of the overflow mask. */
.line{ display:block; overflow:hidden; padding-bottom:.15em; }
.line__in{
  display:block;
  transform: translateY(108%);
  transition: transform 1.15s var(--ease-out) var(--d, 0ms);
}
html.no-js .line__in,
.is-ready .line__in{ transform:none; }


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


/* --- Lenis (inertia scrolling) ------------------------------------------
   The .lenis class is only on <html> once Lenis has actually started, so
   without JavaScript the native smooth scrolling above still runs. */
html.lenis,
html.lenis body{ height:auto; }
/* Lenis sets the scroll position itself every frame. Leaving the native
   smooth behaviour on would animate each of those steps as well, which reads
   as lag, so hand scrolling over to Lenis completely. */
html.lenis{ scroll-behavior:auto !important; }
/* Panels that scroll inside themselves keep native scrolling. */
html.lenis [data-lenis-prevent]{ overscroll-behavior:contain; }