/* Arumi Aesthetics, shared page chrome.
   Load AFTER css/styles.css so these rules win where they overlap:

     <link rel="stylesheet" href="/css/styles.css">
     <link rel="stylesheet" href="/css/chrome.css">

   Every class here is prefixed ar- so nothing collides with the generic
   .card / .pillar / .button / .site-nav names already in styles.css.
   Values are lifted verbatim from the design components, do not round them. */

/* ---------------------------------------------------------------- page shell */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Matches the nav: 80px bar plus its 1px hairline. */
  padding-top: 81px;
  background: var(--color-ivory-blush);
  color: var(--color-espresso);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}

a { color: var(--color-bronze-text); }
a:hover { color: var(--color-deep-bronze); }
::selection { background: rgba(184, 154, 75, 0.25); }

/* ----------------------------------------------------------------------- nav */

.ar-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(246, 239, 233, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(166, 135, 111, 0.1);
}

/* border-box is not optional. height + padding on a content box measured 113px
   against an 81px body offset and covered the top of every page. */
.ar-nav__row {
  box-sizing: border-box;
  height: 80px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.ar-nav__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
}
.ar-nav__wordmark {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-mocha);
  margin-right: -0.32em;
  opacity: 1;
  transform: scale(1);
  transition: opacity 800ms var(--silk), transform 800ms var(--silk);
}
.ar-nav__submark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.05);
  transition: opacity 800ms var(--silk), transform 800ms var(--silk);
}
.ar-nav__logo:hover .ar-nav__wordmark,
.ar-nav__logo:focus-visible .ar-nav__wordmark { opacity: 0; transform: scale(0.97); }
.ar-nav__logo:hover .ar-nav__submark,
.ar-nav__logo:focus-visible .ar-nav__submark { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.ar-nav__links {
  display: flex;
  gap: 48px;
  flex: 1;
  justify-content: flex-start;
  margin: 0 auto 0 64px;
}
.ar-nav__item { position: relative; display: flex; align-items: center; }
.ar-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-espresso);
  text-decoration: none;
}
.ar-nav__caret { stroke: var(--color-arumi-bronze); transition: transform 200ms; }
.ar-nav__item[data-open="true"] .ar-nav__caret { transform: rotate(180deg); }

.ar-nav__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 240px;
  padding: 16px 0;
  background: var(--color-ivory-blush);
  border: 1px solid rgba(166, 135, 111, 0.25);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 200ms var(--easing), transform 200ms var(--easing);
}
.ar-nav__item[data-open="true"] .ar-nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ar-nav__menu a {
  display: block;
  padding: 8px 24px;
  font-size: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-espresso);
  text-decoration: none;
  white-space: nowrap;
}

.ar-nav__cta {
  display: inline-block;
  padding: 8px 24px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-arumi-bronze);
  background: transparent;
  font-size: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-espresso);
  text-decoration: none;
  transition: background-color var(--duration-dissolve) var(--easing),
              border-color var(--duration-dissolve) var(--easing);
}
.ar-nav__cta:hover { background: var(--color-champagne-gold); border-color: var(--color-champagne-gold); }

/* ------------------------------------------------------------- mobile menu */

/* Presence is display, deliberately. Do not swap this for a transform or
   opacity toggle without testing on a real phone: the prototypes had the panel
   parked off-screen while the scrim and the scroll lock both reported open.
   In this repo, where the markup is yours, the slide below is safe. */

.ar-nav-toggle {
  display: none;
  position: fixed;
  top: 18px;
  right: 16px;
  z-index: 102;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  background: rgba(246, 239, 233, 0.96);
  border: 1px solid rgba(166, 135, 111, 0.25);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.ar-nav-toggle span { display: block; width: 17px; height: 1px; background: var(--color-arumi-bronze); }

.ar-nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 103;
  background: rgba(46, 36, 27, 0.5);
  opacity: 0;
  transition: opacity 460ms var(--silk);
}

.ar-nav-panel {
  display: none;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 104;
  width: min(320px, 86vw);
  flex-direction: column;
  gap: var(--space-lg);
  padding: 18px 26px 32px;
  background: var(--color-ivory-blush);
  border-left: 1px solid rgba(166, 135, 111, 0.2);
  box-shadow: -22px 0 54px rgba(140, 110, 88, 0.18);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 460ms var(--silk);
}

body[data-nav-open] .ar-nav-scrim { display: block; opacity: 1; }
body[data-nav-open] .ar-nav-panel { display: flex; transform: translateX(0); }
body[data-nav-open] { overflow: hidden; }

.ar-nav-panel__head { display: flex; align-items: center; justify-content: space-between; }
.ar-nav-panel__mark {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-mocha);
  margin-right: -0.32em;
}
.ar-nav-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-bronze-text);
  cursor: pointer;
}
.ar-nav-panel__links { display: flex; flex-direction: column; }
.ar-nav-panel__links a {
  display: flex;
  align-items: center;
  min-height: 46px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-espresso);
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 135, 111, 0.16);
}
.ar-nav-panel__links a:hover { color: var(--color-deep-bronze); }
.ar-nav-panel__links a[data-sub] { padding-left: 18px; font-size: 12px; }

.ar-nav-panel__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-full);
  background: var(--color-arumi-bronze);
  color: var(--color-ivory-blush);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--duration-dissolve) var(--easing),
              color var(--duration-dissolve) var(--easing);
}
.ar-nav-panel__cta:hover { background: var(--color-champagne-gold); color: var(--color-espresso); }

.ar-nav-panel__contact { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.ar-nav-panel__contact a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 300;
  color: var(--color-mocha);
  text-decoration: none;
  word-break: break-word;
}
.ar-nav-panel__contact a:hover { color: var(--color-deep-bronze); }

/* ------------------------------------------------------------- contact rail */

.ar-rail {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ar-rail__panel {
  box-sizing: border-box;
  /* Fits beside its own tab on a 360px screen. */
  width: min(292px, calc(100vw - 76px));
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 26px;
  background: rgba(246, 239, 233, 0.97);
  border: 1px solid rgba(166, 135, 111, 0.28);
  border-radius: 8px;
  box-shadow: 0 22px 54px rgba(140, 110, 88, 0.2);
  opacity: 0;
  transform: translateX(14px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 500ms var(--silk), transform 500ms var(--silk), visibility 0s linear 500ms;
}
.ar-rail[data-open="true"] .ar-rail__panel {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 500ms var(--silk), transform 500ms var(--silk), visibility 0s;
}
.ar-rail__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-bronze-text);
}
.ar-rail__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  color: var(--color-mocha);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  transition: color var(--duration-fast) var(--easing);
}
.ar-rail__row:hover { color: var(--color-deep-bronze); }
.ar-rail__icon { flex: 0 0 auto; display: block; color: var(--color-arumi-bronze); transform: translateY(1px); }
.ar-rail__rule { display: block; height: 1px; background: rgba(166, 135, 111, 0.28); }
.ar-rail__social { display: flex; gap: 10px; }
.ar-rail__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(166, 135, 111, 0.3);
  color: var(--color-bronze-text);
  transition: color var(--duration-fast) var(--easing),
              border-color var(--duration-fast) var(--easing),
              transform var(--duration-fast) var(--easing);
}
.ar-rail__social a:hover { color: var(--color-deep-bronze); border-color: rgba(184, 154, 75, 0.55); transform: translateY(-1px); }
.ar-rail__social a:active { transform: scale(0.96); }

.ar-rail__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 9px;
  border: 1px solid rgba(166, 135, 111, 0.25);
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: rgba(246, 239, 233, 0.96);
  color: var(--color-bronze-text);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration-dissolve) var(--easing),
              color var(--duration-dissolve) var(--easing),
              border-color var(--duration-dissolve) var(--easing),
              transform var(--duration-dissolve) var(--easing),
              box-shadow var(--duration-fast) var(--easing);
}
.ar-rail__tab span { writing-mode: vertical-rl; text-orientation: mixed; }
.ar-rail__tab:hover,
.ar-rail__tab:focus-visible,
.ar-rail[data-open="true"] .ar-rail__tab {
  background: var(--color-champagne-gold);
  color: var(--color-espresso);
  border-color: var(--color-champagne-gold);
}
.ar-rail__tab:hover { transform: translateX(-2px); box-shadow: var(--shadow-md); }
.ar-rail__tab:active { transform: translateX(-1px) scale(0.98); filter: brightness(0.96); }

/* ---------------------------------------------------------- mobile book pill */

.ar-mobile-cta {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 96;
  width: max-content;
}
.ar-mobile-cta a {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  background: var(--color-arumi-bronze);
  color: var(--color-espresso);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  transition: transform 200ms var(--easing), filter 200ms var(--easing);
}
.ar-mobile-cta a:active { transform: scale(0.97); filter: brightness(0.96); }

/* --------------------------------------------------------------- breakpoints */

@media (max-width: 900px) {
  body { padding-top: 65px; }
  .ar-nav__row { height: 64px; padding: 8px 16px; }
  .ar-nav__links { display: none; }
  .ar-nav__cta { display: none; }
  .ar-nav-toggle { display: flex; top: 10px; }
  .ar-mobile-cta { display: block; }
}

@media (max-width: 720px) {
  /* Keeps the tab's touch target at 47px wide rather than 31px. */
  .ar-rail__tab { padding: 16px 15px; }
}

/* ------------------------------------------------------------------- reveals */

/* Never hide content we cannot bring back. The hidden state is gated on
   body.js-reveals, which js/chrome.js adds only once it knows it can reveal
   these again. If the script is blocked, or the browser has no
   IntersectionObserver, the class is never added and every block stays visible.
   css/ambient.css gates its line masks the same way, on body.js-lines. */
.ar-reveal { transition: opacity 800ms var(--silk), transform 800ms var(--silk); }
body.js-reveals .ar-reveal { opacity: 0; transform: translateY(24px); }
body.js-reveals .ar-reveal[data-shown="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.js-reveals .ar-reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}

/* -------------------------------------------------------------------- footer */
/* A mocha CTA band over the espresso three-column footer. Identical on all
   eight pages. */

.ar-footer { background: var(--color-espresso); color: var(--color-ivory-blush); }

.ar-footer__band { background: var(--color-mocha); text-align: center; padding: var(--space-3xl) var(--space-md); }
.ar-footer__lockup { display: block; width: 390px; max-width: 80vw; height: auto; margin: 0 auto var(--space-md); }
.ar-footer__band h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h3);
  color: var(--color-ivory-blush);
  margin: 0 0 var(--space-xs);
}
.ar-footer__band p {
  color: rgba(246, 239, 233, 0.75);
  font-size: var(--type-small);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  max-width: 520px;
  margin: 0 auto var(--space-lg);
}
.ar-footer__cta {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background: transparent;
  border: 1px solid rgba(246, 239, 233, 0.65);
  border-radius: var(--radius-full);
  color: var(--color-ivory-blush);
  font-family: var(--font-body);
  font-size: var(--type-small);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: background-color var(--duration-dissolve) var(--easing),
              border-color var(--duration-dissolve) var(--easing),
              color var(--duration-dissolve) var(--easing),
              transform var(--duration-dissolve) var(--easing);
}
.ar-footer__cta:hover {
  background: var(--color-champagne-gold);
  border-color: var(--color-champagne-gold);
  color: var(--color-espresso);
  transform: translateY(-1px);
}
.ar-footer__cta:active { transform: translateY(0) scale(0.98); filter: brightness(0.96); }

.ar-footer__cols {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg) var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-2xl);
  border-bottom: 1px solid rgba(231, 221, 209, 0.2);
}
.ar-footer__brand { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--space-md); }
.ar-footer__mark { flex: 0 0 auto; width: 39px; height: 39px; filter: brightness(0) invert(1); opacity: 0.92; display: block; }
.ar-footer__brand h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.14em;
  color: var(--color-champagne-gold);
  margin: 0;
}
.ar-footer p,
.ar-footer__cols a {
  font-size: var(--type-small);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
}
.ar-footer__cols p { color: rgba(246, 239, 233, 0.85); margin: 0 0 var(--space-xs); }
.ar-footer__cols p.ar-footer__blurb { max-width: 44ch; }
.ar-footer__cols a {
  color: rgba(246, 239, 233, 0.88);
  text-decoration: underline;
  text-decoration-color: rgba(246, 239, 233, 0.35);
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--easing), text-decoration-color var(--duration-fast) var(--easing);
}
.ar-footer__cols a:hover { color: var(--color-ivory-blush); text-decoration-color: var(--color-champagne-gold); }
.ar-footer__cols h4 {
  font-family: var(--font-body);
  font-size: var(--type-small);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-champagne-gold);
  margin: 0 0 var(--space-md);
}
.ar-footer__list { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }

.ar-footer__social { display: flex; gap: var(--space-sm); margin-top: var(--space-md); }
.ar-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(246, 239, 233, 0.35);
  border-radius: var(--radius-full);
  color: var(--color-ivory-blush);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--easing), color var(--duration-fast) var(--easing);
}
.ar-footer__social a:hover { border-color: var(--color-champagne-gold); color: var(--color-champagne-gold); }

.ar-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  font-size: var(--type-xs);
  color: rgba(246, 239, 233, 0.6);
}
/* color:inherit is load-bearing. .ar-footer__legal sets the colour for its
   children to inherit, but styles.css carries a bare `p { color: mocha }` that
   targets this element directly and beats inheritance, putting mocha on
   espresso at 1.41:1. Do not remove until that base rule is gone. */
.ar-footer__legal p { margin: 0; font-size: var(--type-xs); color: inherit; }
.ar-footer__credential { font-style: italic; color: rgba(246, 239, 233, 0.7); }
.ar-footer__legal-links { display: flex; gap: var(--space-sm); }
.ar-footer__legal-links a { font-size: var(--type-xs); color: rgba(246, 239, 233, 0.8); }
.ar-footer__legal-links a:hover { color: var(--color-ivory-blush); }