@font-face{
  font-family: 'Brush Hour';
  src: url('../assets/fonts/Brush-Hour-Regular.otf') format('opentype');
  font-display: swap;
}
@font-face{
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/cafe/ibm-plex-mono-latin-300-normal.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/cafe/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Nothing You Could Do';
  src: url('../assets/fonts/cafe/nothing-you-could-do-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

.cafe-body #cafeNav .nav-logo,
.cafe-body #cafeNav .nav-links a{
  color: #1D4094;
}

.cafe-body #cafeNav .nav-toggle-bar{
  background: #1D4094;
}

:root{
  --cafe-paper: #F1ECCB;
  --cafe-ink:   #000;
  --cafe-text:  #1D4094;
  --cafe-rule:  #1D4094;
  --cafe-gold:  #1D4094;
  --cafe-photo: #d9d1c4;
  --cafe-paper-deep: #ece3cd;
  --font-brush:  'Brush Hour', cursive;
  --font-mono:   'Brush Hour', 'Courier New', monospace;
  --font-script: 'Brush Hour', 'Segoe Script', cursive;
}

*{ box-sizing: border-box; }

.cafe-body{
  margin: 0;
  background: var(--cafe-paper);
  color: var(--cafe-text);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


.cafe-body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: .05;
  mix-blend-mode: multiply;
  /* background-image:
    radial-gradient(circle at 20% 30%, #000 0, transparent 1px),
    radial-gradient(circle at 70% 60%, #000 0, transparent 1px),
    radial-gradient(circle at 40% 80%, #000 0, transparent 1px); */
  background-size: 3px 3px, 4px 4px, 5px 5px;
}

.cafe-opening{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cafe-paper-deep) center/cover no-repeat;
}
.cafe-opening.js-responsive-bg{
  transition: opacity .45s ease;
}

.cafe-page{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.cafe-page a{ color: inherit; text-decoration: none; }
.cafe-page a:focus-visible{ outline: 1px solid var(--cafe-ink); outline-offset: 4px; }


.cafe-footer{
  visibility: hidden;
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
}


.cafe-hero{
  position: relative;
  text-align: center;
}

.cafe-random-doodle{
  position: absolute;
  z-index: 0;
  width: clamp(54px, 7vw, 88px);
  height: auto;
  pointer-events: none;
  opacity: .88;
}
.cafe-hero > :not(.cafe-random-doodle){ position: relative; z-index: 1; }
.cafe-random-doodle--lamp{ top: 8%; right: 8%; width: clamp(58px, 8vw, 96px); }
.cafe-random-doodle--cup{ top: 38%; left: 7%; transform: rotate(-9deg); }
.cafe-random-doodle--note{ bottom: 5%; right: 10%; transform: rotate(8deg); }
.cafe-random-doodle--star{ top: 25%; left: 15%; width: clamp(36px, 4.5vw, 58px); }
.cafe-random-doodle--smile{ top: 57%; right: 14%; width: clamp(42px, 5.5vw, 68px); transform: rotate(8deg); }
.cafe-random-doodle--leaves{ bottom: 7%; left: 15%; transform: rotate(-12deg); }
.cafe-feature-gallery .cafe-random-doodle--plant{ top: 4%; left: 5%; transform: rotate(-7deg); }
.cafe-feature-gallery .cafe-random-doodle--guitar{ top: 37%; right: 5%; transform: rotate(9deg); }
.cafe-feature-gallery .cafe-random-doodle--drink{ bottom: 4%; left: 7%; transform: rotate(-8deg); }
.cafe-feature-gallery .cafe-random-doodle--stools{ top: 20%; right: 14%; width: clamp(48px, 6vw, 76px); }
.cafe-feature-gallery .cafe-random-doodle--chair{ top: 62%; left: 7%; width: clamp(44px, 5.5vw, 70px); transform: rotate(-8deg); }
.cafe-feature-gallery .cafe-random-doodle--people{ right: 15%; bottom: 7%; width: clamp(48px, 6vw, 76px); }

.cafe-eyebrow{
  margin: 0;
  font-family: var(--font-brush);
  color: var(--cafe-gold);
}

.cafe-headline span{ display: block; }
.cafe-headline{
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  font-family: var(--font-brush);
  font-weight: 400;
  color: #fff;
  line-height: .95;
}

.cafe-scribble{
  display: inline-block;
  margin: 0 auto;
  font-family: var(--font-script);
  color: var(--cafe-gold);
  transform: rotate(-3deg);
}
.cafe-scribble span{ display: inline; }
.cafe-scribble span:not(:last-child)::after{ content: ' '; }

.cafe-tagline{
  margin: 0 auto;
  max-width: 42em;
  font-family: var(--font-brush);
  font-style: italic;
  color: var(--cafe-text);
}

.cafe-note-line{
  margin: 0 auto;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--cafe-rule);
}

.cafe-empty{
  margin: 0 auto;
  font-family: var(--font-mono);
  text-align: center;
  color: var(--cafe-rule);
}

.cafe-gallery{
  position: relative;
  display: flex;
  flex-direction: column;
}

.cafe-feature-gallery{ text-align: center; }
.cafe-feature-gallery .cafe-gallery{ margin-top: 0; }

.cafe-row{
  display: flex;
  align-items: center;
  margin: 0;
}
.cafe-row--right{ flex-direction: row-reverse; }

.cafe-row--left .cafe-photo-caption,
.cafe-row--right .cafe-photo-caption{ text-align: left; }

.cafe-row--center{
  flex-direction: column;
  text-align: center;
}

.cafe-row .cafe-media{ flex: var(--photo-flex, 1.4) 1 0%; min-width: 0; }
.cafe-row .cafe-photo-caption{ flex: 1 1 0%; min-width: 0; }
.cafe-row--center .cafe-media{ flex: none; width: var(--photo-width, 46%); }
.cafe-row--center .cafe-photo-caption{ flex: none; text-align: center; }

.cafe-media{
  position: relative;
  display: block;
}

.cafe-media img{
  display: block;
  width: 100%;
  background: var(--cafe-photo);
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.cafe-photo-caption{ display: block; }

.cafe-photo-title{
  display: block;
  font-weight: bold;
  color: var(--cafe-ink);
}
#cafe-photo-title-first{
  visibility: hidden;
}
.cafe-photo-note{
  display: block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--cafe-rule);
}

.cafe-photo-doodle{
  position: absolute;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
  opacity: .85;
}
.cafe-photo-doodle svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.cafe-photo-doodle.is-tl{ transform: rotate(-8deg); }
.cafe-photo-doodle.is-br{ transform: rotate(8deg); }


.cafe-divider{
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.cafe-divider svg,
.cafe-divider img{ display: block; width: 100%; height: 100%; object-fit: contain; overflow: visible; }


.cafe-menu{
  position: relative;
}
.cafe-menu-doodle{
  position: absolute;
  line-height: 0;
  pointer-events: none;
}
.cafe-menu-doodle svg{ display: block; width: 100%; height: 100%; overflow: visible; }

.cafe-menu-title{
  margin: 0;
  text-align: center;
  font-family: var(--font-brush);
  font-weight: 400;
  color: var(--cafe-ink);
}
.cafe-menu-subtitle{
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--cafe-rule);
}

.cafe-menu-sections{
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.cafe-menu-section{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  text-align: left;
}
.cafe-menu-section--image-left .cafe-menu-section-doodle{ grid-column: 1; }
.cafe-menu-section--image-left .cafe-menu-section-copy{ grid-column: 2 / 4; }
.cafe-menu-section-doodle{
  grid-column: 3;
  grid-row: 1;
  display: block;
  width: 100%;
  aspect-ratio: 200 / 180;
  line-height: 0;
}
.cafe-menu-section-doodle svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.cafe-menu-section-copy{ grid-column: 1 / 3; grid-row: 1; min-width: 0; }
.cafe-menu-section-title{
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--cafe-ink);
}
.cafe-menu-section-title::after{ content: none; }
.cafe-menu-section-items{
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 300;
  color: var(--cafe-text);
}
.cafe-menu-section-items span:not(:last-child)::after{ content: ' \00b7 '; opacity: .55; }

.cafe-menu-empty{
  text-align: center;
  font-family: var(--font-mono);
  color: var(--cafe-rule);
}

.cafe-menu-footnote{
  text-align: center;
  font-family: var(--font-script);
  color: var(--cafe-ink);
}


.cafe-textile{
  position: relative;
  display: grid;
  place-items: stretch;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #0b0f0c;
  color: #fff;
  text-align: center;
}
.cafe-textile-video,
.cafe-textile-shade{
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cafe-textile-video{ object-fit: cover; }

.cafe-textile-shade{
  background:
    radial-gradient(ellipse at 50% 45%, rgb(0 0 0 / 10%) 0%, rgb(0 0 0 / 55%) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 45%) 0%, rgb(0 0 0 / 20%) 45%, rgb(0 0 0 / 70%) 100%);
}

.cafe-textile-copy{
  position: relative;
  display: grid;
  
  grid-template-rows: 1fr auto auto auto 1fr;
  align-items: center;
  justify-items: center;
  width: min(100% - 40px, 1120px);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 56px 0 34px;
  text-shadow: 0 2px 24px rgb(0 0 0 / 45%);
}


.cafe-textile-title{
  grid-row: 2;
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(72px, 15vw, 105px);
  line-height: .95;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  transform-origin: center;
}


.cafe-textile-copy h2{
  grid-row: 3;
  margin: clamp(28px, 5vh, 56px) auto 0;
  max-width: 840px;
  font-family: var(--font-brush);
  font-size: clamp(14px, 1.45vw, 20px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}


.cafe-textile-meta{
  grid-row: 4;
  margin: clamp(14px, 2.4vh, 26px) auto 0;
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.5;
  letter-spacing: .04em;
  color: rgb(255 255 255 / 92%);
}


.cafe-textile-description{
  align-self: end;
  grid-row: 5;
  max-width: 560px;
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: clamp(9px, .75vw, 13px);
  line-height: 1.55;
  letter-spacing: .02em;
  white-space: pre-line;
  color: rgb(255 255 255 / 88%);
}


.cafe-footer{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--cafe-text);
}


.cafe-workshops{
  --workshop-ink: #322c29;
  --workshop-muted: #746d67;
  --workshop-accent: #c96431;
  width: 100%;
  padding: clamp(56px, 8vw, 112px) clamp(22px, 5vw, 70px) 50px;
  background: var(--cafe-paper);
  color: var(--workshop-ink);
}
.cafe-workshops-intro{ max-width: 950px; margin: 0 auto 56px; }
.cafe-workshops-eyebrow{
  margin: 0 0 20px;
  color: var(--workshop-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
}
.cafe-workshops-intro h2{
  margin: 0;
  max-width: 850px;
  color: var(--workshop-ink);
  font-family: var(--font-brush);
  font-size: clamp(44px, 7vw, 70px);
  font-weight: 400;
  line-height: .98;
}
.cafe-workshops-lede{
  max-width: 850px;
  margin: 28px 0 30px;
  color: var(--workshop-muted);
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.7vw, 19px);
  line-height: 1.55;
}
.cafe-workshops-explore{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid #bdb6ad;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 14px;
  transition: background .2s ease, border-color .2s ease;
}
.cafe-workshops-explore:hover{ background: #fff; border-color: var(--workshop-ink); }
.cafe-workshops-explore span{ font-size: 20px; line-height: 1; }
.cafe-workshop-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 32px);
  max-width: 1000px;
  margin: 0 auto;
  scroll-margin-top: 30px;
}
.cafe-workshop-card{
  position: relative;
  min-width: 0;
  padding: 10px 10px 0;
  overflow: hidden;
  border: 0px solid rgb(36 82 159 / 24%);
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}
.cafe-workshop-card::before{
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 78px;
  height: 13px;
  background: rgb(230 218 198 / 55%);
  transform: translateX(-50%);
}
.cafe-workshop-image{
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  background: #e9e3d6;
  aspect-ratio: 1.35;
}
.cafe-workshop-image img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.cafe-workshop-placeholder{
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 18px;
  color: #746d67;
  font-family: var(--font-brush);
  font-size: clamp(21px, 2.4vw, 32px);
  text-align: center;
}
.cafe-workshop-placeholder span{ max-width: 12ch; }
.cafe-workshop-date{
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  background: #fbf8ec;
  color: #302b27;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
}
.cafe-workshop-card-copy{ display: flex; flex-direction: column; min-height: 180px; padding: 9px 0 0; }
.cafe-workshop-card h3{
  margin: 0;
  color: var(--workshop-ink);
  font-family: var(--font-brush);
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 400;
  line-height: 1.08;
  font-weight: bold;
}
.cafe-workshop-subtitle{ margin: 2px 0 0; color: var(--workshop-muted); font-family: var(--font-mono); font-size: 12px; }
.cafe-workshop-time{ margin: 5px 0 0; color: var(--workshop-accent); font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; }
.cafe-workshop-description{ margin: 6px 0 8px; color: var(--workshop-muted); font-family: var(--font-mono); font-size: 12px; line-height: 1.4; }
.cafe-workshop-card-footer{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: auto;
  padding: 8px 0 10px;
  border-top: 1px solid #eee9e2;
  font-family: var(--font-mono);
  font-size: 13px;
}
.cafe-workshop-card-footer a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--workshop-ink);
  border-radius: 999px;
  font-weight: 700;
  transition: color .2s ease, background .2s ease;
}
.cafe-workshop-card-footer a:hover{ color: #fff; background: var(--workshop-ink); }
.cafe-workshop-card-footer a span{ font-size: 19px; }
.cafe-workshop-badge{ padding: 3px 8px; background: #fff4e7; color: #b94e19; font-size: 12px; visibility: hidden; }
.cafe-workshop-benefits{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1120px;
  margin: 72px auto 0;
  padding-top: 36px;
  border-top: 1px solid #e1d7c8;
}
.cafe-workshop-benefit{ padding: 0 clamp(14px, 3vw, 42px); text-align: center; }
.cafe-workshop-benefit + .cafe-workshop-benefit{ border-left: 1px solid #cbb997; }
.cafe-workshop-benefit-icon{ display: block; width: 46px; height: 46px; margin: 0 auto 9px; color: #262421; }
.cafe-workshop-benefit-icon svg{ width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cafe-workshop-benefit h3{ margin: 0 0 8px; color: var(--workshop-ink); font-family: var(--font-mono); font-size: 14px; font-weight: 400; letter-spacing: .14em; font-weight: bold}
.cafe-workshop-benefit p{ max-width: 260px; margin: 0 auto; color: var(--workshop-muted); font-family: var(--font-brush); font-size: 12px; line-height: 1.35; }

.cafe-visit{
  --visit-ink: #292724;
  --visit-muted: #6d6862;
  --visit-rule: #b8a18a;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 28px clamp(22px, 5vw, 70px) 30px;
  background: var(--cafe-paper);
  color: var(--visit-ink);
}
.cafe-visit-rule{
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg width='1200' height='8' viewBox='0 0 1200 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4 C55 1 88 7 142 4 S229 1 284 4 370 7 426 4 514 1 568 4 656 7 710 4 798 1 852 4 940 7 994 4 1082 1 1200 4' fill='none' stroke='%23b8a18a' stroke-width='1'/%3E%3C/svg%3E") center/100% 8px no-repeat;
}
.cafe-visit-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr) minmax(280px, 1.1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 58px);
  max-width: 1300px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 62px) 0;
}
.cafe-visit-eyebrow{ margin: 0 0 18px; color: #1D4094; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; }
.cafe-visit-intro h2{ margin: 0; color: var(--visit-ink); font-family: var(--font-script); font-size: clamp(36px, 4.4vw, 40px); font-weight: 400; line-height: 1.08; }
.cafe-visit-description{ margin: 20px 0 22px; color: var(--visit-muted); font-family: var(--font-mono); font-size: 12px; line-height: 1.65; }
.cafe-visit-button{ display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 50px; padding: 0 22px; border: 1px solid var(--visit-ink); border-radius: 999px; font-family: var(--font-mono); font-size: 14px; transition: color .2s ease, background .2s ease; }
.cafe-visit-button:hover{ color: var(--cafe-paper); background: var(--visit-ink); }
.cafe-visit-button span{ font-size: 17px; }
.cafe-visit-details{ display: grid; gap: 24px; padding: 8px 0 8px clamp(22px, 3.4vw, 48px); border-left: 1px solid var(--visit-rule); }
.cafe-visit-detail{ display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 16px; }
.cafe-visit-icon{ width: 34px; height: 34px; color: var(--visit-ink); }
.cafe-visit-icon svg{ width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cafe-visit-detail p{ margin: 0; color: var(--visit-ink); font-size: 12px; line-height: 1.65; white-space: pre-line; }
.cafe-visit-detail strong{ display: block; margin-bottom: 2px; font-weight: 400; }
.cafe-visit-detail a{ text-decoration: underline; text-underline-offset: 3px; }
.cafe-visit-map-wrap{ position: relative; min-width: 0; aspect-ratio: 1.2; padding: 8px; background: #eee8dc; transform: rotate(-1.2deg); box-shadow: 0 8px 20px rgb(46 37 28 / 10%); }
.cafe-visit-map{ display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.75) sepia(.15); }

@media (max-width: 700px){
  .cafe-random-doodle{ width: 42px; opacity: .72; }
  .cafe-random-doodle--lamp{ top: 3%; right: 4%; width: 48px; }
  .cafe-random-doodle--cup{ top: 33%; left: 2%; }
  .cafe-random-doodle--note{ bottom: 2%; right: 3%; }
  .cafe-random-doodle--star{ top: 23%; left: 3%; width: 32px; }
  .cafe-random-doodle--smile{ top: 52%; right: 3%; width: 38px; }
  .cafe-random-doodle--leaves{ bottom: 5%; left: 4%; }
  .cafe-feature-gallery .cafe-random-doodle--plant{ top: 2%; left: 2%; }
  .cafe-feature-gallery .cafe-random-doodle--guitar{ top: 42%; right: 2%; }
  .cafe-feature-gallery .cafe-random-doodle--drink{ bottom: 2%; left: 3%; }
  .cafe-feature-gallery .cafe-random-doodle--stools{ top: 19%; right: 3%; width: 38px; }
  .cafe-feature-gallery .cafe-random-doodle--chair{ top: 63%; left: 2%; width: 36px; }
  .cafe-feature-gallery .cafe-random-doodle--people{ right: 4%; bottom: 5%; width: 40px; }
  .cafe-workshops{ padding: 54px 20px 40px; }
  .cafe-workshops-intro{ margin-bottom: 34px; }
  .cafe-workshops-eyebrow{ margin-bottom: 14px; font-size: 11px; }
  .cafe-workshops-intro h2{ font-size: clamp(40px, 11vw, 58px); }
  .cafe-workshops-lede{ margin: 20px 0 24px; font-size: 14px; }
  .cafe-workshop-grid{ grid-template-columns: 1fr; max-width: 380px; gap: 22px; }
  .cafe-workshop-card{ padding: 10px 10px 0; }
  .cafe-workshop-image{ aspect-ratio: 1.35; }
  .cafe-workshop-card-copy{ min-height: 0; padding-top: 9px; }
  .cafe-workshop-card h3{ font-size: 23px; }
  .cafe-workshop-description{ font-size: 12px; }
  .cafe-workshop-card-footer{ margin-top: 4px; }
  .cafe-workshop-benefits{ grid-template-columns: 1fr; gap: 26px; margin-top: 48px; padding-top: 28px; }
  .cafe-workshop-benefit{ padding: 0 12px 24px; }
  .cafe-workshop-benefit + .cafe-workshop-benefit{ border-left: 0; border-top: 1px solid #cbb997; padding-top: 24px; }
  .cafe-visit{ padding: 20px 20px 24px; }
  .cafe-visit-grid{ grid-template-columns: 1fr; gap: 32px; padding: 34px 0; }
  .cafe-visit-intro h2{ font-size: clamp(36px, 10vw, 48px); }
  .cafe-visit-details{ gap: 18px; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--visit-rule); }
  .cafe-visit-map-wrap{ width: min(100%, 460px); margin: 0 auto; aspect-ratio: 1.25; }
}

@media (min-width: 601px){

  .cafe-opening{ height: 100vh; height: 100dvh; }

  .cafe-hero{ padding: 9.5rem 3rem 1rem; }
  .cafe-feature-gallery{ padding: 5rem 3rem 6rem; }

  .cafe-eyebrow{ font-size: 1rem; margin-bottom: .5rem; }


  .cafe-headline{ font-size: clamp(4rem, 7vw, 6.5rem); letter-spacing: -0.01em; }
  .cafe-headline span:first-child{ margin-bottom: .1em; }

  .cafe-scribble{ margin-top: .8rem; font-size: 1.3rem; }

  .cafe-tagline{ margin-top: 1.6rem; font-size: 1.05rem; line-height: 1.5; }
  .cafe-note-line{ margin-top: .9rem; font-size: .78rem; letter-spacing: .1em; }

  .cafe-empty{ margin-top: 3rem; font-size: .9rem; }

  .cafe-gallery{
    gap: clamp(3.2rem, 6vw, 5rem);
    max-width: 760px;
    margin: 4.4rem auto 1rem;
    padding: 0 2rem;
  }
  .cafe-row{ gap: clamp(1.6rem, 4vw, 3rem); }
  .cafe-row--center{ gap: 1rem; }

  .cafe-photo-caption{ margin-top: 0; }
  .cafe-row--center .cafe-photo-caption{ margin-top: 0; }
  .cafe-photo-title{ font-size: 1.02rem; }
  .cafe-photo-note{ font-size: .58rem; letter-spacing: .1em; margin-top: .3rem; }

  .cafe-photo-doodle{ width: 58px; aspect-ratio: 1/1; }
  .cafe-photo-doodle.is-tl{ top: -14%; left: -13%; }
  .cafe-photo-doodle.is-br{ bottom: -14%; right: -13%; }

  .cafe-divider{
    width: 170px; aspect-ratio: 800/60;
    margin: 22px auto;
  }

  .cafe-menu{
    padding: 32px 40px 68px;
  }
  .cafe-menu-title{
    font-size: 60px;
    line-height: .9;
    letter-spacing: -0.01em;
  }
  .cafe-menu-subtitle{
    margin-top: 12px;
    font-size: 11px;
    letter-spacing: 0.28em;
  }
  .cafe-menu-sections{
    max-width: 680px;
    padding-top: 54px;
    gap: 0;
  }
  .cafe-menu-section{
    min-height: 178px;
    padding: 20px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--cafe-rule) 38%, transparent);
    column-gap: 28px;
  }
  .cafe-menu-section-doodle{ max-width: 190px; justify-self: center; }
  .cafe-menu-section-copy{ grid-row: 1; }
  .cafe-menu-section-title{ text-align: left; text-transform: none; }
  .cafe-menu-section-title::after{ content: none; }
  .cafe-menu-section-items{ text-align: left; }
  .cafe-menu-section-title{
    margin-bottom: 8px;
    font-size: 21px;
    letter-spacing: 0;
  }
  .cafe-menu-section-items{
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 1.9;
  }
  .cafe-menu-empty{ padding-top: 40px; font-size: 12px; }
  .cafe-menu-footnote{
    margin-top: 36px;
    font-size: 18px;
  }

  .cafe-footer{
    
    padding: 14px 34px 30px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
  }
}

@media (min-width: 1024px){
  .cafe-photo-title{ font-size: 2rem; }
  
}

@media (max-width: 600px){

  .cafe-opening{ height: 100vh; height: 100dvh; }

  .cafe-hero{ padding: 96px 20px 8px; }
  .cafe-feature-gallery{ padding: 48px 20px 64px; }

  .cafe-eyebrow{ font-size: 13px; }

  
  .cafe-headline{ font-size: clamp(3rem, 12vw, 4.5rem); letter-spacing: -0.02em; }
  .cafe-headline span:first-child{ margin-bottom: 2px; }

  .cafe-scribble{ margin-top: 10px; font-size: 18px; }

  .cafe-tagline{ margin-top: 18px; font-size: 15px; line-height: 1.5; padding: 0 6px; }
  .cafe-note-line{ margin-top: 10px; font-size: 11px; letter-spacing: 0.08em; }

  .cafe-empty{ margin-top: 32px; font-size: 12.5px; }

  .cafe-gallery{
    gap: 40px;
    max-width: 420px;
    margin: 40px auto 8px;
    padding: 0 24px;
  }
  .cafe-row,
  .cafe-row--left,
  .cafe-row--right,
  .cafe-row--center{
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  .cafe-row .cafe-media,
  .cafe-row--center .cafe-media{ flex: none; width: 58%; max-width: 220px; margin: 0 auto; }
  .cafe-row .cafe-photo-caption,
  .cafe-row--left .cafe-photo-caption,
  .cafe-row--right .cafe-photo-caption{ flex: none; text-align: center; }

  .cafe-photo-title{ font-size: 14px; }
  .cafe-photo-note{ font-size: 9px; letter-spacing: 0.08em; margin-top: 3px; }

  .cafe-photo-doodle{ width: 36px; aspect-ratio: 1/1; }
  .cafe-photo-doodle.is-tl{ top: -10%; left: -8%; }
  .cafe-photo-doodle.is-br{ bottom: -10%; right: -8%; }

  .cafe-divider{ width: 170px; aspect-ratio: 800/60; margin: 26px auto; }

  .cafe-menu{ padding: 32px 20px 64px; }
  .cafe-menu-title{
    font-size: 42px;
    line-height: .92;
  }
  .cafe-menu-subtitle{
    margin-top: 12px;
    font-size: 11px; letter-spacing: 0.22em;
  }
  .cafe-menu-sections{
    max-width: 420px;
    padding-top: 56px;
    gap: 0;
  }
  .cafe-menu-section,
  .cafe-menu-section--image-left,
  .cafe-menu-section:nth-child(odd),
  .cafe-menu-section--image-left:nth-child(even){
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 22px 4px 26px;
    text-align: center;
  }
  .cafe-menu-section-doodle{ width: 48%; max-width: 170px; order: 0; }
  .cafe-menu-section-copy{ order: 1; width: 100%; }
  .cafe-menu-section-title,
  .cafe-menu-section-items{ text-align: center; }
  .cafe-menu-section-title{ text-transform: none; }
  .cafe-menu-section-title::after{ content: none; }
  .cafe-menu-section-title{
    margin-bottom: 8px;
    font-size: 18px; letter-spacing: 0;
  }
  .cafe-menu-section-items{
    font-size: 11px; letter-spacing: 0.03em; line-height: 1.8;
  }
  .cafe-menu-empty{ padding-top: 40px; font-size: 12px; }
  .cafe-menu-footnote{ margin-top: 36px; font-size: 17px; }

  .cafe-footer{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 24px 20px 40px;
    font-size: 11px; letter-spacing: 0.12em;
  }

  .cafe-textile-copy{ padding: 72px 0 28px; }
  .cafe-textile-title{ font-size: clamp(64px, 24vw, 120px); }
  .cafe-textile-copy h2{ font-size: 13px; margin-top: 26px; }
  .cafe-textile-meta{ font-size: 11px; }
  .cafe-textile-description{ font-size: 9.5px; max-width: 300px; }
}
.is-sound-toggle{ cursor: pointer; }

@media (min-width: 1025px) and (orientation: landscape){
  .cafe-feature-gallery{
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    padding: 2rem 3rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cafe-feature-gallery .cafe-gallery{
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 3rem;
      row-gap: 3rem;  
      align-items: center;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      padding: 0;
    }

  .cafe-feature-gallery .cafe-row:nth-child(1){
    grid-column: 1;
    flex-direction: row;
  }
  .cafe-feature-gallery .cafe-row:nth-child(2){
    grid-column: 2;
    flex-direction: row;
  }
  .cafe-feature-gallery .cafe-row:nth-child(2).cafe-photo-caption{
    text-align: left;
  }
  .cafe-feature-gallery .cafe-row:nth-child(3){
    grid-column: 1 / -1;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: .4rem;
  }

  .cafe-feature-gallery .cafe-row{ gap: 1.5rem; }

  .cafe-feature-gallery .cafe-row .cafe-media{
    flex: none;
    width: auto;
    display: flex;
    justify-content: center;
  }

  .cafe-feature-gallery .cafe-media img{
      --img-scale: .75;
      width: auto;
      height: calc((100dvh - 4rem - 1.2rem - 3rem) / 2 * var(--img-scale));
      aspect-ratio: 4 / 5;
    }

  .cafe-feature-gallery .cafe-photo-caption{ flex: 1 1 0; }
  .cafe-feature-gallery .cafe-row:nth-child(3) .cafe-photo-caption{
    flex: none;
    text-align: center;
  }

  .cafe-feature-gallery .cafe-photo-title{ font-size: 1.2rem; }
  .cafe-feature-gallery .cafe-random-doodle--stools{
    top: 3%;
    right: 4%;
    width: clamp(48px, 5vw, 70px);
  }
  .cafe-feature-gallery .cafe-random-doodle--guitar{
    top: 48%;
    right: 3%;
  }
}