:root{--pink:#eeaeac;--wine:#491521;--green:#273a38;--ink:#142424;--white:#fff;--text:#2b2b2b;--radius:16px;--shadow-sm:0 4px 10px rgba(0,0,0,.15);--shadow-md:0 6px 16px rgba(0,0,0,.2);--max-w:1100px}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--pink);display:flex;flex-direction:column;min-height:100vh}
h1,h2,h3,.brand__title{font-family:"Playfair Display",Georgia,serif;color:var(--ink)}

/* Accessibility: hide Skip link unless keyboard-focused */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden
}
.skip-link:focus{
  position:fixed;left:16px;top:12px;width:auto;height:auto;padding:10px 14px;
  background:var(--wine);color:var(--pink);text-decoration:none;border-radius:10px;
  z-index:10000;box-shadow:0 0 0 3px color-mix(in srgb,var(--pink) 55%, transparent)
}
/* Screen-reader-only utility */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0
}

.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:clamp(16px,2.5vw,32px)}

/* Header */
.header-titlebar{background:var(--wine);color:var(--pink);box-shadow:var(--shadow-sm)}
.titlebar-inner{max-width:var(--max-w);margin:0 auto;padding:12px clamp(16px,2.5vw,32px);display:flex;align-items:center;justify-content:center;gap:10px}
.brand{color:var(--pink);text-decoration:none}
.brand__title{color:var(--pink);font-weight:700;letter-spacing:.2px;font-size:clamp(26px,3.6vw,34px)}
.ig-quick{color:var(--pink);display:inline-flex;align-items:center;justify-content:center}
.ig-quick svg{width:22px;height:22px}
.ig-quick:hover{color:#e1306c}

/* Subnav */
.site-subnav{background:var(--green);color:var(--pink);box-shadow:var(--shadow-sm);position:relative}
.site-subnav .nav-list{max-width:var(--max-w);margin:0 auto;padding:10px clamp(16px,2.5vw,32px);display:flex;gap:clamp(10px,2vw,28px);list-style:none;justify-content:center}
.nav-link{color:var(--pink);text-decoration:none;font-weight:600;padding:8px 12px;border-radius:10px}
.nav-link:hover,.nav-link:focus{background:color-mix(in srgb,var(--pink) 18%, transparent);outline:2px solid color-mix(in srgb,var(--pink) 35%, transparent);outline-offset:2px}
.menu-toggle{display:none;background:transparent;border:0;color:var(--pink);font-size:20px;padding:8px 10px;border-radius:10px;position:absolute;left:8px;top:8px}
@media (max-width:780px){
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .site-subnav .nav-list{display:none;flex-direction:column;align-items:flex-start;background:var(--green);border-radius:12px;margin-top:44px;position:absolute;left:8px;right:8px;padding:12px;box-shadow:var(--shadow-md)}
  .site-subnav[aria-expanded=true] .nav-list{display:flex}
}

/* Footer */
.site-footer{margin-top:auto;background:var(--ink);color:var(--pink);text-align:center;padding:12px 16px}

/* Images */
img{max-width:100%;height:auto;display:block;border-radius:var(--radius);box-shadow:var(--shadow-sm)}

/* Hero */

/* Page headers (About, Portfolio, Services, Contact) */
.page-intro{
  text-align:center;
  margin-bottom:12px;
}
.page-intro h1{ margin:0 0 8px; }
.page-intro p{ margin:0 0 8px; color:var(--ink); }

.hero{text-align:center}
.hero h1{font-size:clamp(32px,5vw,56px);margin:0 0 8px}
.tagline{font-size:clamp(16px,2.4vw,20px);color:var(--ink);margin:0 0 20px}
.hero-image{width:min(100%,900px);margin:0 auto 10px}

/* Instagram section */
.instagram-section{margin-top:8px;text-align:center}
.instagram-wrapper{max-width:900px;margin:0 auto}
.lightwidget-widget{width:100%;border:0}
.ig-cta a{display:inline-block;margin-top:8px;color:var(--ink);background:color-mix(in srgb,var(--pink) 40%, white);text-decoration:none;padding:8px 12px;border-radius:999px;font-weight:600}
.ig-cta a:hover{background:color-mix(in srgb,var(--pink) 55%, white)}

/* About */
.about-section{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:14px;align-items:start}
@media (min-width:820px){.about-section{grid-template-columns:46% 1fr}}
.about-photo{width:100%;height:auto}

/* Portfolio cards */
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.album-card{background:color-mix(in srgb,var(--pink) 15%, white);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.album-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.album-thumb{border-radius:var(--radius);overflow:hidden;background:#fff}
.album-thumb img{width:100%;height:100%;object-fit:contain;aspect-ratio:4/5;border-radius:var(--radius);box-shadow:none}
.album-title{text-align:center;margin:12px 0 2px;color:var(--ink);font-size:1.08rem}

/* Album pages */
.album-page .page-intro{text-align:center;margin-bottom:12px}
.album-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.album-gallery img{width:100%;height:auto;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease}
.album-gallery img:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}

/* Lightbox */
.lb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:9999}
.lb-backdrop.open{display:flex}
.lb-backdrop img{max-width:92vw;max-height:92vh;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.lb-close{position:fixed;top:14px;right:16px;background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:999px;padding:10px 12px;cursor:pointer;font-size:18px}

/* Services */
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:16px}
.service-card{background:var(--white);color:var(--text);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}
.service-card .price{font-weight:700;color:var(--ink)}
.service-info ul{background:transparent;box-shadow:none;padding-left:22px;border-radius:0}

/* CONTACT PAGE STYLES */
body.contact-page {
  /* Full background image with gradient veil */
  background:
    linear-gradient(rgba(238,174,172,.30), rgba(238,174,172,.30)),
    url('/assets/images/contact/contact-photo.jpg')
    center / cover no-repeat;   /* changed: cover (was contain) */
  background-color: #142424;     /* fallback so no pink shows */
}

/* Container keeps enough vertical space for the form */
.contact-page .contact-container {
  position: relative;
  isolation: auto;
  min-height: 74vh;   /* adjusted so footer sits flush */
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.contact-page .contact-container::before { content: none; }

/* Headline text over photo */
.contact-page .page-intro { text-align: center; }
.contact-page .page-intro h1,
.contact-page .page-intro p {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Transparent form styling */
.contact-form-wrap {
  position: relative;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  width: min(720px, 100%);
  margin-inline: auto;
  margin-bottom: 0; /* no gap under form */
}
.form-field { margin-bottom: 12px; }
.contact-page label {
  display: block; font-weight: 600; margin-bottom: 6px;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
input, textarea {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 1rem;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
input::placeholder, textarea::placeholder { color: #666; }
input:focus, textarea:focus { outline: 2px solid var(--wine); outline-offset: 1px; }

.btn {
  appearance: none; border: 0; background: var(--wine); color: var(--pink);
  padding: 10px 14px; border-radius: 999px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.20);
}
.btn:hover { filter: brightness(1.05); }

.contact-alt { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.contact-alt a { color: #fff; font-weight: 600; text-decoration: underline; }

/* Small-screen tune */
@media (max-width: 640px) {
  .contact-page .contact-container { min-height: 72vh; }
}

/* Large screen: sticky footer */
@media (min-width: 900px) and (min-height: 700px) {
  .contact-page .site-footer {
    margin-top: auto;     /* footer stays at bottom */
  }
}

/* Back link (top-left on album pages) */
.crumbs { margin-bottom: 8px; }
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ink); text-decoration:none; font-weight:600;
}
.back-link .arrow{ font-size:20px; line-height:1; }
.back-link:hover{ text-decoration:underline; }

/* Album gallery: keep original aspect, no frames, clean hover */
.album-gallery{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:16px; align-items:start;
}
.album-gallery img{
  width:100%; height:auto; display:block;
  background:transparent !important; padding:0 !important; border:0 !important;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  object-fit: contain; cursor: zoom-in; /* for lightbox */
  transition: transform .18s ease, box-shadow .18s ease;
}
.album-gallery img:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Lightbox: hide close until opened */
.lb-close{ display:none; position:fixed; top:14px; right:16px; z-index:10001;
  background:rgba(0,0,0,.35); color:#fff; border:0; border-radius:999px;
  padding:10px 12px; font-size:20px; cursor:pointer;
}
.lb-close.open{ display:block; }
/* Album intro: back-link inline with the H1 while H1 stays centered */
.album-page .page-intro{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left/back | title | right spacer */
  align-items: center;
  text-align: center;
  gap: 8px;
  margin-bottom: 12px;
}
.album-page .page-intro .back-link{ grid-column: 1; justify-self: start; }
.album-page .page-intro h1{ grid-column: 2; margin: 0; }
.album-page .page-intro p{ grid-column: 1 / -1; margin: 6px 0 0; }

@media (max-width: 640px){
  /* keep it tidy on phones */
  .album-page .page-intro{
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
  }
  .album-page .page-intro .back-link{ grid-column: 1; }
  .album-page .page-intro h1{ grid-column: 2; }
  .album-page .page-intro p{ grid-column: 1 / -1; }
}
/* === Portfolio index layout (grid, like old site) === */
.portfolio-page .page-intro {
  text-align: center;
  margin-bottom: 1.2rem;
}
.portfolio-page .page-intro h1 {
  margin: 0 0 .25rem 0;
}
.portfolio-page .page-intro p {
  margin: 0;
}

/* Grid of album cards */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: start;
}

/* Album card look */
.album-card {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Keep cover photos uncropped (contain), rounded corners */
.album-card .album-cover {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;            /* keeps cards even; adjust if you like */
  object-fit: contain;           /* no cropping */
  border-radius: 12px;
  background: #f7f7f7;
}

/* Caption link under each card */
.album-card .album-caption {
  display: block;
  text-align: center;
  font-weight: 700;
  margin-top: 8px;
  text-decoration: underline;
}

/* Mobile spacing tweak */
@media (max-width: 640px) {
  .portfolio-grid { gap: 16px; }
}
/* === Album page header & blurb centered, like old site === */
.album-page .album-header { 
  text-align: center; 
  margin-bottom: 1rem;
}
.album-page .album-header h1 {
  margin: 0 0 .25rem 0;
}
.album-page .album-header p {
  margin: 0 auto;
  max-width: 60ch;  /* comfortable line length */
}

/* === Album photo grid (not vertical) === */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

/* Keep original aspect ratio, no cropping, with soft card look */
.album-grid figure {
  margin: 0;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.album-grid img {
  display: block;
  width: 100%;
  height: auto;         /* preserves original aspect ratio */
  object-fit: contain;  /* never crop */
  border-radius: 10px;
  background: #f7f7f7;
}

/* Mobile tweak */
@media (max-width: 640px) {
  .album-grid { gap: 12px; }
}