/* ════════════════════════════════════════════════════════════════
   NO SOCIALS LIBATIONS · shared styles (used by every page)
   1. COLORS: change --main and --contrast below and every page
      updates at once.
   ════════════════════════════════════════════════════════════════ */
:root{
  --main:     #330805;   /* deep mahogany  */
  --contrast: #EDCB9A;   /* backbar cream  */
  --fade: 2s;            /* hero slideshow crossfade length */
}

/* ══════════════ base ══════════════ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  background:var(--main);
  color:var(--contrast);
  font-family:"Fraunces", Georgia, serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
figure{ margin:0; }
::selection{ background:var(--contrast); color:var(--main); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--contrast); outline-offset:4px; }

/* letterspaced label, echoing "L I B A T I O N S" in the logo */
.kicker{
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:clamp(.82rem, 1.3vw, 1.02rem);
  font-weight:600;
  margin:0;
  opacity:.9;
}

/* the double rule, borrowed from the underline of the "No" mark.
   Built as two identical hairlines so it renders evenly everywhere.
   It carries all the spacing itself, so it always sits the same
   distance from the words above it, in every section. */
.double-rule{
  width:64px;
  display:flex; flex-direction:column; gap:4px;
  margin:12px auto 44px;
  opacity:.9;
}
.double-rule::before, .double-rule::after{
  content:""; height:1.5px; background:currentColor;
}

/* ══════════════ burger menu ══════════════ */
.menu-btn{
  position:fixed; top:22px; right:22px; z-index:60;
  width:52px; height:52px; padding:0;
  appearance:none; -webkit-appearance:none;
  background:color-mix(in srgb, var(--main) 82%, transparent);
  backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb, var(--contrast) 45%, transparent);
  display:grid; place-items:center;
  cursor:pointer;
}
.menu-btn:focus-visible{ outline:2px solid var(--contrast); outline-offset:3px; }
.menu-btn .bars{ width:22px; display:flex; flex-direction:column; gap:5px; }
.menu-btn .bars span{ height:2px; background:var(--contrast); transition:transform .35s ease, opacity .35s ease; }
body.menu-open .menu-btn .bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .menu-btn .bars span:nth-child(2){ opacity:0; }
body.menu-open .menu-btn .bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:50;
  background:color-mix(in srgb, var(--main) 96%, black);
  display:grid; place-items:center; text-align:center;
  overflow-y:auto;
  padding:70px 24px;
  opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility 0s linear .4s;
}
body.menu-open .menu{
  opacity:1; visibility:visible;
  transition:opacity .4s ease;
}
body.menu-open{ overflow:hidden; }
.menu nav{ display:flex; flex-direction:column; gap:34px; }
.menu a{
  color:var(--contrast); text-decoration:none;
  font-size:clamp(1.8rem, 4.5vw, 2.7rem);
  font-weight:500; letter-spacing:.02em;
  opacity:.85;
  transition:opacity .3s ease, letter-spacing .3s ease;
}
.menu a:hover{ opacity:1; letter-spacing:.06em; }

/* ══════════════ portraits · cream-matted prints ══════════════ */
.matted{
  background:var(--contrast);
  padding:14px 14px 20px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.portrait-frame{ position:relative; overflow:hidden; }
.pslide{
  width:100%;
  aspect-ratio:744/777;   /* every portrait crops to the same frame */
  object-fit:cover;
  transition:opacity 1.2s ease-in-out;
}
.pslide:not(:first-child){ position:absolute; inset:0; height:100%; }
.pslide:not(.active){ opacity:0; }
.pslide.empty{
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--main) 86%, var(--contrast));
  color:color-mix(in srgb, var(--contrast) 45%, transparent);
  font-size:1.6rem;
}

/* ══════════════ cocktail prints · floating hairline frames ══════ */
.cocktail{
  outline:1px solid color-mix(in srgb, var(--contrast) 45%, transparent);
  outline-offset:12px;
  box-shadow:0 22px 60px rgba(0,0,0,.45);
}
.cocktail img{ width:100%; }
.cocktail.empty{
  aspect-ratio:2/3;
  outline-style:dashed;
  box-shadow:none;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--contrast) 5%, transparent);
  color:color-mix(in srgb, var(--contrast) 35%, transparent);
  font-size:1.25rem;
}

/* gentle scroll-in reveal (order matters: hover rule comes after) */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s ease, transform .9s ease, box-shadow .5s ease;
}
.reveal.in{ opacity:1; transform:none; }
.cocktail:hover{
  transform:translateY(-8px);
  box-shadow:0 34px 84px rgba(0,0,0,.55);
}
.cocktail.empty:hover{ transform:none; box-shadow:none; }

/* ══════════════ shared text + button styles ══════════════ */
.name{
  font-size:clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight:600;
  letter-spacing:.01em;
  margin:0 0 8px;
}
.role{
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:.72rem;
  font-weight:500;
  margin:0 0 20px;
  opacity:.75;
}
.bio{
  font-size:1rem;
  line-height:1.75;
  font-weight:300;
  margin:0 0 28px;
  color:color-mix(in srgb, var(--contrast) 88%, transparent);
}
.resume-link{
  display:inline-block;
  color:var(--contrast);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.74rem;
  font-weight:500;
  border:1px solid var(--contrast);
  padding:15px 26px 14px 30px;
  transition:background .35s ease, color .35s ease;
}
.resume-link:hover{
  background:var(--contrast);
  color:var(--main);
}
.resume-link .arrow{ letter-spacing:0; margin-left:.6em; }
.resume-link.is-disabled{ border-style:dashed; opacity:.45; pointer-events:none; }

/* quiet text link (used for email etc.) */
.ghost-link{
  color:var(--contrast);
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
  opacity:.8;
}
.ghost-link:hover{ opacity:1; }

/* ══════════════ footer ══════════════ */
footer{
  border-top:1px solid color-mix(in srgb, var(--contrast) 25%, transparent);
  text-align:center;
  padding:70px 24px 60px;
}
.footer-logo{ width:118px; margin:0 auto 26px; opacity:.95; }
.foot-contact{
  display:inline-block;
  margin:0 auto 30px;
  color:var(--contrast);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.68rem;
  font-weight:500;
  border:1px solid color-mix(in srgb, var(--contrast) 55%, transparent);
  padding:13px 26px 12px 30px;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.foot-contact:hover{
  background:var(--contrast);
  color:var(--main);
  border-color:var(--contrast);
}
.foot-contact .arrow{ letter-spacing:0; margin-left:.6em; }
.foot-line{
  font-style:italic;
  font-weight:300;
  font-size:1rem;
  margin:0 0 20px;
  opacity:.85;
}
.foot-line a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.foot-line a:hover{ text-decoration-thickness:2px; }
.copy{
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:.64rem;
  margin:0;
  opacity:.5;
}

/* ══════════════ small screens · phone polish ══════════════ */
/* 16px form fields stop iPhones from zooming in on focus */
@media (max-width:640px){
  input, select, textarea{ font-size:16px; }
}
/* on touch screens, hover lifts should not stick after a tap */
@media (hover:none){
  .cocktail:hover{ transform:none; box-shadow:0 22px 60px rgba(0,0,0,.45); }
}

/* ══════════════ calm mode ══════════════ */
@media (prefers-reduced-motion:reduce){
  .slide, .cue-line, .hero-logo{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}