/* Tokabu — design tokens & core components */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

@font-face{font-family:'Tokabu';src:url('fonts/Tokabu.otf') format('opentype'),url('fonts/TokabuRegular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

:root{
  --paper:#FAFAF8;--paper-warm:#F3F2ED;--paper-cool:#EFEFEB;
  --ink:#000000;--ink-soft:#4C4E52;--ink-faint:#9A9DA2;--line:#E3E2DC;
  --accent:#FFD400;--accent-deep:#DDB700;--secondary:#3A9FD8;
  --blush:#FFE9A3;--sky:#C6DFEE;
  --title:'Tokabu','DM Sans',system-ui,sans-serif;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --mono:'DM Sans',system-ui,sans-serif;
  --display-tracking:-0.06em;
}

body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}a:hover{color:var(--accent-deep)}

/* type scale */
.display-xxl{font-family:var(--title);font-weight:400;font-style:normal;line-height:.98;letter-spacing:var(--display-tracking);font-size:clamp(48px,7vw,110px)}
.display-xl{font-family:var(--title);font-weight:400;line-height:1;letter-spacing:var(--display-tracking);font-size:clamp(36px,4.5vw,68px)}
.display-lg{font-family:var(--title);font-weight:400;line-height:1.05;letter-spacing:var(--display-tracking);font-size:clamp(28px,3vw,42px)}
.eyebrow{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.heading-bold{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;line-height:1.05;text-transform:uppercase}

/* signature grid textures */
.grid-tex{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.32) 0 1.5px,transparent 1.5px 48px),repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 1.5px,transparent 1.5px 48px)}
.grid-tex-yellow{background-image:repeating-linear-gradient(0deg,rgba(255,212,0,.5) 0 1.5px,transparent 1.5px 44px),repeating-linear-gradient(90deg,rgba(255,212,0,.5) 0 1.5px,transparent 1.5px 44px)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:12px 24px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);cursor:pointer;transition:all .2s}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn.ghost:hover,.btn.hovacc:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn.lg{padding:16px 32px;font-size:14px}
.btn.sm{padding:8px 18px;font-size:11px}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink)}
.chip.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.accent{background:var(--accent);color:var(--ink);border-color:var(--accent)}

/* layout */
.container{max-width:1280px;margin:0 auto;padding:0 40px}
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}

/* product cell */
.product-cell{position:relative;display:block;overflow:hidden;background:#F2EFE9;border-radius:18px;aspect-ratio:1}
.product-cell img{width:100%;height:100%;object-fit:cover;display:block}
.product-cap{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 20px;color:var(--ink)}
.product-name{font-family:var(--title);letter-spacing:var(--display-tracking);font-size:21px;line-height:1.05;max-width:13ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-status{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;white-space:nowrap;text-align:right}