:root {
  --ink: #171a18;
  --muted: #68706b;
  --page: #fff;
  --surface: #f4f5f2;
  --line: #dfe2de;
  --accent: #214333;
  --accent-soft: #547161;
  --footer: #171e1a;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.header-inner { min-height: 72px; }
.brand-mark,
.brand-mark img { width: 144px; min-width: 144px; }
.brand-mark img { opacity: .8; }
.main-nav { gap: 28px; color: #4b504d; font-size: 13px; font-weight: 600; }

.hero {
  position: relative;
  display: flex;
  min-height: clamp(560px, 72svh, 760px);
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background: #25352c;
}

.hero picture,
.hero picture img,
.hero::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero picture img { object-fit: cover; object-position: center 45%; }
.hero::after { content: ""; background: rgba(7,13,10,.28); }

.hero-content {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 100px 0 68px;
}

.hero-eyebrow,
.product-category {
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.hero h1 {
  max-width: 650px;
  margin-bottom: 18px;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.28;
  text-shadow: 0 2px 18px rgba(0,0,0,.18);
}

.hero-copy { margin-bottom: 30px; color: rgba(255,255,255,.88); font-size: 17px; }
.hero .button-link {
  position: relative;
  min-width: 156px;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  border-color: #fff;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(7,13,10,.08);
  transform: none;
  transition: color .45s ease, background-color .45s ease, border-color .45s ease, box-shadow .45s ease, backdrop-filter .45s ease;
}
.hero .button-link::before { position: absolute; inset: 0; content: ""; background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.62) 48%, transparent 72%); transform: translateX(-125%); transition: transform .75s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.hero .button-link span { position: relative; margin-left: 8px; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.hero .button-link:hover,
.hero .button-link:focus-visible { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.7); box-shadow: 0 12px 32px rgba(7,13,10,.16); transform: none; backdrop-filter: blur(7px); }
.hero .button-link:hover::before,
.hero .button-link:focus-visible::before { transform: translateX(125%); }
.hero .button-link:hover span,
.hero .button-link:focus-visible span { transform: translateX(3px); }

.news-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.news-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  min-height: 48px;
  font-size: 12px;
  overflow: hidden;
}
.news-label { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 700; letter-spacing: .12em; }
.news-label::before { width: 5px; height: 5px; content: ""; background: var(--accent-soft); border-radius: 50%; animation: newsPulse 2.2s ease-in-out infinite; }
.news-viewport { position: relative; min-width: 0; height: 48px; overflow: hidden; }
.news-item {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .4s ease, transform .55s cubic-bezier(.2,.76,.25,1);
  pointer-events: none;
  white-space: nowrap;
}
.news-item.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.news-item.is-leaving { opacity: 0; transform: translateY(-100%); }
.news-item time,
.news-item span { color: var(--muted); }
.news-item > span { position: relative; display: block; width: max-content; max-width: 100%; overflow: hidden; padding-bottom: 5px; text-overflow: ellipsis; }
.news-item > span::after { position: absolute; right: 0; bottom: 1px; left: 0; height: 1px; content: ""; background: rgba(45,76,62,.4); transform: scaleX(0); transform-origin: left; }
.news-item.is-active > span::after { animation: newsTextProgress 5.5s linear forwards; }
@keyframes newsTextProgress { to { transform: scaleX(1); } }
@keyframes newsPulse { 50% { opacity: .3; transform: scale(.7); } }

.featured-products,
.journal,
.faq { padding: 112px 0; }
.featured-products { padding-bottom: 0; background: #f4f5f3; }

.featured-products .section-title,
.material-story .section-title,
.journal .section-title,
.faq .section-title {
  margin-bottom: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.45;
}

.product-purpose-group { position: relative; z-index: 0; margin-top: 34px; padding: 64px 0 72px; }
.product-purpose-group::before {
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  content: "";
  background: #f4f5f3;
}
.product-purpose-group + .product-purpose-group { margin-top: 0; padding-top: 64px; border-top: 0; }
.product-purpose-group.is-camp::before { background: #e9ece9; }
.purpose-heading {
  display: grid;
  grid-template-columns: 54px minmax(0, 680px);
  gap: 22px;
  align-items: start;
  margin-bottom: 36px;
}
.purpose-number { color: var(--accent-soft); font-size: 34px; font-weight: 300; line-height: 1; }
.purpose-heading h3 { margin-bottom: 8px; font-size: 28px; font-weight: 600; }
.purpose-heading div > p:last-child { margin-bottom: 0; color: var(--muted); }
.product-grid { display: grid; gap: 42px 18px; }
.purpose-products.is-picnic { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.purpose-products.is-camp { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.purpose-products { padding: 24px; background: #fff; border-radius: 8px; }
.product-image { position: relative; aspect-ratio: 1; margin-bottom: 20px; overflow: hidden; background: #fff; border: 0; }
.product-badge { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 4px 7px; color: #fff; background: var(--accent); font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.product-image .product-dissolve-frame { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1.01); transition: opacity 1.05s ease, transform 4.8s ease; }
.product-image .product-dissolve-frame.is-active { opacity: 1; transform: scale(1); }
.product-category { margin-bottom: 6px; color: var(--accent-soft); font-size: 10px; }
.product-item h3 { margin-bottom: 6px; font-size: 17px; font-weight: 600; line-height: 1.45; }
.product-item > p:not(.product-category) { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.product-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 13px; }
.product-colors small { flex-basis: 100%; color: var(--muted); font-size: 9px; line-height: 1.45; }
.color-dot { width: 14px; height: 14px; border: 1px solid rgba(16,29,24,.18); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.color-dot.is-green { background: #748b72; }
.color-dot.is-brown { background: #795b49; }
.color-dot.is-offwhite { background: #f0eee8; }
.color-dot.is-sand { background: #d5c1a1; }
.color-dot.is-pattern { background: #d8b7b1; }
.color-dot.is-greige { background: #aaa49b; }
.color-dot.is-beige { background: #ccb993; }
.color-dot.is-olive { background: #6f724e; }
.color-dot.is-light-khaki { background: #9fa38c; }
.color-dot.is-black { background: #252422; }

.material-story { padding: 120px 0 80px; }
.material-heading {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 0 80px;
  align-items: end;
  margin-bottom: 70px;
}
.material-heading .section-kicker { grid-column: 1 / -1; }
.material-heading > p:last-child { max-width: 520px; margin-bottom: 2px; color: var(--muted); }
.material-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 80px;
}
.material-visual {
  position: sticky;
  top: 104px;
  height: min(680px, calc(100svh - 140px));
  min-height: 540px;
  overflow: hidden;
  background: var(--surface);
}
.material-visual-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .65s ease, transform .65s ease;
}
.material-visual-image.is-active { opacity: 1; transform: scale(1); }
.material-step {
  display: flex;
  min-height: 68svh;
  flex-direction: column;
  justify-content: center;
  padding: 70px 0;
  border-top: 1px solid var(--line);
}
.material-step:last-child { border-bottom: 1px solid var(--line); }
.material-mobile-image { display: none; }
.material-number { margin-bottom: 42px; color: #a4aaa6; font-size: 13px; }
.material-step .section-kicker { color: var(--accent-soft); }
.material-step h3 { margin-bottom: 22px; font-size: 30px; font-weight: 600; line-height: 1.5; }
.material-step > p:not(.material-number, .section-kicker) { max-width: 480px; color: var(--muted); }
.spec-line { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.spec-line span { padding: 4px 9px; border: 1px solid var(--line); font-size: 11px; }

.brand-story {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 600px;
  overflow: hidden;
  color: #fff;
  background: #111a16;
}
.brand-image { position: absolute; inset: 0; min-height: 600px; overflow: hidden; }
.brand-image::before { position: absolute; z-index: 1; inset: 0; content: ""; background: rgba(8,16,12,.7); }
.brand-image::after { position: absolute; z-index: 2; inset: 0; content: ""; background-image: radial-gradient(rgba(255,255,255,.13) .65px, transparent .65px); background-size: 4px 4px; opacity: .48; }
.brand-image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82) saturate(.72); }
.brand-copy {
  position: relative;
  z-index: 3;
  display: flex;
  width: min(52%, 680px);
  max-width: none;
  flex-direction: column;
  justify-content: center;
  justify-self: end;
  padding: 86px clamp(42px, 8vw, 118px) 86px 56px;
}
.brand-copy h2,
.product-cta-copy h2 { margin-bottom: 20px; font-weight: 600; line-height: 1.42; }
.brand-copy h2 { font-size: 40px; }
.product-cta-copy h2 { font-size: 34px; }
.brand-copy > p:not(.section-kicker) { margin-bottom: 26px; color: rgba(255,255,255,.7); }
.product-cta-copy > p:not(.section-kicker) { margin-bottom: 26px; color: var(--muted); }
.brand-copy .section-kicker { color: #aabbb2; }
.brand-copy .text-link { color: #fff; }
.brand-copy .text-link:hover,
.brand-copy .text-link:focus-visible { color: rgba(255,255,255,.72); }
.brand-origin {
  display: grid;
  gap: 3px;
  margin: -4px 0 28px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.brand-origin strong { font-size: 13px; }
.brand-origin span { color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.65; }

.store-guide {
  padding: 112px 0 120px;
  color: var(--ink);
  background: #f3f4f2;
}
.store-heading {
  max-width: 680px;
  margin-bottom: 52px;
}
.store-heading > div { max-width: 680px; }
.store-guide h2 {
  margin-bottom: 16px;
  font-size: 38px;
  font-weight: 600;
}
.store-heading > div > p:last-child { margin-bottom: 0; color: var(--muted); }
.store-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e2df;
  box-shadow: 0 18px 44px rgba(22,31,26,.055);
}
.store-row {
  position: relative;
  display: flex;
  min-height: 430px;
  padding: 54px 58px 48px;
  flex-direction: column;
  align-items: flex-start;
  color: var(--ink);
  background: #fff;
  transition: color .45s ease, background-color .45s ease, box-shadow .45s ease;
}
.store-row + .store-row { border-left: 1px solid #e0e2df; }
.store-row.is-amazon { background: #f6f8fa; }
.store-row.is-rakuten { background: #fbf7f7; }
.store-row.is-amazon:hover,
.store-row.is-amazon:focus-visible { background: #edf3f7; box-shadow: inset 0 0 0 1px rgba(45,82,116,.12); }
.store-row.is-rakuten:hover,
.store-row.is-rakuten:focus-visible { background: #f8eded; box-shadow: inset 0 0 0 1px rgba(191,0,0,.09); }
.store-number { margin-bottom: 48px; color: #8d938f; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.store-row-main { display: grid; gap: 30px; }
.store-logo { position: relative; width: max-content; font-size: 32px; font-weight: 700; letter-spacing: 0; line-height: 1; }
.store-logo i { display: block; width: 72px; height: 3px; margin: 3px 0 0 15px; background: #ff9900; border-radius: 999px; transform: skewX(-20deg); }
.store-row.is-amazon .store-logo { color: #131a22; }
.store-row.is-rakuten .store-logo { color: #bf0000; }
.store-info { display: grid; gap: 6px; }
.store-info strong { font-size: 17px; font-weight: 600; }
.store-info small { color: var(--muted); font-size: 11px; }
.store-description { margin: 34px 0 30px; color: #757c77; font-size: 11px; line-height: 1.8; }
.store-action {
  display: flex;
  width: min(100%, 230px);
  min-height: 48px;
  margin-top: auto;
  padding: 0 20px;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease, backdrop-filter .45s ease;
}
.is-amazon .store-action { background: rgba(19,35,58,.96); }
.is-rakuten .store-action { background: rgba(191,0,0,.94); }
.store-row.is-amazon:hover .store-action,
.store-row.is-amazon:focus-visible .store-action {
  background: rgba(45,82,116,.72);
  border-color: rgba(19,35,58,.16);
  box-shadow: 0 10px 24px rgba(19,35,58,.1);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.store-row.is-rakuten:hover .store-action,
.store-row.is-rakuten:focus-visible .store-action {
  background: rgba(207,61,61,.72);
  border-color: rgba(191,0,0,.15);
  box-shadow: 0 10px 24px rgba(130,18,18,.09);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.store-action b { font-size: 20px; font-weight: 400; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.store-row:hover .store-action b,
.store-row:focus-visible .store-action b { transform: translate(3px, -3px); }
.store-outlet { display: grid; grid-template-columns: .82fr 1.18fr; gap: 76px; align-items: center; margin-top: 92px; padding-top: 62px; border-top: 1px solid var(--line); }
.store-outlet-copy h3 { margin-bottom: 16px; font-size: 30px; font-weight: 600; line-height: 1.5; }
.store-outlet-copy > p:not(.section-kicker) { max-width: 430px; color: var(--muted); }
.store-outlet-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 184px auto;
  min-height: 184px;
  align-items: stretch;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  border: 1px solid #dde0dd;
  border-radius: 6px;
  box-shadow: 0 16px 42px rgba(22,31,26,.055);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.store-outlet-link:hover,
.store-outlet-link:focus-visible { border-color: #bbc1bc; box-shadow: 0 22px 52px rgba(22,31,26,.09); transform: translateY(-3px); }
.store-outlet-brand { display: grid; align-content: center; gap: 8px; padding: 28px 32px; }
.store-outlet-brand small { color: var(--accent-soft); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.store-outlet-brand img { width: 150px; height: auto; }
.store-outlet-brand em { color: var(--muted); font-size: 11px; font-style: normal; }
.store-outlet-photo { min-width: 0; overflow: hidden; background: #ececea; }
.store-outlet-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.store-outlet-link:hover .store-outlet-photo img,
.store-outlet-link:focus-visible .store-outlet-photo img { transform: scale(1.035); }
.store-outlet-link > b { align-self: center; padding: 0 24px; font-size: 25px; font-weight: 400; transition: transform .25s ease; }
.store-outlet-link:hover > b,
.store-outlet-link:focus-visible > b { transform: translate(4px, -4px); }

.journal { overflow: hidden; }
.blog-actions { display: flex; align-items: center; gap: 24px; }
.blog-controls { display: flex; gap: 8px; }
.blog-control { width: 40px; height: 40px; padding: 0; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 50%; font: inherit; font-size: 25px; line-height: 1; cursor: pointer; transition: color .45s ease, background-color .45s ease, border-color .45s ease, box-shadow .45s ease; }
.blog-control:hover,
.blog-control:focus-visible { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 10px 24px rgba(22,42,31,.14); }
.blog-carousel { overflow: visible; }
.blog-track { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 10px; scroll-behavior: auto; scrollbar-width: none; }
.blog-track::-webkit-scrollbar { display: none; }
.blog-item { flex: 0 0 calc((100% - 48px) / 3); }
.blog-image { aspect-ratio: 16 / 9; margin-bottom: 18px; }
.blog-date { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; }
.blog-item h3 { margin-bottom: 0; font-size: 16px; font-weight: 600; line-height: 1.65; }
.featured-blog { margin-top: 92px; padding-top: 48px; border-top: 1px solid var(--line); }
.featured-blog-heading { margin-bottom: 32px; }
.featured-blog-heading h3 { margin-bottom: 0; font-size: 27px; font-weight: 600; }
.featured-blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 24px; }
.featured-blog-image { aspect-ratio: 16 / 9; margin-bottom: 16px; overflow: hidden; background: var(--surface); }
.featured-blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.featured-blog-item:hover img { transform: scale(1.02); }
.featured-blog-label { display: block; margin-bottom: 6px; color: var(--accent-soft); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.featured-blog-item h4 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.6; letter-spacing: 0; }

.faq { background: #fff; }
.faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; }
.faq-intro { max-width: 360px; margin-bottom: 20px; color: var(--muted); }
.faq-conversation { position: relative; width: 112px; height: 108px; margin-bottom: 42px; }
.faq-conversation span { position: absolute; display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid #cfd2cf; font-size: 18px; font-weight: 600; line-height: 1; }
.faq-q { top: 0; left: 0; color: var(--accent); background: #fff; }
.faq-a { right: 0; bottom: 0; color: #fff; background: var(--accent); border-color: var(--accent) !important; }
.faq-conversation i { position: absolute; top: 52px; left: 37px; width: 42px; height: 1px; background: #cfd2cf; transform: rotate(-32deg); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; min-height: 102px; align-items: center; justify-content: space-between; gap: 36px; padding: 27px 6px; list-style: none; font-size: 15px; font-weight: 600; line-height: 1.7; cursor: pointer; transition: color .45s ease, background-color .45s ease; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { display: none; }
.faq-list summary:hover { color: var(--accent); background: rgba(244,246,243,.48); }
.faq-plus { position: relative; flex: 0 0 18px; width: 18px; height: 18px; }
.faq-plus::before,
.faq-plus::after { position: absolute; top: 50%; left: 50%; content: ""; background: var(--accent); transform: translate(-50%, -50%); transition: transform .25s ease; }
.faq-plus::before { width: 14px; height: 1px; }
.faq-plus::after { width: 1px; height: 14px; }
.faq-list details[open] .faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-question { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; }
.faq-question > b,
.faq-answer > b { color: var(--accent); font-size: 15px; font-weight: 700; }
.faq-answer { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; max-width: 720px; margin: 0; padding: 0 clamp(36px, 6vw, 82px) 34px 6px; line-height: 2; }
.faq-answer p { margin: 0; color: var(--muted); font-size: 14px; }

.product-cta { padding: 112px 0; background: #fff; }
.product-cta-grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  background: var(--surface);
}
.product-cta-image { aspect-ratio: 16 / 11; overflow: hidden; background: #fff; }
.product-cta-image img { width: 100%; height: 100%; object-fit: cover; }
.product-cta-copy { padding: 52px clamp(36px, 4vw, 52px); }
.product-cta-copy .button-link {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  border-radius: 2px;
}
.product-cta-copy .button-link:hover,
.product-cta-copy .button-link:focus-visible { color: #fff; background: rgba(38,68,52,.86); border-color: rgba(38,68,52,.86); }

.footer-logo-wrap { width: max-content; text-align: center; }
.footer-logo-crop { display: block; width: 172px; height: 24px; margin-inline: auto; overflow: hidden; }
.footer-logo { display: block; width: 172px; max-width: none; filter: invert(1); }
.footer-tagline { margin-bottom: 0; color: rgba(255,255,255,.55); font-size: 11px; text-align: center; }
.footer-social { grid-column: 1 / -1; display: grid; grid-template-columns: .78fr 1fr 1fr; gap: 14px; align-items: stretch; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.16); }
.footer-social-intro { display: flex; min-height: 104px; flex-direction: column; justify-content: center; padding-right: 24px; }
.footer-social-intro span { margin-bottom: 8px; color: rgba(255,255,255,.48); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.footer-social-intro strong { font-size: 18px; font-weight: 600; line-height: 1.55; }
.footer-social-intro em { color: rgba(255,255,255,.5); font-size: 10px; font-style: normal; }
.social-link { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 15px; align-items: center; min-height: 104px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.17); border-radius: 6px; transition: background-color .35s ease, border-color .35s ease; }
.social-link:hover,
.social-link:focus-visible { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.38); }
.social-icon { position: relative; display: block; width: 38px; height: 38px; }
.social-icon.is-instagram { background: radial-gradient(circle at 30% 105%, #fdf497 0 18%, #fd5949 42%, #d6249f 68%, #5b51d8 100%); border-radius: 11px; }
.social-icon.is-instagram::before { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; content: ""; border: 2px solid #fff; border-radius: 50%; }
.social-icon.is-instagram::after { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; content: ""; background: #fff; border-radius: 50%; }
.social-icon.is-youtube { height: 27px; margin-top: 6px; background: #e84d4d; border-radius: 7px; }
.social-icon.is-youtube::after { position: absolute; top: 8px; left: 16px; width: 0; height: 0; content: ""; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #fff; }
.social-copy { display: grid; gap: 1px; min-width: 0; }
.social-copy small { color: rgba(255,255,255,.46); font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.social-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.social-copy em { color: rgba(255,255,255,.58); font-size: 10px; font-style: normal; }
.social-arrow { color: rgba(255,255,255,.55); font-size: 18px; transition: color .3s ease, transform .3s ease; }
.social-link:hover .social-arrow,
.social-link:focus-visible .social-arrow { color: #fff; transform: translate(2px,-2px); }

@media (max-width: 1080px) {
  .main-nav { gap: 17px; font-size: 12px; }
  .material-layout { gap: 48px; }
}

@media (max-width: 820px) {
  .header-inner { min-height: 60px; }
  .brand-mark,
  .brand-mark img { width: 118px; min-width: 118px; }
  .main-nav { inset: 60px 0 auto; background: #fff; }
  .hero { min-height: 620px; }
  .hero picture img { object-position: center; }
  .hero-content { width: calc(100% - 32px); padding: 92px 0 42px; }
  .hero h1 { max-width: 360px; font-size: 34px; line-height: 1.35; }
  .hero-copy { font-size: 15px; }
  .news-inner { gap: 12px; min-height: 58px; }
  .news-viewport { height: 58px; }
  .news-item { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; }
  .news-item time { font-size: 10px; }
  .featured-products,
  .journal,
  .faq,
  .product-cta { padding: 76px 0; }
  .featured-products .section-title,
  .material-story .section-title,
  .journal .section-title,
  .faq .section-title { font-size: 26px; }
  .product-grid { gap: 34px 16px; }
  .purpose-products.is-picnic,
  .purpose-products.is-camp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .purpose-heading { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .purpose-number { font-size: 30px; }
  .product-item h3 { font-size: 15px; }
  .product-item > p:not(.product-category) { display: none; }
  .material-heading,
  .faq-grid { grid-template-columns: 1fr; gap: 20px; }
  .material-heading .section-kicker { grid-column: auto; margin-bottom: -8px; }
  .material-story { padding: 78px 0 22px; }
  .material-heading { margin-bottom: 46px; }
  .material-layout { display: block; }
  .material-visual { display: none; }
  .material-step { min-height: 0; padding: 0 0 58px; border-top: 0; }
  .material-step:last-child { border-bottom: 0; }
  .material-mobile-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 28px;
    object-fit: cover;
    background: var(--surface);
  }
  .material-number { margin-bottom: 20px; }
  .material-step h3 { font-size: 24px; }
  .brand-story { min-height: 720px; }
  .brand-image { min-height: 720px; }
  .brand-image::before { background: rgba(8,16,12,.73); }
  .brand-copy { width: 100%; align-self: end; padding: 220px 24px 58px; }
  .brand-copy h2,
  .product-cta-copy h2 { font-size: 30px; }
  .section-head-row.blog-heading { display: block; }
  .blog-actions { justify-content: space-between; margin-top: 22px; }
  .blog-item { flex-basis: 78%; }
  .featured-blog { margin-top: 68px; }
  .featured-blog-heading { display: block; }
  .featured-blog-grid { grid-template-columns: 1fr; gap: 36px; }
  .faq-grid { gap: 40px; }
  .faq-conversation { margin-bottom: 32px; }
  .faq-list summary { min-height: 88px; padding: 23px 0; font-size: 14px; }
  .faq-list summary:hover { padding-left: 0; }
  .faq-answer { padding: 0 34px 28px 0; }
  .store-guide { padding: 70px 0; }
  .store-heading { margin-bottom: 38px; }
  .store-guide h2 { font-size: 30px; }
  .store-list { grid-template-columns: 1fr; }
  .store-row { min-height: 390px; padding: 38px 30px 34px; }
  .store-row + .store-row { border-top: 1px solid #e0e2df; border-left: 0; }
  .store-row.is-amazon:hover,
  .store-row.is-amazon:focus-visible { background: #edf3f7; }
  .store-row.is-rakuten:hover,
  .store-row.is-rakuten:focus-visible { background: #f8eded; }
  .store-number { margin-bottom: 36px; }
  .store-row-main { display: grid; }
  .store-logo { margin-bottom: 0; font-size: 27px; }
  .store-description { margin: 28px 0 24px; }
  .store-action { width: 100%; margin-top: auto; padding: 0 18px; border-top: 0; }
  .store-outlet { grid-template-columns: 1fr; gap: 34px; margin-top: 70px; padding-top: 48px; }
  .store-outlet-copy h3 { font-size: 25px; }
  .store-outlet-link { grid-template-columns: minmax(0, 1fr) 150px auto; min-height: 156px; }
  .store-outlet-brand { padding: 24px; }
  .store-outlet-link > b { padding: 0 18px; }
  .product-cta-grid { grid-template-columns: 1fr; }
  .product-cta-image { aspect-ratio: 4 / 3; }
  .product-cta-copy { padding: 42px 24px 50px; }
  .footer-social { grid-template-columns: 1fr 1fr; }
  .footer-social-intro { grid-column: 1 / -1; min-height: 0; padding: 0 0 10px; }
  .footer-social-intro strong br { display: none; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: 30px 12px; }
  .purpose-products.is-picnic,
  .purpose-products.is-camp { grid-template-columns: 1fr 1fr; }
  .product-purpose-group { margin-top: 28px; padding: 46px 0 54px; }
  .product-purpose-group + .product-purpose-group { margin-top: 0; padding-top: 46px; }
  .purpose-heading { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; margin-bottom: 28px; }
  .purpose-number { font-size: 27px; }
  .purpose-heading h3 { font-size: 22px; }
  .purpose-heading div > p:last-child { font-size: 13px; }
  .product-image { margin-bottom: 14px; }
  .purpose-products { padding: 12px; border-radius: 6px; }
  .product-category { font-size: 8px; }
  .product-item h3 { font-size: 14px; }
  .product-colors small { font-size: 8px; }
  .faq-conversation { width: 92px; height: 88px; }
  .faq-conversation span { width: 42px; height: 42px; font-size: 16px; }
  .faq-conversation i { top: 43px; left: 31px; width: 35px; }
  .footer-social { grid-template-columns: 1fr; }
  .footer-social-intro { grid-column: auto; }
  .social-link { min-height: 96px; padding: 16px; }
  .store-outlet-link { grid-template-columns: minmax(0, 1fr) 92px; }
  .store-outlet-brand { padding: 22px 18px; }
  .store-outlet-brand img { width: 124px; }
  .store-outlet-link > b { display: none; }
  .faq-question,
  .faq-answer { grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
}