:root{
  --paper:#f4f2ec;
  --ink:#0c0c0c;
  --line:1.5px;
  --pad:clamp(18px,4vw,64px);
  --max:1500px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,"Helvetica Neue",Helvetica,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{color:inherit}
.wrap{width:min(calc(100% - var(--pad)*2),var(--max));margin-inline:auto}

/* Header */
.site-header{
  position:fixed;z-index:40;top:0;left:0;width:100%;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:18px var(--pad);mix-blend-mode:difference;color:white;
  pointer-events:none;
}
.brand,.menu-button,.site-nav{pointer-events:auto}
.brand{display:flex;gap:.4em;font-size:12px;font-weight:700;letter-spacing:.08em}
.menu-button{display:none;border:0;background:transparent;color:inherit;font:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;padding:0}
.site-nav{display:flex;gap:28px;font-size:12px;font-weight:700;letter-spacing:.08em}
.site-nav a{position:relative}
.site-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;transition:.25s}
.site-nav a:hover:after{right:0}

/* Glitch identity — appears briefly, then gets out of the way */
.glitch-burst{
  position:fixed;z-index:30;inset:0;
  display:grid;place-items:center;
  pointer-events:none;overflow:hidden;
  opacity:0;visibility:hidden;
  background:rgba(244,242,236,.04);
  mix-blend-mode:difference;
  contain:layout paint style;
}
.glitch-burst.is-active{visibility:visible;animation:glitchFlash .52s steps(1,end) both}
.glitch-lockup{
  width:min(92vw,1450px);
  display:grid;gap:0;
  transform:rotate(-1.2deg);
  filter:contrast(1.3);
}
.glitch-word{
  position:relative;display:block;
  color:white;
  font-size:clamp(92px,18vw,310px);
  font-weight:400;line-height:.68;letter-spacing:-.09em;
  white-space:nowrap;user-select:none;
  text-transform:none;
}
.glitch-word:nth-child(1){justify-self:start}
.glitch-word:nth-child(2){justify-self:center;margin-left:8vw}
.glitch-word:nth-child(3){justify-self:end}
.glitch-word::before,.glitch-word::after{
  content:attr(data-text);position:absolute;inset:0;
  color:white;opacity:.9;pointer-events:none;
}
.glitch-word::before{animation:glitchSliceA .13s steps(2,end) 4;clip-path:inset(6% 0 62% 0);transform:translateX(-.035em)}
.glitch-word::after{animation:glitchSliceB .11s steps(2,end) 5;clip-path:inset(63% 0 7% 0);transform:translateX(.045em)}
.glitch-burst.is-active .glitch-lockup{animation:glitchJolt .52s steps(1,end) both}
.glitch-burst.is-active .glitch-word:nth-child(2){animation:glitchWord .19s steps(2,end) 2}
@keyframes glitchFlash{
  0%{opacity:0} 5%{opacity:1} 12%{opacity:.15} 17%{opacity:1}
  31%{opacity:.82} 35%{opacity:0} 40%{opacity:1} 62%{opacity:.96}
  72%{opacity:.18} 78%{opacity:.9} 100%{opacity:0}
}
@keyframes glitchJolt{
  0%{transform:translate3d(0,0,0) rotate(-1.2deg)}
  14%{transform:translate3d(-14px,3px,0) rotate(-1.2deg)}
  28%{transform:translate3d(9px,-3px,0) rotate(-.6deg)}
  43%{transform:translate3d(-4px,1px,0) rotate(-1.8deg)}
  60%{transform:translate3d(11px,0,0) rotate(-1deg)}
  100%{transform:translate3d(0,0,0) rotate(-1.2deg)}
}
@keyframes glitchSliceA{
  0%{transform:translate(-.055em,-.01em)} 50%{transform:translate(.035em,.01em)} 100%{transform:translate(-.02em,0)}
}
@keyframes glitchSliceB{
  0%{transform:translate(.06em,.015em)} 50%{transform:translate(-.035em,-.01em)} 100%{transform:translate(.025em,0)}
}
@keyframes glitchWord{0%{transform:skewX(0)}50%{transform:skewX(-7deg) scaleX(1.025)}100%{transform:none}}

main,.site-footer{position:relative}
.hero{z-index:1}
.statement,.section,.site-footer{z-index:10}

/* Hero */
.hero{position:relative;height:min(88vh,920px);min-height:610px;overflow:hidden;background:#d5d5d5}
.hero-image{position:absolute;inset:0;background:url('assets/hero.webp') center 38%/cover no-repeat;filter:contrast(1.02)}
.hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(244,242,236,.02),rgba(244,242,236,.10))}
.hero-index{position:absolute;z-index:2;left:var(--pad);bottom:20px;font-size:9px;font-weight:700;letter-spacing:.18em}
.scroll-cue{position:absolute;z-index:2;right:var(--pad);bottom:18px;display:flex;gap:10px;align-items:center;font-size:9px;font-weight:700;letter-spacing:.18em}
.scroll-cue span{font-size:14px;animation:bob 1.7s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}

.statement{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-block:56px 46px;border-bottom:var(--line) solid var(--ink);
  background:rgba(244,242,236,.90);backdrop-filter:blur(1px);
}
.statement p{margin:0;font-family:"Times New Roman","Yu Mincho",serif;font-size:clamp(17px,1.6vw,25px);line-height:1.9;letter-spacing:.18em}
.issue-mark{font-size:10px;letter-spacing:.2em;white-space:nowrap}

/* Sections */
.section{position:relative;padding:88px 0 110px;background:rgba(244,242,236,.90)}
.section+.section{border-top:var(--line) solid var(--ink);transform:skewY(-.8deg);transform-origin:left top}
.section+.section>.wrap{transform:skewY(.8deg)}
.section-title{display:flex;justify-content:space-between;align-items:center;margin:0 4px 14px;font-size:clamp(28px,3.2vw,48px);line-height:1;font-weight:400;letter-spacing:.02em}

/* News / Accordion */
.news-frame{border:var(--line) solid var(--ink);background:rgba(244,242,236,.86)}
.news-entry{border-bottom:var(--line) solid var(--ink)}
.news-entry:last-child{border-bottom:0}
.news-summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:118px 1fr 28px;gap:18px;align-items:center;padding:21px 22px;font-family:"Times New Roman","Yu Mincho",serif;font-size:clamp(14px,1.25vw,18px);transition:background .22s,color .22s}
.news-summary::-webkit-details-marker{display:none}
.news-summary::marker{display:none}
.news-summary time{font-family:Arial,sans-serif;font-size:10px;letter-spacing:.12em}
.news-plus{font-family:Arial,sans-serif;text-align:right;font-size:19px;line-height:1;transition:transform .28s ease}
.news-entry[open] .news-plus{transform:rotate(45deg)}
.news-summary:hover,.news-entry[open]>.news-summary{background:var(--ink);color:var(--paper)}
.news-panel{display:grid;grid-template-columns:minmax(280px,.92fr) minmax(320px,1.08fr);gap:0;border-top:var(--line) solid var(--ink);background:var(--paper);animation:newsIn .34s ease both}
.news-panel.no-image{grid-template-columns:1fr}
@keyframes newsIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.news-media{min-height:360px;border-right:var(--line) solid var(--ink);overflow:hidden;background:#ebe9e2;display:flex;align-items:center;justify-content:center;padding:18px}
.news-media img{width:100%;height:auto;max-height:660px;display:block;object-fit:contain;filter:none}
.news-copy{padding:32px 34px 36px;display:flex;flex-direction:column;min-height:300px}
.news-kicker{font-size:9px;font-weight:700;letter-spacing:.18em;margin-bottom:22px}
.news-copy p{white-space:pre-line;margin:0;max-width:760px;font-family:"Times New Roman","Yu Mincho",serif;font-size:15px;line-height:1.95;letter-spacing:.055em}
.news-more{margin-top:auto;padding-top:34px;display:flex;justify-content:space-between;border-top:var(--line) solid var(--ink);font-size:10px;font-weight:700;letter-spacing:.14em}

/* Products */
.product-card{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(320px,1fr);min-height:520px;border:var(--line) solid var(--ink);margin-bottom:42px;background:rgba(244,242,236,.95)}
.product-card.is-even{grid-template-columns:minmax(320px,1fr) minmax(280px,.82fr)}
.product-card.is-even .cover{order:2}
.product-card.is-even .product-copy{order:1}
.cover{position:relative;overflow:hidden;min-height:520px;border-right:var(--line) solid var(--ink);background:#d9d9d2;isolation:isolate}
.product-card.is-even .cover{border-right:0;border-left:var(--line) solid var(--ink)}
.cover.has-image{background-position:center;background-size:contain;background-repeat:no-repeat;background-color:#ebe9e2}
.cover.has-image:before,.cover.has-image:after{display:none}
.cover.has-image .cover-kicker,.cover.has-image .cover-number,.cover.has-image .cover-lines{display:none}
.cover:before,.cover:after{content:"";position:absolute;inset:-10%;z-index:-1}
.cover:before{background:repeating-linear-gradient(118deg,transparent 0 34px,#111 35px 67px,transparent 68px 112px),repeating-linear-gradient(34deg,#eee 0 28px,#b5b5b5 29px 55px,#111 56px 60px);mix-blend-mode:multiply;filter:contrast(1.3)}
.cover:after{inset:18% -5% -15% 18%;background:radial-gradient(ellipse at 38% 38%,#eee 0 12%,#6f6f6f 13% 29%,#141414 30% 33%,transparent 34%),linear-gradient(126deg,transparent 0 48%,rgba(255,255,255,.55) 49% 58%,transparent 59%);transform:rotate(-13deg)}
.cover-kicker{position:absolute;top:20px;left:22px;font-size:10px;font-weight:700;letter-spacing:.18em;background:rgba(244,242,236,.82);padding:3px 5px}
.cover-number{position:absolute;right:-.04em;bottom:-.12em;font-size:clamp(160px,18vw,300px);line-height:1;font-weight:400;letter-spacing:-.12em}
.cover-lines{white-space:pre-line;position:absolute;left:22px;bottom:22px;z-index:2;font-family:"Times New Roman",serif;font-size:13px;line-height:1.6;letter-spacing:.08em;background:var(--paper);padding:6px 8px;border:1px solid var(--ink)}
.product-copy{display:flex;flex-direction:column;padding:38px 42px}
.product-no{font-size:10px;letter-spacing:.2em}
.product-copy h2{white-space:pre-line;margin:26px 0 22px;font-size:clamp(42px,5vw,78px);line-height:.92;font-weight:400;letter-spacing:-.055em}
.product-copy p{max-width:630px;margin:0;font-family:"Times New Roman","Yu Mincho",serif;font-size:16px;line-height:1.9;letter-spacing:.06em}
dl{display:grid;grid-template-columns:repeat(2,1fr);margin:44px 0 34px;border-top:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink)}
dl>div{display:grid;grid-template-columns:74px 1fr;gap:12px;padding:14px 0;font-size:11px}
dl>div+div{border-left:var(--line) solid var(--ink);padding-left:16px}
dt{font-weight:700;letter-spacing:.1em}dd{margin:0}
.button-link{margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:var(--line) solid var(--ink);padding-top:15px;font-size:12px;font-weight:700;letter-spacing:.12em}
.button-link span{font-size:19px;font-weight:400}

/* Links */
.link-grid{border:var(--line) solid var(--ink);display:grid;grid-template-columns:repeat(2,1fr);background:rgba(244,242,236,.9)}
.link-grid a{min-height:155px;display:flex;align-items:flex-end;justify-content:space-between;padding:24px;border-right:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink);font-size:clamp(22px,2.8vw,44px);letter-spacing:-.03em;transition:.2s}
.link-grid a:nth-child(2n){border-right:0}.link-grid a:nth-last-child(-n+2){border-bottom:0}
.link-grid a b{font-weight:400}.link-grid a:hover{background:var(--ink);color:var(--paper)}
.site-footer{display:grid;grid-template-columns:1fr 1fr auto;gap:20px;padding-block:28px 34px;font-size:9px;letter-spacing:.16em;border-top:var(--line) solid var(--ink);background:var(--paper)}

@media (max-width:800px){
  :root{--pad:18px}
  .site-header{padding-top:16px}
  .menu-button{display:block}
  .site-nav{position:absolute;top:0;right:0;flex-direction:column;gap:0;background:var(--paper);color:var(--ink);mix-blend-mode:normal;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:46px 22px 20px;min-width:180px;transform:translateY(-120%);transition:.25s ease}
  .site-header.is-open .site-nav{transform:translateY(0)}
  .site-header.is-open .menu-button{color:var(--ink);mix-blend-mode:normal;z-index:2}
  .site-nav a{padding:10px 0}
  /* MOBILE HERO TEST: show the whole key visual like a poster instead of cropping it.
     To revert, replace style.css with style.original.css. */
  .hero{height:74svh;min-height:520px;background:var(--paper)}
  .hero-image{
    inset:auto 14px;
    top:50%;
    height:auto;
    aspect-ratio:3 / 2;
    transform:translateY(-50%);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
  }
  .hero-index{bottom:14px}.scroll-cue{bottom:12px}
  .statement{align-items:flex-start;padding-block:34px 30px}.statement p{font-size:15px;line-height:1.95;letter-spacing:.13em}.issue-mark{display:none}
  .section{padding:56px 0 70px}.section-title{font-size:31px;margin-bottom:12px}
  .news-summary{grid-template-columns:1fr 26px;gap:10px;padding:17px 15px}.news-summary time{grid-column:1/3;color:#777;margin-bottom:2px}.news-plus{grid-column:2;grid-row:2}
  .news-panel,.news-panel.no-image{grid-template-columns:1fr}.news-media{min-height:240px;border-right:0;border-bottom:var(--line) solid var(--ink);padding:12px}.news-media img{max-height:none}.news-copy{padding:24px 17px 27px;min-height:260px}.news-copy p{font-size:14px;line-height:1.9}
  .product-card,.product-card.is-even{grid-template-columns:1fr;min-height:0;margin-bottom:24px}.product-card.is-even .cover,.product-card.is-even .product-copy{order:initial}.cover,.product-card.is-even .cover{min-height:390px;border:0;border-bottom:var(--line) solid var(--ink)}.cover-number{font-size:52vw}.product-copy{padding:28px 20px 24px}.product-copy h2{font-size:14vw;margin:20px 0}.product-copy p{font-size:14px;line-height:1.85}
  dl{grid-template-columns:1fr;margin:32px 0 26px}dl>div+div{border-left:0;border-top:var(--line) solid var(--ink);padding-left:0}
  .link-grid{grid-template-columns:1fr}.link-grid a,.link-grid a:nth-child(2n){min-height:105px;border-right:0;border-bottom:var(--line) solid var(--ink)}.link-grid a:last-child{border-bottom:0}.link-grid a:nth-last-child(2){border-bottom:var(--line) solid var(--ink)}
  .site-footer{grid-template-columns:1fr auto}.site-footer div:nth-child(2){display:none}
  .glitch-lockup{width:94vw;transform:rotate(-.8deg)}
  .glitch-word{font-size:clamp(74px,25vw,128px);line-height:.72}
  .glitch-word:nth-child(2){margin-left:4vw}
}

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