@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400;1,6..96,500&family=Libre+Franklin:wght@300;400;500;600&display=swap');

:root{
  --cream: #f6f2ea;
  --cream-deep: #efe9dc;
  --ink: #14110f;
  --ink-soft: #4a453e;
  --taupe: #6f6656;
  --line: #ddd5c3;
  --red: #7c2530;
  --red-soft: #9c3b45;
  --max: 1220px;
  --ease: cubic-bezier(.22,.68,0,1);
  --ease-slow: cubic-bezier(.42,0,.28,1);
}

*{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  /* Stop iOS inflating type when the phone is turned to landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Libre Franklin', -apple-system, sans-serif;
  font-size: clamp(16px, 1vw + 14px, 18px);
  line-height: 1.7;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Suppress the grey flash Safari paints over tapped links. */
  -webkit-tap-highlight-color: transparent;
}

img{ max-width:100%; display:block; }

a{ color: inherit; text-decoration: none; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 48px;
}

:focus-visible{
  outline: 1.5px solid var(--red);
  outline-offset: 3px;
}

/* ---------- Nav ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(246,242,234,0.86);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.nav{
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 48px;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
/* Wide & quiet: light weight, tracking opened right up — restraint through
   air rather than weight.
   The tracking adds a gap after every letter, including the last, so the
   negative margin pulls that phantom space back and keeps the mark optically
   aligned with the left edge. */
.wordmark{
  font-family: 'Bodoni Moda', serif;
  font-weight: 400;
  font-size: 23px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  margin-right: -0.36em;
}
.wordmark span{ color: var(--red); }

.nav-links{
  display:flex;
  gap: 40px;
  list-style:none;
  margin:0; padding:0;
  font-family:'Libre Franklin', -apple-system, sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
}
.nav-links a{
  position:relative;
  padding-bottom: 4px;
  color: var(--ink-soft);
  transition: color .25s ease;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}
.nav-links a:hover, .nav-links a.active{ color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- Live location / local-time line ----------
   No fill, no rule: it should read as a quiet label, not an announcement bar.
   Collapses upward into the nav once the page starts scrolling.              */
.localbar{
  text-align: center;
  font-family:'Libre Franklin', -apple-system, sans-serif;
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--taupe);
  padding: 10px 20px 11px;
  line-height: 1.4;

  max-height: 60px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  /* --ease is deliberately front-loaded for the snappier UI elements, which made
     this read as a snap. A gentler curve over a longer duration suits a slow
     reveal far better. */
  transition:
    max-height 1.05s var(--ease-slow),
    padding-top 1.05s var(--ease-slow),
    padding-bottom 1.05s var(--ease-slow),
    transform 1.05s var(--ease-slow),
    opacity .85s var(--ease-slow);
}
.site-header.condensed .localbar{
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(-10px);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce){
  .localbar{ transition: none; }
}

/* ---------- Hero ---------- */
.hero{
  padding: clamp(64px, 12vw, 120px) clamp(20px, 5vw, 48px) clamp(56px, 9vw, 100px);
  text-align:center;
  max-width: 820px;
  margin: 0 auto;
}
.eyebrow{
  font-family:'Libre Franklin', -apple-system, sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 22px;
}
.hero h1{
  font-family:'Bodoni Moda', serif;
  font-weight: 500;
  font-size: clamp(2.5rem, 5.4vw + 1.1rem, 4.5rem);
  line-height: 1.22;
  letter-spacing: -0.008em;
  margin: 0 0 26px;
  padding-bottom: 0.06em;
  text-shadow: 0 1px 1px rgba(20,17,15,0.06);
}
.hero h1 .word{ overflow: hidden; display: inline-block; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero h1 em{ font-style: italic; font-weight:500; color: var(--red); }
.hero p.lede{
  font-size: clamp(1.05rem, 1vw + 0.85rem, 1.3125rem);
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 620px;
}
.rule{
  width: 64px;
  height: 1px;
  background: var(--red);
  margin: 34px auto;
  opacity:.85;
}
.rule.left{ margin: 34px 0; }

/* A hero whose headline is a quiet statement of fact rather than a claim —
   set close to lede size so it establishes the page without announcing it. */
.hero-quiet{
  padding-top: clamp(52px, 9vw, 96px);
  padding-bottom: clamp(44px, 7vw, 78px);
}
.hero-quiet h1{
  font-size: clamp(1.25rem, 0.9vw + 1rem, 1.7rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin-bottom: 0;
  text-shadow: none;
}
.hero-quiet .rule{ margin: 26px auto; }

/* ---------- Visit the House ----------
   One fact, given the whole width of the page and a great deal of air.
   The point is that nothing competes with it.                          */
.visit-band{
  padding: clamp(110px, 18vw, 210px) 0;
}
.visit{
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.visit .kicker{ margin-bottom: 38px; }
.visit-address{
  font-family:'Bodoni Moda', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw + 0.9rem, 2.35rem);
  line-height: 1.55;
  letter-spacing: 0.004em;
  color: var(--ink);
  margin: 0 0 40px;
}
.visit-hours{
  font-family:'Libre Franklin', -apple-system, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  line-height: 2.1;
  margin: 0 0 44px;
}
.visit-hours span{ display:block; }
.visit .btn{ margin-top: 0; }

/* ---------- Sections ---------- */
section{ padding: 0 clamp(20px, 5vw, 48px); }
.section-inner{ max-width: var(--max); margin: 0 auto; }

.band{
  padding: clamp(60px, 10vw, 116px) 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.band:first-of-type{ border-top:none; }

/* ---------- Section tone rhythm ---------- */
.tone-deep{ background: var(--cream-deep); }
.tone-ink{ background: var(--ink); }
.tone-ink h2, .tone-ink p, .tone-ink .kicker, .tone-ink blockquote{
  color: var(--cream);
}
.tone-ink p.lead{ color: var(--cream); }
.tone-ink .kicker{ color: rgba(246,242,234,0.55); }
.tone-ink .band{ border-top-color: rgba(246,242,234,0.14); }
.tone-ink .band:first-of-type{ border-top:none; }
.tone-ink blockquote cite{ color: #d99aa0; }

.kicker{
  font-family:'Libre Franklin', -apple-system, sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 18px;
}

h2{
  font-family:'Bodoni Moda', serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw + 1rem, 2.625rem);
  line-height: 1.18;
  margin: 0 0 24px;
}

p{ margin: 0 0 20px; color: var(--ink-soft); }
p.lead{ font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.25rem); color: var(--ink); }

/* ---------- About: offerings ---------- */
.offerings{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 40px;
}
.offering{
  background: var(--cream);
  padding: clamp(30px, 5vw, 44px) clamp(18px, 3vw, 30px);
  text-align:center;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.offering:hover{
  background: var(--cream-deep);
  transform: translateY(-3px);
}
.offering .num{
  font-family:'Bodoni Moda', serif;
  font-style: italic;
  color: var(--red);
  font-size: 15px;
  margin-bottom: 14px;
  display:block;
}
.offering h3{
  font-family:'Bodoni Moda', serif;
  font-weight: 500;
  font-size: 24px;
  margin: 0 0 10px;
}
.offering p{
  font-size: 15.5px;
  color: var(--taupe);
  margin:0;
  line-height:1.6;
}

/* ---------- Address / Contact blocks ---------- */
.info-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  margin-top: 10px;
}
.info-block .kicker{ margin-bottom: 14px; }
.info-block .big{
  font-family:'Bodoni Moda', serif;
  font-size: 26px;
  color: var(--ink);
}
@media (max-width: 800px){
  .info-grid{ grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Two-col with image ---------- */
.split{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items:center;
}
.split.reverse{ grid-template-columns: 0.9fr 1.1fr; }
.split.reverse .split-media{ order:2; }
.split.reverse .split-text{ order:1; }
@media (max-width: 860px){
  .split, .split.reverse{ grid-template-columns: 1fr; }
  .split.reverse .split-media, .split.reverse .split-text{ order: initial; }
}

.archival{
  overflow:hidden;
  background:#000;
  position: relative;
}
.archival img{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: grayscale(30%) sepia(14%) contrast(1.03) brightness(0.97);
}
.archival::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 90px rgba(0,0,0,0.28);
}
.caption{
  font-family:'Libre Franklin', -apple-system, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--taupe);
  margin-top: 14px;
  text-align:center;
}

/* Clean (non-archival) portrait treatment for present-day photos */
.portrait{
  overflow:hidden;
  background:#000;
  position: relative;
}
.portrait img{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: contrast(1.03) saturate(1.02);
}
.portrait::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.14);
}

/* Full width photo break.
   Sized to the photograph's own proportions (3:2, near the source's 1.47:1)
   rather than a fixed viewport height. A letterbox band was discarding ~43%
   of the frame — cutting the subject off at the lap and losing the room. */
.photo-break{
  aspect-ratio: 3 / 2;
  max-height: 92vh;
  overflow:hidden;
  background:#000;
  position: relative;
}
.photo-break img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(35%) sepia(12%) contrast(1.02) brightness(0.95);
  object-position: center center;
}
.photo-break::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 110px rgba(0,0,0,0.3);
}

/* Two-up archival gallery */
.gallery-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background:#000;
}
.gallery-two .gallery-item{
  height: 56vh;
  height: 56dvh;
  min-height: 340px;
}
@media (max-width: 720px){
  .gallery-two{ grid-template-columns: 1fr; }
  .gallery-two .gallery-item{ height: 46vh; height: 46dvh; min-height: 280px; }
}

/* Three-up archival gallery */
.gallery-three{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  background:#000;
}
.gallery-three .gallery-item{
  aspect-ratio: 4/5;
  height: auto;
}
@media (max-width: 720px){
  .gallery-three{ grid-template-columns: 1fr; }
}

/* Portrait media card */
.media-card{ aspect-ratio: 4/5; }
.media-card.wide{ aspect-ratio: 16/10; }
/* For landscape originals: forcing one into the 4:5 portrait card threw away
   nearly half the frame. 3:2 matches the source, so the whole picture shows. */
.media-card.landscape{ aspect-ratio: 3/2; }

/* ---------- History timeline text ---------- */
.history-copy{ max-width: 760px; margin: 0 auto; }
.history-copy p{ font-size: 19px; }
.history-copy .drop::first-letter{
  font-family:'Bodoni Moda', serif;
  font-size: clamp(2.75rem, 6vw, 4rem);
  line-height: 0.7;
  float:left;
  padding-right: 12px;
  padding-top: 8px;
  color: var(--red);
  font-weight: 500;
}

blockquote{
  font-family:'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(1.4rem, 3vw + 0.9rem, 2rem);
  line-height: 1.35;
  color: var(--ink);
  text-align:center;
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 0;
}
blockquote cite{
  display:block;
  font-family:'Libre Franklin', -apple-system, sans-serif;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 22px;
}

/* ---------- Names of clientele ----------
   A wrapping flex row left the final line short and the right edge ragged.
   An even grid keeps every row full and both edges flush with the copy above. */
.names{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 30px;
}
.names span, .names a{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 46px;
  font-family:'Libre Franklin', -apple-system, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 10px 12px;
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
/* Two columns holds all the way down to the smallest iPhone — a single
   column turns nine names into a long, monotonous list. */
@media (max-width: 720px){
  .names{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
  /* Nine names leave an orphan in two columns — let the last one span. */
  .names > :last-child{ grid-column: 1 / -1; }
}
@media (max-width: 339px){
  .names{ grid-template-columns: 1fr; }
  .names > :last-child{ grid-column: auto; }
}
.names span:hover{
  border-color: var(--red);
  color: var(--ink);
}
.names a:hover{
  border-color: var(--red);
  color: var(--red);
  background: var(--cream-deep);
}
.names span{ cursor: default; opacity: .82; }

/* ---------- CTA ---------- */
.cta-band{
  text-align:center;
  padding: clamp(64px, 10vw, 116px) clamp(20px, 5vw, 48px);
  border-top: 1px solid var(--line);
}
.cta-band h2{ margin-bottom: 18px; }
.btn{
  display:inline-block;
  margin-top: 18px;
  font-family:'Libre Franklin', -apple-system, sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 16px 38px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  will-change: transform;
}
.btn:hover{ background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.btn.red{ border-color: var(--red); color: var(--red); }
.btn.red:hover{ background: var(--red); color: var(--cream); }

/* ---------- Contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 50px;
}
.contact-card{
  background: var(--cream);
  padding: 56px 34px;
  text-align:center;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.contact-card:hover{
  background: var(--cream-deep);
  transform: translateY(-3px);
}
.contact-card .kicker{ justify-content:center; }
.contact-card .value{
  font-family:'Bodoni Moda', serif;
  font-size: 26px;
  margin: 16px 0 10px;
}
.contact-card .link{
  font-family:'Libre Franklin', -apple-system, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 1px solid var(--red);
  padding-bottom: 2px;
}
@media (max-width: 800px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.map-note{
  text-align:center;
  max-width: 620px;
  margin: 60px auto 0;
  color: var(--taupe);
  font-size: 16px;
}
.map-hours{
  display:block;
  margin-top: 14px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- Footer ---------- */
footer{
  border-top: 1px solid var(--line);
  padding: 50px 48px;
}
.footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  display:flex;
  justify-content: space-between;
  align-items:center;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-word{
  font-family:'Bodoni Moda', serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 18px;
}
.footer-links{
  display:flex;
  gap: 26px;
  list-style:none;
  margin:0; padding:0;
  font-family:'Libre Franklin', -apple-system, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--taupe);
}
.footer-meta{
  font-family:'Libre Franklin', -apple-system, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--taupe);
  width:100%;
  text-align:center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

@media (max-width: 720px){
  .nav{ padding: 16px 20px; }
  .nav-links{ gap: 18px; }
  .offering{ text-align: left; }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px){
  .nav{ padding: 14px 16px; }
  .wordmark{ font-size: 17px; letter-spacing: 0.26em; margin-right: -0.26em; }
  .nav-links{ gap: 12px; }
  .nav-links a{ font-size: 10px; letter-spacing: 0.08em; }
  .localbar{ font-size: 8.5px; letter-spacing: 0.18em; padding: 4px 12px 10px; }
  .info-grid{ gap: 32px; }
  .contact-card{ padding: 40px 22px; }
  .contact-grid{ margin-top: 34px; }
  .gallery-two .gallery-item{ height: 38vh; height: 38dvh; min-height: 220px; }
  .names a, .names span{ font-size: 11.5px; padding: 9px 10px; }
  .footer-inner{ justify-content:center; text-align:center; }
  .footer-links{ justify-content:center; }
}

/* Touch target sizing */
.nav-links a{ display:inline-block; padding: 8px 0; }
.contact-card .link{ display:inline-block; padding: 8px 4px; }

/* ==================================================================
   Touch devices (iPhone in particular)
   ================================================================== */

/* Apple asks for 44x44pt minimum. Rather than pad these links out — which
   would drag the active underline away from the word it belongs to — an
   invisible pseudo-element extends the tappable box while the type stays put. */
@media (hover: none) and (pointer: coarse){
  .nav-links a,
  .footer-links a,
  .contact-card a.link,
  .wordmark{ position: relative; }

  .nav-links a::before,
  .footer-links a::before,
  .contact-card a.link::before,
  .wordmark::before{
    content:"";
    position:absolute;
    left: -8px;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }

  /* These are bordered pills, so real padding is safe and looks intentional. */
  .names a,
  .names span{ padding: 12px 16px; }

  .btn{ padding: 18px 38px; }

  /* Keep the expanded hit boxes from colliding with each other. */
  .nav-links{ gap: 20px; }
  .footer-links{ gap: 22px; }
}

/* Landscape on a notched iPhone: keep content clear of the sensor housing.
   env() resolves to 0 everywhere else, so this is inert on other devices. */
@media (orientation: landscape){
  body{
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}
/* Clear the home indicator. */
footer{ padding-bottom: calc(50px + env(safe-area-inset-bottom)); }