/* ============================================================
   Cal Coast Goat Grazing and Cattle  —  v2.1
   Light-mode locked, grain restored, readability pass.
   ============================================================ */

:root{
  color-scheme: light;        /* stop browsers from auto-darkening this light design */

  --bone:        #ECE2CD;     /* the confirmed beige */
  --bone-2:      #F1E8D6;
  --bone-3:      #E2D5BA;
  --ink:         #211D16;
  --ink-soft:    rgba(33,29,22,0.82);
  --ink-faint:   rgba(33,29,22,0.58);
  --teal:        #1F8E95;
  --teal-deep:   #176A70;
  --oxblood:     #9E3B2E;
  --oxblood-deep:#7E2C21;
  --rule:        rgba(33,29,22,0.18);
  --cream:       #F6EFDD;

  --serif-display: "Playfair Display", "Lora", Georgia, "Times New Roman", serif;
  --serif-body:    "Lora", Georgia, "Times New Roman", serif;
  --mono:          "Space Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;

  --maxw: 1180px;
  --maxw-wide: 1360px;
  --gutter: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; background:var(--bone); }
body{
  margin:0; color:var(--ink);
  background-color:var(--bone);
  /* subtle film grain layered over the bone, behind all content */
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.82'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='220'%20height='220'%20filter='url(%23g)'%20opacity='0.32'/%3E%3C/svg%3E");
  background-size:220px 220px;
  background-repeat:repeat;
  font-family:var(--serif-body); font-size:18.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

/* shared utility label — heavier + darker + tighter so it reads */
.eyebrow{
  font-family:var(--mono); font-size:13.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--oxblood);
}

/* ============================================================
   HEADER  (compact, collapses on scroll)
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--bone);                                       /* solid fallback */
  background:color-mix(in srgb, var(--bone) 92%, transparent);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.site-header.scrolled{
  border-bottom-color:var(--rule);
  background:var(--bone);
  background:color-mix(in srgb, var(--bone) 97%, transparent);
}
.header-bar{
  display:flex; align-items:center; gap:16px;
  padding:14px var(--gutter);
  transition:padding .28s ease;
}
.site-header.scrolled .header-bar{ padding-top:10px; padding-bottom:10px; }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; line-height:1; flex:0 0 auto; }
.brand-mark{
  width:46px; height:46px; border-radius:3px; object-fit:cover;
  background:var(--teal-deep); flex:0 0 auto;
  box-shadow:0 1px 0 rgba(0,0,0,.12);
  transition:width .28s ease, height .28s ease;
}
.site-header.scrolled .brand-mark{ width:36px; height:36px; }
.brand-type{ display:flex; flex-direction:column; gap:2px; }
.brand-line1{
  font-family:var(--serif-display); font-weight:800; letter-spacing:.005em;
  font-size:20px; line-height:.92; color:var(--ink); white-space:nowrap;
}
.brand-line1 .goat{ color:var(--teal); }
.brand-line2{
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;
}
.header-spacer{ flex:1 1 auto; }

.req-link{
  font-family:var(--mono); font-size:13.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--oxblood); text-decoration:none;
  border-bottom:2px solid var(--oxblood); padding-bottom:3px;
  display:none; align-items:center; gap:6px; white-space:nowrap;
  transition:color .2s, border-color .2s;
}
@media (min-width:600px){ .req-link{ display:inline-flex; } }
.req-link:hover{ color:var(--oxblood-deep); border-color:var(--oxblood-deep); }
.req-link .arr{ font-size:13px; }

.header-nav{
  display:flex; gap:24px; flex-wrap:wrap;
  padding:0 var(--gutter) 14px;
  overflow:hidden; max-height:80px; opacity:1;
  transition:max-height .3s ease, opacity .25s ease, padding .3s ease;
}
.site-header.scrolled .header-nav{ max-height:0; opacity:0; padding-bottom:0; }
.header-nav a{
  font-family:var(--mono); font-size:14.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  padding-bottom:2px; border-bottom:2px solid transparent;
  transition:border-color .2s;
}
.header-nav a:hover{ border-color:var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; isolation:isolate;
  min-height:calc(100svh - 30px);
  display:flex; align-items:flex-end; overflow:hidden;
  border-left:8px solid var(--oxblood);
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(98deg, rgba(28,18,12,.82) 0%, rgba(34,22,14,.46) 42%, rgba(40,28,16,.12) 78%),
    linear-gradient(0deg, rgba(24,15,10,.74) 0%, rgba(24,15,10,.18) 46%, rgba(24,15,10,.30) 100%),
    rgba(86,52,28,.20);
}
.hero-inner{
  position:relative; z-index:1; color:var(--cream);
  padding:0 var(--gutter) clamp(44px,8vh,88px); max-width:820px;
}
.hero-eyebrow{
  font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(246,239,221,.92); margin:0 0 22px;
}
.hero-title{
  font-family:var(--serif-display); font-weight:500; font-style:italic;
  margin:0; color:var(--cream); line-height:1.02; letter-spacing:-.005em;
}
.hero-title .lead{ display:block; font-size:clamp(1.8rem,6.6vw,3.1rem); font-weight:500; color:rgba(246,239,221,.94); }
.hero-title .key{ display:block; font-size:clamp(2.8rem,11vw,5.3rem); font-weight:600; margin-top:.06em; }
.hero-sub{
  font-family:var(--serif-body); font-style:italic;
  font-size:clamp(1.16rem,2.7vw,1.36rem); line-height:1.55;
  color:rgba(246,239,221,.94); margin:26px 0 36px; max-width:36em;
}
.hero-sub .u{ text-decoration:underline; text-decoration-thickness:from-font; text-underline-offset:3px; text-decoration-color:rgba(246,239,221,.6); }

.btn-oxblood{
  display:inline-block; font-family:var(--mono); font-size:14px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  color:var(--cream); background:var(--oxblood);
  padding:18px 28px; border:1px solid var(--oxblood);
  transition:background .2s, transform .15s;
}
.btn-oxblood:hover{ background:var(--oxblood-deep); border-color:var(--oxblood-deep); }
.btn-oxblood:active{ transform:translateY(1px); }
.hero-call{
  display:block; margin-top:18px; font-family:var(--mono); font-size:13.5px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(246,239,221,.86); text-decoration:none;
}
.hero-call a{ color:var(--cream); text-decoration:none; border-bottom:1px solid rgba(246,239,221,.45); }

/* ============================================================
   SECTIONS / SERVICES
   ============================================================ */
.section{ padding:clamp(44px,6.5vh,82px) 0; }
.section-head{ margin-bottom:clamp(28px,4vh,46px); }
.section-head .eyebrow{ display:block; margin-bottom:14px; }
.section-title{
  font-family:var(--serif-display); font-weight:800;
  font-size:clamp(2.0rem,5.4vw,3.0rem); line-height:1.04; margin:0; letter-spacing:-.01em; max-width:20ch;
}
.section-title .accent{ color:var(--teal); }
.section-lead{
  font-family:var(--serif-body); font-size:clamp(1.12rem,2.2vw,1.28rem); line-height:1.6;
  color:var(--ink-soft); margin:18px 0 0; max-width:60ch;
}

.svc-list{ border-top:1px solid var(--rule); margin-top:4px; }
.svc{ padding:26px 0; border-bottom:1px solid var(--rule); }
.svc-title{
  font-family:var(--serif-display); font-weight:700;
  font-size:clamp(1.5rem,3.9vw,2.05rem); line-height:1.14; margin:0 0 10px; letter-spacing:-.005em;
}
.svc-body{ font-family:var(--serif-body); color:var(--ink-soft); font-size:1.15rem; line-height:1.6; margin:0; max-width:56ch; }
@media (min-width:860px){
  .svc{ display:grid; grid-template-columns:minmax(0,16ch) 1fr; gap:44px; align-items:baseline; }
  .svc-title{ margin-bottom:0; }
}

/* ============================================================
   FEATURE SECTIONS (photo + caption, alternating) — bigger media
   ============================================================ */
.feature{
  display:flex; flex-direction:column;
  padding:clamp(34px,5vh,62px) 0; border-top:1px solid var(--rule);
}
.feature-media{ margin-bottom:24px; }
.feature-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.feature-text{ max-width:52ch; }
.feature-eyebrow{
  font-family:var(--mono); font-size:13.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--oxblood); display:block; margin-bottom:15px;
}
.feature-title{
  font-family:var(--serif-display); font-weight:800;
  font-size:clamp(1.9rem,4.8vw,2.7rem); line-height:1.08; margin:0 0 16px; letter-spacing:-.01em;
}
.feature-title .accent{ color:var(--teal); }
.feature-body{ font-family:var(--serif-body); color:var(--ink-soft); font-size:1.2rem; line-height:1.62; margin:0; }
.feature-body + .feature-body{ margin-top:14px; }
@media (min-width:880px){
  .feature{ flex-direction:row; align-items:center; gap:clamp(34px,4vw,60px); }
  .feature-media{ flex:1 1 60%; margin-bottom:0; }
  .feature-text{ flex:1 1 40%; }
  .feature.reverse{ flex-direction:row-reverse; }
}

/* Founder */
.founder .feature-media img{ aspect-ratio:4/5; }
.pullquote{
  font-family:var(--serif-display); font-style:italic; font-weight:500;
  font-size:clamp(1.55rem,3.6vw,2.15rem); line-height:1.3; color:var(--ink);
  margin:0 0 22px; letter-spacing:-.005em;
}
.pullquote .mark{ color:var(--oxblood); }
.byline{ font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.byline strong{ color:var(--ink); }

/* Guardians */
.guardians{ padding:clamp(40px,6vh,74px) 0; border-top:1px solid var(--rule); }
.guardians-head{ margin-bottom:30px; }
.dog-grid{ display:grid; gap:34px; }
.dog-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.dog-name{ font-family:var(--serif-display); font-weight:700; font-style:italic; font-size:clamp(1.55rem,3.8vw,2.0rem); margin:18px 0 8px; line-height:1.1; }
.dog-body{ font-family:var(--serif-body); color:var(--ink-soft); font-size:1.15rem; line-height:1.6; margin:0; }
@media (min-width:760px){ .dog-grid{ grid-template-columns:1fr 1fr; gap:46px; } }

/* Casual full-width photo moments — larger */
.band{ padding:clamp(26px,4vh,50px) 0; }
.band-media{ max-width:var(--maxw-wide); margin:0 auto; padding-inline:var(--gutter); }
.band-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.band-cap{ max-width:var(--maxw); margin:18px auto 0; padding-inline:var(--gutter); }
.band-eyebrow{ font-family:var(--mono); font-size:13.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--oxblood); display:block; margin-bottom:11px; }
.band-text{ font-family:var(--serif-body); font-style:italic; font-size:clamp(1.22rem,2.6vw,1.46rem); line-height:1.45; color:var(--ink-soft); margin:0; max-width:56ch; }

/* ============================================================
   CONTACT / ASSESSMENT
   ============================================================ */
.contact{ background:var(--ink); color:var(--cream); padding:clamp(60px,9vh,116px) 0; border:0; }
.contact .eyebrow{ color:rgba(246,239,221,.78); display:block; margin-bottom:18px; }
.contact-title{ font-family:var(--serif-display); font-weight:700; font-style:italic; font-size:clamp(2.2rem,6vw,3.5rem); line-height:1.05; margin:0 0 18px; color:var(--cream); }
.contact-lead{ font-family:var(--serif-body); font-size:1.22rem; line-height:1.6; color:rgba(246,239,221,.88); max-width:48ch; margin:0 0 40px; }
.contact-actions{ display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center; }
.contact-phone{ font-family:var(--serif-display); font-style:italic; font-size:clamp(1.7rem,4vw,2.3rem); color:var(--cream); text-decoration:none; border-bottom:1px solid rgba(246,239,221,.45); }
.contact-phone:hover{ border-color:var(--cream); }
.contact-email{ font-family:var(--mono); font-size:14.5px; font-weight:700; letter-spacing:.04em; color:rgba(246,239,221,.9); text-decoration:none; border-bottom:1px solid rgba(246,239,221,.35); }
.contact-email:hover{ color:var(--cream); }
.btn-cream{ display:inline-block; font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:var(--cream); padding:18px 28px; text-decoration:none; border:1px solid var(--cream); transition:opacity .2s; }
.btn-cream:hover{ opacity:.88; }

/* ============================================================
   FOOTER — bigger logo + bigger, darker, readable text
   ============================================================ */
.site-footer{ background:var(--bone-3); padding:52px 0 46px; border-top:1px solid var(--rule); }
.footer-inner{ display:flex; flex-direction:column; gap:30px; }
.footer-brand{ display:flex; align-items:center; gap:16px; }
.footer-brand img{ width:72px; height:72px; border-radius:4px; object-fit:cover; box-shadow:0 1px 0 rgba(0,0,0,.12); }
.footer-brand-type{ font-family:var(--serif-display); font-weight:800; font-size:24px; color:var(--ink); line-height:1; }
.footer-brand-type .goat{ color:var(--teal); }
.footer-brand-type span.sub{ display:block; font-family:var(--mono); font-weight:700; font-size:10px; letter-spacing:.2em; color:var(--ink-soft); margin-top:6px; }
.footer-meta{ font-family:var(--serif-body); font-size:1.12rem; line-height:1.75; color:var(--ink); }
.footer-meta a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); }
.footer-meta a:hover{ border-color:var(--ink); }
.footer-bottom{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-top:14px; }
@media (min-width:760px){
  .footer-inner{ flex-direction:row; justify-content:space-between; align-items:flex-end; }
  .footer-meta{ text-align:right; }
}

/* accessibility */
a:focus-visible, .btn-oxblood:focus-visible, .btn-cream:focus-visible, .req-link:focus-visible{
  outline:2px solid var(--teal); outline-offset:3px; border-radius:1px;
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }

/* ---- Paper grain over the bone color (closer to the original's texture) ---- */
body{
  background-image:url("assets/grain.png");
  background-repeat:repeat;
  background-blend-mode:soft-light;
}
.site-footer{
  background-image:url("assets/grain.png");
  background-repeat:repeat;
  background-blend-mode:soft-light;
}

/* ============================================================
   FULL-BLEED SECTION BREAKS  (edge-to-edge photos)
   ============================================================ */
/* Coverage: full-bleed coastal photo with the city list overlaid */
.coverage{
  position:relative; isolation:isolate;
  min-height:clamp(540px,82vh,780px);
  display:flex; align-items:center; overflow:hidden;
  border-left:8px solid var(--oxblood);
}
.coverage-media{ position:absolute; inset:0; z-index:-2; }
.coverage-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 44%; }
.coverage-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(96deg, rgba(22,14,9,.88) 0%, rgba(26,17,11,.60) 44%, rgba(32,21,13,.18) 82%),
    linear-gradient(0deg, rgba(22,14,9,.52), rgba(22,14,9,.08));
}
.coverage-inner{
  position:relative; z-index:1; color:var(--cream); width:100%;
  max-width:var(--maxw); margin:0 auto; padding:clamp(52px,9vh,104px) var(--gutter);
}
.coverage-eyebrow{
  font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(246,239,221,.92); display:block; margin-bottom:18px;
}
.coverage-title{
  font-family:var(--serif-display); font-style:italic; font-weight:500;
  font-size:clamp(1.9rem,4.6vw,3.0rem); line-height:1.08; margin:0; max-width:20ch; color:var(--cream);
}
.coverage-list{
  list-style:none; margin:32px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; max-width:580px;
}
.coverage-list li{
  font-family:var(--serif-body); font-size:1.1rem; color:rgba(246,239,221,.94);
  padding:10px 0; border-bottom:1px solid rgba(246,239,221,.22);
}
@media (min-width:720px){
  .coverage-list{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:780px; }
}

/* Pure full-bleed photo break */
.cover-photo{ position:relative; overflow:hidden; }
.cover-photo img{ width:100%; height:clamp(420px,66vh,660px); object-fit:cover; object-position:50% 42%; display:block; }