/* Gloria public styles. Rules stay in cascade order; responsive exceptions follow their bases. */
/* Supplied prototype fonts, embedded at the user’s request. Web licensing remains pending. */
:root {
  --canvas: #F9EAD2;
  --ink: #5A3001;
  --font-display: 'WT Garamono','Courier New',monospace;
  --font-body: 'CircularXX',Arial,sans-serif;
  --rule: color-mix(in srgb,var(--ink) 30%,transparent);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}
body.menu-open {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
button {
  border-radius: 0;
}
h1,
h2,
p {
  margin: 0;
}
h1,
h2,
.label,
.nav,
.button {
  font-family: var(--font-display);
  font-weight: 400;
}
.label,
.nav,
.button {
  font-size: 14px;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.skip {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 100;
  padding: 12px;
  background: var(--ink);
  color: var(--canvas);
}
.skip:focus {
  top: 10px;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--canvas);
}
.brand {
  display: flex;
  align-items: center;
  width: 154px;
  min-height: 48px;
}
.brand img {
  width: 100%;
  height: auto;
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(24px,3.8vw,64px);
}
.nav a {
  white-space: nowrap;
}
.ink-link {
  position: relative;
  display: inline-block;
  padding: 6px 0;
}
.ink-link:after {
  content: '';
  position: absolute;
  left: -2px;
  bottom: 0;
  width: calc(100% + 4px);
  height: 7px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 9' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C30 2 48 7 78 4 S129 2 158 4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 260ms cubic-bezier(.25,.65,.3,1);
}
.ink-link:hover:after,
.ink-link:focus-visible:after,
.ink-link[aria-current=page]:after {
  clip-path: inset(0);
}
@media (hover:none) {
  .ink-link:active:after {
    clip-path: inset(0);
    transition: none;
  }
}
.arrow {
  display: inline-block;
  margin-left: 9px;
  transition: transform 180ms ease;
}
.external:hover .arrow,
.external:focus-visible .arrow {
  transform: translate(3px,-3px);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--canvas);
  padding: 12px 22px;
  transition: background 120ms,color 120ms;
}
.button:hover {
  background: var(--canvas);
  color: var(--ink);
}
.menu-toggle {
  display: none;
  border: 0;
  background: none;
  min-height: 48px;
  font-family: var(--font-display);
  font-size: 14px;
  gap: 12px;
  align-items: center;
  text-transform: uppercase;
}
.menu-lines {
  width: 22px;
  height: 9px;
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.home {
  padding: 0 var(--gutter);
}
.hero {
  position: relative;
  height: min(66svh,740px);
  min-height: 360px;
  overflow: hidden;
  background: var(--ink);
}
.hero-poster {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  inset: 0;
}
.hero video {
  object-position: 50% 52%;
}
.hero:after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(35,18,0,.2);
  pointer-events: none;
}
.hero-title {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hero-title img {
  width: clamp(260px,53vw,790px);
  max-width: 83%;
  height: auto;
}
.hero-caption {
  position: absolute;
  z-index: 3;
  bottom: 22px;
  left: 24px;
  color: var(--canvas);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-family: var(--font-display);
}
.video-toggle {
  position: absolute;
  z-index: 3;
  bottom: 14px;
  right: 16px;
  min-width: 48px;
  min-height: 48px;
  background: var(--canvas);
  border: 0;
  color: var(--ink);
  padding: 10px 16px;
}
.scroll-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 0 20px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-family: var(--font-display);
}
.scroll-row a {
  padding: 5px 0;
  min-height: 32px;
}
.visit {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 48px;
  padding: 43px 0 54px;
  scroll-margin-top: 100px;
}
.visit h2 {
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.visit .hours {
  font-family: var(--font-display);
  font-size: clamp(23px,2.1vw,32px);
  line-height: 1.35;
  letter-spacing: -.04em;
}
.visit p+p {
  margin-top: 8px;
}
.visit .small {
  font-size: 14px;
  margin-top: 12px;
}
.footer {
  padding: 27px var(--gutter);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 30px;
  font-size: 14px;
}
.footer-address {
  line-height: 1.6;
}
.footer-links {
  display: flex;
  gap: 30px;
  align-items: center;
}
.footer-mark {
  width: 80px;
  height: auto;
}
.mobile-dialog {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 0;
  background: var(--ink);
  color: var(--canvas);
}
.mobile-dialog[open] {
  display: flex;
  flex-direction: column;
}
.mobile-dialog::backdrop {
  background: transparent;
}
.dialog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px var(--gutter);
}
.dialog-top img {
  width: 130px;
  height: auto;
}
.close-menu {
  background: transparent;
  color: inherit;
  border: 0;
  min-height: 48px;
  padding: 10px 0 10px 16px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
}
.mobile-links {
  padding: clamp(35px,9svh,110px) var(--gutter) 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--font-display);
  font-size: clamp(30px,6vw,55px);
  line-height: 1.3;
}
.mobile-links a {
  padding: 8px 0;
}
.dialog-bottom {
  margin-top: auto;
  padding: 28px var(--gutter) 40px;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  font-size: 14px;
  border-top: 1px solid color-mix(in srgb,var(--canvas) 35%,transparent);
}
.dialog-bottom a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.page {
  min-height: calc(100svh - 245px);
  padding: clamp(40px,6vw,95px) var(--gutter) 85px;
}
.page-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 55px;
}
.page-heading h1 {
  font-size: clamp(42px,5.5vw,80px);
  line-height: 1.12;
  letter-spacing: -.055em;
}
.page-heading .intro {
  max-width: 390px;
  padding-top: 9px;
  font-size: 18px;
}
.eyebrow {
  margin-bottom: 20px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.contact-aside {
  max-width: 350px;
}
.contact-aside h2 {
  font-size: 25px;
  margin-bottom: 15px;
}
.contact-aside .address {
  margin-top: 40px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
  gap: 9px;
}
.field label {
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.field input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 10px 0 14px;
  width: 100%;
  min-height: 48px;
  border-radius: 0;
}
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 10px 0 14px;
  width: 100%;
  border-radius: 0;
}
.field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 10px 0 14px;
  width: 100%;
  min-height: 48px;
  border-radius: 0;
}
.field textarea {
  resize: vertical;
  min-height: 128px;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink);
  opacity: .6;
}
.form-note {
  font-size: 14px;
  margin: 20px 0;
  max-width: 480px;
}
.status {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--rule);
}
.status:empty {
  display: none;
}
.menu-panel {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 35px 0;
  display: flex;
  justify-content: space-between;
  gap: 35px;
  align-items: center;
}
.menu-panel h2 {
  font-size: 28px;
  margin-bottom: 8px;
}
.menu-panel p {
  max-width: 520px;
}
.menu-support {
  margin-top: 35px;
  max-width: 500px;
}
.pdf-frame {
  width: 100%;
  height: 75svh;
  border: 1px solid var(--rule);
  margin-top: 32px;
}
.honeypot {
  position: absolute;
  left: -10000px;
}
.prototype-note {
  font-size: 12px;
  max-width: 420px;
  opacity: .85;
}
.no-js {
  padding: 20px var(--gutter);
}
[hidden] {
  display: none !important;
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (min-width:810px) and (max-width:1199px) {
  .brand {
    width: 135px;
  }
  .nav {
    gap: 28px;
  }
  .hero {
    height: min(60svh,640px);
  }
  .visit {
    gap: 30px;
  }
  .page-heading,
  .contact-grid {
    gap: 40px;
  }
  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
@media (max-width:809px) {
  .site-header {
    padding-top: 17px;
    padding-bottom: 17px;
  }
  .brand {
    width: 125px;
  }
  .nav {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
  .hero {
    height: calc(76svh - 89px);
    min-height: 280px;
    max-height: 650px;
  }
  .hero-poster,
  .hero video {
    object-position: 47% 50%;
  }
  .hero-title img {
    width: 80%;
    max-width: 85%;
  }
  .hero-caption {
    left: 15px;
    bottom: 17px;
    font-size: 10px;
    max-width: 190px;
    line-height: 1.5;
  }
  .scroll-row {
    padding: 12px 0;
    font-size: 11px;
  }
  .visit {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 24px 0 38px;
  }
  .visit h2 {
    margin-bottom: 10px;
  }
  .visit .hours {
    font-size: 26px;
  }
  .visit>div+div {
    border-top: 1px solid var(--rule);
    padding-top: 26px;
  }
  .footer {
    flex-direction: column;
    padding-top: 25px;
  }
  .footer-links {
    width: 100%;
  }
  .page {
    padding-top: 35px;
    padding-bottom: 45px;
  }
  .page-heading,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .page-heading {
    margin-bottom: 38px;
  }
  .page-heading .intro {
    padding: 0;
    font-size: 16px;
  }
  .contact-aside .address {
    margin-top: 20px;
  }
  .contact-aside {
    max-width: none;
  }
  .contact-form {
    margin-top: 12px;
  }
  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .menu-panel {
    align-items: flex-start;
    flex-direction: column;
  }
  .pdf-frame {
    display: none;
  }
  .dialog-bottom {
    flex-direction: column;
    gap: 10px;
  }
  .mobile-links {
    gap: 14px;
  }
  .eyebrow {
    margin-bottom: 15px;
  }
}
@media (prefers-reduced-motion:reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
.hero-vimeo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.hero-vimeo.ready {
  opacity: 1;
}
.draft-banner {
  padding: 12px 22px;
  background: var(--ink);
  color: var(--canvas);
  text-align: center;
  font-size: 14px;
}
.draft-banner a {
  text-decoration: underline;
  margin-left: 16px;
}
.hero-caption:empty {
  display: none;
}
.contact-phone {
  margin-top: 28px;
}
.contact-phone a {
  text-decoration: underline;
}
.footer-links {
  flex-wrap: wrap;
}
.face-mark {
  display: none;
}
.face-prototype .site-header .brand {
  width: 72px;
  min-height: 72px;
}
.face-prototype .site-header .brand>img {
  display: none;
}
.face-prototype .site-header .face-mark {
  display: block;
  width: 72px;
  height: 72px;
  fill: var(--ink);
  overflow: visible;
}
.face-prototype .hero {
  margin-inline: calc(-1 * var(--gutter));
}
.face-prototype .hero:after {
  display: none;
}
.face-prototype .scroll-row {
  gap: 20px;
  flex-wrap: wrap;
}
.face-prototype .scroll-row>a {
  margin-left: auto;
}
.face-prototype .scroll-row .video-toggle {
  background: transparent;
  color: var(--ink);
  text-transform: uppercase;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.face-prototype .home>.hero-caption {
  position: static;
  display: block;
  color: var(--ink);
  margin-block: 12px;
  font: 14px var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}
.face-prototype .home>.hero-caption:empty {
  display: none;
}
.face-pupil {
  transform-box: view-box;
  transform-origin: 0 0;
}
@media (max-width:809px) {
  .face-prototype .site-header .brand,
  .face-prototype .site-header .face-mark {
    width: 56px;
    height: 56px;
    min-height: 56px;
  }
  .face-prototype .scroll-row {
    gap: 8px 18px;
  }
}
/* Home typography and layout from Figma Home / Desktop (315:2). */
@font-face {
  font-family: 'WT Garamono';
  src: url('/assets/fonts/WTGaramonoTRIAL-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularXX';
  src: url('/assets/fonts/CircularXX-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.footer,
.landing-page .visit>div+div {
  border: 0;
}
.address-separator {
  display: block;
  font-size: 0;
}
@media (min-width:1200px) {
  .landing-page .site-header {
    padding-left: clamp(48px,4.2361vw,81px);
  }
  .landing-page .hero {
    height: min(72.9svh,820px);
    min-height: 360px;
  }
  .landing-page .scroll-row {
    position: relative;
    font-family: 'Courier New',monospace;
  }
  .landing-page .scroll-row>a {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .landing-page .visit {
    padding-top: 29px;
    padding-bottom: 20px;
  }
  .landing-page .visit .hours {
    white-space: normal;
  }
  .footer {
    padding-top: 27px;
    padding-bottom: 16px;
  }
  .footer-address .ink-link {
    padding: 0;
  }
  .landing-page .address-separator {
    display: inline;
    font-size: inherit;
  }
}
.landing-page .site-header {
  position: absolute;
  background: transparent;
  color: var(--canvas);
}
.face-prototype .landing-page .site-header .brand>img {
  display: block;
  height: auto;
}
.face-prototype .landing-page .site-header .face-mark {
  display: none;
}
.landing-page .hero-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.landing-page .scroll-row {
  height: 0;
  padding: 0;
  border: 0;
}
.landing-page .scroll-row>span,
.landing-page .scroll-row>a,
.landing-page .site-header .arrow,
.footer .arrow {
  display: none;
}
.landing-page .visit {
  min-height: 171px;
  padding: 29px 0 20px;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 48px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  line-height: 20px;
}
.landing-page .visit h2 {
  line-height: 21.7px;
  margin-bottom: 4px;
}
.landing-page .visit .small {
  font-size: 14px;
  line-height: 21.7px;
}
.landing-page .visit>div+div {
  text-align: center;
}
.landing-page .visit>div+div h2 {
  display: none;
}
.landing-page .visit>div+div .ink-link {
  padding: 0;
}
.footer {
  padding-block: 27px;
  text-transform: uppercase;
  line-height: 22.4px;
}
.footer-address {
  max-width: none;
}
.footer-links>a[href='/contact/'],
.footer-mark {
  display: none;
}
.footer-home {
  width: 44px;
}
.footer-home .face-mark {
  display: block;
  fill: var(--ink);
  width: 30.24px;
  height: 30.24px;
}
@media (min-width:810px) and (max-width:1199px) {
  .landing-page .hero {
    height: min(72.9svh,820px);
  }
  .landing-page .visit {
    gap: 30px;
  }
}
@media (max-width:809px) {
  .landing-page .site-header {
    padding-block: 17px;
  }
  .landing-page .hero {
    height: 73svh;
    min-height: 380px;
    max-height: 740px;
  }
  .landing-page .visit {
    min-height: 0;
  }
  .landing-page .visit>div+div {
    padding: 0;
  }
  .footer {
    padding-block: 20px 26px;
  }
  .footer-home {
    margin-left: auto;
  }
}
/* Shared public-page navigation, with ink on cream away from the film. */
.inner-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.inner-page>.page {
  flex: 1;
  min-height: 0;
}
.inner-page .site-header {
  position: relative;
}
.inner-page .brand {
  width: 172px;
  min-height: 0;
}
.inner-page .site-header .arrow {
  display: none;
}
@media (min-width:1200px) {
  .inner-page .site-header {
    padding-left: clamp(48px,4.2361vw,81px);
  }
}
@media (min-width:810px) and (max-width:1199px) {
  .inner-page .brand {
    width: 150px;
  }
}
.menu-toggle {
  justify-content: flex-end;
  padding: 8px 0 8px 15px;
}
@media (max-width:809px) {
  .landing-page .site-header,
  .inner-page .site-header {
    padding-top: 0;
    padding-bottom: 17px;
  }
  .inner-page .brand {
    width: 77px;
  }
  .landing-page .visit {
    padding: 26px 0 46px;
    text-align: center;
  }
  .landing-page .visit>div:first-child {
    grid-column: 1/-1;
  }
  .landing-page .visit>div+div {
    text-align: center;
    min-width: 0;
  }
  .landing-page .visit .group-brand {
    display: none;
  }
  .footer {
    text-align: center;
    padding: 20px 22px 26px;
  }
  .footer-links {
    justify-content: center;
  }
  .footer-links>[data-instagram],
  .footer-links>[data-gift] {
    display: none;
  }
  .footer-home {
    margin: 0;
  }
  .footer-home .face-mark {
    width: 44px;
    height: 44px;
  }
}
/* Native uploaded film uses the same full-bleed crop as Vimeo. */
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Landing review: a shared edge, deliberate line breaks, and restrained motion. */
:root {
  --gutter: 48px;
}
.site-header,
.inner-page .site-header,
.landing-page .site-header {
  padding-inline: var(--gutter);
}
.landing-page .visit {
  align-items: start;
  column-gap: 32px;
}
.landing-page .visit .hours {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  font-size: 27px;
  line-height: 1.4;
  letter-spacing: -.035em;
}
.landing-page .visit .hours span {
  white-space: nowrap;
}
.landing-page .visit .small {
  margin-top: 6px;
}
.landing-page .visit>div+div {
  padding-top: 32px;
}
.landing-page .visit>div+div .ink-link {
  padding-block: 10px;
  margin-block: -10px;
  min-height: 44px;
}
.site-header .nav>.ink-link {
  display: inline-flex;
  align-items: center;
}
.site-header .nav>.ink-link:after {
  bottom: 6px;
}
.landing-page .site-header:before {
  content: '';
  position: absolute;
  inset: -4px 0 -24px;
  z-index: -1;
  background: linear-gradient(to bottom,rgba(25,15,3,.42),transparent);
  pointer-events: none;
}
.footer-address>a {
  display: inline-block;
  padding-block: 10px;
}
@media (min-width:810px) and (max-width:1199px) {
  :root {
    --gutter: 32px;
  }
  .landing-page .visit {
    grid-template-columns: 1.25fr 1fr 1fr;
    column-gap: 24px;
  }
  .landing-page .visit .hours {
    font-size: 23px;
    gap: 0 8px;
  }
}
@media (max-width:809px) {
  :root {
    --gutter: 24px;
  }
  .landing-page .visit {
    gap: 24px 16px;
    padding-bottom: 32px;
  }
  .landing-page .visit .hours {
    justify-content: center;
    font-size: clamp(22px,5.9vw,27px);
    gap: 0 10px;
    line-height: 1.4;
  }
  .landing-page .visit>div+div {
    padding-top: 0;
  }
  .landing-page .visit p {
    font-size: 14px;
    line-height: 1.5;
  }
  .landing-page .visit .small {
    margin-top: 8px;
  }
  .footer {
    padding-inline: var(--gutter);
  }
}
@media (min-width:810px) {
  .landing-page .visit {
    min-height: 147px;
  }
  .landing-page .visit>div+div {
    padding-top: 31px;
  }
}
@media (min-width:810px) and (max-width:1199px) {
  .landing-page .visit>div+div {
    padding-top: 28px;
  }
}
@media (max-width:809px) {
  .landing-page .visit {
    column-gap: 24px;
    grid-template-columns: minmax(0,.98fr) minmax(0,1.02fr);
  }
}
@media (min-width:360px) and (max-width:809px) {
  .landing-page .visit>div:nth-child(3)>p {
    white-space: nowrap;
  }
}
/* Keep the drawn stroke beside the text, independent of the padded hit area. */
.landing-page .visit>div+div .ink-link:after {
  bottom: 12px;
}
/* Compact menu introduction, matching the simplified Figma layout. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.menu-page .menu-panel h2,
.menu-page .menu-panel p {
  text-transform: uppercase;
}
.menu-page .menu-panel .button {
  flex-shrink: 0;
}
@media (max-width:809px) {
  .menu-page .menu-panel h2 {
    font-size: 26px;
  }
}
.live-menu {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 48px 64px;
  margin-top: 48px;
}
.live-menu-section h2 {
  font-size: 18px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 16px;
}
.live-menu-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.live-menu-section li {
  margin: 28px 0;
}
.live-menu-item-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}
.live-menu-item-heading h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  text-transform: uppercase;
  margin: 0;
}
.live-menu-item-heading span {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 18px;
}
.live-menu-section li p {
  font-size: 15px;
  line-height: 1.6;
  margin-top: 6px;
}
.live-menu-note {
  font-size: 15px;
  line-height: 1.6;
  margin-top: 6px;
  white-space: pre-line;
}
.live-menu-notes {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  margin-top: 32px;
  max-width: 800px;
  font-size: 13px;
  white-space: pre-line;
}
@media (max-width:809px) {
  .live-menu {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 32px;
  }
  .live-menu-item-heading h3 {
    font-size: 18px;
  }
}
/* Shared address and studio-credit footer across all public pages. */
.footer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.footer .footer-address {
  font-size: 14px;
  line-height: 1.5;
}
.footer .footer-address a {
  padding: 0;
}
.studio-credit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}
.studio-credit>span {
  text-transform: uppercase;
}
.studio-credit a {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  transition: color 160ms ease;
  min-height: 24px;
}
.studio-credit svg {
  display: block;
  width: 100px;
  height: auto;
}
.studio-credit a:hover,
.studio-credit a:focus-visible {
  color: #877D25;
}
.footer {
  min-height: 100px;
  align-items: center;
}
@media (max-width:809px) {
  .footer-info {
    align-items: center;
    width: 100%;
  }
  .studio-credit {
    justify-content: center;
    font-size: 12px;
    gap: 5px;
  }
  .studio-credit svg {
    width: 94px;
  }
  .footer .footer-address {
    font-size: 12px;
  }
  .footer {
    gap: 16px;
    padding-bottom: 24px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .studio-credit a {
    transition: none;
    min-height: 24px;
  }
}
/* Menu typography follows the printed menu: a shared description/price baseline. */
.live-menu-section li {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  column-gap: 24px;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  text-transform: uppercase;
}
.live-menu-section li h3 {
  grid-column: 1;
  grid-row: 1;
  font: inherit;
  margin: 0;
  overflow-wrap: anywhere;
}
.live-menu-section li p {
  grid-column: 1;
  grid-row: 2;
  font: inherit;
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.live-menu-price {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
}
.has-description>.live-menu-price {
  grid-row: 2;
}
.live-menu-note,
.live-menu-notes {
  font-family: var(--font-display);
  text-transform: uppercase;
}
@media (max-width:809px) {
  .live-menu-section li {
    font-size: 16px;
    column-gap: 18px;
  }
}
/* Coffee credit follows the printed menu's raised, inline placement. */
.live-menu-section h2 .coffee-attribution {
  display: inline-block;
  margin-left: .7em;
  position: relative;
  top: -.75em;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}
.live-menu-note em {
  font-style: italic;
}
/* Supplied brand vectors; seeded variation stays consistent while reading. */
.menu-page {
  --menu-line-top: url('/assets/menu-line-top.svg');
  --menu-line-bottom: url('/assets/menu-line-bottom.svg');
}
.menu-page .menu-panel,
.live-menu-section h2,
.live-menu-notes {
  position: relative;
  border: 0;
}
.menu-page .menu-panel::before,
.menu-page .menu-panel::after {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ink);
  pointer-events: none;
  mask-image: var(--stroke,var(--menu-line-top));
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--stroke,var(--menu-line-top));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}
.live-menu-section h2::after {
  content: '';
  position: absolute;
  height: 3px;
  background: var(--ink);
  pointer-events: none;
  mask-image: var(--stroke,var(--menu-line-top));
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--stroke,var(--menu-line-top));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}
.live-menu-notes::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ink);
  pointer-events: none;
  mask-image: var(--stroke,var(--menu-line-top));
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--stroke,var(--menu-line-top));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}
.menu-page .menu-panel::before,
.live-menu-notes::before {
  top: 0;
}
.menu-page .menu-panel::after,
.live-menu-section h2::after {
  bottom: 0;
}
.menu-page .menu-panel::after,
.menu-stroke-bottom {
  --stroke: var(--menu-line-bottom);
}
.menu-stroke-top {
  --stroke: var(--menu-line-top);
}
.live-menu-notes {
  --stroke: var(--menu-line-bottom);
}
@media (max-width:809px) {
  .menu-page .menu-panel::before,
  .menu-page .menu-panel::after,
  .live-menu-section h2::after,
  .live-menu-notes::before {
    height: 2px;
  }
}
/* Menu introduction: open space, with rules reserved for the categories. */
.menu-page {
  padding-top: clamp(28px,3.3vw,48px);
}
.menu-page .menu-panel {
  padding: 0;
  gap: 24px;
  align-items: flex-start;
}
.menu-page .menu-panel::before,
.menu-page .menu-panel::after {
  content: none;
}
.menu-page .menu-panel h2 {
  margin: 0 0 12px;
  line-height: 1.25;
}
.menu-page .menu-panel p {
  line-height: 1.5;
}
.menu-page .live-menu {
  margin-top: 40px;
}
@media (max-width:809px) {
  .menu-page {
    padding-top: 28px;
  }
  .menu-page .menu-panel {
    gap: 20px;
  }
  .menu-page .menu-panel h2 {
    margin-bottom: 10px;
  }
  .menu-page .live-menu {
    margin-top: 32px;
  }
}
.menu-panel [hidden] {
  display: none !important;
}
.menu-panel h2:has(+p[hidden]) {
  margin-bottom: 0;
}
@media (max-width:809px) {
  .live-menu-section h2 {
    font-size: 16px;
  }
}
/* Shared mobile logo geometry and the landing page's quiet text entrance. */
.mobile-dialog[open] {
  animation: none;
}
@media (max-width:809px) {
  .dialog-top {
    height: 89px;
    min-height: 89px;
    padding: 0 var(--gutter) 17px;
  }
  .dialog-top>a {
    display: flex;
    width: 94px;
    min-height: 0;
  }
  .dialog-top img {
    display: block;
    width: 94px;
    height: auto;
  }
  .mobile-links {
    font-size: clamp(30px,6vw,40px);
    text-transform: uppercase;
  }
}
/* Contact: the approved two-column layout, with the enquiry form first on phones. */
.contact-page {
  padding-top: clamp(40px,5vw,72px);
  padding-bottom: 56px;
  min-height: 0;
}
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-template-areas: 'intro .' 'policy form' 'details form';
  column-gap: clamp(40px,5vw,72px);
  row-gap: 40px;
}
.contact-intro {
  grid-area: intro;
  font: 18px/1.55 var(--font-display);
  text-transform: uppercase;
}
.contact-policy {
  grid-area: policy;
  max-width: 365px;
  font: 16px/1.5 var(--font-display);
  text-transform: uppercase;
}
.contact-details {
  grid-area: details;
  display: flex;
  flex-direction: column;
  align-self: start;
}
.contact-details .address {
  font-size: 14px;
  line-height: 1.5;
  text-transform: uppercase;
}
.contact-details .address a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: -8px;
}
.contact-hours h2 {
  text-transform: uppercase;
}
.contact-hours .hours {
  font: clamp(20px,2vw,27px)/1.4 var(--font-display);
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
}
.contact-hours .hours span {
  white-space: nowrap;
}
.hours-note {
  font: 14px/1.5 var(--font-display);
  text-transform: uppercase;
  margin-top: 8px;
}
.contact-form {
  grid-area: form;
  width: 100%;
  max-width: none;
  margin: 0;
}
.contact-form .field-row {
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.contact-form .field {
  margin-bottom: 24px;
  gap: 8px;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  font-size: 16px;
}
.contact-form .form-note {
  font-size: 13px;
  line-height: 1.5;
  margin: 16px 0 0;
  max-width: 440px;
}
.contact-form .form-note[hidden] {
  display: none;
}
.contact-form .status {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.contact-form .button {
  min-height: 48px;
}
.mobile-dialog {
  overscroll-behavior: contain;
}
.mobile-links>a[hidden],
.footer-links>a[hidden] {
  display: none;
}
@media (max-width:809px) {
  .contact-page {
    padding-top: 28px;
    padding-bottom: 40px;
  }
  .contact-layout {
    grid-template-columns: 1fr;
    grid-template-areas: 'intro' 'policy' 'form' 'details';
    row-gap: 28px;
  }
  .contact-intro {
    font-size: 18px;
  }
  .contact-policy {
    max-width: 440px;
  }
  .contact-form .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .contact-form .button {
    width: 100%;
  }
  .mobile-dialog .dialog-top {
    position: sticky;
    top: 0;
    background: var(--ink);
    z-index: 1;
  }
  .mobile-links {
    flex-shrink: 0;
  }
  .dialog-bottom {
    flex-shrink: 0;
    padding-bottom: max(32px,env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
}
.contact-intro {
  text-wrap: pretty;
  max-width: 430px;
}
.contact-details .address-separator {
  display: inline;
}
.contact-details .address-separator:after {
  content: none;
}
.contact-details .address-separator {
  font-size: inherit;
}
.menu-toggle {
  min-width: 44px;
}
.footer-home {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.face-prototype .landing-page .scroll-row {
  display: flex;
  justify-content: flex-end;
}
.face-prototype .scroll-row .video-toggle {
  position: static;
  min-width: 44px;
  min-height: 44px;
  font: 12px/1.4 var(--font-display);
  letter-spacing: .04em;
  padding: 10px 0;
}
.face-prototype .scroll-row .video-toggle[hidden] {
  display: none;
}
/* Accessible, high-contrast playback control over the film. */
.face-prototype .landing-page .scroll-row {
  height: 0;
  min-height: 0;
  padding: 0;
}
.hero .video-toggle {
  position: absolute;
  inset: auto 20px 20px auto;
  z-index: 4;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero .video-toggle::before {
  content: '';
  width: 18px;
  height: 20px;
  background: currentColor;
  clip-path: polygon(15% 0,100% 50%,15% 100%);
}
.hero .video-toggle[aria-label^="Pause"]::before {
  clip-path: polygon(10% 0,38% 0,38% 100%,10% 100%,10% 0,62% 0,90% 0,90% 100%,62% 100%,62% 0);
}
.hero .video-toggle:focus-visible {
  outline: 3px solid var(--canvas);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--ink);
}
@media (max-width:809px) {
  .hero .video-toggle {
    bottom: 16px;
  }
}
.live-menu-section li:nth-child(3n + 2) {
  padding-left: 12px;
}
.live-menu-section li:nth-child(3n) {
  padding-left: 6px;
}
.live-menu-section.menu-stroke-bottom h2::after {
  left: 6px;
  right: 2px;
}
.live-menu-section.menu-stroke-top h2::after {
  left: 0;
  right: 8px;
}
@media (max-width:809px) {
  .live-menu-section li:nth-child(3n + 2) {
    padding-left: 6px;
  }
  .live-menu-section li:nth-child(3n) {
    padding-left: 3px;
  }
}
.nav .ink-link[aria-current=page]::before,
.mobile-links .ink-link[aria-current=page]::before {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
}
.nav .ink-link:hover::after,
.nav .ink-link:focus-visible::after,
.mobile-links .ink-link:hover::after,
.mobile-links .ink-link:focus-visible::after {
  clip-path: inset(0);
}
/* Shared header geometry is present before scripts and fonts finish loading. */
html {
  scrollbar-gutter: stable;
}
.site-header,
.landing-page .site-header,
.inner-page .site-header {
  height: 120px;
  min-height: 120px;
  padding: 22px var(--gutter);
}
.landing-page .site-header {
  inset: 0 0 auto;
}
.site-header .brand,
.face-prototype .landing-page .site-header .brand,
.face-prototype .landing-page .site-header .brand>img,
.inner-page .site-header .brand {
  width: 172px;
  min-height: 0;
}
.site-header .nav,
.face-prototype .nav,
.inner-page .nav {
  gap: 24px;
  font-size: 14px;
  line-height: 1.55;
}
.site-header .nav>.button {
  width: 156px;
  min-height: 48px;
}
.site-header .nav>.ink-link {
  min-height: 44px;
}
@media (min-width:810px) and (max-width:1199px) {
  .site-header .brand,
  .face-prototype .landing-page .site-header .brand,
  .face-prototype .landing-page .site-header .brand>img,
  .inner-page .site-header .brand {
    width: 150px;
  }
  .site-header .nav,
  .face-prototype .nav,
  .inner-page .nav {
    gap: 20px;
  }
}
@media (max-width:809px) {
  .site-header,
  .landing-page .site-header,
  .inner-page .site-header {
    height: 89px;
    min-height: 89px;
    padding: 0 var(--gutter) 17px;
  }
  .site-header .brand,
  .face-prototype .landing-page .site-header .brand,
  .face-prototype .landing-page .site-header .brand>img,
  .inner-page .site-header .brand {
    width: 94px;
  }
}
.live-menu-section li:nth-child(n) {
  padding-left: 0;
}
.live-menu-section h2::after {
  left: 0;
  right: 0;
}
.prototype-note {
  font: 12px/1.5 var(--font-body);
  margin: 0 0 24px;
  color: var(--ink);
}
@media (max-width:809px) {
}
@media (prefers-reduced-motion:reduce) {
}
/* The current-page stroke yields to another navigation link, then returns. */
.nav .ink-link[aria-current=page]::before,
.mobile-links .ink-link[aria-current=page]::before {
  content: none;
}
.nav .ink-link[aria-current=page]::after,
.mobile-links .ink-link[aria-current=page]::after {
  clip-path: inset(0);
}
.nav:has(>a:not([aria-current=page]):hover) .ink-link[aria-current=page]::after,
.nav:has(>a:not([aria-current=page]):focus-visible) .ink-link[aria-current=page]::after,
.mobile-links:has(>a:not([aria-current=page]):hover) .ink-link[aria-current=page]::after,
.mobile-links:has(>a:not([aria-current=page]):focus-visible) .ink-link[aria-current=page]::after {
  clip-path: inset(0 100% 0 0);
}
/* A quiet separation for optional supplements, smaller than item spacing. */
.menu-description-line,
.menu-addon {
  display: block;
}
.menu-addon {
  margin-top: 6px;
}
/* Prices share the final ingredient baseline; supplements occupy their own row. */
.live-menu-section li>.menu-description,
.has-description>.live-menu-price {
  align-self: last baseline;
}
.live-menu-section li>.menu-supplements {
  grid-column: 1;
  grid-row: 3;
  margin-top: 6px;
}
/* A compact hours block beneath the Gloria divider. */
.contact-details {
  gap: 0;
  padding-top: 0;
}
.contact-hours {
  position: relative;
  width: 100%;
  padding-top: 22px;
}
.contact-hours::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ink);
  mask: url('/assets/menu-line-bottom.svg') center/100% 100% no-repeat;
  -webkit-mask: url('/assets/menu-line-bottom.svg') center/100% 100% no-repeat;
  pointer-events: none;
}
.contact-hours h2 {
  font-size: 14px;
  margin-bottom: 6px;
}
.contact-hours .hours {
  font-size: 18px;
  line-height: 1.5;
  gap: 0 10px;
}
.contact-hours .hours-note {
  font-size: 14px;
  margin-top: 4px;
}
@media (min-width:810px) {
  .contact-details {
    margin-top: -12px;
  }
}
@media (max-width:809px) {
  .contact-hours {
    padding-top: 20px;
  }
  .contact-hours::before {
    height: 2px;
  }
}
/* Footer links share the navigation's hand-drawn stroke and reveal. */
.footer-address>a,
.footer-links>a[data-instagram],
.footer-links>a[data-gift],
.footer .studio-credit a { position:relative; text-decoration:none; border-bottom:0; }
.footer-links>a:is([data-instagram],[data-gift]) { display:inline-block; padding:10px 0; }
:is(.footer-address>a,.footer-links>a[data-instagram],.footer-links>a[data-gift])::after {
  content:''; position:absolute; left:-2px; bottom:-5px;
  width:calc(100% + 4px); height:7px; background:currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 9' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C30 2 48 7 78 4 S129 2 158 4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 260ms cubic-bezier(.25,.65,.3,1);
  pointer-events:none;
}
.footer-links>a:is([data-instagram],[data-gift])::after { bottom:5px; }
.footer .studio-credit a::after { content:none; }
:is(.footer-address>a,.footer-links>a[data-instagram],.footer-links>a[data-gift]):is(:focus-visible,:active)::after { clip-path:inset(0); }
@media(hover:hover) {
  :is(.footer-address>a,.footer-links>a[data-instagram],.footer-links>a[data-gift]):hover::after { clip-path:inset(0); }
}
@media(max-width:809px) { .footer-links { gap:8px 24px; } }
@media(prefers-reduced-motion:reduce) {
  :is(.footer-address>a,.footer-links>a[data-instagram],.footer-links>a[data-gift])::after { transition:none; }
}
/* Start both contact columns together; leave the stacked phone order intact. */
@media (min-width:810px) {
  .contact-layout {
    grid-template-areas: 'intro form' 'policy form' 'details form';
    grid-template-rows: auto auto 1fr;
  }
  .contact-form {
    align-self: start;
    position: relative;
  }

}
/* Print-inspired drinks sections span the menu, with a shared pair of rules. */
.live-menu-section.menu-drinks {
  grid-column: 1/-1;
  position: relative;
  padding: 28px 0;
  border: 0;
}
.menu-drinks::before,
.menu-drinks::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ink);
  mask: var(--menu-line-top) center/100% 100% no-repeat;
  -webkit-mask: var(--menu-line-top) center/100% 100% no-repeat;
  pointer-events: none;
}
.menu-drinks::before {
  top: 0;
}
.menu-drinks::after {
  bottom: 0;
  mask-image: var(--menu-line-bottom);
  -webkit-mask-image: var(--menu-line-bottom);
}
.menu-drinks h2::after {
  content: none;
}
.menu-drinks h2 {
  padding-bottom: 0;
}
@media (min-width:810px) {
  .menu-drinks ul {
    columns: 2;
    column-gap: 64px;
  }
  .menu-drinks li {
    break-inside: avoid;
  }
  .menu-drinks-vino li:nth-child(4),
  .menu-drinks-cocktails li:nth-child(3) {
    break-before: column;
  }
  .menu-drinks-vino li:nth-child(4) {
    margin-top: 72px;
  }
  .menu-drinks-cocktails li:nth-child(3) {
    margin-top: 56px;
  }
}
/* Compact inputs and a message area that follows its content. */
.contact-form input,
.contact-form select {
  padding-bottom: 6px;
  min-height: 48px;
}
.contact-form textarea {
  min-height: calc(3 * 1.55em + 17px);
  height: calc(3 * 1.55em + 17px);
  padding: 10px 0 6px;
  line-height: 1.55;
  resize: vertical;
}
.contact-form textarea.is-autosizing {
  resize: none;
  overflow-y: hidden;
}
/* Smoked glass keeps the solid cream icon readable over changing footage. */
.hero .video-toggle {
  right: var(--gutter);
  background: rgba(30,20,10,.72);
  color: var(--canvas);
  border: 1px solid rgba(249,234,210,.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: none;
  transition: background 160ms ease;
}
.hero .video-toggle:hover {
  transform: none;
  background: rgba(30,20,10,.84);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .hero .video-toggle {
    background: rgba(30,20,10,.92);
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero .video-toggle {
    transition: none;
  }
}
/* Contact audit: preserve the brand rules while clarifying input and error states. */
.contact-form .field-hint,
.contact-form .field-error {
  font: 14px/1.45 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}
.contact-form .field-hint {
  color: var(--ink);
  opacity: .8;
}
.contact-form .field-error {
  color: var(--ink);
}
.contact-form :is(input,textarea,select):focus {
  outline: none;
  box-shadow: 0 2px 0 var(--ink);
}
@media (forced-colors: active) {
  .contact-form :is(input,textarea,select):focus {
    border-bottom-width: 3px;
  }
}
.contact-form :is(input,textarea)[aria-invalid=true] {
  border-bottom-width: 2px;
}
.contact-form :is(input,textarea)::placeholder {
  color: #89633f;
  opacity: 1;
}
.contact-form select:required:invalid { color: #89633f; }
.contact-form select option { color: var(--ink); }
.contact-form textarea {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  scroll-margin-block: 120px 32px;
}
.contact-form .field,
.field-row>* {
  min-width: 0;
}
.contact-form .button:disabled {
  opacity: .65;
  cursor: wait;
}
.form-fallback {
  grid-area: form;
}
.form-fallback a {
  text-decoration: underline;
}
@media (max-width:809px) {
  .menu-toggle {
    min-width: 48px;
  }
  .mobile-dialog {
    overflow-y: auto;
  }
  .dialog-top {
    flex-shrink: 0;
  }
}

/* Mobile social links live in navigation; the footer closes with the face. */
@media (max-width:809px) {
  .footer {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    justify-items: center;
    gap: 24px;
    padding-block: 32px;
  }
  .footer-links { display: contents; }
  .footer-links>a[data-instagram],
  .footer-links>a[data-gift] { display: none; }
  .footer-info { grid-row: 1; gap: 4px; }
  .footer-home { grid-row: 2; margin: 0; }
}

.contact-form .required-note {
  margin: 12px 0 0;
  color: #80562d;
  font: 12px/1.5 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* The drawer shares the footer's centered sign-off and restrained typography. */
.mobile-dialog .dialog-bottom {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  border-top: 0;
  font: 12px/1.5 var(--font-body);
  text-transform: uppercase;
}
.dialog-bottom .footer-info { align-items: center; }
.dialog-bottom .footer-address a { padding: 0; min-height: 24px; }
.dialog-bottom .studio-credit { justify-content: center; font-size: 12px; }
.dialog-bottom .studio-credit svg { width: 94px; }
.dialog-bottom .footer-home { margin: 0; }
/* Approved aligned navigation: shared left edge and a calm opening interval. */
.mobile-links { gap:14px; padding-top:clamp(32px,calc(22svh - var(--header-height)),128px); }
.mobile-links>a { margin-left:0; }
.menu-lines { position: relative; display: block; width: 22px; height: 16px; border: 0; }
.menu-lines::before,.menu-lines::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 1px;
  background: currentColor; top: 50%; transition: transform 240ms ease;
}
.menu-lines::before { transform: translateY(-4px); }
.menu-lines::after { transform: translateY(4px); }
.icon-open .close-menu .menu-lines::before { transform: rotate(45deg); }
.icon-open .close-menu .menu-lines::after { transform: rotate(-45deg); }
.mobile-dialog .close-menu {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border: 0; background: none; box-shadow: none;
}
.close-menu:focus { outline: none; }
.mobile-dialog:not(.pointer-open) .close-menu:focus-visible .menu-lines { outline: 1px dashed currentColor; outline-offset: 8px; }
@media (max-width:809px), (hover:none) {
}
@media (prefers-reduced-motion:reduce) {
  .menu-lines::before,.menu-lines::after { transition: none; }
}

.dialog-bottom .footer-home .face-mark { display: block; width: 44px; height: 44px; }
.dialog-bottom .footer-home { color: var(--canvas); }
.dialog-bottom .footer-home .face-mark { fill: var(--canvas); }
.dialog-bottom .studio-credit a { color: var(--canvas); }

/* Slide the surface, keeping the morphing toggle anchored above the existing page. */
.mobile-dialog { background: transparent; width: 100vw; height: 100dvh; overflow-x: hidden; }
.drawer-surface { min-height: 100%; width: 100%; flex-shrink: 0; display: flex; flex-direction: column; background: var(--ink); }
.mobile-dialog .close-menu { position: fixed; z-index: 3; }
.mobile-dialog .arrow { display: none; }

/* Stable initial content and identical geometry throughout the menu morph. */
.js:not(.form-unavailable) .contact-form[hidden] { display:block; }
.form-unavailable .contact-form { display:none; }
.js:not(.form-unavailable) .form-fallback,.js .no-js { display:none; }
.menu-open .menu-toggle .menu-lines { visibility:hidden; }
.mobile-dialog .close-menu { justify-content:flex-end; }
.mobile-dialog { overscroll-behavior:contain; }
.menu-toggle:focus:not(:focus-visible) { outline:none; }
@media(max-width:809px) { .js .menu-toggle[hidden] { display:flex; } }

/* Page entrances begin at first paint: no delayed script hides visible content. */
@keyframes gloria-reveal { from { opacity:.25; } to { opacity:1; } }
:root { --reveal-duration:360ms; }
:is(.visit>div,.menu-panel,.live-menu-section,.contact-intro,.contact-policy,.contact-form,.contact-details,.footer,.splash h1) {
  animation:gloria-reveal var(--reveal-duration) cubic-bezier(.2,.65,.3,1) both;
  animation-delay:var(--reveal-delay,0ms);
}
.contact-policy,.live-menu-section:nth-child(2),.visit>div:nth-child(2) { --reveal-delay:50ms; }
.contact-form,.live-menu-section:nth-child(3),.visit>div:nth-child(3) { --reveal-delay:100ms; }
.contact-details,.live-menu-section:nth-child(n+4),.footer { --reveal-delay:150ms; }
.hero .hero-poster { z-index:1; opacity:1; transition:opacity 360ms ease; pointer-events:none; }
.hero.film-ready .hero-poster { opacity:0; }
.hero:after { z-index:2; }
.hero .video-toggle,.hero .hero-title { z-index:3; }
@media(max-width:809px) { :root { --reveal-duration:280ms; } }
.motion-conserve { --reveal-duration:140ms; }
.motion-conserve :is(.visit>div,.menu-panel,.live-menu-section,.contact-intro,.contact-policy,.contact-form,.contact-details,.footer) { --reveal-delay:0ms; }
.motion-settled :is(.visit>div,.menu-panel,.live-menu-section,.contact-intro,.contact-policy,.contact-form,.contact-details,.footer,.splash h1) { animation:none; }
@media(prefers-reduced-motion:reduce) {
 :is(.visit>div,.menu-panel,.live-menu-section,.contact-intro,.contact-policy,.contact-form,.contact-details,.footer,.splash h1) { animation:none; }
 .hero .hero-poster { transition:none; }
}

/* Poster and video share one centered cover crop at every breakpoint. */
.hero .hero-poster, .hero video { object-position:50% 50%; }

/* Navigation uses the same footer component as the public pages. */
.drawer-surface>.footer { flex-shrink:0; margin-top:auto; background:var(--ink); color:var(--canvas); border-top:0; animation:none; }
.drawer-surface>.footer .studio-credit a { color:var(--canvas); }
.drawer-surface>.footer .face-mark { fill:var(--canvas); }
@media(max-width:809px) { .drawer-surface>.footer { padding-bottom:max(32px,env(safe-area-inset-bottom)); } }

/* Compact navigation: consistent geometry and access at every scroll position. */
:root { --header-height:80px; }
html { scroll-padding-top:calc(var(--header-height) + 16px); }
.site-header,.inner-page .site-header,.landing-page .site-header {
  position:sticky; top:0; height:var(--header-height); min-height:var(--header-height);
  padding:0 var(--gutter); color:var(--ink); background:var(--canvas);
  transition:background-color 200ms ease,color 200ms ease;
}
.landing-page .site-header { position:fixed; width:100%; }
.js .landing-page .site-header:not(.is-solid) { background:transparent; color:var(--canvas); }
.landing-page .site-header::before { display:none; }
.js .site-header .nav { display:none; }
.js .site-header .menu-toggle { display:flex; width:48px; height:48px; min-height:48px; padding:0; justify-content:flex-end; color:inherit; }
.site-header .brand,.face-prototype .site-header .brand,.inner-page .site-header .brand {
  position:relative; width:110px; height:42px; min-height:0;
}
.site-header .brand>img { visibility:hidden; }
.face-prototype .site-header .brand>.face-mark { display:none; }
.site-header .brand::after { content:''; position:absolute; inset:0; background:currentColor; mask:url('/assets/gloria-wordmark.svg') center/contain no-repeat; }
.dialog-top { height:var(--header-height); min-height:var(--header-height); padding:0 var(--gutter); }
.dialog-top img { width:110px; }
.mobile-dialog { overflow-y:auto; }
.drawer-surface>.footer [data-instagram] { display:none; }
@media(max-width:809px) {
  :root { --header-height:64px; }
  .site-header .brand,.face-prototype .site-header .brand,.inner-page .site-header .brand { width:94px; height:36px; }
  .dialog-top img { width:94px; }
}
@media(prefers-reduced-motion:reduce) { .site-header { transition:none; } }

/* Visible links when space permits; hamburger is reserved for phones. */
@media(min-width:768px) {
  :root { --header-height:80px; }
  .js .site-header .nav { display:flex; }
  .js .site-header .menu-toggle { display:none; }
  .site-header .brand,.face-prototype .site-header .brand,.inner-page .site-header .brand { width:110px; height:42px; }
}

/* Shared dish-photo geometry: text remains stationary and readable. */
.dish-photo { position:relative; isolation:isolate; --photo-x:62%; }
.dish-photo[data-dish-position="left"] { --photo-x:18%; }
.dish-photo[data-dish-position="scampi"] { --photo-x:4%; }
.dish-photo[data-dish-position="schnitzel"] { --photo-x:80%; }
.dish-photo[data-dish-position="fries"] { --photo-x:30%; }
.dish-photo:focus-visible { outline:1px solid var(--ink); outline-offset:6px; }
.dish-preview { position:absolute; z-index:0; width:180px; height:120px; margin:0; left:clamp(0px,var(--photo-x),calc(100% - 180px)); top:50%; transform:translateY(-50%); pointer-events:none; opacity:0; transition:opacity 180ms ease; }
.dish-preview.is-visible { opacity:1; }
.dish-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.dish-photo>h3,.dish-photo>p,.dish-photo>.live-menu-price { position:relative; z-index:1; }
.dish-photo>.dish-cream-copy { position:absolute!important;z-index:2!important;color:var(--canvas)!important;pointer-events:none;margin:0!important;text-shadow:none; }
@media(max-width:1199px),(hover:none) {
 .dish-photo .dish-preview { display:block; width:132px; height:88px; left:auto; right:24px; }
 .dish-photo[data-dish-position="left"] .dish-preview { left:22%; right:auto; }
 .dish-photo[data-dish-position="scampi"] .dish-preview { left:4%; right:auto; }
 .dish-photo[data-dish-position="schnitzel"] .dish-preview { left:40%; right:auto; }
 .dish-photo[data-dish-position="fries"] .dish-preview { left:12%; right:auto; }
}
@media(prefers-reduced-motion:reduce) { .dish-preview { transition:none; } }

/* A mobile tap completes its stroke before the destination replaces the page. */
@keyframes mobile-ink-complete {
 from { clip-path: inset(0 100% 0 0); }
 to { clip-path: inset(0); }
}
@media(max-width:767px) {
 .ink-link.ink-navigating::after {
  clip-path: inset(0); transition: none;
  animation: mobile-ink-complete 180ms cubic-bezier(.25,.65,.3,1) both;
 }
}
@media(prefers-reduced-motion:reduce) {
 .ink-link.ink-navigating::after { animation: none; transition: none; }
}

/* Phones synthesize hover before click. Only the click-owned stroke may draw;
   otherwise hover starts a stroke that the click animation visibly rewinds. */
@media(max-width:767px) {
 .ink-link:not(.ink-navigating):not(.ink-retracting)::after {
  clip-path:inset(0 100% 0 0) !important;
  transition:none !important;
 }
 .ink-link[aria-current=page]:not(.ink-navigating):not(.ink-retracting)::after {
  clip-path:inset(0) !important;
 }
}

/* Transfer the active stroke on tap; keep the old stroke hidden until navigation. */
@keyframes mobile-ink-retract {
 from { clip-path:inset(0); }
 to { clip-path:inset(0 100% 0 0); }
}
@media(max-width:767px) {
 .mobile-links .ink-link.ink-retracting::after {
  transition:none;
  animation:mobile-ink-retract 180ms cubic-bezier(.25,.65,.3,1) both;
 }
}
@media(prefers-reduced-motion:reduce) {
 .mobile-links .ink-link.ink-retracting::after { animation:none; clip-path:inset(0 100% 0 0); }
}

/* Smaller mobile film control, with a full 44px touch target. */
@media(max-width:767px) {
 .hero .video-toggle {
  width:44px; height:44px; min-width:44px; min-height:44px;
  border:0; background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
 }
 .hero .video-toggle:hover { background:transparent; }
 .hero .video-toggle::after {
  content:''; position:absolute; inset:6px; border-radius:50%;
  border:1px solid rgba(249,234,210,.4);
  background:rgba(30,20,10,.92);
  pointer-events:none;
 }
 .hero .video-toggle::before {
  position:relative; z-index:1; width:12px; height:14px;
  pointer-events:none;
 }
 .hero .video-toggle:hover::after { background:rgba(30,20,10,.96); }
}

/* Variable schedules use compact prose within the original hours block. */
.landing-page .visit .hours[data-hours-varied] span:last-child,.contact-hours .hours[data-hours-varied] span:last-child{white-space:normal}