/* ========================================================================== julianyc.com — site styles. Tokens live in critical.css (inlined in ). Mobile-first. Black is the ground, cyan does the work; purple + rose belong to the mark. ========================================================================== */ /* ---------- ambient texture: the tag pattern, black on black ---------- */ body::before{ content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none; background:url(/assets/img/brand/pattern.svg) center/420px auto repeat; opacity:.035; } @media (prefers-reduced-motion:no-preference){ body::before{animation:drift 90s linear infinite alternate} @keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-3%,-2%,0)}} } /* ---------- type ---------- */ h1,h2,h3,h4{margin:0;line-height:1.05;text-wrap:balance} p{margin:0} a{color:var(--cyan)} .display-script{font-family:var(--font-script);font-weight:400;letter-spacing:0} .display-caps{font-family:var(--font-caps);font-weight:900;font-variation-settings:"wdth" 70;text-transform:uppercase;letter-spacing:.02em} .wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto} section{position:relative} .section-head{margin-bottom:var(--s-6)} .section-head h2{font-size:clamp(2.6rem,9vw,4.5rem);line-height:.95} .section-head h2 .display-caps{display:block;font-size:.5em;color:var(--ink-2);letter-spacing:.14em;margin-bottom:.15em} .section-head h2 .display-script{display:block;color:var(--white)} .section-sub{margin-top:var(--s-4);max-width:38rem;color:var(--ink-2);font-size:1.05rem} .section-script{font-size:clamp(2.4rem,8vw,4rem);color:var(--white)} /* ---------- reveal on scroll: visible at rest, JS adds .reveal-pending before first paint of the element ---------- */ .reveal{opacity:1;transform:none} @media (prefers-reduced-motion:no-preference){ .js .reveal.reveal-pending{opacity:0;transform:translate3d(0,18px,0)} .js .reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)} } /* ---------- hero ---------- */ .hero{min-height:calc(100svh - 3.6rem);display:grid;align-items:end;overflow:clip;isolation:isolate} .hero-bg{position:absolute;inset:0;z-index:-1} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(.55) brightness(.6)} .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,hsl(0 0% 0% / .25),hsl(0 0% 0% / .1) 35%,hsl(0 0% 0% / .92) 85%,#000)} .hero-inner{position:relative;width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto;padding:var(--s-7) 0 var(--s-8);display:grid;gap:var(--s-5);justify-items:start} .mark{width:min(88vw,34rem);margin:0 auto var(--s-2);justify-self:center;filter:drop-shadow(0 18px 40px hsl(0 0% 0% / .55))} .mark-svg{width:100%;height:auto;overflow:visible} .hero-title{display:grid;gap:.1em;color:var(--white)} .hero-title .display-script{font-size:clamp(3rem,13vw,7rem);line-height:.9;color:var(--white)} .hero-title .display-caps{font-size:clamp(1.1rem,4.6vw,2.2rem);letter-spacing:.22em;color:var(--cyan)} .hero-sub{max-width:34rem;color:var(--ink-2);font-size:1.05rem} .hero-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);width:100%} .btn-lg{min-height:3.5rem;padding:.9rem 1.8rem;font-size:1.05rem} @media (max-width:480px){.hero-cta .btn{flex:1 1 10rem}} /* mark entrance + kinetic type — motion only when allowed; everything is visible at rest */ @media (prefers-reduced-motion:no-preference){ .js .mark-fill{transform-origin:50% 60%;animation:mark-fill 1.1s var(--ease) both} .js .mark-outline{clip-path:polygon(-20% 0,-20% 0,-5% 100%,-5% 100%);animation:wipe 1.3s .35s var(--ease) forwards} .js .mark-tag{clip-path:inset(0 100% 0 0);animation:write 1s 1.15s cubic-bezier(.4,0,.2,1) forwards} @keyframes mark-fill{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}} @keyframes wipe{to{clip-path:polygon(-20% 0,120% 0,140% 100%,-5% 100%)}} @keyframes write{to{clip-path:inset(0 -8% 0 0)}} .js .kinetic .word{display:inline-block;animation:rise .8s var(--ease) both;animation-delay:calc(1.4s + var(--i,0)*.12s)} @keyframes rise{from{opacity:0;transform:translate3d(0,.35em,0) rotate(-2deg)}to{opacity:1;transform:none}} .js .hero-title .display-caps,.js .hero-sub,.js .hero-cta{animation:fade .8s 1.9s var(--ease) both} @keyframes fade{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}} } .kinetic .word{display:inline-block;white-space:pre} /* ---------- about ---------- */ .about{padding:var(--s-8) 0} .about-grid{display:grid;gap:var(--s-6);margin-top:var(--s-5)} .lede{font-size:clamp(1.15rem,2.4vw,1.45rem);line-height:1.45;color:var(--ink);max-width:40rem;font-weight:400} .about-facts{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)} .about-facts li{display:grid;gap:.15rem;padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-2);background:hsl(0 0% 100% / .03)} .about-facts strong{font-family:var(--font-caps);font-weight:900;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan);font-size:.95rem} .about-facts span{color:var(--ink-2);font-size:.95rem} .about-art{margin:0;justify-self:center;width:min(9rem,40vw);filter:drop-shadow(0 14px 30px hsl(0 0% 0% / .6))} .about-art img{width:100%;height:auto} @media (min-width:760px){.about-grid{grid-template-columns:1.3fr auto 1fr;align-items:center}.about-art{width:9rem}} /* ---------- find julia ---------- */ .find{padding:var(--s-8) 0;border-top:1px solid var(--line)} .find-layout{display:grid;gap:var(--s-6)} .map-wrap{position:relative} .map{position:relative;width:100%;aspect-ratio:4/3;max-height:70vh;border-radius:var(--r-3);overflow:hidden;background:#0b0b0b;border:1px solid var(--line-2);isolation:isolate} .map:not(.map-ready){display:grid;place-items:center} .map-noscript{color:var(--ink-2);padding:var(--s-4);text-align:center} .map-legend{display:flex;gap:var(--s-4);margin-top:var(--s-3);color:var(--ink-3);font-size:.85rem} .legend-item{display:inline-flex;align-items:center;gap:.4rem} .legend-item i{width:.8rem;height:.8rem;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 2px #000} .legend-event i{background:transparent;border:2px dashed var(--cyan)} @media (min-width:900px){ .find-layout{grid-template-columns:minmax(0,1.1fr) minmax(22rem,.9fr);align-items:start} .map-wrap{position:sticky;top:5rem} .map{aspect-ratio:auto;height:min(72vh,44rem);max-height:none} } /* map theming — MapLibre, dark, brand accents */ .map.map-ready{display:block} .maplibregl-map{font-family:var(--font-body)!important;font-size:.9rem} .maplibregl-canvas:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px} .maplibregl-ctrl-group{background:var(--surface-2)!important;border:1px solid var(--line-2)!important;box-shadow:0 8px 24px hsl(0 0% 0% / .5)!important;border-radius:var(--r-2)!important} .maplibregl-ctrl-group button{width:2.5rem!important;height:2.5rem!important;background:transparent!important} .maplibregl-ctrl-group button+button{border-top:1px solid var(--line)!important} .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)} .maplibregl-ctrl-group button:hover{background:#222!important} .maplibregl-ctrl-attrib{background:hsl(0 0% 0% / .65)!important;color:var(--ink-3)!important;font-size:.65rem!important} .maplibregl-ctrl-attrib a{color:var(--ink-2)!important} .maplibregl-ctrl-attrib-button{filter:invert(1)} .maplibregl-cooperative-gesture-screen{background:hsl(0 0% 0% / .6);color:var(--white);font-size:.95rem} .julia-popup .maplibregl-popup-content{background:var(--surface-2);color:var(--ink);padding:.9rem 1rem;border-radius:var(--r-2);border:1px solid var(--line-2);box-shadow:0 12px 32px hsl(0 0% 0% / .6);line-height:1.4} .julia-popup .maplibregl-popup-tip{border-top-color:var(--surface-2)!important;border-bottom-color:var(--surface-2)!important} .julia-popup .maplibregl-popup-close-button{color:var(--ink-2);font-size:1.3rem;padding:.2rem .5rem;right:2px;top:2px} .julia-popup .maplibregl-popup-close-button:hover{background:transparent;color:var(--white)} .pop-kind{margin:0;font-family:var(--font-caps);font-weight:900;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:var(--cyan)} .pop-name{font-weight:700;font-size:1.05rem;margin:.1rem 0 .2rem;color:var(--white)} .pop-addr{color:var(--ink-2);font-size:.9rem;margin:0} .pop-date{color:var(--ink);font-size:.9rem;margin:.25rem 0 0} .pop-dir{display:inline-block;margin-top:.6rem;padding:.45rem .9rem;background:var(--cyan);color:#000!important;border-radius:var(--r-pill);font-weight:700;text-decoration:none;font-size:.9rem} /* pins (custom marker elements) */ .pin{position:relative;width:32px;height:40px;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 4px 8px hsl(0 0% 0% / .6));transition:transform .25s var(--ease);transform-origin:50% 100%} .pin svg{width:32px;height:40px;overflow:visible;display:block} .pin-stockist svg .pin-body{fill:var(--cyan);stroke:#000;stroke-width:1.5} .pin-stockist svg .pin-dot{fill:#000} .pin-event svg .pin-body{fill:#0a0a0a;stroke:var(--cyan);stroke-width:2.5;stroke-dasharray:4 3} .pin-event svg .pin-dot{fill:var(--cyan)} .pin.is-active,.pin:hover,.pin:focus-visible{transform:scale(1.18)} .pin:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%} .maplibregl-marker{will-change:transform} @media (prefers-reduced-motion:no-preference){ .pin-event::after{content:"";position:absolute;left:50%;top:14px;width:22px;height:22px;translate:-50% -50%;border-radius:50%;border:2px solid var(--cyan);opacity:0;animation:pulse 2.4s ease-out infinite;pointer-events:none} @keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.4);opacity:0}} } /* filters + list */ .filters{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-bottom:var(--s-5)} .chips{display:flex;flex-wrap:wrap;gap:.5rem} .chips-scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:none;-webkit-overflow-scrolling:touch} .chips-scroll::-webkit-scrollbar{display:none} .chip{min-height:2.6rem;padding:.5rem 1rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s} .chip:hover{color:var(--white);border-color:var(--white)} .chip.is-active{background:var(--cyan);color:#000;border-color:var(--cyan)} .chip .count{opacity:.7;font-weight:500;margin-left:.15em} .select-wrap select{min-height:2.6rem;padding:.5rem 2.2rem .5rem 1rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237EFAFA' stroke-width='2'/%3E%3C/svg%3E") right .9rem center/.7rem no-repeat;color:var(--ink);font:inherit;font-weight:600;font-size:.95rem;appearance:none;-webkit-appearance:none} .places-h{font-family:var(--font-caps);font-weight:900;font-variation-settings:"wdth" 72;text-transform:uppercase;letter-spacing:.16em;font-size:.85rem;color:var(--ink-3);margin:var(--s-5) 0 var(--s-3)} .places-h:first-of-type{margin-top:0} .place-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)} .place{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-3);background:hsl(0 0% 100% / .03);transition:border-color .25s,background-color .25s,transform .25s var(--ease)} .place:hover{border-color:var(--line-2)} .place.is-active{border-color:var(--cyan);background:hsl(180 93% 74% / .06)} .place[hidden]{display:none} .place-date{display:grid;justify-items:center;align-content:start;align-self:start;min-width:3.6rem;padding:.5rem .4rem;border-radius:var(--r-2);background:#000;border:1px dashed var(--cyan);color:var(--white);line-height:1;text-align:center} .date-dow{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--cyan);font-weight:700} .date-day{font-family:var(--font-caps);font-weight:900;font-variation-settings:"wdth" 75;font-size:1.7rem;margin:.15rem 0} .date-mon{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)} .place.is-today .place-date{background:var(--cyan);color:#000;border-style:solid} .place.is-today .date-dow,.place.is-today .date-mon{color:#000} .place-pin{width:.9rem;height:.9rem;margin-top:.4rem;align-self:start;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px #000,0 0 0 4px var(--line-2)} .place-body{display:grid;gap:.25rem;min-width:0} .place-kind{font-family:var(--font-caps);font-weight:900;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--cyan)} .place-kind strong{color:var(--white)} .place-name{font-size:1.25rem;font-weight:700;color:var(--white)} .place-name a{color:inherit;text-decoration:none} .place-name a:hover{color:var(--cyan)} .place-addr{color:var(--ink-2);font-size:.95rem;user-select:all;-webkit-user-select:all} .place-addr .venue{color:var(--ink);font-weight:600} .place-addr .hood{color:var(--ink-3);user-select:none;-webkit-user-select:none} .place-note{color:var(--ink-3);font-size:.9rem} .place-phone{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-2)} .place-phone:hover{color:var(--cyan);border-color:var(--cyan)} .place-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem} .btn-small{min-height:2.5rem;padding:.45rem 1rem;font-size:.9rem} .empty{padding:var(--s-5);border:1px dashed var(--line-2);border-radius:var(--r-3);color:var(--ink-2);display:grid;gap:var(--s-3)} .empty strong{color:var(--white)} .empty-buyer{color:var(--ink-3)} .no-results{color:var(--ink-3);padding:var(--s-4) 0} /* ---------- products ---------- */ .products{padding:var(--s-8) 0;border-top:1px solid var(--line)} .line-nav{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:var(--s-4) 0 var(--s-6);font-size:.95rem} .line-nav a{color:var(--ink-3);text-decoration:none;font-weight:600;padding:.25rem 0;border-bottom:1px solid transparent} .line-nav a:hover{color:var(--cyan);border-color:var(--cyan)} .line{padding:var(--s-6) 0;border-top:1px solid var(--line)} .line[hidden]{display:none} .line-head{display:grid;gap:.25rem;margin-bottom:var(--s-5)} .line-name{font-size:clamp(2.2rem,7vw,3.4rem);color:var(--white)} .line-format{font-family:var(--font-caps);font-weight:900;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--cyan)} .line-blurb{color:var(--ink-2);max-width:38rem} .grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)} @media (min-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:var(--s-5)}} .card{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);overflow:hidden;transition:border-color .25s,transform .3s var(--ease),box-shadow .3s} .card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 16px 40px hsl(0 0% 0% / .5)} .card[hidden]{display:none} .card-media{--accent:var(--cyan);aspect-ratio:4/5;display:grid;place-items:center;padding:var(--s-3)} .card-media img{width:auto;height:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 12px 22px hsl(0 0% 0% / .55));transition:transform .4s var(--ease)} .card:hover .card-media img{transform:translateY(-4px) scale(1.03)} .card-tile{position:relative;display:grid;place-items:center;width:100%;height:100%;color:var(--white)} .tile-glow{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 55%,transparent),transparent 72%);filter:blur(6px);opacity:.75;transition:opacity .4s,transform .5s var(--ease)} .card-tile svg{position:relative;width:52%;height:auto;filter:drop-shadow(0 6px 14px hsl(0 0% 0% / .6));transition:transform .4s var(--ease)} .card:hover .tile-glow{opacity:1;transform:scale(1.08)} .card:hover .card-tile svg{transform:translateY(-4px)} .card-media{background:linear-gradient(to top,hsl(0 0% 100% / .04),transparent 60%)} .card-media::after{content:"";position:absolute;inset:0;background:url(/assets/img/brand/pattern.svg) center/220px auto repeat;opacity:.05;pointer-events:none} .card-media{position:relative;overflow:hidden} .card-body{padding:var(--s-3) var(--s-3) var(--s-4);display:grid;gap:.2rem;align-content:start} .card-type{font-family:var(--font-caps);font-weight:900;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:var(--cyan)} .card-name{font-size:1rem;font-weight:700;color:var(--white);line-height:1.2} .card-note{color:var(--ink-3);font-size:.82rem;line-height:1.4} .card.is-soon .card-media img{opacity:.5} .products-foot{margin-top:var(--s-6);color:var(--ink-3);font-size:.95rem} @media (prefers-reduced-motion:reduce){.card,.card-media img,.place,.pin{transition:none}} /* ---------- wholesale ---------- */ .wholesale{padding:var(--s-8) 0;border-top:1px solid var(--line);isolation:isolate;overflow:clip} .wholesale-bg{position:absolute;inset:0;z-index:-1} .wholesale-bg img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.4) brightness(.5)} .wholesale::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,#000,hsl(0 0% 0% / .55) 30%,hsl(0 0% 0% / .55) 70%,#000)} .wholesale-grid{display:grid;gap:var(--s-6)} @media (min-width:860px){.wholesale-grid{grid-template-columns:minmax(0,1.2fr) minmax(16rem,.8fr);align-items:start}} .form{display:grid;gap:var(--s-4);padding:var(--s-5);border:1px solid var(--line-2);border-radius:var(--r-3);background:hsl(0 0% 4% / .85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .field{display:grid;gap:.4rem} .field label{font-weight:600;font-size:.95rem;color:var(--ink)} .field .opt{color:var(--ink-3);font-weight:400} .field input,.field textarea{width:100%;min-height:3.4rem;padding:.9rem 1rem;border-radius:var(--r-2);border:1px solid var(--line-2);background:#000;color:var(--white);font:inherit;font-size:1.05rem;transition:border-color .2s,box-shadow .2s} .field textarea{min-height:6rem;resize:vertical} .field input:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px hsl(180 93% 74% / .25)} .field input:user-invalid,.field textarea:user-invalid{border-color:var(--rose)} .field input::placeholder,.field textarea::placeholder{color:var(--ink-3)} .field-row{display:grid;gap:var(--s-4)} @media (min-width:520px){.field-row{grid-template-columns:1fr 1fr}} .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden} .btn-block{width:100%} .btn[disabled]{opacity:.6;cursor:progress;transform:none} .form-status{min-height:1.5em;color:var(--ink-2)} .form-status.is-ok{color:var(--cyan);font-weight:600} .form-status.is-err{color:#ff8fa8} .form-fine{color:var(--ink-3);font-size:.85rem} .wholesale-aside{display:grid;gap:var(--s-3);align-content:start;padding:var(--s-5) 0;color:var(--ink-2)} .aside-title{font-size:clamp(2rem,6vw,2.8rem);color:var(--white)} .big-mail{font-family:var(--font-caps);font-weight:900;font-variation-settings:"wdth" 72;font-size:clamp(1.3rem,4.5vw,1.8rem);text-transform:uppercase;letter-spacing:.02em;color:var(--cyan);text-decoration:none;word-break:break-all;border-bottom:2px solid transparent;transition:border-color .2s} .big-mail:hover{border-color:var(--cyan)} .aside-ig{color:var(--ink-3)} /* ---------- footer ---------- */ .site-foot{padding:var(--s-8) var(--gutter) var(--s-7);border-top:1px solid var(--line);background:#000} .foot-grid{width:min(100%,var(--max));margin-inline:auto;display:grid;gap:var(--s-6)} @media (min-width:760px){.foot-grid{grid-template-columns:1fr 1fr;align-items:end}} .foot-tag{width:min(16rem,60vw);height:auto;opacity:.95} .foot-line{margin-top:var(--s-3);color:var(--ink-2)} .foot-links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem} .foot-links a{color:var(--ink-2);text-decoration:none;font-weight:600;padding:.35rem 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s} .foot-links a:hover{color:var(--cyan);border-color:var(--cyan)} .foot-legal{width:min(100%,var(--max));margin:var(--s-6) auto 0;padding-top:var(--s-5);border-top:1px solid var(--line);display:grid;gap:.6rem;color:var(--ink-3);font-size:.85rem;max-width:var(--max)} .foot-legal a{color:var(--ink-2)} .license{font-family:var(--font-caps);font-weight:900;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--ink-2)} /* ---------- misc ---------- */ ::selection{background:var(--cyan);color:#000} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} /* ---------- subpages ---------- */ .page-top{padding-top:var(--s-6)} .crumbs{padding:var(--s-4) 0 0;font-size:.85rem;color:var(--ink-3)} .crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .5rem} .crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--line-2)} .crumbs a{color:var(--ink-2);text-decoration:none}.crumbs a:hover{color:var(--cyan)} .crumbs [aria-current]{color:var(--ink)} .section-head h1{font-size:clamp(2.6rem,9vw,4.5rem);line-height:.95} .section-head h1 .display-caps{display:block;font-size:.5em;color:var(--ink-2);letter-spacing:.14em;margin-bottom:.15em} .section-head h1 .display-script{display:block;color:var(--white)} .section-head .chips{margin-top:var(--s-4)} a.chip{text-decoration:none;display:inline-flex;align-items:center} .wrap-narrow{max-width:44rem} .fine{color:var(--ink-3);font-size:.85rem} .fine-block{margin-top:var(--s-7);max-width:44rem;display:grid;gap:var(--s-3);color:var(--ink-2)} .nav-more{display:none}@media (min-width:640px){.nav-more{display:inline-block}} /* line tiles (home) */ .line-tiles{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:760px){.line-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}} .line-tile{display:grid;gap:.25rem;justify-items:start;padding:var(--s-4);min-height:11rem;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .25s,transform .3s var(--ease)} .line-tile:hover{border-color:var(--cyan);transform:translateY(-3px)} .line-tile-icon{width:2.6rem;color:var(--cyan);margin-bottom:auto}.line-tile-icon svg{width:100%;height:auto} .line-tile-name{font-size:1.6rem;line-height:1;color:var(--white)} .line-tile-format{font-size:.78rem;color:var(--ink-3);line-height:1.3} .line-tile-count{font-family:var(--font-caps);font-weight:900;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:var(--cyan);margin-top:.25rem} /* product cards are links now */ .card-link{display:grid;grid-template-rows:auto 1fr;color:inherit;text-decoration:none;height:100%} .grid-lg{grid-template-columns:repeat(2,minmax(0,1fr))}@media (min-width:760px){.grid-lg{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:1100px){.grid-lg{grid-template-columns:repeat(4,minmax(0,1fr))}} .line-title{font-size:clamp(3rem,12vw,6rem);color:var(--white)} /* product page */ .product-hero{display:grid;gap:var(--s-5);margin-bottom:var(--s-7)} @media (min-width:760px){.product-hero{grid-template-columns:minmax(14rem,.8fr) 1.2fr;align-items:center}} .product-media{aspect-ratio:4/5;max-height:28rem;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)} .product-name{font-size:clamp(2.6rem,10vw,5rem);line-height:.95;color:var(--white);margin:.1em 0} .product-head{display:grid;gap:var(--s-3)} .product-head .line-format a{color:inherit;text-decoration:none}.product-head .line-format a:hover{color:var(--white)} .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin:var(--s-3) 0 0} @media (min-width:520px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}} .stats div{padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-2);background:hsl(0 0% 100% / .03)} .stats dt{font-family:var(--font-caps);font-weight:900;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:var(--ink-3)} .stats dd{margin:.15rem 0 0;font-size:1.4rem;font-weight:700;color:var(--cyan)} /* coa tables */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s-5) 0} .coa-table{width:100%;border-collapse:collapse;font-size:.92rem} .coa-table th,.coa-table td{padding:.7rem .75rem;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap} .coa-table th{font-family:var(--font-caps);font-weight:900;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:var(--ink-3)} .coa-table td a{color:var(--cyan)} .coa-table .pass{color:#7ee07e;font-weight:700} .coa-table tr[hidden]{display:none} /* stockist page */ .stockist-name{font-size:clamp(2.4rem,9vw,4.5rem);line-height:.95;color:var(--white);margin:.1em 0} .stockist-grid{display:grid;gap:var(--s-5);margin-bottom:var(--s-7)} @media (min-width:860px){.stockist-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.stockist-grid .map{height:24rem}} .facts{display:grid;gap:var(--s-3);margin:0 0 var(--s-5)} .facts div{display:grid;gap:.15rem;padding-bottom:var(--s-3);border-bottom:1px solid var(--line)} .facts dt{font-family:var(--font-caps);font-weight:900;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:var(--ink-3)} .facts dd{margin:0;font-size:1.05rem;color:var(--ink)} .stockist-line{margin-bottom:var(--s-7)} .stockist .map{aspect-ratio:4/3;height:auto} /* events archive */ .place-list-past .place{opacity:.8}.place.is-past .place-date{border-style:solid;border-color:var(--line-2);color:var(--ink-2)}.place.is-past .date-dow,.place.is-past .date-mon{color:var(--ink-3)} /* journal */ .post-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)} .post-card a{display:grid;gap:.35rem;padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);color:inherit;text-decoration:none;transition:border-color .25s,transform .3s var(--ease)} .post-card a:hover{border-color:var(--cyan);transform:translateY(-2px)} .post-card-title{font-size:1.5rem;color:var(--white)} .post-title{font-size:clamp(2.2rem,8vw,4rem);line-height:1;color:var(--white);margin:.1em 0} .prose{font-size:1.1rem;line-height:1.65;color:var(--ink);display:grid;gap:1.1em} .prose p{margin:0}.prose a{color:var(--cyan)}.prose h2{font-size:1.6rem;margin-top:.5em}.prose strong{color:var(--white)} .post-foot{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line)} .wholesale-cta{padding:var(--s-8) 0}.wholesale-cta .section-head{margin-bottom:0}.wholesale-cta .hero-cta{margin-top:var(--s-5)}