/* ============================================================================
   TAHOE BARK CO — brand site
   Aesthetic: vintage national-park poster / ski-lodge screen print.
   Mobile-first. No framework, no build step.
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
  /* pine */
  --pine-950: #071B16;
  --pine-900: #0E2620;
  --pine-800: #123329;
  --pine-700: #174535;
  --pine-600: #22513C;
  --pine-500: #3C6B48;

  /* cream */
  --cream:      #F2E6CE;
  --cream-lit:  #FBF3E1;
  --cream-deep: #E5D5B4;

  /* accents */
  --lake:      #2E6F8E;
  --lake-deep: #1E4F63;
  --granite:   #7C8B86;
  --granite-d: #566661;
  --sunset:    #E2622C;
  --sunset-lt: #F0A03E;
  --rust:      #B0431E;

  --ink: #0B211B;

  --ff-display: "Ultra", "Bookman Old Style", Georgia, serif;
  --ff-body: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --ff-mono: "Space Mono", "SFMono-Regular", ui-monospace, monospace;

  --wrap: 1180px;
  --gut: clamp(1.25rem, 5vw, 3.5rem);

  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-soft: 0 18px 44px -22px rgba(7, 27, 22, .7);

  --ease: cubic-bezier(.22, .68, .3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: clamp(1rem, .96rem + .3vw, 1.125rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--sunset); color: var(--pine-950);
  padding: .75rem 1.25rem; font-family: var(--ff-mono); font-weight: 700;
}
.skip:focus { left: .75rem; top: .75rem; }

:focus-visible {
  outline: 3px solid var(--sunset-lt);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.dot { opacity: .5; padding-inline: .35em; }

/* ---------- paper grain (sits over everything) ---------- */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .30; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .grain { animation: grainshift 700ms steps(3, end) infinite; }
}
@keyframes grainshift {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(-3px, 2px, 0); }
  66%  { transform: translate3d(2px, -3px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--ff-mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 1.1rem;
}
.eyebrow--light { color: var(--sunset-lt); }
.eyebrow--ink   { color: var(--pine-900); opacity: .72; }

.h-display {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.3rem + 6.4vw, 5.4rem);
  line-height: .92;
  letter-spacing: -.012em;
  color: var(--pine-900);
  text-wrap: balance;
}
.h-display--light { color: var(--cream-lit); }
.h-display--ink   { color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: 1rem 1.7rem;
  font-family: var(--ff-mono);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  border: 2.5px solid var(--ink);
  border-radius: 2px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease);
}
.btn--primary {
  background: var(--sunset);
  color: var(--pine-950);
  box-shadow: var(--shadow-hard);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--sunset-lt);
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(242, 230, 206, .45);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--cream);
  background: rgba(242, 230, 206, .1);
}

/* ============================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(84svh, 900px);
  display: flex; align-items: flex-end;
  padding: clamp(3rem, 9vh, 8rem) 0 clamp(3rem, 8vh, 6rem);
  background: var(--pine-950);
  overflow: hidden;
}

.hero__scene {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .scene__sun {
    transform-origin: 720px 640px;
    animation: sunrise 2.4s var(--ease) both;
  }
  .scene__ridge--far  { animation: driftup 1.5s .10s var(--ease) both; }
  .scene__ridge--mid  { animation: driftup 1.5s .22s var(--ease) both; }
  .scene__ridge--near { animation: driftup 1.5s .34s var(--ease) both; }
  .scene__trees       { animation: driftup 1.5s .46s var(--ease) both; }
}
@keyframes sunrise {
  from { transform: translateY(72px) scale(.9); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes driftup {
  from { transform: translateY(48px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* vignette so type stays readable over the scene */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 78% at 50% 66%, rgba(7,27,22,.06) 0%, rgba(7,27,22,.62) 62%, rgba(7,27,22,.88) 100%),
    linear-gradient(180deg, rgba(7,27,22,.72) 0%, rgba(7,27,22,0) 34%);
}

/* halftone dots for the screen-print feel */
.hero__fade {
  position: absolute; inset-inline: 0; bottom: 0; height: 46%; z-index: -1;
  background-image: radial-gradient(circle at center, rgba(7,27,22,.55) 1.1px, transparent 1.2px);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 88%);
  mask-image: linear-gradient(180deg, transparent, #000 88%);
  opacity: .8;
}

.hero__inner {
  position: relative;
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gut);
  text-align: center;
}

/* Official wordmark (brand kit). Very wide aspect (7.7:1), so width drives it. */
.brandmark { margin: .9rem auto 1.1rem; }
.brandmark__svg {
  width: min(100%, 980px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 10px 26px rgba(7, 27, 22, .55));
}

.hero__hook {
  max-width: 42ch;
  margin: 1.4rem auto 0;
  color: var(--cream);
  font-size: clamp(1.02rem, .95rem + .5vw, 1.3rem);
  line-height: 1.55;
  text-wrap: pretty;
  /* keeps the line legible where it crosses the sun disc */
  text-shadow: 0 2px 14px rgba(7, 27, 22, .78), 0 0 3px rgba(7, 27, 22, .55);
}
.hero__hook em {
  font-style: normal;
  color: var(--sunset-lt);
  font-weight: 700;
  border-bottom: 2px solid rgba(240, 160, 62, .45);
}

.hero__cta {
  margin-top: 2.2rem;
  display: flex; flex-wrap: wrap; gap: .9rem;
  justify-content: center;
}

/* page-load reveal */
.reveal { animation: rise .9s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
}

/* ============================================================================
   TICKER
   ========================================================================= */
.ticker {
  background: var(--sunset);
  color: var(--pine-950);
  border-block: 3px solid var(--ink);
  overflow: hidden;
  padding: .7rem 0;
  font-family: var(--ff-mono);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ticker__track { display: flex; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .ticker__track { animation: slide 34s linear infinite; }
}
.ticker__set { display: inline-flex; align-items: center; white-space: nowrap; padding-right: 0; }
.ticker__set b { font-weight: 700; }
.ticker__set i { font-style: normal; padding-inline: 1.6rem; opacity: .62; }
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================================
   STORY
   ========================================================================= */
.story {
  position: relative;
  background: var(--cream);
  padding-block: clamp(4rem, 11vw, 8rem);
  overflow: hidden;
}
.story__topo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--granite); opacity: .17; pointer-events: none;
}
.story__grid { position: relative; display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

.story__head { position: relative; }
/* Official park badge (brand kit) */
.story__badge {
  width: clamp(132px, 26vw, 226px);
  height: auto;
  margin-top: 2rem;
  filter: drop-shadow(0 14px 28px rgba(11, 33, 27, .28));
}
@media (prefers-reduced-motion: no-preference) {
  .story__badge { animation: bob 7s ease-in-out infinite; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-10px) rotate(1.5deg); }
}

.story__body p + p { margin-top: 1.1rem; }
.story__body .lede {
  font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem);
  line-height: 1.45;
  font-weight: 500;
  color: var(--pine-800);
}
.story__body strong { color: var(--rust); font-weight: 700; }
.story__note {
  margin-top: 1.9rem !important;
  padding-left: 1.1rem;
  border-left: 4px solid var(--sunset);
  font-family: var(--ff-mono);
  font-size: .84rem;
  line-height: 1.65;
  color: var(--granite-d);
}

/* ============================================================================
   PRODUCTS
   ========================================================================= */
.shop {
  position: relative;
  background: var(--pine-900);
  color: var(--cream);
  padding-block: clamp(4rem, 11vw, 8rem);
  border-top: 3px solid var(--ink);
  background-image:
    radial-gradient(circle at center, rgba(242,230,206,.055) 1px, transparent 1.1px);
  background-size: 9px 9px;
}
.shop__head { max-width: 46ch; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.shop__sub {
  margin-top: 1.3rem;
  color: rgba(242, 230, 206, .74);
  max-width: 48ch;
  text-wrap: pretty;
}

.tiles { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }

.tile {
  background: var(--cream-lit);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 3px;
  box-shadow: var(--shadow-hard);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (hover: hover) {
  .tile:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--ink); }
  .tile:hover .stamp { transform: rotate(-4deg) scale(1.04); }
}

.tile__slot {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--cream-deep);
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
}
/* a real photo, once dropped in, simply covers the placeholder */
.tile__slot > img {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
}
.tile__ph { position: absolute; inset: 0; z-index: 1; }
.tile__ph svg { width: 100%; height: 100%; }
.tile__ph--a { background: var(--lake-deep);  color: var(--cream-lit); }
.tile__ph--b { background: var(--sunset);     color: var(--pine-950); }
.tile__ph--c { background: var(--granite);    color: var(--pine-950); }
.tile__ph--d { background: var(--pine-600);   color: var(--cream-lit); }
.tile__ph--e { background: var(--lake);       color: var(--pine-950); }

.stamp {
  position: absolute; z-index: 3;
  left: .85rem; top: .85rem;
  display: inline-block;
  padding: .38rem .7rem;
  background: var(--cream-lit);
  border: 2.5px solid var(--ink);
  font-family: var(--ff-mono);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--rust);
  transform: rotate(-3deg);
  transition: transform .3s var(--ease);
  box-shadow: 3px 3px 0 rgba(11, 33, 27, .28);
}

.tile__meta { padding: 1.15rem 1.25rem 1.4rem; }
.tile__cat {
  font-family: var(--ff-mono);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--granite-d);
  margin-bottom: .5rem;
}
.tile__name {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.72rem);
  line-height: 1.02;
  color: var(--pine-900);
  text-wrap: balance;
}
.tile__note {
  margin-top: .6rem;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--granite-d);
  text-wrap: pretty;
}

/* scroll reveal */
.reveal-on-scroll {
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal-on-scroll.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   EMAIL CAPTURE
   ========================================================================= */
.list {
  background: var(--sunset);
  color: var(--ink);
  border-top: 3px solid var(--ink);
  padding-block: clamp(3.5rem, 10vw, 7rem);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(11,33,27,.05) 0 2px, transparent 2px 11px);
}
.list__wrap { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.list__sub {
  margin-top: 1.2rem;
  font-weight: 500;
  color: rgba(11, 33, 27, .8);
  max-width: 34ch;
}

.signup { align-self: center; width: 100%; }
.signup__row {
  display: flex; flex-direction: column; gap: .7rem;
}
.signup__input {
  flex: 1 1 auto; min-width: 0;
  padding: 1.05rem 1.1rem;
  background: var(--cream-lit);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font-size: 1rem;
  box-shadow: inset 0 2px 0 rgba(11,33,27,.08);
}
.signup__input::placeholder { color: rgba(11, 33, 27, .42); }
.signup__btn {
  padding: 1.05rem 1.6rem;
  background: var(--pine-900);
  color: var(--cream-lit);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font-family: var(--ff-mono);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.signup__btn:hover, .signup__btn:focus-visible {
  background: var(--pine-700);
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}
.signup__btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }

.signup__msg {
  margin-top: .95rem;
  min-height: 1.5em;
  font-family: var(--ff-mono);
  font-size: .84rem; font-weight: 700;
  letter-spacing: .06em;
  color: var(--pine-900);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.signup__msg.is-on { opacity: 1; transform: none; }
.signup__msg.is-on::before { content: "\2713\00a0\00a0"; color: var(--pine-700); }

.signup__fine {
  margin-top: .3rem;
  font-size: .8rem;
  line-height: 1.55;
  color: rgba(11, 33, 27, .74);
  max-width: 46ch;
}

/* ============================================================================
   FOOTER
   ========================================================================= */
.foot {
  background: var(--pine-950);
  color: var(--cream);
  border-top: 3px solid var(--ink);
  padding-block: clamp(2.75rem, 7vw, 4.25rem);
}
.foot__wrap {
  display: grid; gap: 2.25rem;
  align-items: end;
}
.foot__mark { width: min(240px, 68vw); height: auto; }
.foot__copy {
  margin-top: 1rem;
  font-family: var(--ff-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  color: rgba(242, 230, 206, .62);
}

.foot__soclabel {
  font-family: var(--ff-mono);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242, 230, 206, .45);
  margin-bottom: .85rem;
}
.socials { display: flex; gap: .7rem; flex-wrap: wrap; }
.social {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem .85rem;
  border: 2px solid rgba(242, 230, 206, .22);
  border-radius: 2px;
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(242, 230, 206, .55);
  cursor: default;
}
.social svg { width: 17px; height: 17px; flex: none; }

/* ============================================================================
   BREAKPOINTS
   ========================================================================= */
@media (min-width: 560px) {
  .signup__row { flex-direction: row; align-items: stretch; }
  .signup__btn { flex: none; }
}

@media (min-width: 760px) {
  .hero { min-height: min(94svh, 940px); }
  .story__grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot__wrap {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .foot__social { text-align: right; }
  .socials { justify-content: flex-end; }
}

@media (min-width: 1000px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile--wide { grid-column: span 2; }
  .tile--wide .tile__slot { aspect-ratio: 16 / 10; }
  .tile--wide .tile__meta { padding: 1.5rem 1.75rem 1.9rem; }
  .tile--wide .tile__name { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); }

  .list__wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 6rem);
  }

  .story__head { position: sticky; top: 3rem; }
}

/* phones — stack the CTAs rather than letting the long label wrap badly */
@media (max-width: 520px) {
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
}