/* ==========================================================================
   riendaequestrian.com — site.css（全站统一层）
   token 与 _DESIGN-SYSTEM.md §0 一一对应；单节样式一律写在节内 <style>，⛔ 不进这里
   调性：马具房里的一本皮面产品目录 —— 明线 · 缰绳弧 · 号码牌
   ========================================================================== */

:root{
  --verde:#173C32; --marfil:#F6F2E9; --cuero:#A77546; --cuero-d:#8A5E35;
  --white:#FFFFFF; --line:#E7E0D2; --note:#8C8576; --text:#4A4A42; --ink:#173C32;
  --line-d:rgba(246,242,233,.2);
  --fh:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --fb:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  /* 字阶 模数 1.25：14/16/20/25/31/39/49/61（⛔ 不加中间档；按钮 19 为 §0 规定的 AA 大字例外） */
  --t14:.875rem; --t16:1rem; --t20:1.25rem; --t25:1.5625rem; --t31:1.9375rem; --t39:2.4375rem; --t49:3.0625rem; --t61:3.8125rem;
  --tbtn:1.1875rem;
  --sec:80px; --in:32px; --card:24px;
  --w-xl:1240px; --w-md:1040px; --w-sm:720px; --r:2px;
  --cut:56px;
  --shadow-float:0 18px 44px rgba(23,60,50,.14);
}
@media (max-width:767px){
  :root{ --sec:64px; --in:24px; --card:20px; --t61:2.4375rem; --t49:2.4375rem; --t39:1.9375rem; --cut:36px; }
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--fb);font-size:var(--t16);line-height:1.65;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--fh);font-weight:700;line-height:1.1;margin:0;color:var(--ink);text-wrap:balance}
p{margin:0}
p,li,dd,td{text-wrap:pretty}
ul,ol,dl,dd{margin:0;padding:0}
table{border-collapse:collapse;width:100%}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:3000;background:var(--cuero);color:#fff;padding:10px 16px;font-weight:600}
.skip-link:focus{left:8px}
:focus-visible{outline:2px solid var(--cuero);outline-offset:3px}
.num,[data-count]{font-variant-numeric:tabular-nums}
strong{color:var(--ink);font-weight:600}

/* 插件占位防 CLS */
#topbar-container{min-height:45px}
#dynamic-menu-container{min-height:70px}
@media (max-width:767px){#topbar-container{min-height:0}}

/* ---------- 容器与节 ---------- */
.wrap{width:100%;max-width:calc(var(--w-xl) + 48px);margin-inline:auto;padding-inline:24px}
.wrap--md{max-width:calc(var(--w-md) + 48px)}
.wrap--sm{max-width:calc(var(--w-sm) + 48px)}
.sec{padding-block:var(--sec);position:relative}
/* 浅底：同色系极淡纵向渐变（⛔ 不是纹理） */
.bg-w{background-color:var(--white);background-image:linear-gradient(180deg,#FFFFFF 0%,#FCFBF8 100%)}
.bg-m{background-color:var(--marfil);background-image:linear-gradient(180deg,#F6F2E9 0%,#F3EEE3 100%)}
.bg-d{background-color:var(--verde);color:var(--marfil)}
.bg-d h1,.bg-d h2,.bg-d h3,.bg-d strong{color:var(--marfil)}

/* 照片带：底图 + 遮罩（rgba 写在节内 style） */
.photo-band{position:relative;isolation:isolate;overflow:hidden}
.photo-band > .overlay{position:absolute;inset:0;z-index:-1}
.photo-band > .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}

/* ---------- 标题系统：节编号坐在缰绳弧上 + 号码牌 eyebrow ---------- */
.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 20px;font-family:var(--fb);font-weight:600;font-size:var(--t14);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.eb-no{position:relative;font-family:var(--fh);font-weight:700;font-size:var(--t20);letter-spacing:0;color:var(--cuero-d);padding:0 4px 6px;line-height:1}
.eb-no::after{content:"";position:absolute;left:-4px;right:-4px;bottom:0;height:7px;border-bottom:1.5px solid var(--cuero);border-radius:0 0 50% 50% / 0 0 100% 100%}
.eb-tag{position:relative;display:inline-block;border:1px solid var(--cuero);border-radius:var(--r);padding:7px 12px 5px;line-height:1.2}
.eb-tag::before,.eb-tag::after{content:"";position:absolute;top:3px;width:5px;height:5px;border:1px solid var(--cuero);border-radius:50%}
.eb-tag::before{left:6px}
.eb-tag::after{right:6px}
.bg-d .eyebrow{color:var(--marfil)}
.bg-d .eb-no{color:var(--marfil)}
.h1{font-size:var(--t61);letter-spacing:-.005em}
.h2{font-size:var(--t39);max-width:24ch}
.h2--wide{max-width:none}
.h3{font-size:var(--t25);line-height:1.15}
.h4{font-size:var(--t20);line-height:1.2}
.lead{font-size:var(--t20);line-height:1.55;color:var(--text);max-width:60ch;margin-top:20px}
.bg-d .lead{color:var(--marfil)}
.sec-head{margin-bottom:48px}
.small{font-size:var(--t14);line-height:1.55}
.big{font-family:var(--fh);font-weight:700;font-size:var(--t49);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- 按钮 / 链接 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:var(--r);font-family:var(--fb);font-weight:600;font-size:var(--tbtn);letter-spacing:.01em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .2s,color .2s}
.btn-primary{background:var(--cuero);color:#FFFFFF}
.btn-primary:hover{background:var(--cuero-d)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.bg-d .btn-ghost{border-color:var(--marfil);color:var(--marfil)}
.tlink{font-weight:600;color:var(--cuero-d);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.bg-d .tlink{color:var(--marfil)}
.arrow-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:var(--t14);color:var(--cuero-d);text-decoration:none;letter-spacing:.02em}
.arrow-link::after{content:"→";transition:transform .2s}
.arrow-link:hover::after{transform:translateX(3px)}
.bg-d .arrow-link{color:var(--marfil)}

/* ---------- 列表 ---------- */
.check-list{list-style:none;display:grid;gap:10px}
.check-list li{position:relative;padding-left:26px}
.check-list li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;border-left:2px solid var(--cuero);border-bottom:2px solid var(--cuero);transform:rotate(-45deg)}
.dash-list{list-style:none;display:grid;gap:8px}
.dash-list li{position:relative;padding-left:22px}
.dash-list li::before{content:"";position:absolute;left:0;top:.8em;width:12px;border-top:1.5px dashed var(--cuero)}

/* ---------- 卡壳 / 圆形裁切 / 明线框 ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card-body{padding:var(--card)}
.circle-crop{border-radius:50%;overflow:hidden;aspect-ratio:1/1}
.circle-crop img{width:100%;height:100%;object-fit:cover}
/* 鞍具明线 · 形 a「沿内缘走一圈」（静态版；首屏动画版用 SVG） */
.stitched{position:relative}
.stitched::after{content:"";position:absolute;inset:9px;border:1.5px dashed var(--cuero);border-radius:var(--r);pointer-events:none}
.ph{display:block;width:100%;height:100%;object-fit:cover;background:#E9E3D6}

/* ---------- 号码牌（步骤号 / 页签） ---------- */
.bib{position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--cuero);border-radius:var(--r);background:#fff;font-family:var(--fh);font-weight:700;color:var(--ink);line-height:1}
.bib::before,.bib::after{content:"";position:absolute;top:5px;width:6px;height:6px;border:1px solid var(--cuero);border-radius:50%;background:var(--marfil)}
.bib::before{left:7px}
.bib::after{right:7px}

/* ---------- 节间 divider：上节切自己的下沿，下节垫高（每形全页 ≤2 次） ----------
   A 缰绳弧（左低右高单弧）· B 皮带尖（中央圆头下凸舌）· C 号码牌缺角（下沿两角 45°） */
[class*="cut-"]{position:relative;margin-bottom:calc(-1 * var(--cut))}
.cut-a{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),90% calc(100% - var(--cut) * .988),80% calc(100% - var(--cut) * .951),70% calc(100% - var(--cut) * .891),60% calc(100% - var(--cut) * .809),50% calc(100% - var(--cut) * .707),40% calc(100% - var(--cut) * .588),30% calc(100% - var(--cut) * .454),20% calc(100% - var(--cut) * .309),10% calc(100% - var(--cut) * .156),0 100%)}
.cut-b{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(50% + 96px) calc(100% - var(--cut)),calc(50% + 52px) calc(100% - var(--cut) * .45),calc(50% + 26px) calc(100% - var(--cut) * .12),50% 100%,calc(50% - 26px) calc(100% - var(--cut) * .12),calc(50% - 52px) calc(100% - var(--cut) * .45),calc(50% - 96px) calc(100% - var(--cut)),0 calc(100% - var(--cut)))}
.cut-c{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.after-cut{padding-top:calc(var(--sec) + var(--cut))}

/* ---------- 表单 ---------- */
.field{display:grid;gap:6px}
.field label{font-size:var(--t14);font-weight:600;color:var(--ink)}
.field input,.field textarea,.field select{font:inherit;font-size:var(--t16);color:var(--ink);background:#fff;border:1px solid #CFC6B4;border-radius:var(--r);padding:12px 14px;min-height:50px;width:100%}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.field textarea{min-height:120px;resize:vertical;field-sizing:content}
.field input:user-invalid,.field textarea:user-invalid,.field select:user-invalid,.was-validated .field :invalid{border-color:#A3332A;box-shadow:0 0 0 1px #A3332A}
.field .err{display:none;font-size:var(--t14);color:#A3332A}
.field:has(:user-invalid) .err,.was-validated .field:has(:invalid) .err{display:block}
.req{color:#A3332A}
.hp-field{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:var(--t14);min-height:1.5em}
.form-status.is-error{color:#A3332A}
.form-status.is-ok{color:#1E6B45}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Cormorant 默认是旧式数字（100 会读成 IOO）→ 全站强制等高数字 */
h1,h2,h3,h4,.big,.num,.bib,.eb-no{font-variant-numeric:lining-nums}
.big,.num,.bib,.eb-no,[data-count]{font-variant-numeric:lining-nums tabular-nums}