/* Dotmatrix site. Pencil drawings, newspaper halftone and the brand spectrum, in a light and a dark edition.
   Display type: D-DIN Condensed Bold, huge and uppercase. Text: Archivo. */
@font-face { font-family: Archivo; src: url(fonts/Archivo-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Archivo; src: url(fonts/Archivo-SemiBold.ttf); font-weight: 600; font-display: swap; }
@font-face { font-family: Archivo; src: url(fonts/Archivo-Bold.ttf); font-weight: 700; font-display: swap; }
@font-face { font-family: DDIN; src: url(fonts/D-DINCondensed.otf); font-weight: 400; font-display: swap; }
@font-face { font-family: DDIN; src: url(fonts/D-DINCondensed-Bold.otf); font-weight: 700; font-display: swap; }
/* Japanese: the brand faces have no kana or kanji, so those characters come from the system's Japanese gothic */
@font-face { font-family: DDIN; font-weight: 400; unicode-range: U+3000-30FF, U+3400-9FFF, U+F900-FAFF, U+FF00-FFEF;
  src: local("HiraginoSans-W5"), local("Hiragino Sans W5"), local("NotoSansJP-Medium"), local("Yu Gothic Medium"), local("Meiryo"); }
@font-face { font-family: DDIN; font-weight: 700; unicode-range: U+3000-30FF, U+3400-9FFF, U+F900-FAFF, U+FF00-FFEF;
  src: local("HiraginoSans-W7"), local("Hiragino Sans W7"), local("NotoSansJP-Bold"), local("Yu Gothic Bold"), local("Meiryo Bold"); }
@font-face { font-family: Archivo; font-weight: 400; unicode-range: U+3000-30FF, U+3400-9FFF, U+F900-FAFF, U+FF00-FFEF;
  src: local("HiraginoSans-W3"), local("Hiragino Sans W3"), local("NotoSansJP-Regular"), local("Yu Gothic"), local("Meiryo"); }
@font-face { font-family: Archivo; font-weight: 600; unicode-range: U+3000-30FF, U+3400-9FFF, U+F900-FAFF, U+FF00-FFEF;
  src: local("HiraginoSans-W6"), local("Hiragino Sans W6"), local("NotoSansJP-SemiBold"), local("Yu Gothic Bold"), local("Meiryo Bold"); }
@font-face { font-family: Archivo; font-weight: 700; unicode-range: U+3000-30FF, U+3400-9FFF, U+F900-FAFF, U+FF00-FFEF;
  src: local("HiraginoSans-W7"), local("Hiragino Sans W7"), local("NotoSansJP-Bold"), local("Yu Gothic Bold"), local("Meiryo Bold"); }

:root {
  --orange: #FF6A1A; --pink: #FF2390; --violet: #B026FF; --blue: #2F5BFF; --cyan: #00D8FF;
  --grad: linear-gradient(90deg, var(--orange), var(--pink) 28%, var(--violet) 52%, var(--blue) 76%, var(--cyan));
  --rail: 76px;
  /* dark edition */
  --bg: #0B0B0E; --bg2: #131318; --ink: #F4F5F7; --ink2: #A9ABB5; --dim: #6B6D78; --line: #24252C;
  --grid: #24252D; --dot-off: #1D1E25; --dmark-dot: #2E2F36; --sketch: #C3C7D2; --plate: #F4F5F7;
  --greats: #050506; --greats-ink: #F4F5F7;
  --accent: #e8a23c;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F7F7F4; --bg2: #ECEBE6; --ink: #0E0F12; --ink2: #4A4C55; --dim: #8A8C95; --line: #D8D7D1;
  --grid: #D9D8D2; --dot-off: #E3E3E6; --dmark-dot: #E2E2E7; --sketch: #2A2C33; --plate: #16171B;
  --greats: #E8E6DF; --greats-ink: #0E0F12;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; padding-left: var(--rail); background: var(--bg); color: var(--ink2);
       font: 400 17px/1.6 Archivo, system-ui, sans-serif; transition: background .3s, color .3s; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: var(--ink); }
h1, h2, h3 { color: var(--ink); margin: 0; }
:root[data-theme="light"] .th-dark, :root:not([data-theme="light"]) .th-light { display: none !important; }

.mega { font: 700 clamp(57.6px, 11.16vw, 212.4px)/.84 DDIN, Archivo, sans-serif; text-transform: uppercase; letter-spacing: -.005em; color: var(--ink); }
/* the big type, worn like old print: pitted, scuffed, rough-edged */
.mega, .card h3, .rel-name, .steps .num { filter: url(#distress); }
.mega span { display: block; }
.label { font: 700 14px/1 DDIN, Archivo; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }

/* the mark */
.dmark .dot { fill: var(--dmark-dot); }
svg.word circle { fill: var(--dot-off); transition: fill .08s; }
svg.word circle.on { fill: var(--ink); }
.lockup { display: inline-flex; align-items: center; gap: 16px; }
.lockup .dmark { width: 42px; height: 42px; }
.lockup .word { height: 24px; width: auto; }

/* LED */
.led { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent), 0 0 2px var(--accent); flex: none; display: inline-block; }

/* rail */
.rail { position: fixed; z-index: 20; left: 0; top: 0; bottom: 0; width: var(--rail); display: flex; flex-direction: column; align-items: center;
        gap: 26px; padding: 20px 0; background: var(--bg); border-right: 1px solid var(--line); transition: background .3s; }
.rail-mark { display: block; width: 40px; height: 40px; }
.rail-mark .dmark { width: 100%; height: 100%; }
.rail-nav { display: flex; flex-direction: column; gap: 22px; margin-top: 14px; }
.rail-nav a, .rail-store { writing-mode: vertical-rl; transform: rotate(180deg); text-decoration: none; color: var(--ink2);
                           font: 700 14px/1 DDIN, Archivo; letter-spacing: .2em; text-transform: uppercase; }
.rail-nav a:hover, .rail-store:hover { color: var(--ink); }
.rail-store { margin-top: auto; color: var(--ink); padding: 14px 0; border-top: 1px solid var(--line); }
.theme { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.theme .sun { width: 14px; height: 14px; border-radius: 50%; background: var(--ink);
              box-shadow: inset -5px -2px 0 0 var(--bg); transition: box-shadow .3s; }
:root[data-theme="light"] .theme .sun { box-shadow: inset 0 0 0 0 var(--bg), 0 0 0 3px var(--bg), 0 0 0 4px var(--ink); }
.theme:hover { border-color: var(--ink2); }

/* reveal */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }

/* the drawing */
svg.sketch { width: 100%; height: auto; display: block; color: var(--sketch); overflow: visible; }
svg.sketch path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
svg.sketch path.m { stroke-width: 2.4; }
svg.sketch path.c { stroke-width: 1; opacity: .42; }
svg.sketch.drawn path { animation: draw .75s cubic-bezier(.55,.1,.25,1) forwards; animation-delay: calc(var(--i) * 4.5ms); }
svg.sketch .tx { font: 400 15px DDIN, Archivo; letter-spacing: .12em; opacity: 0; transition: opacity .5s .6s; }
svg.sketch.drawn .tx { opacity: .85; }
@keyframes draw { to { stroke-dashoffset: 0; } }
svg.fill .tracer { color: #fff; filter: drop-shadow(0 0 4px rgba(255,255,255,.9)) drop-shadow(0 0 12px rgba(160,200,255,.6)); }
svg.fill .tracer > * { stroke-dasharray: .16 .84; stroke-dashoffset: 1; opacity: 0; }
:root[data-theme="light"] svg.fill .tracer { color: var(--ink); filter: none; }

/* the opening sheet */
.sheet { position: relative; min-height: 100svh; padding: 26px 4vw 60px; overflow: hidden;
         background-image: radial-gradient(circle, var(--grid) 1.7px, transparent 2.2px); background-size: 26px 26px; background-position: 13px 13px; }
.sheet > * { position: relative; z-index: 2; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sheet-lockup { text-decoration: none; }
.sheet-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3vw; align-items: center; min-height: calc(100svh - 120px); }
.sheet .mega { margin: 0 0 3vh; }
.sheet .sheet-drawing { width: 110%; margin-right: -10%; }
/* the same sizes as the old greats: the .mega headline and its big copy */
.sheet-lede { color: var(--ink); font-size: clamp(26px, 3.4vw, 56px); line-height: 1.18; font-weight: 600; letter-spacing: -.01em; margin: 0 0 26px; }
.newest { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 999px; text-decoration: none; color: var(--ink);
          background: var(--bg); border: 1px solid var(--line); font-weight: 600; }
.newest:hover { border-color: var(--accent); }
.sparks { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; }
.sparks i { position: absolute; width: 8px; height: 8px; border-radius: 50%; animation: twinkle 6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; } 30%, 70% { opacity: 1; } }

/* dust and scratches over the paper */
.sheet::after, .greats::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--ink); -webkit-mask: url(dust.png) 0 0 / 1100px repeat; mask: url(dust.png) 0 0 / 1100px repeat; opacity: .32; }
.greats::after { background: var(--greats-ink); opacity: .4; }

/* the old greats */
.greats { background: var(--greats); color: var(--greats-ink); padding: 14vw 4vw 9vw; margin-top: -6vw; position: relative;
          clip-path: polygon(0 7vw, 100% 0, 100% 100%, 0 calc(100% - 5vw)); }
.greats .mega { color: var(--greats-ink); }
.greats-head { display: grid; gap: 3vw; }
.greats-head p { font-size: clamp(26px, 3.4vw, 56px); line-height: 1.18; font-weight: 600; letter-spacing: -.01em; max-width: 1500px; margin: 0; }
.carousel { margin: 7vw -4vw 0; overflow: hidden; padding: 24px 0 34px; }
.track { display: flex; gap: 22px; width: max-content; animation: drift calc(var(--n) * 6s) linear infinite; }
.ht { margin: 0; flex: none; height: clamp(220px, 30vw, 460px); aspect-ratio: 3 / 2; }
.ht:nth-child(odd) { transform: rotate(-.8deg); } .ht:nth-child(even) { transform: rotate(.7deg) translateY(10px); }
/* left to right, forever: the track holds the plates twice, so moving by half of it loops seamlessly */
@keyframes drift { from { transform: translateX(calc(-50% - 11px)); } to { transform: translateX(0); } }
.ht .ink { width: 100%; height: 100%; background: var(--plate);
           -webkit-mask: var(--src) center / cover no-repeat; mask: var(--src) center / cover no-repeat; }

/* section heads */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 9vw 4vw 3vw; }
.sec-head .mega { font-size: clamp(50.4px, 8.55vw, 162px); }

/* cards: the angled renders */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4vw 3vw; padding: 0 4vw 4vw; align-items: start; }
.card { display: flex; flex-direction: column; gap: 14px; text-decoration: none; }
.card .shot { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; background: transparent; }
/* the working sketch in white line, drawn at the photo's own angle so the two line up; on hover, the photo in
   black and white (colour is kept for the plug-in page) */
.card .shot .plan { position: absolute; inset: 0; z-index: 1; transition: opacity .35s; }
.card .shot .plan svg.sketch { width: 100%; height: 100%; color: #fff; overflow: hidden; }
:root[data-theme="light"] .card .shot .plan svg.sketch { color: var(--ink); }
.card .shot .plan svg.sketch path.m { stroke-width: 4.2; }
.card .shot .plan svg.sketch path.c { stroke-width: 2; }
.card .shot img { opacity: 0; transition: opacity .35s; filter: grayscale(1) contrast(1.08); }
@media (hover: hover) {
  .card:hover .shot .plan { opacity: 0; }
  .card:hover .shot img { opacity: 1; }
}
.card .shot img { width: 100%; height: 100%; object-fit: cover; }
.card .meta { display: flex; align-items: center; gap: 10px; font: 700 14px/1 DDIN, Archivo; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); margin-top: 6px; }
.card .meta .ver { margin-left: auto; color: var(--dim); }
.card h3 { font: 700 clamp(39.6px, 4.86vw, 82.8px)/.86 DDIN; text-transform: uppercase; }
.card h3 { background: linear-gradient(var(--ink), var(--ink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card p { margin: 0; }

/* releases */
.rels { padding: 0 4vw; }
.rel { display: grid; grid-template-columns: minmax(0, 1.2fr) 90px minmax(0, 2fr); gap: 24px; align-items: baseline; padding: 22px 0;
       border-top: 1px solid var(--line); text-decoration: none; color: var(--ink2); transition: background .2s, padding .3s; }
.rel:last-child { border-bottom: 1px solid var(--line); }
.rel-ver { font: 700 15px/1 DDIN, Archivo; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.rel-name { display: flex; align-items: center; gap: 14px; font: 700 clamp(30px, 3.4vw, 52px)/.9 DDIN; text-transform: uppercase; color: var(--ink); }
.rel-tag { font-size: 16px; }

/* workflow */
.steps { list-style: none; margin: 0; padding: 0 4vw 6vw; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3vw; }
.steps li { border-top: 1px solid var(--line); padding-top: 18px; }
.steps .num { display: block; font: 700 clamp(70px, 8vw, 150px)/.85 DDIN; color: var(--ink); }
.steps h3 { font: 700 30px/1 DDIN; text-transform: uppercase; letter-spacing: .02em; margin: 18px 0 10px; }
.steps p { margin: 0; font-size: 16px; }
.steps li:nth-child(2) { transition-delay: .1s; } .steps li:nth-child(3) { transition-delay: .2s; } .steps li:nth-child(4) { transition-delay: .3s; }

/* the record crates, printed in halftone, right across the foot of the page */
.crates { margin-top: 6vw; height: clamp(220px, 34vw, 560px); overflow: hidden; position: relative; }
.crates .ink { width: 100%; height: 100%; background: var(--plate); -webkit-mask: var(--src) center / cover no-repeat; mask: var(--src) center / cover no-repeat; }
.crates::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--bg), transparent 30%); }

/* footer */
.foot { padding: 7vw 4vw 50px; border-top: 1px solid var(--line); }
.foot-word svg { width: 100%; height: auto; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 3vw; margin-top: 40px; font-size: 14px; color: var(--dim); }
.foot-cols p { margin: 0; }
.foot-cols a { color: var(--ink2); }

/* product pages */
.product { padding: 0 4vw; }
.product .hero { padding-top: 4vw; }
.hero-img { border-radius: 20px; overflow: hidden; background: #000; }
.hero-img img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.product .title { padding: 4vw 0 2vw; }
.product .title .meta { display: flex; align-items: center; gap: 10px; font: 700 14px/1 DDIN, Archivo; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.product .title .ver { color: var(--dim); }
.product .mega { font-size: clamp(57.6px, 9.9vw, 180px); margin: 16px 0 18px; }
.product .tag { color: var(--ink); font-size: clamp(19px, 2vw, 26px); max-width: 760px; margin: 0 0 26px; font-weight: 600; line-height: 1.35; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-block; padding: 14px 22px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 700; text-decoration: none; }
.btn:hover { background: var(--grad); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--ink2); background: transparent; color: var(--ink); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4vw; padding: 4vw 0; align-items: start; border-top: 1px solid var(--line); }
.cols .hook { color: var(--ink); font-size: 23px; line-height: 1.4; font-weight: 600; margin-top: 0; }
.cols .label { margin: 34px 0 10px; }
.cols ul { padding-left: 0; list-style: none; margin: 0; }
.cols li { padding: 10px 0 10px 24px; border-top: 1px solid var(--line); position: relative; }
.cols li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.formats { color: var(--ink); font: 700 17px/1.4 DDIN, Archivo; letter-spacing: .06em; margin-top: 24px; }
.note { font-size: 13px; color: var(--dim); }
.film video { width: 100%; border-radius: 16px; border: 1px solid var(--line); background: #000; position: sticky; top: 20px; }
.drawing-sec { padding: 4vw 0; border-top: 1px solid var(--line); }
.sheet-drawing.solo { margin-top: 3vw; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 4vw 0; border-top: 1px solid var(--line); }
.faces { padding: 4vw 0 1vw; display: grid; gap: 20px; border-top: 1px solid var(--line); }
figure { margin: 0; }
figure img { border-radius: 14px; width: 100%; }
figcaption { font: 700 13px/1 DDIN, Archivo; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-top: 10px; }
.back { padding: 30px 0 8px; }
.back a { color: var(--ink2); text-decoration: none; font: 700 15px/1 DDIN; letter-spacing: .16em; text-transform: uppercase; }

/* phones and small tablets: the rail becomes a top bar */
/* the language switch, top right */
.lang { position: fixed; z-index: 21; top: 18px; right: 22px; padding: 9px 16px 8px; border-radius: 999px; border: 1px solid var(--line);
        background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        color: var(--ink); text-decoration: none; font: 700 14px/1 DDIN, Archivo; letter-spacing: .14em; text-transform: uppercase; transition: border-color .2s; }
.lang:hover { border-color: var(--ink2); }
.lang:lang(ja) { letter-spacing: .06em; }
/* Japanese pages: the titles set smaller and looser (kanji and kana are wide and tall), phrases kept whole */
:lang(ja) .mega { font-size: clamp(36px, 5.94vw, 111.6px); line-height: 1.1; letter-spacing: 0; }
:lang(ja) .sec-head .mega { font-size: clamp(36px, 5.94vw, 111.6px); }
:lang(ja) .product .mega { font-size: clamp(57.6px, 9.9vw, 180px); line-height: .84; }   /* plug-in names stay in Latin, full size */
@media (max-width: 480px) { :lang(ja) .mega, :lang(ja) .sec-head .mega { font-size: 7.56vw; } :lang(ja) .product .mega { font-size: 13.5vw; } }
:lang(ja) .steps h3, :lang(ja) .label, :lang(ja) .rail-nav a, :lang(ja) .rail-store, :lang(ja) .meta .kind { letter-spacing: .04em; }
:lang(ja) p, :lang(ja) li, :lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { word-break: auto-phrase; line-break: strict; }
:lang(ja) .sheet-lede, :lang(ja) .greats-head p { line-height: 1.45; }
:lang(ja) .sheet-lede { font-size: clamp(22px, 2.5vw, 40px); }
:lang(ja) .greats-head p { font-size: clamp(22px, 2.7vw, 44px); }
/* the rail reads top to bottom, upright, as Japanese is written vertically */
:lang(ja) .rail-nav a, :lang(ja) .rail-store { transform: none; text-orientation: upright; letter-spacing: .1em; }

@media (max-width: 860px) {
  body { padding-left: 0; padding-top: 58px; }
  .lang { top: 12px; right: 12px; padding: 9px 12px 8px; font-size: 12px; }
  .rail { bottom: auto; right: 0; width: auto; height: 58px; flex-direction: row; padding: 0 96px 0 16px; gap: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rail-mark { width: 32px; height: 32px; }
  .rail-nav { flex-direction: row; margin: 0 0 0 auto; gap: 16px; }
  .rail-nav a, .rail-store, :lang(ja) .rail-nav a, :lang(ja) .rail-store { writing-mode: horizontal-tb; transform: none; font-size: 13px; letter-spacing: .12em; }
  .rail-nav a:nth-child(n+2) { display: none; }
  .rail-store { margin: 0; padding: 0; border: 0; }
  .sheet { padding: 20px 16px 48px; }
  .sheet .lockup .word { height: 18px; }
  .sheet .lockup .dmark { width: 32px; height: 32px; }
  .sheet-row { grid-template-columns: 1fr; }
  .sheet .sheet-drawing { width: 112%; margin: 0 -6%; order: -1; }
  .greats { padding: 18vw 16px 12vw; }
  .greats-head { grid-template-columns: 1fr; }
  .sec-head { padding: 16vw 16px 6vw; }
  .cards { grid-template-columns: 1fr; padding: 0 16px; gap: 14vw; }
  .rels { padding: 0 16px; }
  .rel { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .rel-tag { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr 1fr; padding: 0 16px 14vw; gap: 30px 18px; }
  .foot { padding: 12vw 16px 40px; }
  .foot-cols { grid-template-columns: 1fr; gap: 12px; }
  .product { padding: 0 16px; }
  .cols { grid-template-columns: 1fr; gap: 28px; }
  .film video { position: static; }
  .gallery { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  svg.sketch path { stroke-dashoffset: 0; }
  svg.sketch .tx { opacity: .85; }
  .sparks i { animation: none; opacity: .8; }
  .track { animation: none; } .carousel { overflow-x: auto; }
}