/**
 * site.css — shared site shell (step 1: unified stylesheet layer)
 * Drawer navigation: one source of truth. Pages keep :root tokens in their own <style>.
 */

:root{
  /* Light marketing hero / underlay (see page-header-about-typography.css) */
  --header-paper:#f6f0e8;
  /* Cards, drawers, inset panels — follows page :root --warm-white when defined */
  --surface-panel:var(--warm-white,#F5EFE8);
  --paper-wash:#f3f1ed;
  /**
   * index.html wave hero — same stack as .scroll-stack::before (photo + veil).
   * Reused by rt-hero-paper-wash--wave-index and .paper-wash--wave-index.
   */
  --rt-index-hero-overlay:
    radial-gradient(120% 78% at 50% -8%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 40%, transparent 60%),
    radial-gradient(ellipse 140% 110% at 50% 48%, rgba(243,241,237,0.4) 0%, rgba(243,241,237,0.16) 46%, rgba(243,241,237,0.05) 62%, transparent 72%),
    linear-gradient(180deg,
      rgba(243,241,237,0.52) 0%,
      rgba(243,241,237,0.28) 26%,
      rgba(243,241,237,0.12) 48%,
      rgba(31,39,36,0.12) 72%,
      rgba(31,39,36,0.24) 100%);
  /**
   * Inner pages: one reading measure for long copy (paragraphs, intros, legal body).
   * Use: max-width: min(var(--rt-copy-measure), 100%);
   */
  --rt-copy-measure: 62ch;
}

/* Optional hook when markup should opt in explicitly */
.rt-copy-measure{
  max-width:min(var(--rt-copy-measure),100%);
}

/**
 * Closing band on light pages: paper-wash base + whisper-soft highlights.
 * Add class `rt-closing-bg-subtle` to `<section class="closing">` (site.css loads before page CSS; this selector beats single `.closing` from inline).
 */
section.closing.rt-closing-bg-subtle{
  background-color:var(--paper-wash,#f3f1ed);
  background-image:
    radial-gradient(ellipse 130% 58% at 50% -12%, rgba(255,255,255,0.16) 0%, transparent 48%),
    radial-gradient(ellipse 80% 48% at 92% 100%, rgba(255,255,255,0.07) 0%, transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,0.045) 0%, transparent 28%);
}

@font-face{
  font-family:'BrittanySignature';
  src:url('fonts/BrittanySignature.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* Drawer */
.drawer{position:fixed;inset:0;z-index:150;pointer-events:none}
.drawer-backdrop{position:absolute;inset:0;background:rgba(38,28,22,0);transition:background 0.4s}
.drawer-panel{position:absolute;top:0;left:0;bottom:0;width:320px;background:var(--surface-panel,#F5EFE8);transform:translateX(-100%);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;padding:7rem 2.5rem 3rem}
.drawer.open{pointer-events:all}
.drawer.open .drawer-backdrop{background:rgba(38,28,22,0.6)}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-brand{display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;align-self:flex-start;margin-bottom:3rem;position:relative;overflow:visible}
.drawer-logo{font-family:'GFS Didot',serif;font-size:2rem;font-weight:300;line-height:1.2;padding-bottom:0.14em;text-align:center;background:linear-gradient(135deg,#9ec9c2 0%,#1B9BAF 30%,#1b6174 62%,#0d4e5f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;position:relative;z-index:2;isolation:isolate;transform:translateZ(0);overflow:visible}
.drawer-logo-accent{white-space:nowrap;font-family:'BrittanySignature',cursive;font-size:1.05rem;font-weight:400;color:var(--teal-deep,#0d4e5f);letter-spacing:0.14em;margin-top:0.42rem;display:block;text-align:center;line-height:1.05;position:relative;z-index:1;background:transparent;background-color:transparent;-webkit-background-clip:border-box;background-clip:border-box}
.drawer-links{list-style:none;display:flex;flex-direction:column;flex:1}
.drawer-links li{border-bottom:1px solid rgba(38,28,22,0.1)}
.drawer-links a{display:block;padding:1.1rem 0;font-size:0.95rem;font-weight:300;color:var(--bark,#2C1A0E);text-decoration:none;letter-spacing:0.02em;transition:color 0.2s,padding-left 0.2s}
.drawer-links a:hover{color:var(--teal-deep,#0d4e5f);padding-left:0.5rem}
.drawer-tagline{margin-top:auto;padding-top:2rem;border-top:1px solid rgba(38,28,22,0.1)}
.drawer-tagline p{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:300;font-style:italic;letter-spacing:0.02em;color:var(--teal-deep,#0d4e5f)}

/**
 * Gold seam — hero bottom and section palette transitions.
 * Markup: <div class="gold-seam" aria-hidden="true"></div> (optional .gold-seam--soft).
 */
.gold-seam{
  display:block;
  width:100%;
  height:2px;
  margin:0;
  padding:0;
  border:none;
  flex-shrink:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(216,204,184,0.14) 12%,
    rgba(216,204,184,0.42) 34%,
    rgba(184,190,178,0.55) 50%,
    rgba(216,204,184,0.42) 66%,
    rgba(216,204,184,0.14) 88%,
    transparent 100%
  );
  box-shadow:
    0 0 10px rgba(184,190,178,0.22),
    0 0 18px rgba(216,204,184,0.2),
    0 1px 0 rgba(216,204,184,0.35);
}
.gold-seam.gold-seam--soft{
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(224,230,246,0.08) 10%,
    rgba(216,204,184,0.22) 30%,
    rgba(184,190,178,0.32) 50%,
    rgba(216,204,184,0.22) 70%,
    rgba(224,230,246,0.08) 90%,
    transparent 100%
  );
  box-shadow:
    0 0 12px rgba(224,230,246,0.12),
    0 0 16px rgba(184,190,178,0.12),
    0 1px 0 rgba(216,204,184,0.18);
}
/* Soft seam under paper heroes: align with main content column (intake, index bands, etc.) */
main > .gold-seam.gold-seam--soft{
  width:min(1100px, calc(100% - 10rem));
  margin-left:5rem;
  margin-right:auto;
}
@media(max-width:768px){
  main > .gold-seam.gold-seam--soft{
    width:calc(100% - 3rem);
    margin-left:1.5rem;
    margin-right:auto;
  }
}

/**
 * Paper-wash hero — only main-nav pages that opt in (about, approach, services, pricing, faq).
 * Add to section: class="page-header rt-header-about-typography rt-hero-paper-wash"
 * Wash: radials along the 135° diagonal (top-right / bottom-left) + 135° linear base.
 */
section.page-header.rt-header-about-typography.rt-hero-paper-wash:not(.rt-header-about-typography--dark),
header.page-header.rt-header-about-typography.rt-hero-paper-wash:not(.rt-header-about-typography--dark){
  background-color:#f5efe0;
  background-image:
    radial-gradient(ellipse 135% 95% at 100% 0%, rgba(184,190,178,0.32) 0%, rgba(245,239,224,0.14) 38%, transparent 58%),
    radial-gradient(ellipse 120% 100% at 0% 100%, rgba(157,201,194,0.2) 0%, rgba(216,204,184,0.18) 40%, transparent 62%),
    radial-gradient(ellipse 90% 70% at 72% 32%, rgba(255,255,255,0.1) 0%, transparent 52%),
    linear-gradient(135deg,
      rgba(184,190,178,0.52) 0%,
      rgba(245,239,224,0.96) 34%,
      rgba(216,204,184,0.7) 58%,
      rgba(184,190,178,0.48) 82%,
      rgba(170,178,159,0.2) 100%);
}

/**
 * Paper-wash hero — circular teal wash (screenshot reference).
 * Add alongside rt-hero-paper-wash: class="… rt-hero-paper-wash rt-hero-paper-wash--circle-teal"
 * Center / mid use stated transparencies as opacity (100% − transparency): #9bccd4 @ 68.5%, #59968b @ 72.5%;
 * edge is solid #1a5e71.
 */
section.page-header.rt-header-about-typography.rt-hero-paper-wash.rt-hero-paper-wash--circle-teal:not(.rt-header-about-typography--dark),
header.page-header.rt-header-about-typography.rt-hero-paper-wash.rt-hero-paper-wash--circle-teal:not(.rt-header-about-typography--dark){
  background-color:#1a5e71;
  background-image:radial-gradient(
    circle at 50% 50%,
    rgba(155,204,212,0.685) 0%,
    rgba(89,150,139,0.725) 52%,
    #1a5e71 100%
  );
}

/**
 * Paper-wash hero — index wave photo + same overlay stack as index hero (::before).
 * Add: class="… rt-hero-paper-wash rt-hero-paper-wash--wave-index"
 * Index contact band: class="closing-contact rt-hero-paper-wash--wave-index" (no rt-hero-paper-wash).
 * (Mutually exclusive with rt-hero-paper-wash--circle-teal; do not combine.)
 */
section.page-header.rt-header-about-typography.rt-hero-paper-wash.rt-hero-paper-wash--wave-index:not(.rt-header-about-typography--dark),
header.page-header.rt-header-about-typography.rt-hero-paper-wash.rt-hero-paper-wash--wave-index:not(.rt-header-about-typography--dark),
section.closing-contact.rt-hero-paper-wash--wave-index{
  background-color:#f3f1ed;
  background-image:
    var(--rt-index-hero-overlay),
    linear-gradient(rgba(243,241,237,0.28), rgba(243,241,237,0.28)),
    url("images/wave.JPG");
  background-repeat:no-repeat;
  background-size:auto, auto, auto, auto, cover;
  background-position:center, center, center, center, center 56%;
}