:root { --ink:#26231f; --cream:#f3eee5; --paper:#faf7f1; --sand:#d5c4b0; --sky:#91b5c8; --red:#c74f36; --sage:#a9ad81; --plum:#806378; --line:rgba(38,35,31,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--cream); }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans","Noto Sans SC",sans-serif; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.film-grain { pointer-events:none; position:fixed; inset:0; z-index:20; opacity:.12; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E"); }
.nav { height:78px; padding:0 3.2vw; display:flex; align-items:center; justify-content:space-between; position:fixed; inset:0 0 auto; z-index:10; transition:background .3s,color .3s; }
.nav.nav-on-paper { background:rgba(250,247,241,.82); backdrop-filter:blur(12px); }
.brand img { width:196px; height:auto; mix-blend-mode:multiply; }
.nav nav { display:flex; gap:32px; font:500 10px/1 "DM Mono",monospace; letter-spacing:.08em; }
.nav a { transition:opacity .2s; }
.nav a:hover { opacity:.55; }
.nav-link { border-bottom:1px solid currentColor; padding-bottom:5px; font:500 10px/1 "DM Mono",monospace; letter-spacing:.07em; }
.nav-link span { color:var(--red); font-size:13px; }
.micro { margin:0; font:500 10px/1.25 "DM Mono",monospace; letter-spacing:.085em; }
.micro span { color:var(--red); }
.hero { min-height:100svh; padding:118px 3.2vw 28px; display:grid; grid-template-columns:minmax(300px,.82fr) minmax(430px,1.18fr); gap:4vw; align-items:center; overflow:hidden; background:linear-gradient(120deg,#f4ede3,#e7dccc); }
.hero-copy { position:relative; z-index:1; padding:0 0 20px; }
.hero h1,.intro h2,.collections h2,.sun-note h2,.club h2 { font-weight:500; letter-spacing:-.075em; line-height:.89; }
.hero h1 { margin:23px 0 28px; max-width:590px; font-size:clamp(55px,6.3vw,102px); }
h1 em,h2 em { font-family:"Instrument Serif",Georgia,serif; font-weight:400; letter-spacing:-.08em; }
.hero-text { margin:0; font-size:14px; line-height:1.85; }
.hero-visual { align-self:stretch; min-height:560px; overflow:hidden; border-radius:220px 220px 0 0; background:#e8ddcf; transform:translateY(var(--hero-y,0)); }
.hero-visual img { width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(var(--hero-scale,1)); transition:transform .12s linear; }
.round-button { width:113px; height:113px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--ink); border-radius:50%; position:absolute; right:7%; bottom:2%; text-align:center; font:500 9px/1.45 "DM Mono",monospace; letter-spacing:.04em; transition:.25s; }
.round-button span { display:block; color:var(--red); margin-top:5px; font-size:19px; }
.round-button:hover { color:var(--paper); background:var(--ink); transform:rotate(-8deg); }
.hero-caption { grid-column:1/-1; display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:10px; font:500 9px/1 "DM Mono",monospace; letter-spacing:.08em; }
.intro { min-height:103svh; padding:117px 3.2vw 0; overflow:hidden; background:var(--paper); position:relative; }
.intro > .micro { border-top:1px solid var(--line); padding-top:10px; }
.intro-layout { display:grid; grid-template-columns:1.25fr .6fr; align-items:end; gap:11vw; margin:clamp(110px,15vw,210px) 8vw 0; }
.intro h2 { margin:0; font-size:clamp(47px,6.2vw,98px); }
.intro-layout > div { padding-bottom:7px; font-size:14px; line-height:1.9; }
.under-link { margin-top:28px; padding-bottom:7px; display:inline-block; border-bottom:1px solid var(--ink); font:500 10px/1 "DM Mono",monospace; letter-spacing:.06em; }
.under-link span { color:var(--red); font-size:14px; }
.giant-type { margin:11vw 0 -6.1vw -.6vw; color:#e8dfd2; white-space:nowrap; font-size:17.1vw; letter-spacing:-.1em; font-weight:600; line-height:.7; }
.collections { display:grid; grid-template-columns:minmax(265px,.68fr) minmax(500px,1.32fr); gap:7vw; padding:0 3.2vw 140px; background:#e9e0d5; }
.collection-sticky { position:sticky; top:117px; align-self:start; padding-top:135px; }
.collection-sticky .micro { border-top:1px solid var(--line); padding-top:10px; }
.collections h2 { margin:78px 0 24px; font-size:clamp(46px,5.2vw,82px); }
.collection-sticky > p:not(.micro) { max-width:270px; font-size:14px; line-height:1.8; }
.palette { display:flex; gap:9px; margin-top:40px; }
.palette i { width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.13); }
.p-cream { background:#f8f2e8; }.p-sky { background:#98bdcf; }.p-red { background:#c84d36; }.p-sage { background:#a5ac81; }.p-plum { background:#765970; }
.product-stream { padding-top:120px; display:grid; grid-template-columns:1fr 1fr; gap:5.3vw 2vw; }
.product-card { min-height:570px; overflow:hidden; background:#eee8df; position:relative; transition:transform .35s ease; }
.product-card:hover { transform:translateY(-8px); }
.product-card-wide { grid-column:span 2; min-height:620px; }
.product-card img { width:100%; height:100%; object-fit:contain; object-position:center; position:absolute; inset:0; padding:10px 10px 58px; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.product-card-wide img { padding:10px 10px 62px; }
.product-card:hover img { transform:scale(1.018); }
.product-card > div { position:absolute; left:17px; right:17px; bottom:15px; z-index:1; display:grid; grid-template-columns:32px 1fr; column-gap:10px; align-items:end; color:white; text-shadow:0 1px 12px rgba(0,0,0,.5); }
.product-card h3 { margin:0; font-size:25px; line-height:1; letter-spacing:-.07em; }.product-card span { grid-column:2; font:400 10px/1.5 "DM Mono",monospace; letter-spacing:.06em; }.product-card b { position:absolute; right:0; bottom:1px; font:500 13px/1 "DM Mono",monospace; letter-spacing:.02em; }.product-number { grid-row:span 2; margin:0 0 3px; font:500 10px/1 "DM Mono",monospace; }
.product-card.tone-stone > div,.product-card.tone-sky > div { color:var(--ink); text-shadow:none; }
.product-card.tone-sage { background:#d9ddcc; }.product-card.tone-rose { background:#ead9d4; }
.sun-note { min-height:95svh; display:grid; grid-template-columns:1fr 1fr; background:#f5f0e7; }
.sun-copy { align-self:center; padding:10vw; }.sun-copy h2 { margin:23px 0 33px; font-size:clamp(45px,5.7vw,88px); }.sun-copy > p:not(.micro) { max-width:340px; font-size:14px; line-height:1.9; }
.sun-image { margin:0; overflow:hidden; position:relative; background:#e2d5c3; }.sun-image img { width:100%; height:100%; object-fit:cover; }.sun-image figcaption { position:absolute; bottom:23px; left:24px; color:white; font:500 9px/1 "DM Mono",monospace; letter-spacing:.08em; text-shadow:0 1px 5px rgba(0,0,0,.5); }
.gallery { padding:128px 3.2vw; display:grid; grid-template-columns:1.14fr .86fr; gap:2vw; background:var(--cream); }
.gallery-product { position:relative; display:block; overflow:hidden; }.gallery-main { grid-row:span 2; }.gallery-main img { width:100%; height:100%; object-fit:cover; }.gallery-tall { height:430px; }.gallery-tall img { width:100%; height:100%; object-fit:cover; object-position:center 56%; }.gallery-product span { position:absolute; z-index:1; inset:auto 18px 16px; display:flex; justify-content:space-between; align-items:end; gap:20px; color:white; text-shadow:0 1px 12px rgba(0,0,0,.48); }.gallery-product b { font-size:25px; line-height:1; letter-spacing:-.07em; }.gallery-product small { font:500 9px/1.4 "DM Mono",monospace; letter-spacing:.06em; text-align:right; }
.gallery-note { align-self:end; max-width:410px; padding:4vw 3vw; font-size:14px; line-height:1.9; }.gallery-note > p:not(.micro) { margin:25px 0 0; }
.club { min-height:610px; position:relative; overflow:hidden; padding:95px 3.2vw; color:var(--ink); background:#cbd3c1; }.club::after { content:"TAO"; position:absolute; right:-.06em; bottom:-.4em; color:rgba(255,255,255,.29); font:500 37vw/.8 "Instrument Serif",serif; letter-spacing:-.13em; }.club h2 { position:relative; z-index:1; margin:77px 7vw 22px; font-size:clamp(55px,6.7vw,104px); }.club > p:not(.micro) { position:relative; z-index:1; margin:0 7vw; font-size:14px; line-height:1.8; }.club-button { position:absolute; z-index:2; bottom:96px; right:10vw; width:154px; height:154px; border:1px solid var(--ink); background:transparent; border-radius:50%; cursor:pointer; color:var(--ink); font:500 10px/1.55 "DM Mono",monospace; letter-spacing:.04em; transition:.25s; }.club-button span { color:var(--red); font-size:22px; }.club-button:hover { background:var(--ink); color:var(--paper); transform:rotate(9deg); }
footer { padding:31px 3.2vw 25px; background:#25231f; color:var(--paper); }footer>img { width:min(570px,100%); filter:invert(1); }footer div { border-top:1px solid rgba(255,255,255,.26); display:flex; justify-content:space-between; margin-top:28px; padding-top:11px; font:500 9px/1 "DM Mono",monospace; letter-spacing:.08em; }
.club-dialog { width:min(410px,calc(100% - 30px)); padding:33px; border:0; color:var(--ink); background:var(--paper); text-align:center; box-shadow:0 25px 80px rgba(0,0,0,.3); }.club-dialog::backdrop { background:rgba(31,28,24,.45); backdrop-filter:blur(5px); }.dialog-close { border:0; background:transparent; position:absolute; top:11px; right:14px; cursor:pointer; font-size:28px; }.qr-placeholder { width:190px;height:190px;margin:27px auto;display:grid;place-content:center;background:var(--ink);color:var(--paper);font:600 38px/.57 "DM Sans",sans-serif;letter-spacing:-.13em; }.qr-placeholder span { color:var(--red); }.club-dialog h2 { margin:0; font-size:27px;letter-spacing:-.06em;line-height:1.05; }.club-dialog>p:last-child { color:#777066;font-size:12px; }
@media (max-width:760px) { .nav {height:65px;padding:0 18px}.brand img{width:145px}.nav nav,.nav-link{display:none}.hero{min-height:760px;padding:106px 18px 18px;display:flex;flex-direction:column;align-items:stretch;gap:14px}.hero-copy{padding:0}.hero h1{font-size:55px;margin:16px 0 16px}.hero-text{font-size:13px}.hero-visual{min-height:0;flex:1;border-radius:120px 120px 0 0}.round-button{right:16px;bottom:10px;width:87px;height:87px;font-size:7px}.round-button span{font-size:15px}.hero-caption{width:100%;font-size:7px}.intro{min-height:770px;padding:92px 18px 0}.intro-layout{grid-template-columns:1fr;margin:82px 0 0;gap:29px}.intro h2{font-size:49px}.giant-type{font-size:26vw;margin-top:35vw}.collections{display:block;padding:0 18px 75px}.collection-sticky{position:relative;top:auto;padding-top:83px}.collections h2{margin:62px 0 20px;font-size:52px}.product-stream{padding-top:50px;gap:12px}.product-card,.product-card-wide{grid-column:auto;min-height:420px}.product-card-wide{grid-column:span 2}.product-card.product-card-wide{min-height:400px}.sun-note{grid-template-columns:1fr;min-height:0}.sun-copy{padding:80px 18px}.sun-copy h2{font-size:51px}.sun-image{height:510px}.gallery{padding:12px 18px 77px;display:block}.gallery-main{height:440px}.gallery-tall{height:430px;margin-top:12px!important}.gallery-note{padding:60px 0 0}.club{min-height:540px;padding:76px 18px}.club h2{margin:62px 0 22px;font-size:59px}.club>p:not(.micro){margin:0}.club-button{right:24px;bottom:51px;width:125px;height:125px}footer{padding:27px 18px 21px} }

@media (max-width:760px) { .gallery-product span { inset:auto 13px 13px; }.gallery-product b { font-size:21px; } }