:root{
  /* Backgrounds */
  --background:     #F3EEE3;   /* cream: page, picture frames, button text during hover flash */
  --bar-background: #F3EEE3;   /* top bar and footer (currently same as the page) */

  /* Browns */
  --text:           #33291F;   /* main text, site name, nav link when hovered or current */
  --muted:          #766753;   /* tagline, captions, nav links, footer text */

  /* Accent */
  --blue:           #3F6F8C;   /* dusty blue: links, buttons, small heading above titles,
                                  short rule under headings, underline on current nav link */
  --blue-deep:      #284B61;   /* darker blue: buttons start here when hovered; button text once faded */
  --blue-light:     #90D5FF;   /* light blue: what a hovered button fades to */

  /* Lines */
  --frame-line:     #C9BFAC;   /* thin outline around picture frames */
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ height:100%; }
body{
  min-height:100%;
  display:flex; flex-direction:column;
  background:var(--background);
  color:var(--text);
  font-family:'Karla', sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
main{ flex:1; }

::selection{ background:var(--blue); color:var(--background); }

h1,h2,h3{ font-family:'Fraunces', serif; font-weight:560; line-height:1.15; }

a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
a:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:2px; }
nav a:focus-visible{ outline-color:var(--blue); }

.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

/* ---------- Top bar ---------- */
nav{
  position:sticky; top:0; z-index:10;
  background:var(--bar-background);
}
.nav-inner{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:8px 24px;
  padding:18px 24px; max-width:1080px; margin:0 auto;
}
.nav-name{
  font-family:'Fraunces', serif; font-size:1.15rem; font-weight:560;
  color:var(--text); letter-spacing:.01em;
}
.nav-name:hover{ text-decoration:none; }
.nav-links{ display:flex; gap:28px; }
/* Page title in the middle of the top bar (used on the gallery page) */
.nav-inner.with-title{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline;
}
.nav-inner.with-title .nav-links{ justify-self:end; }
.nav-title{ color:var(--text); }
@media (max-width:700px){
  /* On phones the gallery top bar is laid out exactly like the other pages
     (name left, links right); "Gallery" goes on its own centred line below. */
  .nav-inner.with-title{ display:flex; }
  .nav-inner.with-title .nav-title{ order:3; flex-basis:100%; text-align:center; }
}
.nav-links a{
  font-size:.8rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  padding-bottom:3px; border-bottom:2px solid transparent;
}
.nav-links a:hover{ color:var(--text); text-decoration:none; }
.nav-links a.current{ color:var(--text); border-bottom-color:var(--blue); }

/* ---------- Page heading ---------- */
header.hero{ padding:80px 0 20px; text-align:center; }
.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue); margin-bottom:20px;
}
.hero h1{ font-size:clamp(2.4rem, 7vw, 4.2rem); letter-spacing:-.01em; }
.hero p.tagline{
  margin:22px auto 0; max-width:520px;
  font-family:'Fraunces', serif; font-style:italic;
  font-size:1.2rem; color:var(--muted);
}
.rule{
  width:64px; height:2px; background:var(--blue);
  margin:38px auto 0; border:0;
}

section{ padding:24px 0 90px; }

/* ---------- Framed images ---------- */
figure.art{ break-inside:avoid; margin:0 0 40px; }
.frame{
  background:var(--background);
  border:1px solid var(--frame-line);
  padding:14px;
  box-shadow:0 1px 2px rgba(51,41,31,.06), 0 10px 26px -14px rgba(51,41,31,.28);
  transition:transform .35s ease, box-shadow .35s ease;
}
.frame img{ display:block; width:100%; height:auto; }

figcaption{ padding:14px 4px 0; }
figcaption .title{
  font-family:'Fraunces', serif; font-style:italic;
  font-size:2.1rem; line-height:1.2; color:var(--text);
}
figcaption .detail{
  margin-top:2px;
  font-size:.72rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}

/* ---------- Gallery page ---------- */
/* One picture at a time, centred. Clicking the picture shows the next
   one (see site.js). */
/* Every picture is shown at the same height (--gallery-height), so a
   landscape picture comes out wider rather than smaller. On narrow screens
   the picture simply fills the available width. */
.gallery{ --gallery-height:425px; max-width:820px; margin:0 auto; text-align:center; }
.gallery .frame{ align-self:center; max-width:100%; }
.gallery .frame img{
  width:auto; max-width:100%;
  height:auto; max-height:min(var(--gallery-height), 70vh);
}
.gallery .frame{
  padding:12px;
  box-shadow:0 2px 3px rgba(51,41,31,.06), 0 18px 34px -14px rgba(74,31,24,.4);
  transition:none;
}
.gallery figure.art.reveal{ transition:none; }
/* Caption sits above the picture, so it stays put when pictures of
   different heights swap in below it. */
.gallery figure.art{ display:flex; flex-direction:column; }
.gallery figcaption{ order:-1; padding:0 4px 14px; }
section.gallery-section{ padding-top:56px; }
.gallery-buttons{ margin-top:8px; }
.gallery.one-at-a-time figure.art{ display:none; }
.gallery.one-at-a-time figure.art.showing{ display:flex; }
.gallery.one-at-a-time .frame{ cursor:pointer; }
.gallery .frame:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; }

/* ---------- About (home) page ---------- */
.about{ text-align:center; }
.about p{ margin:0 auto 1.1em; max-width:58ch; }

/* Animated picture at the top of the home page  */
figure.art.intro-gif{ max-width:340px; margin:0 auto; }
.intro-gif .frame{ padding:12px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- Buttons ---------- */
.buttons{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.buttons.centre{ justify-content:center; }
.button{
  display:inline-block; padding:12px 26px;
  border:1px solid var(--blue); color:var(--blue);
  font-size:.82rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase;
  transition:background .25s ease, color .25s ease;
}
.button:hover{
  background:var(--blue-light); border-color:var(--blue-light); color:var(--blue-deep);
  text-decoration:none;
  animation:button-settle 5s ease-out;   /* change 5s to make the fade slower or faster */
}
@keyframes button-settle{
  from{ background:var(--blue-deep); border-color:var(--blue-deep); color:var(--background); }
  to  { background:var(--blue-light); border-color:var(--blue-light); color:var(--blue-deep); }
}


.button.pressed{
  background:var(--blue-light); border-color:var(--blue-light); color:var(--blue-deep);
  text-decoration:none;
  animation:button-settle 5s ease-out;   /* keep identical to the hover line above */
  /* the label becomes "-breathe-" (set in site.js): italic, lower case, centred */
  font-style:italic; text-transform:none; text-align:center;
}

/* ---------- Contact page ---------- */
.contact{ text-align:center; }
.contact .lead{
  font-family:'Fraunces', serif; font-style:italic;
  color:var(--muted); max-width:46ch; margin:0 auto 6px;
}

/* ---------- Footer ---------- */
footer{
  background:var(--bar-background);
  padding:26px 24px; text-align:center;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Gentle reveal ---------- */
.reveal{ opacity:0; transform:translateY(14px);
         transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
/* Small phones: tighten the top-bar links so they fit on one line */
@media (max-width:480px){
  .nav-links{ gap:16px; }
  .nav-links a{ letter-spacing:.08em; }
}
@media (max-width:700px){
  header.hero-home{ padding-top:28px; }
  section.gallery-section{ padding-top:24px; }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .frame{ transition:none; transform:none; }
  .button:hover, .button.pressed{ animation:none; }
}

/* ---------- Cursive headers ---------- */
.hero h1, .nav-name, .nav-title{
  font-family:'Parisienne', 'Fraunces', cursive;
  font-weight:400; letter-spacing:0;
}
.hero h1{ font-size:clamp(3rem, 9vw, 5.4rem); line-height:1.2; }
.nav-name, .nav-title{ font-size:1.7rem; line-height:1; }