/* ==========================================================================
   The Living Cape design system (design.md, D65), every page
   Scoped tokens, the JAP Engraved Travel Symbols, the three actions (Sun Seal,
   Travel Note, Quiet Outline) and the Travel Concierge (the desktop folio and the
   mobile menu's service rows). Nothing here matches .hero, .hero__*, .btn-coin,
   .primary-nav, svg.icon or the header bar's own elements: the approved hero and
   header keep their tokens.css values exactly. The home chapters are in living-cape.css.
   ========================================================================== */

/* 1. Tokens, design.md §03 and §15, only inside the new scopes ------------- */
.living-cape,
.lc-scope,
.jap-concierge,
.jap-concierge-panel,
.jap-concierge-rows {
  --lc-paper: var(--ivory-soft, #f6f3ec);
  --lc-paper-light: #fefcf7;
  --lc-ivory: var(--ivory, #e3ded2);
  --lc-forest: var(--forest, #103426);
  --lc-forest-deep: var(--forest-deep, #01211f);
  --lc-ink: #252b29;
  --lc-body: var(--text, #2b333b);
  --lc-muted: var(--muted, #5e6670);
  --lc-brass: #b98c47;
  --lc-functional-gold: var(--gold, #836516);
  --lc-sun: #d99838;
  --lc-champagne: var(--champagne, #f5dba3);
  --lc-atlantic: #4e6873;
  --lc-umber: #704833;
  --lc-stone-line: #d9d2c5;
  --lc-focus: #174f86;
  --lc-display: var(--font-serif);
  --lc-ui: var(--font-body);
  --lc-reading: 46rem;
  /* Motion grammar (design.md §12) */
  --lc-micro: 200ms;
  --lc-unfold: 380ms;
  --lc-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  /* The media system (D66, design.md at the repository root §02, §07), mapped onto the tokens above rather than a
     second palette: canvas = --lc-paper, surface = --lc-paper-light, ink = --lc-ink, accent = --lc-brass */
  --media-radius: 14px;
  --media-line: rgba(36, 40, 36, 0.13);
  --media-on-image: #fff;
  --media-shadow: 0 12px 30px rgba(20, 20, 20, 0.08);
  /* Darker than design.md's starting point (.18 at 55%, .82 at the foot), set by measuring the words over the six real
     crops (the white catamaran hull behind "Hermanus" was the palest): titles keep 3:1, descriptions and labels 4.5:1 */
  --media-overlay: linear-gradient(180deg, rgba(7, 16, 18, 0) 30%, rgba(7, 16, 18, 0.42) 58%, rgba(7, 16, 18, 0.88) 100%);
  --gallery-gap: clamp(12px, 0.5rem + 0.5vw, 16px);
  --motion-fast: 280ms;
  --motion-ui: 420ms;
}
/* Dark grounds (deep forest, photographs): the light focus ring and champagne ink */
.lc-dark {
  --lc-focus: #f5dba3;
}
.living-cape :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.lc-scope :is(a, button):focus-visible,
.jap-concierge :is(a, button):focus-visible,
.jap-concierge-panel :is(a, button):focus-visible,
.jap-concierge-rows a:focus-visible {
  outline: 2px solid var(--lc-focus);
  outline-offset: 3px;
}

/* 2. JAP Engraved Travel Symbols (design.md §07): stroke-only, currentColor --- */
.jap-engraved-icon {
  display: inline-block;
  flex: none;
  width: var(--jei-size, 24px);
  height: var(--jei-size, 24px);
  overflow: visible;
  vertical-align: middle;
}

/* 3–5. Sun Seal, Travel Note and Quiet Outline are now the primary, tertiary and secondary of the Golden
   Engraved Button System (buttons.css, design/buttons/design.md); their class names remain only as hooks. */

/* 6. Travel Concierge: the trigger in the header bar (from 64em) ------------
   It takes the navigation titles' own type and colours. On the home page it waits
   for the hero's entrance to finish (html.intro-done from hero.js), then fades in,
   so the approved choreography is untouched; a timed fallback shows it should
   hero.js never run. Hidden (the attribute) until concierge.js takes it over. */
.jap-concierge {
  display: none;
}
@media (min-width: 64em) {
  .jap-concierge {
    display: flex;
    align-items: center;
  }
}
.jap-concierge__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-serif);
  font-size: clamp(1.1875rem, 1.125rem + 0.2vw, 1.375rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: color var(--dur, 220ms) var(--ease-out);
}
.jap-concierge__toggle[hidden] {
  display: none;
}
.jap-concierge__toggle-label {
  position: relative;
}
.jap-concierge__toggle-label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur, 220ms) var(--ease-out);
}
.jap-concierge__toggle:hover,
.jap-concierge__toggle[aria-expanded='true'] {
  color: var(--gold-hover);
}
.jap-concierge__toggle:hover .jap-concierge__toggle-label::after,
.jap-concierge__toggle[aria-expanded='true'] .jap-concierge__toggle-label::after {
  transform: scaleX(1);
}
.site-header--overlay:not(.is-condensed) .jap-concierge__toggle:hover,
.site-header--overlay:not(.is-condensed) .jap-concierge__toggle[aria-expanded='true'] {
  color: var(--champagne);
}
.site-header--overlay:not(.is-condensed) .jap-concierge__toggle-label::after {
  background: var(--champagne);
}
.site-header--overlay:not(.is-condensed) .jap-concierge__toggle:focus-visible {
  outline-color: var(--champagne);
}
.jap-concierge__glyph {
  display: none;
}
/* Below 1360 px the bar has no room for a sixth title beside the approved five and Book Now (which must
   keep its place on the hero's edge), so the trigger is a 44 px engraved compass that tucks into the bar's
   gaps; its name stays for screen readers. From 1024 to about 1140 px only, the titles' gaps close by a few pixels so it fits. */
@media (min-width: 64em) and (max-width: 84.99em) {
  .jap-concierge__toggle {
    justify-content: center;
    width: 44px;
    margin-inline: -10px;
  }
  .jap-concierge__toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .jap-concierge__glyph {
    display: block;
    --jei-size: 28px;
    transition: transform var(--lc-unfold, 380ms) var(--lc-ease);
  }
  .jap-concierge__toggle[aria-expanded='true'] .jap-concierge__glyph {
    transform: rotate(45deg);
  }
}
@media (min-width: 64em) and (max-width: 68.74em) {
  .has-overlay-header .primary-nav ul {
    gap: 0.8125rem;
  }
  body:not(.has-overlay-header) .primary-nav ul {
    gap: 0.875rem;
  }
  .jap-concierge__toggle {
    margin-inline: -13px;
  }
}
@media (min-width: 68.75em) and (max-width: 71.24em) {
  body:not(.has-overlay-header) .primary-nav ul {
    gap: calc(0.625rem + 2.2vw);
  }
}
.cine:not(.intro-done) .home .jap-concierge__toggle {
  opacity: 0;
  visibility: hidden;
  animation: lc-concierge-fallback 1ms linear 5.6s forwards;
}
.cine.intro-done .home .jap-concierge__toggle {
  animation: lc-concierge-in 700ms var(--lc-ease) both;
}
@keyframes lc-concierge-fallback {
  to {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes lc-concierge-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* 7. The Travel Concierge panel (owner's mockup, 25 Oct 2026) ---------------
   A sheet at the right of the page, which dims and softens behind it; it unfolds downward and folds back up. The sheet is a modal dialog
   (concierge.js): its close button top right, Escape or a click on the dimmed page closes it. Inside, a grid: the
   heading across the top; the four services as photograph cards beside the popular private days; the invitation to
   plan with Make It Yours; the direct line; and the coast from Chapman's Peak fading into the lower right corner. */
.jap-concierge-panel {
  position: fixed;
  inset: 0;
  z-index: 60; /* over the sticky header (50) and the page */
}
.jap-concierge-panel[hidden] {
  display: none;
}
html.is-concierge-open {
  overflow: hidden;
}
.jap-concierge-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 22, 30, 0.58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.jap-concierge-panel__sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100%, 68rem, max(58rem, 66vw));
  overflow: hidden auto;
  overscroll-behavior: contain;
  background: var(--lc-paper);
  box-shadow: -24px 0 60px rgba(1, 18, 39, 0.28);
  color: var(--lc-body);
}
/* The coast fading into the corner: real JAP photography, softened at its edges into the paper */
.jap-concierge-panel__scene {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  height: 46%;
  min-height: 18rem;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 100% 100%, #000 38%, rgba(0, 0, 0, 0.55) 58%, transparent 80%);
  mask-image: radial-gradient(120% 100% at 100% 100%, #000 38%, rgba(0, 0, 0, 0.55) 58%, transparent 80%);
}
.jap-concierge-panel__scene > picture {
  display: block;
  height: 100%;
}
.jap-concierge-panel__scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 70%;
  filter: saturate(0.92) sepia(0.08);
}
.jap-concierge-panel__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--lc-stone-line);
  border-radius: 50%;
  background: var(--lc-paper-light);
  color: var(--lc-ink);
  box-shadow: 0 4px 12px rgba(1, 18, 39, 0.12);
  cursor: pointer;
  transition: border-color var(--lc-micro) var(--lc-ease), box-shadow var(--lc-micro) var(--lc-ease);
}
.jap-concierge-panel__close .icon {
  width: 20px;
  height: 20px;
}
.jap-concierge-panel__close:hover {
  border-color: var(--lc-brass);
  box-shadow: 0 6px 16px rgba(1, 18, 39, 0.18);
}
.jap-concierge-panel__close:focus-visible {
  outline: 3px solid var(--jap-focus, #175b9a);
  outline-offset: 3px;
}
.jap-concierge-panel__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 17.5rem);
  grid-template-areas:
    'head head'
    'services index'
    'book index'
    'reach reach';
  grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(1.25rem, 2.2vw, 2.25rem);
  padding: clamp(2rem, 4vh, 2.75rem) clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vh, 2.25rem);
}
.jap-concierge-panel__head {
  grid-area: head;
  padding-right: 3.5rem;
}
.jap-concierge-panel__eyebrow,
.jap-concierge-panel__heading {
  font-family: var(--lc-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lc-umber);
}
/* "Travel Concierge" with its brass rule */
.jap-concierge-panel__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.jap-concierge-panel__eyebrow::after {
  content: '';
  width: 5.75rem;
  height: 1px;
  background: var(--lc-brass);
}
.jap-concierge-panel__title {
  margin-top: 0.5rem;
  font-family: var(--lc-display);
  font-size: clamp(2.3rem, 1.4rem + 1.6vw, 3.1rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--lc-ink);
}
.jap-concierge-panel__title em {
  font-style: italic;
  color: #a17a2e;
}
.jap-concierge-panel__services {
  grid-area: services;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: clamp(12rem, 25vh, 17rem);
  gap: 1rem;
  margin: clamp(1.25rem, 2.4vh, 1.75rem) 0 0;
  padding: 0;
  list-style: none;
}
.jap-concierge-panel__services > li {
  min-width: 0;
}
/* Popular private days: a photograph and the name, between hairlines; then the way to all of them */
.jap-concierge-panel__index {
  grid-area: index;
  align-self: start;
  margin-top: clamp(1.25rem, 2.4vh, 1.75rem);
  padding-left: clamp(1rem, 1.4vw, 1.25rem);
  border-left: 1px solid rgba(185, 140, 71, 0.35);
}
.jap-concierge-panel__index ul {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}
.jap-concierge__day {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 52px;
  padding-block: 0.3rem;
  border-top: 1px solid rgba(217, 210, 197, 0.8);
  color: var(--lc-ink);
  font-family: var(--lc-ui);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: color var(--lc-micro) var(--lc-ease);
}
.jap-concierge-panel__index li:last-child .jap-concierge__day {
  border-bottom: 1px solid rgba(217, 210, 197, 0.8);
}
.jap-concierge__thumb {
  flex: none;
  width: 48px;
  height: 38px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--lc-ivory);
}
.jap-concierge__thumb > picture {
  display: block;
  height: 100%;
}
.jap-concierge__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--lc-ease);
}
.jap-concierge__day:hover {
  color: var(--lc-forest);
}
.jap-concierge__day:hover .jap-concierge__thumb img {
  transform: scale(1.08);
}
.jap-concierge__day:focus-visible {
  outline: 3px solid var(--jap-focus, #175b9a);
  outline-offset: 2px;
}
.jap-concierge__all {
  margin-top: 1.1rem;
  color: #8a6420;
  font-size: 1rem;
  font-weight: 500;
  text-decoration-color: rgba(161, 122, 46, 0.7);
}
/* The invitation to plan: its words beside the flagship */
.jap-concierge-panel__book {
  grid-area: book;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(1.25rem, 2.6vh, 1.75rem);
  padding-block: clamp(1.1rem, 2.4vh, 1.5rem);
  border-block: 1px solid rgba(217, 210, 197, 0.9);
}
.jap-concierge-panel__note {
  max-width: 30rem;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--lc-muted);
}
.jap-concierge-panel__cta {
  justify-self: end;
}
/* The direct line: three entries between fine rules */
/* Under the planning row's rule (which ends with the cards' column); the entries may run on under the coast */
.jap-concierge-panel__reach {
  grid-area: reach;
  padding-top: clamp(0.9rem, 2vh, 1.1rem);
}
.jap-concierge-reach {
  display: flex;
  flex-wrap: nowrap;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
}
.jap-concierge-reach > li {
  min-width: 0;
  padding: 0 clamp(0.85rem, 1.4vw, 1.4rem);
  border-left: 1px solid rgba(185, 140, 71, 0.4);
}
.jap-concierge-reach > li:first-child {
  padding-left: 0;
  border-left: 0;
}
.jap-concierge-reach__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  color: var(--lc-ink);
  text-decoration: none;
}
.jap-concierge-reach__item .brand-mark {
  --mark: 36px;
}
/* A call in the concierge carries the gold of its mockup; WhatsApp keeps its own green */
.jap-concierge-reach__item .brand-mark--phone {
  background: #a77a2f;
}
.jap-concierge-reach__mail {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid #a77a2f;
  border-radius: 50%;
  color: #8a6420;
}
.jap-concierge-reach__mail .icon {
  width: 18px;
  height: 18px;
}
.jap-concierge-reach__text {
  display: grid;
  line-height: 1.35;
}
.jap-concierge-reach__name {
  font-size: 0.9375rem;
  font-weight: 500;
}
.jap-concierge-reach__value {
  font-size: 0.8125rem;
  color: var(--lc-muted);
  font-variant-numeric: tabular-nums;
}
.jap-concierge-reach__item:hover .jap-concierge-reach__name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.jap-concierge-reach__item:focus-visible {
  outline: 3px solid var(--jap-focus, #175b9a);
  outline-offset: 3px;
}
/* Short screens: the cards take less height so the whole sheet usually fits without scrolling */
@media (max-height: 820px) {
  .jap-concierge-panel__services {
    grid-auto-rows: 11rem;
  }
  .jap-concierge-panel__title {
    font-size: clamp(2.1rem, 1.3rem + 1.4vw, 2.7rem);
  }
}
/* 8. Service invitations: the concierge's photograph cards (owner's mockup, 25 Oct 2026) ----
   The photograph fills the card, a round badge carries the service's symbol, and the name and one line sit in ivory
   over a shade at the foot; the whole card is its link. */
.lc-invite {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  height: 100%;
  min-height: 12rem;
  padding: 1.1rem 1.15rem 1.15rem;
  overflow: hidden;
  border-radius: 10px;
  background: var(--lc-forest-deep);
  color: #fefcf7;
  box-shadow: 0 6px 18px rgba(1, 18, 39, 0.12);
  transition: box-shadow 260ms var(--lc-ease), transform 260ms var(--lc-ease);
}
.lc-invite--menu {
  min-height: 0; /* in the concierge the grid row sets the height */
}
.lc-invite__photo {
  position: absolute;
  z-index: -2;
  inset: 0;
}
.lc-invite__photo > picture {
  display: block;
  height: 100%;
}
.lc-invite__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: transform 600ms var(--lc-ease);
}
/* Bright above, dark only where the words sit */
.lc-invite::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 14, 12, 0) 30%, rgba(6, 14, 12, 0.45) 58%, rgba(6, 14, 12, 0.86) 100%);
  pointer-events: none;
}
.lc-invite__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--lc-paper-light);
  color: #3a2c16;
  box-shadow: 0 3px 10px rgba(1, 18, 39, 0.25);
}
.lc-invite__badge .icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.7;
}
.lc-invite__name {
  font-family: var(--lc-display);
  font-size: clamp(1.4rem, 1rem + 0.65vw, 1.75rem);
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
/* In the concierge the cards keep their width while the type grows with the screen: below 1600 px the size stops at
   23 px, so the longest action ("Explore Safari Transfers") stays on one line like the other three */
.lc-invite--menu .lc-invite__name {
  font-size: clamp(1.4rem, 1rem + 0.65vw, 1.45rem);
}
@media (min-width: 100em) {
  .lc-invite--menu .lc-invite__name {
    font-size: clamp(1.45rem, 1rem + 0.65vw, 1.75rem);
  }
}
.lc-invite__name a {
  color: inherit;
  text-decoration: none;
}
/* The whole card is the link */
.lc-invite__name a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.lc-invite__name a:focus-visible {
  outline: none;
}
/* The ring for keyboard focus only (opening the sheet with a pointer moves focus here without one) */
.lc-invite:has(a:focus-visible) {
  outline: 3px solid var(--jap-focus, #175b9a);
  outline-offset: 3px;
}
.lc-invite__line {
  display: -webkit-box;
  max-width: 19rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.lc-invite:hover {
  box-shadow: 0 12px 28px rgba(1, 18, 39, 0.22);
  transform: translateY(-2px);
}
.lc-invite:hover .lc-invite__photo img {
  transform: scale(1.05);
}

/* 9. The mobile menu's concierge rows (below 64em, inside the existing drawer) */
.jap-concierge-rows {
  margin: 0 0 var(--space-5, 1.5rem);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lc-stone-line);
}
.jap-concierge-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  min-height: 68px;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--lc-stone-line);
  color: var(--lc-ink);
  text-decoration: none;
}
.jap-concierge-row__photo {
  display: block;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--lc-ivory);
}
.jap-concierge-row__photo > picture {
  display: block;
  height: 100%;
}
.jap-concierge-row__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
.jap-concierge-row__text {
  display: grid;
  gap: 0.1rem;
}
.jap-concierge-row__name {
  font-family: var(--lc-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
}
.jap-concierge-row__line {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--lc-muted);
}

@media (prefers-reduced-motion: reduce) {
  .lc-invite,
  .lc-invite__photo img,
  .jap-concierge__thumb img {
    transition: none;
  }
  .lc-invite:hover,
  .lc-invite:hover .lc-invite__photo img,
  .jap-concierge__day:hover .jap-concierge__thumb img {
    transform: none;
  }
  .cine.intro-done .home .jap-concierge__toggle {
    animation: none;
  }
}
@media print {
  .jap-concierge,
  .jap-concierge-panel {
    display: none !important;
  }
}