/* =========================================================
   FORGEWERK — Precision Hand Tools
   Layout after the "editorial full-bleed panel" style:
   fixed brand block, side rail, diagonal colour splits.
   ========================================================= */

:root{
  --ink:#12151A;
  --ink-2:#1C2128;
  --paper:#EAE7E1;
  --paper-2:#D9D5CD;
  --line:rgba(18,21,26,.18);
  --brand:#C4361B;
  --brand-2:#9E280F;

  --accent:#12414F;
  --accent-2:#0B2C36;

  --brand-w:clamp(96px,8.4vw,132px);
  --rail-w:clamp(52px,4.4vw,72px);
  --bar-h:38px;

  --f-cond:"Barlow Condensed","Arial Narrow",Helvetica,sans-serif;
  --f-text:"Inter","Noto Sans TC",-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--ink);
  font-family:var(--f-text);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ---------------------------------------------------------
   TOP BAR
   --------------------------------------------------------- */
.topbar{
  position:fixed;inset:0 0 auto 0;height:var(--bar-h);z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding-left:calc(var(--brand-w) + 26px);padding-right:0;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* flex:1 1 0 (not auto) so the nowrap ticker can be clipped instead of
   shouldering the social icons off the right edge on narrow screens */
.topbar__news{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:0;overflow:hidden}
.topbar__dot{
  flex:none;width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px rgba(196,54,27,.18);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(196,54,27,0)}}
.topbar__news p{
  margin:0;font-family:var(--f-cond);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;color:#3A414A;
}
.topbar__news strong{color:var(--ink);font-weight:700}
.topbar__news em{font-style:normal;opacity:.62}

.topbar__social{display:flex;align-items:stretch;flex:none}
.topbar__label{
  display:flex;align-items:center;padding:0 14px;
  font-family:var(--f-cond);font-size:11px;letter-spacing:.22em;color:#68707A;
}
.soc{
  width:var(--bar-h);display:grid;place-items:center;color:#fff;
  font-size:12px;font-weight:700;line-height:1;
  transition:filter .2s;
}
.soc:hover{filter:brightness(1.18)}
.soc--li{background:#0A66C2}
.soc--fb{background:#1877F2}
.soc--ig{background:#111}
.soc--yt{background:#D8232A}

/* ---------------------------------------------------------
   BRAND BLOCK
   --------------------------------------------------------- */
.brand{
  position:fixed;top:0;left:clamp(14px,2.4vw,40px);z-index:80;
  width:var(--brand-w);padding:14px 12px 16px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:linear-gradient(168deg,var(--brand),var(--brand-2));
  color:#fff;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
}
.brand__eyebrow{
  font-family:var(--f-cond);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.82;margin-bottom:6px;
}
.brand__word{
  font-family:var(--f-cond);font-weight:700;
  font-size:clamp(28px,2.9vw,42px);line-height:.86;letter-spacing:.01em;
}
.brand__rule{width:70%;height:2px;background:rgba(255,255,255,.5);margin:10px 0}
.brand__sub{
  font-family:var(--f-cond);font-size:10px;line-height:1.35;
  letter-spacing:.2em;opacity:.94;
}
.brand__badges{display:flex;gap:4px;margin-top:12px}
.brand__badges b{
  font-family:var(--f-cond);font-size:8px;letter-spacing:.08em;
  padding:3px 4px;border:1px solid rgba(255,255,255,.55);line-height:1;
  display:flex;align-items:center;gap:2px;
}
.brand__badges i{font-style:normal;font-size:7px;opacity:.8}

/* ---------------------------------------------------------
   SIDE RAIL
   --------------------------------------------------------- */
.rail{
  position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:70;
  width:var(--rail-w);
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.rail__label{
  writing-mode:vertical-rl;
  font-family:var(--f-cond);font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;
}
.rail__btn{width:40px;height:40px;transition:transform .3s}
.rail__btn:hover{transform:rotate(90deg)}
.rail__btn svg{width:100%;height:100%}

/* ---------------------------------------------------------
   DOTS
   --------------------------------------------------------- */
.dots{
  position:fixed;left:clamp(14px,2.4vw,40px);bottom:64px;z-index:70;
  display:flex;gap:9px;width:var(--brand-w);justify-content:center;
}
.dots__d{
  width:9px;height:9px;border-radius:50%;
  border:1.5px solid currentColor;transition:background .25s,transform .25s;
}
.dots__d.is-active{background:currentColor;transform:scale(1.25)}

/* ---------------------------------------------------------
   BOTTOM BAR
   --------------------------------------------------------- */
.botbar{
  position:fixed;inset:auto 0 0 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,2.4vw,34px) 16px;
  font-family:var(--f-cond);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;pointer-events:none;
}
.botbar__made,.botbar__legal{pointer-events:auto}
.botbar__legal{letter-spacing:.24em}

/* ---------------------------------------------------------
   DECK / PANELS
   --------------------------------------------------------- */
.deck{
  height:100vh;
  height:100dvh;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.deck::-webkit-scrollbar{display:none}

.panel{
  position:relative;
  height:100vh;
  height:100dvh;
  scroll-snap-align:start;
  overflow:hidden;
  display:grid;
}
.panel__bg{position:absolute;inset:0;z-index:0}
.panel__bg--steel{
  background:
    radial-gradient(120% 90% at 62% 28%,#FDFDFD 0%,#E4E7EA 42%,#B9C1CA 100%);
}
.panel__bg--paper{background:var(--paper)}
/* the workshop shot is a real shop floor, so it is pushed right down to a
   grey texture — no competitor packaging or price tags should be legible */
.panel__bg--photo{
  background:#0C0F13 url("../img/workshop.jpg") center/cover no-repeat;
  filter:grayscale(1) brightness(.38) contrast(1.05) blur(4px);
  transform:scale(1.04); /* hide the blur's soft edge */
}
.panel__bg--photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,13,17,.9) 24%,rgba(10,13,17,.6) 64%,rgba(10,13,17,.84));
}

/* theming per panel */
.panel[data-theme="light"]{color:var(--ink)}
.panel[data-theme="dark"]{color:#fff}

/* The rail, dots and bottom bar are fixed, so they sit outside any panel and
   cannot inherit its colour. JS mirrors the visible panel's tone onto <body>:
   data-right drives the rail (right edge), data-left the dots and footer. */
body[data-right="dark"] .rail{color:#fff}
body[data-right="light"] .rail{color:var(--ink)}
body[data-left="dark"] .dots,
body[data-left="dark"] .botbar__made{color:#fff}
body[data-left="light"] .dots,
body[data-left="light"] .botbar__made{color:var(--ink)}
body[data-right="dark"] .botbar__legal{color:#fff}
body[data-right="light"] .botbar__legal{color:var(--ink)}

/* the diagonal colour wedge */
.panel__wedge{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(155deg,var(--accent),var(--accent-2));
  /* the copy column starts at ~55% — the wedge's rightmost point (its top
     edge) stays left of that, so body text never lands on the pale side */
  clip-path:polygon(20% 100%, 50% 0, 100% 0, 100% 100%);
}
.panel--flip .panel__wedge{
  clip-path:polygon(0 0, 50% 0, 80% 100%, 0 100%);
}

/* =========================================================
   HERO
   ========================================================= */
.panel--hero{
  grid-template-columns:var(--brand-w) 1fr;
  grid-template-rows:1fr auto;
  padding:calc(var(--bar-h) + 8px) var(--rail-w) 44px clamp(14px,2.4vw,40px);
  align-items:center;
}

.stage{
  grid-column:2;grid-row:1;
  position:relative;z-index:2;
  display:grid;place-items:center;
  height:100%;padding-left:clamp(30px,7vw,132px);
}
.stage__hero{
  max-height:min(56vh,486px);max-width:88%;width:auto;
  transform:rotate(-6deg);
  filter:drop-shadow(0 34px 46px rgba(20,30,45,.34));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{50%{transform:rotate(-6deg) translateY(-16px)}}

/* images are pre-cut transparent PNGs — no blend trickery needed */

.arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:1px solid currentColor;border-radius:50%;
  display:grid;place-items:center;opacity:.55;transition:opacity .2s,background .2s;
}
.arrow:hover{opacity:1;background:rgba(255,255,255,.5)}
.arrow::before{
  content:"";width:9px;height:9px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
}
.arrow--prev{left:7%}
.arrow--prev::before{transform:rotate(-135deg);margin-left:3px}
.arrow--next{right:2%}
.arrow--next::before{transform:rotate(45deg);margin-right:3px}

.lead{
  grid-column:1;grid-row:1;z-index:3;
  width:clamp(230px,23vw,308px);
  align-self:center;
  padding-top:clamp(10px,7vh,72px);
}
.lead__kicker{
  margin:0 0 8px;font-family:var(--f-cond);font-size:11px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--brand);
}
.lead__title{
  margin:0 0 26px;font-family:var(--f-cond);font-weight:700;
  font-size:clamp(40px,4.6vw,66px);line-height:.86;letter-spacing:-.005em;
}

.cta__label{
  display:block;font-family:var(--f-cond);font-size:11px;
  letter-spacing:.26em;text-transform:uppercase;margin-bottom:7px;color:#4B535D;
}
.cta__form{display:flex;border:1px solid var(--ink);background:rgba(255,255,255,.5)}
.cta__form input{
  flex:1;min-width:0;border:0;background:none;outline:0;
  padding:11px 12px;font-family:var(--f-cond);font-size:13px;letter-spacing:.14em;
}
.cta__form input::placeholder{color:#7A828C}
.cta__form input:focus{background:rgba(255,255,255,.9)}
.cta__form button{
  width:44px;background:var(--ink);color:#fff;font-size:16px;
  transition:background .2s;
}
.cta__form button:hover{background:var(--brand)}
.cta__msg{
  margin:7px 0 0;min-height:15px;font-family:var(--f-cond);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);
}

.spec{
  list-style:none;margin:22px 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--ink);
}
.spec li{
  padding:7px 4px 8px;text-align:center;
  border-right:1px solid var(--line);
}
.spec li:last-child{border-right:0}
.spec__k{
  display:block;font-family:var(--f-cond);font-size:9px;
  letter-spacing:.2em;color:#69717B;margin-bottom:2px;
}
.spec__v{
  display:block;font-family:var(--f-cond);font-weight:700;
  font-size:clamp(20px,2vw,27px);line-height:1;font-variant-numeric:tabular-nums;
}

.film{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 15px;background:var(--ink);color:#fff;
  font-family:var(--f-cond);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;transition:background .22s;
}
.film:hover{background:var(--brand)}
.film__play{
  flex:none;width:26px;height:26px;border:1px solid rgba(255,255,255,.6);
  border-radius:50%;display:grid;place-items:center;
}
.film__play::before{
  content:"";border-left:7px solid #fff;
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
  margin-left:2px;
}

.cats{
  grid-column:2;grid-row:2;z-index:3;
  list-style:none;margin:0;padding:0 0 4px;
  display:flex;justify-content:center;gap:clamp(10px,2.2vw,28px);
}
.cat{
  width:46px;height:46px;border:1px solid currentColor;border-radius:50%;
  display:grid;place-items:center;opacity:.42;
  transition:opacity .22s,background .22s,color .22s,transform .22s;
}
.cat svg{width:24px;height:24px}
.cat:hover,.cat.is-active{opacity:1;background:var(--ink);color:#fff;transform:translateY(-3px)}

/* =========================================================
   SPLIT PANELS
   ========================================================= */
.panel--split{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  padding:calc(var(--bar-h) + 20px) var(--rail-w) 56px calc(var(--brand-w) + clamp(28px,4vw,64px));
  gap:clamp(20px,3vw,54px);
}
/* the flipped panel swaps column order only — it keeps the same left
   padding, otherwise the copy slides under the fixed brand block */
.panel--flip{padding-right:clamp(20px,3vw,48px)}
.panel--flip .shot{order:2}
.panel--flip .copy{order:1}

.shot{
  position:relative;z-index:2;margin:0;
  display:grid;place-items:center;height:100%;
}
.shot img{
  max-height:min(58vh,470px);width:auto;
  transform:rotate(-4deg);
  filter:drop-shadow(0 26px 34px rgba(12,18,26,.42));
}
.panel--flip .shot img{transform:rotate(4deg)}
.shot__tag{
  position:absolute;left:4%;bottom:12%;
  display:flex;align-items:baseline;gap:6px;
  padding:7px 12px;background:var(--brand);color:#fff;
  font-family:var(--f-cond);letter-spacing:.14em;
}
.shot__tag span{font-size:9px;opacity:.8}
.shot__tag b{font-size:19px;font-weight:700}

.copy{position:relative;z-index:2;max-width:44ch;padding-right:clamp(0px,2vw,28px)}
.copy__num{
  margin:0 0 10px;font-family:var(--f-cond);font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;opacity:.72;
}
.copy__title{
  margin:0 0 18px;font-family:var(--f-cond);font-weight:700;
  font-size:clamp(34px,4vw,60px);line-height:.88;
}
.copy__lede{
  margin:0 0 14px;font-size:clamp(14px,1.05vw,16px);line-height:1.55;
  font-weight:500;
}
.copy__body{
  margin:0 0 22px;font-size:clamp(13px,.92vw,14.5px);line-height:1.68;
  opacity:.76;
}

.facts{
  display:grid;grid-template-columns:repeat(3,auto);gap:0 clamp(18px,2.4vw,40px);
  margin:0 0 22px;padding:14px 0;
  border-top:1px solid rgba(255,255,255,.24);
  border-bottom:1px solid rgba(255,255,255,.24);
  justify-content:start;
}
.facts dt{
  font-family:var(--f-cond);font-size:9.5px;letter-spacing:.2em;
  opacity:.6;margin-bottom:3px;
}
.facts dd{margin:0;font-family:var(--f-cond);font-size:17px;font-weight:600;white-space:nowrap}

.links{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.links a{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-cond);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:4px;
  transition:border-color .2s,gap .2s;
}
.links a::before{content:"→";opacity:.7}
.links a:hover{border-color:currentColor;gap:14px}

/* =========================================================
   CATALOGUE PANEL
   ========================================================= */
.panel--wide{
  align-content:center;
  grid-template-columns:minmax(0,1fr);
  padding:calc(var(--bar-h) + 24px) var(--rail-w) 60px calc(var(--brand-w) + clamp(28px,4vw,64px));
}
.wide{position:relative;z-index:2;max-width:1080px;min-width:0}
.wide__kicker{
  margin:0 0 10px;font-family:var(--f-cond);font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;color:#E0663F;
}
.wide__title{
  margin:0 0 16px;font-family:var(--f-cond);font-weight:700;
  font-size:clamp(38px,5vw,76px);line-height:.86;
}
.wide__lede{
  margin:0 0 clamp(22px,3vh,40px);max-width:52ch;
  font-size:clamp(13.5px,1vw,15.5px);line-height:1.6;opacity:.82;
}

.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:clamp(12px,1.4vw,20px);max-width:920px;
}
.card{
  padding:20px 18px 22px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
  display:flex;flex-direction:column;
  transition:background .25s,border-color .25s,transform .25s;
}
.card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);transform:translateY(-4px)}
.card__eyebrow{
  margin:0 0 8px;font-family:var(--f-cond);font-size:9.5px;
  letter-spacing:.24em;text-transform:uppercase;color:#E0663F;
}
.card__title{
  margin:0 0 10px;font-family:var(--f-cond);font-weight:700;
  font-size:clamp(19px,1.7vw,25px);line-height:1;
}
.card__body{margin:0 0 18px;font-size:13px;line-height:1.6;opacity:.74;flex:1}
.card__cta{
  align-self:flex-start;padding:9px 15px;background:var(--brand);
  font-family:var(--f-cond);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;transition:background .2s;
}
.card__cta:hover{background:#fff;color:var(--ink)}

/* =========================================================
   MENU OVERLAY
   ========================================================= */
.menu{
  position:fixed;inset:0;z-index:120;
  background:linear-gradient(150deg,#14181E,#0A0D11);
  color:#fff;
  display:grid;align-content:center;
  padding:0 clamp(28px,9vw,140px);
  animation:fade .3s ease;
}
@keyframes fade{from{opacity:0}}
.menu__close{
  position:absolute;top:22px;right:clamp(22px,4vw,54px);
  font-size:38px;line-height:1;opacity:.7;transition:opacity .2s,transform .2s;
}
.menu__close:hover{opacity:1;transform:rotate(90deg)}
.menu__list{display:grid;gap:2px}
.menu__list a{
  display:flex;align-items:baseline;gap:clamp(16px,3vw,44px);
  font-family:var(--f-cond);font-weight:700;
  font-size:clamp(34px,6.4vw,86px);line-height:1.02;
  opacity:.52;transition:opacity .2s,padding-left .25s,color .2s;
}
.menu__list a span{
  font-size:clamp(11px,1vw,14px);font-weight:500;letter-spacing:.2em;opacity:.6;
}
.menu__list a:hover{opacity:1;padding-left:16px;color:#E0663F}
.menu__meta{
  display:flex;flex-wrap:wrap;gap:clamp(24px,6vw,90px);
  margin-top:clamp(28px,5vh,56px);
  font-family:var(--f-cond);font-size:12px;letter-spacing:.14em;opacity:.55;
}
.menu__meta p{margin:0 0 4px}
.menu__legal{
  font:inherit;letter-spacing:inherit;color:#E0663F;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}

/* =========================================================
   LEGAL
   ========================================================= */
.legal{
  position:fixed;right:clamp(16px,2.4vw,34px);bottom:46px;z-index:110;
  width:min(400px,calc(100vw - 40px));padding:16px 18px;
  background:#fff;color:var(--ink);
  border-left:3px solid var(--brand);
  box-shadow:0 22px 50px rgba(0,0,0,.34);
  animation:rise .25s ease;
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.legal p{margin:0 0 9px;font-size:12px;line-height:1.6}
.legal p:last-child{margin:0}
.legal a{text-decoration:underline;color:var(--brand)}

/* =========================================================
   REVEAL
   ========================================================= */
.copy,.wide,.lead,.cats{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.panel.is-seen .copy,
.panel.is-seen .wide,
.panel.is-seen .lead,
.panel.is-seen .cats{opacity:1;transform:none}
.panel.is-seen .cats{transition-delay:.14s}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  .copy,.wide,.lead,.cats{opacity:1;transform:none}
  .deck{scroll-behavior:auto}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .lead{width:clamp(210px,26vw,270px)}
  .facts{grid-template-columns:repeat(2,auto);gap:12px 26px}
}

@media (max-width:860px){
  :root{--brand-w:82px;--rail-w:0px}
  body{overflow:auto}

  /* the rail becomes a floating menu button — it is the only way into
     navigation once the side rail and footer are gone */
  .rail{
    top:auto;bottom:18px;right:18px;transform:none;
    width:auto;gap:0;
  }
  .rail__label{display:none}
  .rail__btn{
    width:50px;height:50px;padding:9px;border-radius:50%;
    background:var(--ink);color:#fff;
    box-shadow:0 8px 22px rgba(0,0,0,.34);
  }
  .deck{height:auto;overflow:visible;scroll-snap-type:none}
  /* top padding clears the brand block, bottom padding clears the dots pill */
  .panel{height:auto;min-height:100vh;min-height:100svh;padding:126px 20px 88px !important}

  .topbar{padding-left:calc(var(--brand-w) + 90px)}
  .topbar__news p{font-size:10.5px}
  /* the brand block shrinks to a badge so it needs less vertical clearance */
  .brand{left:10px;padding:10px 8px 12px}
  .brand__word{font-size:24px}
  .brand__eyebrow,.brand__sub,.brand__badges,.brand__rule{display:none}

  /* a fixed footer would sit on top of scrolling content — the same links
     live in the menu overlay on small screens */
  .botbar{display:none}

  .panel--hero,
  .panel--split,
  .panel--flip{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    gap:26px;
  }
  .panel--hero{align-content:center}
  .stage{grid-column:1;grid-row:1;padding:0}
  .stage__hero{max-height:32vh;max-width:100%}
  .arrow{display:none}
  .lead{grid-column:1;grid-row:2;width:100%;max-width:420px;margin:0 auto;padding-top:0}
  .cats{grid-column:1;grid-row:3;flex-wrap:wrap}
  .cat{width:40px;height:40px}

  .panel--split .shot,
  .panel--flip .shot{order:1;height:auto}
  .panel--split .copy,
  .panel--flip .copy{order:2;max-width:100%;padding:0}
  .shot img{max-height:28vh}
  .shot__tag{left:2%;bottom:2%}

  .panel__wedge{clip-path:polygon(0 30%,100% 12%,100% 100%,0 100%) !important}

  /* the deck scrolls normally here, so a section pager adds nothing */
  .dots{display:none}
  .legal{bottom:80px;right:18px}
}

@media (max-width:520px){
  .topbar__label{display:none}
  .topbar{padding-left:calc(var(--brand-w) + 26px)}
  .topbar__news p{font-size:9.5px;letter-spacing:.06em}
  .spec{grid-template-columns:repeat(2,1fr)}
  .spec li:nth-child(2){border-right:0}
  .spec li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .facts{grid-template-columns:1fr}
}