/* ============================================================
   Home page — navigate-first
   ============================================================ */

.home { padding-bottom: 80px; }

/* ---------- Hero ---------- */
.home-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  padding-top: 64px;
  padding-bottom: 96px;
  align-items: center;
}
.home-eyebrow {
  font: 500 11px var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-h1 { margin: 16px 0 20px; }
.home-lede { font-size: 17px; line-height: 1.55; max-width: 520px; color: #3a3328; }
.home-hero-actions { display: flex; gap: 12px; margin: 32px 0 40px; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  background: var(--ink); color: #fff;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  transition: transform .15s;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary span { transition: transform .2s; }
.btn-primary:hover span { transform: translateX(4px); }
.btn-primary.btn-on-dark { background: #fff; color: #1a1a1a; }
.btn-ghost {
  display: inline-flex; align-items: center;
  padding: 14px 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
}
.btn-ghost:hover { background: var(--soft); }
.home-hero-stats { display: flex; gap: 40px; }
.home-hero-stats span { font-size: 13px; color: var(--muted); }
.home-hero-stats strong { display: block; font-family: var(--serif); font-size: 28px; color: var(--ink); font-weight: 500; }

/* Hero artwork grid */
.home-hero-art {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  aspect-ratio: 1.05/1;
}
.home-art-card {
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 16px;
}
.art-label { font: 500 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.art-books { background: linear-gradient(135deg, #7a2230, #4a1018); }
.art-books::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 12px, rgba(255,255,255,.06) 12px, rgba(255,255,255,.06) 13px),
    radial-gradient(circle at 30% 40%, rgba(231,200,144,.4), transparent 60%);
}
.art-pen { background: linear-gradient(135deg, #d4751a, #8a3e0a); }
.art-pen::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(254,240,196,.5), transparent 50%);
}
.art-pen::after {
  content: ""; position: absolute;
  width: 240px; height: 8px; left: -40px; top: 45%;
  background: linear-gradient(90deg, #1a1a1a 60%, #d4751a 60%, #d4751a 70%, #8a3e0a 70%);
  border-radius: 8px;
  transform: rotate(-20deg);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.art-chair { background: linear-gradient(160deg, #3c4a36, #1f2a1c); }
.art-chair::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(202,169,122,.35), transparent 50%);
}
.art-chair::after {
  content: ""; position: absolute;
  width: 60%; height: 50%; left: 20%; top: 22%;
  background: #1a1a1a;
  clip-path: polygon(20% 0%, 80% 0%, 90% 55%, 100% 100%, 0% 100%, 10% 55%);
  opacity: 0.45;
}
.art-vase { background: linear-gradient(135deg, #c45a3a, #7a2810); }
.art-vase::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(253,224,200,.35), transparent 60%);
}
.art-vase::after {
  content: ""; position: absolute;
  width: 50%; height: 60%; left: 25%; top: 22%;
  border-radius: 50% 50% 40% 40%;
  background: #fde0c8;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

/* ---------- Section headers ---------- */
.home-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.home-section-link { font-size: 13px; color: var(--ink); letter-spacing: 0.02em; }
.home-section-link:hover { color: var(--pop-red); }

/* ---------- Portals ---------- */
.home-portals { padding-bottom: 96px; }
.portals-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 560px;
}
.portal {
  position: relative;
  background: var(--p-bg);
  color: var(--p-ink);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.7,.3,1.1);
}
.portal:hover { transform: translateY(-4px); }
.portal-books { grid-row: 1 / span 2; }
.portal-art {
  color: var(--p-accent);
  opacity: 0.95;
  transition: transform .3s;
}
.portal:hover .portal-art { transform: scale(1.08) rotate(-2deg); }
.portal-meta { position: relative; z-index: 2; }
.portal-meta h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 500;
  margin-bottom: 6px;
}
.portal-meta p {
  font-size: 13px;
  opacity: 0.75;
  margin: 0;
  max-width: 80%;
}
.portal-arrow {
  display: inline-block;
  margin-top: 14px;
  font-size: 22px;
  transition: transform .2s;
}
.portal:hover .portal-arrow { transform: translateX(6px); }
.portal-count {
  position: absolute;
  top: 24px; right: 28px;
  font: 500 11px var(--mono);
  letter-spacing: 0.12em;
  opacity: 0.55;
}
.portal-books .portal-meta h3 { font-size: clamp(32px, 3vw, 44px); }
.portal-books .portal-meta p { font-size: 14px; }

/* ---------- Quick row ---------- */
.home-quick { padding-bottom: 96px; }
.quick-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.quick-card { position: relative; }
.quick-cover {
  aspect-ratio: 2/3;
  border-radius: 4px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  font-family: var(--serif);
  box-shadow: 0 12px 24px -16px rgba(0,0,0,.3), inset -3px 0 0 rgba(0,0,0,.2);
  transition: transform .2s;
  overflow: hidden;
  position: relative;
}
.quick-card:hover .quick-cover { transform: translateY(-4px) rotate(-1deg); }
.quick-cover::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: rgba(0,0,0,.2);
  border-right: 1px solid rgba(255,255,255,.1);
}
.quick-cover-title { font-size: 17px; line-height: 1.15; font-weight: 500; }
.quick-cover-author { font-size: 11px; opacity: 0.7; font-family: var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.cover-tone-wine { background: linear-gradient(160deg, #7a2230, #3a1018); }
.cover-tone-yellow { background: linear-gradient(160deg, #c89030, #6a4810); color: #1a1a1a;}
.cover-tone-yellow .quick-cover-author { color: rgba(26,26,26,.7); }
.cover-tone-cream { background: linear-gradient(160deg, #e8d9b8, #b89a68); color: #1a1a1a;}
.cover-tone-cream .quick-cover-author { color: rgba(26,26,26,.65); }
.cover-tone-dark { background: linear-gradient(160deg, #2a2a2a, #0a0a0a); }
.cover-tone-green { background: linear-gradient(160deg, #3c4a36, #1a2818); }
.cover-tone-red { background: linear-gradient(160deg, #c44a30, #7a1810); }
.cover-tone-blue { background: linear-gradient(160deg, #2a4a6a, #102838); }
.cover-tone-peach { background: linear-gradient(160deg, #e7a890, #b06848); }
.cover-tone-rust { background: linear-gradient(160deg, #a8553a, #5a2010); }
.quick-meta { margin-top: 12px; }
.quick-meta strong { display: block; font-size: 13px; font-weight: 500; margin-bottom: 2px; line-height: 1.25; }
.quick-meta span { font-size: 13px; color: var(--muted); }
.quick-card .disc {
  position: absolute; top: 8px; right: 8px;
}

/* ---------- Tilbod ---------- */
.home-tilbod {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 24px;
  margin-bottom: 96px;
}
.tilbod-card {
  background: #1a2a1a;
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  overflow: hidden;
}
.tilbod-card::before {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(202,169,122,.35), transparent 70%);
}
.tilbod-eyebrow {
  font: 500 11px var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #caa97a;
}
.tilbod-card h2 { margin: 16px 0 12px; color: #fff; }
.tilbod-card p { max-width: 360px; color: #c8c0a8; margin-bottom: 28px; }
.tilbod-card .btn-primary { align-self: flex-start; }
.tilbod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}
.tilbod-tile {
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.4;
}
.tilbod-tile span {
  font: 500 32px var(--mono);
  letter-spacing: -0.02em;
}
.tilbod-tile em { font-style: normal; font-size: 13px; letter-spacing: 0.04em; opacity: 0.85; }
.tile-clay { background: #caa97a; color: #1a1a1a; }
.tile-charcoal { background: #1a1a1a; color: #fff; }
.tile-olive { background: #4a5236; color: #fff; }
.tile-sand { background: #e8d9b8; color: #1a1a1a; }

/* ---------- Stores ---------- */
.home-stores { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: center; }
.stores-text h2 { margin: 16px 0 16px; }
.stores-text p { max-width: 440px; color: #3a3328; }
.stores-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.stores-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.stores-list strong { font-family: var(--serif); font-size: 20px; font-weight: 500; min-width: 200px; }
.stores-list em { font-style: normal; opacity: .35; }
.stores-pickup { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Smarter ways strip ---------- */
.home-smart { padding-bottom: 96px; }
.home-smart-sub {
  font: italic 400 14px var(--serif);
  color: var(--muted);
}
.home-smart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.home-smart-card {
  position: relative;
  text-align: left;
  padding: 36px 32px 32px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
  color: #fff;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
.home-smart-card:hover { transform: translateY(-4px); }
.smart-bundle { background: linear-gradient(160deg, #1d3557, #0a1e35); }
.smart-gift   { background: linear-gradient(160deg, #c45a3a, #7a2810); }
.smart-quote  { background: linear-gradient(160deg, #3c4a36, #1f2a1c); }
.smart-eyebrow {
  font: 600 11px var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 16px;
}
.home-smart-card h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 14px;
  flex: 1;
}
.home-smart-card p {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
  margin: 0;
  max-width: 320px;
}
.smart-arrow {
  position: absolute;
  bottom: 32px; right: 32px;
  font-size: 26px;
  transition: transform .25s;
}
.home-smart-card:hover .smart-arrow { transform: translateX(6px); }

@media (max-width: 1024px) {
  .home-smart-grid { grid-template-columns: 1fr; }
  .home-hero { grid-template-columns: 1fr; }
  .portals-grid { grid-template-columns: 1fr 1fr; height: auto; }
  .portal-books { grid-row: auto; }
  .quick-row { grid-template-columns: repeat(3, 1fr); }
  .home-tilbod { grid-template-columns: 1fr; }
  .home-stores { grid-template-columns: 1fr; }
}
  .home-hero { grid-template-columns: 1fr; }
  .portals-grid { grid-template-columns: 1fr 1fr; height: auto; }
  .portal-books { grid-row: auto; }
  .quick-row { grid-template-columns: repeat(3, 1fr); }
  .home-tilbod { grid-template-columns: 1fr; }
  .home-stores { grid-template-columns: 1fr; }
}