/* Equestrian Wear Supplier · site.css — 全站统一层（_DESIGN-SYSTEM.md §0）
   ⛔ 单节样式不进这里：写在各节 <style>，选择器带 #section-id 前缀。 */

:root{
  /* KB1735（2026-10-28）：暖白 / 石墨灰 / 浅灰 + 蓝（仅主按钮与关键链接）。token 名沿用，取值换掉 —— 深绿 / 金色全部退场 */
  --gran:#242628; --gran-d:#17181A; --massing:#315DCE; --signal:#8FA8EE;
  --blue:#315DCE; --blue-d:#2549A6;
  --ink:#242628; --ink-2:#55585C; --paper:#F6F5F1; --frost:#E6E7E4; --white:#FFFFFF;
  --line:#D3D4CF; --on-gran:#E9EAE6;
  --ff-h:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-b:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-h1:clamp(40px,4.6vw,64px); --fs-xl:clamp(38px,3.8vw,53px); --fs-h2:clamp(30px,3vw,40px);
  --fs-h3l:28px; --fs-h3:22px; --fs-lead:20px; --fs-h4:19px; --fs-body:17px; --fs-sm:15px; --fs-xs:13px;
  --fs-q:clamp(22px,2.1vw,30px);
  --sec:72px; --cut:48px;
  --w-wide:1280px; --w-base:1120px; --w-text:760px; --gut:clamp(20px,4vw,48px);
  --lift:0 10px 28px rgba(36,38,40,.10);
}
@media (max-width:900px){ :root{ --sec:56px; --cut:32px; } }

/* reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;font-family:var(--ff-b);font-size:var(--fs-body);line-height:1.6;color:var(--ink);background:var(--paper);overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--blue)}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0}
button,input,select,textarea{font:inherit;color:inherit}

/* type */
h1,h2,h3{font-family:var(--ff-h);color:var(--gran);text-wrap:balance;hyphens:manual}
h1{font-size:var(--fs-h1);font-weight:700;line-height:1.04;letter-spacing:-.015em}
h2{font-size:var(--fs-h2);font-weight:700;line-height:1.1;letter-spacing:-.01em}
h3{font-size:var(--fs-h3);font-weight:500;line-height:1.25;color:var(--ink)}
p,li,dd{text-wrap:pretty;hyphens:auto;overflow-wrap:break-word}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2)}
.sm{font-size:var(--fs-sm);line-height:1.45}
.cap{font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2);margin-top:10px}
.num{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
strong{font-weight:600}

/* containers */
.wrap{width:100%;max-width:calc(var(--w-base) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:calc(var(--w-wide) + 2*var(--gut))}
.wrap--text{max-width:calc(var(--w-text) + 2*var(--gut))}

/* sections + backgrounds（浅底一律挂极淡同色相渐变：⛔ 纹理） */
.sec{position:relative;padding-block:var(--sec)}
.bg-paper{background-color:var(--paper);background-image:linear-gradient(180deg,#F6F5F1,#F3F2EE)}
.bg-frost{background-color:var(--frost);background-image:linear-gradient(180deg,#E6E7E4,#E2E3E0)}
.bg-white{background-color:#fff;background-image:linear-gradient(180deg,#FFFFFF,#FBFAF8)}
.bg-gran{background-color:var(--gran);color:var(--on-gran)}
.bg-gran h1,.bg-gran h2,.bg-gran h3{color:#fff}
.bg-gran a:not(.btn){color:#fff}
.bg-gran .lead{color:var(--on-gran)}
.sec-head{max-width:760px;margin-bottom:40px}
.sec-head p{margin-top:16px}

/* divider vocabulary（§1.5）：上节切自己的下沿；下节 padding-top 补 cut */
.cut{margin-bottom:calc(-1 * var(--cut));z-index:var(--z,1)}
.cut + .sec{padding-top:calc(var(--sec) + var(--cut))}
.cut-a{clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,50% calc(100% - var(--cut)),0 calc(100% - var(--cut)))}
.cut-b{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),56% calc(100% - var(--cut)),56% 100%,44% 100%,44% calc(100% - var(--cut)),0 calc(100% - var(--cut)))}
.cut-c{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%)}
.cut-d{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),66.6% calc(100% - var(--cut)),66.6% calc(100% - var(--cut) * .5),33.3% calc(100% - var(--cut) * .5),33.3% 100%,0 100%)}

/* buttons + links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:0;border-radius:0;
  background:var(--blue);color:#fff;font-family:var(--ff-b);font-weight:600;font-size:17px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .16s}
.btn:hover{background:var(--blue-d)}
.btn--brass{background:var(--blue);color:#fff}
.btn--brass:hover{background:var(--blue-d)}
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-thickness .16s}
.tlink::after{content:"→";text-decoration:none}
.tlink:hover{text-decoration-thickness:2px}
.bg-gran .tlink,.on-dark .tlink{color:#fff}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.bg-gran :focus-visible,.on-dark :focus-visible{outline-color:var(--signal)}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:3000;background:var(--ink);color:#fff;padding:10px 16px}
.skip-link:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 母题「=」（KB1735 起首页不用；om-oss 仍引用，色随 --massing 改蓝） */
.eq{display:inline-block;width:32px;height:12px;flex:none}
.eq line{stroke:var(--massing);stroke-width:3;stroke-linecap:butt}
@media (prefers-reduced-motion:no-preference){
  .eq.draw line{stroke-dasharray:28;stroke-dashoffset:28;animation:ews-eq .5s ease-out forwards}
  .eq.draw line+line{animation-delay:.12s}
  @supports (animation-timeline: view()){
    .eq.draw line{animation-delay:0s;animation-timeline:view();animation-range:entry 10% cover 40%;animation-duration:auto}
  }
}
@keyframes ews-eq{to{stroke-dashoffset:0}}

/* media */
.ph{position:relative;overflow:hidden;background:var(--frost)}
.ph>img{width:100%;height:100%;object-fit:cover}
.tag{display:inline-block;background:#fff;color:var(--ink);font-size:var(--fs-sm);font-weight:600;line-height:1.2;padding:8px 12px}

/* tables（T 语法：表头下一条线 + 行线，⛔ 竖线 / 外框） */
.tbl{width:100%;border-collapse:collapse;font-size:16px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--line)}
.tbl thead th{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);border-bottom:2px solid var(--gran)}

/* 全站进场：view() 驱动，⛔ 首屏文字；≤900px 关闭 */
@media (prefers-reduced-motion:no-preference) and (min-width:901px){
  @supports (animation-timeline: view()){
    .rise{animation:ews-rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@keyframes ews-rise{from{transform:translateY(24px)}}

/* form（#inquiry；F16 :user-invalid） */
.qform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.qform .full{grid-column:1 / -1}
.field label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:0;background:#fff;color:var(--ink)}
.field textarea{min-height:120px;resize:vertical;field-sizing:content}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.field .err{display:none;margin-top:6px;font-size:var(--fs-sm);color:#9B2C1F}
.field:has(:user-invalid) input,.field:has(:user-invalid) select,.field:has(:user-invalid) textarea{border-color:#9B2C1F}
.field:has(:user-invalid) .err{display:block}
.qform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{min-height:1.5em;font-size:16px;font-weight:600}
.form-status.ok{color:#1E6B3A}
.form-status.bad{color:#9B2C1F}
@media (max-width:600px){ .qform{grid-template-columns:1fr} }

/* topbar.js 是 fixed、不占位：桌面给容器留出 34px，菜单 sticky 才不压住首屏 */
#topbar-container{height:34px}
@media (max-width:768px){ #topbar-container{height:0} }

/* menu text logo (no image yet) */
.dm-logo-text{font-family:var(--ff-h);font-weight:700;letter-spacing:-.01em;color:var(--gran)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}