@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');

:root{
  --paper:#f4f4f6;
  --ink:#1c1b19;
  --muted:#8a8782;
  --line:#a8a8ad;
  --line2:#cfcfd2;
  --dark:#16140f;
  --maxw:1400px;
  --gap:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400;line-height:1.7;font-size:14px;-webkit-font-smoothing:antialiased;
  letter-spacing:.005em;overflow-x:hidden
}
h1,h2,h3,h4{
  font-family:Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:300;letter-spacing:-.025em;color:var(--ink);
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ===== top bar — sharp, same width as content ===== */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(244,244,246,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:var(--maxw);margin:0 auto;padding:18px 32px;display:flex;justify-content:space-between;align-items:center}
.brand{font-size:12px;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.brand:hover{opacity:.55}
.nav-group{display:flex;align-items:center;gap:24px}
.nav{display:flex;gap:24px;font-size:12px;color:var(--muted);font-weight:400;letter-spacing:.02em}
.nav a:hover{color:var(--ink)}
.langbtn{cursor:pointer;background:transparent;color:var(--muted);font-size:10px;padding:0;border:none;transition:.2s;letter-spacing:.04em}
.langbtn:hover{color:var(--ink)}

/* ===== sections — line-divided, no fills ===== */
section{padding:96px 0}
.divider{border-top:1px solid var(--line)}

/* ===== typography scale — wider hierarchy ===== */
.display{font-size:48px;line-height:1.1;font-weight:300;letter-spacing:-.035em;max-width:28em}
.h2{font-size:32px;line-height:1.15;font-weight:300;letter-spacing:-.025em;margin-bottom:32px;max-width:32em}
.h3{font-size:14px;font-weight:400;letter-spacing:-.01em}
.eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:14px}
.lede{color:var(--muted);max-width:62ch;margin-bottom:30px;font-size:14px}
.body-muted{color:var(--muted)}
.link-underline{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;font-size:12px}
.link-underline:hover{opacity:.6}

/* ===== home hero ===== */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:140px;padding-bottom:80px}
.hero-head{margin-bottom:64px}
.hero-head .display-title{font-size:48px;line-height:1.1;font-weight:300;letter-spacing:-.035em;margin:0 0 32px;color:var(--ink);max-width:28em}
.fork{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.entry{position:relative;height:62vh;min-height:480px;overflow:hidden;display:flex;align-items:flex-end;color:#fff}
.entry img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.entry::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.78) 100%);z-index:1}
.entry .meta{position:relative;z-index:2;padding:36px 32px;display:flex;align-items:flex-end;gap:16px;width:100%;justify-content:space-between}
.entry h2{font-size:28px;line-height:1.1;font-weight:300;letter-spacing:-.02em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4);text-decoration-color:transparent;transition:text-decoration-color .25s}
.entry .arrow{font-size:22px;color:#fff;opacity:.85;transform:translateX(-6px);transition:transform .3s ease, opacity .3s ease;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.entry:hover img{transform:scale(1.04)}
.entry:hover h2{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;text-decoration-color:#fff}
.entry:hover .arrow{transform:translateX(0);opacity:1}

/* ===== brand page hero ===== */
.brand-hero{padding:140px 0 60px}
.brand-hero .intro{max-width:90ch;color:var(--ink);font-size:12px;line-height:1.7;font-weight:300}
.brand-hero .intro + .intro{margin-top:0}
.brand-hero .name{font-size:48px;line-height:1.1;font-weight:300;letter-spacing:-.035em;margin:0 0 32px;max-width:28em}

/* ===== row-grid pattern (no white card) ===== */
.row-list{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(180px,1fr) 3fr;gap:40px;padding:32px 0;border-bottom:1px solid var(--line);align-items:start}
.row-name{font-size:15px;font-weight:400;letter-spacing:-.005em;color:var(--ink);line-height:1.4}
.row-desc{font-size:12px;color:var(--muted);line-height:1.7;max-width:60ch}
.row-list--tight .row{padding:20px 0}

/* ===== brand marquee — preserved ===== */
.marquee{background:var(--dark);color:#cfc9bf;padding:20px 0;overflow:hidden;white-space:nowrap;
  border-top:1px solid #000;border-bottom:1px solid #000}
.marquee:hover .track{animation-play-state:paused}
.track{display:inline-block;animation:scroll 28s linear infinite}
.track span{font-size:12px;letter-spacing:.04em;margin:0 28px;opacity:.7;font-weight:300}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== big-text + small-text pattern (editorial) ===== */
.editorial{padding:96px 0}
.editorial .big{font-size:32px;line-height:1.2;font-weight:300;letter-spacing:-.025em;margin-bottom:8px;max-width:30em}
.editorial .bridge-sub{font-size:12px;color:var(--muted);margin-bottom:32px;max-width:50ch;line-height:1.6;font-weight:300}
.editorial .small{color:var(--muted);font-size:12px;margin-bottom:20px;max-width:50ch}
.editorial .small-link{font-size:12px}

/* ===== unsure block — full-bleed black, white type, customer POV ===== */
.unsure-block{
  background:var(--dark);
  color:#cfc9bf;
  padding:80px 0;
  width:100vw;
  margin-left:calc(50% - 50vw);
}
.unsure-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
}
.unsure-block .h2{
  color:#fff;
  font-size:32px;
  line-height:1.15;
  font-weight:300;
  letter-spacing:-.025em;
  margin-bottom:20px;
  max-width:32em;
}
.unsure-block .small{
  color:#a8a8ad;
  font-size:12px;
  line-height:1.7;
  margin-bottom:24px;
  max-width:50ch;
}
.unsure-block .small-link{
  color:#fff;
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.unsure-block .small-link:hover{opacity:.6}

/* ===== marquee section — tight, no extra breathing ===== */
.marquee-section{padding:0;width:100vw;margin-left:calc(50% - 50vw)}

/* ===== craft page ===== */
.craft-hero{padding:140px 0 60px}
.craft-hero .name{font-size:48px;line-height:1.1;font-weight:300;letter-spacing:-.035em;margin:0 0 24px;max-width:28em}
.craft-hero .intro{color:var(--muted);max-width:60ch;font-size:12px}
.craft-section-head{margin:80px 0 32px;display:flex;align-items:baseline;gap:16px}
.craft-section-head h2{font-size:32px;font-weight:300;letter-spacing:-.025em;line-height:1}
.craft-section-head .count{font-size:10px;color:var(--muted);letter-spacing:.04em}

.clay{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-bottom:24px}
.piece{display:flex;flex-direction:column}
.carousel{width:100%}
.carousel img{width:100%;height:auto;display:none}
.carousel img.on{display:block}
.piece h3{font-size:12px;margin:14px 0 3px;font-weight:400;letter-spacing:-.005em;text-align:left;color:var(--ink)}
.piece .sub{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left}

.gallery{display:flex;gap:32px;align-items:flex-start}
.masonry-col{flex:1;display:flex;flex-direction:column;gap:32px;min-width:0}
.gallery figure{margin:0;width:100%}
.gallery img{width:100%;height:auto;display:block}
.gallery figcaption{padding:10px 0 0}
.gallery figcaption b{display:block;font-size:12px;font-weight:400;color:var(--ink);letter-spacing:-.005em}
.gallery figcaption span{display:block;color:var(--muted);font-size:10px;letter-spacing:.06em;margin-top:2px;text-transform:uppercase}

/* ===== contact section — editorial layout ===== */
.contact{padding:120px 0 100px}
.contact .h2{margin-bottom:56px}
.contact-row{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:start;max-width:640px}
.qr{width:140px;height:140px;display:block}
.contact-info{display:flex;flex-direction:column;gap:28px}
.contact-line .label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.contact-line a,.contact-line .value{font-size:14px;color:var(--ink);letter-spacing:-.005em}
.contact-line a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

footer{padding:320px 0;margin-top:100px;color:var(--muted);font-size:10px;letter-spacing:.02em;line-height:3;border-top:1px solid var(--line);text-align:left}

@media(max-width:900px){
  .clay{grid-template-columns:repeat(2,1fr)}
  .row{grid-template-columns:1fr;gap:12px}
}
@media(max-width:820px){
  .fork{grid-template-columns:1fr}
  .entry{height:50vh;min-height:380px}
  .display,.brand-hero .name,.craft-hero .name{font-size:32px}
  .h2{font-size:22px}
  .editorial .big{font-size:24px}
  .contact-row{grid-template-columns:1fr;gap:32px}
}
@media(max-width:560px){
  .clay,.gallery{grid-template-columns:1fr}
  .nav{display:none}
}