/* A restrained navy and blue palette for the existing home page. */
:root {
  --blue: #102a50;
  --ink: #102a50;
  --accent-blue: #365f85;
  --muted: #596575;
  --gold: #365f85;
  --line: #d7dfe7;
  --soft: #eaf0f5;
}

header .brand-logo { width: 80px; }
header .brand { gap: 12px; }
header .brand-name { color: var(--ink); }
.brand-kicker { color: var(--accent-blue); }
header .brand-base, footer .brand-base { color: var(--accent-blue); }

/* Darken the uploaded blue while keeping the white artwork white. */
header .brand-logo[src$="terakoya-logo-blue.jpg"],
footer .brand-logo[src$="terakoya-logo-blue.jpg"] {
  filter: brightness(.890625) contrast(1.28) saturate(.67544);
}

.hero-brand-panel {
  background: #f0e7d8;
  color: var(--ink);
  padding: 16px 34px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-brand-panel p {
  line-height: 1.6;
  font-weight: 700;
  text-shadow: none;
}
.opening {
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 600;
}
.schedule-link { background: var(--soft); }
.button.dark:hover, .button-primary:hover { background: var(--accent-blue); }

@media (max-width: 700px) {
  header { padding-block: 10px; gap: 16px; }
  header .brand { gap: 8px; }
  header .brand-logo { width: 56px; }
  .hero-brand-panel { padding: 11px 22px; }
  .hero-brand-panel p { font-size: 21.6px; line-height: 1.6; letter-spacing: 0; }
  .hero-brand-panel .hero-site-name { font-size: 21.6px; }
}

@media (max-width: 370px) {
  header { gap: 8px; }
  header .brand-logo { width: 50px; }
  .hero-brand-panel { padding: 10px 16px; }
  .hero-brand-panel p { font-size: 19.2px; }
  .hero-brand-panel .hero-site-name { font-size: 20.4px; }
}

/* About: a compact introduction with an accessible native disclosure. */
.about .about-intro{grid-column:1/-1}
.about .about-intro h2{margin-bottom:0;line-height:1.7}
.about .about-more{grid-column:1/-1;width:100%;max-width:720px;margin:0 auto;padding-top:0}
.about-details>summary{display:flex;align-items:center;justify-content:space-between;gap:24px;width:180px;min-height:52px;margin-inline:auto;padding:12px 24px;list-style:none;border:1px solid var(--blue);border-radius:999px;background:white;color:var(--blue);font-size:16px;font-weight:600;line-height:1.6;cursor:pointer}
.about-details>summary::-webkit-details-marker{display:none}
.about-details>summary::marker{content:""}
.about-details>summary::after{content:"＋";font-size:22px;font-weight:400;line-height:1}
.about-details[open]>summary::after{content:"−"}
.about-details>summary:hover{background:var(--soft)}
.about-description{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);text-align:left}
.about-copy .about-description p{margin:0}
@media(max-width:700px){.about .about-intro h2{font-size:clamp(19px,5.4vw,25px);letter-spacing:0}.about .about-more{margin-top:24px}.about-details>summary{min-height:52px}.about-description{margin-top:22px;padding-top:22px}}

/* A welcoming explanation of exclusive studio use above the studio photos. */
.about .about-private{grid-column:1/-1;width:100%;max-width:720px;margin:16px auto 0;text-align:center}
.about-private h3{font-size:26px;line-height:1.7;margin:0 0 24px}
.about-private h3>span{display:block}
.about-private .about-description p{margin:0}
@media(max-width:700px){.about-private h3{font-size:clamp(20px,5.4vw,25px);letter-spacing:0}.about-private .about-description p{font-size:16px;line-height:2.1}}

@media(max-width:700px){.about .about-private{margin-top:40px}}

/* Place the stair hall photo and its introduction directly before Rental. */
.space-before-rental{display:block;padding-top:0}
.space-before-rental>figure{max-width:880px;margin-inline:auto}
.space-before-rental>div{max-width:720px;margin:40px auto 0;padding:0;text-align:center}
@media(max-width:700px){.space-before-rental>div{margin-top:34px}}

/* Match the Access wordmark accent to the existing blue logo. */
.access-name .inline-base{color:var(--accent-blue)}

/* Keep the two support paragraphs distinct inside the existing disclosure. */
.about-support .about-description p+p{margin-top:20px}

/* Let the flooring detail overlap the studio image without covering captions. */
.about .photo-composition{isolation:isolate}
.about .concept-photo{width:86%}
.about .concept-photo figcaption{max-width:60%}
.about .detail-photo{width:43%;margin:calc(-16cqw - 36px) 0 0 auto;padding:10px;border-radius:22px;z-index:2}
@media(max-width:700px){
  .about .concept-photo{width:94%}
  .about .concept-photo figcaption{max-width:55%}
  .about .detail-photo{width:62%;margin-top:calc(-18cqw - 36px);padding:7px;border-radius:18px}
}

.photo-composition .photo-note{display:inline-block;white-space:nowrap}
@media(max-width:700px){
  .about .concept-photo figcaption{max-width:calc(38cqw - 12px)}
  .concept-caption-line{display:block}
  .about .detail-photo{margin-top:calc(-18cqw - 62px)}
}