/* Manna'd — landing page. Mobile first. */
@font-face { font-family: "Anton"; src: url("assets/fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("assets/fonts/oswald-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("assets/fonts/oswald-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #0b0b0a;
  --bg-2: #141412;
  --cream: #eee4cb;
  --cream-dim: rgba(238, 228, 203, .72);
  --teal: #68968d;
  --teal-deep: #2c4642;
  --bone: #e6dcc4;
  --ink: #0b0b0a;
  --pad: clamp(20px, 5vw, 64px);
  --display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --label: "Oswald", "Arial Narrow", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--cream);
  font: 400 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
/* film grain */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
i { font-style: normal; color: var(--teal); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--cream); color: var(--ink); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

/* type */
.display {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  line-height: .92; letter-spacing: .005em; margin: 0;
  font-size: clamp(56px, 16.5vw, 148px);
  color: var(--cream);
  text-shadow: .045em .045em 0 var(--teal);
}
.display--md { font-size: clamp(46px, 12.5vw, 112px); }
.display--sm { font-size: clamp(30px, 8vw, 72px); text-shadow: .05em .05em 0 var(--teal); }
.eyebrow {
  font: 500 13px/1 var(--label); letter-spacing: .22em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 18px;
}
.lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--cream); max-width: 34em; margin: 22px 0 0; }
.small { font-size: 15px; color: var(--cream-dim); max-width: 36em; margin: 16px 0 0; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font: 500 17px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  background: var(--cream); color: var(--ink);
  padding: 20px 26px; min-height: 56px; border-radius: 0;
  box-shadow: 5px 5px 0 var(--teal);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--teal); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--teal); }
.btn--ink { background: var(--ink); color: var(--cream); box-shadow: 5px 5px 0 var(--teal); }

/* top bar */
.bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--pad); padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(11, 11, 10, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(238, 228, 203, .08);
}
.bar__mark { font: 400 26px/1 var(--display); text-decoration: none; letter-spacing: .01em; text-shadow: 2px 2px 0 var(--teal); }
.bar__shop {
  font: 500 14px/1 var(--label); letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  border: 1.5px solid var(--cream); padding: 11px 16px;
}
.bar__shop:hover { background: var(--cream); color: var(--ink); }

/* hero */
.hero { padding: 36px var(--pad) 0; display: grid; gap: 34px; overflow: hidden; }
.hero__sub { font: 400 clamp(20px, 5.4vw, 28px)/1.25 var(--label); letter-spacing: .02em; text-transform: uppercase; color: var(--cream-dim); margin: 22px 0 30px; }
.hero__art {
  margin: 0 calc(var(--pad) * -1); padding-top: 18px;
  background: radial-gradient(120% 90% at 50% 100%, #3d625b 0%, var(--teal-deep) 55%, #172523 100%);
  display: flex; align-items: flex-end;
}
/* full store photos, never cropped: the second overlaps only the first one's transparent margin */
.hero__art img { width: 100%; flex: none; }
.hero__a { display: none; }
@media (min-width: 700px) {
  .hero__art img { width: 62%; }
  .hero__a { display: block; }
  .hero__b { margin-left: -24%; }
}

/* ticker */
.ticker { overflow: hidden; border-block: 1px solid rgba(238, 228, 203, .14); background: var(--bg-2); }
.ticker__track { display: flex; width: max-content; animation: tick 40s linear infinite; }
.ticker__track span { font: 400 20px/1 var(--display); letter-spacing: .06em; padding: 16px 0; white-space: pre; }
.ticker__track i { padding: 0 .6em; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } html { scroll-behavior: auto; } }

/* what is it */
.what { padding: 84px var(--pad) 40px; display: grid; gap: 40px; align-items: center; }
.what__img { margin: 0; background: radial-gradient(120% 90% at 50% 100%, #3d625b 0%, var(--teal-deep) 60%, #172523 100%); }
.what__img img { width: 100%; }

/* how */
.how { padding: 56px var(--pad) 84px; }
.steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(238, 228, 203, .16); }
.steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 18px 0; border-bottom: 1px solid rgba(238, 228, 203, .16); color: var(--cream-dim); font-size: 16px; }
.steps span { grid-row: span 2; font: 400 22px/1.1 var(--display); color: var(--teal); }
.steps b { display: block; font: 400 24px/1.1 var(--display); text-transform: uppercase; color: var(--cream); letter-spacing: .02em; margin-bottom: 4px; }
.gospel {
  margin: 44px 0 0; max-width: 22em;
  font: 400 clamp(26px, 6.6vw, 44px)/1.08 var(--display); text-transform: uppercase; color: var(--cream);
}
.gospel span { display: block; margin-top: 12px; font: 500 12px/1.4 var(--label); letter-spacing: .2em; color: var(--teal); }

/* drop grid */
.drop { padding: 84px var(--pad); background: var(--bg-2); border-top: 1px solid rgba(238, 228, 203, .08); }
.drop__head { margin-bottom: 40px; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
.tile a { display: block; text-decoration: none; height: 100%; }
.tile:not(.tile--cta) a { height: auto; }
/* what it means (expand under each back photo) */
.meaning { margin-top: 12px; border-top: 1px solid rgba(238, 228, 203, .16); }
.meaning summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; padding: 10px 0; font: 500 12px/1.2 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--teal);
  -webkit-tap-highlight-color: transparent;
}
.meaning summary::-webkit-details-marker { display: none; }
.meaning summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform .2s ease; }
.meaning[open] summary::after { transform: rotate(45deg); }
.meaning summary:hover, .meaning summary:focus-visible { color: var(--cream); }
.meaning summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.meaning__body { padding: 2px 0 6px; font-size: 14px; line-height: 1.5; color: var(--cream-dim); overflow-wrap: break-word; hyphens: auto; }
.meaning__body p { margin: 0 0 12px; }
.meaning__body .meaning__k { margin: 0 0 4px; font: 500 11px/1.2 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--teal); }
.meaning__ask { color: var(--cream); font-style: italic; }
.meaning__close { margin: 4px 0 0 !important; padding-top: 10px; border-top: 1px solid rgba(238, 228, 203, .12); font: 400 17px/1.15 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--cream); }
@media (min-width: 700px) { .meaning__body { font-size: 15px; } }
.tile__img { background: var(--bone); aspect-ratio: 1 / 1; }
.tile__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.tile a:hover .tile__img img { transform: translateY(-4px); }
.tile__meta { padding-top: 10px; }
.tile__num { font: 500 11px/1 var(--label); letter-spacing: .2em; color: var(--teal); }
.tile__name { font: 400 clamp(17px, 4.6vw, 24px)/1.05 var(--display); text-transform: uppercase; margin: 6px 0 6px; letter-spacing: .01em; }
.tile__line { font-size: 13px; line-height: 1.4; color: var(--cream-dim); margin: 0 0 6px; }
.tile__cit { font: 500 11px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--cream); margin: 0; }
.tile--cta a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  aspect-ratio: 1 / 1; height: auto; width: 100%; background: var(--teal); color: var(--ink); padding: 18px;
}
.tile--cta__big { font: 400 clamp(44px, 12vw, 96px)/.9 var(--display); text-transform: uppercase; color: var(--ink); text-shadow: .04em .04em 0 var(--cream); }
.tile--cta__small { font: 500 12px/1.5 var(--label); letter-spacing: .16em; text-transform: uppercase; }
.tile--cta .btn { font-size: 12px; letter-spacing: .08em; padding: 12px; min-height: 0; max-width: 100%; box-shadow: 4px 4px 0 var(--cream); align-self: flex-start; }
.grid > li { min-width: 0; }
@media (min-width: 700px) { .tile--cta a { padding: 24px; } .tile--cta .btn { font-size: 14px; padding: 14px 16px; letter-spacing: .12em; } }

/* close */
.close { padding: 84px var(--pad) 96px; display: grid; gap: 40px; align-items: center; }
.close__art { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.close__art img { background: var(--bone); width: 100%; }
.close__art img + img { background: var(--teal-deep); }
.close .btn { margin-top: 30px; }

/* footer */
.foot { padding: 48px var(--pad) max(48px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(238, 228, 203, .12); text-align: center; }
.foot__mark { display: inline-block; font: 400 44px/1 var(--display); text-decoration: none; text-shadow: 3px 3px 0 var(--teal); }
.foot p { margin: 14px 0 0; font: 500 12px/1.5 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim); }
.foot__legal { opacity: .7; }

/* tablet */
@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 18px; }
  .steps { grid-template-columns: repeat(4, 1fr); border-top: 0; gap: 18px; }
  .steps li { grid-template-columns: 1fr; border-bottom: 0; border-top: 2px solid var(--teal); padding-top: 16px; }
  .steps span { grid-row: auto; margin-bottom: 10px; }
}
/* desktop */
@media (min-width: 1000px) {
  .hero { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 48px; padding-top: 64px; min-height: min(86vh, 820px); }
  .hero__copy { padding-bottom: 40px; }
  .hero .display { font-size: clamp(64px, 6.4vw, 108px); }
  .hero__art { margin: 0; align-self: center; padding-top: 28px; }
  .what { grid-template-columns: 1.1fr .9fr; gap: 72px; padding-top: 120px; }
  .how { padding-bottom: 120px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .drop { padding-block: 120px; }
  .drop__head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; margin-bottom: 56px; }
  .drop__head .eyebrow { grid-column: 1 / -1; margin-bottom: -30px; }
  .close { grid-template-columns: 1fr 1fr; gap: 72px; padding-block: 120px; }
}
@media (min-width: 1400px) {
  .hero, .what, .how, .drop > *, .close { max-width: 1400px; margin-inline: auto; }
  .drop > * { margin-inline: auto; max-width: 1400px; }
}