/* ==========================================================================
   EKU／エク — 解构猫窝
   BRUTALISM × DECONSTRUCTIVISM × NEUE HAAS (SWISS INTERNATIONAL)
   --------------------------------------------------------------------------
   骨架 = 瑞士 12 栏网格 / 数学化留白 / 齐左不齐右 / 无衬线大字
   皮肉 = 粗野主义：露出的结构、3px 硬边、无渐变、硬投影
   裂缝 = 解构主义：错位的平面、旋转的轴线、被剪开的字
   ========================================================================== */

:root{
  --ink:#0d0d0d;
  --paper:#e6e2d6;
  --paper-2:#f3f0e7;
  --concrete:#cfcabb;
  --red:#e5361f;
  --pink:#ff3ea5;
  --rule:rgba(13,13,13,.20);
  --rule-soft:rgba(13,13,13,.10);

  --sans:"Neue Haas Grotesk Display Pro","Helvetica Neue",Helvetica,Inter,
         "PingFang SC","Hiragino Sans GB","Noto Sans SC",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;

  --bw:3px;                 /* 统一硬边 */
  --shadow:10px 10px 0 var(--ink);
  --gutter:22px;
  --maxw:1360px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  overflow-x:clip;
  color:var(--ink);
  background-color:var(--paper);
  /* 瑞士基线网格：每 96px 一条水平细分线，结构直接露出来 */
  background-image:repeating-linear-gradient(0deg,var(--rule-soft) 0 1px,transparent 1px 96px);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--red);color:var(--paper-2)}

a{color:inherit}
s{opacity:.5}

:focus-visible{outline:3px solid var(--red);outline-offset:3px}

.mono{
  font-family:var(--mono);
  font-variant-ligatures:none;
}

/* ---------------------------------------------------------------- 露出网格 */
.grid-lines{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
}
.grid-lines::before{
  content:"";position:absolute;inset:0 var(--gutter);
  background-image:linear-gradient(90deg,var(--rule) 0 1px,transparent 1px);
  background-size:calc(100% / 12) 100%;
}

/* 裁切标记（印刷味儿） */
.marks{position:fixed;inset:0;z-index:1;pointer-events:none}
.marks::before,.marks::after{
  content:"";position:absolute;width:26px;height:26px;
  border-left:3px solid var(--ink);border-top:3px solid var(--ink);
}
.marks::before{top:14px;left:14px}
.marks::after{bottom:14px;right:14px;transform:rotate(180deg)}

/* 竖排书脊 */
.spine{
  position:fixed;left:calc(50% - (var(--maxw) / 2) + 6px);top:50%;
  z-index:1;margin:0;pointer-events:none;
  writing-mode:vertical-rl;
  font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;
  opacity:.42;transform:translateY(-50%);
}

/* ------------------------------------------------------- 粗野主义跑马灯 */
.ticker{
  position:relative;z-index:2;
  background:var(--ink);color:var(--paper-2);
  border-bottom:var(--bw) solid var(--ink);
  overflow:hidden;white-space:nowrap;
}
.ticker__row{display:inline-block;padding:8px 0;animation:slide 30s linear infinite}
.ticker__row span{
  font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;padding:0 15px;
}
.ticker__row span:nth-child(5n+1){color:var(--red)}
.ticker__row span:nth-child(5n+3){color:var(--pink)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* -------------------------------------------------------------- 头部／主标题 */
.hero{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;
  padding:58px var(--gutter) 40px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);
  border-bottom:var(--bw) solid var(--ink);
}

.hero__type{grid-column:1 / 9;position:relative;z-index:0}

.kicker{
  margin:0 0 20px;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.kicker b{color:var(--red);font-size:13px;line-height:1}
.kicker span{opacity:.55}

.title{
  position:relative;z-index:0;
  margin:0;
  font-size:clamp(74px,17vw,214px);
  font-weight:800;line-height:.78;letter-spacing:-.055em;
  text-transform:uppercase;
}
/* 解构：两个错位的幽灵平面，一个是描边、一个被斜着剪开 */
.title::before,
.title::after{
  content:"EKU";position:absolute;left:0;top:0;pointer-events:none;
}
.title::before{
  z-index:-1;color:transparent;-webkit-text-stroke:2px var(--ink);
  opacity:.42;transform:translate(10px,-11px) rotate(-1.3deg);
}
.title::after{
  z-index:-2;color:var(--red);opacity:.85;
  transform:translate(-8px,9px) rotate(1deg);
  clip-path:polygon(0 0,100% 0,100% 40%,0 60%);
}
.title em{
  display:inline-block;font-style:italic;font-weight:300;
  font-size:.36em;letter-spacing:.02em;vertical-align:super;
  margin-left:.05em;line-height:1.1;
  border-bottom:9px solid var(--red);
  transform:rotate(1.4deg);
}

/* 穿过标题的红色横杆（放倒的轴线） */
.bar{
  position:absolute;left:-6%;right:-2%;top:44%;height:11px;z-index:-1;
  background:var(--red);mix-blend-mode:multiply;
  transform:rotate(-2.1deg);
}

.tagline{
  margin:26px 0 14px;
  font-size:clamp(19px,2.4vw,32px);font-weight:700;
  letter-spacing:-.02em;line-height:1.2;
}

.badge{
  display:inline-block;margin:0;
  padding:6px 12px;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  background:var(--paper-2);border:var(--bw) solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  transform:rotate(-.7deg);
}

/* 头像版画：底下一个红色错位平面 */
.plate{
  grid-column:9 / 13;align-self:start;
  position:relative;z-index:0;margin:14px 0 0;
  padding:14px;
  background:var(--paper-2);
  border:var(--bw) solid var(--ink);
  transform:rotate(-1.5deg);
}
.plate::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--red);transform:translate(14px,14px);
}
.avatar{
  display:grid;place-items:center;
  aspect-ratio:1 / 1;
  font-size:clamp(56px,6.4vw,104px);
  background:var(--concrete);
  border:var(--bw) solid var(--ink);
}
.plate figcaption{
  margin-top:12px;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.plate figcaption b{color:var(--red)}

/* ------------------------------------------------------------------- 宣言带 */
.band{
  position:relative;z-index:2;overflow:hidden;
  background:var(--ink);color:var(--paper-2);
  border-bottom:var(--bw) solid var(--ink);
  padding:36px max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
.band::after{
  content:"";position:absolute;right:-6%;top:-40%;width:32%;height:180%;
  background:var(--red);opacity:.16;transform:rotate(9deg);pointer-events:none;
}
.band__label{
  position:relative;margin:0 0 14px;font-size:10.5px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--red);
}
.band__big{
  position:relative;margin:0;
  font-size:clamp(42px,10vw,148px);font-weight:800;
  line-height:.82;letter-spacing:-.05em;text-transform:uppercase;
}
.band__big em{
  font-style:normal;color:var(--red);
  display:inline-block;transform:rotate(-4deg) translateY(-.06em);
}
.band__note{
  position:relative;margin:18px 0 0;font-size:11px;letter-spacing:.06em;opacity:.6;
}

/* ---------------------------------------------------------------- 主体网格 */
.grid{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;
  padding:54px var(--gutter) 76px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);
  align-items:start;
}

.card{
  position:relative;z-index:0;
  padding:34px 20px 22px;
  background:var(--paper-2);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow);
  transition:transform .5s cubic-bezier(.2,.9,.2,1);
}
.card--a{grid-column:1 / 6;transform:rotate(-.5deg)}
.card--b{grid-column:7 / 10;transform:translateY(36px) rotate(.7deg)}
.card--c{grid-column:10 / 13;transform:translateY(-14px) rotate(-.9deg)}

/* 暴露的标签牌 */
.tag{
  position:absolute;top:-15px;left:14px;
  padding:4px 9px;font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  background:var(--ink);color:var(--paper-2);
}
.card--b .tag{background:var(--red);color:var(--paper-2)}
.card--c .tag{background:var(--pink);color:var(--ink)}

.card h2{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 18px;padding-bottom:10px;
  border-bottom:var(--bw) solid var(--ink);
  font-size:clamp(20px,2.1vw,30px);font-weight:800;
  letter-spacing:-.02em;line-height:1.1;
}
.card h2 .en{
  margin-left:auto;font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;opacity:.5;
}

/* 列表：齐左、发丝线分隔 */
.list{list-style:none;margin:0;padding:0}
.list li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;
  padding:11px 0;font-size:15px;line-height:1.45;
  border-bottom:1px solid var(--rule);
}
.list li:last-child{border-bottom:0}
.list li b{font-size:10px;letter-spacing:.1em;color:var(--red);padding-top:4px}

.note,.hint{
  margin:14px 0 0;font-size:10.5px;letter-spacing:.06em;opacity:.55;
}

/* 计数 */
.counter{display:flex;align-items:baseline;gap:10px;margin:4px 0 18px}
.counter #count{
  font-size:clamp(58px,7vw,100px);font-weight:800;
  line-height:.84;letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
}
.counter .unit{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}

/* 按钮：硬边 + 硬阴影 + 位移反馈 */
button{
  display:inline-block;
  font-family:var(--sans);font-weight:800;font-size:15px;
  letter-spacing:.02em;text-transform:uppercase;
  padding:12px 18px;cursor:pointer;color:var(--ink);
  background:var(--pink);
  border:var(--bw) solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .06s linear,box-shadow .06s linear,background .12s linear;
}
button:hover{background:var(--red);color:var(--paper-2)}
button:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}

button.ghost{
  width:100%;margin-top:16px;padding:10px 14px;
  font-size:11px;letter-spacing:.18em;
  background:transparent;box-shadow:none;border-style:dashed;
}
button.ghost:hover{background:var(--ink);color:var(--paper-2)}
button.ghost[aria-pressed="true"]{
  background:var(--red);color:var(--paper-2);border-style:solid;
}

/* 规格表：发丝线行 */
.specs{display:grid;grid-template-columns:auto 1fr;margin:0;font-size:11px}
.specs dt,.specs dd{margin:0;padding:8px 0;border-top:1px solid var(--rule)}
.specs dt{letter-spacing:.14em;text-transform:uppercase;opacity:.55;padding-right:14px}
.specs dd{text-align:right;overflow-wrap:anywhere;border-top:1px solid var(--rule)}
.specs dd:last-of-type{border-bottom:1px solid var(--rule)}

/* 解构开关生效时：整个版面被扯开 */
body.chaos .card--a{transform:rotate(-2.4deg) translate(-8px,12px)}
body.chaos .card--b{transform:rotate(2.1deg) translateY(64px)}
body.chaos .card--c{transform:rotate(-1.9deg) translateY(-34px)}
body.chaos .plate{transform:rotate(2.8deg) translate(-6px,-10px)}
body.chaos .title{letter-spacing:-.02em}
body.chaos .bar{transform:rotate(3.6deg)}
body.chaos .band__big em{transform:rotate(6deg) translateY(.04em)}

/* ------------------------------------------------------------------- 页脚 */
.foot{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;
  padding:34px var(--gutter) 54px;
  border-top:var(--bw) solid var(--ink);
}
.foot__big{
  position:relative;margin:0 0 16px;
  font-size:clamp(48px,11vw,146px);font-weight:800;
  line-height:.8;letter-spacing:-.06em;text-transform:uppercase;
}
.foot__big .heart{
  color:var(--red);display:inline-block;
  transform:rotate(-8deg);margin-left:.04em;
}
.foot__big #year{font-size:.22em;font-weight:300;letter-spacing:.1em;margin-left:.14em}
.foot__small{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.foot__colophon{margin:0;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.45}

/* ------------------------------------------------------------------ 响应式 */
@media (max-width:1000px){
  .spine,.marks{display:none}
  .hero{grid-template-columns:1fr;padding-top:40px}
  .hero__type,.hero .plate{grid-column:1 / -1}
  .title{font-size:clamp(64px,20vw,150px)}
  .plate{max-width:340px;margin-top:30px;transform:rotate(-1deg)}
  .grid{grid-template-columns:1fr;padding-top:44px}
  .card--a,.card--b,.card--c{grid-column:1 / -1;transform:none}
  body.chaos .card--a,body.chaos .card--b,body.chaos .card--c{transform:rotate(.6deg)}
  body.chaos .plate{transform:rotate(1.4deg)}
  .bar{display:none}
}

@media (max-width:560px){
  :root{--gutter:16px;--shadow:6px 6px 0 var(--ink)}
  .ticker__row span{font-size:10px;padding:0 11px}
  .tagline{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  .ticker__row{animation:none}
  .card,.plate,.bar{transition:none}
  body.chaos .card--a,body.chaos .card--b,body.chaos .card--c,
  body.chaos .plate,body.chaos .bar{transform:none}
}