/* =========================================================
   Tessa Bennion Art — styles.css
   Mobile-first, academic painter portfolio
========================================================= */

/* ---------------- Tokens ---------------- */
:root{
  --bg: burlywood; /* was #faf9f7 */
  --appbar-h: 56px; /* height of the top app bar */
  --fg:#1c1c1c;
  --muted:#6b6b6b;
  --accent:#7b3f00;
  --maxw:1100px;
  --pad:clamp(.75rem,2vw,1.25rem);

  /* new: parchment-tinted bar backgrounds */
  --bar-tint-1: rgba(250,245,236,.92);
  --bar-tint-2: rgba(250,245,236,.86);

  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-serif:"EB Garamond",Georgia,serif;
  --font-script:"Great Vibes",cursive;
}

/* Make any [hidden] truly hidden (prevents menu lingering) */
[hidden]{ display:none !important; }

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

html, body{
  margin:0;
  padding:0;
  font-family:var(--font-serif);
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden; /* never allow sideways pan */
  touch-action:auto; /* allow normal vertical scrolling */
}

/* Type rendering polish */
body{
  font-kerning: normal;
  font-feature-settings: "kern","liga","onum","pnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video{
  max-width:100%;
  height:auto;
  display:block;
}

/* ---------------- Intro (two-stage fade) ---------------- */
.intro{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  background:#000;
  opacity:1;
  transition:opacity .6s ease;
  overflow:hidden;
}

.intro-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  z-index:1; /* video sits below overlay */
}

/* soft vignette so white text always reads */
.intro::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%);
  z-index:2;
  pointer-events:none;
}

.intro-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:3;
  pointer-events:none; /* overlay doesn't block Skip */
}

.brand-script{
  font-family:var(--font-script);
  font-size:clamp(2rem,6vw,4rem);
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.65), 0 0 1px rgba(0,0,0,.35);
}

/* Safe-area aware Skip button (always visible on iOS) */
.skip-intro{
  position:fixed;
  right:calc(env(safe-area-inset-right,0px) + 12px);
  bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  z-index:4;
  background:rgba(0,0,0,.55);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  padding:.55rem .95rem;
  border-radius:.5rem;
  font-size:.95rem;
  line-height:1;
  backdrop-filter:blur(6px);
}

.intro.fade-video .intro-video{
  opacity:0;
  transition:opacity .7s ease; /* Stage 1: video → black */
}
.intro.fade-overlay{
  opacity:0; /* Stage 2: overlay → gone */
  pointer-events:none;
}

/* ==================================================================== */
/* NEW — Modern App Bar + Two-line Hamburger + Side Drawer              */
/* ==================================================================== */

/* App bar */
.app-bar{
  position:sticky;
  top:0;
  z-index:920;
  display:grid;
  grid-template-columns:auto 1fr auto;  /* avatar | title | burger */
  align-items:center;
  gap:.75rem;
  padding:.5rem var(--pad);
  min-height:var(--appbar-h);
  background:linear-gradient(180deg, var(--bar-tint-1), var(--bar-tint-2)); /* non-white */
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(120,72,24,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 8px 20px rgba(0,0,0,.06);
}

/* Desktop nav (hidden on mobile) */
.desktop-nav{
  display:none;
  gap:1rem;
}
.desktop-nav a{
  text-decoration:none;
  color:var(--fg);
  font:600 .95rem/1 var(--font-sans);
  letter-spacing:.02em;
}
.desktop-nav a:hover,
.desktop-nav a:focus-visible{
  color:var(--accent);
}
.desktop-nav a.active{
  color:var(--accent);
}

/* Equal rail hit-areas = perfect title centering */
.avatar-btn,
.burger{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
}

/* Left: avatar button (navigates to About) */
.avatar-btn{
  background:none;
  border:0;
  padding:.125rem;
  cursor:pointer;
  justify-self:start;                 /* stick left */
}
.app-bar .profile{
  width:40px; height:40px;
  border-radius:50%;
  object-fit:cover;
}

/* Center: title */
.brand-title{
  margin:0;
  font:600 1.15rem/1.1 var(--font-serif);
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  grid-column:2;                      /* force center column */
  margin-inline:auto;                 /* center within column */
  text-align:center;
}

/* Right: two-line hamburger */
.burger{
  --line-w: 22px;
  --line-h: 2px;
  --gap: 6px;

  position:relative;
  width:44px;                         /* container width (lines keep their own width) */
  height:44px;
  align-content:center;
  gap:var(--gap);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  justify-self:end;                   /* stick right */
}
.burger__line{
  display:block;
  width:var(--line-w);
  height:var(--line-h);
  background:#000;
  border-radius:2px;
  transition:transform .28s ease, opacity .28s ease, background-color .28s ease;
  transform-origin:50% 50%;
}

/* Rotate to an X when open (using aria-expanded) */
.burger[aria-expanded="true"] .burger__line:first-child{
  transform:translateY(calc(var(--gap)/2 + var(--line-h)/2)) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__line:last-child{
  transform:translateY(calc(-1 * (var(--gap)/2 + var(--line-h)/2))) rotate(-45deg);
}

/* Drawer + overlay */
.side-drawer{
  position:fixed;
  top:var(--appbar-h);                      /* sit below the app bar */
  right:0;
  width:min(88vw, 340px);
  height:calc(100dvh - var(--appbar-h));
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-left:1px solid rgba(0,0,0,.08);
  z-index:1002;
  transform:translateX(100%);
  transition:transform .28s ease;
}
.side-drawer:not([hidden]){ transform:translateX(0); }

.drawer-overlay{
  position:fixed;
  left:0; right:0;
  top:var(--appbar-h);                      /* do not cover the app bar */
  bottom:0;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(2px);
  z-index:1001;
}

/* Drawer content */
.drawer-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:calc(env(safe-area-inset-top,0px) + 12px) var(--pad) var(--pad);
}

.drawer-links{
  list-style:none;
  margin:0;
  padding:0;
}
.drawer-links li{ margin:0; }
.drawer-links li.sep{
  height:1px;
  margin:.5rem 0;
  background:rgba(0,0,0,.08);
}
.drawer-links a{
  display:block;
  padding:1rem .25rem;
  text-decoration:none;
  color:var(--fg);
  font-size:1.15rem;
  text-align:left;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.drawer-links a:hover,
.drawer-links a:focus-visible{
  background:rgba(0,0,0,.05);
}

/* Drawer footer (social) */
.drawer-social{
  margin-top:auto;
  padding-top:.75rem;
}
.drawer-social a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  color:var(--fg);
  font-family:var(--font-sans, sans-serif);
  font-size:.95rem;
}
.drawer-social a:hover{ text-decoration:underline; }

/* ==================================================================== */
/* Legacy header/menu styles (kept for compatibility with old markup)   */
/* ==================================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem var(--pad);
  background:linear-gradient(180deg, var(--bar-tint-1), var(--bar-tint-2));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(0,0,0,.08);
}

.site-header .menu-trigger{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

#menuTrigger,
.menu-trigger{
  background:none;
  border:none;
  font:600 1.2rem/1 var(--font-serif);
  padding:.6rem;
  color:#000;
  cursor:pointer;
}

#ap-palette-mount{ display:inline-flex; margin-left:.5rem; }
.profile{
  width:40px; height:40px;
  border-radius:50%;
  object-fit:cover;
  margin-left:.75rem;
  cursor:pointer;
}

#menuDropdown,
.menu-dropdown{
  position:absolute;
  top:100%; left:0; right:0;
  background:var(--bg);
  border-bottom:1px solid rgba(0,0,0,.08);
  display:flex; flex-direction:column;
  z-index:910;
}
.menu-link{
  padding:1rem;
  text-align:center;
  text-decoration:none;
  color:var(--fg);
  border-top:1px solid rgba(0,0,0,.05);
  font-size:1.15rem;
}
.menu-link:hover,
.menu-link:focus-visible{ background:rgba(0,0,0,.05); }

#menuOverlay,
.menu-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.2);
  backdrop-filter:blur(2px);
  z-index:905;
}

/* ---------------- Sections ---------------- */
.section{
  padding:2rem var(--pad);
  max-width:var(--maxw);
  margin:0 auto; /* center the main feed */
  position: relative; /* for separators */
  content-visibility:auto;
  contain-intrinsic-size:600px;
}
.section + .section{
  margin-top: 1.25rem;
}
.section + .section::before{
  content:"";
  position: absolute;
  top:-.75rem; left:50%;
  width:min(88%, 760px);
  height:1px;
  transform: translateX(-50%);
  background: linear-gradient(to right, transparent, rgba(0,0,0,.12), transparent);
  opacity:.4;
}
.section-title{
  font-family:var(--font-serif);
  font-size:1.5rem;
  margin:0 0 1.25rem;
  text-align:center;
  font-weight:600;
  letter-spacing:.01em;
  position:relative;
}
.section-title::after{
  content:"";
  display:block;
  width:72px; height:2px;
  margin:.5rem auto 0;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.28), transparent);
  opacity:.6;
}

/* Elegant link styling */
a{
  text-decoration-color: currentColor;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}
a:hover{ color: var(--accent); }

/* ---------------- Vertical stacks (A, B, C…) ---------------- */
.stacks{
  display:grid;
  grid-auto-flow:row;
  grid-template-columns:1fr;
  gap:1.25rem;
}
.stack-row{
  width:100%;
  display:grid;
  place-items:center;
}

/* If a mount still has the old 'rows' class, force vertical behavior */
.rows.stacks{
  overflow:visible !important;
  scroll-snap-type:none !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:1rem !important;
}

/* ---------------- Horizontal rows ---------------- */
.rows{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:.5rem;
  -webkit-overflow-scrolling:touch;
}
.rows::-webkit-scrollbar{ display:none; }

.row{
  display:flex;
  gap:1rem;
  scroll-snap-align:start;
}

/* ---------------- Cards ---------------- */
.card{
  flex:0 0 auto;
  width:min(80vw, 320px);
  scroll-snap-align:start;
  position:relative;
}
.card img,
.card video{
  width:100%;
  border-radius:0;
  border:1px solid rgba(120,72,24,.18);          /* fine rim */
  box-shadow:0 2px 10px rgba(0,0,0,.12);         /* subtle lift */
  object-fit:cover;
}
.card img{
  opacity:0;
  transition:opacity .2s ease;
}
.card img.is-loaded{
  opacity:1;
}

/* Allow vertical scroll when gesture starts on art */
.card, .card a, .card a.lb, .card img, .card video,
.flipstack, .flipstack__item, .flipstack__item img{
  touch-action: pan-y; /* UA handles vertical scroll; JS only takes horizontal flip */
}

/* Keep video cards consistent */
.card video{
  aspect-ratio:16/9;
  border:1px solid rgba(120,72,24,.18);
  background:#000;
}

.card figcaption{
  font-size:.85rem;
  color:var(--muted);
  margin-top:.3rem;
}

/* ---------------- Flip Stack ---------------- */
.flipstack{
  width:min(92vw, 560px);
  aspect-ratio:4/5;
  margin:0 auto;
  border-radius:0;
  position:relative;
  overflow:hidden;
  perspective:900px;
  opacity:0;
  transition:opacity .2s ease;

  --peek-x: 14px;
  --peek-y: 22px;
  --rot: 10deg;
}
.flipstack.is-ready{
  opacity:1;
}

.flipstack__item{
  position:absolute; inset:0;
  border-radius:0;
  box-shadow:0 16px 30px rgba(0,0,0,.18);
  transform-origin:50% 70%;
  transition:transform .28s ease, opacity .28s ease, filter .28s ease;
  will-change:transform, opacity;
}
.flipstack__item img{
  width:100%; height:100%;
  object-fit:cover; border-radius:0;
  border:1px solid rgba(120,72,24,.18);
  opacity:0;
  transition:opacity .2s ease;
}
.flipstack__item img.is-loaded{
  opacity:1;
}

.flipstack__item[data-pos="0"]{
  z-index:3; opacity:1; transform:rotate(0) translateZ(0);
}
.flipstack__item[data-pos="1"]{
  z-index:2; opacity:.92;
  transform: rotate(calc(var(--rot) * -1))
             scale(.975)
             translateY(var(--peek-y))
             translateX(calc(var(--peek-x) * -1));
  filter:saturate(.95) brightness(.99);
}
.flipstack__item[data-pos="2"]{
  z-index:1; opacity:.86;
  transform: rotate(var(--rot))
             scale(.96)
             translateY(calc(var(--peek-y) + 6px))
             translateX(var(--peek-x));
  filter:saturate(.9) brightness(.97);
}
.flipstack__item[data-pos="rest"]{
  z-index:0; opacity:0; transform:scale(.95) translateY(18px);
}

/* Thin light rim */
.flipstack__item[data-pos="1"]::before,
.flipstack__item[data-pos="2"]::before{
  content:"";
  position:absolute; inset:0;
  border-radius:0;
  box-shadow:0 0 0 3px rgba(255,255,255,.85);
  mix-blend-mode:screen;
  pointer-events:none;
}

/* Legacy numeric badge */
.flipstack__badge{
  position:absolute; right:8px; top:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font:600 .8rem/1 var(--font-sans);
  backdrop-filter:blur(2px);
  pointer-events:none;
  z-index:999;
}

/* Dots pagination */
.flipstack__dots{
  position:absolute;
  left:50%; bottom:8px;
  transform:translateX(-50%);
  display:inline-flex; gap:6px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(4px);
  z-index:1000;
}
.flipstack__dot{
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(0,0,0,.35);
  transition:transform .2s ease, background-color .2s ease, opacity .2s ease;
  opacity:.7;
}
.flipstack__dot.is-active{
  background:#000;
  transform:scale(1.35);
  opacity:1;
}

/* Exaggerate the fan briefly while scrolling */
body.stack-peek .flipstack__item[data-pos="1"]{
  transform: rotate(calc(var(--rot) * -1.2))
             scale(.96)
             translateY(calc(var(--peek-y) + 6px))
             translateX(calc(var(--peek-x) * -1.2));
}
body.stack-peek .flipstack__item[data-pos="2"]{
  transform: rotate(calc(var(--rot) * 1.2))
             scale(.955)
             translateY(calc(var(--peek-y) + 10px))
             translateX(calc(var(--peek-x) * 1.2));
  opacity:.9;
}

/* ---------------- About ---------------- */
.about-hero img{
  max-width:280px;
  border-radius:50%;
  margin:0 auto 1rem;
  background:#fff;                                 /* "mat" */
  border: 8px solid #f7f3ed;                        /* mat width */
  outline: 1px solid rgba(120,72,24,.25);          /* hairline rim */
  outline-offset: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.about-copy{
  font-size:1.06rem;
  line-height:1.6;
  max-width:60ch;                                   /* readable width */
  margin:0 auto;
  text-align:center;
}

/* ---------------- Contact ---------------- */
#contact p{ font-size:1.05rem; text-align:center; }
#contact a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:.09em;     /* nicer underline */
  text-underline-offset:.2em;
}
#contact { margin-bottom: 3rem; }

/* Instagram row */
.social-links{
  margin-top:1rem;
  text-align:center;
}
.social-links a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-sans, sans-serif);
  font-size:1rem;
  color:#000;
  text-decoration:none;
  padding:.25rem .4rem;                 /* subtle pill feel */
  border-radius:8px;
}
.social-links a:hover{
  text-decoration:none;
  background:rgba(0,0,0,.04);
}
.social-icon{ width:24px; height:24px; display:inline-block; }

/* ---------------- Bottom Dock ---------------- */
.bottom-dock{
  position:fixed;
  bottom:0; left:0; right:0;
  background:linear-gradient(0deg, var(--bar-tint-1), var(--bar-tint-2)); /* non-white */
  display:flex;
  justify-content:space-around;
  padding:.5rem 0;
  border-top:1px solid rgba(120,72,24,.18);
  backdrop-filter:blur(6px);
  box-shadow:
    0 -1px 0 rgba(255,255,255,.5) inset,
    0 -8px 20px rgba(0,0,0,.06);
  z-index:25;
}

/* ================= Desktop Shell & Grid ================= */
@media (min-width: 1024px){
  .app-bar{
    grid-template-columns:auto 1fr auto;
    padding:.75rem clamp(1rem,3vw,2rem);
  }
  body{
    font-size:18px;
  }
  .desktop-nav{
    display:flex;
    align-items:center;
    grid-column:1;
  }
  .brand-title{
    grid-column:2;
    font-size:1.6rem;
  }
  .avatar-btn{
    grid-column:3;
    justify-self:end;
  }
  .burger{
    display:none;
  }
  .bottom-dock{
    display:none;
  }
  main#main{
    margin:0;
    padding:0 clamp(1rem,3vw,2rem) 4rem;
  }
  .section{
    max-width:1600px;
    margin:0 auto;
    padding:2.5rem 0;
  }
  .section-title{
    text-align:center;
    font-size:2.1rem;
    margin-left:auto;
  }
  .section-title::after{
    margin-left:auto;
  }
  .stacks{
    --grid-gap:1.25rem;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:var(--grid-gap);
    justify-content:center;
    justify-items:center;
  }
  .stack-row{
    display:contents;
  }
  .row{
    display:contents;
  }
  .rows{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:var(--grid-gap);
    overflow:visible;
    justify-content:center;
    justify-items:center;
  }
  .card{
    width:min(100%, 360px);
  }
  .flipstack{
    width:min(100%, 360px);
  }
  .card:hover{
    transform:translateY(-2px);
    transition:transform .2s ease;
  }
}

@media (min-width: 1280px){
  .stacks,
  .rows{
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  }
  .card,
  .flipstack{
    width:min(100%, 380px);
  }
}
.bottom-dock a{
  font-size:.95rem;
  color:var(--fg);
  text-decoration:none;
}
.bottom-dock a.active{
  color:var(--accent);
  font-weight:600;
}
/* highlight class toggled by JS for the centered section */
.bottom-dock a.active-chip{
  color:var(--accent);
  font-weight:600;
}

/* Optional: show active state in the drawer list too */
.drawer-links a.active{
  color:var(--accent);
  font-weight:600;
}

/* ---------------- Lightbox ---------------- */
.lightbox{
  position:fixed; inset:0;
  background:rgba(0,0,0,.88);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:1001;
}
.lb-close{
  position:absolute; top:1rem; right:1rem;
  background:none; border:none; color:#fff; font-size:2rem;
}
#lb-img{ max-width:90%; max-height:80%; border-radius:0; }
.lb-cap{ margin-top:.5rem; font-size:1rem; color:#ddd; }

/* ---------------- Painter UI (palette + toast) ---------------- */
.ap-palette{
  position:relative;
  width:44px; height:32px;
  margin-left:.5rem;
  border:none; background:transparent; cursor:pointer;
}
.ap-palette svg{ width:100%; height:100%; display:block; }
#ap-toast{
  position:fixed; left:50%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 70px);
  transform:translateX(-50%) translateY(20px);
  background:rgba(0,0,0,.7); color:#fff;
  padding:.5rem .8rem; border-radius:.5rem;
  font:.9rem/1 var(--font-sans); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:950;
}
#ap-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* While painting, allow normal scrolling */
.ap-painting-active{ touch-action:auto; }

/* ---------------- Utility ---------------- */
.muted{ color:var(--muted); }
.small{ font-size:.85rem; }

/* Focus outlines for accessibility */
:focus-visible{
  outline:2px solid rgba(0,0,0,.35);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce) {
  .intro{
    transition:none;
  }
  .intro.fade-video .intro-video{
    transition:none;
  }
  .flipstack__item,
  .flipstack__dot{
    transition:none;
  }
}

/* ---------------- Panels for About & Contact ---------------- */
#about.section, #contact.section{
  background:#f7f3ed;
  border:1px solid rgba(120,72,24,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 12px 30px rgba(0,0,0,.08);
  border-radius:14px;
}