/* ==========================================================
   Raw & Rooted Media — shared site stylesheet
   ========================================================== */

@font-face{
  font-family:"Hatton";
  src: url("fonts/Hatton-Medium.woff2") format("woff2"),
       url("fonts/Hatton-Medium.woff") format("woff");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Hatton";
  src: url("fonts/Hatton-MediumItalic.woff2") format("woff2"),
       url("fonts/Hatton-MediumItalic.woff") format("woff");
  font-weight:500;
  font-style:italic;
  font-display:swap;
}

:root{
  --ink:      #1C2620;
  --cream:    #F1ECDE;
  --clay:     #8B5E44;
  --moss:     #56684A;
  --stone:    #C9C2AE;
  --line:     rgba(28,38,32,0.14);

  --display: "Hatton", "Bodoni Moda", serif;
  --body:    "Archivo", sans-serif;
  --label:   "Josefin Sans", sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img, .ph{max-width:100%; display:block;}

.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
.container{max-width:1240px; margin:0 auto; padding:0 32px;}

/* ---------- Nav ---------- */
header.site{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; max-width:1240px; margin:0 auto;
}
.wordmark{
  font-family:var(--display); font-weight:600; font-style:italic;
  font-size:22px; letter-spacing:0.01em; text-decoration:none;
}
.wordmark span{color:var(--moss);}
nav.links{display:flex; gap:36px;}
nav.links a{
  font-family:var(--label); font-size:13px; letter-spacing:0.08em;
  text-transform:uppercase; text-decoration:none; color:var(--ink);
  opacity:0.7; transition:opacity .2s ease;
}
nav.links a:hover, nav.links a:focus-visible{opacity:1;}
nav.links a.current{opacity:1; border-bottom:1.5px solid var(--clay); padding-bottom:3px;}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--label); font-size:13px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--clay); margin:0 0 18px;
}
h1{
  font-family:var(--display); font-weight:500; font-size:clamp(40px,6vw,80px);
  line-height:1.03; margin:0 0 24px; max-width:16ch;
}
h1 em, h2 em{font-style:italic; font-weight:400; color:var(--moss);}
h2{
  font-family:var(--display); font-weight:500; font-size:clamp(30px,4vw,48px);
  line-height:1.1; margin:0 0 20px;
}
.lede{font-size:18px; line-height:1.65; color:color-mix(in srgb, var(--ink) 80%, transparent); max-width:52ch;}
p.body-copy{font-size:16px; line-height:1.7; color:color-mix(in srgb, var(--ink) 80%, transparent);}

/* ---------- Organic photo frames ---------- */
.ph{
  aspect-ratio:4/5;
  background: linear-gradient(155deg, var(--stone), var(--moss) 65%, var(--clay));
  position:relative;
  overflow:hidden;
}
.ph::after{
  content:attr(data-caption);
  position:absolute; left:16px; bottom:14px;
  font-family:var(--label); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:color-mix(in srgb, var(--cream) 90%, transparent);
}
.ph.leaf{ clip-path: path("M0,60 C10,10 60,0 100,10 L100,100 L20,100 C5,90 0,80 0,60 Z"); }
.ph.leaf-svg{ -webkit-clip-path:none; clip-path:none; }
.ph.round-tr{ border-radius: 4% 38% 4% 4% / 4% 46% 4% 4%; }
.ph.round-bl{ border-radius: 4% 4% 4% 38% / 4% 4% 46% 4%; }
.ph.wide{aspect-ratio:16/10;}

/* ---------- Buttons / links ---------- */
.btn{
  display:inline-block; font-family:var(--label); font-size:13px;
  letter-spacing:0.08em; text-transform:uppercase; text-decoration:none;
  background:var(--moss); color:var(--cream); padding:16px 32px;
  border-radius:2px; border:none; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.btn:hover, .btn:focus-visible{background:var(--clay); transform:translateY(-1px);}
.cta-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--label); font-size:13px; letter-spacing:0.06em;
  text-transform:uppercase; text-decoration:none; color:inherit;
  border-bottom:1px solid currentColor; width:fit-content; padding-bottom:2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--clay); outline-offset:3px;
}

/* ---------- Editorial split section ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  padding:88px 0;
}
.split.reverse .text{order:2;}
.split.reverse .media{order:1;}

/* ---------- Process rail ---------- */
.process{padding:80px 0; border-top:1px solid var(--line);}
.process-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:40px;
}
.process-step{background:var(--cream); padding:36px 30px;}
.process-step .stage{font-family:var(--label); font-size:12px; letter-spacing:0.1em; color:var(--clay);}
.process-step h3{font-family:var(--display); font-weight:500; font-size:24px; margin:10px 0 12px;}
.process-step p{font-size:14.5px; line-height:1.6; color:color-mix(in srgb, var(--ink) 75%, transparent); margin:0;}

/* ---------- Services Grid ---------- */
.services{padding:24px 0 100px;}
.grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:48px;
}
.card{
  background:var(--cream); padding:40px 32px;
  display:flex; flex-direction:column; gap:16px;
  transition:background .25s ease;
}
.card:hover, .card:focus-within{background:color-mix(in srgb, var(--moss) 8%, var(--cream));}
.card.lg{grid-column:span 4;}
.card.sm{grid-column:span 2;}
.card.half{grid-column:span 3;}
.card .num{font-family:var(--label); font-size:12px; letter-spacing:0.1em; color:var(--clay);}
.card h3{font-family:var(--display); font-weight:500; font-size:26px; line-height:1.15; margin:0;}
.card p{font-size:15px; line-height:1.6; color:color-mix(in srgb, var(--ink) 75%, transparent); margin:0; max-width:44ch;}
.card .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:8px;}
.tag{
  font-family:var(--label); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  padding:5px 10px; border:1px solid var(--line); border-radius:2px;
  color:color-mix(in srgb, var(--ink) 65%, transparent);
}
.card.feature{background:var(--ink); color:var(--cream);}
.card.feature h3{color:var(--cream);}
.card.feature p{color:color-mix(in srgb, var(--cream) 75%, transparent);}
.card.feature .num{color:var(--stone);}
.card.feature .tag{border-color:rgba(241,236,222,0.25); color:color-mix(in srgb, var(--cream) 70%, transparent);}
.card.feature:hover, .card.feature:focus-within{background:color-mix(in srgb, var(--ink) 92%, var(--moss));}

/* ---------- Booking Slots ---------- */
.booking-hero{padding:88px 0 24px;}
.slots{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin:48px 0 96px;
}
.slot{background:var(--cream); padding:32px; text-align:center;}
.slot .stage{font-family:var(--label); font-size:12px; letter-spacing:0.1em; color:var(--clay);}
.slot h3{font-family:var(--display); font-weight:500; font-size:22px; margin:10px 0 12px;}
.slot p{font-size:14px; line-height:1.6; color:color-mix(in srgb, var(--ink) 75%, transparent); margin:0 0 20px;}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; padding:88px 0 100px;}
.contact-grid form{display:flex; flex-direction:column; gap:18px; margin-top:32px;}
.contact-grid label{
  font-family:var(--label); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 70%, transparent);
}
.contact-grid input, .contact-grid textarea{
  font-family:var(--body); font-size:15px; padding:12px 14px;
  background:transparent; border:1px solid var(--line); border-radius:2px;
  color:var(--ink);
}
.contact-grid textarea{min-height:120px; resize:vertical;}
.field{display:flex; flex-direction:column; gap:8px;}
.info-block{margin-bottom:32px;}
.info-block .eyebrow{margin-bottom:8px;}

/* ---------- Reviews ---------- */
.reviews-list{display:flex; flex-direction:column; gap:20px; margin-bottom:60px;}
.review-card{background:var(--cream); border-radius:2px; padding:28px; border:1px solid var(--line);}
.review-card-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.review-card-name{font-family:var(--body); font-weight:600; font-size:1rem;}
.review-card-stars{color:var(--clay); font-size:1.1rem; letter-spacing:2px;}
.review-card-text{font-size:15px; color:color-mix(in srgb, var(--ink) 80%, transparent); line-height:1.6;}
.review-card-date{font-size:12px; color:color-mix(in srgb, var(--ink) 60%, transparent); margin-top:10px;}
.review-form-wrapper{max-width:560px;}
.review-form-wrapper h3{font-family:var(--display); font-weight:500; font-size:24px; margin-bottom:20px;}
.review-form{display:flex; flex-direction:column; gap:14px;}
.review-form input, .review-form select, .review-form textarea{
  font-family:var(--body); padding:12px 16px; border:1px solid var(--line);
  border-radius:2px; font-size:15px; outline:none;
  background:var(--cream); color:var(--ink); transition:border-color .2s;
}
.review-form input:focus, .review-form select:focus, .review-form textarea:focus{border-color:var(--clay);}
.review-form button{align-self:flex-start;}
.home-reviews .reviews-list{max-width:620px; margin:0 auto 0 0;}
.empty-reviews{color:color-mix(in srgb, var(--ink) 60%, transparent); font-style:italic;}

/* ---------- Footer ---------- */
footer{padding:28px 0; border-top:1px solid var(--line);}
footer .wrap{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--label); font-size:12px; letter-spacing:0.04em;
  color:color-mix(in srgb, var(--ink) 60%, transparent);
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .card.lg{grid-column:span 6;} .card.sm{grid-column:span 3;} .card.half{grid-column:span 6;}
}
@media (max-width:860px){
  .split{grid-template-columns:1fr; gap:32px; padding:56px 0;}
  .split.reverse .text, .split.reverse .media{order:0;}
  .process-grid{grid-template-columns:1fr;}
  .slots{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr; gap:24px; padding:56px 0;}
}
@media (max-width:600px){
  .nav{padding:16px 20px;}
  nav.links{display:none;}
  .wrap{padding:0 20px;}
  .grid{grid-template-columns:1fr;}
  .card.lg,.card.sm,.card.half{grid-column:span 1;}
}