:root{
  --bg: #f4f1ec;
  --ink: #1f1a14;
  --muted: rgba(31,26,20,.66);
  --hair: rgba(31,26,20,.14);

  --serif: "Cormorant Garamond", ui-serif, Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --container: 1520px;
  --gutter: clamp(18px, 3vw, 44px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
}

/* ----------------------------
   HERO
---------------------------- */
.sr-hero{
  position: relative;
  min-height: 94vh;
  width: 100%;
  overflow: hidden;

  background-color: #0b0b0b;
  background-image: url("img/hero-woman-water.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 35% 14%;
}

.sr-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.14) 0%,
    rgba(0,0,0,0.06) 40%,
    rgba(0,0,0,0.00) 72%
  );
  pointer-events:none;
}

/* ----------------------------
   TOP AREA
---------------------------- */
.sr-top{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index: 10;
}

.sr-top-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 14px) var(--gutter) 0 var(--gutter);
  display:flex;
  justify-content:flex-end;
}

.sr-topstack{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* Brand */
.sr-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: var(--ink);
}

.sr-mark{
  width: 64px;
  height: 64px;
  display:block;
  object-fit:contain;
}

.sr-wordmark{
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1;
}

/* ----------------------------
   DESKTOP NAV (transparent buttons)
---------------------------- */
.sr-nav--desktop{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.sr-nav-link{
  display:inline-block;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-decoration:none;
  color: var(--ink);

  padding: 10px 14px;
  border: 1px solid rgba(31,26,20,.18);
  background: transparent;

  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  will-change: transform;
}

.sr-nav-link:hover{
  transform: translateY(-2px);
  background: rgba(244,241,236,.26);
  border-color: rgba(31,26,20,.26);
}

.sr-nav-cta{
  border-color: rgba(31,26,20,.28);
  background: rgba(31,26,20,.06);
}

/* ----------------------------
   MOBILE TOGGLE
---------------------------- */
.sr-menu-toggle{
  display:none;
  background: transparent;
  border: 0;
  padding: 6px;
  cursor:pointer;
}

.sr-burger{
  width: 30px;
  display:inline-flex;
  flex-direction: column;
  gap: 7px;
}
.sr-burger span{
  height: 2px;
  width: 100%;
  background: var(--ink);
  display:block;
}

/* ----------------------------
   MOBILE NAV (no outer box)
---------------------------- */
.sr-nav--mobile{
  display:none;
  position: fixed;
  top: calc(env(safe-area-inset-top) + 96px);
  right: 12px;
  width: min(360px, calc(100vw - 24px));
  z-index: 40;

  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

html.sr-menu-open .sr-nav--mobile{ display:block; }

.sr-nav--mobile .sr-nav-link{
  display:block;
  margin: 10px 0;
  padding: 12px 14px;

  background: rgba(244,241,236,.86);
  border: 1px solid rgba(31,26,20,.18);
  backdrop-filter: blur(8px);

  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  will-change: transform;
}

.sr-nav--mobile .sr-nav-link:hover{
  transform: translateY(-2px);
  background: rgba(244,241,236,.92);
  border-color: rgba(31,26,20,.26);
}

/* ----------------------------
   CAPTION STRIP (centered, zen)
---------------------------- */
.sr-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index: 5;

  background: rgba(244,241,236,.70);
  border-top: 1px solid rgba(31,26,20,.12);
  backdrop-filter: blur(4px);
}

.sr-caption-inner{
  width: 100%;
  padding: 14px var(--gutter);
}

.sr-caption-inner--single{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.sr-caption-line{
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  color: var(--ink);
  max-width: 42ch;
}

/* link with subtle movement */
.sr-caption-link{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration:none;

  padding-bottom: 6px;
  border-bottom: 1px solid rgba(31,26,20,.22);

  display:inline-flex;
  align-items:center;
  gap: 6px;

  opacity: .9;
  transition: transform .18s ease, border-color .18s ease, opacity .18s ease;
  will-change: transform;
}

.sr-caption-link span{
  transition: transform .18s ease;
}

.sr-caption-link:hover{
  transform: translateY(-2px);
  border-bottom-color: rgba(31,26,20,.38);
  opacity: 1;
}

.sr-caption-link:hover span{
  transform: translateX(4px);
}

/* ----------------------------
   CONTENT
---------------------------- */
.sr-container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 44px var(--gutter);
}

.sr-blocks{
  background: var(--bg);
  padding-top: 30px;
}

.sr-blocks-lede{
  margin: 0 0 18px 0;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.25;
  max-width: 70ch;
}

/* cards */
.sr-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.sr-card{
  display:block;
  text-decoration:none;
  color: var(--ink);
  border: 1px solid rgba(31,26,20,.14);
  background: rgba(31,26,20,.04);
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  will-change: transform;
}

.sr-card:hover{
  transform: translateY(-2px);
  background: rgba(31,26,20,.06);
  border-color: rgba(31,26,20,.20);
}

.sr-card-text{
  padding: 18px 18px 14px 18px;
}

.sr-card-text h3{
  margin:0 0 6px 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
}

.sr-card-text p{
  margin:0;
  font-family: var(--sans);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.sr-card-media{
  width: 100%;
  border-top: 1px solid rgba(31,26,20,.10);
}

.sr-card-media img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display:block;
}

/* ----------------------------
   RESPONSIVE
---------------------------- */
@media (max-width: 980px){
  .sr-hero{
    min-height: 86vh;
    background-position: 34% 12%;
  }

  /* Hide desktop nav; show burger */
  .sr-nav--desktop{ display:none; }
  .sr-menu-toggle{ display:inline-flex; }

  /* Mobile brand: logo above hamburger; remove wordmark */
  .sr-wordmark{ display:none; }

  .sr-topstack{
    gap: 8px;
  }

  .sr-mark{
    width: 56px;
    height: 56px;
  }

  /* cards stack */
  .sr-cards{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sr-card-media img{
    height: 210px;
  }
}
/* ----------------------------
   SCAN PAGE
---------------------------- */
.sr-page{
  background: var(--bg);
  color: var(--ink);
}

.sr-page-top{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(244,241,236,.88);
  border-bottom: 1px solid rgba(31,26,20,.10);
  backdrop-filter: blur(6px);
}

.sr-page-top-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 8px) var(--gutter) 8px var(--gutter);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}


.sr-brand--page{
  text-decoration: none;
  color: var(--ink);
}

.sr-page-back{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(31,26,20,.22);
  padding-bottom: 5px;
  opacity: .9;
  transition: transform .18s ease, opacity .18s ease, border-color .18s ease;
}

.sr-page-back:hover{
  transform: translateY(-2px);
  opacity: 1;
  border-bottom-color: rgba(31,26,20,.38);
}

.sr-page-main{
  max-width: var(--container);
  margin: 0 auto;
  padding-top: 10px; 
  
}

.sr-page-intro{
  padding: 6px 0 8px 0;
}

.sr-page-title{
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: 1.05;
}

.sr-page-sub{
  margin: 10px 0 0 0;
  font-family: var(--sans);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  max-width: 72ch;
}

/* Embed */
/* ----------------------------
   SCAN PAGE — CONTAINED
---------------------------- */
.sr-tally-wrap{
  padding-top: 4px;
  display: flex;
  justify-content: center;
}

.sr-tally{
  width: 100%;
  max-width: 880px;   /* 👈 this is the balance point */
  min-height: 86vh;
  border: 0;
  background: transparent;
}
.sr-tally{
  padding: 12px 0;
}

@media (max-width: 980px){
  /* Keep the scan header clean on mobile */
  .sr-wordmark{
    display: none;
  }
}
/* ----------------------------
   GENERIC PAGES (ABOUT etc.)
---------------------------- */

/* Make page header layout match your “logo above hamburger” rule */
.sr-page-top-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 8px) var(--gutter) 10px var(--gutter);
  display:flex;
  justify-content:flex-end;
}

.sr-page-topstack{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Nav on pages: same links, calmer spacing */
.sr-page-nav{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Page sections + typography */
.sr-page-section{
  padding: 18px 0;
}

.sr-prose{
  padding: 0 var(--gutter);
  max-width: 980px;
}

.sr-prose h2{
  margin: 0 0 10px 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.1;
}

.sr-prose p{
  margin: 0;
  font-family: var(--sans);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
  max-width: 78ch;
}

.sr-page-section--split .sr-split{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: start;
  padding: 0 var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}

.sr-panel{
  border: 1px solid rgba(31,26,20,.14);
  background: rgba(31,26,20,.04);
  padding: 16px 16px 14px 16px;
}

.sr-panel-title{
  margin: 0 0 10px 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.15;
}

.sr-list{
  margin: 0;
  padding-left: 18px;
  font-family: var(--sans);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.sr-cta-row{
  margin-top: 14px;
}

/* Responsive: split stacks, keep your mobile logo-only rule */
@media (max-width: 980px){
  .sr-page-section--split .sr-split{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sr-prose{
    padding: 0 var(--gutter);
  }

  .sr-wordmark{ display:none; }
}