/* Calendar beside the vertical daily title.
   Preserve the dark page's quiet typography and ample negative space. */
.home-view .home-head {
  justify-content:flex-end;
}
.home-view .home-day-calligraphy.has-calendar-trigger {
  pointer-events:auto;
  z-index:60;
}
.home-view .home-day-calligraphy-title {
  display:block;
  cursor:pointer;
  text-align:start;
  font-family:var(--serif);
  font-weight:300;
  color:inherit;
  transition:opacity .25s ease;
}
.home-view .home-day-calligraphy-title:hover,
.home-view .home-day-calligraphy-title:focus-visible {
  opacity:.68;
}
.home-view .home-day-calendar-link {
  display:block;
  font-family:var(--sans);
  font-size:10px;
  font-weight:400;
  line-height:1.25;
  letter-spacing:.14em;
  color:rgba(247,247,240,.52);
  text-transform:lowercase;
  text-align:start;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transition:color .25s ease;
}
.home-view .home-day-calendar-link:hover,
.home-view .home-day-calendar-link:focus-visible {
  color:rgba(247,247,240,.94);
}
.home-view.is-ambient-obscured .ambient-video {
  /* The existing glass-blur backdrop remains in charge of the soft focus.
     Playback rate, not an opacity fade or paused frame, creates the slow motion. */
  transition:filter .5s ease;
}
@media (max-width:760px) {
  .home-view .home-day-calligraphy.has-calendar-trigger {gap:10px;}
  .home-view .home-day-calendar-link {font-size:9px;}
}
/* The English name names this particular day, not the whole website.
   Keep a long phrase quietly aligned with the vertical calendar link. */
.home-view .home-day-calligraphy.is-latin .home-day-calligraphy-title {
  font-size:clamp(22px,2.45vw,32px);
  line-height:1.2;
  letter-spacing:.025em;
  white-space:nowrap;
}
.home-view .home-day-calligraphy-date {
  white-space:nowrap;
}
@media (max-width:760px) {
  .home-view .home-day-calligraphy.is-latin .home-day-calligraphy-title {
    font-size:21px;
    letter-spacing:.015em;
  }
}

/* Shared site typography for translated navigation; no separate UI font. */
.home-view .index-toggle,
.home-view .home-day-calendar-link,
.index-heading,
.calendar-kicker,
.calendar-current,
.calendar-controls,
.calendar-weekday,
.calendar-day-type,
.room-group,
.room-head > p {
  font-family: var(--serif);
  font-weight: 300;
}
.home-view .index-toggle {
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .075em;
}
.home-view .home-day-calendar-link {
  font-size: 11px;
  letter-spacing: .07em;
}
.home-view .home-day-calligraphy-date {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .08em;
}
@media (max-width:760px) {
  .home-view .index-toggle {font-size: 12px;}
  .home-view .home-day-calendar-link {font-size: 10px;}
  .home-view .home-day-calligraphy-date {font-size: 10px;}
}

/* Four scenes / one changing day: a small calendar annotation beside the day. */
.home-view .home-day-calendar-link {
  font-family:var(--serif);
  font-size:10px;
  font-weight:300;
  letter-spacing:.045em;
  white-space:nowrap;
  line-height:1.3;
}
@media(max-width:760px) {
  .home-view .home-day-calendar-link {
    font-size:9px;
    letter-spacing:.02em;
  }
}


/* ===== Readable small type / secondary Index hierarchy =====
   The original 8–10px micro-labels were too faint on retina screens.
   Enlarge only editorial metadata / navigation; artwork titles and body
   copy keep their existing rhythm.
*/
.index-heading {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: .115em;
  color: rgba(247,247,240,.59);
  margin-bottom: 19px;
}
.calendar-kicker,
.room-group,
.room-note-title {
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .09em;
}
.calendar-kicker {color:rgba(247,247,240,.53);}
.room-group,.room-note-title {color:rgba(23,24,19,.50);}
.index-panel .index-group {min-width:0;}

/* More legible calendar marks without changing its seven-column geometry. */
.calendar-controls {font-size:12px;}
.calendar-weekday {
  font-size:11px;
  color:rgba(247,247,240,.47);
}
.calendar-number {font-size:12px;}
.calendar-day-type {font-size:12px;color:rgba(247,247,240,.47);}
.calendar-today {font-size:11px;}
.calendar-intro p {font-size:clamp(13px,1.12vw,15px);}

/* Upper room navigation, artwork captions, thematic gallery numbers. */
.room-head > p {font-size:12px;}
.room-back {font-family:var(--serif);font-size:12px;}
.room-image figcaption,
.room-view[data-group="collection"] .room-image figcaption {
  font-family:var(--serif);
  font-size:11px;
  line-height:1.45;
  letter-spacing:.03em;
}
.fragrance-theme {font-size:12px;}
.fragrance-theme-index,
.fragrance-theme-count {font-family:var(--serif);font-size:10px;}
.fragrance-frame figcaption {font-size:11px;}

/* The Index is a quiet secondary title, not another micro-label. */
.home-view .index-toggle {
  font-family:var(--serif);
  font-size:21px;
  font-weight:300;
  line-height:1.3;
  letter-spacing:.17em;
  text-transform:none;
  color:rgba(247,247,240,.88);
  white-space:nowrap;
  padding:4px 0;
}
.home-view .index-toggle::after {
  width:36px;
  margin:0 0 5px 15px;
  opacity:.44;
}
.home-view .index-toggle:hover::after {width:52px;}
.home-view .home-day-calendar-link {
  font-size:12px;
  letter-spacing:.04em;
}
.home-view .home-day-calligraphy-date {font-size:12px;}

@media (max-width:760px) {
  .index-heading {font-size:13px;margin-bottom:15px;}
  .calendar-kicker,
  .room-group,
  .room-note-title {font-size:11px;}
  .calendar-controls {font-size:11px;}
  .calendar-weekday {font-size:10px;padding:0 5px;}
  .calendar-day-type {font-size:10px;}
  .calendar-number {font-size:11px;}
  .calendar-today {font-size:11px;}
  .calendar-intro p {font-size:13px;}
  .room-head > p {font-size:11px;}
  .room-back {font-size:11px;}
  .room-image figcaption,
  .room-view[data-group="collection"] .room-image figcaption {
    font-size:10px;
    line-height:1.45;
  }
  .fragrance-theme {font-size:11px;}
  .fragrance-theme-index,
  .fragrance-theme-count {font-size:9px;}
  .home-view .index-toggle {font-size:19px;letter-spacing:.15em;}
  .home-view .index-toggle::after {width:28px;margin-left:11px;}
  .home-view .index-toggle:hover::after {width:40px;}
  .home-view .home-day-calendar-link {font-size:11px;}
  .home-view .home-day-calligraphy-date {font-size:11px;}
}

/* The day name stays vertical; only the mobile date reads left-to-right. */
@media (max-width:760px) {
  .home-view .home-day-calligraphy-date {
    display:inline-block;
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    direction:ltr;
    white-space:nowrap;
  }
}

/* Safari / WebKit: writing-mode on a flex ancestor is not sufficient for a
   native button. The control AND its text box must explicitly be vertical. */
.home-view .home-day-calligraphy.has-calendar-trigger > .home-day-calligraphy-title {
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  -webkit-writing-mode:vertical-rl;
  writing-mode:vertical-rl;
  text-orientation:upright;
  white-space:nowrap;
  text-align:start;
}
.home-view .home-day-calligraphy .home-day-title-vertical-text {
  display:block;
  -webkit-writing-mode:vertical-rl;
  writing-mode:vertical-rl;
  text-orientation:upright;
  white-space:nowrap;
}
.home-view .home-day-calligraphy.is-latin > .home-day-calligraphy-title,
.home-view .home-day-calligraphy.is-latin .home-day-title-vertical-text {
  text-orientation:mixed;
}