:root { --ink:#221b16; --brown:#713c24; --rust:#a9502b; --paper:#fbfaf6; --line:#ded5c9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:86px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:11px; font-size:15px; font-weight:800; letter-spacing:-.02em; }
.bean-mark { display:inline-block; width:18px; height:25px; border:2px solid var(--brown); border-radius:55% 45% 52% 48%; position:relative; transform:rotate(28deg); }
.bean-mark:after { content:""; position:absolute; width:1px; height:18px; background:var(--brown); left:8px; top:2px; transform:rotate(15deg); }
.bean-mark--light { border-color:#f8f1e5; }.bean-mark--light:after { background:#f8f1e5; }
nav { display:flex; gap:36px; font-size:13px; }
nav a { padding:10px 0; position:relative; } nav a:after { content:""; position:absolute; bottom:4px; left:0; width:0; height:1px; background:var(--rust); transition:.25s; } nav a:hover:after { width:100%; }
.header-cta { color:var(--brown); font-size:13px; font-weight:700; display:flex; gap:8px; align-items:center; }
.hero { min-height:calc(100vh - 86px); display:grid; grid-template-columns:55% 45%; border-bottom:1px solid var(--line); }
.hero-copy { padding:9vh 5vw 4vh; display:flex; flex-direction:column; justify-content:center; }
.eyebrow,.kicker { text-transform:uppercase; font-size:11px; letter-spacing:.19em; font-weight:700; color:var(--rust); }
.eyebrow { display:flex; align-items:center; gap:10px; }.eyebrow span { width:28px; height:1px; background:var(--rust); }
h1,h2,h3,p { margin-top:0; }
h1 { font-family:Georgia, 'Times New Roman', serif; font-size:clamp(58px,6vw,104px); line-height:.87; font-weight:400; letter-spacing:-.065em; margin:28px 0 32px; }
h1 em,h2 em { font-weight:400; color:var(--rust); }
.hero-lead { max-width:580px; font-family:Georgia,serif; font-size:19px; line-height:1.55; color:#665c54; }
.hero-actions { display:flex; align-items:center; gap:32px; margin:12px 0 8vh; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:26px; min-height:54px; padding:0 25px; text-transform:uppercase; font-size:10px; letter-spacing:.16em; font-weight:800; transition:transform .2s, background .2s; }
.button:hover { transform:translateY(-2px); }.button--dark { background:var(--brown); color:white; }.button--dark:hover { background:#542d1c; }
.text-link { font-size:12px; text-transform:uppercase; letter-spacing:.11em; border-bottom:1px solid #8e857b; padding:16px 0 8px; display:flex; gap:15px; }
.hero-facts { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); padding-top:22px; max-width:690px; gap:30px; }
.hero-facts div { display:flex; align-items:center; gap:12px; }.hero-facts strong { font-family:Georgia,serif; font-size:28px; font-weight:400; }.hero-facts span { max-width:110px; font-size:10px; line-height:1.45; text-transform:uppercase; letter-spacing:.08em; color:#827970; }
.hero-visual { background:#d0b9a0; position:relative; overflow:hidden; min-height:640px; }
.hero-visual:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 65% 30%, rgba(255,246,220,.8), transparent 27%),linear-gradient(145deg,#e2d2be 0%,#b9987c 80%); }
.sun-disc { position:absolute; width:320px; height:320px; border-radius:50%; border:1px solid rgba(108,58,34,.25); top:12%; left:22%; }
.sun-disc:after,.sun-disc:before { content:""; position:absolute; border-radius:50%; border:1px solid rgba(108,58,34,.16); inset:36px; }.sun-disc:after { inset:78px; background:rgba(244,237,223,.35); }
.cup-shadow { position:absolute; width:410px; height:90px; border-radius:50%; background:rgba(60,30,16,.18); filter:blur(17px); left:11%; top:58%; transform:rotate(-8deg); }
.cup { position:absolute; width:330px; height:230px; background:linear-gradient(125deg,#e9e3d8,#bdb1a0); border-radius:18px 18px 46% 46%; left:17%; top:36%; transform:rotate(-8deg); box-shadow:inset -24px -12px 45px rgba(80,54,40,.16),0 30px 50px rgba(60,30,16,.22); }
.coffee-surface { position:absolute; height:85px; left:0; right:0; top:-22px; border-radius:50%; background:radial-gradient(ellipse at 45% 42%,#a3633f 0 4%,#3b1d12 20%,#160b08 70%); border:12px solid #ded5c8; box-shadow:0 5px 10px rgba(0,0,0,.22); }
.cup-handle { position:absolute; width:110px; height:120px; border:22px solid #c7bdaf; border-left:0; border-radius:0 50% 50% 0; left:61%; top:43%; transform:rotate(-8deg); }
.coffee-bean { position:absolute; background:#65341e; width:57px; height:83px; border-radius:53% 47% 51% 49%; box-shadow:inset 10px 5px 15px rgba(255,255,255,.12),0 15px 20px rgba(60,30,15,.2); }.coffee-bean i,.large-bean i { position:absolute; width:3px; height:70%; background:#2e160e; left:50%; top:15%; border-radius:50%; transform:rotate(12deg); }
.bean-one { top:16%; right:12%; transform:rotate(36deg); }.bean-two { bottom:16%; left:12%; transform:rotate(-24deg) scale(.7); }
.visual-note { position:absolute; bottom:6%; right:7%; font-family:Georgia,serif; font-style:italic; font-size:14px; line-height:1.5; text-align:right; color:#5f4636; }
.ticker { min-height:72px; display:flex; align-items:center; justify-content:space-around; padding:0 3vw; background:var(--brown); color:#f4eadb; text-transform:uppercase; letter-spacing:.18em; font-size:10px; }.ticker i { width:4px; height:4px; background:#d3956d; transform:rotate(45deg); }
.section { padding:120px 7vw; }.section-heading { display:grid; grid-template-columns:1fr 2fr 1.25fr; gap:5vw; align-items:start; margin-bottom:65px; }.number { font-family:Georgia,serif; color:#9f9185; font-size:13px; }.section-heading .kicker { margin-top:18px; }.section-heading h2,.taste-intro h2,.guide h2 { font-family:Georgia,serif; font-size:clamp(44px,5vw,76px); font-weight:400; letter-spacing:-.05em; line-height:.94; margin:0; }.section-heading>p { font-family:Georgia,serif; color:#766c64; line-height:1.65; font-size:15px; }
.variety-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.variety-card { min-height:680px; display:flex; flex-direction:column; overflow:hidden; }.variety-card--arabica { background:#ded7c7; }.variety-card--robusta { background:#c59c7a; }.card-top { display:flex; justify-content:space-between; padding:24px 28px; text-transform:uppercase; letter-spacing:.14em; font-size:9px; border-bottom:1px solid rgba(47,31,21,.18); }
.bean-illustration { min-height:270px; display:grid; place-items:center; background:radial-gradient(circle,#ece7da,transparent 54%); }.bean-illustration--dark { background:radial-gradient(circle,#d8b698,transparent 54%); }.large-bean { width:145px; height:210px; border-radius:55% 45% 53% 47%; background:linear-gradient(120deg,#a7653f,#492615); transform:rotate(28deg); position:relative; box-shadow:inset 24px 10px 30px rgba(255,255,255,.15),0 26px 30px rgba(62,34,20,.22); }.large-bean i { width:8px; background:#2e160e; }.large-bean--round { transform:rotate(-23deg); width:165px; height:190px; background:linear-gradient(120deg,#835033,#301a11); }
.card-content { background:rgba(253,250,244,.94); padding:34px 40px 38px; flex:1; }.latin { font-family:Georgia,serif; font-style:italic; font-size:12px; color:var(--rust); }.card-content h3 { font-family:Georgia,serif; font-weight:400; font-size:42px; margin-bottom:16px; }.card-content>p:not(.latin) { color:#70665e; line-height:1.6; font-size:14px; max-width:540px; }
.taste-scale { display:grid; grid-template-columns:80px 1fr 55px; gap:12px; align-items:center; margin-top:17px; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }.taste-scale b { height:2px; background:#d7cec4; }.taste-scale b i { display:block; background:var(--rust); height:100%; }.taste-scale strong { font-weight:400; color:#857b72; text-align:right; }
.minor-varieties { border:1px solid var(--line); border-top:0; padding:27px 35px; }.minor-varieties p { margin:0; max-width:1020px; line-height:1.6; color:#6b625a; font-family:Georgia,serif; }.minor-varieties strong { color:var(--ink); margin-right:10px; }
.taste-section { background:var(--brown); color:#f6efe4; display:grid; grid-template-columns:42% 58%; gap:7vw; align-items:center; }.taste-intro>.number { color:#d09f7e; }.taste-intro h2 { margin:24px 0; }.taste-intro h2 em { color:#d99e76; }.taste-intro>p:not(.kicker) { color:#cdbeb0; line-height:1.7; max-width:500px; font-family:Georgia,serif; }.button--cream { border:1px solid #b89378; margin-top:25px; }.flavour-wheel { display:grid; grid-template-columns:1fr 1fr; border:1px solid rgba(255,255,255,.18); transform:rotate(3deg); }.flavour { min-height:235px; padding:35px; border:1px solid rgba(255,255,255,.18); display:flex; flex-direction:column; justify-content:flex-end; transition:background .25s,transform .25s; }.flavour:hover { transform:scale(1.02); z-index:2; }.flavour span { font-size:10px; margin-bottom:auto; }.flavour h3 { font:400 33px Georgia,serif; margin-bottom:8px; }.flavour p { font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:#decfc3; }.flavour--fruit:hover{background:#9b4930}.flavour--sweet:hover{background:#925b31}.flavour--nut:hover{background:#5b3927}.flavour--floral:hover{background:#6a644c}
.section-heading.compact { grid-template-columns:1fr 1.5fr 1fr; }.brew-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.brew-grid article { padding:42px 35px; min-height:370px; border-right:1px solid var(--line); display:flex; flex-direction:column; }.brew-grid article:last-child { border:0; }.brew-icon { font-family:Georgia,serif; font-size:65px; color:var(--rust); height:90px; }.brew-num { font-size:10px; color:#9a8e84; margin:30px 0 8px; }.brew-grid h3 { font:400 34px Georgia,serif; margin-bottom:16px; }.brew-grid article>p:not(.brew-num) { color:#766d65; font-family:Georgia,serif; line-height:1.6; font-size:14px; }.brew-grid small { margin-top:auto; color:#9c6b50; letter-spacing:.15em; font-size:9px; }
.guide { min-height:560px; padding:100px 20vw; background:#a84f2c; color:#fbf4e9; text-align:center; position:relative; overflow:hidden; display:flex; align-items:center; flex-direction:column; justify-content:center; }.guide>.bean-mark { margin-bottom:30px; }.guide .kicker { color:#f0c9af; }.guide h2 { margin:16px 0 26px; }.guide>p:not(.kicker) { max-width:740px; font:16px/1.7 Georgia,serif; color:#f0d9c7; }.button--light { background:#f5ede0; color:#6b351f; margin-top:22px; }.guide-orbit { position:absolute; border:1px solid rgba(255,255,255,.15); border-radius:50%; pointer-events:none; }.orbit-one { width:680px;height:680px; }.orbit-two { width:900px;height:320px; transform:rotate(-12deg); }
footer { min-height:110px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#7b7169; } footer p { margin:0; }
@media(max-width:900px){ nav{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding-top:80px}.hero-visual{min-height:560px}.section-heading,.section-heading.compact{grid-template-columns:1fr}.section-heading h2{margin:12px 0}.variety-grid{grid-template-columns:1fr}.taste-section{grid-template-columns:1fr}.brew-grid{grid-template-columns:1fr}.brew-grid article{border-right:0;border-bottom:1px solid var(--line);min-height:290px}.guide{padding:90px 8vw} }
@media(max-width:560px){.site-header{height:72px}.header-cta{font-size:0}.header-cta span{font-size:18px}.hero{min-height:auto}.hero-copy{padding:65px 6vw 45px}.hero-actions{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:55px}.hero-facts{grid-template-columns:1fr;gap:12px}.hero-facts div{border-bottom:1px solid var(--line);padding-bottom:10px}.hero-visual{min-height:460px}.cup{width:245px;height:185px;left:14%}.cup-handle{left:61%;top:45%;width:80px;height:90px}.sun-disc{width:250px;height:250px;left:15%}.ticker span:nth-of-type(even),.ticker i:nth-of-type(even){display:none}.section{padding:80px 6vw}.section-heading{margin-bottom:40px}.card-content{padding:30px 24px}.taste-scale{grid-template-columns:68px 1fr 50px}.flavour{min-height:190px;padding:22px}.flavour h3{font-size:24px}.flavour p{line-height:1.5}.guide{min-height:520px}footer{padding:35px 6vw;gap:22px;align-items:flex-start;flex-direction:column}footer p{line-height:1.5}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,nav a:after,.flavour{transition:none}}