/* Shared reading and interaction scale, informed by Apple HIG, Material 3 and WCAG 2.2. */
:root {
  font-size: 100%;
  --ink: #243a37;
  --muted: #52645e;
  --green: #164d4a;
  --control-border: #768880;
  --text-small: .875rem;
  --text-body: 1rem;
  --text-title: 1.25rem;
  --text-section: clamp(1.5rem, 1.25rem + .8vw, 1.875rem);
}
body { font-size: var(--text-body); line-height: 1.75; overflow-wrap: break-word; }
h1, h2, h3, .serif, .card h3 {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .025em;
}
h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); line-height: 1.5; }
h2, .panel h2, .admin-title h2, .booking-layout h2, .intro h2, .section-head h2 {
  font-family: inherit; font-size: var(--text-section); line-height: 1.5; font-weight: 600;
}
h3, .card h3, .how-grid h3, .list-row h3 { font-size: var(--text-title); line-height: 1.6; }
p { line-height: 1.9; }
.hero h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); letter-spacing: .045em; line-height: 1.55; }
.hero p, .intro p, .card p, .how-grid p, .story, .info-list div,
.field, .notice, .booking-card p, .list-row p, .email-preview, .checkbox {
  font-size: var(--text-body);
}
.hero p, .intro p, .story { line-height: 1.95; }
.story { max-width: 42rem; }
.hero p { max-width: 28rem; }
.intro p { max-width: 38rem; margin-inline: auto; }
.card p { display: block; overflow: visible; -webkit-line-clamp: unset; }
.card h3 { margin: 1.25rem 0 .75rem; }
.card-bottom, .back, .note, .photo-note, .field small, .badge, .banner,
.section-head p, footer p, footer small, .small, .image-actions button, .stat span {
  font-size: var(--text-small); line-height: 1.7;
}
.eyebrow { font-size: var(--text-small); letter-spacing: .12em; }
.banner { padding: .75rem 1.25rem; }
.hero-caption {
  writing-mode: horizontal-tb; font-size: var(--text-small); right: 1.25rem;
  bottom: 1.25rem; left: 1.25rem; width: fit-content; margin-left: auto;
  padding: .4rem .75rem; border-radius: .4rem; background: #173e3bee; text-shadow: none;
}
.brand, .page-top .brand, .admin-head .brand { font-size: 1.125rem; letter-spacing: .05em; }
.how-grid strong { color: var(--green); font-family: inherit; font-size: 1.5rem; font-weight: 600; }
footer small { opacity: 1; }
footer p, footer small { color: #e8ece5; }
.detail-head h1 { font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); }
.login h1 { margin-top: 1.5rem; font-size: 1.75rem; }

/* Keep the experience titles expressive without changing functional headings. */
.card h3, .detail-head h1 {
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", serif;
  font-weight: 500;
}

/* Comfortable controls, including visible keyboard focus and text resizing. */
button, .button, .small, .admin-head button, .image-item button, .image-actions button {
  min-height: 48px; font-size: var(--text-body); line-height: 1.5; padding: .75rem 1rem;
}
input, select, textarea, .field input, .field select, .field textarea {
  font-size: 1rem; min-height: 48px; border-color: var(--control-border);
}
.field { gap: .5rem; }
.field small { color: var(--muted); }
.secondary { border-color: var(--control-border); }
button:disabled { opacity: 1; background: #e8ece8; color: #596760; }
:focus-visible { outline: 3px solid #164d4a; outline-offset: 4px; box-shadow: 0 0 0 4px #fff; }
.skip-link { position: absolute; top: -10rem; left: 1rem; z-index: 100; padding: .75rem 1rem; background: white; color: var(--green); }
.skip-link:focus { top: 1rem; }
main { scroll-margin-top: 1rem; }
.back, .text-link { display: inline-flex; min-height: 44px; align-items: center; text-decoration: underline; text-underline-offset: .2em; }
summary { min-height: 44px; padding-block: .5rem; cursor: pointer; }
.card:focus-visible { border-radius: var(--radius); }
.badge { font-weight: 600; white-space: normal; }
.row { flex-wrap: wrap; }
.row > * { min-width: 0; }
.editor-grid > *, .split > *, .booking-layout > *, .cards > * { min-width: 0; }
#feedback:not(:empty) { position: sticky; top: 0; z-index: 10; max-height: 40vh; overflow-y: auto; background: #f3dfbb; padding: 1rem 1.25rem; color: var(--ink); }
#feedback p { margin: 0; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Calendar: readable dates, named navigation and explicit selection. */
.calendar-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: 1.5rem 0; }
.calendar-head a { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: .5rem .75rem; text-decoration: none; border: 1px solid var(--control-border); border-radius: .5rem; }
.calendar-head strong { font-size: 1.125rem; }
.weekdays { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); text-align: center; color: var(--muted); font-size: .875rem; padding: .5rem 0; }
.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; }
.calendar-grid .day {
  display: flex; flex-direction: column; min-width: 0; min-height: 72px; align-items: center;
  justify-content: center; padding: .375rem 0; text-decoration: none; background: #e8efea;
  color: var(--ink); font-size: 1rem; line-height: 1.4; border: 1px solid #99aea1; border-radius: .375rem;
}
.calendar-grid .day small { font-size: .75rem; white-space: normal; overflow: visible; line-height: 1.5; color: inherit; }
.calendar-grid .day.selected { background: var(--green); color: white; border: 2px solid var(--green); outline: none; box-shadow: inset 0 0 0 2px white; font-weight: 700; }
.calendar-grid .day:disabled { opacity: 1; background: #f3f3ef; color: #66716b; border-color: #e1e5df; }
.calendar-grid .day:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.calendar-scroll-help { display: none; }
.calendar-scroll { overflow-x: auto; padding: 5px; margin: -5px; }
.admin-grid { gap: 0; border: 1px solid var(--line); border-radius: .75rem; overflow: hidden; }
.admin-grid .day { border-radius: 0; min-height: 128px; justify-content: flex-start; align-items: flex-start; background: white; border: 1px solid var(--line); padding: .5rem; }
.admin-grid .day small { font-size: .875rem; }
.admin-grid .day.selected .badge { background: white; color: var(--green); }
.admin-grid .day.selected .badge.pending { background: #fbefda; color: #806126; }
.tabs { gap: .5rem; }
.tabs a { display: inline-flex; align-items: center; min-height: 48px; padding: .75rem 1rem; text-decoration: none; font-weight: 600; font-size: 1rem; border-radius: .5rem; border: 1px solid transparent; }
.tabs a:hover { background: #e8efea; }
.tabs a[aria-current="page"] { background: var(--green); color: white; text-decoration: underline; text-underline-offset: .35em; }
.editor { margin: 1.5rem 0; }
.admin-title form { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.admin-title form .field { margin: 0; }
.admin-head form { margin: 0; }
#google-login { margin-top: 1.5rem; }
form.editor .editor-grid input { min-width: 0; }
form.editor .field { margin-bottom: 1rem; }
.image-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: .5rem; }
.image-item button { margin: .375rem .25rem 0 0; }
dialog .row { flex-wrap: wrap; }
.checkbox { min-height: 48px; align-items: flex-start; padding-block: .5rem; }
.checkbox input { flex: 0 0 24px; width: 24px; min-height: 24px; margin-top: .125rem; }

@media (max-width: 650px) {
  .container { padding-inline: 1.25rem; }
  .hero-copy { padding: 2rem 1.5rem; }
  .hero .brand { margin-bottom: 2rem; }
  .hero h1 { font-size: 2rem; }
  .hero p br, .intro p br { display: none; }
  .intro { padding: 3.5rem 1.5rem; }
  .intro p { text-align: left; }
  .hero-image { height: 300px; }
  .panel { padding: 1rem; }
  .booking-layout { gap: 1.5rem; }
  .admin-shell { padding-inline: 1rem; }
  .admin-head { flex-wrap: wrap; }
  .admin-head .row { flex: 1 1 100%; }
  .admin-head .brand img { display: block; }
  .admin-title { align-items: stretch; }
  .admin-title form { width: 100%; }
  .admin-title form .field { flex: 1; }
  .admin-title select { width: 100%; min-width: 0; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .tabs a { justify-content: center; padding: .75rem .5rem; font-size: .875rem; }
  .calendar-scroll-help { display: block; margin: 0 0 .75rem; }
  .calendar-scroll .weekdays, .calendar-scroll .admin-grid { min-width: 42rem; }
  .calendar-grid { gap: 3px; }
  .admin-grid { gap: 0; }
  .page-top { gap: 1rem; flex-wrap: wrap; }
  .image-list { grid-template-columns: 1fr; }
  .list-row { align-items: flex-start; flex-wrap: wrap; gap: .75rem; }
  .login { margin-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card:hover img { transform: none; }
}
@media (forced-colors: active) {
  .calendar-grid .day.selected, .tabs a[aria-current="page"] { border: 3px solid Highlight; }
}