/* Atspalvis – a small nail studio. Direction "the contact sheet" (design-taste-frontend seed 1446849396): a white
   studio ground so the polish is the only colour; Archivo at regular weight; cherry fills the buttons and the visit
   field. Tokens only (theme.css + design.json); motion: transform / opacity, everything visible without it. */
.theme-nagai {
  --n-bg: var(--chalk);
  --n-bg2: var(--paper);
  --n-tx: var(--text);
  --n-soft: var(--ink-2);
  --n-acc: var(--gold);
  --n-m: clamp(12px, 1.6vw, 24px);
  --n-small: .875rem;
  --n-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --n-lead: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --n-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  background: var(--n-bg); color: var(--n-tx);
}
.theme-nagai main { font-family: "Archivo", system-ui, sans-serif; font-size: var(--n-body); line-height: 1.5; }
.na img { display: block; }
.na-h2 { margin: 0 0 32px; font: 400 var(--n-head)/1 "Archivo", system-ui, sans-serif; letter-spacing: -.02em; }
.na-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 0; background: var(--n-acc); color: var(--on-accent); font: 600 16px/1 "Archivo", system-ui, sans-serif; text-decoration: none; transition: transform .25s var(--n-ease), background-color .25s; }
.na-btn:hover { background: var(--gold-deep); }
.na-btn:active { transform: scale(.98); }
.na-btn:focus-visible, .na a:focus-visible, .na button:focus-visible { outline: 3px solid var(--n-tx); outline-offset: 3px; }

/* ── hero: a sheet of photographs, one cell of it carries the words ── */
.na-cover { --fs: min(calc((100vw - 2 * var(--n-m)) / (var(--len, 9) * .43)), 30rem); position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: var(--n-bg); background: var(--n-tx); }
.na-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 55%; }
.na-cover::before { content: ""; position: absolute; inset: 0 0 auto; height: 160px; z-index: 1; background: linear-gradient(to bottom, rgb(23 23 26 / .45), rgb(23 23 26 / 0)); } /* taste-skill-ignore: neutral scrim over the cover photo */
.na-cover::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(to top, rgb(23 23 26 / .78) 0%, rgb(23 23 26 / .45) 45%, rgb(23 23 26 / 0) 100%); } /* taste-skill-ignore: neutral scrim over the cover photo */
.na-cover__name { position: absolute; left: var(--n-m); right: var(--n-m); bottom: calc(var(--fs) * .2); z-index: 2; margin: 0; font: 400 var(--fs)/.82 "Archivo", system-ui, sans-serif; letter-spacing: -.055em; white-space: nowrap; }
.na-cover__copy { position: absolute; right: var(--n-m); bottom: calc(var(--fs) * 1.02 + 28px); z-index: 2; display: grid; gap: 16px; justify-items: start; max-width: 32ch; }
.na-cover__lead { margin: 0; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.25; letter-spacing: -.01em; }
/* phones and tablets: the name first, then the line and the action under it (bottom of the screen) */
@media (max-width: 899px) {
  .na-cover { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--n-m) calc(28px + env(safe-area-inset-bottom)); }
  .na-cover__name { position: relative; left: auto; right: auto; bottom: auto; margin: 0 0 20px; }
  .na-cover__copy { position: relative; right: auto; bottom: auto; max-width: 34ch; }
}
@media (prefers-reduced-motion: no-preference) {
  .na-cover__img { animation: na-settle 2.4s var(--n-ease) both; }
  .na-cover__name { animation: na-fade 1.1s .15s var(--n-ease) both; }
  .na-cover__copy { animation: na-fade 1s .4s var(--n-ease) both; }
}
.na-hero { position: relative; height: 100svh; min-height: 680px; overflow: hidden; padding-top: 12px; }
.na-sheet { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 0 12px; height: 100%; }
.na-col { display: flex; flex-direction: column; gap: 12px; margin-top: var(--off, 0); }
.na-col--2 { --off: -90px; } .na-col--3 { --off: -40px; } .na-col--4 { --off: -130px; } .na-col--5 { --off: -20px; } .na-col--6 { --off: -70px; }
.na-f { margin: 0; display: flex; flex-direction: column; }
.na-f { overflow: hidden; }
.na-f img { width: 100%; object-fit: cover; aspect-ratio: 4 / 5; background: var(--n-bg2); transition: transform .8s var(--n-ease); }
.na-f:hover img { transform: scale(1.05); }
.na-f--s img { aspect-ratio: 1; }
.na-f--l img { aspect-ratio: 3 / 2; }
.na-strip { height: 28px; padding: 0 10px; font: 400 var(--n-small)/28px "Archivo", system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.na-strip--1 { background: var(--n-s1); color: var(--n-s1-on); }
.na-strip--2 { background: var(--n-s2); color: var(--n-s2-on); }
.na-strip--3 { background: var(--n-s5); color: var(--n-s5-on); }
.na-strip--4 { background: var(--n-s4); color: var(--n-s4-on); }
.na-cell { position: absolute; z-index: 2; top: 28%; left: calc(12px + 2 * ((100% - 84px) / 6 + 12px)); width: calc(2 * (100% - 84px) / 6 + 12px); height: 410px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px; background: var(--n-tx); color: var(--n-bg); outline: 12px solid var(--n-bg); }
.na-cell__name { margin: 0; font: 400 clamp(2.5rem, 1.6rem + 2vw, 3.5rem)/1 "Archivo", system-ui, sans-serif; letter-spacing: -.02em; }
.na-cell__lead { margin: 0; max-width: 26ch; font-size: var(--n-lead); line-height: 1.3; }
.na-cell__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: auto 0 0; font-size: var(--n-small); }
.na-cell__links a { color: var(--n-bg); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(246 246 244 / .45); padding: 6px 0; }
.na-cell__links a:hover { text-decoration-color: currentColor; }
@keyframes na-rise { from { opacity: 0; transform: translateY(48px); } }
@keyframes na-fade { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 999px) {
  .na-hero { height: auto; min-height: 0; max-height: none; padding: 64px 0 0; }
  .na-cell { position: relative; top: auto; left: auto; width: auto; height: auto; min-height: 38svh; margin: 0 12px 12px; outline: 0; padding: 24px; }
  .na-cell__name { font-size: clamp(2.2rem, 7vw, 3rem); }
  .na-cell__lead { font-size: 17px; }
  .na-cell .na-btn { align-self: stretch; }
  .na-sheet { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 12px; height: 62svh; overflow: hidden; }
  .na-col { gap: 8px; }
  .na-col--4, .na-col--5, .na-col--6 { display: none; }
  .na-col--2 { --off: -60px; } .na-col--3 { --off: -24px; }
}
@media (max-width: 599px) {
  .na-sheet { grid-template-columns: 1fr 1fr; height: 56svh; }
  .na-col--3 { display: none; }
}

/* ── the wall: one photograph cut across a board of tiles ── */
.na-wall { padding: clamp(64px, 9vw, 140px) 12px; }
.na-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.na-tile { position: relative; aspect-ratio: 1; margin: 0; overflow: hidden; }
.na-tile--pic i { position: absolute; inset: 0; background: url(/designs/nagai/img/n-wall-board.webp) no-repeat; background-size: 600% 400%;
  background-position: calc(var(--c) * 20%) calc(var(--r) * 33.333%); transition: transform .6s var(--n-ease); }
.na-tile--pic:hover i { transform: scale(1.08); }
.na-tile--text { display: block; padding: 16px; font-size: 18px; line-height: 1.3; }
.na-tile--head { background: var(--n-tx); color: var(--n-bg); }
.na-tile--head h2 { margin: 0; font: 400 2.6vw/1.05 "Archivo", system-ui, sans-serif; letter-spacing: -.02em; }
.na-tile--s1 { background: var(--n-s1); color: var(--n-s1-on); }
.na-tile--s2 { background: var(--n-s2); color: var(--n-s2-on); }
.na-tile--s4 { background: var(--n-s4); }
.na-tile--s5 { background: var(--n-s5); color: var(--n-s5-on); }
.na-tile--go { display: flex; align-items: flex-end; background: var(--n-acc); color: var(--on-accent); font-weight: 600; text-decoration: none; transition: background-color .25s; }
.na-tile--go:hover { background: var(--gold-deep); }
@media (max-width: 699px) {
  .na-board { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .na-tile--pic i { background-image: url(/designs/nagai/img/n-wall-tall.webp); background-size: 300% 800%; background-position: calc(var(--pc) * 50%) calc(var(--pr) * 14.2857%); }
  .na-tile--text { padding: 10px; font-size: 15px; }
  .na-tile--head h2 { font-size: 6vw; }
}

/* ── try a shade on ── */
.na-pick { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding: clamp(64px, 9vw, 140px) var(--n-m); background: var(--n-tx); color: var(--n-bg); scroll-margin-top: var(--hd-h); }
.na-pick .na-pick__hint, .na-pick .na-pick__note, .na-pick .na-tip { color: var(--chalk-2); }
.na-pick .na-tip[aria-pressed="true"] { color: var(--n-bg); }
.na-pick .na-tip--4 .na-tip__nail { outline: 1px solid color-mix(in srgb, var(--n-bg) 40%, transparent); outline-offset: -1px; }
.na-pick__svc b { font-weight: 600; }
.na-pick__hint { margin: -16px 0 28px; color: var(--n-soft); }
.na-swatches { display: flex; flex-wrap: wrap; gap: 6px 4px; margin: 0 0 28px; }
.na-tip { display: grid; justify-items: center; gap: 10px; min-width: 72px; padding: 10px 4px; border: 0; background: none; color: var(--n-soft); font: 400 15px/1.2 "Archivo", system-ui, sans-serif; cursor: pointer; }
.na-tip__nail { position: relative; width: 42px; height: 66px; border-radius: 21px 21px 7px 7px; background: var(--s); transition: transform .35s var(--n-ease); }
.na-tip__nail::after { content: ""; position: absolute; left: 7px; top: 8px; width: 5px; height: 22px; border-radius: 3px; background: var(--n-bg); opacity: .4; }
.na-tip--1 { --s: var(--n-s1); } .na-tip--2 { --s: var(--n-s2); } .na-tip--3 { --s: var(--n-s3); } .na-tip--4 { --s: var(--n-s4); } .na-tip--5 { --s: var(--n-s5); } .na-tip--6 { --s: var(--n-s6); }
.na-tip--2 .na-tip__nail { outline: 1px solid var(--muted); outline-offset: -1px; }
.na-tip:hover .na-tip__nail { transform: translateY(-4px); }
.na-tip[aria-pressed="true"] { color: var(--n-tx); font-weight: 600; }
.na-tip[aria-pressed="true"] .na-tip__nail { transform: translateY(-8px) scale(1.08); }
.na-tip:active .na-tip__nail { transform: scale(.94); }
.na-pick__about h3 { margin: 0 0 8px; font: 400 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/1.1 "Archivo", system-ui, sans-serif; }
.na-pick__about p { margin: 0 0 20px; max-width: 40ch; }
.na-pick__svc { margin: 0 0 24px; font-size: 18px; }
.na-pick__note { margin: 16px 0 0; font-size: var(--n-small); }
.na-pick__stage { position: relative; display: grid; }
.na-pick__photo { grid-area: 1 / 1; margin: 0; }
.na-pick__photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.na-pick__photo figcaption { position: absolute; left: 0; bottom: 0; height: 32px; padding: 0 12px; font: 400 var(--n-small)/32px "Archivo", system-ui, sans-serif; background: var(--n-tx); color: var(--n-bg); }
.na-js .na-pick__photo:not(.is-on) { visibility: hidden; }
@media (max-width: 899px) { .na-pick__photo figcaption { display: none; } }
.na-js .na-pick__about:not(.is-on) { display: none; }
html:not(.na-js) .na-swatches { display: none; }
html:not(.na-js) .na-pick__photo:not(:first-child) { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .na-pick__photo.is-on.is-new { animation: na-shutter 1.1s var(--n-ease) both; }
  .na-pick__photo.is-on.is-new img { animation: na-settle 1.1s var(--n-ease) both; }
}
@keyframes na-shutter { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes na-settle { from { transform: scale(1.12); } }
.na-pick__photo { overflow: hidden; }
@media (max-width: 899px) {
  .na-pick { grid-template-columns: 1fr; }
  .na-pick__stage { order: -1; }
  .na-pick__photo img { aspect-ratio: 4 / 3; }
}
@media (max-width: 599px) {
  .na-pick__photo img { aspect-ratio: 1; }
  .na-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 0; }
  .na-tip { min-width: 0; padding: 8px 0; }
}

/* ── the price list: one calm column on the studio white, the tools photograph beside it (above it on phones) ── */
.na-menu { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 120px); align-items: start; padding: clamp(64px, 9vw, 140px) var(--n-m) clamp(64px, 9vw, 140px) 14%; background: var(--n-bg); scroll-margin-top: var(--hd-h); }
.na-menu__ph { grid-column: 2; grid-row: 1; margin: 0; position: sticky; top: calc(var(--hd-h, 72px) + 24px); overflow: hidden; }
.na-menu__ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.na-menu__list { grid-column: 1; grid-row: 1; max-width: 640px; }
.na-menu .na-h2 { font-weight: 400; }
.na-menu__group + .na-menu__group { margin-top: 48px; }
.na-menu__group h3 { margin: 0 0 8px; color: var(--n-acc); font: 600 16px/1.4 "Archivo", system-ui, sans-serif; }
.na-menu ul { list-style: none; margin: 0; padding: 0; }
.na-menu li + li { background: linear-gradient(var(--n-bg2), var(--n-bg2)) top / 100% 1px no-repeat; } /* taste-skill-ignore: a ruled price list */
.na-menu li a { display: grid; grid-template-columns: 18px 1fr auto; gap: 0 14px; align-items: start; padding: 16px 0; color: var(--n-tx); text-decoration: none; transition: transform .25s var(--n-ease); }
.na-menu li a:hover { transform: translateX(4px); }
.na-menu li a:hover .na-menu__name { text-decoration: underline; text-underline-offset: 4px; }
.na-dot { width: 16px; height: 16px; margin-top: 5px; border-radius: 50%; background: var(--d); }
.na-dot--2 { outline: 1px solid var(--muted); outline-offset: -1px; }
.na-dot--1 { --d: var(--n-s1); } .na-dot--2 { --d: var(--n-s2); } .na-dot--3 { --d: var(--n-s3); } .na-dot--4 { --d: var(--n-s4); } .na-dot--5 { --d: var(--n-s5); } .na-dot--6 { --d: var(--n-s6); }
.na-menu__name { font-size: 18px; line-height: 1.35; }
.na-menu__name small { display: block; margin-top: 4px; color: var(--n-soft); font-size: 15px; line-height: 1.45; }
.na-menu__price { font-size: 18px; font-variant-numeric: tabular-nums; }
@media (max-width: 999px) {
  .na-menu { grid-template-columns: 1fr; gap: 0; padding: 0 0 72px; }
  .na-menu__ph { grid-column: 1; grid-row: 1; position: relative; top: auto; }
  .na-menu__ph img { aspect-ratio: 16 / 10; }
  .na-menu__list { grid-column: 1; grid-row: 2; padding: 48px 20px 0; max-width: none; }
}

/* ── how it goes: a row to drag through ── */
.na-how { padding: clamp(64px, 9vw, 140px) 0; overflow: hidden; background: var(--n-bg2); }
.na-how__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 0 var(--n-m); }
.na-how__top .na-h2 { margin: 0; }
.na-how__btns { display: flex; gap: 8px; margin: 0; }
.na-sq { width: 48px; height: 48px; border: 0; border-radius: 0; background: var(--n-tx); color: var(--n-bg); font-size: 20px; cursor: pointer; transition: transform .2s var(--n-ease), background-color .2s; }
.na-sq:hover { background: var(--n-acc); }
.na-sq:active { transform: scale(.94); }
.na-how__bar { height: 6px; margin: 24px var(--n-m) 32px; background: var(--n-bg); overflow: hidden; }
.na-how__bar i { display: block; height: 100%; background: var(--n-tx); transform-origin: left; transform: scaleX(var(--p, .25)); transition: transform .2s linear; }
.na-how__row { display: flex; gap: 32px; margin: 0; padding: 0 var(--n-m) 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--n-m); scrollbar-width: none; }
.na-how__row::-webkit-scrollbar { display: none; }
.na-how__step { flex: 0 0 280px; scroll-snap-align: start; display: flex; flex-direction: column; }
.na-how__step h3 { margin: 0 0 8px; font: 600 18px/1.3 "Archivo", system-ui, sans-serif; }
.na-how__step p { margin: 0; color: var(--n-soft); font-size: 16px; }
.na-how__step figure { margin: var(--gap, 80px) 0 0; }
.na-how__step img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 699px) {
  .na-how__btns { display: none; }
  .na-how__row { gap: 16px; }
  .na-how__step { flex-basis: 72vw; }
  .na-how__step figure { margin-top: calc(var(--gap, 64px) / 2 + 16px); }
}

/* ── about: the studio photograph, one strong paragraph, three facts set large, two clear lists ── */
.na-about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; padding: clamp(64px, 9vw, 140px) var(--n-m); background: var(--n-bg); }
.na-about__pic { margin: 0; position: sticky; top: calc(var(--hd-h, 72px) + 24px); overflow: hidden; }
.na-about__pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--n-ease); }
.na-about__pic:hover img { transform: scale(1.03); }
.na-about__para { margin: 0 0 clamp(40px, 5vw, 64px); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.4; letter-spacing: -.005em; max-width: 46ch; }
.na-about__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 clamp(48px, 6vw, 88px); padding: 0; list-style: none; }
.na-about__facts li { display: grid; gap: 6px; align-content: start; padding: 18px 18px 20px; background: var(--n-tx); color: var(--n-bg); font-size: 16px; }
.na-about__facts li:nth-child(2) { background: var(--n-acc); color: var(--on-accent); }
.na-about__facts li:nth-child(3) { background: var(--n-s5); color: var(--n-s5-on); }
.na-about__facts b { font-weight: 400; font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); line-height: 1.15; letter-spacing: -.015em; }
.na-about__word { margin: 0 0 12px; font: 600 18px/1.3 "Archivo", system-ui, sans-serif; color: var(--n-tx); }
.na-about__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); align-items: start; }
.na-rec { list-style: none; margin: 0; padding: 0; font-size: 17px; display: grid; }
.na-rec li > a, .na-rec li { display: flex; justify-content: space-between; gap: 16px; }
.na-rec li { padding: 10px 0; }
.na-rec li > a { flex: 1; color: var(--n-tx); text-decoration: none; transition: color .2s; }
.na-rec li > a:hover { color: var(--n-acc); }
.na-rec li > a:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.na-rec__v { color: var(--n-soft); text-align: right; }
.na-rec .next-place { display: none; }
@media (max-width: 899px) {
  .na-about { grid-template-columns: 1fr; }
  .na-about__pic { position: relative; top: auto; }
  .na-about__pic img { aspect-ratio: 4 / 3; }
  .na-about__facts li { padding: 14px 12px; font-size: 14px; }
  .na-about__facts b { font-size: 19px; }
  .na-about__lists { grid-template-columns: 1fr; }
}

/* ── questions: heading and the street photograph at the side, answers in the full ink on the paper ground ── */
.na-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); align-items: start; padding: clamp(64px, 9vw, 140px) var(--n-m); background: var(--n-bg2); }
.na-faq__side { position: sticky; top: calc(var(--hd-h, 72px) + 24px); }
.na-faq .na-h2 { margin-bottom: clamp(24px, 3vw, 40px); }
.na-faq__ph { margin: 0; overflow: hidden; }
.na-faq__ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--n-ease); }
.na-faq__ph:hover img { transform: scale(1.03); }
.na-faq__text p { margin: 0; padding: 24px 0; font-size: 18px; line-height: 1.55; }
.na-faq__text p + p { background: linear-gradient(var(--n-bg), var(--n-bg)) top / 100% 2px no-repeat; } /* taste-skill-ignore: a light rule between answers */
.na-faq__text p:first-child { padding-top: 0; }
.na-faq__text b { display: block; margin-bottom: 6px; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
@media (max-width: 899px) {
  .na-faq { grid-template-columns: 1fr; gap: 32px; padding: 72px 20px; }
  .na-faq__side { position: relative; top: auto; }
  .na-faq__ph { margin: 0 -20px; }
  .na-faq__ph img { aspect-ratio: 16 / 10; }
  .na-faq__text p { font-size: 17px; }
}

/* ── visit: a cherry field; two places as open text, one white action ── */
.na-visit { min-height: 80svh; padding: 48px 0 64px; background: var(--n-acc); color: var(--on-accent); overflow: hidden; scroll-margin-top: var(--hd-h); }
.na-visit__strip { overflow: hidden; }
.na-visit__run { display: flex; gap: 8px; width: max-content; }
.na-visit__ph { height: 180px; width: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.na-visit__ph--1 { aspect-ratio: 1; } .na-visit__ph--2 { aspect-ratio: 3 / 2; }
@media (prefers-reduced-motion: no-preference) { .na-visit__run { animation: na-drift 70s linear infinite; } }
@keyframes na-drift { to { transform: translateX(-50%); } }
.na-visit__title { margin: 72px var(--n-m) 48px; font: 400 clamp(44px, 6vw, 96px)/.95 "Archivo", system-ui, sans-serif; letter-spacing: -.035em; }
.na-visit__bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 48px); margin: 0 var(--n-m); align-items: stretch; }
.na-visit__cell { display: grid; align-content: start; gap: 10px; color: var(--on-accent); }
.na-visit__cell h3 { margin: 0; font: 400 15px/1.2 "Archivo", system-ui, sans-serif; }
.na-visit__addr { color: var(--on-accent); font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); line-height: 1.15; letter-spacing: -.01em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.na-visit__hours { display: grid; gap: 2px; margin: 4px 0 0; font-size: 16px; }
.na-visit__cell .place__nav span { color: var(--on-accent); }
.na-visit__cell .place__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 15px; }
.na-visit__cell .place__nav a { min-height: 40px; padding: 0 12px; border: 0; border-radius: 0; background: var(--gold-deep); color: var(--on-accent); text-decoration: none; transition: background-color .2s, color .2s; }
.na-visit__cell .place__nav a:hover { background: var(--n-bg); color: var(--n-tx); }
.na-visit__go { display: flex; align-items: flex-end; justify-content: space-between; min-height: 160px; padding: 24px; background: var(--n-bg); color: var(--n-tx); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); letter-spacing: -.02em; text-decoration: none; transition: background-color .25s, transform .25s var(--n-ease); }
.na-visit__go span { transition: transform .3s var(--n-ease); }
.na-visit__go:hover { background: var(--n-bg2); }
.na-visit__go:hover span { transform: translateX(6px); }
.na-visit__go:active { transform: scale(.99); }
.na-visit__note { margin: 28px var(--n-m) 0; font-size: 16px; }
@media (max-width: 899px) {
  .na-visit__ph { height: 120px; }
  .na-visit__strip { overflow-x: auto; scrollbar-width: none; }
  .na-visit__title { font-size: 12vw; margin-top: 48px; }
  .na-visit__bar { grid-template-columns: 1fr; gap: 32px; }
  .na-visit__go { min-height: 96px; }
}

/* ── entrances: the parts of each section, once (only when nagai.js has marked the html) ── */
@media (prefers-reduced-motion: no-preference) {
  .na-js .na-in { transition: opacity .7s var(--n-ease) var(--d, 0s), transform .7s var(--n-ease) var(--d, 0s); }
  .na-js .na-in:not(.is-in) { opacity: 0; transform: translateY(24px); }
}

/* ── header and footer of this design ── */
.theme-nagai .hd--over:not(.is-solid) { color: var(--n-bg); }
.theme-nagai .b-mark .b-gilt { color: var(--n-tx); font-family: "Archivo", system-ui, sans-serif; font-size: clamp(1.625rem, 1.4rem + .5vw, 2rem); font-weight: 500; line-height: 1; letter-spacing: -.035em; text-transform: none; text-shadow: none; } /* taste-skill-ignore: removes the base shadow */
.theme-nagai .hd--over:not(.is-solid) .b-gilt { color: var(--n-bg); }
.theme-nagai .btn--gold, .theme-nagai .btn--cobalt, .theme-nagai .b-btn--gilt, .theme-nagai .btn--accent { background: var(--n-acc); background-image: none; color: var(--on-accent); box-shadow: none; border-radius: 0; } /* taste-skill-ignore: removes the base shadow */
.theme-nagai .b-book { height: 44px; padding: 0 20px; border-radius: 0; background: var(--n-acc); color: var(--on-accent); font: 600 16px/1 "Archivo", system-ui, sans-serif; transition: background-color .25s, transform .25s var(--n-ease); }
.theme-nagai .b-book:hover, .theme-nagai .b-book[aria-current] { background: var(--gold-deep); }
.theme-nagai .b-book:active { transform: scale(.98); }
@media (min-width: 1040px) { .theme-nagai .b-book { height: 48px; padding: 0 24px; } }
.theme-nagai .b-btn--gilt::after, .theme-nagai .btn--accent::after { display: none; }
.theme-nagai .btn, .theme-nagai .consent { border-radius: 0; }
.theme-nagai .ft { background: var(--n-tx); color: var(--chalk-2); border-top: 0; }
.theme-nagai .b-ft__sign .b-gilt { color: var(--n-bg); font-family: "Archivo", system-ui, sans-serif; font-weight: 400; letter-spacing: -.02em; text-transform: none; text-shadow: none; } /* taste-skill-ignore: removes the base shadow */
.theme-nagai .b-ft__tagline { color: var(--n-bg); }
.theme-nagai .ft .place { color: var(--n-tx); }
.page-home.theme-nagai .b-ft__grid > .b-ft__col:has(.places) { display: none; }
.theme-nagai h1, .theme-nagai h2, .theme-nagai h3 { font-family: "Archivo", system-ui, sans-serif; }
.theme-nagai .place__nav a { border-radius: 0; }
.theme-nagai .lang a, .theme-nagai .place__nav a { box-shadow: none; } /* taste-skill-ignore: removes the base rings */

/* the cover's moving picture: fades in over its own first frame (the photograph) once it plays; the phone file is cut to portrait */
.na-cover__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 55%; opacity: 0; transition: opacity 1.4s ease; }
.na-cover__vid.is-on { opacity: 1; }
@media (max-width: 699px) { .na-cover__vid { object-position: 50% 50%; } }
/* footer small print: readable on the dark ground (14px, light ink) */
.theme-nagai .b-ft__head { color: var(--chalk-2); font-size: .875rem; font-weight: 600; }
.theme-nagai .b-ft__legal { color: var(--chalk-2); font-size: .875rem; }
.theme-nagai .b-ft__col a, .theme-nagai .b-ft__intro a { color: var(--n-bg); }
.theme-nagai .b-ft__col a:hover, .theme-nagai .b-ft__intro a:hover { color: var(--goldLight, var(--gold-light)); }

/* phone: the steps stack – no row cut at the screen edge (owner: words must never look cut off) */
@media (max-width: 699px) {
  .na-how__bar { display: none; }
  .na-how__row { flex-direction: column; overflow: visible; gap: 40px; scroll-snap-type: none; }
  .na-how__step { flex: none; width: 100%; }
  .na-how__step figure { margin-top: 16px; }
  .na-how__step img { aspect-ratio: 4 / 3; }
}
@media (max-width: 699px) { .na-how__top { margin-bottom: 32px; } }