/* assets/client-review.css */

.client-review-notice{padding:10px 18px;background:#e9e3d6;color:#323c35;text-align:center;font:10px/1.65 Arial,sans-serif;letter-spacing:1px;border-bottom:1px solid #c6bdac}
.review-film{text-align:center;padding:20px;background:#eee8dc;color:#283d32;font:14px/1.7 Arial,sans-serif}.review-film img{display:block;width:100%;max-height:500px;object-fit:contain}.review-film a{color:inherit;text-decoration:underline}.review-film p{margin:14px}
@media print{.client-review-notice{font:9px Arial;color:#000;background:#fff;border-bottom:1px solid #888}}

/* assets/branding.css */
/* Goutte de Rosée identity layer. Colours and forms are drawn from the approved mark. */
:root,
body.nada {
  --brand-ink: #39291f;
  --brand-accent: #8c1734;
  --brand-paper: #fcfaf5;
  --brand-metal: #af8752;
  --brand-soft: #f0e8db;
  --brand-muted: #6b5a4c;
  --ink: var(--brand-ink);
  --dark: var(--brand-ink);
  --accent: var(--brand-accent);
  --rose: var(--brand-accent);
  --gold: var(--brand-metal);
  --paper: var(--brand-paper);
  --soft: var(--brand-soft);
  --muted: var(--brand-muted);
  --line: #e4dace;
  --white: #fffefa;
  --serif: "EB Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
}

body.nada {
  background: var(--brand-paper);
  color: var(--brand-ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
}

body.nada :is(h1, h2, h3, .item-title, .chapter-title) {
  font-family: var(--serif);
}

body.nada .site-header {
  background: var(--brand-paper);
  color: var(--brand-ink);
  border-bottom-color: var(--line);
}

a.wordmark.brand-wordmark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  width: min(320px, 60vw);
  min-height: 48px;
  line-height: 0;
  white-space: normal;
}

.brand-picture {
  display: block;
  width: 100%;
  max-width: 100%;
  line-height: 0;
}

.brand-picture img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.site-footer {
  background: var(--brand-soft);
  color: var(--brand-ink);
  border-top: 1px solid var(--line);
}

.site-footer a.wordmark.brand-wordmark {
  width: min(295px, 60vw);
}

body.nada :focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 4px;
}

body.nada .main-nav a[aria-current="page"]::after,
body.nada .main-nav a:hover::after {
  background: var(--brand-accent);
}

/* The Atlas has its own scoped palette, so map it to the same approved tokens. */
#atlas-root {
  --ink: #39291f;
  --deep: #39291f;
  --paper: #fcfaf5;
  --soft: #f0e8db;
  --line: #e4dace;
  --muted: #6b5a4c;
  --accent: #8c1734;
  --gold: #af8752;
}

@media (max-width: 1200px) {
  .header-inner {
    position: relative;
    flex-wrap: wrap;
  }

  .menu-toggle {
    display: block;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 100;
    max-height: calc(100dvh - 140px);
    overflow: auto;
    padding: 18px 6%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: var(--brand-paper);
    border-bottom: 1px solid var(--line);
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav a {
    padding: 10px 0;
    font-size: 14px;
  }
}

@media (max-width: 540px) {
  a.wordmark.brand-wordmark {
    width: min(248px, 62vw);
  }

  .site-footer a.wordmark.brand-wordmark {
    width: min(260px, 72vw);
  }

  .header-inner {
    gap: 12px;
  }
}

@media (max-width: 355px) {
  a.wordmark.brand-wordmark {
    width: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .brand-picture img {
    animation: none !important;
    transition: none !important;
  }
}

/* Luxury logo motion — October release. Exact approved artwork remains unchanged. */
@media (prefers-reduced-motion: no-preference) {
 html:not(.motion-off) .site-header .brand-wordmark { animation: goutte-logo-reveal 1000ms cubic-bezier(.2,.65,.3,1) both; }
 html:not(.motion-off) .site-header .brand-wordmark img { transition: transform 350ms ease; transform-origin: left center; }
 html:not(.motion-off) .site-header .brand-wordmark:is(:hover,:focus-visible) img { transform: scale(1.018); }
}
@keyframes goutte-logo-reveal { 0%{opacity:0;transform:translateY(7px) scale(.985)}100%{opacity:1;transform:translateY(0) scale(1)} }
html.motion-off .site-header .brand-wordmark,
html.motion-off .site-header .brand-wordmark img { animation:none!important;transition:none!important;transform:none!important; }
@media(prefers-reduced-motion:reduce){
 .site-header .brand-wordmark,.site-header .brand-wordmark img { animation:none!important;transition:none!important;transform:none!important; }
}