:root { --ink:#1d211c; --paper:#eee9df; --clay:#b7472f; --lime:#c8d66b; --line:rgba(29,33,28,.24); --ease:cubic-bezier(.22,1,.36,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial, Helvetica, sans-serif; overflow-x:hidden; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:100%; object-fit:cover; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { height:96px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 3.2vw; border-bottom:1px solid var(--line); font-size:11px; text-transform:uppercase; letter-spacing:.11em; }
.wordmark { font-weight:900; font-size:25px; letter-spacing:-.06em; justify-self:start; display:inline-flex; align-items:flex-start; line-height:1; }
sup { font-size:.36em; vertical-align:top; margin:0 0 0 4px; line-height:1; }
nav { display:flex; gap:42px; }
nav a, .bag { position:relative; }
nav a::after, .bag::after { content:""; position:absolute; left:0; bottom:-8px; width:0; height:1px; background:currentColor; transition:width .4s var(--ease); }
nav a:hover::after, .bag:hover::after { width:100%; }
.bag { justify-self:end; }.bag span { opacity:.55; }
.hero { min-height:calc(100svh - 96px); display:grid; grid-template-columns:44% 51% 5%; border-bottom:1px solid var(--line); }
.hero-copy { padding:7vh 4vw 5vh 3.2vw; display:flex; flex-direction:column; align-items:flex-start; animation:rise-in .9s var(--ease) both; }
.eyebrow,.section-no { font-size:11px; line-height:1; text-transform:uppercase; letter-spacing:.12em; }
h1,h2 { font-family:Georgia, 'Times New Roman', serif; font-weight:400; letter-spacing:-.055em; margin:0; }
h1 { font-size:clamp(84px,9.6vw,170px); line-height:.78; margin:10vh 0 5.5vh; }
.intro { width:min(390px,90%); font-family:Georgia,serif; font-size:18px; line-height:1.58; }
.text-link { margin-top:auto; min-width:270px; text-transform:uppercase; font-size:10px; letter-spacing:.13em; border-bottom:1px solid; padding:14px 0; display:flex; justify-content:space-between; gap:50px; transition:padding .35s var(--ease); }
.text-link:hover { padding-left:10px; }
.hero-image { margin:3.2vh 0; height:calc(100svh - 13vh); position:relative; overflow:hidden; background:#d7c7b4; animation:image-reveal 1.15s .12s var(--ease) both; }
.hero-image img { filter:saturate(.7) contrast(.98); transform:scale(1.035); transition:transform 1.2s var(--ease),filter .8s ease; }
.hero-image:hover img { transform:scale(1); filter:saturate(.86) contrast(1); }
.hero-image figcaption { position:absolute; bottom:0; left:0; background:var(--paper); padding:11px 18px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.vertical-note { writing-mode:vertical-rl; transform:rotate(180deg); margin:auto; font-size:9px; letter-spacing:.17em; }
.statement { min-height:76vh; display:grid; grid-template-columns:15% minmax(0,860px) 1fr; gap:5vw; align-items:center; padding:10vw 3.2vw; border-bottom:1px solid var(--line); }
.statement .section-no { align-self:start; }
.lead { max-width:390px; font-size:11px; line-height:1.5; text-transform:uppercase; letter-spacing:.13em; }
.statement-text { font-family:Georgia,serif; font-size:clamp(64px,6.4vw,106px); letter-spacing:-.052em; line-height:.9; margin:38px 0 0; max-width:860px; font-weight:400; }
.statement-detail { max-width:480px; margin:42px 0 0; font-family:Georgia,serif; font-size:16px; line-height:1.65; }
.stamp { width:128px; aspect-ratio:1; border:1px solid; border-radius:50%; justify-self:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; transform:rotate(4deg); }
.stamp span { font-family:Georgia,serif; font-size:17px; line-height:1; }.stamp small { font-size:8px; letter-spacing:.18em; line-height:1; }
.collection { padding:12vw 3.2vw 11vw; background:#d9d4c9; }
.section-heading { display:grid; grid-template-columns:15% 1fr 23%; gap:5vw; align-items:end; margin-bottom:8vw; }
.section-heading h2 { font-size:clamp(76px,9vw,145px); line-height:.78; }
.section-heading>p:last-child { font-family:Georgia,serif; font-size:16px; line-height:1.5; max-width:300px; }
.product-grid { display:grid; grid-template-columns:1.12fr .86fr 1fr; gap:3.2vw; align-items:start; }
.product:nth-child(2) { margin-top:14vw; }.product:nth-child(3) { margin-top:4vw; }
.product-image { aspect-ratio:3/4; position:relative; overflow:hidden; background:#c8bfb0; }
.product-image img { filter:saturate(.68); transform:scale(1.01); transition:transform 1s var(--ease), filter .8s ease; }
.product-image span { position:absolute; top:12px; left:14px; color:white; font-size:10px; }
.product-image b { position:absolute; inset:auto 16px 16px auto; background:var(--lime); width:102px; height:102px; border-radius:50%; display:grid; place-items:center; font-size:9px; text-transform:uppercase; letter-spacing:.09em; transform:scale(0); transition:transform .45s var(--ease); }
.product a:hover img { transform:scale(1.055); filter:saturate(.9); }.product a:hover b { transform:scale(1); }
.product-meta { display:flex; justify-content:space-between; gap:20px; padding-top:16px; border-top:1px solid; margin-top:12px; }
.product h3 { margin:0 0 7px; font-family:Georgia,serif; font-size:22px; font-weight:400; }.product p,.product strong { margin:0; font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:400; }
.workshop { display:grid; grid-template-columns:58% 42%; min-height:100svh; background:var(--clay); color:#f4eadf; }
.workshop-photo { margin:0; position:relative; overflow:hidden; }.workshop-photo img { filter:grayscale(.08) sepia(.12); transition:transform 1.2s var(--ease); }.workshop-photo:hover img { transform:scale(1.025); }
.workshop-photo span { position:absolute; top:18px; right:18px; width:95px; height:95px; border-radius:50%; background:var(--paper); color:var(--ink); display:grid; place-items:center; text-align:center; font-family:Georgia,serif; font-style:italic; font-size:14px; transform:rotate(7deg); }
.workshop-copy { padding:9vw 5vw 6vw; display:flex; flex-direction:column; align-items:flex-start; }
.workshop-copy h2 { font-size:clamp(78px,8vw,132px); line-height:.78; margin:9vh 0 6vh; }
.workshop-copy>p:not(.section-no) { font-family:Georgia,serif; max-width:510px; font-size:17px; line-height:1.65; }
.workshop-info { width:100%; display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.55); margin-top:auto; padding-top:14px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.button { margin-top:30px; width:100%; padding:22px 0; display:flex; justify-content:space-between; border-bottom:1px solid; text-transform:uppercase; font-size:11px; letter-spacing:.12em; transition:padding .35s var(--ease),background .35s,color .35s; }.button:hover { padding-left:16px; padding-right:16px; background:#f4eadf; color:var(--clay); }
.newsletter { padding:13vw 3.2vw; text-align:center; border-bottom:1px solid var(--line); }.newsletter>p { font-size:10px; text-transform:uppercase; letter-spacing:.15em; }.newsletter h2 { font-size:clamp(68px,8.8vw,145px); line-height:.84; margin:5vw auto; }.contact-link { width:min(680px,100%); margin:0 auto; padding:21px 0; border-bottom:1px solid; display:flex; justify-content:space-between; font-family:Georgia,serif; font-size:20px; text-align:left; transition:padding .35s var(--ease); }.contact-link:hover { padding-left:12px; padding-right:12px; }.contact-link span { font-family:Arial,sans-serif; }
footer { padding:8vw 3.2vw 3vw; display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:4vw; min-height:430px; align-items:start; font-size:12px; }.footer-brand { display:flex; align-items:flex-start; font-size:clamp(64px,8vw,130px); font-weight:900; letter-spacing:-.08em; line-height:.82; }.footer-brand sup { font-size:10px; }.footer-last { display:flex; flex-direction:column; min-height:270px; }.footer-last a { margin-top:auto; }footer p { opacity:.55; text-transform:uppercase; letter-spacing:.13em; font-size:9px; margin:0 0 20px; }footer div:not(:first-child) a { display:block; font-family:Georgia,serif; line-height:1.55; margin-bottom:12px; }.social-note { display:block; margin-top:9px; font-family:Georgia,serif; opacity:.55; }
@keyframes rise-in { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes image-reveal { from { opacity:0; clip-path:inset(0 0 100% 0); } to { opacity:1; clip-path:inset(0); } }
@media (max-width:800px) {
  .site-header { height:70px; padding:0 20px; grid-template-columns:1fr auto; }.site-header nav { display:none; }.wordmark { font-size:22px; }.bag { font-size:10px; padding:14px 0; }
  .hero { min-height:auto; display:grid; grid-template-columns:1fr; padding:0 20px 24px; }.hero-copy { padding:45px 0 34px; }.hero h1 { margin:48px 0 30px; font-size:20vw; }.intro { font-size:17px; }.text-link { margin-top:27px; padding-top:12px; }.hero-image { order:2; margin:0; height:68vh; }.vertical-note { display:none; }
  .statement { min-height:auto; grid-template-columns:1fr; gap:44px; padding:100px 20px; }.statement .section-no { align-self:auto; }.statement-text { font-size:58px; margin-top:28px; }.statement-detail { margin-top:30px; font-size:16px; }.stamp { width:112px; justify-self:end; }
  .collection { padding:110px 20px; }.section-heading { grid-template-columns:1fr; gap:30px; margin-bottom:75px; }.section-heading h2 { font-size:72px; }.product-grid { grid-template-columns:1fr; gap:78px; }.product:nth-child(2),.product:nth-child(3) { margin-top:0; }.product-image b { width:86px;height:86px;transform:scale(1); }
  .workshop { grid-template-columns:1fr; }.workshop-photo { height:68vh; margin:0; }.workshop-copy { padding:75px 20px 80px; }.workshop-copy h2 { font-size:76px; }.workshop-info { margin-top:70px; }
  .newsletter { padding:90px 20px; }.newsletter h2 { font-size:48px; margin:45px 0; }
  footer { grid-template-columns:1fr 1fr; padding:70px 20px 30px; }.footer-brand { grid-column:1/-1; margin-bottom:40px; }.footer-last { min-height:150px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }
