:root { --ink:#28221f; --soft-ink:#665b54; --paper:#f6f0e8; --paper-deep:#e9ddcf; --clay:#a84f3f; --rose:#d8a7a0; --line:rgba(40,34,31,.22); --display:"Iowan Old Style", "Baskerville", "Palatino Linotype", Georgia, serif; --sans:"Avenir Next", Avenir, "Helvetica Neue", sans-serif; --page:clamp(1.25rem,4vw,4.5rem); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; } body.menu-open { overflow:hidden; } a { color:inherit; text-decoration:none; } button { font:inherit; } img { display:block; max-width:100%; } .sr-only { clip:rect(0 0 0 0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; } .skip-link { position:fixed; z-index:20; top:1rem; left:1rem; transform:translateY(-200%); background:#fff; padding:.75rem 1rem; } .skip-link:focus { transform:translateY(0); } :focus-visible { outline:3px solid var(--clay); outline-offset:3px; }
.notice { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:33px; padding:.35rem var(--page); background:var(--ink); color:var(--paper); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; } .notice a { text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.site-header { min-height:75px; padding:0 var(--page); display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; gap:.58rem; font-family:var(--display); font-size:1.18rem; letter-spacing:-.04em; } .brand-mark { display:grid; place-items:center; width:26px; height:26px; border:1px solid currentColor; border-radius:50%; font-size:1.05rem; font-style:italic; } nav { display:flex; align-items:center; gap:1.65rem; font-size:.78rem; letter-spacing:.04em; } nav a:not(.nav-cta) { border-bottom:1px solid transparent; } nav a:not(.nav-cta):hover { border-color:currentColor; } .nav-cta { padding:.62rem .82rem; border:1px solid var(--ink); } .menu-toggle { display:none; }
.hero { min-height:min(740px,calc(100vh - 108px)); display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,44%); position:relative; border-bottom:1px solid var(--line); } .hero-copy { align-self:center; max-width:720px; padding:5rem clamp(2rem,6vw,7rem) 5rem var(--page); } .kicker,.section-label { margin:0 0 1.35rem; color:var(--clay); font-size:.68rem; font-weight:650; letter-spacing:.13em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--display); font-weight:400; letter-spacing:-.055em; } h1 { max-width:10ch; margin-bottom:1.55rem; font-size:clamp(3.25rem,6.2vw,6.6rem); line-height:.91; } .hero-text { max-width:47ch; color:var(--soft-ink); font-size:1.02rem; } .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; margin-top:2rem; } .button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.75rem 1rem; font-size:.75rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; transition:transform .2s ease,background .2s ease; } .button:hover { transform:translateY(-2px); } .button-dark { background:var(--ink); color:var(--paper); } .text-link { font-size:.78rem; font-weight:650; letter-spacing:.03em; text-decoration:underline; text-underline-offset:5px; } .text-link span { display:inline-block; margin-left:.35rem; text-decoration:none; } .hero-image { min-height:100%; margin:0; position:relative; overflow:hidden; background:#d4c4b6; } .hero-image img { width:100%; height:100%; object-fit:cover; object-position:63% center; } .hero-image:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(40,34,31,.17),transparent 35%); } .hero-image figcaption { position:absolute; z-index:1; right:1.5rem; bottom:1.25rem; color:#fff; font-family:var(--display); font-size:1.2rem; font-style:italic; } .hero-side { margin:0; position:absolute; right:calc(44% + 1.2rem); bottom:1.5rem; font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; writing-mode:vertical-rl; transform:rotate(180deg); }
.section-grid { display:grid; grid-template-columns:22% minmax(0,1fr); gap:2rem; padding:clamp(5rem,10vw,9.5rem) var(--page); border-bottom:1px solid var(--line); } .display-copy { max-width:18ch; margin-bottom:1.8rem; font-family:var(--display); font-size:clamp(2.3rem,4.5vw,4.8rem); line-height:.98; letter-spacing:-.055em; } em { color:var(--clay); } .body-copy { max-width:52ch; color:var(--soft-ink); }
.services { padding:clamp(5rem,10vw,9rem) var(--page); background:var(--paper-deep); } .section-heading { display:grid; grid-template-columns:22% 1fr; gap:2rem; margin-bottom:3rem; } .section-heading h2,.gallery h2,.visit h2 { margin:0; font-size:clamp(2.7rem,5.4vw,5.7rem); line-height:.9; } .service-list { border-top:1px solid var(--line); } .service { display:grid; grid-template-columns:22% 1fr minmax(250px,36%); align-items:baseline; gap:1.5rem; padding:1.5rem 0; border-bottom:1px solid var(--line); } .service span { color:var(--clay); font-size:.7rem; letter-spacing:.1em; } .service h3 { margin:0; font-family:var(--display); font-size:clamp(1.65rem,3vw,2.7rem); font-weight:400; letter-spacing:-.04em; } .service p { margin:0; color:var(--soft-ink); font-size:.9rem; }
.gallery { padding:clamp(5rem,9vw,8.5rem) var(--page); } .gallery-heading { max-width:570px; margin:0 0 3rem auto; } .gallery-heading h2 { margin-bottom:1.2rem; } .gallery-heading > p:last-child { max-width:34ch; color:var(--soft-ink); } .gallery-grid { display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:clamp(.75rem,2vw,2rem); align-items:end; } .gallery-item { margin:0; overflow:hidden; position:relative; background:var(--paper-deep); } .gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .gallery-item:hover img { transform:scale(1.025); } .gallery-item-1 { aspect-ratio:4/5; } .gallery-item-2 { aspect-ratio:4/5; margin-bottom:16%; } .gallery-item-3 { aspect-ratio:4/5; } .gallery-item-3 img { object-position:69% center; } .gallery-item figcaption { position:absolute; left:.9rem; bottom:.8rem; padding:.25rem .45rem; color:#fff; background:rgba(40,34,31,.55); font-size:.67rem; letter-spacing:.08em; text-transform:uppercase; } .gallery-instagram { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem; margin-top:1.5rem; padding:1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:.76rem; letter-spacing:.04em; } .gallery-instagram b { font-weight:500; color:var(--clay); }
.booking { display:grid; grid-template-columns:22% minmax(0,1fr) auto; gap:2rem; align-items:end; padding:clamp(4rem,8vw,7rem) var(--page); background:var(--clay); color:#fff8f1; } .booking .section-label { color:#fff8f1; } .booking h2 { margin-bottom:1rem; font-size:clamp(2.7rem,5vw,5.5rem); line-height:.9; } .booking em { color:var(--paper-deep); } .booking p:not(.section-label) { max-width:43ch; margin-bottom:0; color:#feece5; } .button-light { align-self:center; background:var(--paper); color:var(--ink); white-space:nowrap; }
.visit { display:grid; grid-template-columns:38% 1fr; gap:2rem; padding:clamp(5rem,9vw,8rem) var(--page); } .visit-details { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; align-items:start; padding-top:.7rem; } .detail-label { margin-bottom:.75rem; color:var(--clay); font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; } address { margin-bottom:1rem; font-style:normal; } .visit ul { list-style:none; padding:0; margin:0; } .visit li { margin-bottom:.35rem; } .contact-link { display:block; margin-bottom:.45rem; font-family:var(--display); font-size:1.18rem; text-decoration:underline; text-underline-offset:4px; } footer { display:flex; align-items:center; gap:1.2rem; padding:2rem var(--page); border-top:1px solid var(--line); } footer p { margin:0; color:var(--soft-ink); font-size:.75rem; } .top-link { margin-left:auto; font-size:.76rem; text-decoration:underline; text-underline-offset:4px; }
@media (max-width: 780px) { .notice { font-size:.6rem; } .site-header { min-height:65px; } .menu-toggle { display:grid; gap:5px; width:44px; height:44px; padding:12px; place-content:center; border:0; background:transparent; cursor:pointer; } .menu-toggle i { display:block; width:20px; height:1px; background:var(--ink); transition:transform .2s ease; } .menu-toggle[aria-expanded="true"] i:first-of-type { transform:translateY(3px) rotate(45deg); } .menu-toggle[aria-expanded="true"] i:last-of-type { transform:translateY(-3px) rotate(-45deg); } nav { display:none; position:absolute; top:100%; left:0; right:0; min-height:calc(100vh - 98px); padding:2.5rem var(--page); background:var(--paper); align-items:flex-start; flex-direction:column; font-family:var(--display); font-size:2.15rem; letter-spacing:-.04em; } nav.open { display:flex; } .nav-cta { margin-top:auto; width:100%; padding:1rem; font-family:var(--sans); font-size:.73rem; text-align:center; } .hero { min-height:unset; grid-template-columns:1fr; } .hero-copy { padding:4rem var(--page) 2.5rem; } h1 { font-size:clamp(3.15rem,14vw,5.3rem); } .hero-image { min-height:480px; } .hero-image img { min-height:480px; } .hero-side { display:none; } .section-grid,.section-heading { grid-template-columns:1fr; gap:0; } .section-label { margin-bottom:2rem; } .section-heading { margin-bottom:2.5rem; } .service { grid-template-columns:2.5rem 1fr; gap:.45rem .8rem; } .service p { grid-column:2; padding-right:.5rem; } .gallery-heading { max-width:none; margin-left:0; } .gallery-grid { grid-template-columns:1fr 1fr; gap:.75rem; } .gallery-item-1 { grid-row:span 2; aspect-ratio:auto; height:100%; } .gallery-item-2 { margin:0; } .gallery-item-3 { aspect-ratio:1/.82; } .gallery-instagram { grid-template-columns:1fr auto; } .gallery-instagram b { grid-column:1; grid-row:2; } .gallery-instagram span:last-child { grid-column:2; grid-row:1 / span 2; } .booking { grid-template-columns:1fr; gap:1.5rem; } .button-light { justify-self:start; } .visit { grid-template-columns:1fr; gap:3rem; } .visit-details { grid-template-columns:1fr; gap:2rem; padding:0; } footer { flex-wrap:wrap; } footer p { width:100%; order:3; } }
@media (max-width:390px) { .notice a { display:none; } .hero-copy { padding-top:3.5rem; } .hero-image,.hero-image img { min-height:410px; } .hero-actions { align-items:flex-start; flex-direction:column; } .gallery-grid { gap:.55rem; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* Mobile hero: the portrait is an intentional first act, not a cropped section below the copy. */
@media (max-width:780px) {
  .hero { display:grid; grid-template-columns:1fr; grid-template-areas:"image" "copy"; overflow:hidden; }
  .hero-image { grid-area:image; height:clamp(230px,58vw,290px); min-height:0; }
  .hero-image img { min-height:0; object-position:63% 46%; }
  .hero-image:after { background:linear-gradient(180deg,rgba(40,34,31,.04),rgba(40,34,31,.28)); }
  .hero-image figcaption { top:1rem; right:var(--page); bottom:auto; font-size:1.05rem; text-shadow:0 1px 10px rgba(0,0,0,.38); }
  .hero-copy { grid-area:copy; position:relative; z-index:2; max-width:none; margin:0; padding:1.7rem var(--page) 2.5rem; background:var(--paper); }
  .kicker { margin-bottom:.9rem; }
  h1 { max-width:12ch; margin-bottom:1rem; font-size:clamp(3rem,13vw,4rem); line-height:.92; }
  .hero-text { font-size:.98rem; line-height:1.48; }
  .hero-actions { gap:.85rem; margin-top:1.5rem; }
  .hero-actions .button { width:100%; }
  .hero-actions .text-link { display:inline-flex; align-items:center; min-height:44px; }
}

@media (max-width:390px) {
  .hero-image { height:230px; }
  h1 { font-size:clamp(2.85rem,13vw,3.3rem); }
}

@media (max-width:780px) and (max-height:540px) and (orientation:landscape) {
  .notice { display:none; }
  .site-header { min-height:56px; }
  .hero { grid-template-areas:"copy image"; grid-template-columns:minmax(0,1.15fr) minmax(140px,.85fr); min-height:334px; }
  .hero-copy { align-self:center; margin:0; padding:1.35rem 1rem 1.1rem var(--page); }
  .hero-image { height:auto; min-height:334px; }
  .hero-image figcaption,.hero-text,.hero-actions .text-link { display:none; }
  .kicker { margin-bottom:.5rem; font-size:.6rem; }
  h1 { margin:0; font-size:clamp(2.15rem,9vw,3rem); }
  .hero-actions { margin-top:.8rem; }
  .hero-actions .button { min-height:44px; }
}