@charset "UTF-8";

/* ========== Base / Theme ========== */
:root{
  --bg:#0b0b0c; --fg:#e8e8e6; --muted:#b7b7b4; --line:rgba(255,255,255,.08);
  --wrap-width: 1100px;

  /* Brand lockup */
  --brand-scale: clamp(32px, 3.5vw, 44px);
  --brand-gap: 4px;
  --logo-nudge: .06em;

  /* Spacing */
  --mobile-menu-gap: 18px;   /* space above the dropdown when open */
  --section-gap: 28px;       /* normal space above content */
  --section-gap-open: 10px;  /* space above content when menu is open (mobile) */
}
@media (prefers-color-scheme: light){
  :root{ --bg:#faf9f7; --fg:#131314; --muted:#5b5b59; --line:rgba(0,0,0,.08); }
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{
  background: var(--bg);
  scrollbar-gutter: stable both-edges; /* prevents header width "jump" when scrollbar appears */
  scroll-behavior: smooth;
}
body{
  margin:0; color:var(--fg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(155,227,201,.08), transparent 60%),
    radial-gradient(1000px 800px at -10% 110%, rgba(155,227,201,.06), transparent 60%),
    var(--bg);
  line-height:1.55; letter-spacing:.005em;
}
.wrap{
  max-width: var(--wrap-width);
  margin:0 auto;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 20px 48px;
}

/* ========== Header / Brand (used by header partial) ========== */
header{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{
  display:inline-grid; grid-template-rows:auto auto; gap:6px;
  width:max-content; flex:0 0 auto; font-size: var(--brand-scale);
}
.brand-row{ display:flex; align-items:baseline; gap:var(--brand-gap); font-size:1em; }
.brand-logo img{
  height:1em; width:auto; display:block; border:0; border-radius:0;
  transform: translateY(var(--logo-nudge));
}
.wordmark{
  font-family:"Fraunces", Georgia, "Times New Roman", serif;
  font-weight:500; line-height:1; margin:0; font-size:1em;
}
.tagline{
  font-size:0.5em; color:var(--muted); letter-spacing:.02em; line-height:1.1; white-space:nowrap;
}

/* Desktop nav */
nav#primary-nav{ display:flex; align-items:center; gap:18px; }
nav#primary-nav a{ color:var(--muted); text-decoration:none; font-size:.95rem }
nav#primary-nav a:hover, nav#primary-nav a:focus{ color:var(--fg) }

/* Mobile hamburger button */
.menu-toggle{
  display:none; appearance:none; border:1px solid var(--line);
  background:transparent; color:var(--fg); border-radius:10px;
  padding:8px; line-height:0; cursor:pointer;
}
.menu-toggle svg{ width:22px; height:22px; }
@media (max-width: 560px){
  .menu-toggle{ display:inline-flex; }
  nav#primary-nav{ display:none; }
}

/* Slide-down mobile nav - transparent & centered */
nav#mobile-nav{ display:none; }
@media (max-width: 560px){
  nav#mobile-nav{
    display:block;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:
      max-height .24s cubic-bezier(.2,.6,.2,1),
      opacity    .24s cubic-bezier(.2,.6,.2,1),
      margin     .24s cubic-bezier(.2,.6,.2,1);
    background: transparent; border:0; padding:0; margin:0;
    will-change: max-height, opacity, margin;
  }
  /* shorter open height + extra top space for smoother feel */
  nav#mobile-nav.open{
    max-height:44px; opacity:1;
    margin: var(--mobile-menu-gap) 0 0 0; /* space above the dropdown */
  }
  nav#mobile-nav .row{
    display:flex; justify-content:center; align-items:center; gap:18px; min-height:28px;
  }
  nav#mobile-nav a{ color:var(--muted); text-decoration:none; font-size:.95rem }
  nav#mobile-nav a:hover, nav#mobile-nav a:focus{ color:var(--fg) }
}

/* ===== Content spacing + smooth shift when menu opens ===== */
.gallery-grid{ margin-top: var(--section-gap); }
.prose{ margin-top: var(--section-gap); font-size:clamp(16px, 1.4vw, 18px); color:var(--fg); line-height:1.65; }

/* Smooth, synced margin change when toggling the menu (no delay) */
.gallery-grid, .prose{
  transition: margin-top .24s cubic-bezier(.2,.6,.2,1);
}

@media (max-width:560px){
  /* reduce the content gap only while the menu is open */
  .wrap:has(#mobile-nav.open) main .gallery-grid{ margin-top: var(--section-gap-open); }
  .wrap:has(#mobile-nav.open) main.prose        { margin-top: var(--section-gap-open); }
}

/* ========== Gallery (index only) ========== */
.gallery-grid{
  display:grid;
  gap:18px;
  grid-template-columns: 1fr; /* default: 1 column */
}
@media (min-width:640px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width:1024px){
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Pictures should fill grid width cleanly */
.gallery-grid picture,
.gallery-grid img{
  display:block;
  width:100%;
  height:auto; /* avoid stretching */
}

/* Progressive image (blur-up) wrapper */
.blur-up {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; /* prevent tiling flash */
  filter: blur(12px);
  transform: scale(1.03); /* hides blur edges */
  border-radius: 14px;     /* match img radius */
  overflow: hidden;        /* Safari-friendly */
}
.blur-up img {
  opacity: 0;
  transition: opacity .35s ease;
  border-radius: 14px; /* keep corners consistent */
}
.blur-up img.is-loaded {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .blur-up { transform: none; filter: none; }
  .blur-up img { transition: none; }
}

/* If you want specific items to be cropped, add class="gallery-item tile-crop" */
.gallery-grid .tile-crop picture,
.gallery-grid .tile-crop img{
  height:100%;
  object-fit:cover;
}

/* Card styling for images */
.gallery-grid img{
  border-radius:14px; border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}

/* ========== About page prose (headings) ========== */
.prose h2{
  font-family:"Fraunces", Georgia, serif; font-weight:500;
  font-size:clamp(26px,2.8vw,32px); margin:0 0 10px;
}
.prose p{ margin:0 0 12px; color:var(--muted); }

/* ========== Footer (used by footer partial) ========== */
footer{
  margin-top:48px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:16px; justify-content:space-between;
}
footer small{ color:var(--muted) }
.lang-toggle{ display:flex; align-items:center; gap:10px; }
.lang-toggle button{
  background:transparent; border:0; color:var(--muted); cursor:pointer; font:inherit; padding:2px 4px;
}
.lang-toggle button.active{ color:var(--fg); text-decoration:underline; }
.sep{ color:var(--line); user-select:none; }

/* ========== a11y helper ========== */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Link styling (global + prose) ===== */

/* Global reset: no blue, no underline by default */
a { color: inherit; text-decoration: none; }
a:visited { color: inherit; }

/* Accessible focus (keyboard): show a clear but minimal cue */
a:focus-visible {
  outline: 2px solid var(--line);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Inline links inside copy (About, etc.) */
.prose a{
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--line);        /* subtle underline */
  padding-bottom: .05em;
  transition: border-color .2s ease, color .2s ease;
}

/* Hover/Focus: gently strengthen the underline */
.prose a:hover,
.prose a:focus-visible{
  border-bottom-color: currentColor;
}

/* ===== Respect reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  nav#mobile-nav{ transition:none !important; }
  .gallery-grid, .prose{ transition:none !important; }
}