@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); --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:2; 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%; } .animal-link { position:relative; z-index:2; display:block; 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 { 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; }
.filter-nav { position:fixed; z-index:3; bottom:8px; left:50%; display:flex; gap:13px; transform:translateX(-50%); 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:0; top:calc(-1 * env(safe-area-inset-top)); right:0; bottom:calc(-1 * env(safe-area-inset-bottom)); left:0; min-height:100vh; min-height:100svh; min-height:100dvh; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); display:flex; overflow:hidden; align-items:flex-start; justify-content:flex-start; background:var(--blue); color:rgba(255,255,255,.8); transition:opacity .24s ease,visibility .24s; } .landing-dismiss { position:fixed; z-index:50; top:calc(-1 * env(safe-area-inset-top)); right:0; bottom:calc(-1 * env(safe-area-inset-bottom)); left:0; width:auto; height:auto; border:0; padding:0; background:transparent; cursor:pointer; } .landing.is-gone,.landing-dismiss.is-gone { opacity:0; visibility:hidden; pointer-events:none; } .overlay-1 { --text-style:"overlay"; display:block; margin:10px 0 0 16px; color:rgba(255,255,255,.8); font-family:"Alte Haas Grotesk","Arial Rounded MT Bold",Arial,sans-serif; font-size:22vw; font-style:normal; font-weight:700; line-height:1; letter-spacing:-.025em; text-align:left; white-space:nowrap; } .overlay-1 a { color:rgba(255,255,255,.8); border-bottom:0 solid rgba(127,127,127,.2); text-decoration:none; } .overlay-1 .trademark { position:static; display:inline; margin-left:.025em; color:inherit; font-family:inherit; font-size:.56em; font-weight:inherit; line-height:1; vertical-align:baseline; } .landing > span { position:absolute; bottom:calc(10px + env(safe-area-inset-bottom)); font-size:10px; color:rgba(255,255,255,.8); }
.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; }
.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,.terms p { margin:0; font-size:clamp(1.35rem,2vw,1.8rem); line-height:1.03; }
.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; } .animal-index { padding:62px 18px 50px; } .animal-link { font-size:13vw; line-height:1.18; white-space:normal; } .animal-image { display:none; } .filter-nav { bottom:11px; gap:9px; max-width:100%; overflow-x:auto; padding:0 12px; } .filter-nav button { font-size:.5rem; } .back-link { top:18px; left:18px; font-size:11px; } .overlay-1 { margin:15px 0 0 15px; font-size:22vw; } .product { display:block; padding:65px 18px 9vh; } .product-info { padding-top:28px; } .prose { padding:110px 18px 9vh; } }