/* ============================================================
   Equine & Western Photo Guide — Editorial system
   Modern magazine, warm western neutrals, photo-forward
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* paper / surfaces */
  --paper:      #F5EFE6;
  --paper-2:    #EFE6D6;
  --paper-3:    #E7DBC6;
  --card:       #FBF7EF;

  /* ink / text */
  --ink:        #1E1A16;
  --ink-2:      #3A332B;
  --muted:      #6E6356;
  --muted-2:    #8A7E6E;

  /* brand */
  --saddle:     #7A4A2B;
  --saddle-deep:#5C3A22;
  --ochre:      #C8884E;
  --ochre-deep: #B5703C;
  --sage:       #3D4A3D;
  --sage-deep:  #2C352C;

  /* utility */
  --rule:       rgba(30,26,22,.16);
  --rule-soft:  rgba(30,26,22,.09);
  --accent:     var(--saddle);

  /* type */
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* layout */
  --wrap: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
  --radius: 4px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* faint paper grain */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0, rgba(0,0,0,0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3,h4,h5{ margin:0; font-weight:400; }
p{ margin:0; }
ul,ol{ margin:0; }

/* ---------- Type primitives ---------- */
.serif{ font-family:var(--serif); }
.display{
  font-family:var(--serif);
  font-weight:560;
  line-height:1.02;
  letter-spacing:-.015em;
  font-optical-sizing:auto;
}
.kicker{
  font-family:var(--sans);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--saddle);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.kicker::before{
  content:"";
  width:1.6em; height:1px;
  background:currentColor;
  display:inline-block;
}
.kicker.no-rule::before{ display:none; }
.eyebrow{
  font-family:var(--sans);
  font-weight:700;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.lede{
  font-family:var(--serif);
  font-weight:380;
  font-size:clamp(1.18rem, 1rem + .7vw, 1.5rem);
  line-height:1.5;
  color:var(--ink-2);
}
.lede em{ font-style:italic; color:var(--saddle); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:780px; }
.section{ padding-block:clamp(56px, 8vw, 120px); }
.section-tight{ padding-block:clamp(40px, 5vw, 72px); }
.rule-top{ border-top:1px solid var(--rule); }

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  margin-bottom:clamp(28px,4vw,52px);
}
.section-head h2{
  font-family:var(--serif);
  font-weight:540;
  font-size:clamp(1.8rem, 1.2rem + 2vw, 3rem);
  line-height:1.04;
  letter-spacing:-.015em;
  max-width:16ch;
}
.section-head .more{
  font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--saddle); white-space:nowrap; display:inline-flex; align-items:center; gap:.5em;
  border-bottom:1px solid var(--saddle); padding-bottom:3px;
  transition:gap .25s ease;
}
.section-head .more:hover{ gap:.9em; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:700; font-size:.86rem; letter-spacing:.04em;
  padding:.85em 1.5em; border-radius:100px;
  border:1px solid var(--ink);
  background:transparent; color:var(--ink); cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn-primary{ background:var(--saddle); border-color:var(--saddle); color:#fff; }
.btn-primary:hover{ background:var(--saddle-deep); border-color:var(--saddle-deep); color:#fff; }
.btn-arrow svg{ width:1em; height:1em; }

/* ---------- Photo placeholder slots ---------- */
.ph{
  position:relative;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--paper-3);
  color:var(--saddle-deep);
  border-radius:var(--radius);
  isolation:isolate;
}
.ph::before{ /* tooled / contour texture */
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%237A4A2B' stroke-width='1' opacity='0.18'%3E%3Cpath d='M0 30 Q30 10 60 30 T120 30'/%3E%3Cpath d='M0 60 Q30 40 60 60 T120 60'/%3E%3Cpath d='M0 90 Q30 70 60 90 T120 90'/%3E%3C/g%3E%3C/svg%3E");
}
.ph::after{ /* camera glyph */
  content:""; position:absolute; z-index:1; top:50%; left:50%;
  width:46px; height:46px; transform:translate(-50%,-60%);
  opacity:.34;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C3A22' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7.5h3.2l1.4-2.2h6.8l1.4 2.2H22a0 0 0 0 1 0 0v11.5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.6'/%3E%3C/svg%3E");
}
.ph .ph-cap{
  position:relative; z-index:2;
  margin:0; padding:10px 12px;
  font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--saddle-deep);
  background:linear-gradient(180deg, rgba(247,241,231,0) 0%, rgba(247,241,231,.78) 100%);
  width:100%;
}
/* tonal variants for grid liveliness */
.ph.tone-saddle{ background:#8A5A36; color:#F5EFE6; }
.ph.tone-saddle::before{ opacity:.4; }
.ph.tone-saddle::after, .ph.tone-saddle .ph-cap{ color:#F5EFE6; }
.ph.tone-saddle .ph-cap{ background:linear-gradient(180deg, rgba(30,26,22,0) 0%, rgba(30,26,22,.42) 100%); }
.ph.tone-sage{ background:#46523F; color:#EDEAD8; }
.ph.tone-sage::after, .ph.tone-sage .ph-cap{ color:#EDEAD8; }
.ph.tone-sage .ph-cap{ background:linear-gradient(180deg, rgba(20,24,18,0) 0%, rgba(20,24,18,.42) 100%); }
.ph.tone-ochre{ background:#D2945A; color:#3A2614; }
.ph.tone-ochre::after, .ph.tone-ochre .ph-cap{ color:#4A2F18; }
.ph.tone-deep{ background:#3A2A1E; color:#E7DBC6; }
.ph.tone-deep::after, .ph.tone-deep .ph-cap{ color:#E7DBC6; }
.ph.tone-deep .ph-cap{ background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%); }

/* aspect ratios */
.r-4x5{ aspect-ratio:4/5; }
.r-3x2{ aspect-ratio:3/2; }
.r-16x9{ aspect-ratio:16/9; }
.r-1x1{ aspect-ratio:1/1; }
.r-3x4{ aspect-ratio:3/4; }
.r-21x9{ aspect-ratio:21/9; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:68px;
}
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand .mark{
  width:38px; height:38px; flex-shrink:0;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--saddle); color:var(--paper);
  font-family:var(--serif); font-weight:600; font-size:1.05rem;
}
.brand .wordmark{ line-height:1; }
.brand .wordmark b{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:1.12rem; letter-spacing:-.01em; white-space:nowrap;
}
.brand .wordmark span{
  display:block; font-size:.6rem; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
  margin-top:3px;
}
.nav-links{
  display:flex; align-items:center; gap:clamp(14px,1.6vw,26px);
  list-style:none; padding:0; margin:0;
}
.nav-links a{
  font-size:.82rem; font-weight:600; letter-spacing:.01em;
  color:var(--ink-2); white-space:nowrap;
  padding:6px 0; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--saddle); transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ width:100%; }
.nav-links a[aria-current="page"]{ color:var(--saddle); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.icon-btn{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--rule); border-radius:50%; background:transparent; cursor:pointer;
  color:var(--ink); transition:background .2s ease,border-color .2s;
}
.icon-btn:hover{ background:var(--paper-2); border-color:var(--saddle); }
.icon-btn svg{ width:18px; height:18px; }
.nav-toggle{ display:none; }

/* mobile menu */
.mobile-menu{ display:none; }
@media (max-width: 1080px){
  .nav-links, .nav-right .search-desk{ display:none; }
  .nav-toggle{ display:grid; }
  .mobile-menu{
    display:block; position:fixed; inset:68px 0 0 0; z-index:49;
    background:var(--paper); padding:24px var(--gutter) 40px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    overflow-y:auto;
  }
  .mobile-menu.open{ opacity:1; transform:none; pointer-events:auto; }
  .mobile-menu ul{ list-style:none; padding:0; margin:0; }
  .mobile-menu li{ border-bottom:1px solid var(--rule); }
  .mobile-menu a{
    display:flex; align-items:baseline; gap:14px;
    padding:18px 4px; font-family:var(--serif); font-size:1.5rem; font-weight:500;
  }
  .mobile-menu a .n{ font-family:var(--sans); font-size:.7rem; font-weight:700; color:var(--ochre-deep); letter-spacing:.1em; }
}

/* ---------- Breadcrumb ---------- */
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.5em; font-size:.76rem; font-weight:600; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; }
.crumb a:hover{ color:var(--saddle); }
.crumb .sep{ opacity:.5; }
.crumb [aria-current]{ color:var(--ink); }

/* ---------- Cards ---------- */
.card{ display:flex; flex-direction:column; gap:14px; }
.card a.card-img{ display:block; }
.card .cat{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre-deep); }
.card h3{
  font-family:var(--serif); font-weight:540; line-height:1.12; letter-spacing:-.01em;
  font-size:clamp(1.15rem, 1rem + .5vw, 1.45rem);
}
.card h3 a{ background-image:linear-gradient(var(--saddle),var(--saddle)); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s ease; padding-bottom:2px; }
.card h3 a:hover{ background-size:100% 1px; color:var(--saddle); }
.card p.dek{ color:var(--muted); font-size:.92rem; line-height:1.55; }
.card .meta{ font-size:.74rem; color:var(--muted-2); font-weight:600; letter-spacing:.03em; display:flex; gap:.7em; align-items:center; flex-wrap:wrap; }
.card .meta span:not(.dot){ white-space:nowrap; }
.card .meta .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; }

.grid{ display:grid; gap:clamp(28px,3vw,44px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; } }

/* ---------- Tag chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-size:.78rem; font-weight:600; letter-spacing:.02em;
  padding:.5em 1em; border-radius:100px; border:1px solid var(--rule);
  color:var(--ink-2); background:var(--card); transition:all .2s ease; white-space:nowrap;
}
.chip:hover, .chip[aria-current="true"]{ background:var(--saddle); color:#fff; border-color:var(--saddle); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--paper-3); padding-block:clamp(54px,7vw,90px) 36px; margin-top:40px; }
.site-footer a{ color:var(--paper-3); }
.site-footer a:hover{ color:#fff; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(28px,4vw,60px); }
.footer-brand .wordmark b{ color:var(--paper); font-family:var(--serif); font-size:1.4rem; font-weight:600; }
.footer-brand p{ color:var(--muted-2); font-size:.92rem; margin-top:14px; max-width:34ch; line-height:1.6; }
.footer-col h4{ font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ochre); margin-bottom:18px; }
.footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.92rem; color:var(--paper-3); opacity:.82; }
.footer-col a:hover{ opacity:1; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid rgba(245,239,230,.16); font-size:.78rem; color:var(--muted-2); }
@media (max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------- Misc reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
  [data-reveal].in{ opacity:1; transform:none; }
}

.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:100; }
.skip-link:focus{ left:8px; top:8px; }
:focus-visible{ outline:2px solid var(--saddle); outline-offset:3px; }