/* ==========================================================
   by catherine lee - shared site styles
   Fonts: Helios Extended (self-hosted, headings/nav/tagline),
          Inter (body copy), Kalam (hand-lettered logo + notes)
   ========================================================== */

@font-face{
  font-family:'Helios Extended';
  src: url('fonts/heliosext.otf') format('opentype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Helios Extended';
  src: url('fonts/heliosext_bold.otf') format('opentype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Helios Extended';
  src: url('fonts/heliosext_italic.ttf') format('truetype');
  font-weight:500;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Helios Extended';
  src: url('fonts/heliosext_bold_italic.ttf') format('truetype');
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

:root{
  /* official brand palette */
  --cream:#FDF6E3;    /* soft beige */
  --coral:#FFB5A7;    /* light coral */
  --mint:#B5EAD7;     /* soft teal */
  --lavender:#D4CBE5; /* thistle */
  --plum:#4B3B47;     /* eggplant */
  --tape:#8AD6E2;
  --tape-dark:#63b9c6;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', sans-serif;
  background:var(--plum);
  color:var(--cream);
  min-height:100vh;
  opacity:1;
  transition:opacity 0.35s ease;
}

/* ---------- page transitions ----------
   a simple editorial crossfade: the page starts invisible only while
   html carries the .preload class (added synchronously, before first
   paint, by transitions.js), then transitions.js removes that class a
   moment after load, letting body fall back to its own plain opacity:1
   rule and fade in. This is a ONE-WAY toggle - we never try to make a
   more-specific "show" rule out-fight a "hide" rule (that's what broke
   it last time); removing the class is what reveals the page, so there
   is no specificity race and no way to get stuck invisible. If the
   script fails for any reason, .preload is simply never added and the
   page just renders normally. */
html.preload body{ opacity:0; transition:none; }
body.page-leaving{ opacity:0; }

/* ---------- ambient background glow ----------
   soft, blurred color blobs from the brand palette, tucked behind all
   page content (z-index:-1) with a very slow drift - same "blurred glow"
   look as the My Work click-in view, now living quietly behind the page
   itself. Purely decorative: fixed, non-interactive, ignored by
   assistive tech. */
.page-glow{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
/* radial gradients (color fading to transparent) instead of flat discs -
   softer falloff so there's no solid-color hot spot behind text, then
   blurred further on top of that for an even gentler wash of color */
.page-glow span{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:0.3;
  will-change:transform;
}
.page-glow .glow-1{
  width:56vw; height:56vw; max-width:640px; max-height:640px;
  top:-18%; left:-14%;
  background:radial-gradient(circle, var(--coral) 0%, transparent 68%);
  animation:glow-drift-1 13s ease-in-out infinite;
}
.page-glow .glow-2{
  width:52vw; height:52vw; max-width:600px; max-height:600px;
  bottom:-20%; right:-12%;
  background:radial-gradient(circle, var(--mint) 0%, transparent 68%);
  animation:glow-drift-2 16s ease-in-out infinite;
}
.page-glow .glow-3{
  width:44vw; height:44vw; max-width:520px; max-height:520px;
  top:34%; left:56%;
  background:radial-gradient(circle, var(--lavender) 0%, transparent 68%);
  animation:glow-drift-3 11s ease-in-out infinite;
}
@keyframes glow-drift-1{
  0%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(10%,14%) scale(1.15); }
  66%{ transform:translate(-6%,8%) scale(0.92); }
  100%{ transform:translate(0,0) scale(1); }
}
@keyframes glow-drift-2{
  0%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(-12%,-9%) scale(0.9); }
  66%{ transform:translate(7%,-13%) scale(1.12); }
  100%{ transform:translate(0,0) scale(1); }
}
@keyframes glow-drift-3{
  0%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(-11%,11%) scale(1.18); }
  66%{ transform:translate(9%,-6%) scale(0.9); }
  100%{ transform:translate(0,0) scale(1); }
}
@media (max-width:700px){
  .page-glow span{ filter:blur(45px); opacity:0.22; }
}

a{ color:inherit; text-decoration:none; }

h1,h2,h3,.heading{
  font-family:'Helios Extended', 'Archivo Expanded', sans-serif;
  font-weight:500;
  letter-spacing:-0.01em;
}

.hand{ font-family:'Kalam', cursive; }

/* ---------- jitter: only wiggles on hover, otherwise still ---------- */
@keyframes jitter{
  0%, 100%{ transform: rotate(0deg) translateY(0); }
  20%{ transform: rotate(-1.4deg) translateY(-1px); }
  40%{ transform: rotate(1deg) translateY(0); }
  60%{ transform: rotate(-0.8deg) translateY(-1px); }
  80%{ transform: rotate(0.6deg) translateY(0); }
}
.jitter{
  display:inline-block;
  cursor:pointer;
}
.jitter:hover{
  animation: jitter 0.55s ease-in-out;
}

/* ---------- nav ---------- */
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:34px 5vw;
  position:relative;
}
.logo{
  display:inline-block;
  width:min(82px, 16.5vw);
}
.logo img{ display:block; width:100%; height:auto; }

.nav-links{
  display:flex;
  gap:44px;
  font-family:'Helios Extended', sans-serif;
  font-size:0.92rem;
}
.nav-links a{
  position:relative;
  transition:color 0.2s ease;
}
.nav-links a:hover{ color:var(--coral); }
.nav-links a.active{ color:var(--coral); }
.nav-links a.active::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  border-radius:2px;
  background:var(--coral);
}

/* ---------- mobile hamburger toggle ---------- */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;
  height:32px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  z-index:100;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:2.5px;
  border-radius:2px;
  background:var(--cream);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width:700px){
  .nav-toggle{ display:flex; }
  /* keep the (now X) toggle pinned in place, above the full-screen
     menu, so it's always reachable to close */
  .nav-toggle.open{
    position:fixed;
    top:34px;
    right:5vw;
    z-index:110;
  }

  /* full-screen menu overlay instead of pushing page content down */
  .nav-links{
    display:none;
    position:fixed;
    inset:0;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:30px;
    padding:0 14vw;
    margin:0;
    background:var(--plum);
    z-index:95;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{
    font-size:1.64rem; /* 18% smaller than the previous 2rem */
    text-align:left;
  }
}

/* ---------- generic placeholder page ---------- */
.coming-soon{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:16px;
  padding:0 6vw;
}
.coming-soon h1{ font-size:clamp(2rem, 5vw, 3.2rem); }
.coming-soon p{
  font-family:'Inter', sans-serif;
  opacity:0.75;
  max-width:420px;
  line-height:1.6;
}
.coming-soon a.back{
  margin-top:10px;
  font-family:'Helios Extended', sans-serif;
  border-bottom:1.5px solid var(--cream);
  padding-bottom:2px;
}

/* ---------- site footer ---------- */
/* soft teal against the eggplant that anchors the rest of the site -
   same contrast pairing as the mint bar on the old site */
.site-footer{
  background: var(--mint);
  color: var(--plum);
  text-align:center;
  padding:80px 6vw 56px;
}
.site-footer h2{
  font-family:'Helios Extended', sans-serif;
  font-weight:500;
  font-size:clamp(1.05rem, 2.52vw, 1.68rem); /* 30% smaller than before */
  letter-spacing:-0.01em;
  margin-bottom:24px;
}
.footer-email{
  display:inline-block;
  font-family:'Inter', sans-serif;
  font-size:1rem;
  color:var(--plum);
  text-decoration:underline;
  text-underline-offset:3px;
  margin-bottom:28px;
}
.footer-social{
  display:flex;
  justify-content:center;
}
.footer-social a{
  display:inline-flex;
  color:var(--plum);
}
.footer-social svg{
  width:26px;
  height:26px;
  display:block;
}

/* phone only: email + instagram icon 15% smaller; laptop unchanged */
@media (max-width:700px){
  .footer-email{ font-size:0.85rem; }
  .footer-social svg{ width:22px; height:22px; }
}