/* ==========================================================================
   DEETROCASE — Shared Design System
   Dark gothic luxury × chrome industrial × dark editorial
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@500;600&family=Cormorant:ital,wght@0,300;0,400;0,500;1,400&family=Big+Shoulders+Display:wght@500;600;700;800&family=Neue+Montreal:wght@400&display=swap');
/* Neue Montreal isn't on Google Fonts — fallback stack below covers it. Using Archivo as the working grotesk. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Archivo+Expanded:wght@500;600;700&display=swap');
/* Korean fallback face — Latin text keeps using the faces above; Hangul falls through to Pretendard per-glyph. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");

:root{
  /* ---- palette --------------------------------------------------------- */
  --black:        #070708;
  --void:         #0b0c0e;
  --charcoal:     #131417;
  --gunmetal:     #1b1d21;
  --graphite:     #26282d;
  --steel:        #3a3d44;
  --steel-2:      #565a63;
  --silver:       #9a9ea6;
  --silver-2:     #b9bcc2;
  --chrome:       #d8dade;
  --chrome-hi:    #f3f4f5;
  --offwhite:     #eeece6;
  --bone:         #c9c4b8;
  --blood:        #3a0f14;   /* used at ~2% opacity max, never as a bright accent */

  --line:         rgba(216,218,222,0.14);
  --line-strong:  rgba(216,218,222,0.28);
  --hair:         rgba(255,255,255,0.08);

  /* ---- type -------------------------------------------------------------*/
  --f-display: 'Cormorant SC', 'Cormorant', 'Pretendard', 'Times New Roman', serif;
  --f-serif:   'Cormorant', 'Pretendard', 'Times New Roman', serif;
  --f-sans:    'Archivo', 'Pretendard', 'Helvetica Neue', Arial, sans-serif;
  --f-sans-x:  'Archivo Expanded', 'Archivo', 'Pretendard', Arial, sans-serif;
  --f-mono:    'Archivo', 'Pretendard', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- rhythm -------------------------------------------------------------*/
  --gutter: clamp(20px, 4vw, 64px);
  --maxw: 1680px;
  --radius: 1px; /* almost sharp everywhere on purpose */

  /* ---- motion -------------------------------------------------------------*/
  --ease: cubic-bezier(.16,.8,.2,1);
  --ease-slow: cubic-bezier(.22,.61,.19,.98);
  --t-fast: 260ms;
  --t-med: 620ms;
  --t-slow: 1200ms;
}

/* ---------------------------------------------------------------------------
   Reset
--------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{
  background:var(--black);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--black);
  color:var(--offwhite);
  font-family:var(--f-sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
input,select{ font:inherit; color:inherit; background:none; }

::selection{ background:var(--chrome); color:var(--black); }

/* ---------------------------------------------------------------------------
   Global atmosphere: grain + vignette
--------------------------------------------------------------------------- */
.grain{
  position:fixed; inset:0; z-index:998; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed; inset:0; z-index:997; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);
}
.cursor-glow{
  position:fixed; z-index:996; pointer-events:none; width:520px; height:520px;
  border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(216,218,222,0.06) 0%, rgba(216,218,222,0.02) 35%, transparent 70%);
  left:var(--mx,50%); top:var(--my,50%);
  transition:opacity .4s ease;
  opacity:0;
}
body.cursor-active .cursor-glow{ opacity:1; }

/* ---------------------------------------------------------------------------
   Type system
--------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--f-sans-x);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--silver); font-weight:500;
}
.display-xl{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(52px, 10vw, 168px);
  line-height:.92;
  letter-spacing:.01em;
  color:var(--offwhite);
}
.display-l{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(38px, 5.6vw, 88px);
  line-height:.98;
  letter-spacing:.005em;
}
.display-m{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(28px, 3.2vw, 46px);
  line-height:1.05;
}
.serif-lead{
  font-family:var(--f-serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(18px, 1.6vw, 24px);
  line-height:1.55;
  color:var(--silver-2);
}
.mono-tag{
  font-family:var(--f-sans);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel-2);
}
.chrome-text{
  background:linear-gradient(115deg, #6c6f76 0%, #eef0f2 22%, #8b8e95 40%, #f6f7f8 55%, #55585f 72%, #cfd2d6 88%, #6c6f76 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:chromeShift 9s ease-in-out infinite;
}
@keyframes chromeShift{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* ---------------------------------------------------------------------------
   Layout primitives
--------------------------------------------------------------------------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.bleed{ width:100%; }
section{ position:relative; }
.hairline{ height:1px; background:var(--line); border:0; }
.hairline-v{ width:1px; background:var(--line); }
.grid-index{
  position:absolute; top:24px; right:var(--gutter);
  font-family:var(--f-sans); font-size:11px; letter-spacing:.12em; color:var(--steel-2);
}

/* ---------------------------------------------------------------------------
   Header / Nav
--------------------------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:22px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), padding var(--t-fast) var(--ease);
}
.site-header.scrolled{
  background:rgba(7,7,8,0.86);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line);
  padding-top:16px; padding-bottom:16px;
}
.brand-mark{
  font-family:var(--f-display); font-weight:600; font-size:20px; letter-spacing:.14em;
  display:flex; align-items:baseline; gap:8px;
}
.brand-mark small{
  font-family:var(--f-sans); font-size:9px; letter-spacing:.24em; color:var(--steel-2); font-weight:500;
}
.nav-primary{ display:flex; align-items:center; gap:clamp(18px,2.6vw,40px); }
.nav-primary a{
  font-family:var(--f-sans-x); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--silver-2); position:relative; padding:4px 0; font-weight:500;
  transition:color var(--t-fast) var(--ease);
}
.nav-primary a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--chrome);
  transition:width var(--t-med) var(--ease);
}
.nav-primary a:hover, .nav-primary a.active{ color:var(--chrome-hi); }
.nav-primary a:hover::after, .nav-primary a.active::after{ width:100%; }
.nav-icons{ display:flex; align-items:center; gap:20px; }
.icon-btn{ position:relative; display:flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.16em; color:var(--silver-2); }
.icon-btn:hover{ color:var(--chrome-hi); }
.cart-count{
  font-size:10px; width:16px; height:16px; border:1px solid var(--line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--offwhite);
}
.nav-toggle{ display:none; }

/* ---------------------------------------------------------------------------
   Buttons — architectural, not soft
--------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-sans-x); font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  padding:16px 30px; border:1px solid var(--line-strong);
  position:relative; overflow:hidden; white-space:nowrap;
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  color:var(--offwhite);
}
.btn::before{
  content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent);
  transform:translateX(-120%); transition:transform var(--t-med) var(--ease);
}
.btn:hover::before{ transform:translateX(120%); }
.btn:hover{ border-color:var(--chrome); }
.btn-solid{
  background:linear-gradient(180deg, #dfe1e4, #b7bac0 55%, #8f929a);
  color:var(--black); border-color:transparent; font-weight:700;
}
.btn-solid:hover{ filter:brightness(1.08); }
.btn-ghost{ border-color:var(--line); color:var(--silver-2); }
.btn-ghost:hover{ color:var(--offwhite); border-color:var(--line-strong); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.35; pointer-events:none; }

/* ---------------------------------------------------------------------------
   Metal plate / object surfaces (procedural — no photography)
--------------------------------------------------------------------------- */
.plate{
  position:relative;
  background:
    radial-gradient(120% 140% at 18% 8%, rgba(255,255,255,.10), transparent 40%),
    radial-gradient(140% 120% at 88% 92%, rgba(255,255,255,.05), transparent 45%),
    linear-gradient(155deg, #16171a 0%, #0d0d0f 45%, #1a1c20 100%);
  border:1px solid var(--line);
}
.plate::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.object-figure{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:
    radial-gradient(90% 70% at 30% 20%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(70% 60% at 80% 85%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(160deg, #17181b 0%, #0a0a0b 50%, #1c1e22 100%);
}
.object-figure::before{
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.4; mix-blend-mode:overlay; pointer-events:none;
}
.object-figure .obj-glyph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transition:transform var(--t-slow) var(--ease-slow), filter var(--t-med) var(--ease);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
}
.object-figure:hover .obj-glyph{ transform:scale(1.06) rotate(-1.5deg); }
.object-figure svg{ width:62%; height:62%; }

/* real product photography */
.object-figure.has-photo{ background:#0a0a0b; }
.object-figure.has-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  filter:contrast(1.08) brightness(.97) saturate(.94);
  transition:transform var(--t-slow) var(--ease-slow), filter var(--t-med) var(--ease);
}
.object-figure.has-photo:hover img{ transform:scale(1.045); }
.object-figure .photo-index{
  position:absolute; left:14px; bottom:14px; z-index:3;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; color:var(--offwhite);
  background:rgba(7,7,8,0.6); padding:4px 8px; pointer-events:none;
}
.unique-badge{
  position:absolute; top:14px; left:14px; z-index:5;
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; padding:5px 9px;
  background:rgba(7,7,8,0.72); border:1px solid var(--line-strong); color:var(--offwhite);
}

/* thin chrome frame accent used around hero object / featured plates */
.chrome-frame{
  position:absolute; inset:14px; border:1px solid rgba(216,218,222,.16); pointer-events:none;
}
.chrome-frame::before,.chrome-frame::after{
  content:''; position:absolute; width:18px; height:18px; border:1px solid var(--chrome);
  opacity:.7;
}
.chrome-frame::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.chrome-frame::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* ---------------------------------------------------------------------------
   Reveal / scroll animation
--------------------------------------------------------------------------- */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow);
}
[data-reveal].in{ opacity:1; transform:translateY(0); }
[data-reveal="mask"]{ overflow:hidden; }
[data-reveal="mask"] .mask-inner{
  transform:translateY(100%); transition:transform 1s var(--ease-slow);
}
[data-reveal="mask"].in .mask-inner{ transform:translateY(0); }

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:80px var(--gutter) 30px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.015));
}
.footer-top{
  display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:40px;
  padding-bottom:60px;
}
.footer-brand .display-m{ margin-bottom:16px; }
.footer-col h4{
  font-family:var(--f-sans-x); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--steel-2); margin-bottom:18px; font-weight:600;
}
.footer-col a{ display:block; font-size:13px; color:var(--silver-2); padding:6px 0; transition:color var(--t-fast); }
.footer-col a:hover{ color:var(--chrome-hi); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:26px;
  font-size:11px; letter-spacing:.06em; color:var(--steel-2);
}
.footer-bottom .coords{ font-family:var(--f-mono); letter-spacing:.1em; }

/* ---------------------------------------------------------------------------
   Utility
--------------------------------------------------------------------------- */
.mt-0{margin-top:0}
.center{ text-align:center; }
.divider{ width:1px; height:40px; background:var(--line-strong); margin:0 auto; }
.badge{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:5px 10px;
  border:1px solid var(--line-strong); color:var(--silver-2); display:inline-block;
}
.overline-num{ font-family:var(--f-mono); font-size:11px; color:var(--steel-2); letter-spacing:.1em; }

/* ---------------------------------------------------------------------------
   Mobile nav panel
--------------------------------------------------------------------------- */
.mobile-nav{
  position:fixed; top:0; right:0; height:100svh; width:min(78vw, 340px); z-index:899;
  background:rgba(9,10,11,0.98); backdrop-filter:blur(10px);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 40px;
  transform:translateX(100%); transition:transform var(--t-med) var(--ease-slow);
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav a{
  font-family:var(--f-display); font-size:28px; font-weight:600; padding:14px 0;
  border-bottom:1px solid var(--line); color:var(--offwhite);
}
.nav-toggle{
  font-size:18px; color:var(--offwhite); z-index:901; position:relative; line-height:1;
}

@media (max-width: 900px){
  .nav-primary{ display:none; }
  .nav-toggle{ display:block; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:32px 24px; }
}