@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;550;600;650;700&display=swap');
:root{font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#232323;background:#fff;font-synthesis:none;--surface:#f4f4f3;--muted:#6d6d69;--radius:24px}
*{box-sizing:border-box}html{scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #937137;outline-offset:4px}img{display:block;max-width:100%}.skip-link{position:fixed;top:-100px;z-index:99;background:#222;color:#fff;padding:16px}.skip-link:focus{top:8px}
main{max-width:1328px;margin:0 auto;padding:0 44px 70px}.intro{padding:53px 0 30px}.intro h1{font-size:clamp(42px,6vw,76px);line-height:1.1;letter-spacing:-.065em;font-weight:500;margin:0}.toolbar{position:sticky;top:0;z-index:5;padding:14px 0;background:#fffffff2;backdrop-filter:blur(16px)}.filters{display:flex;flex-wrap:wrap;gap:8px}.filter{border:0;background:none;border-radius:30px;padding:12px 22px;min-height:46px;font-size:16px;font-weight:550;transition:background .2s,color .2s}.filter.active{background:#252525;color:white}.filter:hover:not(.active){background:#f0f0ef}
.collection{padding-top:24px}.collection>h2{font-size:26px;line-height:1.25;font-weight:550;letter-spacing:-.7px;margin:0 0 22px}.collection[hidden]{display:none}.things-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.card{position:relative;min-width:0;border-radius:var(--radius);overflow:hidden}.product-card{display:flex;flex-direction:column;min-height:330px;background:var(--surface);transition:transform .25s}.product-card:has(.card-cover):hover{transform:translateY(-3px)}.card-header{padding:24px 24px 0}.card-brand{font-size:16px;line-height:1.4;color:var(--muted);margin:0 0 7px}.card-header h3{font-size:22px;line-height:1.25;font-weight:500;letter-spacing:-.65px;margin:0;overflow-wrap:break-word}.product-visual{height:195px;min-height:170px;flex:1;display:flex;align-items:center;justify-content:center;padding:12px 18px}.product-visual img{width:100%;height:175px;object-fit:contain;mix-blend-mode:darken;transition:transform .3s}.product-card:has(.card-cover):hover img{transform:scale(1.035)}.card-foot{padding:4px 24px 22px;min-height:47px;margin-top:auto}.price{font-size:18px;font-weight:550;white-space:nowrap}.card-cover{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;background:none;border-radius:var(--radius)}.card-cover:focus-visible{outline-offset:-5px}
[data-item="rains"] .product-visual img{object-fit:cover;object-position:50% 50%}[data-item="iphone"] .product-visual img{object-fit:cover;width:195px;max-width:100%}[data-item="hermes"] .product-visual img{mask-image:radial-gradient(ellipse 65% 80% at 50% 50%,#000 43%,transparent 79%)}[data-item="nespresso"]{background:#f6e8e6}[data-item="nespresso"] .product-visual img{height:145px}[data-item="vans"] .product-visual img,[data-item="converse"] .product-visual img{object-fit:cover;object-position:50% 62%}[data-item="vans"] .product-visual img{mask-image:radial-gradient(ellipse 78% 80% at 50% 50%,#000 43%,transparent 83%)}.photo-product .product-visual img{object-fit:cover;filter:grayscale(1);border-radius:14px;mix-blend-mode:normal}
.experiences-section{margin-top:48px}.experiences-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;grid-auto-rows:290px}.experience-card{background:#35464a;color:white;isolation:isolate}.experience-card.featured{grid-column:span 2;grid-row:span 2}.experience-card.wide,.experience-card[data-item="volcano"],.experience-card[data-item="zerog"]{grid-column:span 2}.experience-card img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;z-index:-2;transition:transform .45s}.experience-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,#0008 100%);z-index:-1}.experience-card:hover img{transform:scale(1.035)}.experience-card button{position:absolute;inset:0;width:100%;border:0;background:none;color:inherit;text-align:left;padding:25px;display:flex;align-items:flex-end}.experience-title{font-size:27px;line-height:1.16;letter-spacing:-.8px;font-weight:500;overflow-wrap:break-word}.featured .experience-title{font-size:43px;letter-spacing:-1.5px;max-width:360px}.experience-card button:focus-visible{outline:2px solid white;outline-offset:-6px;border-radius:var(--radius)}.required-credit{position:absolute;right:20px;top:18px;font-size:12px;pointer-events:none}[data-item="volcano"] img{object-position:50% 80%}[data-item="sandboarding"] img{object-position:55% 67%}[data-item="whales"] img{object-position:50% 64%}
@media(max-width:1100px){main{padding:0 28px 50px}.things-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.experiences-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.experience-card.featured{grid-row:span 1}.card-header{padding:22px 20px 0}.card-foot{padding-left:20px;padding-right:20px}.card-header h3{font-size:21px}}
@media(max-width:820px){.things-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.intro{padding-top:36px;padding-bottom:20px}.card-header h3{font-size:22px}}
@media(max-width:600px){main{padding:0 18px 35px}.intro{padding-top:30px;padding-bottom:19px}.intro h1{font-size:48px;letter-spacing:-2.7px}.toolbar{padding:9px 0 14px}.filters{gap:4px}.filter{font-size:15px;padding:11px 18px}.collection{padding-top:18px}.collection>h2{font-size:23px;margin-bottom:17px}.things-grid{grid-template-columns:minmax(0,1fr);gap:12px}.product-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);grid-template-rows:1fr auto;min-height:215px;padding:22px 19px;gap:15px 12px;align-items:center}.card-header{grid-column:1;grid-row:1;align-self:start;padding:0}.card-brand{font-size:16px;margin-bottom:8px}.card-header h3{font-size:22px;line-height:1.23;letter-spacing:-.6px}.product-visual{grid-column:2;grid-row:1 / 3;min-height:0;height:166px;padding:0}.product-visual img{height:155px;width:100%}.card-foot{grid-column:1;grid-row:2;padding:0;min-height:0;margin:0;align-self:end}.price{font-size:18px}[data-item="iphone"] .product-visual img{width:100%;height:165px}[data-item="rains"] .product-visual img{height:130px}[data-item="nespresso"] .product-visual img{height:130px}.photo-product .product-visual img{height:166px}.experiences-section{margin-top:31px}.experiences-grid{grid-template-columns:minmax(0,1fr);gap:12px;grid-auto-rows:280px}.experience-card.featured,.experience-card.wide,.experience-card[data-item="volcano"],.experience-card[data-item="zerog"]{grid-column:auto;grid-row:auto}.experience-card.featured{min-height:350px}.experiences-grid{grid-template-rows:350px}.experience-card button{padding:23px}.experience-title,.featured .experience-title{font-size:29px;letter-spacing:-.7px;max-width:100%;line-height:1.15}.experience-card[data-item="whales"] img{object-position:50% 62%}}
@media(max-width:360px){main{padding-left:14px;padding-right:14px}.intro h1{font-size:43px}.filter{padding-left:15px;padding-right:15px}.product-card{padding:20px 17px;grid-template-columns:minmax(0,1fr) minmax(0,38%);gap:14px 9px;min-height:208px}.card-header h3{font-size:20px}.product-visual img{height:140px}.price{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Dialog: photo on the left, independently scrollable details on the right. */
dialog {
  padding: 0;
  border: 0;
  border-radius: 28px;
  width: min(900px, calc(100% - 48px));
  max-width: none;
  max-height: calc(100dvh - 64px);
  overflow: hidden;
  color: #232323;
  background: #fff;
  box-shadow: 0 24px 100px #0003;
}
dialog::backdrop { background: #1e211e75; backdrop-filter: blur(7px); }
.dialog-controls {
  position: absolute;
  top: 0;
  right: 0;
  width: 54%;
  height: 56px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 6px 10px;
  z-index: 2;
  background: linear-gradient(#fff 80%, #fff0);
  pointer-events: none;
}
.close-dialog {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  pointer-events: auto;
}
.close-dialog:hover { color: #888; }
.close-dialog:focus-visible { outline: 2px solid #555; outline-offset: -6px; }
#dialog-content { display: grid; grid-template-columns: minmax(0,46fr) minmax(0,54fr); }
.dialog-visual { position: relative; min-width: 0; background: var(--surface); }
.dialog-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dialog-image.product { object-fit: contain; padding: 28px; mix-blend-mode: darken; }
.dialog-info {
  min-width: 0;
  min-height: min(450px, calc(100dvh - 64px));
  max-height: calc(100dvh - 64px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 66px 36px 36px;
  scrollbar-width: thin;
  scrollbar-color: #d4d4d0 transparent;
}
.dialog-info h2 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -1.1px;
  font-weight: 550;
  overflow-wrap: break-word;
  margin: 0 0 18px;
  outline: none;
}
.dialog-info p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.dialog-info .dialog-brand { font-size: 15px; margin: 0 0 10px; }
.dialog-info .dialog-config { color: #333; }
.dialog-info .dialog-price { font-size: 24px; font-weight: 550; color: #222; margin: 28px 0 8px; }
.dialog-info .detail-note { font-size: 14px; }
.external-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-radius: 30px; background: #252525; color: #fff; padding: 15px 21px; margin-top: 26px; font-size: 16px; }
.photo-credit { display: block; width: fit-content; max-width: 100%; overflow-wrap: anywhere; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; margin-top: 28px; }
.favorites-title { font-size: 21px; font-weight: 550; letter-spacing: -.4px; margin: 28px 0 14px; }
.favorites-list { padding-left: 25px; margin: 0; font-size: 16px; line-height: 1.65; }
.favorites-list li { padding-left: 6px; margin-bottom: 6px; }
.favorites-list li::marker { color: #999; }
.coffee-dialog .dialog-visual { background: #f6e8e6; }
.coffee-dialog .dialog-image { padding: 55px; }
@media (max-width: 700px) {
  dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 24px; padding-top: 48px; }
  .dialog-controls { width: 100%; height: 48px; padding: 2px 8px; background: #fff; }
  #dialog-content { display: block; max-height: calc(100dvh - 72px); overflow: auto; overscroll-behavior: contain; }
  .dialog-visual { height: clamp(190px, 30dvh, 290px); }
  .dialog-image.product { padding: 20px; }
  .dialog-info { min-height: 0; max-height: none; overflow: visible; padding: 26px 26px 30px; }
  .dialog-info h2 { font-size: 29px; letter-spacing: -.8px; }
  .coffee-dialog .dialog-visual { height: 150px; }
  .coffee-dialog .dialog-image { padding: 20px; }
  .favorites-title { font-size: 20px; margin-top: 24px; }
}
@media (max-width: 360px) {
  .dialog-info { padding: 24px 20px 28px; }
  .dialog-info h2 { font-size: 27px; }
}
@media (min-width: 701px) and (max-height: 540px) {
  dialog { max-height: calc(100dvh - 24px); }
  .dialog-info { min-height: 0; max-height: calc(100dvh - 24px); padding-top: 56px; }
  .dialog-info h2 { font-size: 28px; }
}
.card-selection { font-size: 15px; line-height: 1.4; color: var(--muted); margin: 10px 0 0; }