/* ==========================================================================
   The Wandering Teahouse
   Standalone rebuild — no framework, no build step, no dependencies.
   Values derived from the original Squarespace theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette --------------------------------------------------------------- */
  --c-offwhite:  #F7F8F7;  /* page background (green-tinted off-white)        */
  --c-sage:      #BBC3BC;  /* section background — §2, §4, §5                 */
  --c-text:      #000000;  /* body + heading text on sage (measured)          */
  --c-heading-s: #030303;  /* small headings                                  */
  --c-accent:    #C6C6C6;
  --c-link:      #070707;  /* paragraph links                                 */
  --c-hero-bg:   #828282;  /* hero fallback behind the photograph             */
  --c-white:     #FFFFFF;

  /* Typography ------------------------------------------------------------ */
  --font-main: "regulator-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --w-heading: 300;        /* Light — headings                                */
  --w-body:    300;        /* Light — body + site title (matches original)    */

  --ls-heading: .016em;   /* measured from the original */
  --ls-body:    .014em;   /* measured against Light advances                 */
  --ls-title:   .199em;   /* measured                                       */

  /* Type scale — Squarespace's exact formula, reproduced:
       min( (V-1)*1.2vw + 1rem,
            max( (V-1)*0.012*maxPageWidth + 1rem, V*1rem ) )
     with 1rem = 16px and maxPageWidth = 1200px.
     V is the size value set in the original theme:
       site title 2.2 · h2 5.5 · h3 2 · body 1
     Body (V=1) collapses to a flat 16px at every viewport width.        */
  --fs-site-title: min(calc(1.44vw + 1rem), 35.2px);   /* V = 2.2 */
  --fs-display:    min(calc(5.4vw  + 1rem), 88px);     /* V = 5.5 */
  --fs-sub:        min(calc(1.2vw  + 1rem), 32px);     /* V = 2   */
  --fs-body:       1rem;                               /* V = 1   */

  --lh-display: 1.00;
  --lh-sub:     1.22;
  --lh-body:    1.25;
  --lh-title:   1.39;

  /* Layout ---------------------------------------------------------------- */
  --site-max:    1200px;   /* = --maxPageWidth in the original */
  --gutter:      4vw;
  --gutter-mob:  6vw;
  --gap:         11px;

  /* Section padding — original uses vmax:
       small 3.3vmax · medium 6.6vmax · large 10vmax                        */
  --pad-large:  10vmax;
  --pad-medium: 6.6vmax;
  --pad-small:  3.3vmax;

  /* Motion ---------------------------------------------------------------- */
  --motion-duration: .45s;
  --motion-ease: ease;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--c-offwhite);
  color: var(--c-text);
  font-family: var(--font-main);
  font-weight: var(--w-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  text-transform: uppercase;          /* site-wide caps, as per original */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h2, h3, p, figure { margin: 0; }

/* Italic — Regulator Nova Light Italic, via the Adobe kit */
em { font-style: italic; font-weight: inherit; }

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

a { color: var(--c-link); text-decoration: underline; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--c-link); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-offwhite); color: var(--c-link); padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }

.mask-defs { position: absolute; width: 0; height: 0; }

/* --------------------------------------------------------------------------
   3. Header — transparent, overlaid on the hero
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  background: none;                    /* fully transparent */
  padding: clamp(1.5rem, 2.4vw, 4.5rem) var(--gutter) 0;
  pointer-events: none;                /* only the icon is interactive */
}

.header-inner {
  position: relative;
  max-width: var(--site-max);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-title {
  font-size: var(--fs-site-title);
  font-weight: var(--w-body);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
  text-align: center;
  color: var(--c-white);
  margin: 0;
  text-indent: var(--ls-title);        /* offset trailing tracking so it optically centres */
}

/* Instagram — vertically centred on the title block */
.social {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  display: block;
  line-height: 0;
}

.social svg {
  width: 22px;   /* measured from the original (viewBox trimmed to glyph) */
  height: auto;
  fill: var(--c-white);
  transition: opacity .25s ease;
}

.social:hover svg { opacity: .7; }
.social:focus-visible { outline: 2px solid var(--c-white); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   4. Sections + grid
   -------------------------------------------------------------------------- */
.section { position: relative; width: 100%; }

.section--sage { background: var(--c-sage); }

/* Full-bleed image sections */
.section--hero,
.section--interlude { overflow: hidden; background: var(--c-hero-bg); }

.section--hero { height: 100svh; min-height: 34rem; }

/* Measured from the live crop: 2.04 aspect band */
.section--interlude { aspect-ratio: 2.04 / 1; height: auto; }

.section__bg {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Focal points measured against the original crops */
.section--hero      .section__bg { object-position: center 28%; }
.section--interlude .section__bg { object-position: center 68%; }

/* Padding per original section-height setting */
.section--statement { padding-top: 12.2vmax; padding-bottom: 14.6vmax; }
.section--event     { padding-top: 9.4vmax; padding-bottom: 15vmax; }
.section--footer    { padding-top: 3.3vmax; padding-bottom: 9.2vmax; }

/*  24 content columns flanked by gutters — matches the original grid.
    Grid lines therefore run 1 … 26, so column numbers below are the
    same numbers used by the source markup.                              */
.grid {
  display: grid;
  grid-template-columns:
    minmax(var(--gutter), 1fr)
    repeat(24, minmax(0, calc((var(--site-max) - (var(--gap) * 23)) / 24)))
    minmax(var(--gutter), 1fr);
  column-gap: var(--gap);
  row-gap: var(--gap);
  align-content: start;
}

/* --- §2 — tea + ceramics ------------------------------------------------- */
.col-statement-title { grid-column: 2 / 11; padding-top: 38.5px; }
.col-statement-body  { grid-column: 12 / 26; }

.col-statement-body p + p { margin-top: 1.25em; }

/* --- §4 — Tea Event ------------------------------------------------------ */
.col-event-left  { grid-column: 2 / 15; }
.col-event-right {
  grid-column: 16 / 26;
  display: flex;
  flex-direction: column;
  align-items: center;      /* title + photo centred in the right column */
  text-align: center;
}

/* one blank line between the two subtitle lines */
.col-event-left .h-sub + .h-sub { margin-top: calc(var(--lh-sub) * 1em); }
.event-body { margin-top: 2.2em; }
.event-body p + p { margin-top: 1.25em; }
.event-link { margin-top: 2em; }

/* Align the h2 cap top with the h3 cap top in the left column.
   Derived from Regulator Nova metrics (ascent 1.06, cap 0.64):
     cap-top offset = F*(line-height - 1.2)/2 + 0.42F
   h2 (lh 1.00) -> 0.32*F   ·   h3 (lh 1.22) -> 0.43*F                    */
.col-event-right {
  --h2-align: calc(0.43 * var(--fs-sub) - 0.32 * var(--fs-display));
}
.col-event-right .h-display {
  margin-top: var(--h2-align);
  margin-bottom: 1.17em;
}
/* cancel the shift so the cutout keeps its measured position */
.col-event-right .cutout { margin-top: calc(-1 * var(--h2-align)); }

.cutout { width: 87.5%; }   /* measured 432px in a 493.6px column */
.cutout img {
  width: 100%;
  aspect-ratio: 1 / 1.455;   /* ~9% taller than the source 3/4 */
  object-fit: cover;
  clip-path: url(#stacked-circles);
  -webkit-clip-path: url(#stacked-circles);
}

/* --- §5 — colophon ------------------------------------------------------- */
.colophon { grid-column: 2 / 26; text-align: center; }

/* --------------------------------------------------------------------------
   5. Type roles
   -------------------------------------------------------------------------- */
.h-display {
  font-size: var(--fs-display);
  font-weight: var(--w-heading);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-heading);
}

.h-sub {
  white-space: pre-wrap;      /* keeps the double spaces around each | */
  color: var(--c-heading-s);
  font-size: var(--fs-sub);
  font-weight: var(--w-heading);
  line-height: var(--lh-sub);
  letter-spacing: var(--ls-heading);
}

/* --------------------------------------------------------------------------
   6. Scroll-in animation
      Original: opacity 0 + translateY(30%) → 0, .45s ease, staggered delay
   -------------------------------------------------------------------------- */
[data-animate] {
  opacity: 0;
  transform: translateY(30%);
  transition:
    opacity   var(--motion-duration) var(--motion-ease) var(--delay, 0s),
    transform var(--motion-duration) var(--motion-ease) var(--delay, 0s);
  will-change: opacity, transform;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* No JS — never leave content hidden */
.no-js [data-animate] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   7. Responsive — single column below the original 768px breakpoint
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --gutter: var(--gutter-mob); }

  .grid {
    grid-template-columns: minmax(var(--gutter), 1fr) repeat(8, minmax(0, 1fr)) minmax(var(--gutter), 1fr);
  }

  .col-statement-title,
  .col-statement-body,
  .col-event-left,
  .col-event-right,
  .colophon { grid-column: 2 / 10; }

  .col-statement-title { margin-bottom: 1.4em; }

  .col-event-right {
    align-items: stretch;
    text-align: left;
    margin-top: 2.5rem;
  }

  /* Source order on mobile: title, subtitles, paragraphs, link, photo */
  .section--event .grid { display: flex; flex-direction: column; }
  .col-event-right { display: contents; }
  .col-event-right .h-display { order: -1; margin-bottom: 1rem; }
  .col-event-right .h-display { margin-top: 0; }
  .cutout, .col-event-right .cutout { order: 10; margin-top: 2.5rem; }

  .section--hero { height: 88svh; }
  .section--interlude { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   8. Accessibility — respect reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}