@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400&family=EB+Garamond:wght@400&display=swap');
@font-face { font-family:"Alte Haas Grotesk"; src:url("fonts/AlteHaasGroteskBold.ttf") format("truetype"); font-style:normal; font-weight:700; font-display:swap; }
:root { --paper:#f8f6f2; --ink:#242321; --blue:rgba(2,0,255,.9); --green:#209c4f; --green-cream:#d0e6d5; --line:rgba(36,35,33,.25); }
* { box-sizing:border-box; } html { background:var(--paper); } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Mono", monospace; font-size:11px; } a { color:inherit; } button { font:inherit; color:inherit; }
.site-header { position:fixed; inset:0 0 auto; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:17px 3.4vw; pointer-events:none; } .site-header a,.site-header button { pointer-events:auto; } .site-title { font-family:"EB Garamond",Garamond,serif; font-size:11px; font-weight:400; line-height:1.1; letter-spacing:-.014em; text-decoration:none; visibility:hidden; } nav { display:flex; gap:15vw; } nav a { font-family:"EB Garamond",Garamond,serif; font-size:11px; font-weight:400; line-height:1.1; letter-spacing:-.014em; text-decoration:none; } nav a:hover,.prose a:hover { text-decoration:underline; } .cart-toggle { justify-self:end; border:0; padding:0; background:none; cursor:pointer; }
.animal-index { position:relative; z-index:1; padding:62px 16px 8vh; max-width:1000px; } .animal { position:relative; width:max-content; max-width:100%; margin-bottom:.5em; } .animal-link { position:relative; z-index:2; display:block; border:0; margin:0; padding:0; background:none; text-align:left; cursor:pointer; font-family:"EB Garamond",Garamond,serif; font-style:italic; font-weight:400; font-size:clamp(2.8rem,4vw,4rem); line-height:1.05; letter-spacing:-.03em; text-decoration:none; white-space:nowrap; } .animal-image-btn { display:block; border:0; margin:0; padding:0; background:none; cursor:pointer; } .animal-image { position:absolute; z-index:1; left:55%; top:38%; width:min(42vw,470px); aspect-ratio:4/3; object-fit:cover; opacity:0; transform:translate(-12%,-46%) scale(.97); transition:opacity .2s ease,transform .25s ease; pointer-events:none; } .animal:hover .animal-image,.animal:focus-within .animal-image { opacity:1; transform:translate(-12%,-46%) scale(1); pointer-events:auto; }
.cart-hint { position:fixed; z-index:3; left:16px; bottom:11px; margin:0; padding:3px 8px 3px 0; background:var(--paper); color:rgba(0,0,0,.55); font-family:"Diatype Mono Variable","DM Mono",monospace; font-size:.55rem; font-variation-settings:'slnt' 0,'MONO' 1; pointer-events:none; }
.filter-nav { position:fixed; z-index:3; bottom:8px; left:50%; transform:translateX(-50%); } .filter-scroll { display:flex; gap:13px; align-items:center; white-space:nowrap; } .filter-nav button { padding:0; border:0; background:none; color:rgba(0,0,0,.75); font-family:"Diatype Mono Variable","DM Mono",monospace; font-size:.55rem; font-style:normal; font-weight:450; line-height:1.1; letter-spacing:0; font-variation-settings:'slnt' 0,'MONO' 1; text-transform:lowercase; cursor:pointer; } .filter-nav button:hover,.filter-nav button:focus-visible,.filter-nav button[aria-pressed="true"] { text-decoration:underline; text-underline-offset:2px; }
.back-link { position:fixed; z-index:21; top:17px; left:3.4vw; color:inherit; font-family:"DM Mono",monospace; font-size:11px; line-height:1; text-decoration:none; } .back-link:hover,.back-link:focus-visible { text-decoration:underline; text-underline-offset:2px; } .product-page .site-title { visibility:hidden; }
.index-page { background:transparent; } .landing { position:fixed; z-index:10; top:0; right:0; left:0; height:100vh; height:100svh; height:100dvh; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); overflow:hidden; background:var(--green); color:var(--green-cream); transition:opacity .24s ease,visibility .24s; } .landing-dismiss { position:fixed; z-index:50; top:0; right:0; left:0; height:100vh; height:100svh; height:100dvh; width:auto; border:0; padding:0; background:transparent; cursor:pointer; } .landing.is-gone,.landing-dismiss.is-gone { opacity:0; visibility:hidden; pointer-events:none; }
.landing-names { position:absolute; z-index:1; inset:0; overflow:hidden; padding:64px 16px 8vh; pointer-events:none; }
.landing-names span { display:block; font-family:"EB Garamond",Garamond,serif; font-style:italic; font-weight:400; font-size:clamp(1.8rem,3.2vw,3rem); line-height:1.15; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; }
.landing-headline { position:relative; z-index:2; margin:0; padding:56px 16px 0; color:var(--green-cream); font-family:"Alte Haas Grotesk","Arial Rounded MT Bold",Arial,sans-serif; font-weight:700; letter-spacing:-.02em; text-transform:uppercase; }
.landing-headline-desktop { font-size:clamp(2.2rem,8vw,6.5rem); line-height:.98; }
.landing-headline-mobile { display:none; }
.landing-headline-small { font-size:.4em; letter-spacing:0; vertical-align:middle; }
.landing-italic { font-style:italic; }
.landing-underline { text-decoration:underline; text-underline-offset:4px; }
.landing > span { position:absolute; z-index:2; left:16px; bottom:calc(24px + env(safe-area-inset-bottom)); font-size:10px; color:var(--green-cream); }
.product { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:7vw; max-width:1240px; margin:auto; padding:96px 4vw 7vw; } .product-image { width:100%; aspect-ratio:4/3; object-fit:cover; } .product-info { align-self:start; padding-top:10px; } .product h1,.prose h1 { margin:0 0 28px; font-family:"EB Garamond",Garamond,serif; font-size:clamp(3.4rem,6vw,6rem); font-style:normal; font-weight:400; line-height:1.05; letter-spacing:-.03em; } .price { margin-bottom:32px; font-size:13px; } fieldset { border:0; margin:0 0 34px; padding:0; } legend { margin-bottom:12px; } .color-options { display:flex; flex-wrap:wrap; gap:8px; } .color-options button { border:1px solid var(--ink); padding:8px 10px; background:transparent; cursor:pointer; } .color-options button[aria-pressed="true"] { background:var(--ink); color:var(--paper); } .add-button { width:100%; border:1px solid var(--ink); padding:13px; background:var(--ink); color:var(--paper); cursor:pointer; } .add-button:hover { background:transparent; color:var(--ink); }
.prose { max-width:700px; padding:145px 4vw 10vh; } .prose p { max-width:590px; font-family:"EB Garamond",Garamond,serif; font-size:clamp(2rem,3.5vw,3.2rem); line-height:1.05; letter-spacing:-.03em; }
.story + .prose { max-width:1000px; padding:12px 16px 8vh; }
.story { position:relative; z-index:1; padding:62px 16px 8vh; max-width:1000px; } .story p { margin:0; font-family:"EB Garamond",Garamond,serif; font-weight:400; font-size:clamp(2.8rem,5vw,4.5rem); line-height:1.05; letter-spacing:-.03em; }
.term { position:relative; display:inline-block; }
.term-italic { font-style:italic; }
.term-underline { text-decoration:underline; text-underline-offset:4px; }
.term-image { position:absolute; z-index:5; left:50%; bottom:100%; margin-bottom:16px; width:min(40vw,420px); aspect-ratio:4/3; object-fit:cover; opacity:0; transform:translate(-50%,6px) scale(.97); transition:opacity .2s ease,transform .25s ease; pointer-events:none; }
.term:hover .term-image,.term:focus .term-image,.term:focus-within .term-image { opacity:1; transform:translate(-50%,0) scale(1); pointer-events:auto; }
.contact a { color:var(--blue); text-decoration:none; } .contact a:hover,.contact a:focus-visible { text-decoration:none; } .page-links { display:flex; gap:14px; font-family:"Diatype Mono Variable","DM Mono",monospace !important; font-size:11px !important; letter-spacing:0 !important; } .about-page .site-title { visibility:hidden; } .faq section { margin:0 0 58px; } .faq h2 { margin:0 0 16px; font-family:"EB Garamond",Garamond,serif; font-size:clamp(2.8rem,4vw,4rem); font-style:italic; font-weight:400; line-height:1; letter-spacing:-.03em; } .faq h3 { margin:24px 0 5px; font-family:"Diatype Mono Variable","DM Mono",monospace; font-size:11px; font-weight:400; } .faq h3 + p { margin:0; font-size:clamp(1.35rem,2vw,1.8rem); line-height:1.03; }
.terms p { max-width:590px; font-size:clamp(1.35rem,2vw,1.8rem); line-height:1.05; letter-spacing:-.03em; }
.cart-backdrop { position:fixed; z-index:29; inset:0; background:rgba(36,35,33,.16); } .cart-drawer { position:fixed; z-index:30; top:0; right:0; height:100%; width:min(440px,100%); padding:30px; background:var(--paper); border-left:1px solid var(--ink); transform:translateX(101%); transition:transform .25s ease; display:flex; flex-direction:column; } .cart-drawer.open { transform:translateX(0); } .cart-head { display:flex; justify-content:space-between; margin-bottom:35px; } .cart-close { border:0; padding:0; background:none; cursor:pointer; } .cart-item { display:grid; grid-template-columns:76px 1fr auto; gap:12px; margin-bottom:18px; } .cart-item img { width:76px; height:57px; object-fit:cover; } .cart-item p { margin:0 0 5px; } .remove { align-self:end; border:0; padding:0; background:none; text-decoration:underline; cursor:pointer; } .cart-footer { margin-top:auto; border-top:1px solid var(--line); padding-top:16px; } .checkout { display:block; width:100%; margin-top:14px; border:1px solid var(--ink); padding:13px; background:var(--ink); color:var(--paper); text-align:center; text-decoration:none; }
@media (max-width:650px) { .site-header { padding:18px 18px; grid-template-columns:1fr auto 1fr; } .site-title { visibility:visible; font-size:11px; } .site-header nav { display:flex; justify-self:center; gap:0; } .site-header nav a:first-child { display:none; } .index-page { height:100dvh; overflow:hidden; } .index-page main { height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; } .animal-index { padding:62px 18px 90px; } .animal-link { font-size:13vw; line-height:1.05; white-space:normal; margin-bottom:.2em; } .animal-image { display:none; } .term-image { display:none; } .filter-nav { left:0; right:0; bottom:0; width:100%; transform:none; padding:14px 12px calc(14px + env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--line); } .filter-nav::after { content:""; position:fixed; z-index:3; left:0; right:0; bottom:-150px; height:150px; background:var(--paper); pointer-events:none; } .filter-scroll { justify-content:center; gap:16px; max-width:100%; overflow-x:auto; } .filter-nav button { font-size:.7rem; } .back-link { top:18px; left:18px; font-size:11px; } .cart-hint { left:0; bottom:calc(58px + env(safe-area-inset-bottom)); padding:4px 10px; font-size:.5rem; } .landing-names { padding:70px 18px 90px; } .landing-names span { font-size:clamp(1.4rem,7vw,2rem); } .landing-headline { padding:70px 18px 0; } .landing-headline-desktop { display:none; } .landing-headline-mobile { display:block; font-size:clamp(2.4rem,15vw,4.5rem); line-height:1.03; } .product { display:block; padding:65px 18px 9vh; } .product-info { padding-top:28px; } .prose { padding:110px 18px 9vh; } .story { padding:90px 18px 12vh; } .story p { font-size:10vw; } .story + .prose { padding:6px 18px 9vh; } }