:root {
  --paper:#faf5f0;
  --ink:#4e3c35;
  --muted:#7d6b61;
  --accent:#8a5d6a;
  --rose:#eddfdb;
  --line:#d9c9bf;
  --olive:#74745b;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',Arial,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:105px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased
}

body.modal-open {
  overflow:hidden
}

button,input,select,textarea {
  font:inherit;
  color:inherit
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

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

button {
  background:none;
  border:0
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px
}

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

h1,h2,h3,p,figure {
  margin:0
}

h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.04
}

h2 {
  font-size:clamp(42px,5vw,70px);
  letter-spacing:-2.1px
}

h1 em,h2 em {
  font-weight:400;
  color:var(--accent)
}

em {
  font-family:var(--serif)
}

p {
  max-width:64ch
}

small {
  font-size:11px
}

::selection {
  background:#e7ccce
}

.page-width {
  width:min(1280px,calc(100% - 112px));
  margin-inline:auto
}

.section-space {
  padding-top:110px;
  padding-bottom:110px
}

.eyebrow {
  font-size:10px;
  letter-spacing:2.2px;
  font-weight:500;
  line-height:1.5;
  margin-bottom:26px
}

.tiny-star {
  color:var(--accent);
  font-size:16px;
  margin-right:10px
}

.muted {
  color:var(--muted)
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:27px;
  border:1px solid var(--ink);
  padding:14px 24px;
  border-radius:3px;
  font-size:12px;
  line-height:1.4;
  font-weight:500;
  transition:background .2s,color .2s,transform .2s;
  min-height:48px
}

.button:hover {
  background:var(--ink);
  color:var(--paper);
  transform:translateY(-2px)
}

.button-solid {
  background:var(--ink);
  color:var(--paper)
}

.button-solid:hover {
  background:var(--accent);
  border-color:var(--accent)
}

.button span {
  font-size:19px;
  line-height:1
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:20px;
  border:0;
  border-bottom:1px solid currentColor;
  padding:4px 0;
  font-size:12px;
  font-weight:500;
  line-height:1.7;
  transition:color .2s
}

.text-link:hover {
  color:var(--accent)
}

.text-link span {
  font-size:19px
}

.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
}

.skip-link {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:100;
  background:var(--ink);
  color:white;
  padding:12px 20px
}

.skip-link:focus {
  top:16px
}

.header {
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(250,245,240,.97);
  border-bottom:1px solid rgba(217,201,191,.7)
}

.nav-wrap {
  width:min(1320px,calc(100% - 80px));
  height:96px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px
}

.wordmark {
  font-family:var(--serif);
  font-style:italic;
  font-size:52px;
  line-height:.75;
  color:#735546;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  letter-spacing:-2px
}

.wordmark span {
  font-family:var(--sans);
  font-style:normal;
  letter-spacing:4px;
  font-size:8px;
  margin-top:12px;
  padding-left:4px
}

.desktop-nav {
  display:flex;
  gap:33px;
  font-size:11px
}

.desktop-nav a {
  position:relative;
  padding:8px 0
}

.desktop-nav a:after {
  content:'';
  position:absolute;
  bottom:3px;
  left:0;
  width:0;
  height:1px;
  background:var(--accent);
  transition:width .3s
}

.desktop-nav a:hover:after {
  width:100%
}

.nav-book {
  min-height:44px;
  padding:12px 19px;
  font-size:11px
}

.menu-toggle {
  display:none
}

.mobile-nav[hidden] {
  display:none
}

.mobile-nav {
  padding:20px 28px 30px;
  border-top:1px solid var(--line);
  display:flex;
  gap:14px;
  flex-direction:column
}

.mobile-nav a {
  padding:4px 0
}

.hero {
  min-height:710px;
  display:grid;
  grid-template-columns:1fr 1fr;
  position:relative;
  align-items:center;
  padding-top:54px;
  padding-bottom:100px;
  gap:30px
}

.hero-copy {
  position:relative;
  padding-bottom:18px;
  z-index:2
}

.hero-copy .eyebrow {
  margin-bottom:31px
}

.hero h1 {
  font-size:clamp(78px,8.3vw,120px);
  letter-spacing:-5px;
  line-height:.93;
  position:relative;
  width:max-content
}

.hero h1 em {
  margin-left:26px
}

.hero-star {
  position:absolute;
  right:-77px;
  bottom:16px;
  color:var(--accent);
  font-size:63px;
  animation:star-in 1.7s ease-out both
}

.hero-description {
  font-size:15px;
  margin-top:30px;
  color:var(--muted);
  line-height:1.8
}

.hero-description em {
  font-size:22px;
  color:var(--ink)
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  flex-wrap:wrap;
  margin-top:30px
}

.hero-actions .text-link {
  font-size:11px
}

.review-note {
  display:flex;
  gap:13px;
  align-items:flex-start;
  font-size:10px;
  margin-top:44px
}

.rating-stars {
  color:var(--accent);
  letter-spacing:2px;
  font-size:12px;
  line-height:1.4
}

.review-note strong {
  font-weight:500
}

.review-note small {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:3px
}

.review-divider {
  padding:0 8px;
  color:var(--line)
}

.hero-art {
  height:555px;
  position:relative;
  margin-left:22px
}

.hero-photo {
  position:absolute;
  inset:0 18px 0 38px
}

.hero-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:220px 220px 5px 5px;
  object-position:50% 53%
}

.hero-photo figcaption {
  font-size:8px;
  letter-spacing:2.3px;
  text-align:right;
  margin-top:12px;
  padding-right:8px
}

.hero-outline {
  position:absolute;
  inset:14px -2px -19px 60px;
  border:1px solid #cbb9a7;
  border-radius:230px 230px 4px 4px;
  transform:rotate(4deg)
}

.studio-peek {
  position:absolute;
  width:158px;
  height:221px;
  bottom:-18px;
  left:-35px;
  border:6px solid var(--paper);
  background:var(--paper);
  box-shadow:0 10px 30px #4e3c351c;
  transform:rotate(-5deg);
  overflow:hidden
}

.studio-peek video {
  height:178px;
  width:100%;
  object-fit:cover
}

.peek-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  font-family:var(--serif);
  font-size:17px;
  line-height:1.4;
  padding:4px 4px 0
}

.video-toggle {
  position:absolute;
  top:8px;
  right:8px;
  width:29px;
  height:29px;
  border-radius:50%;
  background:#faf5f0e6;
  font-size:11px;
  display:grid;
  place-items:center
}

.hero-stamp {
  position:absolute;
  right:-23px;
  top:21px;
  width:112px;
  height:112px;
  border-radius:50%;
  background:#e8d7d2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  transform:rotate(12deg);
  box-shadow:0 0 0 6px var(--paper)
}

.hero-stamp span {
  font-size:7px;
  letter-spacing:1.1px
}

.hero-stamp i {
  font-style:normal;
  font-size:32px;
  line-height:1.2
}

.scroll-cue {
  position:absolute;
  bottom:27px;
  left:0;
  font-size:8px;
  letter-spacing:2px;
  display:flex;
  align-items:center;
  gap:24px
}

.scroll-cue span {
  font-size:20px
}

.brand-ribbon {
  background:#eadbd7;
  border-top:1px solid #decbc7;
  border-bottom:1px solid #decbc7;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7vw;
  padding:20px 20px;
  color:#6d4f52
}

.brand-ribbon span {
  font-family:var(--serif);
  font-size:25px;
  white-space:nowrap
}

.brand-ribbon i {
  font-size:22px;
  font-style:normal
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:46px
}

.section-heading>p {
  font-size:12px;
  line-height:1.9;
  margin-bottom:7px
}

.section-heading>p .muted {
  display:inline-block;
  margin-top:13px;
  font-size:11px
}

.filter-row {
  display:flex;
  gap:30px;
  border-bottom:1px solid var(--line);
  margin-bottom:34px;
  overflow-x:auto;
  scrollbar-width:none
}

.filter {
  font-size:11px;
  padding:0 0 16px;
  white-space:nowrap;
  position:relative;
  color:var(--muted);
  min-height:42px
}

.filter.active {
  color:var(--ink)
}

.filter.active:after {
  content:'';
  height:2px;
  background:var(--ink);
  position:absolute;
  bottom:0;
  left:0;
  right:0
}

.filter span {
  font-size:8px;
  padding-left:5px;
  vertical-align:super
}

.gallery {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px 26px
}

.look-card {
  text-align:left;
  padding:0;
  width:100%;
  min-width:0
}

.look-card[hidden] {
  display:none
}

.look-image {
  position:relative;
  display:block;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:3px;
  background:var(--rose)
}

.look-image>img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.6,.2,1)
}

.look-card:hover .look-image>img {
  transform:scale(1.045)
}

.look-tag {
  position:absolute;
  bottom:15px;
  left:15px;
  background:#faf5f0eb;
  padding:5px 9px;
  font-size:7px;
  letter-spacing:1.5px
}

.look-open {
  position:absolute;
  top:15px;
  right:15px;
  background:#faf5f0e6;
  width:33px;
  height:33px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:20px
}

.look-caption {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  margin-top:15px;
  flex-wrap:wrap
}

.look-caption>span {
  font-family:var(--serif);
  font-size:28px;
  line-height:1.1
}

.look-caption small {
  font-size:9px;
  color:var(--muted)
}

.gallery-end {
  border-top:1px solid var(--line);
  padding-top:27px;
  margin-top:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:12px
}

.studio-section {
  background:#efe7dc;
  overflow:hidden
}

.studio-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px;
  align-items:center
}

.studio-visual {
  position:relative;
  padding-left:34px;
  max-width:470px
}

.studio-visual>img {
  height:564px;
  width:100%;
  object-fit:cover;
  border-radius:210px 210px 0 0;
  object-position:50% 48%
}

.film-button {
  display:flex;
  align-items:center;
  gap:15px;
  width:100%;
  padding:20px 18px;
  background:var(--paper);
  border:1px solid var(--line);
  text-align:left
}

.play-circle {
  border:1px solid var(--line);
  border-radius:50%;
  width:41px;
  height:41px;
  display:grid;
  place-items:center;
  font-size:10px;
  padding-left:2px
}

.film-button>span:nth-child(2) {
  font-family:var(--serif);
  font-size:23px;
  line-height:1.4;
  flex:1
}

.film-button small {
  display:block;
  font-family:var(--sans);
  font-size:8px;
  letter-spacing:.7px;
  color:var(--muted)
}

.studio-side-note {
  position:absolute;
  left:0;
  bottom:92px;
  font-size:8px;
  letter-spacing:2px;
  writing-mode:vertical-rl;
  transform:rotate(180deg)
}

.studio-copy {
  position:relative
}

.studio-copy h2 {
  font-size:clamp(42px,4.5vw,65px)
}

.studio-copy>p:not(.eyebrow) {
  font-size:13px;
  color:var(--muted);
  margin-top:26px;
  line-height:1.9;
  max-width:400px
}

.large-star {
  font-size:60px;
  position:absolute;
  right:-15px;
  top:-45px;
  line-height:1;
  color:#a28b74
}

.studio-points {
  display:flex;
  flex-direction:column;
  gap:11px;
  margin-top:29px;
  font-size:11px
}

.studio-points i {
  font-style:normal;
  font-family:var(--serif);
  font-size:20px;
  margin-right:19px;
  color:var(--accent)
}

.studio-copy>.text-link {
  margin-top:30px
}

.services {
  display:grid;
  grid-template-columns:.85fr 1.2fr;
  gap:100px
}

.services-intro>p:not(.eyebrow) {
  font-size:12px;
  color:var(--muted);
  margin-top:25px;
  max-width:265px
}

.menu-detail {
  width:180px;
  height:145px;
  object-fit:cover;
  object-position:50% 56%;
  border-radius:90px 90px 3px 3px;
  margin-top:32px
}

.services-intro .menu-note {
  font-size:10px!important;
  margin-top:12px!important
}

.service-tabs {
  display:flex;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:none
}

.service-tab {
  font-size:11px;
  padding:0 0 16px;
  white-space:nowrap;
  color:var(--muted);
  min-height:42px
}

.service-tab.active {
  border-bottom:2px solid var(--ink);
  color:var(--ink)
}

.menu-list {
  min-height:335px
}

.menu-item {
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:center;
  width:100%;
  text-align:left;
  padding:24px 0;
  border-bottom:1px solid var(--line)
}

.menu-item:hover .menu-item-name {
  color:var(--accent)
}

.menu-item-name {
  display:block;
  font-family:var(--serif);
  font-size:28px;
  line-height:1.15
}

.menu-item-detail {
  font-size:9px;
  letter-spacing:.2px;
  color:var(--muted);
  display:block;
  margin-top:7px
}

.menu-item-price {
  font-family:var(--serif);
  font-size:28px;
  white-space:nowrap
}

.menu-item-price small {
  display:block;
  font-family:var(--sans);
  font-size:8px;
  text-align:right;
  color:var(--muted)
}

.pricing-note {
  font-size:9px;
  line-height:1.8;
  color:var(--muted);
  margin-top:26px;
  margin-bottom:25px
}

.social-section {
  background:#eee1de
}

.social-heading {
  text-align:center
}

.social-heading p {
  margin-inline:auto
}

.social-heading>p:not(.eyebrow) {
  font-size:12px;
  margin-top:20px;
  margin-bottom:15px
}

.social-heading .eyebrow {
  margin-bottom:18px
}

.social-heading h2 {
  font-size:60px
}

.social-strip {
  margin-top:46px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:15px;
  align-items:center
}

/* Give the frame its own height. Image width/height attributes must never size the grid row. */
.social-photo {
  position:relative;
  min-width:0;
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:3px;
  background:var(--rose)
}

.social-photo>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}

.social-strip>.social-photo:nth-child(even) {
  transform:translateY(17px)
}

.social-tile {
  min-width:0;
  aspect-ratio:3/4;
  border:1px solid #cdb6b2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:17px;
  text-align:center;
  padding:10px
}

.social-tile>span {
  font-size:40px;
  line-height:1
}

.social-tile p {
  font-family:var(--serif);
  font-size:30px;
  line-height:1.1
}

.social-tile a {
  font-size:8px;
  border-bottom:1px solid var(--ink)
}

.social-links {
  display:flex;
  justify-content:center;
  gap:30px;
  margin-top:45px;
  font-size:10px
}

.social-links a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.visit {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:start
}

.visit-copy>p:not(.eyebrow) {
  margin-top:25px;
  font-size:13px;
  color:var(--muted)
}

.visit-copy>.button {
  margin-top:27px
}

.visit-details {
  padding-top:3px
}

.visit-row {
  border-bottom:1px solid var(--line);
  padding:0 0 26px;
  margin-bottom:27px
}

.visit-row span {
  display:block;
  letter-spacing:1.7px;
  font-size:8px;
  margin-bottom:14px;
  color:var(--muted)
}

.visit-row address {
  font-family:var(--serif);
  font-style:normal;
  font-size:29px;
  line-height:1.3;
  margin-bottom:16px
}

.visit-row .text-link {
  font-size:10px
}

.two-up {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}

.two-up p {
  font-size:12px
}

.two-up p strong {
  font-weight:500
}

.two-up small {
  font-size:9px;
  color:var(--muted)
}

.google-link {
  display:flex;
  flex-direction:column;
  font-size:11px;
  gap:7px
}

.google-link strong {
  font-size:11px;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:5px
}

.footer {
  background:#e8dbd0
}

.footer-top {
  padding-top:50px;
  padding-bottom:37px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.footer-wordmark {
  font-size:85px
}

.footer-wordmark span {
  font-size:10px;
  letter-spacing:6px;
  margin-top:17px
}

.footer-top>div>p {
  font-size:10px;
  margin-top:28px
}

.original-logo {
  height:150px;
  width:150px;
  object-fit:contain;
  mix-blend-mode:multiply
}

.footer-note {
  text-align:right
}

.footer-note p {
  font-size:8px!important;
  letter-spacing:1.5px;
  line-height:1.9;
  margin-top:0!important
}

.footer-note>span {
  display:block;
  font-size:42px;
  margin-top:10px
}

.footer-bottom {
  border-top:1px solid #cdbbad;
  padding-top:18px;
  padding-bottom:21px;
  display:flex;
  justify-content:space-between;
  font-size:9px
}

.footer-bottom small {
  font-size:9px
}

.mobile-book-bar {
  display:none
}

dialog {
  border:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 20px 80px #271a1844;
  max-height:90dvh;
  max-width:calc(100% - 32px)
}

dialog::backdrop {
  background:#30201bc9;
  backdrop-filter:blur(5px)
}

.close-dialog {
  position:absolute;
  right:13px;
  top:13px;
  z-index:4;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  font-size:25px;
  line-height:1
}

.look-dialog[open] {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  width:950px
}

.lightbox-image {
  position:relative;
  min-height:570px;
  background:var(--rose)
}

.lightbox-image>img {
  width:100%;
  height:100%;
  max-height:85dvh;
  object-fit:cover
}

.lightbox-prev,.lightbox-next {
  position:absolute;
  bottom:18px;
  width:43px;
  height:43px;
  background:var(--paper);
  border-radius:50%;
  font-size:20px
}

.lightbox-prev {
  left:18px
}

.lightbox-next {
  right:18px
}

.lightbox-copy {
  padding:65px 38px 38px;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.lightbox-copy h2 {
  font-size:57px
}

.lightbox-copy>p:not(.eyebrow) {
  font-size:13px;
  margin-top:21px
}

.small-note {
  font-size:10px!important;
  color:var(--muted);
  line-height:1.8
}

.lightbox-copy .button {
  margin-top:27px;
  font-size:11px
}

.lightbox-copy .muted {
  font-size:10px;
  margin-top:20px
}

.book-dialog {
  width:580px;
  padding:40px 44px;
  overflow-y:auto
}

.book-dialog h2 {
  font-size:53px
}

.book-dialog .eyebrow {
  margin-bottom:18px
}

.book-dialog>p:not(.eyebrow) {
  font-size:12px;
  margin-top:19px
}

.book-dialog form {
  margin-top:24px
}

.book-dialog label {
  font-size:11px;
  display:block;
  margin-top:16px;
  margin-bottom:6px
}

.book-dialog label span {
  color:var(--muted);
  font-size:10px
}

.book-dialog input,.book-dialog select,.book-dialog textarea {
  display:block;
  width:100%;
  border:1px solid var(--line);
  border-radius:3px;
  background:#fffaf6;
  padding:10px 12px;
  font-size:12px;
  min-height:44px
}

.book-dialog textarea {
  font-size:11px;
  resize:vertical;
  line-height:1.6
}

.booking-message {
  margin-top:23px;
  padding-top:4px;
  border-top:1px solid var(--line)
}

.booking-message .text-link {
  font-size:10px;
  margin-top:9px
}

.booking-message #copy-status {
  display:block;
  font-size:10px;
  margin-top:8px;
  color:var(--accent)
}

.booking-actions {
  display:flex;
  gap:10px;
  margin-top:20px
}

.booking-actions .button {
  flex:1;
  font-size:10px;
  gap:10px;
  padding:12px 8px
}

.book-dialog>.small-note {
  margin-top:17px!important
}

.film-dialog {
  width:auto;
  background:#332721;
  overflow:hidden
}

.film-dialog video {
  max-height:80dvh;
  width:auto;
  min-width:240px
}

.film-dialog>p {
  color:var(--paper);
  font-family:var(--serif);
  font-size:24px;
  padding:10px 20px;
  text-align:center
}

.film-dialog .close-dialog {
  background:#faf5f0d9
}

.js-motion .reveal {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s ease,transform .7s ease
}

.js-motion .reveal.visible {
  opacity:1;
  transform:translateY(0)
}

.hero-copy {
  animation:enter .8s both
}

.hero-art {
  animation:enter 1s .1s both
}

@keyframes enter {
  from {
    opacity:0;
    transform:translateY(18px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes star-in {
  from {
    opacity:0;
    transform:rotate(-25deg) scale(.7)
  }
  to {
    opacity:1;
    transform:rotate(0) scale(1)
  }
}

@media(min-width:1500px) {
  .hero {
    min-height:780px
  }
  .hero-art {
    height:600px
  }
  .hero-photo {
    right:30px
  }
  .hero-copy {
    padding-bottom:30px
  }
}

@media(max-width:1100px) {
  .page-width {
    width:calc(100% - 70px)
  }
  .nav-wrap {
    width:calc(100% - 60px)
  }
  .desktop-nav {
    gap:20px
  }
  .hero {
    min-height:650px;
    gap:20px
  }
  .hero h1 {
    font-size:90px
  }
  .hero-art {
    height:480px;
    margin-left:10px
  }
  .hero-photo {
    left:20px;
    right:5px
  }
  .hero-outline {
    left:40px
  }
  .hero-stamp {
    right:-13px;
    width:90px;
    height:90px;
    top:14px
  }
  .hero-stamp span {
    font-size:6px
  }
  .hero-stamp i {
    font-size:27px
  }
  .hero-star {
    font-size:48px;
    right:-52px
  }
  .hero-actions {
    gap:18px
  }
  .hero-actions .button {
    padding:14px 17px;
    font-size:11px;
    gap:15px
  }
  .studio-peek {
    left:-14px;
    width:135px;
    height:196px;
    bottom:-22px
  }
  .studio-peek video {
    height:155px
  }
  .peek-caption {
    font-size:14px
  }
  .studio-layout,.services,.visit {
    gap:60px
  }
  .studio-visual {
    padding-left:24px
  }
  .studio-visual>img {
    height:500px
  }
  .brand-ribbon {
    gap:5vw
  }
  .look-caption>span {
    font-size:26px
  }
  .look-caption small {
    font-size:8px
  }
  .social-tile p {
    font-size:25px
  }
  .social-tile {
    gap:12px
  }
  .service-tab {
    font-size:10px
  }
  .menu-item-name {
    font-size:25px
  }
  .hero-copy .eyebrow {
    font-size:9px
  }
  .review-note {
    gap:8px;
    font-size:9px
  }
}

@media(max-width:800px) {
  .desktop-nav {
    gap:16px
  }
  .desktop-nav a {
    font-size:10px
  }
  .nav-wrap {
    gap:20px
  }
  .hero h1 {
    font-size:76px;
    letter-spacing:-3px
  }
  .hero-art {
    height:460px
  }
  .hero {
    gap:5px
  }
  .hero-star {
    right:-30px;
    bottom:-40px;
    font-size:44px
  }
  .hero-stamp {
    right:-18px;
    top:2px;
    width:78px;
    height:78px
  }
  .hero-stamp span {
    font-size:5px
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.5px
  }
  .hero-description {
    font-size:13px
  }
  .review-note {
    flex-direction:column;
    gap:7px;
    margin-top:30px
  }
  .section-space {
    padding-block:85px
  }
  .section-heading h2 {
    font-size:53px
  }
  .section-heading>p {
    font-size:10px
  }
  .gallery {
    gap:30px 18px
  }
  .look-tag {
    font-size:6px;
    padding:5px 6px;
    left:10px;
    bottom:10px;
    letter-spacing:1px
  }
  .look-caption>span {
    font-size:24px
  }
  .look-open {
    width:28px;
    height:28px;
    right:10px;
    top:10px
  }
  .studio-layout,.services,.visit {
    gap:40px
  }
  .studio-copy h2 {
    font-size:43px
  }
  .studio-copy>p:not(.eyebrow) {
    font-size:12px
  }
  .studio-visual>img {
    height:470px
  }
  .studio-visual {
    padding-left:17px
  }
  .studio-side-note {
    font-size:6px;
    left:-4px
  }
  .film-button {
    gap:8px;
    padding:15px 10px
  }
  .film-button>span:nth-child(2) {
    font-size:19px
  }
  .play-circle {
    width:32px;
    height:32px
  }
  .large-star {
    right:-15px;
    font-size:46px
  }
  .services {
    grid-template-columns:.75fr 1.25fr;
    gap:35px
  }
  .service-tabs {
    gap:15px
  }
  .service-tab {
    font-size:9px
  }
  .menu-item-name {
    font-size:23px
  }
  .menu-item-price {
    font-size:24px
  }
  .menu-item {
    gap:10px
  }
  .social-heading h2 {
    font-size:54px
  }
  .social-strip {
    gap:10px
  }
  .social-tile p {
    font-size:21px
  }
  .social-tile>span {
    font-size:30px
  }
  .social-tile a {
    font-size:7px
  }
  .two-up {
    grid-template-columns:1fr;
    gap:20px
  }
  .visit-row address {
    font-size:25px
  }
  .hero-photo figcaption {
    font-size:6px
  }
  .brand-ribbon span {
    font-size:21px
  }
  .brand-ribbon i {
    font-size:17px
  }
  .look-dialog[open] {
    grid-template-columns:1fr 1fr
  }
  .lightbox-copy {
    padding:60px 24px 25px
  }
  .lightbox-copy h2 {
    font-size:46px
  }
  .lightbox-image {
    min-height:500px
  }
}

@media(max-width:650px) {
  html {
    scroll-padding-top:83px
  }
  .page-width {
    width:calc(100% - 44px)
  }
  .nav-wrap {
    height:79px;
    width:calc(100% - 44px);
    gap:15px
  }
  .wordmark {
    font-size:43px
  }
  .wordmark span {
    font-size:6px;
    margin-top:9px
  }
  .desktop-nav {
    display:none
  }
  .nav-book {
    margin-left:auto;
    font-size:10px;
    padding:10px 14px;
    min-height:39px;
    gap:18px
  }
  .menu-toggle {
    display:flex;
    width:28px;
    height:40px;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    padding:3px
  }
  .menu-toggle span {
    display:block;
    background:var(--ink);
    height:1px;
    width:22px;
    transition:transform .2s
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-top:43px;
    padding-bottom:53px;
    min-height:0;
    gap:35px
  }
  .hero-copy {
    padding:0
  }
  .hero-copy .eyebrow {
    font-size:8px;
    letter-spacing:1.65px;
    margin-bottom:25px
  }
  .hero h1 {
    font-size:83px;
    line-height:.9;
    letter-spacing:-3.4px
  }
  .hero h1 em {
    margin-left:19px
  }
  .hero-star {
    right:-77px;
    bottom:5px;
    font-size:52px
  }
  .hero-description {
    font-size:12px;
    margin-top:23px;
    line-height:1.7
  }
  .hero-description em {
    font-size:19px
  }
  .hero-actions {
    gap:20px;
    margin-top:24px
  }
  .hero-actions .button {
    font-size:10px;
    padding:13px 16px;
    min-height:45px;
    gap:15px
  }
  .hero-actions .text-link {
    font-size:9px;
    gap:10px
  }
  .review-note {
    flex-direction:row;
    margin-top:25px;
    gap:11px;
    align-items:flex-start;
    font-size:9px
  }
  .review-note small {
    font-size:8px
  }
  .rating-stars {
    font-size:10px;
    letter-spacing:1px
  }
  .review-divider {
    padding-inline:5px
  }
  .hero-art {
    height:440px;
    margin:8px 4px 0 13px;
    max-width:410px;
    width:calc(100% - 17px);
    align-self:center
  }
  .hero-photo {
    inset:0 7px 0 31px
  }
  .hero-outline {
    inset:10px -3px -10px 50px
  }
  .hero-photo img {
    border-radius:190px 190px 3px 3px
  }
  .hero-stamp {
    right:-5px;
    top:9px;
    width:86px;
    height:86px
  }
  .hero-stamp span {
    font-size:5.5px
  }
  .hero-stamp i {
    font-size:27px
  }
  .hero-photo figcaption {
    font-size:6px;
    letter-spacing:1.2px;
    margin-top:15px
  }
  .studio-peek {
    height:183px;
    width:126px;
    bottom:-8px;
    left:-13px
  }
  .studio-peek video {
    height:143px
  }
  .peek-caption {
    font-size:14px
  }
  .scroll-cue {
    display:none
  }
  .brand-ribbon {
    padding:15px 13px;
    gap:16px;
    justify-content:space-around
  }
  .brand-ribbon span {
    font-size:19px
  }
  .brand-ribbon span:last-child,.brand-ribbon i:last-of-type {
    display:none
  }
  .brand-ribbon i {
    font-size:15px
  }
  .section-space {
    padding-top:69px;
    padding-bottom:69px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.8px;
    margin-bottom:19px
  }
  h2 {
    font-size:49px;
    letter-spacing:-1.7px
  }
  .section-heading {
    display:block;
    margin-bottom:28px
  }
  .section-heading h2 {
    font-size:51px
  }
  .section-heading>p {
    font-size:11px;
    margin-top:21px;
    line-height:1.7
  }
  .section-heading>p .muted {
    margin-top:7px;
    font-size:10px
  }
  .filter-row {
    gap:22px;
    margin-bottom:24px
  }
  .filter {
    font-size:10px;
    padding-bottom:13px
  }
  .gallery {
    grid-template-columns:1fr 1fr;
    gap:26px 14px
  }
  .look-caption {
    margin-top:11px;
    gap:5px
  }
  .look-caption>span {
    font-size:24px
  }
  .look-caption small {
    font-size:8px;
    line-height:1.5
  }
  .look-tag {
    font-size:5px;
    letter-spacing:.8px;
    bottom:8px;
    left:8px
  }
  .look-open {
    width:26px;
    height:26px;
    font-size:17px;
    top:8px;
    right:8px
  }
  .look-image {
    aspect-ratio:3/4
  }
  .gallery-end {
    margin-top:29px;
    padding-top:21px;
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
    font-size:11px
  }
  .gallery-end .text-link {
    font-size:10px
  }
  .studio-layout {
    grid-template-columns:1fr;
    gap:48px
  }
  .studio-visual {
    padding-left:20px;
    width:min(400px,100%);
    margin:auto
  }
  .studio-visual>img {
    height:440px;
    border-radius:190px 190px 0 0
  }
  .studio-side-note {
    font-size:7px;
    left:-2px
  }
  .film-button {
    padding:16px 15px;
    gap:13px
  }
  .film-button>span:nth-child(2) {
    font-size:22px
  }
  .play-circle {
    width:36px;
    height:36px
  }
  .studio-copy h2 {
    font-size:49px
  }
  .studio-copy>p:not(.eyebrow) {
    max-width:100%;
    font-size:12px;
    margin-top:22px
  }
  .studio-points {
    gap:6px;
    margin-top:21px;
    font-size:10px
  }
  .studio-points i {
    font-size:18px
  }
  .studio-copy>.text-link {
    font-size:11px;
    margin-top:25px
  }
  .large-star {
    top:0;
    right:2px;
    font-size:40px
  }
  .services {
    grid-template-columns:1fr;
    gap:35px
  }
  .services-intro {
    position:relative;
    min-height:225px;
    padding-right:110px
  }
  .services-intro h2 {
    font-size:54px
  }
  .services-intro>p:not(.eyebrow) {
    font-size:11px;
    margin-top:17px;
    max-width:225px
  }
  .menu-detail {
    position:absolute;
    right:0;
    top:52px;
    width:99px;
    height:155px;
    margin:0;
    object-position:40% 40%
  }
  .services-intro .menu-note {
    display:none
  }
  .service-tabs {
    gap:18px
  }
  .service-tab {
    font-size:10px
  }
  .menu-item {
    padding:23px 0
  }
  .menu-item-name {
    font-size:27px
  }
  .menu-item-price {
    font-size:28px
  }
  .menu-item-detail {
    font-size:9px
  }
  .menu-list {
    min-height:325px
  }
  .pricing-note {
    font-size:9px;
    line-height:1.8;
    margin-top:22px
  }
  .service-menu>.button {
    font-size:11px
  }
  .social-heading h2 {
    font-size:49px
  }
  .social-heading>p:not(.eyebrow) {
    font-size:10px;
    margin-top:18px;
    margin-bottom:12px
  }
  .social-heading .text-link {
    font-size:10px
  }
  .social-strip {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:31px
  }
  .social-strip>.social-photo:nth-last-child(-n+2) {
    display:none
  }
  .social-strip>.social-photo:nth-child(2) {
    transform:none
  }
  .social-tile {
    grid-column:1/-1;
    aspect-ratio:auto;
    min-height:108px;
    padding:18px 14px;
    gap:12px;
    flex-direction:row;
    justify-content:space-around
  }
  .social-tile p {
    flex:1
  }
  .social-tile a {
    max-width:90px;
    line-height:1.6
  }
  .social-tile>span {
    font-size:30px
  }
  .social-tile p {
    font-size:24px
  }
  .social-tile a {
    font-size:9px
  }
  .social-links {
    gap:25px;
    font-size:9px;
    margin-top:25px
  }
  .visit {
    grid-template-columns:1fr;
    gap:46px
  }
  .visit-copy h2 {
    font-size:56px
  }
  .visit-copy>p:not(.eyebrow) {
    font-size:12px;
    margin-top:21px
  }
  .visit-copy .button {
    margin-top:23px;
    font-size:11px
  }
  .visit-details {
    padding-top:0
  }
  .visit-row address {
    font-size:29px
  }
  .visit-row>span {
    font-size:8px
  }
  .two-up {
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .two-up p {
    font-size:11px
  }
  .two-up span {
    font-size:7px;
    letter-spacing:1px
  }
  .two-up .text-link {
    font-size:9px
  }
  .google-link {
    font-size:10px
  }
  .google-link strong {
    font-size:10px
  }
  .footer {
    padding-bottom:71px
  }
  .footer-top {
    padding-top:35px;
    padding-bottom:25px
  }
  .footer-wordmark {
    font-size:69px
  }
  .footer-wordmark span {
    font-size:8px
  }
  .footer-top>div>p {
    font-size:9px;
    margin-top:22px
  }
  .original-logo {
    width:102px;
    height:102px;
    margin-left:0
  }
  .footer-note p {
    font-size:6px!important;
    letter-spacing:1px
  }
  .footer-note>span {
    font-size:31px
  }
  .footer-bottom {
    font-size:8px;
    gap:8px
  }
  .footer-bottom small {
    font-size:8px
  }
  .footer-bottom>span {
    display:none
  }
  .mobile-book-bar {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:25;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 22px max(12px,env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    background:#faf5f0f7;
    box-shadow:0 -4px 25px #4e3c350a
  }
  .mobile-book-bar>span {
    font-family:var(--serif);
    font-size:20px
  }
  .mobile-book-bar .button {
    font-size:10px;
    min-height:41px;
    padding:10px 19px
  }
  .look-dialog[open] {
    display:block;
    width:440px;
    overflow-y:auto;
    max-height:90dvh
  }
  .lightbox-image {
    min-height:0;
    height:49dvh
  }
  .lightbox-image>img {
    height:100%;
    width:100%;
    object-fit:contain
  }
  .lightbox-copy {
    padding:28px
  }
  .lightbox-copy h2 {
    font-size:43px
  }
  .lightbox-copy .eyebrow {
    font-size:7px;
    margin-bottom:13px
  }
  .lightbox-copy>p:not(.eyebrow) {
    font-size:11px;
    margin-top:15px
  }
  .lightbox-copy .small-note {
    font-size:9px!important
  }
  .lightbox-copy .button {
    font-size:10px;
    min-height:43px;
    margin-top:21px
  }
  .lightbox-copy .muted {
    font-size:9px;
    margin-top:12px
  }
  .book-dialog {
    padding:36px 24px;
    max-height:90dvh
  }
  .book-dialog h2 {
    font-size:47px
  }
  .book-dialog>p:not(.eyebrow) {
    font-size:11px
  }
  .book-dialog label {
    font-size:10px
  }
  .book-dialog input,.book-dialog select {
    font-size:16px
  }
  .book-dialog textarea {
    font-size:11px
  }
  .book-dialog .eyebrow {
    font-size:7px;
    letter-spacing:1.3px
  }
  .booking-actions .button {
    font-size:10px
  }
  .close-dialog {
    width:33px;
    height:33px;
    top:10px;
    right:10px
  }
  .film-dialog video {
    max-height:78dvh
  }
  .film-dialog p {
    font-size:21px
  }
}

@media(max-width:370px) {
  .hero h1 {
    font-size:74px
  }
  .hero-star {
    right:-56px;
    font-size:43px
  }
  .hero-actions {
    gap:15px
  }
  .hero-actions .button {
    font-size:9px;
    padding:12px
  }
  .hero-actions .text-link {
    font-size:8px
  }
  .hero-art {
    height:395px
  }
  .brand-ribbon {
    gap:9px
  }
  .brand-ribbon span {
    font-size:17px
  }
  .look-caption>span {
    font-size:21px
  }
  .social-tile p {
    font-size:21px
  }
  .service-tab {
    font-size:9px
  }
  .two-up {
    grid-template-columns:1fr
  }
  .footer-note {
    display:none
  }
  .services-intro {
    padding-right:100px
  }
  .services-intro h2 {
    font-size:48px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .js-motion .reveal {
    opacity:1;
    transform:none
  }
  .look-card:hover .look-image>img {
    transform:none
  }
  .button:hover {
    transform:none
  }
}

/* Keep the decorative details within narrow screens. */
@media(max-width:650px) {
  .hero h1 {
    font-size:clamp(62px,21vw,83px)
  }
  .hero-star {
    right:18px;
    bottom:-4px;
    font-size:42px
  }
  .brand-ribbon {
    gap:8px;
    padding-inline:12px
  }
  .brand-ribbon span {
    font-size:clamp(13px,3.9vw,18px)
  }
  .brand-ribbon i {
    font-size:12px
  }
}

.icon {
  width:1em;
  height:1em;
  flex:none;
  display:inline-block;
  vertical-align:-.12em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}

.video-toggle .icon {
  width:12px;
  height:12px
}

.peek-caption .icon {
  width:14px;
  height:14px
}

.film-button>.icon {
  width:17px;
  height:17px
}

.lightbox-prev .icon,.lightbox-next .icon {
  width:20px;
  height:20px
}

@media(min-width:651px) and (max-width:900px) {
  .brand-ribbon {
    gap:3.5vw
  }
}