/* ============================================
   Ruth & Co. Media — shared stylesheet
   Tokens: Ink #131313, Yellow #F2DF06, Paper #FFFCEF, White #FFFFFF
   Type: Montserrat only (weight 200 -> 900 carries the personality)
   ============================================ */

:root{
  --ink:#131313;
  --yellow:#F2DF06;
  --paper:#FFFCEF;
  --white:#FFFFFF;
  --ink-70: rgba(19,19,19,0.7);
  --ink-55: rgba(19,19,19,0.55);
  --ink-35: rgba(19,19,19,0.35);
  --ink-15: rgba(19,19,19,0.15);
  --max: 1160px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Montserrat', sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-weight:400;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--yellow); color:var(--ink); }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 6vw; }
@media (min-width:1300px){ .wrap{ padding:0 40px; } }

h1,h2,h3{ font-weight:800; letter-spacing:-0.01em; line-height:1.05; }

/* ---------- NAV ---------- */
.site-nav{
  background:var(--ink); color:var(--paper); position:sticky; top:0; z-index:100;
  border-bottom:3px solid var(--yellow);
}
.site-nav .wrap{ display:flex; justify-content:space-between; align-items:center; height:78px; }
.nav-mark{ line-height:1.05; }
.nav-mark .l1{ font-weight:200; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; }
.nav-mark .l2{ font-weight:800; font-size:16px; letter-spacing:0.02em; text-transform:uppercase; }
.nav-links{ display:flex; align-items:center; gap:34px; font-size:14px; font-weight:600; }
.nav-links a:not(.nav-cta){ position:relative; opacity:0.85; transition:opacity 0.2s ease; padding:4px 0; }
.nav-links a:not(.nav-cta)::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--yellow);
  transition:right 0.25s ease;
}
.nav-links a:not(.nav-cta):hover{ opacity:1; }
.nav-links a:not(.nav-cta):hover::after{ right:0; }
.nav-links a.active:not(.nav-cta)::after{ right:0; }
.nav-cta{ transition:transform 0.18s ease, box-shadow 0.18s ease; }
.nav-cta:hover{ transform:translateY(-2px); box-shadow:3px 4px 0 var(--yellow); }
.nav-cta{
  background:var(--yellow); color:var(--ink); font-weight:700; font-size:14px;
  padding:10px 20px; border-radius:2px;
}
.nav-toggle{ display:none; background:none; border:none; color:var(--paper); font-size:26px; cursor:pointer; }

@media (max-width:820px){
  .nav-links{
    position:fixed; top:78px; left:0; right:0; background:var(--ink); flex-direction:column;
    align-items:flex-start; padding:20px 6vw 28px; gap:18px; border-bottom:3px solid var(--yellow);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:all 0.2s ease;
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-toggle{ display:block; }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:15px;
  padding:15px 28px; border-radius:2px; cursor:pointer; border:2px solid var(--ink);
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn-primary{ background:var(--ink); color:var(--yellow); }
.btn-outline{ background:transparent; color:var(--ink); }
.btn-yellow{ background:var(--yellow); color:var(--ink); border-color:var(--ink); }
.btn:hover{ transform:translateY(-3px); box-shadow:4px 5px 0 var(--ink); }
.btn-primary:hover{ background:var(--ink); }
.btn-yellow:hover, .btn-outline:hover{ box-shadow:4px 5px 0 var(--ink); }

/* ---------- SECTION HEAD ---------- */
.section-head{ margin-bottom:48px; }
.section-head .kicker{ font-weight:700; font-size:14px; color:var(--ink-55); margin-bottom:10px; }
.section-head h2{ font-size:clamp(2rem,4.4vw,3.1rem); }
.section-head p{ margin-top:14px; font-size:1.05rem; color:var(--ink-70); max-width:640px; }

section{ padding:88px 0; }
@media (max-width:700px){ section{ padding:56px 0; } }

.rule{ border:none; border-top:2px solid var(--ink); }
.rule-light{ border:none; border-top:1px solid var(--ink-15); }

/* ---------- FOOTER ---------- */
.site-footer{ background:var(--ink); color:var(--paper); padding:56px 0 28px; }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,252,239,0.15); }
@media (max-width:760px){ .footer-top{ grid-template-columns:1fr; gap:32px; } }
.footer-mark .l1{ font-weight:200; font-size:15px; letter-spacing:0.08em; text-transform:uppercase; }
.footer-mark .l2{ font-weight:800; font-size:19px; letter-spacing:0.02em; text-transform:uppercase; margin-top:2px; }
.footer-mark p{ margin-top:14px; font-size:14px; color:rgba(255,252,239,0.6); max-width:280px; line-height:1.6; }
.footer-col h4{ font-size:13px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--yellow); margin-bottom:14px; }
.footer-col a, .footer-col p{ display:block; font-size:14px; color:rgba(255,252,239,0.75); margin-bottom:10px; line-height:1.5; }
.footer-col a:hover{ color:var(--yellow); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:22px; font-size:12.5px; color:rgba(255,252,239,0.45); flex-wrap:wrap; gap:8px; }

/* ---------- shared photo treatment ---------- */
.photo-duo{ position:relative; overflow:hidden; }
.photo-duo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08); display:block; }
.photo-duo::after{ content:''; position:absolute; inset:0; background:var(--yellow); mix-blend-mode:multiply; opacity:0.28; }

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition-duration:0.01ms !important; }
}