@font-face { font-family: SatoshiMenu; src: url('../fonts/Satoshi-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: SatoshiMenu; src: url('../fonts/Satoshi-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: SatoshiUI; src: url('../fonts/Satoshi-Variable.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
:root { --ink: #000000; --page: #fff; --control: #e8e8e8; --edge: 26px; --ease: cubic-bezier(.22,1,.36,1); }
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: SatoshiUI, Helvetica, Arial, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid #047eea; outline-offset: 6px; }
.landing-page { position: relative; overflow: clip; border-radius: 22px; }
.landing-header { position: fixed; inset: 6px 6px auto; height: 56px; padding: 0 16px 0 20px; display: flex; align-items: center; justify-content: space-between; z-index: 20; border-radius: 16px; background: transparent; transform: translateY(var(--header-offset,0px)); transition: transform 380ms var(--ease), background-color 240ms ease, backdrop-filter 240ms ease; }
.landing-header[data-header-state='top'] { transition: background-color 240ms ease, backdrop-filter 240ms ease; }
.landing-header[data-header-state='floating'] { background: rgba(237,237,237,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.landing-header[data-header-state='hidden'] { pointer-events: none; }
.landing-header-actions { display: flex; align-items: center; gap: 18px; }
.landing-primary-nav { display: flex; align-items: center; gap: 4px; }
.landing-nav-link, .landing-cart { display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; padding: 12px; background: transparent; color: #000; -webkit-text-fill-color: currentColor; font: 700 15px/14px SatoshiUI,Helvetica,Arial,sans-serif; letter-spacing: -.15px; text-decoration: none; cursor: default; opacity: 1; transition: background-color 180ms ease; }
.landing-cart { padding: 0; width: 36px; height: 35px; }
.landing-cart img { display: block; }
@media (hover: hover) {
  .landing-nav-link:hover, .landing-cart:hover { background: #e8e8e8; }
}
.landing-logo { display: block; padding-top: 3px; }
.landing-logo img { display: block; }
.menu-toggle { border: 0; padding: 0; width: 30px; height: 30px; border-radius: 21px; display: grid; place-items: center; background: var(--control); color: #000; }
.ui-menu-plus { position: relative; display: block; width: 12px; height: 12px; transition: transform .18s ease; }
.ui-menu-plus::before, .ui-menu-plus::after { content: ''; position: absolute; left: 5px; top: 0; width: 2px; height: 12px; background: currentColor; }
.ui-menu-plus::after { transform: rotate(90deg); }
.menu-toggle[aria-expanded='true'] .ui-menu-plus { transform: rotate(45deg); }
.landing-hero { height: 534px; display: flex; align-items: flex-end; padding: 26px var(--edge) 48px; }
.hero-copy { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 13px; align-items: end; }
h1 { margin: 0; min-width: 0; font: 900 108px/1 SatoshiMenu, Helvetica, Arial, sans-serif; letter-spacing: -.05em; }
.heading-prefix, .heading-word { display: block; white-space: nowrap; }
.heading-word { height: 1em; line-height: 1; }
@supports (text-box-trim: trim-both) { h1 { text-box-trim: trim-both; text-box-edge: cap alphabetic; } }
.hero-support { margin: 0; width: 294px; max-width: 100%; font: 900 20px/1.14 SatoshiMenu, Helvetica, Arial, sans-serif; letter-spacing: -.04em; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.tool-link { display: inline-flex; align-items: center; gap: 8px; vertical-align: baseline; color: #707070; text-decoration: none; }
.tool-link:disabled { padding: 0; border: 0; background: transparent; font: inherit; letter-spacing: inherit; text-align: inherit; -webkit-text-fill-color: currentColor; cursor: default; pointer-events: none; opacity: 1; }
.tool-link-icon { display: block; flex: none; opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity 420ms ease-out, transform 0s 420ms, visibility 0s 420ms; }
.tool-link:hover { color: var(--ink); }
.tool-link:hover .tool-link-label { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) {
  .tool-link:hover .tool-link-icon { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 520ms ease-out, transform 720ms cubic-bezier(.16,1,.3,1), visibility 0s; }
}
.tool-link:focus-visible .tool-link-icon { opacity:1;visibility:visible;transform:translateX(0);transition:opacity 520ms ease-out,transform 720ms cubic-bezier(.16,1,.3,1),visibility 0s; }
@media (prefers-reduced-motion: reduce) { .tool-link .tool-link-icon { transform:none;transition:none; } }
.landing-gallery { display: flex; flex-direction: column; gap: 18px; padding-inline: var(--edge); }
.collection-image { position: relative; overflow: hidden; border-radius: 12px; background: #e8e8e8; }
.collection-image img { display: block; max-width: none; }
[data-carousel] { touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
[data-carousel] img { -webkit-user-drag: none; }
.swipe-debug [data-carousel]::after { content: attr(data-swipe-input) ' / ' attr(data-swipe-phase) ' / photo ' attr(data-swipe-index); position: absolute; z-index: 3; left: 8px; bottom: 8px; padding: 4px 7px; border-radius: 4px; background: #fff; color: #000; font: 12px/1.2 monospace; pointer-events: none; }
.collection-tee { aspect-ratio: 1388 / 756; }
.banner-slide { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.banner-slide:first-child { opacity: 1; }
.collection-tee .banner-slide img { position: absolute; width: 100%; height: auto; top: -110.43%; left: 0; }
/* This wider supplied photograph fills the existing banner without the
   portrait-only offset, which would leave a gap below the new image. */
.collection-tee .banner-slide img[data-banner-fit='cover'] { top: 0; height: 100%; object-fit: cover; object-position: center; }
.collection-tee .banner-slide img[data-banner-position='bottom'] { object-position: center bottom; }
.banner-controls { position: absolute; z-index: 2; bottom: 30px; right: 30px; display: flex; align-items: center; gap: 6px; }
.banner-control { flex: none; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 21px; background: rgba(232,232,232,.7); color: var(--ink); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color 180ms ease; }
.banner-previous, .banner-next, .banner-control[hidden] { display: none; }
.banner-control img { display: block; position: static; width: 14px; height: 14px; flex: none; }
.banner-previous img { transform: rotate(180deg); }
.banner-pause span { width: 8px; height: 12px; border-inline: 2px solid currentColor; }
.banner-pause[aria-pressed='true'] span { width: 0; height: 0; border: 0; border-block: 5px solid transparent; border-left: 8px solid currentColor; margin-left: 2px; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .banner-previous, .banner-next { display: grid; }
}
@media (hover: hover) {
  .banner-control:hover { background: rgba(244,244,244,.7); }
}
.tote-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.collection-tote { aspect-ratio: 685 / 586; }
.collection-tote .banner-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; inset: 0; }
.collection-tote .banner-slide img[data-product-position='bottom'] { object-position: center bottom; }
/* Reveal more of the lower art in the three totes Juan singled out. */
.collection-tote .banner-slide img[data-product-position='raised'] { object-position: center 70%; }
.landing-footer { margin: 32px 6px 6px; padding: 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 16px; background: rgba(255,255,255,.7); color: #464646; backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); font: 400 11px/13.75px SatoshiUI,Helvetica,Arial,sans-serif; letter-spacing: .11px; }
.landing-footer-top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; width: 100%; }
.footer-home { display: block; flex: none; border-radius: 4px; transition: opacity 180ms ease; }
.footer-home img { display: block; opacity: .8; transition: opacity 180ms ease, filter 180ms ease; }
.landing-footer-social { display: flex; align-items: center; gap: 5px; flex: none; }
.footer-social-link { display: grid; place-items: center; position: relative; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; opacity: 1; transition: opacity 180ms ease, background-color 180ms ease; }
.footer-social-link::after { content: ''; position: absolute; inset: -2px; }
.footer-social-link img { display: block; }
.landing-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.landing-footer p { margin: 0; max-width: 821.159px; }
.landing-footer-links { display: flex; align-items: center; gap: 5px; flex: none; white-space: nowrap; }
.landing-footer a { text-decoration: none; }
.landing-footer-links a { transition: color 180ms ease; }
@media (hover: hover) {
  .footer-home:hover { opacity: 1; }
  .footer-home:hover img { opacity: 1; filter: brightness(0); }
  .footer-social-link:hover { opacity: .78; background-color: #eeeeee; }
  .landing-footer-links a:hover { color: #656565; text-decoration: underline; text-underline-offset: 2px; }
}
@media (max-width: 1100px) {
  .landing-footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .landing-footer-links { flex-wrap: wrap; }
}
.landing-menu { position: fixed; z-index: 10; inset: 0; height: 100dvh; padding: 88px var(--edge) 26px; background: #fff; overflow: auto; overscroll-behavior: contain; display: flex; }
.landing-menu[hidden] { display: none; }
.landing-menu-content { display: contents; }
.mobile-menu-intro { display: none; }
.mobile-menu-lower { display: contents; }
.mobile-commerce-actions { display: none; }
.ui-main-menu-links { margin-top: auto; display: flex; flex-direction: column; gap: 18px; }
.landing-menu :is(a,button[disabled]) { width: fit-content; text-decoration: none; font: 900 clamp(48px,min(7.5vw,10.5dvh),108px)/1 SatoshiMenu, Helvetica, Arial, sans-serif; letter-spacing: -.05em; text-box-trim: trim-both; text-box-edge: cap alphabetic; transition: color 180ms ease; }
@media (hover: hover) {
  .landing-menu :is(a,button[disabled]):hover { color: #1f1f1f; }
}
/* Exit clears links in reverse order, then fades the white canvas last. */
.menu-open { overflow: hidden; }
/* Keep the recalled/floating header as menu controls, without its grey glass. */
.menu-open .landing-header,
.menu-open .landing-header[data-header-state='floating'] { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.menu-open .landing-header::before { opacity:0; }
/* Scroll transforms are locked at their current value while the menu is open.
   The header never changes its positioning context or geometry on menu toggle. */
dialog { max-width: min(440px,calc(100% - 40px)); border: 0; border-radius: 16px; padding: 28px; color: var(--ink); }
dialog::backdrop { background: #0005; }
dialog h2 { font-size: 24px; }
dialog button { border: 0; background: var(--control); padding: 10px 18px; border-radius: 8px; }
@media (max-width: 1439px) and (min-width: 700px) {
  h1 { font-size: 7.5vw; }
  .landing-hero { height: clamp(400px,37.083vw,534px); }
}
@media (max-width: 699px) {
  :root { --edge: 20px; }
  /* Tilt header geometry, with the shared desktop logo at the same mobile origin. */
  .landing-header { inset: 0 0 auto; height: auto; padding: calc(18px + env(safe-area-inset-top)) 16px 12px; pointer-events: none; }
  /* Inset only the painted glass surface; logo/icon layout never moves.
     Extend the lower edge 4px from the first trial, as requested after
     reviewing the taller 6px version. Keep all content positions intact. */
  .landing-header::before { content: ''; position: absolute; inset: calc(4px + env(safe-area-inset-top)) 4px 0; z-index: -1; border-radius: 12px; background: rgba(237,237,237,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
  .landing-header[data-header-state='floating'] { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .landing-header[data-header-state='floating']::before { opacity: 1; }
  .landing-header-actions { height: 31px; gap: 8px; pointer-events: auto; }
  .landing-primary-nav { gap: 2px; }
  .landing-nav-link { display: none; }
  /* Bag artwork is centered in its 35px SVG. The plus is optically lifted
     2.16px inside its 31px button by the approved asymmetric padding. */
  .landing-cart { transform: translateY(-2.16px); }
  .landing-logo { flex: none; width: 166px; height: 28.839px; position: relative; padding: 0; pointer-events: auto; }
  .landing-logo img { position: absolute; top: 1.257px; left: -.172px; width: 166.172px; height: auto; }
  .menu-toggle { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 31px; padding: 4px 4px 9px; border-radius: 200px; background: transparent; pointer-events: auto; touch-action: manipulation; appearance: none; -webkit-appearance: none; }
  .menu-toggle:hover, .menu-toggle:active, .menu-toggle:focus { background: transparent; box-shadow: none; }
  .menu-toggle::after { content: ''; position: absolute; inset: -6.5px -9px; }
  .ui-menu-plus { width: 18px; height: 18px; flex: none; }
  .ui-menu-plus::before, .ui-menu-plus::after { left: 8px; top: .34px; width: 2px; height: 18px; }
  .menu-toggle:focus-visible, .landing-logo:focus-visible, .landing-menu :is(a,button[disabled]):focus-visible { outline-offset: 4px; }
  .menu-open .landing-header { background: transparent; }
  .menu-open .landing-header::before { opacity: 0; }
  .hero-copy { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .landing-hero { height: 400px; padding-bottom: 32px; }
  h1 { font-size: clamp(48px,11.8vw,76px); }
  .hero-support { font-size: 18px; }
  .collection-tee { aspect-ratio: 1 / 1; }
  .collection-tee .banner-slide img { width: 100%; top: -45%; }
  .tote-row { gap: 18px; }
  .collection-tote { aspect-ratio: 3 / 4; }
  .landing-footer { margin: 24px 4px 4px; padding: 16px; }
  .landing-menu .desktop-only { display: none; }
  .landing-menu { flex-direction: column; justify-content: flex-end; padding: calc(61px + env(safe-area-inset-top) + 16px) 16px max(16px,env(safe-area-inset-bottom)); }
  .landing-menu-content { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 540px; flex: none; width: 100%; }
  .mobile-menu-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
  .mobile-menu-lower { display: flex; flex-direction: column; align-items: flex-start; gap: 48px; width: 100%; flex: none; }
  .mobile-commerce-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 1px; width: 100%; }
  .mobile-commerce-link { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: #000; -webkit-text-fill-color: currentColor; opacity: 1; font: 700 22px/1.14 SatoshiMenu,Helvetica,Arial,sans-serif; letter-spacing: -.66px; text-box-trim: trim-both; text-box-edge: cap alphabetic; cursor: default; }
  .mobile-commerce-link img { display: block; flex: none; }
  .mobile-commerce-link span { display: block; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
  .mobile-commerce-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
  .menu-description { margin: 0; width: 294px; max-width: 100%; font: 900 20px/1.14 SatoshiMenu,Helvetica,Arial,sans-serif; letter-spacing: -.8px; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
  .menu-caption { margin: 0; font: 700 15px/1.14 SatoshiMenu,Helvetica,Arial,sans-serif; letter-spacing: -.3px; }
  .ui-main-menu-links { margin-top: 0; align-items: flex-start; gap: 12px; }
  .landing-menu :is(a,button[disabled]) { display: block; white-space: nowrap; font-size: 54px; letter-spacing: -2.7px; }
  .landing-menu .ui-main-menu-links a:nth-child(2), .landing-menu .ui-main-menu-links a:nth-child(3) { letter-spacing: -2.16px; }
  .landing-menu .word { letter-spacing: -.05em; }
  .landing-menu .word-space { letter-spacing: -.09em; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-header, .landing-header::before, .landing-nav-link, .landing-cart, .landing-menu :is(a,button[disabled]), .banner-control, .footer-home, .footer-social-link, .landing-footer-links a { transition: none; }
}
@media (max-width: 359px) {
  .landing-menu :is(a,button[disabled]) { font-size: clamp(42px,13.85vw,54px); }
}
@media (max-width: 699px) and (max-height: 640px) {
  .landing-menu { justify-content: flex-start; }
  .landing-menu-content { min-height: 480px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-menu-plus { transition: none; }
  .landing-menu:not([hidden]), .landing-menu:not([hidden]) a { animation: none; }
}

.footer-home:focus-visible img { opacity:1;filter:brightness(0); }
@media(prefers-reduced-motion:reduce) { .footer-home img { transition:none; } }

@media(max-width:699px) {
 .footer-home img { width:190px;height:auto; }
 .footer-social-link,.footer-social-link img { width:28px;height:28px; }
 .landing-footer-social { gap:8px; }
 .landing-footer-top { column-gap:24px; }
}

@media(max-width:699px) {
 .footer-social-link:hover { opacity:1;background:transparent; }
 .footer-home:hover { opacity:1; }
 .footer-home:hover img,.footer-home:focus-visible img { opacity:.8;filter:none; }
 .footer-social-link,.footer-home,.footer-home img { transition:none; }
}

/* October shop update: overlays are independent of the existing swipe layers. */
.visually-hidden { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
.banner-copy { position:absolute;z-index:2;left:30px;bottom:30px;display:flex;flex-direction:column;align-items:flex-start;color:#fff;pointer-events:none; }
.banner-copy p { margin:0 0 22px;font:500 24px/1.2 SatoshiUI,Arial,sans-serif;letter-spacing:0; }
.banner-copy h2 { width:383px;max-width:100%;margin:0 0 28px;font:900 56px/1 SatoshiMenu,Arial,sans-serif;letter-spacing:-.02em; }
.collection-tee:after { content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(245.46deg,#0000 52.496%,#0006 101.44%); }
.photo-shop { display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:2;width:fit-content;border:0;border-radius:100px;padding:14px 18px;background:#fff;color:#000;text-decoration:none;font:700 15px/1.2 SatoshiMenu,Arial,sans-serif;letter-spacing:-.24px;pointer-events:auto;transition:background-color 180ms ease; }
.lower-photo-shop { position:absolute;left:30px;bottom:30px; }
.landing-nav-link[href],.mobile-commerce-link[href] { cursor:pointer; }
.mobile-commerce-link[href] { display:inline-flex;align-items:center;gap:8px;width:fit-content;text-decoration:none;font:700 22px/1.14 SatoshiMenu,Helvetica,Arial,sans-serif;letter-spacing:-.66px; }
@media(hover:hover) { .photo-shop:hover { background:#ededed; } }
@media(max-width:699px) { .banner-copy { left:18px;bottom:18px;max-width:calc(100% - 100px); } .banner-copy p { font-size:16px;margin-bottom:12px; } .banner-copy h2 { font-size:32px;margin-bottom:18px; } .lower-photo-shop { left:12px;bottom:18px; } .photo-shop { padding:10px 14px;font-size:12px; } .banner-controls { right:12px;bottom:18px; } }
@media(prefers-reduced-motion:reduce) { .photo-shop { transition:none; } }

button[disabled]{cursor:default;} .landing-cart:disabled{opacity:1;} .landing-nav-link:disabled,.mobile-commerce-link:disabled,.tool-link:disabled,.photo-shop:disabled{opacity:1;}