@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900;1000&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root {
  /* 눈독레드 / 눈독코랄 — official screen colors. */
  --noondok-red:#FE2C55;
  --noondok-red-rgb:254,44,85;
  --noondok-coral:#FE7D64;
  --noondok-coral-rgb:254,125,100;
  --noondok-white:#FFFFFF;
  /* Keep red dominant for 70%; transition to coral through the final 30%. */
  --noondok-gradient:linear-gradient(135deg,var(--noondok-red) 0% 70%,var(--noondok-coral) 100%);
  /* 60% red / 30% coral / 10% white, softened by the story ring's blur. */
  --noondok-shimmer:conic-gradient(var(--noondok-red) 0% 60%,var(--noondok-coral) 60% 90%,var(--noondok-white) 90% 100%);
  --noondok-red-soft:rgba(var(--noondok-red-rgb),.06);
  --noondok-red-subtle:rgba(var(--noondok-red-rgb),.04);
  --noondok-red-border:rgba(var(--noondok-red-rgb),.12);
  --noondok-accent:var(--noondok-red);
  --bg:#FFFFFF;
  --white:#FFFFFF;
  --ink:#1C1C1C;
  --muted:#737373;
  --line:#E5E5E5;
  --lime:#1C1C1C;
  --lime-light:#F1F1F1;
  --radius:16px;
  --font:'DM Sans','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}
body {
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
button,input,select {
  font:inherit;
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent;
}
button {
  color:inherit;
  cursor:pointer;
}
button {
  background:none;
  border:0;
}
button:disabled {
  cursor:default;
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible {
  outline:3px solid #1C1C1C;
  outline-offset:4px;
}
button:hover {
  transition:background .15s,color .15s,transform .15s;
}
a {
  color:inherit;
}
img {
  max-width:100%;
  display:block;
}
svg.icon {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
svg.svg-sprite {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
[hidden] {
  display:none!important;
}
.site-header {
  height:88px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(18px);
}
.header-inner {
  max-width:1460px;
  margin:auto;
  padding:0 52px;
  height:100%;
  display:flex;
  align-items:center;
  gap:40px;
}
.wordmark {
  display:flex;
  align-items:center;
  padding:0;
  font-family:'DM Sans',sans-serif;
  font-size:35px;
  font-weight:1000;
  letter-spacing:-1.8px;
  gap:9px;
  white-space:nowrap;
}
.logo-mark {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  border-radius:11px;
  width:37px;
  height:39px;
  font-weight:1000;
  font-size:35px;
  line-height:1;
  padding-bottom:5px;
  padding-right:2px;
  letter-spacing:-3px;
  color:#FFFFFF;
}
.logo-mark span {
  position:absolute;
  right:6px;
  top:8px;
  width:0;
  height:0;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:6px solid #FFFFFF;
}
.beta-tag {
  font-size:9px;
  line-height:1;
  padding:4px 5px;
  border:1px solid #DDDDDD;
  border-radius:4px;
  letter-spacing:.5px;
  font-weight:800;
  align-self:flex-start;
  margin:10px 0 0 0;
}
.main-nav {
  display:flex;
  align-items:center;
  gap:26px;
  white-space:nowrap;
  height:100%;
}
.nav-button {
  padding:0;
  height:100%;
  font-size:14px;
  font-weight:600;
  position:relative;
  color:#737373;
  display:flex;
  gap:5px;
  align-items:center;
}
.main-nav .nav-button.active {
  color:var(--ink);
  font-weight:800;
}
.main-nav .nav-button.active:after {
  content:'';
  height:3px;
  background:var(--ink);
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}
.nav-count {
  font-size:10px;
  color:#737373;
  background:#EEEEEE;
  min-width:16px;
  height:16px;
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nav-count:empty {
  display:none;
}
.search-box {
  display:flex;
  align-items:center;
  background:#F5F5F5;
  border:1px solid transparent;
  border-radius:9px;
  height:40px;
  padding:0 11px;
  gap:8px;
  margin-left:auto;
  flex:1;
  max-width:278px;
  min-width:160px;
  color:#737373;
}
.search-box:focus-within {
  border-color:#BBBBBB;
  background:#FFFFFF;
}
.search-box input {
  background:none;
  border:0;
  outline:none!important;
  min-width:0;
  width:100%;
  font-size:12px;
  color:var(--ink);
}
.search-box input::-webkit-search-cancel-button {
  display:none;
}
.search-box input::placeholder {
  color:#737373;
}
.search-box .icon {
  width:17px;
  height:17px;
}
.search-box button {
  padding:2px;
  display:flex;
}
.search-hint {
  border:1px solid #DDDDDD;
  border-radius:3px;
  font-size:15px;
  width:20px;
  text-align:center;
  line-height:20px;
}
.profile-badge {
  width:34px;
  height:34px;
  flex-shrink:0;
  background:#EEEEEE;
  border:3px solid white;
  outline:1px solid #DDDDDD;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border-radius:50%;
  font-size:13px;
  font-weight:700;
  margin-left:-22px;
}
.profile-badge>span {
  width:8px;
  height:8px;
  border:2px solid white;
  border-radius:50%;
  background:var(--ink);
  position:absolute;
  right:-2px;
  bottom:-2px;
}
.main-container {
  max-width:1460px;
  margin:auto;
  padding:0 52px;
}
.hero-section {
  padding-top:32px;
}
.hero-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 0 16px;
  font-size:11px;
  color:#737373;
}
.hero-heading>span:first-child {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.65px;
  color:#595959;
  display:flex;
  align-items:center;
  gap:7px;
}
.status-dot {
  height:6px;
  width:6px;
  background:var(--ink);
  border-radius:50%;
  box-shadow:0 0 0 3px #EFEFEF;
}
.hero-layout {
  display:grid;
  grid-template-columns:minmax(0,2.18fr) minmax(0,1fr);
  gap:18px;
}
.hero-main {
  height:382px;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:var(--ink);
  color:white;
}
.hero-image {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
}
.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(28,28,28,.92),rgba(28,28,28,.66) 42%,rgba(28,28,28,.06) 100%);
}
.hero-copy {
  position:absolute;
  top:36px;
  left:36px;
  z-index:1;
}
.hero-kicker {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  letter-spacing:.4px;
  color:#E5E5E5;
  font-weight:500;
}
.tiny-star {
  font-size:18px;
  color:#FFFFFF;
  line-height:1;
}
h1 {
  font-size:51px;
  letter-spacing:-2.8px;
  line-height:1.2;
  margin:20px 0 14px;
  font-weight:800;
}
.hero-copy>p {
  font-size:12px;
  line-height:1.8;
  color:#DDDDDD;
  margin:0 0 23px;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:13px 18px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  min-height:44px;
}
.button .icon {
  width:17px;
  height:17px;
}
.button-white {
  background:#FFFFFF;
  color:var(--ink);
}
.button-white:hover {
  background:#E5E5E5;
}
.button-dark {
  background:var(--ink);
  color:white;
}
.button-dark:hover {
  background:#404040;
}
.hero-caption {
  position:absolute;
  right:27px;
  bottom:29px;
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:5px;
  text-shadow:0 1px 15px #1C1C1C;
}
.hero-caption>span:first-child {
  font-size:8px;
  letter-spacing:1.5px;
  opacity:.7;
}
.hero-caption>strong {
  font-size:17px;
  letter-spacing:-.5px;
}
.hero-caption>span:last-child {
  font-size:9px;
  opacity:.75;
}
.hero-number {
  position:absolute;
  left:37px;
  bottom:21px;
  font-size:10px;
  letter-spacing:1.5px;
}
.hero-number>span {
  opacity:.4;
  margin-left:4px;
}
.hero-side {
  position:relative;
  padding:28px 29px 22px;
  overflow:hidden;
  border-radius:18px;
  background:#F5F5F5;
  display:flex;
  flex-direction:column;
  color:var(--ink);
  border:1px solid #E5E5E5;
}
.side-topline {
  display:flex;
  justify-content:space-between;
  align-items:start;
  font-size:9px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:1px;
}
.side-topline>.icon {
  height:21px;
  width:21px;
}
.hero-side h2 {
  font-size:25px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:-1px;
  margin:20px 0 9px;
}
.hero-side p {
  font-size:11px;
  color:#737373;
  line-height:1.8;
  margin:0;
}
.brand-orbit {
  height:116px;
  position:relative;
  flex:1;
  min-height:97px;
  margin-top:8px;
}
.orbit-circle {
  position:absolute;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  box-shadow:0 5px 8px #40404012;
  aspect-ratio:1;
  width:88px;
}
.orbit-one {
  background:#FFFFFF;
  left:3%;
  top:8px;
  transform:rotate(-14deg);
  font-size:13px;
  font-style:italic;
  font-weight:1000;
  letter-spacing:-1px;
  z-index:3;
  color:var(--ink);
  border:1px solid #D9D9D9;
}
.orbit-one>span {
  font-size:5px;
  font-style:normal;
  letter-spacing:.7px;
}
.orbit-two {
  background:var(--ink);
  color:#FFFFFF;
  left:30%;
  top:23px;
  font-family:Georgia,serif;
  font-size:29px;
  transform:rotate(8deg);
  z-index:2;
}
.orbit-three {
  background:#E5E5E5;
  left:57%;
  top:4px;
  font-family:Georgia,serif;
  font-size:58px;
  line-height:.65;
  transform:rotate(10deg);
  width:82px;
  color:var(--ink);
  border:1px solid #D9D9D9;
}
.orbit-three>span {
  font-family:var(--font);
  font-size:8px;
  margin-top:8px;
  letter-spacing:.5px;
}
.orbit-spark {
  position:absolute;
  right:0;
  bottom:13px;
  font-size:38px;
  line-height:1;
  transform:rotate(18deg);
  color:var(--ink);
}
.side-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:14px 0 0;
  border-top:1px solid #40404026;
  font-size:11px;
  font-weight:700;
  position:relative;
  z-index:5;
}
.side-link>span {
  height:28px;
  width:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #73737360;
  border-radius:50%;
}
.side-link:hover>span {
  background:var(--ink);
  color:#FFFFFF;
}
.side-link .icon {
  width:15px;
  height:15px;
}
.categories-section {
  display:flex;
  justify-content:space-between;
  gap:12px;
  max-width:1000px;
  margin:32px auto 39px;
  padding:0 7px;
}
.category-button {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:500;
  min-width:68px;
  padding:0;
  color:#737373;
  white-space:nowrap;
}
.category-button>span {
  width:55px;
  height:55px;
  border:1px solid #E5E5E5;
  border-radius:18px;
  background:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.18s;
}
.category-button .icon {
  width:24px;
  height:24px;
  stroke-width:1.4;
}
.category-button:hover>span {
  border-color:#898989;
  transform:translateY(-2px);
}
.category-button.active {
  font-weight:700;
  color:var(--ink);
}
.category-button.active>span {
  background:var(--ink);
  border-color:var(--ink);
  color:#FFFFFF;
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.eyebrow {
  font-size:9px;
  letter-spacing:1.6px;
  font-weight:700;
  color:#737373;
  margin-bottom:8px;
}
.section-heading h2 {
  margin:0;
  font-size:26px;
  letter-spacing:-1px;
  font-weight:800;
  line-height:1.4;
}
.lime-dot {
  color:var(--ink);
  margin-left:2px;
}
.section-heading p {
  font-size:11px;
  color:#737373;
  margin:8px 0 0;
}
.demo-label {
  display:flex;
  align-items:center;
  gap:6px;
  color:#737373;
  font-size:9px;
  white-space:nowrap;
  background:#EEEEEE;
  border:1px solid #E5E5E5;
  border-radius:5px;
  padding:5px 8px;
}
.demo-label>i {
  width:4px;
  height:4px;
  background:var(--ink);
  border-radius:50%;
}
.filters-section {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 0 16px;
  border-bottom:1px solid var(--line);
}
.type-filters {
  display:flex;
  align-items:center;
  gap:7px;
}
.type-button {
  padding:8px 15px;
  font-size:11px;
  font-weight:600;
  color:#737373;
  border:1px solid var(--line);
  border-radius:7px;
  background:#FFFFFF;
  white-space:nowrap;
}
.type-button.active {
  color:#FFFFFF;
  background:var(--ink);
  border-color:var(--ink);
}
.type-button:hover:not(.active) {
  background:#EEEEEE;
}
.select-filters {
  display:flex;
  align-items:center;
  gap:16px;
}
.select-filters>span {
  height:13px;
  width:1px;
  background:var(--line);
}
.select-filters select {
  font-size:11px;
  color:#737373;
  border:0;
  background:transparent;
  max-width:120px;
  cursor:pointer;
  padding:6px 20px 6px 0;
  outline-offset:0;
}
.feed-meta {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  min-height:49px;
  font-size:10px;
  color:#737373;
}
.feed-meta strong {
  color:#404040;
  font-weight:700;
}
.feed-meta button {
  font-size:10px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:4px;
  background:#EEEEEE;
  color:#595959;
  padding:4px 8px;
  margin:2px;
}
.feed-meta button .icon {
  width:12px;
  height:12px;
}
#activeFilters {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  justify-content:end;
}
.ad-card {
  min-width:0;
  position:relative;
  background:#FFFFFF;
  border:1px solid #E5E5E5;
  border-radius:12px;
  overflow:hidden;
  transition:box-shadow .2s,transform .2s;
}
.ad-card:hover {
  box-shadow:0 8px 20px #4040400B;
  transform:translateY(-3px);
}
.card-visual {
  position:relative;
  width:100%;
  min-height:200px;
  display:block;
  padding:0;
  aspect-ratio:1.3;
  background:#E5E5E5;
  overflow:hidden;
  text-align:left;
}
.card-visual img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s;
}
.card-visual:hover img {
  transform:scale(1.035);
}
.card-visual:after {
  content:'';
  pointer-events:none;
  position:absolute;
  inset:55% 0 0;
  background:linear-gradient(transparent,#1C1C1C20);
}
.card-badge {
  position:absolute;
  z-index:1;
  left:12px;
  top:12px;
  background:white;
  color:#404040;
  font-size:9px;
  line-height:1;
  padding:6px 7px;
  border-radius:4px;
  font-weight:700;
  box-shadow:0 1px 4px #1C1C1C05;
}
.card-badge.featured {
  background:var(--ink);
  color:#FFFFFF;
}
.platform-tag {
  position:absolute;
  bottom:11px;
  left:12px;
  border-radius:4px;
  background:#FFFFFFEE;
  padding:4px 6px;
  font-size:8px;
  line-height:1.2;
  color:#595959;
  z-index:1;
  font-weight:600;
}
.save-button {
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border:1px solid #FFFFFF35;
  background:#1C1C1C2E;
  color:#FFFFFF;
  backdrop-filter:blur(6px);
  border-radius:50%;
  z-index:2;
}
.save-button>.icon {
  width:14px;
  height:14px;
  stroke-width:1.7;
}
.save-button:hover {
  background:#1C1C1C88;
}
.save-button[aria-pressed=true] {
  color:#FFFFFF;
  background:var(--ink);
  border-color:var(--ink);
}
.save-button[aria-pressed=true] .icon {
  fill:currentColor;
}
.card-body {
  padding:14px 15px 0;
}
.card-brand-row {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  margin-bottom:11px;
  min-height:20px;
}
.brand-avatar {
  width:21px;
  height:21px;
  border-radius:50%;
  background:#EEEEEE;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:8px;
  font-weight:900;
  flex-shrink:0;
  letter-spacing:-.4px;
}
.brand-name {
  font-size:10px;
  font-weight:700;
}
.follow-small {
  margin-left:auto;
  color:#737373;
  border:1px solid #E5E5E5;
  display:flex;
  justify-content:center;
  align-items:center;
  height:21px;
  width:21px;
  border-radius:50%;
  padding:0;
}
.follow-small .icon {
  width:12px;
  height:12px;
}
.follow-small[aria-pressed=true] {
  background:var(--ink);
  color:#FFFFFF;
  border-color:var(--ink);
}
.card-title {
  display:block;
  text-align:left;
  padding:0;
  font-size:15px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:-.45px;
  min-height:45px;
  width:100%;
}
.card-title:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}
.card-description {
  font-size:10px;
  color:#737373;
  line-height:1.6;
  margin:7px 0 13px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.card-benefit-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  min-height:25px;
  margin:0 0 12px;
}
.benefit-pill {
  background:#F2F2F2;
  color:var(--ink);
  font-size:10px;
  padding:4px 6px;
  border-radius:4px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.deadline {
  font-size:9px;
  color:#737373;
  display:flex;
  align-items:center;
  gap:3px;
  white-space:nowrap;
}
.deadline .icon {
  width:10px;
  height:10px;
}
.deadline.urgent {
  color:var(--ink);
  font-weight:600;
}
.card-footer {
  border-top:1px solid #EEEEEE;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 0 12px;
  gap:8px;
}
.like-button {
  display:flex;
  align-items:center;
  gap:5px;
  color:#737373;
  font-size:10px;
  padding:0;
}
.like-button .icon {
  height:14px;
  width:14px;
}
.like-button[aria-pressed=true] {
  color:var(--ink);
}
.like-button[aria-pressed=true] .icon {
  fill:currentColor;
}
.detail-link {
  font-size:9px;
  color:#737373;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0;
}
.detail-link .icon {
  width:12px;
  height:12px;
}
.load-more-wrap {
  display:flex;
  justify-content:center;
  margin:32px 0 40px;
}
.load-more {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:36px;
  padding:12px 25px;
  border:1px solid #DDDDDD;
  border-radius:7px;
  font-size:11px;
  font-weight:600;
  min-width:190px;
  background:#FFFFFF;
}
.load-more:hover {
  background:#EEEEEE;
}
.load-more .icon {
  width:15px;
  height:15px;
}
.empty-state {
  text-align:center;
  padding:66px 20px 72px;
  border:1px dashed #DDDDDD;
  border-radius:15px;
  background:#FFFFFF;
}
.empty-icon {
  width:60px;
  height:60px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#F5F5F5;
  color:#737373;
}
.empty-icon .icon {
  width:26px;
  height:26px;
}
.empty-state h3 {
  font-size:21px;
  margin:18px 0 7px;
  letter-spacing:-.6px;
}
.empty-state p {
  font-size:13px;
  color:var(--muted);
  margin:0 0 23px;
}
.brands-section {
  padding-top:44px;
}
.brand-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin:28px 0 45px;
}
.brand-card {
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:15px;
  padding:30px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}
.brand-monogram {
  width:92px;
  height:92px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'DM Sans',sans-serif;
  font-size:30px;
  font-weight:900;
  background:#EEEEEE;
  letter-spacing:-1.2px;
}
.brand-info h3 {
  font-size:17px;
  margin:5px 0 6px;
}
.brand-info p {
  color:var(--muted);
  font-size:12px;
  margin:4px 0;
}
.brand-info .brand-category {
  font-size:10px;
}
.follow-button {
  border:1px solid #DDDDDD;
  border-radius:7px;
  padding:8px 19px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  font-size:11px;
  background:#F7F7F7;
  min-height:34px;
}
.follow-button .icon {
  width:14px;
  height:14px;
}
.follow-button:hover {
  background:#EEEEEE;
}
.follow-button[aria-pressed=true] {
  background:var(--ink);
  border-color:var(--ink);
  color:#FFFFFF;
}
.brand-discovery {
  border-top:1px solid var(--line);
  padding:31px 0 36px;
}
.brand-discovery-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
}
.brand-discovery h2 {
  font-size:22px;
  letter-spacing:-.7px;
  margin:6px 0 0;
  font-weight:800;
}
.text-button {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:#737373;
}
.text-button .icon {
  width:15px;
  height:15px;
}
.featured-brands {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.mini-brand {
  display:flex;
  align-items:center;
  gap:13px;
  text-align:left;
  padding:17px 15px;
  border:1px solid #E5E5E5;
  border-radius:10px;
  background:#FFFFFF;
  min-width:0;
}
.mini-brand:hover {
  border-color:#BBBBBB;
  background:#FFFFFF;
}
.mini-brand .brand-avatar,.mini-brand .brand-monogram {
  width:42px;
  height:42px;
  font-size:15px;
  flex-shrink:0;
}
.mini-brand strong {
  font-size:11px;
  display:block;
}
.mini-brand p,.mini-brand small {
  font-size:9px;
  color:#737373;
  margin:5px 0 0;
  display:block;
}
.mini-brand>.icon {
  margin-left:auto;
  height:16px;
  width:16px;
  color:#737373;
}
.mini-brand .brand-info {
  min-width:0;
  flex:1;
}
.mini-brand .brand-info h3 {
  font-size:11px;
  margin:0;
}
.mini-brand .brand-info p {
  font-size:9px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mini-brand .follow-button {
  padding:0;
  min-width:27px;
  width:27px;
  height:27px;
  min-height:27px;
  border-radius:50%;
  font-size:0;
  gap:0;
}
.beta-notice {
  display:flex;
  align-items:center;
  gap:15px;
  border:1px solid #E5E5E5;
  background:#F5F5F5;
  border-radius:10px;
  padding:19px 22px;
  margin:0 0 40px;
}
.beta-notice-icon {
  font-size:27px;
  line-height:1;
  font-family:Georgia,serif;
  color:#737373;
}
.beta-notice p {
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:0;
}
.beta-notice p strong {
  font-size:11px;
  font-weight:600;
  color:#737373;
}
.beta-notice p>span {
  font-size:10px;
  color:#737373;
}
.beta-version {
  margin-left:auto;
  font-size:8px;
  font-weight:600;
  letter-spacing:1px;
  color:#737373;
  white-space:nowrap;
}
.site-footer {
  max-width:1460px;
  margin:auto;
  padding:24px 52px 35px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.site-footer>div {
  display:flex;
  align-items:center;
  gap:17px;
}
.footer-logo {
  font-size:23px;
  font-weight:1000;
  letter-spacing:-1.3px;
}
.site-footer>div>span:last-child {
  font-size:9px;
  color:#737373;
}
.site-footer p {
  font-size:9px;
  color:#737373;
  margin:0;
}
.site-footer p>span {
  margin-left:18px;
  font-size:8px;
  letter-spacing:.6px;
}
.mobile-nav {
  display:none;
}
.ad-dialog {
  border:0;
  border-radius:20px;
  padding:0;
  width:min(850px,calc(100vw - 40px));
  max-height:90dvh;
  color:var(--ink);
  background:var(--bg);
  box-shadow:0 28px 110px #1C1C1C33;
  overscroll-behavior:contain;
}
.ad-dialog::backdrop {
  background:#1C1C1C88;
  backdrop-filter:blur(6px);
}
#dialogContent {
  position:relative;
}
.dialog-close {
  position:absolute;
  top:16px;
  right:16px;
  z-index:3;
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#1C1C1C;
  background:#FFFFFFEE;
  box-shadow:0 2px 10px #1C1C1C20;
}
.dialog-close .icon {
  width:18px;
  height:18px;
}
.dialog-image {
  width:100%;
  max-height:340px;
  aspect-ratio:2.3;
  object-fit:cover;
  background:#E5E5E5;
}
.dialog-main {
  padding:27px 32px 31px;
}
.dialog-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:15px;
}
.dialog-brand {
  display:flex;
  gap:8px;
  align-items:center;
  font-weight:700;
  font-size:12px;
}
.dialog-brand .brand-avatar {
  width:28px;
  height:28px;
}
.dialog-title {
  font-size:28px;
  letter-spacing:-1px;
  line-height:1.4;
  margin:0 0 11px;
}
.dialog-description {
  font-size:13px;
  line-height:1.8;
  color:#737373;
  margin:0 0 18px;
}
.dialog-benefit {
  padding:15px 18px;
  border-radius:9px;
  background:#F2F2F2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  color:var(--ink);
  margin:20px 0;
  font-weight:700;
}
.dialog-benefit .benefit-pill {
  font-size:17px;
  padding:0;
  background:none;
}
.dialog-terms {
  font-size:12px;
  color:#737373;
  margin:18px 0;
  line-height:1.85;
}
.dialog-terms h3 {
  font-size:12px;
  color:#404040;
  margin:0 0 8px;
}
.dialog-terms ul {
  padding-left:18px;
  margin:8px 0;
}
.dialog-actions {
  display:flex;
  align-items:center;
  gap:10px;
  margin:22px 0 16px;
}
.dialog-actions>button {
  min-height:42px;
  border-radius:7px;
  padding:10px 15px;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid #DDDDDD;
  background:white;
}
.dialog-actions>button .icon {
  width:17px;
  height:17px;
}
.dialog-actions .save-action,.dialog-actions .button-dark {
  background:var(--ink);
  color:white;
  flex:1;
}
.dialog-actions>button[aria-pressed=true] {
  background:var(--ink);
  color:#FFFFFF;
  border-color:var(--ink);
}
.dialog-actions>.like-button[aria-pressed=true] {
  color:#FFFFFF;
  background:var(--ink);
  border-color:var(--ink);
}
.demo-note {
  font-size:10px;
  color:#737373;
  background:#F5F5F5;
  padding:12px 14px;
  border-radius:7px;
  line-height:1.7;
  margin:15px 0 0;
}
.toast {
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translate(-50%,20px);
  padding:13px 22px;
  border-radius:11px;
  z-index:100;
  background:var(--ink);
  color:#FFFFFF;
  box-shadow:0 5px 30px #1C1C1C2A;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  font-size:12px;
  max-width:calc(100vw - 32px);
  text-align:center;
  white-space:normal;
}
.toast.show,.toast.visible {
  opacity:1;
  transform:translate(-50%,0);
}
@media(min-width:1600px) {
  .hero-main {
    height:420px;
  }
  .hero-copy {
    top:43px;
    left:42px;
  }
  h1 {
    font-size:57px;
  }
  .hero-side {
    padding:33px;
  }
  .hero-side h2 {
    font-size:28px;
  }
  .hero-side p {
    font-size:12px;
  }
  .brand-orbit {
    margin-top:16px;
  }
  .orbit-circle {
    width:98px;
  }
  .orbit-three {
    width:92px;
  }
  .side-link {
    font-size:12px;
  }
  .card-title {
    font-size:16px;
  }
}
@media(max-width:1190px) {
  .header-inner {
    padding:0 32px;
    gap:27px;
  }
  .main-container {
    padding:0 32px;
  }
  .main-nav {
    gap:20px;
  }
  .main-nav .nav-button {
    font-size:12px;
  }
  .profile-badge {
    display:none;
  }
  .wordmark {
    font-size:31px;
    gap:7px;
  }
  .search-box {
    max-width:230px;
  }
  .hero-main {
    height:365px;
  }
  .hero-copy {
    left:30px;
    top:32px;
  }
  h1 {
    font-size:47px;
  }
  .hero-side {
    padding:24px;
  }
  .hero-side h2 {
    font-size:23px;
  }
  .hero-caption {
    right:20px;
    bottom:25px;
  }
  .hero-caption strong {
    font-size:14px;
  }
  .hero-caption span:first-child {
    font-size:7px;
  }
  .hero-layout {
    gap:14px;
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  }
  .orbit-circle {
    width:75px;
  }
  .orbit-three {
    width:70px;
  }
  .orbit-one {
    font-size:12px;
  }
  .orbit-two {
    font-size:26px;
  }
  .card-body {
    padding:12px 12px 0;
  }
  .card-title {
    font-size:14px;
  }
  .card-benefit-row {
    gap:3px;
  }
  .benefit-pill {
    font-size:9px;
  }
  .deadline {
    font-size:8px;
  }
  .site-footer {
    padding:25px 32px;
  }
  .brand-grid {
    gap:15px;
  }
  .mini-brand {
    padding:15px 12px;
    gap:10px;
  }
  .mini-brand .brand-avatar {
    width:35px;
    height:35px;
  }
  .brand-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:980px) {
  .header-inner {
    gap:22px;
  }
  .main-nav {
    gap:16px;
  }
  .main-nav [data-view=following] {
    display:none;
  }
  .search-box {
    max-width:250px;
  }
  .hero-main {
    height:342px;
  }
  .hero-copy {
    top:28px;
    left:26px;
  }
  h1 {
    font-size:43px;
    margin-top:18px;
  }
  .hero-copy>p {
    font-size:11px;
  }
  .hero-caption {
    display:none;
  }
  .hero-side {
    padding:24px 20px 18px;
  }
  .hero-side h2 {
    font-size:21px;
  }
  .hero-side p {
    font-size:10px;
  }
  .hero-kicker {
    font-size:9px;
  }
  .hero-copy>.button {
    font-size:10px;
    padding:10px 14px;
    min-height:39px;
  }
  .hero-number {
    left:27px;
    bottom:17px;
  }
  .side-link {
    font-size:10px;
  }
  .brand-orbit {
    min-height:83px;
  }
  .orbit-circle {
    width:66px;
  }
  .orbit-three {
    width:64px;
    left:60%;
  }
  .orbit-spark {
    right:-7px;
    bottom:7px;
    font-size:26px;
  }
  .category-button {
    font-size:10px;
    min-width:61px;
  }
  .categories-section {
    gap:8px;
  }
  .category-button>span {
    width:50px;
    height:50px;
    border-radius:15px;
  }
  .featured-brands {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .mini-brand .brand-info p {
    font-size:10px;
  }
  .card-title {
    font-size:15px;
  }
  .site-footer p {
    font-size:8px;
  }
}
@media(max-width:700px) {
  .site-header {
    height:auto;
    position:relative;
  }
  .header-inner {
    height:112px;
    padding:17px 20px;
    gap:0;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .wordmark {
    font-size:29px;
  }
  .logo-mark {
    width:31px;
    height:32px;
    border-radius:9px;
    font-size:31px;
  }
  .logo-mark span {
    top:7px;
    right:4px;
    border-top-width:3px;
    border-bottom-width:3px;
    border-left-width:5px;
  }
  .beta-tag {
    font-size:8px;
    margin-top:8px;
  }
  .main-nav {
    display:none;
  }
  .profile-badge {
    display:flex;
    margin:0;
    width:29px;
    height:29px;
    font-size:11px;
  }
  .search-box {
    order:4;
    flex-basis:100%;
    max-width:none;
    height:34px;
    margin-top:12px;
    min-width:0;
  }
  .search-box input {
    font-size:11px;
  }
  .search-hint {
    height:18px;
    font-size:12px;
    line-height:16px;
    width:18px;
  }
  .main-container {
    padding:0 20px;
  }
  .hero-section {
    padding-top:23px;
  }
  .hero-heading {
    margin-bottom:13px;
  }
  .hero-heading>span:first-child {
    font-size:8px;
    letter-spacing:1.1px;
  }
  .hero-heading>span:last-child {
    font-size:9px;
  }
  .hero-layout {
    grid-template-columns:1fr;
    gap:12px;
  }
  .hero-main {
    height:333px;
    border-radius:14px;
  }
  .hero-copy {
    left:25px;
    top:27px;
  }
  h1 {
    font-size:44px;
    letter-spacing:-2px;
  }
  .hero-kicker {
    font-size:9px;
  }
  .hero-copy>p {
    font-size:11px;
  }
  .hero-number {
    left:26px;
    bottom:18px;
  }
  .hero-image {
    object-position:64% 50%;
  }
  .hero-shade {
    background:linear-gradient(90deg,#1C1C1CD9,#1C1C1C73 60%,#1C1C1C0D);
  }
  .hero-side {
    height:134px;
    padding:19px 20px;
    border-radius:13px;
    display:block;
  }
  .side-topline {
    display:none;
  }
  .hero-side h2 {
    font-size:19px;
    line-height:1.3;
    margin:0 0 7px;
    letter-spacing:-.7px;
  }
  .hero-side p {
    display:none;
  }
  .hero-side .brand-orbit {
    position:absolute;
    right:18px;
    top:15px;
    width:130px;
    height:90px;
    min-height:0;
    margin:0;
  }
  .orbit-circle {
    width:57px;
  }
  .orbit-one {
    left:0;
    top:6px;
    font-size:10px;
  }
  .orbit-one>span {
    font-size:3px;
  }
  .orbit-two {
    left:38px;
    top:37px;
    font-size:21px;
  }
  .orbit-three {
    left:77px;
    top:3px;
    width:54px;
    font-size:38px;
  }
  .orbit-three>span {
    font-size:6px;
    margin-top:7px;
  }
  .orbit-spark {
    right:1px;
    bottom:-3px;
    font-size:22px;
  }
  .side-link {
    border:0;
    padding:5px 0 0;
    width:max-content;
    gap:10px;
    font-size:9px;
  }
  .side-link>span {
    width:21px;
    height:21px;
  }
  .side-link .icon {
    width:12px;
    height:12px;
  }
  .categories-section {
    overflow:auto;
    justify-content:flex-start;
    margin:25px -20px 29px;
    padding:0 20px 8px;
    gap:18px;
    scrollbar-width:none;
  }
  .categories-section::-webkit-scrollbar {
    display:none;
  }
  .category-button {
    min-width:46px;
    gap:8px;
    font-size:9px;
  }
  .category-button>span {
    width:46px;
    height:46px;
    border-radius:14px;
  }
  .category-button .icon {
    width:21px;
    height:21px;
  }
  .section-heading {
    gap:10px;
  }
  .section-heading h2 {
    font-size:22px;
    letter-spacing:-.8px;
  }
  .section-heading p {
    font-size:10px;
    margin-top:6px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.1px;
    margin-bottom:6px;
  }
  .demo-label {
    font-size:8px;
    padding:4px 6px;
  }
  .filters-section {
    padding-top:18px;
    gap:13px;
    flex-wrap:wrap;
  }
  .type-filters {
    gap:5px;
  }
  .type-button {
    font-size:10px;
    padding:7px 12px;
    border-radius:6px;
  }
  .select-filters {
    margin-left:auto;
    gap:10px;
  }
  .select-filters select {
    font-size:9px;
    padding-right:7px;
    max-width:100px;
  }
  .feed-meta {
    min-height:42px;
    font-size:9px;
  }
  .ad-card {
    border-radius:10px;
  }
  .card-visual {
    aspect-ratio:1.04;
  }
  .card-badge {
    top:9px;
    left:9px;
    font-size:8px;
    padding:5px;
  }
  .save-button {
    top:7px;
    right:7px;
    width:27px;
    height:27px;
  }
  .save-button .icon {
    width:12px;
    height:12px;
  }
  .platform-tag {
    bottom:8px;
    left:9px;
    font-size:7px;
    padding:3px 5px;
  }
  .card-body {
    padding:11px 10px 0;
  }
  .card-brand-row {
    margin-bottom:8px;
    gap:5px;
  }
  .brand-avatar {
    width:19px;
    height:19px;
    font-size:7px;
  }
  .brand-name {
    font-size:9px;
  }
  .follow-small {
    height:19px;
    width:19px;
  }
  .card-title {
    font-size:12px;
    letter-spacing:-.35px;
    min-height:38px;
    line-height:1.5;
  }
  .card-description {
    font-size:9px;
    margin:6px 0 10px;
  }
  .card-benefit-row {
    min-height:23px;
    margin-bottom:9px;
    gap:3px;
  }
  .benefit-pill {
    font-size:8px;
    padding:4px;
  }
  .deadline {
    font-size:7px;
  }
  .deadline .icon {
    display:none;
  }
  .card-footer {
    padding:9px 0 11px;
  }
  .like-button {
    font-size:9px;
    gap:4px;
  }
  .like-button .icon {
    width:12px;
    height:12px;
  }
  .detail-link {
    font-size:8px;
  }
  .detail-link .icon {
    width:10px;
    height:10px;
  }
  .load-more-wrap {
    margin:25px 0 30px;
  }
  .load-more {
    font-size:10px;
    min-width:170px;
    padding:10px 20px;
  }
  .brand-discovery {
    padding-top:25px;
  }
  .brand-discovery h2 {
    font-size:20px;
  }
  .text-button {
    font-size:9px;
    gap:4px;
  }
  .featured-brands {
    gap:8px;
  }
  .mini-brand {
    padding:12px 10px;
    gap:8px;
  }
  .mini-brand .brand-avatar,.mini-brand .brand-monogram {
    width:31px;
    height:31px;
    font-size:11px;
  }
  .mini-brand strong,.mini-brand .brand-info h3 {
    font-size:9px;
  }
  .mini-brand p,.mini-brand small,.mini-brand .brand-info p {
    font-size:8px;
  }
  .mini-brand .follow-button {
    height:23px;
    min-height:23px;
    width:23px;
    min-width:23px;
  }
  .mini-brand>.icon {
    width:12px;
    height:12px;
  }
  .beta-notice {
    padding:14px;
    gap:11px;
    margin-bottom:27px;
  }
  .beta-notice p strong {
    font-size:9px;
  }
  .beta-notice p>span {
    font-size:8px;
    line-height:1.7;
  }
  .beta-notice-icon {
    font-size:23px;
  }
  .beta-version {
    display:none;
  }
  .site-footer {
    padding:21px 20px 100px;
    display:block;
  }
  .site-footer>div {
    gap:12px;
  }
  .site-footer>div>span:last-child {
    font-size:8px;
  }
  .site-footer p {
    margin-top:12px;
    font-size:8px;
  }
  .site-footer p>span {
    font-size:7px;
  }
  .footer-logo {
    font-size:22px;
  }
  .mobile-nav {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:30;
    display:flex;
    justify-content:space-around;
    background:#FFFFFFED;
    backdrop-filter:blur(15px);
    border-top:1px solid var(--line);
    height:calc(64px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-nav .nav-button {
    font-size:9px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    min-width:55px;
    color:#737373;
  }
  .mobile-nav .nav-button.active {
    color:var(--ink);
    font-weight:700;
  }
  .mobile-nav .nav-button.active .icon {
    color:var(--ink);
    fill:#E5E5E5;
  }
  .mobile-nav .nav-button .icon {
    width:19px;
    height:19px;
  }
  .toast {
    bottom:85px;
    font-size:11px;
    width:max-content;
    max-width:calc(100vw - 32px);
    padding:12px 17px;
  }
  .brand-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:25px;
  }
  .brand-card {
    padding:23px 12px;
    gap:10px;
  }
  .brand-monogram {
    width:70px;
    height:70px;
    font-size:24px;
  }
  .brand-info h3 {
    font-size:13px;
  }
  .brand-info p {
    font-size:10px;
  }
  .follow-button {
    padding:7px 13px;
    font-size:10px;
  }
  .brands-section {
    padding-top:29px;
  }
  .brands-section .section-heading h2 {
    font-size:21px;
  }
  .ad-dialog {
    width:calc(100vw - 22px);
    border-radius:14px;
    max-height:92dvh;
  }
  .dialog-image {
    aspect-ratio:1.6;
    max-height:260px;
  }
  .dialog-main {
    padding:22px;
  }
  .dialog-title {
    font-size:23px;
  }
  .dialog-description {
    font-size:12px;
  }
  .dialog-topline {
    margin-bottom:16px;
  }
  .dialog-actions {
    flex-wrap:wrap;
  }
  .dialog-actions>button {
    font-size:11px;
    padding:10px 12px;
  }
  .dialog-benefit {
    padding:14px;
  }
  .dialog-benefit .benefit-pill {
    font-size:15px;
  }
  .empty-state {
    padding:45px 15px;
  }
  .empty-state h3 {
    font-size:18px;
  }
  .empty-state p {
    font-size:11px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important;
  }
}
/* Shared interaction states and detail layout. */
.follow-small>span {
  display:none;
}
.brand-name {
  padding:0;
}
.brand-avatar:not(.has-logo),.brand-monogram {
  color:#FFFFFF;
  background:#1C1C1C!important;
}
.brand-card .brand-name {
  font-size:17px;
}
.brand-category {
  font-size:10px;
  letter-spacing:.4px;
  color:#737373;
}
.brand-ad-count {
  display:block;
  color:#737373;
  font-size:9px;
  margin-top:12px;
}
.primary-button {
  background:var(--ink);
  color:white;
  padding:12px 20px;
  font-size:12px;
  font-weight:600;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.primary-button:hover {
  background:#404040;
}
.brand-empty {
  grid-column:1/-1;
  text-align:center;
  background:#FFFFFF;
  border:1px dashed var(--line);
  padding:55px 25px;
  border-radius:14px;
}
.brand-empty h3 {
  font-size:21px;
  margin:0 0 10px;
}
.brand-empty p {
  color:var(--muted);
  font-size:13px;
  margin:0 0 20px;
}
.dialog-image {
  position:relative;
  overflow:hidden;
}
.dialog-image img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.dialog-image .platform-tag {
  left:22px;
  bottom:17px;
  font-size:10px;
}
.dialog-topline {
  font-size:10px;
  color:#737373;
  margin-bottom:12px;
}
.sample-label {
  background:#EEEEEE;
  border:1px solid #E5E5E5;
  padding:4px 7px;
  border-radius:4px;
  font-size:9px;
}
.dialog-brand {
  margin:10px 0 15px;
}
.dialog-brand>.follow-small {
  margin-left:4px;
  width:25px;
  height:25px;
}
.dialog-benefit>span:first-child {
  display:flex;
  align-items:center;
  gap:8px;
}
.dialog-benefit>span:first-child .icon {
  width:18px;
  height:18px;
}
.dialog-benefit .deadline {
  font-size:11px;
  font-weight:500;
}
.dialog-actions>.dialog-save {
  background:var(--ink);
  color:white;
  flex:1;
  font-size:14px;
}
.dialog-actions>.dialog-save[aria-pressed=true] {
  background:var(--ink);
  color:#FFFFFF;
  border-color:var(--ink);
}
.dialog-actions>.dialog-like {
  min-width:95px;
}
.mini-brand .brand-info strong {
  font-size:12px;
}
.mini-brand .brand-info small {
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hero-number {
  font-size:8px;
  letter-spacing:1.8px;
}
.hero-number>span {
  margin:0 6px;
}
.feed-section:only-child {
  padding-top:30px;
}
@media(min-width:701px) and (max-width:980px) {
  .main-nav [data-view=following] {
    display:flex;
  }
  .header-inner {
    gap:18px;
  }
  .main-nav {
    gap:13px;
  }
  .main-nav .nav-button {
    font-size:11px;
  }
  .nav-count {
    font-size:8px;
    min-width:13px;
    height:13px;
  }
  .search-box {
    min-width:100px;
    max-width:200px;
  }
  .wordmark {
    font-size:29px;
  }
  .beta-tag {
    font-size:8px;
  }
  .logo-mark {
    height:34px;
    width:33px;
  }
  .search-hint {
    display:none;
  }
}
@media(max-width:700px) {
  .brand-card .brand-name {
    font-size:14px;
  }
  .mini-brand .brand-info strong {
    font-size:9px;
  }
  .mini-brand .brand-info small {
    font-size:8px;
  }
  .dialog-topline {
    font-size:9px;
  }
  .dialog-actions .dialog-save {
    font-size:13px;
  }
  .dialog-benefit .deadline {
    font-size:10px;
  }
  .hero-number {
    font-size:7px;
  }
  .card-badge {
    max-width:calc(100% - 47px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* Motion previews preserve the source media's original colors. */
.preview-host {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:200px;
  pointer-events:none;
}
.preview-video,
.preview-frame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  opacity:0;
  background:#1C1C1C;
  pointer-events:none;
  transition:opacity .25s ease;
}
.is-playing .preview-video,
.is-playing .preview-frame {
  opacity:1;
}
.card-visual.is-playing img,
.is-playing .card-visual img {
  transform:none;
}
.motion-badge,
.preview-badge {
  position:absolute;
  right:11px;
  bottom:11px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 7px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:5px;
  background:rgba(28,28,28,.76);
  color:#FFFFFF;
  font-size:8px;
  font-weight:600;
  line-height:1.25;
  backdrop-filter:blur(8px);
}
.motion-badge .icon,
.preview-badge .icon {
  width:11px;
  height:11px;
}
.preview-unavailable .preview-badge,
.preview-unavailable .motion-badge {
  background:rgba(28,28,28,.88);
  color:#FFFFFF;
  border-color:rgba(255,255,255,.35);
}
.dialog-image {
  min-height:200px;
}
.dialog-image iframe,
.dialog-image video {
  display:block;
  width:100%;
  height:100%;
  min-height:200px;
  border:0;
  object-fit:contain;
  background:#1C1C1C;
}
.preview-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-shrink:0;
  min-height:32px;
  padding:7px 10px;
  border:1px solid #DDDDDD;
  border-radius:7px;
  background:#F5F5F5;
  color:#595959;
  font-size:10px;
  font-weight:600;
  white-space:nowrap;
}
.preview-toggle:hover {
  border-color:#999999;
  background:#EEEEEE;
}
.preview-toggle[aria-pressed=true] {
  border-color:#1C1C1C;
  background:#1C1C1C;
  color:#FFFFFF;
}
.preview-toggle .icon {
  width:14px;
  height:14px;
}
.source-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-width:0;
  padding:13px 15px;
  border:1px solid #DDDDDD;
  border-radius:8px;
  background:#FFFFFF;
  color:#1C1C1C;
  font-size:12px;
  font-weight:600;
  line-height:1.6;
  text-decoration:none;
  overflow-wrap:anywhere;
  word-break:normal;
}
.source-link:hover {
  border-color:#1C1C1C;
  background:#F7F7F7;
  text-decoration:underline;
  text-underline-offset:3px;
}
.source-link .icon {
  width:17px;
  height:17px;
  flex-shrink:0;
}
.source-meta {
  margin:9px 0 15px;
  color:#737373;
  font-size:10px;
  line-height:1.7;
  overflow-wrap:anywhere;
}
@media(max-width:700px) {
  .card-visual {
    aspect-ratio:16/10;
    min-height:200px;
  }
  .card-body {
    padding:16px 16px 0;
  }
  .card-title {
    font-size:16px;
    min-height:0;
    line-height:1.55;
  }
  .card-description {
    font-size:12px;
    margin:8px 0 13px;
  }
  .card-brand-row {
    gap:7px;
    margin-bottom:10px;
  }
  .card-brand-row .brand-name {
    font-size:12px;
  }
  .card-brand-row .brand-avatar {
    width:23px;
    height:23px;
    font-size:9px;
  }
  .card-brand-row .follow-small {
    width:25px;
    height:25px;
  }
  .benefit-pill {
    font-size:11px;
    padding:5px 7px;
  }
  .deadline {
    font-size:10px;
  }
  .card-footer {
    padding:13px 0 15px;
  }
  .card-footer .like-button,
  .card-footer .detail-link {
    font-size:11px;
  }
  .card-footer .icon {
    width:14px;
    height:14px;
  }
  .motion-badge,
  .preview-badge {
    right:8px;
    bottom:8px;
    gap:3px;
    padding:5px 7px;
    font-size:9px;
  }
  .motion-badge .icon,
  .preview-badge .icon {
    width:11px;
    height:11px;
  }
  .preview-toggle {
    min-height:28px;
    padding:5px 8px;
    font-size:9px;
  }
  .source-link {
    padding:11px 12px;
    font-size:11px;
  }
  .source-meta {
    font-size:9px;
  }
}

/* Soft neutral catalog. Desktop density stays independent of mobile layout. */
:root {
  --bg:#F7F7F7;
  --ink:#1C1C1C;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
body {
  background:#F7F7F7;
  letter-spacing:-.12px;
}
.site-header {
  height:72px;
  border-bottom:1px solid #EBEBEB;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);
}
.header-inner {
  max-width:1440px;
  height:72px;
  padding:0 24px;
  gap:34px;
  flex-wrap:nowrap;
}
.wordmark {
  flex-shrink:0;
  color:#1C1C1C;
  font-family:var(--font);
  font-size:28px;
  font-weight:800;
  letter-spacing:-1.2px;
  line-height:1;
  gap:7px;
}
.beta-tag {
  margin:2px 0 0;
  border-color:#DDDDDD;
  border-radius:5px;
  color:#737373;
  font-size:8px;
  font-weight:500;
}
.main-nav {
  height:100%;
  gap:24px;
}
.main-nav .nav-button {
  color:#737373;
  font-size:13px;
  font-weight:500;
}
.main-nav .nav-button:hover,
.main-nav .nav-button.active {
  color:#1C1C1C;
}
.main-nav .nav-button.active {
  font-weight:700;
}
.main-nav .nav-button.active:after {
  height:2px;
  background:#1C1C1C;
  border-radius:2px;
}
.main-nav .nav-count {
  min-width:16px;
  height:16px;
  border-radius:6px;
  background:#F0F0F0;
  color:#595959;
  font-size:9px;
}
.search-box {
  flex:1;
  order:0;
  min-width:150px;
  max-width:290px;
  height:39px;
  margin:0 0 0 auto;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:18px;
  background:#F1F1F1;
  color:#737373;
}
.search-box:focus-within {
  border-color:#CCCCCC;
  background:#FFFFFF;
  box-shadow:0 0 0 3px rgba(28,28,28,.035);
}
.search-box input {
  color:#1C1C1C;
  font-size:12px;
}
.search-box input::placeholder {
  color:#898989;
}
.search-box .icon {
  width:16px;
  height:16px;
}
.search-hint,
.profile-badge {
  display:none;
}
.main-container {
  max-width:1440px;
  padding:0 24px;
}
.categories-section {
  justify-content:flex-start;
  gap:8px;
  max-width:none;
  height:auto;
  margin:23px 0 26px;
  padding:2px 0 4px;
  border:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.categories-section::-webkit-scrollbar {
  display:none;
}
.category-button {
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  min-width:0;
  height:36px;
  min-height:36px;
  padding:8px 15px;
  border:1px solid #E6E6E6;
  border-radius:20px;
  background:#FFFFFF;
  color:#595959;
  font-size:12px;
  font-weight:500;
}
.category-button>span {
  display:none;
}
.category-button:hover {
  border-color:#CCCCCC;
  background:#F0F0F0;
  color:#1C1C1C;
}
.category-button.active {
  border-color:#1C1C1C;
  background:#1C1C1C;
  color:#FFFFFF;
  font-weight:600;
}
.section-heading {
  justify-content:flex-start;
  align-items:baseline;
  gap:9px;
  margin-bottom:15px;
}
.feed-heading {
  display:flex;
  align-items:baseline;
  gap:9px;
  min-width:0;
}
.section-heading h1,
.section-heading h2 {
  margin:0;
  color:#1C1C1C;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.6px;
  line-height:1.45;
}
.section-heading #resultCount,
.section-heading #brandResultCount {
  color:#737373;
  font-size:12px;
  font-weight:400;
  white-space:nowrap;
}
.catalog-toolbar,
.filters-section {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 18px;
  padding:0 0 18px;
  border-bottom:0;
}
.type-filters {
  display:flex;
  flex:0 1 auto;
  align-items:center;
  gap:3px;
  min-width:0;
  max-width:100%;
  padding:4px;
  border-radius:13px;
  background:#EDEDED;
  overflow-x:auto;
  scrollbar-width:none;
}
.type-filters::-webkit-scrollbar {
  display:none;
}
.type-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-shrink:0;
  min-height:31px;
  padding:7px 11px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#737373;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}
.type-button.active,
.type-button[aria-pressed=true] {
  border:0;
  background:#FFFFFF;
  color:#1C1C1C;
  font-weight:600;
  box-shadow:0 1px 4px rgba(28,28,28,.09);
}
.type-button:hover:not(.active):not([aria-pressed=true]) {
  background:rgba(255,255,255,.45);
  color:#1C1C1C;
}
.type-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:4px;
  background:rgba(28,28,28,.055);
  color:#737373;
  font-size:10px;
  font-weight:500;
  line-height:1;
}
.type-button.active .type-count,
.type-button[aria-pressed=true] .type-count {
  background:#F0F0F0;
  color:#1C1C1C;
}
.catalog-controls {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  min-width:0;
  margin-left:auto;
}
.select-filters {
  margin:0;
  gap:11px;
}
.select-filters select {
  max-width:125px;
  padding:7px 8px 7px 0;
  color:#595959;
  font-size:11px;
}
.select-filters>span {
  height:11px;
  background:#DDDDDD;
}
.view-controls {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  padding-left:13px;
  border-left:1px solid #E0E0E0;
}
.view-controls .preview-toggle {
  gap:5px;
  min-height:31px;
  margin:0;
  padding:5px 0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#737373;
  font-size:11px;
  font-weight:400;
}
.view-controls .preview-toggle[aria-pressed=true] {
  border:0;
  background:transparent;
  color:#1C1C1C;
}
.preview-status-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#BBBBBB;
}
.preview-toggle[aria-pressed=true] .preview-status-dot {
  background:#1C1C1C;
}
.grid-switch {
  display:none;
  align-items:center;
  gap:2px;
  padding:3px;
  border:0;
  border-radius:10px;
  background:#E9E9E9;
}
.grid-switch button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:28px;
  min-height:27px;
  margin:0;
  padding:4px 5px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#737373;
  font-size:10px;
  font-weight:500;
}
.grid-switch button[aria-pressed=true],
.grid-switch button.active {
  background:#FFFFFF;
  color:#1C1C1C;
  box-shadow:0 1px 3px rgba(28,28,28,.12);
}
.grid-switch button .icon,
.grid-switch button svg {
  width:13px;
  height:13px;
  flex-shrink:0;
}
#activeFilters {
  justify-content:flex-start;
  gap:6px;
  min-width:0;
  max-width:100%;
}
#activeFilters:not([hidden]) {
  margin:0 0 14px;
}
.active-filter,
.reset-link {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 9px;
  border:1px solid #E5E5E5;
  border-radius:10px;
  background:#FFFFFF;
  color:#595959;
  font-size:10px;
  overflow-wrap:anywhere;
}
.active-filter .icon {
  width:11px;
  height:11px;
}
.reset-link {
  border-color:transparent;
  background:transparent;
  text-decoration:underline;
  text-underline-offset:3px;
}
.ad-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  max-width:none;
  gap:24px 16px;
  align-items:start;
  margin:0 auto;
}
.ad-card {
  min-width:0;
  border:1px solid #E8E8E8;
  border-radius:20px;
  overflow:hidden;
  background:#FFFFFF;
  box-shadow:0 2px 8px rgba(28,28,28,.025);
  transition:border-color .2s,box-shadow .2s;
}
.ad-card:hover {
  border-color:#D9D9D9;
  box-shadow:0 5px 16px rgba(28,28,28,.045);
  transform:none;
}
.card-visual {
  aspect-ratio:16/9;
  min-height:200px;
  border-radius:18px;
  background:#F1F1F1;
}
.card-visual img {
  object-fit:cover;
}
.card-visual:hover img {
  transform:none;
}
.card-body {
  padding:12px 16px 8px;
}
.card-brand-row {
  min-height:28px;
  gap:5px;
  margin-bottom:3px;
}
.card-brand-row .brand-avatar {
  display:none;
}
.card-brand-row .brand-name {
  min-width:0;
  overflow:hidden;
  color:#1C1C1C;
  font-size:12px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.card-brand-row .follow-small {
  flex-shrink:0;
  width:28px;
  height:28px;
  margin-left:auto;
  padding:0;
  border:0;
  border-radius:50%;
  background:#F6F6F6;
  color:#737373;
}
.card-brand-row .follow-small[aria-pressed=true] {
  background:#EFEFEF;
  color:#1C1C1C;
}
.card-brand-row .follow-small .icon {
  width:12px;
  height:12px;
}
.ad-kind {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:3px 5px;
  border-radius:6px;
  background:#F1F1F1;
  color:#595959;
  font-size:9px;
  font-weight:500;
  line-height:1.3;
  white-space:nowrap;
}
.card-title {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:0;
  color:#1C1C1C;
  font-size:14px;
  font-weight:400;
  line-height:1.55;
  letter-spacing:-.2px;
}
.event-status {
  margin:7px 0 0;
  color:#737373;
  font-size:11px;
  font-weight:400;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.event-status.is-active,
.event-status[data-status=active] {
  color:#1C1C1C;
  font-weight:500;
}
.event-status.is-ended,
.event-status[data-status=ended] {
  color:#737373;
}
.card-footer {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:5px 0 0;
  border-top:0;
}
.card-footer .like-button {
  min-width:44px;
  min-height:44px;
  gap:4px;
  color:#737373;
  font-size:11px;
  font-weight:400;
}
.card-footer .like-button[aria-pressed=true] {
  color:#1C1C1C;
}
.card-footer .like-button .icon,
.card-save .icon {
  width:16px;
  height:16px;
}
.card-save {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#737373;
}
.card-save.is-saved,
.card-save[aria-pressed=true] {
  color:#1C1C1C;
}
.card-save.is-saved .icon,
.card-save[aria-pressed=true] .icon {
  fill:currentColor;
}
.motion-badge,
.preview-badge {
  right:9px;
  bottom:9px;
  width:24px;
  height:24px;
  justify-content:center;
  gap:0;
  padding:0;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  background:rgba(28,28,28,.62);
  color:#FFFFFF;
  font-size:10px;
  line-height:1;
  text-align:center;
  backdrop-filter:blur(6px);
}
.load-more-wrap {
  margin:32px 0 42px;
}
.load-more {
  min-width:180px;
  padding:12px 22px;
  border-color:#E1E1E1;
  border-radius:13px;
  background:#FFFFFF;
  font-size:12px;
  font-weight:500;
}
.brands-section {
  padding-top:30px;
}
.brand-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:22px 0 36px;
  border:0;
}
.brand-card {
  align-items:flex-start;
  gap:13px;
  padding:22px;
  border:1px solid #E5E5E5;
  border-radius:16px;
  background:#FFFFFF;
  text-align:left;
}
.brand-card .brand-name {
  font-size:14px;
  font-weight:600;
}
.brand-card .brand-info h3 {
  margin:0;
}
.brand-card .brand-ad-count {
  margin-top:6px;
  color:#737373;
  font-size:11px;
}
.brand-card .follow-button {
  min-height:34px;
  padding:7px 12px;
  border-color:#E1E1E1;
  border-radius:10px;
  background:#F7F7F7;
  font-size:11px;
  font-weight:500;
}
.brand-card .follow-button[aria-pressed=true] {
  background:#1C1C1C;
  color:#FFFFFF;
}
.site-footer {
  align-items:flex-start;
  max-width:1440px;
  margin:36px auto 0;
  padding:25px 24px 36px;
  gap:24px;
  border-color:#E5E5E5;
  font-size:10px;
}
.service-info {
  flex:1;
  color:#737373;
}
.service-info summary {
  width:max-content;
  color:#595959;
  font-size:11px;
  cursor:pointer;
}
.site-footer .service-info p {
  max-width:720px;
  margin:12px 0 0;
  font-size:11px;
  line-height:1.8;
}
.site-footer>span {
  color:#737373;
  font-size:10px;
  white-space:nowrap;
}
.ad-dialog {
  width:min(800px,calc(100vw - 32px));
  border-radius:24px;
  background:#FFFFFF;
  box-shadow:0 24px 80px rgba(28,28,28,.18);
}
.dialog-image {
  border-radius:24px 24px 0 0;
}
.dialog-close {
  border-radius:50%;
  background:rgba(255,255,255,.94);
}
.dialog-main {
  padding:26px;
}
.dialog-title {
  font-size:24px;
  font-weight:600;
  letter-spacing:-.5px;
}
.dialog-description {
  font-size:13px;
}
.dialog-actions>button,
.primary-button,
.source-link,
.dialog-benefit,
.demo-note {
  border-radius:12px;
}
.source-details {
  margin:18px 0;
  color:#737373;
}
.source-details summary {
  width:max-content;
  color:#737373;
  min-height:44px;
  display:flex;
  align-items:center;
  list-style:none;
  font-size:12px;
  cursor:pointer;
}
.source-details summary::-webkit-details-marker { display:none; }
.source-details summary::marker { content:""; }
.source-details .source-meta {
  margin:10px 0 0;
  line-height:1.8;
}
.source-link {
  display:inline-flex;
  justify-content:center;
  width:fit-content;
  min-height:44px;
  padding:10px 18px;
  gap:16px;
  border:0;
  border-radius:999px;
  background:#F5F5F5;
  font-size:14px;
  font-weight:500;
}
.source-link:hover { background:#ECECEC; text-decoration:none; }
.dialog-meta-row { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 12px; margin:14px 0 8px; }
.dialog-topic { min-width:0; padding:8px 0; }
.dialog-topic .event-status { margin:0; line-height:18px; }
.source-details-toggle { display:inline-flex; align-items:center; gap:7px; flex-shrink:0; margin-left:auto; min-height:44px; padding:8px 0; color:#8A8A8A; font-size:11px; font-weight:400; line-height:18px; text-underline-offset:4px; }
.source-details-toggle::after { content:""; width:5px; height:5px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); transition:transform 240ms ease; }
.source-details-toggle[aria-expanded=true]::after { transform:rotate(225deg); }
.source-details-toggle:hover,.source-details-toggle[aria-expanded=true] { color:#1C1C1C; text-decoration:underline; }
.source-detail-body { padding:14px 16px; margin-bottom:16px; border-radius:12px; background:#F7F7F7; overflow:hidden; }
@media(prefers-reduced-motion:reduce) { .source-details-toggle::after { transition:none; } }
.source-detail-body .source-meta { margin:0 0 6px; font-size:11px; }
.source-origin { display:grid; grid-template-columns:2em minmax(0,1fr); gap:8px; }
.source-origin a { color:inherit; overflow-wrap:anywhere; }
.source-origin .icon { width:12px; height:12px; vertical-align:middle; }
.source-detail-body .source-date-help { margin-top:12px; }
.dialog-actions .source-link { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; min-height:48px; padding:0; border-radius:50%; background:#F5F5F5; }
.dialog-actions .source-link .icon { width:20px; height:20px; }
.dialog-actions>.dialog-like { flex:0 0 48px; min-width:48px; width:48px; height:48px; padding:0; border-radius:50%; }
.dialog-actions>.dialog-like .like-count { display:none; }
.dialog-actions>.dialog-save { min-width:0; white-space:nowrap; }
.dialog-brand .brand-avatar.has-logo { width:36px; height:36px; overflow:hidden; background:#FFF; border:1px solid #F0F0F0; }
.brand-avatar.has-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.offer-terms {
  margin:16px 0;
  padding:13px 16px;
  border:0;
  border-radius:12px;
  background:#F7F7F7;
  color:#595959;
  font-size:12px;
  line-height:1.8;
}
.offer-terms ul {
  margin:0;
  padding-left:17px;
}
ul.offer-terms {
  padding-left:32px;
}
.offer-terms li+li {
  margin-top:4px;
}
.classification-source {
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin:10px 0 0;
  color:#595959;
  font-size:11px;
  line-height:1.7;
  text-decoration:underline;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.classification-source .icon {
  width:13px;
  height:13px;
}
.classification-source a {
  color:#595959;
  text-decoration:underline;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.classification-source a:hover {
  color:#1C1C1C;
}
.empty-state,
.brand-empty {
  border-radius:18px;
}
.toast {
  border-radius:13px;
}
@media(min-width:1100px) {
  .ad-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .brand-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(min-width:701px) and (max-width:980px) {
  .header-inner {
    padding:0 20px;
    gap:20px;
  }
  .main-nav {
    gap:14px;
  }
  .main-nav .nav-button {
    font-size:11px;
  }
  .wordmark {
    font-size:26px;
  }
  .search-box {
    min-width:130px;
  }
  .main-container {
    padding:0 20px;
  }
  .catalog-controls {
    gap:12px;
  }
}
/* Mobile is a media feed: compact navigation, generous imagery, readable type. */
.mobile-filter-button,
#mobileResultCount { display:none; }
.mobile-filter-dialog {
  position:fixed;
  inset:auto 0 0;
  width:100%;
  max-width:700px;
  max-height:90dvh;
  margin:0 auto;
  padding:0 20px calc(20px + env(safe-area-inset-bottom));
  border:0;
  border-radius:22px 22px 0 0;
  background:#FFFFFF;
  color:#1C1C1C;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.mobile-filter-dialog::backdrop { background:rgba(28,28,28,.38); }
.mobile-filter-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:76px;
}
.mobile-filter-header h2 { margin:0; font-size:22px; font-weight:700; letter-spacing:-.5px; }
.mobile-filter-close { display:grid; place-items:center; width:44px; height:44px; margin-right:-10px; }
.mobile-filter-body { display:grid; gap:22px; }
.mobile-filter-field { display:grid; gap:9px; font-size:14px; font-weight:600; }
.mobile-filter-field select {
  width:100%;
  height:50px;
  padding:0 14px;
  border:1px solid #E5E5E5;
  border-radius:10px;
  background:#F7F7F7;
  color:#1C1C1C;
  font-size:16px;
  font-weight:400;
}
#mobilePreviewToggle {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:48px;
  padding:0;
  border:0;
  font-size:15px;
  font-weight:600;
}
.autoplay-switch { display:block; position:relative; flex:0 0 38px; width:38px; height:22px; border-radius:999px; background:#D9D9D9; transition:background .18s ease; }
.autoplay-thumb { display:block; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#FFF; transition:transform .18s ease; }
#mobilePreviewToggle[aria-pressed="true"] .autoplay-switch { background:var(--noondok-red); }
#mobilePreviewToggle[aria-pressed="true"] .autoplay-thumb { transform:translateX(16px); }
@media(prefers-reduced-motion:reduce) { .autoplay-switch,.autoplay-thumb { transition:none; } }
.mobile-filter-footer { padding-top:24px; }
.mobile-filter-apply { width:100%; min-height:52px; border-radius:10px; background:#1C1C1C; color:#FFFFFF; font-size:16px; font-weight:600; }
@media(max-width:700px) {
  :root { --bg:#FFFFFF; }
  html { scroll-padding-top:70px; }
  body { background:#FFFFFF; }
  .site-header { position:sticky; height:56px; border-bottom:0; background:rgba(255,255,255,.97); }
  .header-inner { height:56px; padding:0 16px; gap:18px; flex-wrap:nowrap; }
  .wordmark { font-size:25px; letter-spacing:-1.2px; }
  .main-nav { display:none; }
  .search-box { order:0; flex:1; min-width:0; max-width:none; height:36px; margin:0; padding:0 10px; gap:7px; border-radius:8px; background:#F5F5F5; }
  .search-box input { font-size:16px; }
  .search-box input::placeholder { font-size:13px; color:#737373; }
  .search-box .icon { width:17px; height:17px; }
  .main-container { padding:0 16px; }
  .categories-section { height:48px; gap:24px; margin:0 -16px; padding:0 16px; border-bottom:1px solid #EFEFEF; align-items:stretch; }
  .category-button { position:relative; height:48px; min-height:48px; padding:0; border:0; border-radius:0; background:transparent; color:#666666; font-size:14px; font-weight:500; }
  .category-button.active { background:transparent; color:#1C1C1C; font-weight:700; }
  .category-button.active::after { content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:#1C1C1C; }
  .category-button:hover { background:transparent; }
  .feed-section>.section-heading { margin:18px 0 6px; }
  body[data-view="discover"] .feed-section>.section-heading { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .section-heading h1, .section-heading h2 { font-size:23px; line-height:1.4; }
  .section-heading #resultCount { display:none; }
  .catalog-toolbar { flex-direction:column; align-items:stretch; gap:0; padding:0 0 8px; }
  .type-filters { flex:none; width:calc(100% + 32px); max-width:none; min-height:52px; margin:0 -16px; padding:9px 16px; gap:6px; border-radius:0; background:transparent; }
  .type-button { min-height:34px; padding:7px 11px; border:0; border-radius:6px; background:#F5F5F5; color:#666666; font-size:13px; font-weight:500; line-height:20px; }
  .type-button.active, .type-button[aria-pressed="true"] { background:#1C1C1C; color:#FFFFFF; font-weight:600; box-shadow:none; }
  .type-button:hover:not(.active):not([aria-pressed="true"]) { background:#EDEDED; }
  .type-count { display:none; }
  .catalog-controls { width:100%; min-height:44px; margin:0; padding:0; gap:0; justify-content:flex-end; }
  #mobileResultCount { display:block; margin-right:auto; color:#737373; font-size:12px; }
  .catalog-controls>.select-filters, .catalog-controls .preview-toggle { display:none; }
  .mobile-filter-button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:44px; padding:0 10px; color:#1C1C1C; font-size:13px; }
  .mobile-filter-button .icon { width:17px; height:17px; }
  .mobile-filter-count { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#1C1C1C; color:white; font-size:10px; }
  .view-controls { border:0; padding:0; margin-left:6px; gap:0; }
  .grid-switch { display:flex; padding:0; gap:0; border-radius:0; background:none; }
  .grid-switch button { width:44px; min-width:44px; height:44px; min-height:44px; padding:10px; border:0; border-radius:6px; color:#A3A3A3; }
  .grid-switch button[aria-pressed="true"], .grid-switch button.active { color:#1C1C1C; background:#F5F5F5; box-shadow:none; }
  .grid-switch button .icon { width:18px; height:18px; }
  .grid-switch button span { display:none; }
  #activeFilters:not([hidden]) { margin:0 0 12px; }
  .active-filter { min-height:34px; font-size:12px; }
  .ad-grid { width:100%; max-width:none; margin:0; }
  .ad-grid[data-columns="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px; }
  .ad-grid[data-columns="1"] { grid-template-columns:minmax(0,1fr); gap:28px; }
  .ad-grid .ad-card, .ad-grid[data-columns="1"] .ad-card, .ad-grid[data-columns="2"] .ad-card { border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; display:flex; flex-direction:column; height:100%; }
  .ad-grid .ad-card:hover { border:0; box-shadow:none; }
  .ad-grid .card-visual { flex-shrink:0; }
  .ad-grid .card-visual::after { display:none; }
  .ad-grid[data-columns="2"] .card-visual { aspect-ratio:4/3; min-height:0; border-radius:8px; }
  .ad-grid[data-columns="1"] .card-visual { aspect-ratio:16/10; min-height:200px; border-radius:8px; }
  .ad-grid[data-columns="1"] .preview-host { min-height:200px; }
  .ad-grid[data-columns="2"] .preview-host, .ad-grid[data-columns="2"] .preview-frame, .ad-grid[data-columns="2"] .preview-video { min-height:0; }
  .ad-grid .card-body, .ad-grid[data-columns="1"] .card-body { padding:10px 0 0; display:flex; flex:1; flex-direction:column; }
  .ad-grid .card-brand-row { min-height:20px; margin:0 0 3px; gap:0; }
  .ad-grid .card-brand-row .brand-name { font-size:13px; font-weight:700; line-height:20px; }
  .ad-grid .card-brand-row .follow-small, .ad-grid .ad-kind { display:none; }
  .ad-grid .card-title { font-size:14px; line-height:21px; font-weight:400; letter-spacing:-.2px; }
  .ad-grid[data-columns="1"] .card-title { font-size:17px; line-height:26px; }
  .ad-grid[data-columns="1"] .brand-name { font-size:14px; }
  .ad-grid .event-status { margin-top:5px; font-size:11px; line-height:17px; }
  .ad-grid .card-footer { justify-content:space-between; gap:4px; padding:1px 0 0; margin:auto -8px -8px; }
  .ad-grid .card-footer .like-button, .ad-grid .card-save { min-width:44px; min-height:44px; color:#595959; font-size:12px; }
  .ad-grid .card-footer .like-button .icon, .ad-grid .card-save .icon { width:19px; height:19px; }
  .ad-grid .card-footer .like-button[aria-pressed="true"], .ad-grid .card-save[aria-pressed="true"] { color:#1C1C1C; }
  .ad-grid .motion-badge, .ad-grid .preview-badge { right:7px; bottom:7px; width:24px; height:24px; border-radius:6px; font-size:10px; }
  .brand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .brand-card { padding:18px 14px; border-radius:8px; gap:12px; }
  .brand-card .brand-name { font-size:14px; }
  .brand-card .brand-ad-count { font-size:12px; }
  .brand-card .follow-button { min-height:44px; font-size:12px; }
  .load-more-wrap { margin:24px 0 32px; }
  .load-more { min-height:48px; border-radius:8px; font-size:14px; }
  .site-footer { margin-top:24px; padding:22px 16px 96px; gap:18px; }
  .site-footer>span { font-size:10px; }
  .service-info summary, .site-footer .service-info p { font-size:11px; }
  .mobile-nav { height:calc(64px + env(safe-area-inset-bottom)); border-top:1px solid #EFEFEF; background:rgba(255,255,255,.98); backdrop-filter:blur(16px); }
  .mobile-nav .nav-button { color:#8A8A8A; font-size:11px; font-weight:400; gap:5px; }
  .mobile-nav .nav-button.active { color:#1C1C1C; font-weight:700; }
  .mobile-nav .nav-button.active .icon { color:#1C1C1C; fill:none; }
  .mobile-nav .nav-button .icon { width:22px; height:22px; }
  .ad-dialog { width:100%; max-width:none; max-height:94dvh; margin:auto 0 0; border-radius:18px 18px 0 0; }
  .dialog-image { border-radius:18px 18px 0 0; }
  .dialog-main { padding:22px 20px calc(24px + env(safe-area-inset-bottom)); }
  .dialog-title { font-size:22px; line-height:1.4; }
  .dialog-description { font-size:14px; line-height:1.75; }
  .dialog-brand strong { font-size:14px; }
  .dialog-brand .follow-small { min-width:44px; min-height:44px; }
  .offer-terms { font-size:13px; }
  .source-link { min-height:48px; font-size:14px; }
  .dialog-actions>button { min-height:48px; font-size:14px; }
  .dialog-close { width:44px; height:44px; }
}
@media(max-width:350px) {
  .header-inner { gap:12px; }
  .wordmark { font-size:23px; }
  .search-box input::placeholder { font-size:12px; }
  .type-filters { gap:5px; }
  .type-button { padding-inline:9px; }
  .ad-grid[data-columns="2"] { gap:22px 10px; }
}

/* Keep promotional artwork and its dates fully visible. */
.card-visual.is-static img,
.dialog-image.is-static img { object-fit:contain; }
.dialog-image.is-static { background:#F1F1F1; }

/* Discovery header, campaign carousel and followed-brand profiles. */
.search-box { border-radius:999px; }
.card-media { position:relative; }
.card-overlay-actions { position:absolute; top:3px; left:3px; right:3px; display:flex; justify-content:space-between; pointer-events:none; z-index:3; }
.ad-grid .card-overlay-actions button { pointer-events:auto; width:44px; height:44px; min-width:44px; padding:10px; display:grid; place-items:center; color:#fff; background:transparent; border:0; border-radius:50%; filter:none; }
.card-overlay-actions button:hover { background:#1c1c1c30; color:#fff; }
.ad-grid .card-overlay-actions button .icon { width:22.5px; height:22.5px; stroke-width:1.8; }
.card-overlay-actions .like-count { display:none; }
.card-overlay-actions .is-liked .icon, .card-overlay-actions .is-saved .icon { fill:#fff; stroke:#fff; }
.featured-section { position:relative; margin:4px 0 26px; }
.featured-heading, .stories-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.featured-heading h2, .stories-heading h2 { margin:0; font-size:18px; font-weight:700; letter-spacing:-.5px; }
.featured-heading h2 span { font-size:14px; margin-left:5px; }
.featured-note { font-size:11px; color:#737373; }
.featured-viewport { overflow:hidden; touch-action:pan-y; border-radius:0; }
.featured-track { display:flex; will-change:transform; }
.featured-slide { flex:0 0 var(--slide-width); position:relative; height:370px; overflow:hidden; border-radius:20px; background:#efefef; text-align:left; color:#fff; padding:0; border:0; }
.featured-slide img { width:100%; height:100%; display:block; object-fit:cover; }
.featured-slide.is-static img { object-fit:contain; background:#edb4c1; }
.featured-slide:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#0002,transparent 32%,#0000 48%,#000a); pointer-events:none; }
.featured-rank { position:absolute; top:20px; left:24px; z-index:1; font-size:13px; font-weight:700; letter-spacing:.3px; }
.featured-copy { position:absolute; bottom:35px; left:28px; right:28px; z-index:1; display:grid; gap:8px; text-shadow:0 1px 8px #0003; }
.featured-copy>span { font-size:14px; }
.featured-copy strong { font-size:30px; letter-spacing:-1px; line-height:1.25; max-width:85%; word-break:keep-all; }
.featured-controls { position:absolute; right:calc(14% + 15px); bottom:13px; z-index:2; display:flex; align-items:center; background:#1c1c1c80; backdrop-filter:blur(10px); border-radius:999px; color:#fff; padding:0 5px; }
.featured-controls button { width:36px; height:36px; background:transparent; color:inherit; border:0; font-size:21px; }
.featured-controls #featuredPause { font-size:12px; }
#featuredCount { font-size:12px; min-width:43px; text-align:center; font-variant-numeric:tabular-nums; }
.brand-stories { margin:0 0 28px; }
.stories-heading button { background:none; border:0; padding:8px 0 8px 12px; color:#737373; font-size:12px; }
.stories-list { display:flex; gap:24px; overflow-x:auto; scrollbar-width:none; padding:3px 0 5px; }
.stories-list::-webkit-scrollbar { display:none; }
.brand-story { flex:0 0 76px; width:76px; display:flex; flex-direction:column; align-items:center; gap:8px; color:#1c1c1c; background:none; padding:0; border:0; }
.story-ring { position:relative; display:grid; place-items:center; width:76px; height:76px; border-radius:50%; overflow:hidden; background:#e9e9e9; isolation:isolate; }
.story-avatar { position:relative; z-index:1; width:70px; height:70px; display:grid; place-items:center; background:#fff; border:3px solid #fff; border-radius:50%; overflow:hidden; font-size:17px; font-weight:800; }
.story-avatar img { width:100%; height:100%; object-fit:contain; border-radius:50%; }
.brand-story.is-live .story-ring:before { content:''; position:absolute; inset:-15%; background:var(--noondok-shimmer); filter:blur(3px); animation:story-orbit 4s linear infinite; }
.story-name { font-size:12px; line-height:1.35; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.story-live { font-size:10px; line-height:1; margin-top:-3px; color:#737373; }
@keyframes story-orbit { to { transform:rotate(360deg); } }
@media(max-width:700px) {
  .search-box { border-radius:999px; }
  .featured-section { margin:18px -16px 23px; }
  .featured-heading { padding:0 16px; margin-bottom:12px; }
  .featured-heading h2, .stories-heading h2 { font-size:16px; }
  .featured-heading h2 span { font-size:12px; }
  .featured-slide { height:auto; aspect-ratio:1.12; border-radius:18px; }
  .featured-rank { top:17px; left:18px; font-size:12px; }
  .featured-copy { left:18px; right:18px; bottom:60px; gap:5px; }
  .featured-copy>span { font-size:12px; }
  .featured-copy strong { font-size:24px; max-width:100%; letter-spacing:-.7px; }
  .featured-controls { right:34px; bottom:12px; }
  .featured-controls button { width:36px; height:36px; }
  .brand-stories { margin:0 0 18px; }
  .stories-heading { margin-bottom:9px; }
  .stories-list { margin:0 -16px; padding:3px 16px 5px; gap:15px; }
  .brand-story { width:65px; flex-basis:65px; gap:7px; }
  .story-ring { width:65px; height:65px; }
  .story-avatar { width:59px; height:59px; }
  .story-name { font-size:11px; }
  .card-body { padding-bottom:3px; }
}
@media(prefers-reduced-motion:reduce) { .brand-story.is-live .story-ring:before { animation:none; } }

/* Each visible YouTube preview has its own player, including two-column mobile cards. */
.ad-grid .card-visual .preview-host { inset:auto; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; min-width:200px; min-height:200px; }
.ad-grid .card-visual .preview-host .preview-frame { min-width:200px; min-height:200px; }

.ad-grid .card-overlay-actions .card-save, .ad-grid .card-overlay-actions .like-button { color:#fff; }
/* Brand directory: category rail, Korean index and bilingual search. */
.brands-section:not([hidden]) { display:grid; grid-template-columns:160px minmax(0,1fr); padding-top:28px; align-items:start; min-height:70vh; gap:32px; }
.brand-category-nav { display:flex; flex-direction:column; background:#f5f5f5; border-radius:0; padding:8px 0; position:sticky; top:100px; }
.brand-category-nav button { padding:18px 20px; border:0; background:none; text-align:left; font-size:15px; color:#888; line-height:1.4; }
.brand-category-nav button.active { color:#1c1c1c; font-weight:700; background:#fff; }
.brand-directory { min-width:0; padding-bottom:35px; }
.brand-directory-search { display:flex; gap:10px; align-items:center; height:49px; padding:0 17px; border:1px solid #dedede; border-radius:999px; }
.brand-directory-search>.icon { width:20px; height:20px; color:#888; }
.brand-directory-search input { border:0; outline:0; background:none; flex:1; min-width:0; font-size:16px; color:#1c1c1c; }
.brand-directory-search:focus-within { border-color:#1c1c1c; }
.brand-directory-search button { width:30px; height:40px; padding:5px; border:0; background:none; color:#737373; }
.brand-directory-tools { display:flex; align-items:center; justify-content:space-between; padding:14px 0 4px; }
.brand-directory-tools button { display:flex; align-items:center; gap:6px; min-height:40px; background:none; border:0; font-size:13px; color:#777; }
.brand-directory-tools button[aria-pressed=true] { color:#1c1c1c; font-weight:700; }
.brand-directory-tools .icon { width:18px; height:18px; }
.brand-directory-tools>span { color:#777; font-size:12px; }
.brand-initial-nav { display:flex; overflow-x:auto; scrollbar-width:none; gap:4px; border-bottom:1px solid #eee; }
.brand-initial-nav::-webkit-scrollbar { display:none; }
.brand-initial-nav button { flex-shrink:0; min-width:36px; height:44px; padding:0 8px; background:none; border:0; border-bottom:2px solid transparent; font-size:15px; color:#999; }
.brand-initial-nav button.active { color:#1c1c1c; border-bottom-color:#1c1c1c; font-weight:700; }
.brand-directory-count { padding:23px 0 12px; font-size:12px; color:#888; }
.brand-directory .brand-grid { display:block; margin:0; padding:0; }
.brand-directory-row { display:flex; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid #f4f4f4; }
.brand-directory-link { display:flex; align-items:center; gap:14px; flex:1; min-width:0; padding:0; border:0; background:none; text-align:left; color:#1c1c1c; }
.directory-logo { width:54px; height:54px; flex:0 0 54px; border:1px solid #eee; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-weight:700; }
.directory-logo img { width:100%; height:100%; object-fit:contain; }
.directory-names { display:grid; gap:4px; min-width:0; }
.directory-names strong { font-size:17px; font-weight:600; line-height:1.3; word-break:keep-all; overflow-wrap:anywhere; }
.directory-names>span { color:#999; font-size:12px; line-height:1.3; overflow-wrap:anywhere; }
.directory-follow { width:44px; height:44px; flex:0 0 44px; padding:10px; border:0; background:none; color:#888; border-radius:50%; }
.directory-follow[aria-pressed=true] { color:#1c1c1c; background:#f3f3f3; }
.directory-follow .icon { width:23px; height:23px; }
.directory-follow>span { display:none; }
.brand-directory .brand-empty { padding:35px 0; text-align:center; }
.brand-directory .brand-empty h3 { font-size:14px; }
.brand-nav-logos { width:22px; height:22px; display:block; overflow:hidden; border-radius:50%; }
.brand-nav-logo-track { display:flex; flex-direction:row; width:max-content; animation:brand-logo-roll 27s infinite; }
.brand-nav-logo-track img { width:22px; height:22px; flex:0 0 22px; object-fit:contain; border-radius:50%; background:#FFF; }
@keyframes brand-logo-roll {
  0%,9% { transform:translateX(-198px); }
  11.11%,20% { transform:translateX(-176px); }
  22.22%,31% { transform:translateX(-154px); }
  33.33%,42% { transform:translateX(-132px); }
  44.44%,53% { transform:translateX(-110px); }
  55.55%,64% { transform:translateX(-88px); }
  66.66%,75% { transform:translateX(-66px); }
  77.77%,86% { transform:translateX(-44px); }
  88.88%,97% { transform:translateX(-22px); }
  100% { transform:translateX(0px); }
}
@media(max-width:700px) {
  body[data-view=brands] .header-inner .search-box { display:none; }
  .brands-section:not([hidden]) { grid-template-columns:82px minmax(0,1fr); gap:0; margin:0 -16px; padding:0; }
  .brand-category-nav { top:60px; padding:0; min-height:calc(100dvh - 120px); }
  .brand-category-nav button { font-size:13px; padding:17px 10px; word-break:keep-all; overflow-wrap:anywhere; }
  .brand-directory { padding:16px 14px 28px; }
  .brand-directory-search { height:44px; padding:0 11px; gap:7px; }
  .brand-directory-search input { font-size:16px; }
  .brand-directory-search input::placeholder { font-size:13px; }
  .brand-directory-search>.icon { width:17px; height:17px; }
  .brand-initial-nav { gap:0; }
  .brand-initial-nav button { min-width:34px; }
  .brand-directory-count { padding:20px 0 5px; font-size:11px; }
  .brand-directory-row { gap:5px; padding:15px 0; }
  .brand-directory-link { gap:10px; }
  .directory-logo { width:42px; height:42px; flex-basis:42px; }
  .directory-names strong { font-size:14px; }
  .directory-names>span { font-size:10px; }
  .directory-follow { width:40px; flex-basis:40px; padding:10px 8px; }
  .directory-follow .icon { width:22px; height:22px; }
  .mobile-nav .nav-button { font-size:10px; white-space:nowrap; }
}
@media(max-width:350px) { .brands-section:not([hidden]) { grid-template-columns:70px minmax(0,1fr); } .brand-directory { padding-left:10px; padding-right:10px; } .directory-logo { width:34px; height:34px; flex-basis:34px; } .brand-directory-link { gap:7px; } }
@media(prefers-reduced-motion:reduce) { .brand-nav-logo-track { animation:none; } }

/* Nundok identity and translucent navigation. */
:root { --bg:#FFFFFF; }
html, body { background:#FFFFFF; }
.wordmark { display:flex; align-items:center; padding:0; }
.main-logo { display:block; width:136.8px; height:auto; object-fit:contain; }
.noondok-nav-symbol { display:block; width:22px; height:22px; object-fit:contain; filter:brightness(0); }
.site-header, .mobile-nav {
  background:rgba(255,255,255,.70);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  border-color:rgba(28,28,28,.07);
}
.header-inner { background:transparent; }
.site-header .search-box { background:rgba(238,238,238,.65); }
.site-header .search-box:focus-within { background:rgba(255,255,255,.85); }
.main-nav .nav-button.active:after, .category-button.active::after { background:var(--noondok-accent); }
.mobile-nav .nav-button.active .icon { color:#1C1C1C; }
.directory-follow[aria-pressed=true] { color:var(--noondok-accent); }
.directory-follow[aria-pressed=true] { background:var(--noondok-red-soft); }
.ad-grid .card-overlay-actions .is-liked .icon, .ad-grid .card-overlay-actions .is-saved .icon { fill:var(--noondok-accent); stroke:var(--noondok-accent); }
.preview-toggle[aria-pressed=true] .preview-status-dot { background:var(--noondok-red); box-shadow:0 0 0 3px rgba(var(--noondok-red-rgb),.10); }
.preview-toggle[aria-pressed=false] .preview-status-dot { background:#aaa; box-shadow:none; }
@media(min-width:701px) {
  .ad-grid .ad-card, .ad-grid .ad-card:hover { border:0; border-radius:18px 18px 0 0; background:transparent; box-shadow:none; }
  .ad-grid .card-visual { border-radius:18px 18px 0 0; }
  .ad-grid .card-body { padding:12px 0 8px; }
}
@media(max-width:700px) {
  .main-logo { width:106.4px; }
  .header-inner { gap:16px; }
}
@media(max-width:350px) { .main-logo { width:98.8px; } .header-inner { gap:12px; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .site-header, .mobile-nav { background:rgba(255,255,255,.96); }
}
@media(prefers-reduced-transparency:reduce) {
  .site-header, .mobile-nav { background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* Nundok sheets and navigation: quiet controls, explicit apply, directional motion. */
html { overflow-x: clip; }
body { overflow-x: clip; }
.mobile-filter-dialog { padding:0 24px calc(20px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; }
.mobile-filter-dialog::before { content:""; display:block; width:32px; height:4px; border-radius:99px; background:#DEDEDE; margin:10px auto 0; }
.mobile-filter-header { min-height:68px; }
.mobile-filter-header h2 { font-size:21px; }
.mobile-filter-close .icon { width:22px; height:22px; }
.mobile-filter-body { gap:28px; padding-top:8px; }
.mobile-filter-group { min-width:0; padding:0; border:0; margin:0; }
.mobile-filter-group legend { padding:0; margin-bottom:12px; font-size:14px; font-weight:600; }
.filter-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.filter-option { position:relative; cursor:pointer; }
.filter-option input { position:absolute; opacity:0; width:1px; height:1px; }
.filter-option span { display:flex; align-items:center; justify-content:center; min-height:46px; padding:8px 3px; border:1px solid #E8E8E8; border-radius:12px; color:#737373; background:#FFF; font-size:14px; font-weight:500; transition:color .15s,background .15s,border-color .15s; }
.filter-option input:checked + span { background:#1C1C1C; color:white; border-color:#1C1C1C; }
.filter-option input:focus-visible + span { outline:2px solid #1C1C1C; outline-offset:3px; }
.mobile-filter-preview { border-top:1px solid #F0F0F0; padding-top:12px; }
.mobile-filter-footer { display:flex; align-items:center; gap:12px; padding-top:20px; }
.filter-reset { min-width:64px; min-height:52px; color:#737373; font-size:14px; }
.mobile-filter-apply { flex:1; width:auto; border-radius:14px; }
.feed-sentinel { height:1px; margin-top:24px; }
.feed-sentinel[hidden] { display:none; }
.noondok-pause-icon { fill:none!important; stroke:currentColor; }
@media(max-width:350px) {
  .mobile-filter-dialog { padding-left:16px; padding-right:16px; }
  .filter-option span { font-size:12px; }
}

.mobile-nav .nav-button .noondok-pause-icon,
.mobile-nav .nav-button.active .noondok-pause-icon { color:var(--noondok-red); stroke:var(--noondok-red); fill:none; }

.about-section { max-width:880px; margin:0 auto; padding:28px 32px 80px; }
.about-section[hidden] { display:none; }
.about-hero { padding:76px 0 40px; }
.about-logo { display:block; width:160px; height:auto; }
.about-hero h1 { margin:32px 0 0; font-size:clamp(32px,5.4vw,62px); line-height:1.22; letter-spacing:-2.4px; font-weight:750; }
.about-story > section { padding:70px 0; border-top:1px solid #EBEBEB; }
.about-story h2 { margin:0 0 32px; font-size:32px; line-height:1.4; letter-spacing:-1.2px; }
.about-story p { max-width:520px; margin:0 0 24px; font-size:17px; line-height:1.8; word-break:keep-all; color:#666; }
.about-story .about-accent { color:var(--noondok-red); }
.about-intro { padding-bottom:40px; }
.about-audiences { display:grid; gap:28px; margin:38px 0; }
.about-audiences h3 { margin:0 0 5px; font-size:17px; }
.about-audiences p { margin:0; font-size:15px; }
.about-ending { padding:32px 0 20px; }
.about-ending .primary-button { display:inline-flex; align-items:center; gap:24px; min-height:48px; padding:14px 20px; border-radius:12px; font-size:16px; }
.about-ending .primary-button .icon { width:20px; height:20px; }
.about-link { display:inline-flex; align-items:center; gap:6px; color:#1C1C1C; font-size:12px; font-weight:600; padding:8px 0; }
body[data-view="about"] .search-box { visibility:hidden; }
@media(max-width:700px) {
  .about-section { padding:12px 8px 40px; }
  .about-hero { padding:48px 0 32px; }
  .about-hero h1 { font-size:36px; letter-spacing:-1.6px; }
  .about-logo { width:132px; }
  .about-story > section { padding:44px 0; }
  .about-story h2 { font-size:26px; }
  .about-story p { font-size:15px; }
  .about-intro { padding-bottom:20px; }
  .about-ending { padding-top:24px; }
}
@media(max-width:350px) { .about-hero h1 { font-size:30px; } .about-story h2 { font-size:23px; } }

.category-hub { margin:0; padding:26px 22px; }
.category-about { display:flex; justify-content:space-between; width:100%; border:0; border-top:1px solid #ededed; padding:24px 0; background:none; font-size:14px; }
.culture-facts { display:flex; flex-wrap:wrap; gap:8px 16px; padding:0; list-style:none; color:#737373; font-size:13px; margin:20px 0; }
.culture-facts li { line-height:1.6; }
.card-visual.is-poster img, .dialog-image.is-poster img { object-fit:contain; background:#f5f5f5; }
.card-venue { margin:4px 0 0; color:#8a8a8a; font-size:11px; line-height:1.5; }
.secondary-source { display:inline-flex; align-items:center; gap:8px; padding:12px 0; color:#737373; font-size:13px; }
body[data-culture="true"] .type-filters { display:none; }
body[data-culture="true"] .catalog-controls { width:100%; justify-content:flex-end; }
@media(max-width:700px) {
 .mobile-nav .nav-button { flex:1; min-width:0; font-size:10px; }
 .mobile-nav .home-nav-button .icon { width:24px; height:24px; }
 .category-hub { margin:0; }
 .category-hub h1 { font-size:25px; margin-bottom:28px; }
 body[data-culture="true"] .feed-section>.section-heading { position:static; width:auto; height:auto; padding:0; margin:22px 0 12px; overflow:visible; clip:auto; white-space:normal; }
 body[data-culture="true"] .feed-heading h1 { font-size:23px; }
 body[data-culture="true"] #resultCount { display:none; }
 body[data-culture="true"] .catalog-controls { justify-content:initial; }
}

.category-drawer { position:fixed; inset:0 auto 0 0; margin:0; width:min(82vw,350px); height:100dvh; max-height:100dvh; max-width:none; border:0; border-radius:0; padding:0; background:#fff; color:#1c1c1c; overscroll-behavior:contain; }
.category-drawer::backdrop { background:rgba(0,0,0,.35); }
.category-drawer-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
.category-drawer-header h1 { margin:0; font-size:22px; letter-spacing:-.6px; }
.category-drawer-header button { display:grid; place-items:center; width:40px; height:40px; border:0; background:none; }
.category-drawer-header .icon { width:22px; height:22px; }
.category-accordion { border-top:1px solid #f0f0f0; padding:8px 0; }
.category-accordion-toggle { display:flex; align-items:center; width:100%; min-height:58px; gap:14px; background:none; border:0; text-align:left; font-size:17px; font-weight:700; }
.category-accordion-toggle .icon { width:24px; height:24px; stroke-width:1.6; }
.category-chevron { margin-left:auto; width:9px; height:9px; border-right:1.5px solid; border-bottom:1.5px solid; transform:rotate(45deg); transition:transform .2s; margin-right:6px; }
.category-accordion-toggle[aria-expanded="true"] .category-chevron { transform:rotate(225deg); }
.category-subcategories { display:flex; flex-direction:column; gap:2px; padding:2px 0 12px 30px; }
.category-subcategories[hidden] { display:none; }
.category-subcategories button { min-height:44px; text-align:left; padding:10px 12px; font-size:15px; border:0; border-radius:8px; background:none; color:#555; }
.category-subcategories button.active { background:#f5f5f5; color:#1c1c1c; font-weight:700; }
.category-about { margin-top:26px; }
@media(prefers-reduced-motion:reduce) { .category-chevron { transition:none; } }

/* The original artwork stays intact; its own color fills any remaining space. */
.card-visual, .featured-slide, .dialog-image { isolation:isolate; overflow:hidden; }
.card-visual::before, .featured-slide::before, .dialog-image::before { content:""; position:absolute; inset:-20px; z-index:0; background-image:var(--media-poster); background-size:cover; background-position:center; filter:blur(22px); transform:scale(1.12); pointer-events:none; }
.card-visual>img, .featured-slide>img, .dialog-image>img { position:relative; z-index:1; object-fit:contain; background:transparent; }
.card-visual.is-static>img, .card-visual.is-poster>img, .featured-slide.is-static>img, .dialog-image.is-poster>img { background:transparent; }
.card-visual.is-playing>img { opacity:0; }
.card-visual .preview-video { z-index:1; object-fit:contain; background:transparent; }
.ad-grid .card-visual .preview-host { z-index:1; width:100%; height:auto; aspect-ratio:var(--video-ratio, 16 / 9); max-height:100%; min-width:0; min-height:0; }
.ad-grid .card-visual .preview-host.is-portrait { height:100%; width:auto; max-width:100%; }
.ad-grid .card-visual .preview-host .preview-frame { min-width:0; min-height:0; }
.featured-slide::after { z-index:1; }
.featured-rank, .featured-copy { z-index:2; }
.dialog-image .detail-player { position:relative; z-index:1; background:transparent; }

/* Verified publication dates are separate from product and event dates. */
.date-meta { display:grid; grid-template-columns:2em minmax(0,1fr); column-gap:8px; }
.date-label { white-space:nowrap; }
.date-value { min-width:0; font-variant-numeric:tabular-nums; }
.published-meta { margin:2px 0 0; color:#858585; font-size:11px; line-height:1.5; }
.dialog-topic .published-meta:first-child { margin-top:0; line-height:18px; }
.date-filter { display:flex; align-items:center; gap:7px; min-height:36px; padding:8px 0; border:0; background:transparent; cursor:pointer; color:#666; font-size:12px; line-height:1.4; text-align:left; white-space:nowrap; }
.date-filter .date-filter-check { width:16px; height:16px; flex-shrink:0; stroke-width:2; visibility:hidden; }
.date-filter[aria-pressed="true"] { color:var(--noondok-red); }
.date-filter[aria-pressed="true"] .date-filter-check { visibility:visible; }
.date-filter:focus-visible { outline:2px solid var(--noondok-red); outline-offset:4px; border-radius:4px; }
.mobile-date-filter { min-height:58px; margin:6px 0 18px; gap:12px; font-size:14px; color:#1C1C1C; }
.mobile-date-filter small { display:block; margin-top:3px; font-size:11px; color:#858585; }
.catalog-controls { flex-wrap:wrap; }
@media(max-width:700px) { .desktop-date-filter { display:none; } }

/* Keep followed news and discovery as separate destinations. */
.card-overlay-actions { justify-content:flex-end; }
.follow-small[aria-pressed="true"], .card-brand-row .follow-small[aria-pressed="true"], .recommend-follow[aria-pressed="true"] { color:var(--noondok-red); background:rgba(var(--noondok-red-rgb),.08); border-color:transparent; }
.follow-small[aria-pressed="true"] .icon { stroke-width:2; }
.brand-recommendations { min-width:0; }
.ad-grid>.brand-recommendations { grid-column:1 / -1; margin:8px 0 12px; padding:24px 0; border-top:1px solid #eee; border-bottom:1px solid #eee; }
.recommendation-context { margin:-2px 0 18px; font-size:12px; color:#858585; }
.recommended-brand { flex:0 0 88px; display:flex; align-items:center; flex-direction:column; gap:9px; }
.recommend-follow { display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid #e8e8e8; border-radius:50%; background:#fff; color:#777; }
.recommend-follow .icon { width:15px; height:15px; }
.recommend-follow>span { display:none; }
.logo-wordmark img { padding:10%; border-radius:0; }
.detail-play { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:10px; min-height:48px; padding:0 20px; border:1px solid #ffffff55; border-radius:999px; background:#1c1c1ca8; color:white; font:inherit; font-size:14px; backdrop-filter:blur(12px); }
.dialog-image.has-player>img { display:none; }
.dialog-image .detail-player { min-height:200px; }
.detail-media-error { position:absolute; z-index:3; inset:auto 16px 24px; margin:0; padding:14px 18px; border-radius:12px; background:#fffffff2; color:#333; text-align:center; font-size:13px; line-height:1.6; }
.category-drawer { width:100vw; max-width:100vw; background:transparent; overflow:hidden; }
.category-drawer>.category-hub { width:min(82vw,350px); height:100%; overflow-y:auto; background:#fff; overscroll-behavior:contain; }
.category-drawer>.mobile-nav { z-index:2; }
.follow-dialog { width:min(420px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); margin:auto; border:0; border-radius:24px; padding:34px 26px 24px; background:#fff; color:#1c1c1c; text-align:center; overflow-y:auto; overscroll-behavior:contain; }
.follow-dialog::backdrop { background:#0006; backdrop-filter:blur(3px); }
.follow-close { position:absolute; top:10px; right:10px; width:40px; height:40px; display:grid; place-items:center; border:0; background:none; color:#777; }
.follow-close .icon { width:20px; height:20px; }
.follow-prompt-logo { position:relative; display:inline-flex; margin:10px auto 20px; }
.follow-prompt-logo .brand-avatar { width:68px; height:68px; font-size:20px; border:1px solid #eee; overflow:hidden; background:#fff; }
.follow-success-mark { position:absolute; right:-4px; bottom:0; display:grid; place-items:center; width:26px; height:26px; border:3px solid #fff; border-radius:50%; background:var(--noondok-red); color:#fff; }
.follow-success-mark .icon { width:13px; height:13px; }
.follow-dialog h2 { margin:0 0 14px; font-size:24px; line-height:1.4; letter-spacing:-.7px; word-break:keep-all; }
.follow-dialog #followDialogDescription { margin:0 0 26px; color:#777; font-size:14px; line-height:1.75; }
.follow-prompt-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.follow-primary,.follow-secondary { min-height:48px; border:0; border-radius:12px; padding:12px; font:inherit; font-size:14px; font-weight:600; }
.follow-primary { background:#1c1c1c; color:#fff; }
.follow-secondary { background:#f4f4f4; color:#666; }
.follow-done { width:100%; margin-top:16px; }
.notification-entry { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border:1px solid #eee; border-radius:12px; background:#fff; text-align:left; font:inherit; font-size:14px; }
.notification-entry small { display:block; font-size:11px; color:#999; margin-top:4px; }
.notification-entry .icon { width:18px; height:18px; }
.notification-settings { text-align:left; padding:16px; margin-top:8px; background:#fafafa; border-radius:12px; font-size:12px; line-height:1.7; color:#777; }
.notification-settings p { margin:0 0 12px; }
.notification-settings strong { color:#333; }
.notification-settings .notification-note { margin:12px 0 0; color:#999; font-size:11px; }
.notification-permission { border:0; border-radius:8px; background:#1c1c1c; color:#fff; padding:11px 14px; font:inherit; }
.notification-permission:disabled { opacity:.5; }
.settings-logo { display:block; width:24px; height:36px; object-fit:contain; margin:12px auto 22px; }
.brand-avatar.has-logo, .story-avatar.has-logo, .directory-logo.has-logo { background:#FFF; }
.site-footer { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; }
.site-footer>span { font-size:11px; line-height:1.6; }
@media(max-width:700px) {
  .category-drawer>.category-hub { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  .recommended-brand { flex-basis:76px; }
  .recommendation-context { font-size:11px; margin-bottom:14px; }
  .recommend-follow { width:36px; height:36px; }
  .ad-grid>.brand-recommendations { margin:4px 0 8px; padding:20px 0; }
}

/* Home-screen installation promotion. */
.install-dialog { width:min(390px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); margin:auto; padding:32px 24px 24px; border:0; border-radius:24px; background:#fff; color:#1c1c1c; text-align:center; overflow-y:auto; }
.install-dialog::backdrop { background:#0006; backdrop-filter:blur(3px); }
.install-close { position:absolute; right:10px; top:10px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; background:transparent; color:#777; }
.install-close .icon { width:20px; height:20px; }
.install-app-icon { display:block; margin:8px auto 24px; border:1px solid #eee; border-radius:24px; object-fit:contain; }
.install-dialog h2 { margin:0 0 12px; font-size:22px; line-height:1.4; letter-spacing:-.6px; word-break:keep-all; }
.install-dialog #installDescription { margin:0 0 24px; color:#777; font-size:14px; line-height:1.7; }
.install-instructions,.install-status { font-size:13px; line-height:1.8; color:#777; word-break:keep-all; }
.install-status:empty { display:none; }
.install-actions { display:flex; gap:8px; margin-top:24px; }
.install-actions button { flex:1; min-height:48px; padding:12px; border:0; border-radius:12px; font:inherit; font-size:14px; font-weight:600; }
.install-later { color:#666; background:#f4f4f4; }
.install-confirm { color:#fff; background:#1c1c1c; }
.install-confirm:disabled { opacity:.6; }
.install-entry { min-height:44px; margin:8px; padding:12px 18px; border:0; border-radius:12px; background:#f4f4f4; color:#1c1c1c; font:inherit; font-size:14px; }

/* One collection for brands and ads, using the supplied October identity. */
.main-logo { width:150px; }
.about-logo { width:220px; }
.noondok-nav-symbol { width:17.1px; height:22.8px; object-fit:contain; filter:none; }
.noondok-action-symbol { display:block; width:17px; height:24px; object-fit:contain; flex:none; }
.ad-grid .card-overlay-actions .card-save { width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:#1c1c1c45; backdrop-filter:blur(6px); transform:scale(.9); }
.card-save .noondok-action-symbol { width:15.3px; height:21.6px; filter:brightness(0) invert(1); }
.card-save[aria-pressed="true"] .noondok-action-symbol { filter:none; }
.ad-grid .card-overlay-actions .card-save[aria-pressed="true"] { background:#fff; }
.dialog-save .noondok-action-symbol { width:14px; height:20px; }
.dialog-actions>.dialog-save[aria-pressed="true"] { background:var(--noondok-red-soft); color:var(--noondok-red); border-color:transparent; }
.collection-section { padding:28px 0 0; }
.collection-section>h1,.my-section>h1 { margin:0; font-size:30px; letter-spacing:-1px; line-height:1.4; }
.collection-description { margin:10px 0 28px; color:#858585; font-size:14px; }
.collection-tabs { display:flex; gap:32px; border-bottom:1px solid #eee; margin-bottom:28px; }
.collection-tabs>button { position:relative; display:flex; align-items:center; gap:8px; padding:16px 0; border:0; background:none; font:inherit; font-size:16px; white-space:nowrap; color:#888; }
.collection-tabs>button[aria-selected="true"] { color:#1c1c1c; font-weight:700; }
.collection-tabs>button[aria-selected="true"]::after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--noondok-red); }
.collection-tabs>button>span { min-width:20px; padding:2px 5px; border-radius:5px; background:#f3f3f3; color:#888; font-size:11px; text-align:center; font-weight:400; }
.collection-tabs>button[aria-selected="true"]>span { color:var(--noondok-red); background:var(--noondok-red-soft); }
.followed-brand-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:32px; padding-bottom:32px; }
.followed-brand-grid .brand-directory-row { min-width:0; }
.followed-brand-grid .brand-directory-link { min-width:0; }
.followed-brand-grid .directory-names { min-width:0; }
.followed-brand-grid .directory-names strong,.followed-brand-grid .directory-names>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.collection-empty { grid-column:1/-1; padding:70px 16px; text-align:center; }
.collection-empty h2 { font-size:20px; margin:0 0 12px; }
.collection-empty p { color:#888; font-size:14px; margin:0 0 24px; }
.collection-empty .primary-button { display:inline-flex; }
body[data-view="following"] .feed-section>.section-heading { margin-top:0; }
body[data-view="following"] .feed-heading h1 { font-size:20px; }
.ad-follow-preview { display:block; width:128px; height:80px; object-fit:cover; border-radius:12px; margin:12px auto 22px; }
.ad-follow-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ad-follow-choice { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:144px; padding:18px 8px; border:1px solid #eee; border-radius:16px; background:#fafafa; font:inherit; color:#1c1c1c; }
.ad-follow-choice.with-brand { background:var(--noondok-red-subtle); border-color:var(--noondok-red-border); }
.ad-follow-choice:hover { border-color:var(--noondok-red); }
.ad-follow-choice .brand-avatar { display:grid; width:32px; height:32px; font-size:11px; margin:0; }
.ad-follow-choice .noondok-action-symbol { width:23px; height:32px; }
.ad-follow-choice strong { margin-top:3px; font-size:16px; }
.ad-follow-choice>span:last-child { color:#888; font-size:11px; line-height:1.5; }
.ad-follow-note { color:#888; font-size:12px; line-height:1.5; margin:16px 0 0; }
.ad-follow-remove { min-height:44px; margin:14px 0 -6px; border:0; background:none; padding:8px 12px; color:#888; font:inherit; font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.my-section { max-width:620px; margin:0 auto; padding:28px 0 50px; }
.my-profile { padding:42px 0 30px; text-align:center; }
.my-avatar { display:grid; place-items:center; width:72px; height:72px; margin:0 auto 18px; border-radius:50%; background:#f5f5f5; color:#aaa; }
.my-avatar>.icon { width:32px; height:32px; }
.my-profile h2 { font-size:24px; margin:0 0 10px; }
.my-profile p { color:#888; font-size:14px; margin:0; }
.my-collections { border-top:1px solid #eee; border-bottom:1px solid #eee; }
.my-collections>button { display:flex; align-items:center; width:100%; min-height:70px; gap:16px; border:0; background:none; padding:16px 8px; font:inherit; font-size:15px; text-align:left; }
.my-collections>button+button { border-top:1px solid #f3f3f3; }
.my-collections strong { margin-left:auto; font-size:20px; font-weight:600; }
.my-collections .icon { width:18px; height:18px; color:#aaa; }
.my-account-note { font-size:13px; line-height:1.8; color:#888; margin:24px 8px; }
.my-links { display:grid; }
.my-links>button { display:flex; justify-content:space-between; align-items:center; min-height:48px; padding:12px 8px; border:0; background:none; font:inherit; font-size:13px; color:#666; }
body[data-view="my"] .search-box { visibility:hidden; }
@media(max-width:1000px) { .followed-brand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
  .main-logo { width:116px; }
  .about-logo { width:180px; }
  .collection-section,.my-section { padding-top:24px; }
  .collection-section>h1,.my-section>h1 { font-size:26px; }
  .collection-description { font-size:12px; margin-bottom:18px; }
  .collection-tabs { gap:22px; margin-bottom:22px; }
  .collection-tabs>button { font-size:14px; gap:6px; }
  .followed-brand-grid { grid-template-columns:1fr; }
  body[data-view="following"] .feed-heading h1 { font-size:18px; }
}

/* Story media stays within the editorial column; motion only runs in view. */
.about-media { margin:32px 0 38px; }
.about-hero .about-media { margin:40px 0 0; }
.about-media-stage { position:relative; width:100%; aspect-ratio:16/9; min-height:200px; overflow:hidden; border-radius:20px; background:#111; }
.about-media-stage>img,.about-media-stage>video,.about-media-stage>iframe,.about-media-stage>.about-youtube { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:contain; }
.about-media-stage>img { object-fit:cover; }
.about-media figcaption { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:12px; color:#858585; font-size:12px; line-height:1.5; }
.about-media figcaption a { flex:none; text-decoration:none; padding:4px 0; }
.about-media figcaption a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.about-story .about-media-error,.about-media-error { margin:10px 0 0; color:#737373; font-size:12px; line-height:1.6; }
.about-brands { position:relative; margin:36px 0 44px; padding:10px 0 36px; }
.about-brand-window { overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.about-brand-track { display:flex; width:max-content; animation:about-brand-roll 65s linear infinite; animation-play-state:paused; }
.about-brands.is-running .about-brand-track { animation-play-state:running; }
@media(hover:hover) { .about-brand-window:hover .about-brand-track { animation-play-state:paused; } }
.about-brand-group { display:flex; align-items:center; gap:32px; padding-right:32px; }
.about-brand-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100px; flex:none; }
.about-brand-item img { width:64px; height:64px; object-fit:contain; border-radius:50%; background:#fff; }
.about-brand-item span { color:#858585; font-size:11px; white-space:nowrap; }
.about-roll-toggle { position:absolute; right:0; bottom:0; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#737373; background:#f5f5f5; font-size:12px; }
@keyframes about-brand-roll { to { transform:translateX(-50%); } }
@media(max-width:700px) {
  .about-hero .about-media { margin-top:28px; }
  .about-media { margin:26px 0 30px; }
  .about-media-stage { border-radius:14px; }
  .about-media figcaption { align-items:flex-start; font-size:10px; gap:12px; }
  .about-brand-group { gap:20px; padding-right:20px; }
  .about-brand-item { width:80px; }
  .about-brand-item img { width:56px; height:56px; }
  .about-brands { margin:28px 0 34px; }
}