/* ============================================================
   PAIGAAM — design system
   Ivory silk, burgundy ink. Editorial, minimal, warm.
   ============================================================ */
:root {
  --bg:        #FBF4ED;
  --bg-deep:   #F4EADD;
  --ink:       #3B2420;
  --ink-soft:  #6E574E;
  --accent:    #8F1018;
  --accent-dk: #6E0C13;
  --beige:     #E8DACA;
  --champagne: #E9DCC3;
  --taupe:     #A8917E;
  --blush:     #F3E4DC;
  --line:      rgba(59, 36, 32, 0.14);
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans:  'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

::selection { background: var(--accent); color: var(--bg); }

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.01em;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 32px; }

/* ---------- Labels & kickers ---------- */
.kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 18px;
}
.kicker--muted { color: var(--taupe); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 34px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #FBF4ED; }
.btn--primary:hover { background: var(--accent-dk); border-color: var(--accent-dk); color: #FBF4ED; }
.btn--ghost { border-color: transparent; color: var(--ink-soft); }
.btn--ghost:hover { color: var(--accent); background: transparent; }
.btn--small { padding: 11px 22px; font-size: 11px; }
.btn--whatsapp { border-color: #1F7A4D; color: #1F7A4D; }
.btn--whatsapp:hover { background: #1F7A4D; color: #F2FBF6; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 78px;
}
.nav__brand { display: flex; align-items: center; gap: 14px; }
.nav__logo { height: 38px; width: auto; }
.nav__word { font-family: var(--serif); font-size: 24px; letter-spacing: 0.14em; color: var(--accent); font-weight: 600; }
.nav__links { display: flex; gap: 38px; align-items: center; }
.nav__links a {
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); transition: color 0.3s;
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--accent); }
.nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 5px 0; transition: transform 0.3s var(--ease), opacity 0.3s; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - 78px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 80px 24px 110px;
  overflow: hidden;
}
.hero__logo {
  margin-bottom: 8px;
  animation: float 8s ease-in-out infinite;
  filter: drop-shadow(0 24px 44px rgba(143, 16, 24, 0.10));
}
.hero__logo img { width: clamp(250px, 42vw, 380px); height: auto; display: block; }
.hero__dove {
  width: clamp(150px, 20vw, 230px);
  margin-bottom: 34px;
  animation: float 7s ease-in-out infinite;
  filter: drop-shadow(0 18px 30px rgba(143, 16, 24, 0.10));
}
.hero__title {
  font-size: clamp(56px, 9vw, 118px);
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 500;
  text-indent: 0.16em;
}
.hero__tag {
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 44px);
  font-style: italic;
  color: var(--ink);
  margin: 26px 0 18px;
  line-height: 1.25;
}
.hero__sub { max-width: 460px; margin: 0 auto 46px; color: var(--ink-soft); font-size: 17px; }
.hero__ctas { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.hero__rule { width: 1px; height: 74px; background: linear-gradient(var(--accent), transparent); margin-top: 64px; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}

/* ---------- Sections ---------- */
.section { padding: 120px 0; }
.section--tint { background: var(--bg-deep); }
.section__head { text-align: center; max-width: 640px; margin: 0 auto 72px; }
.section__title { font-size: clamp(36px, 5vw, 58px); margin-bottom: 18px; }
.section__sub { color: var(--ink-soft); font-size: 17px; }

/* ---------- Occasion grid ---------- */
.occasions {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.occasion {
  background: var(--bg); padding: 54px 40px; position: relative; overflow: hidden;
  transition: background 0.5s var(--ease);
}
.occasion:hover { background: var(--blush); }
.occasion__num { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--taupe); display: block; margin-bottom: 22px; }
.occasion h3 { font-size: 30px; margin-bottom: 10px; transition: color 0.4s; }
.occasion:hover h3 { color: var(--accent); }
.occasion p { color: var(--ink-soft); font-size: 15px; font-style: italic; font-family: var(--serif); font-size: 17px; }

/* ---------- Template cards ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.cards--6 { grid-template-columns: repeat(3, 1fr); }
.tcard { display: block; }
/* Collection cards: the trending-card anatomy (big preview, name + price row,
   italic one-line description, category label) — light-theme, scan-fast. */
.cards--grid { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
.cards--grid .tcard {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--line); background: #FFFDF8;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
}
.cards--grid .tcard:hover { transform: translateY(-4px); border-color: rgba(201, 162, 94, 0.55); box-shadow: 0 24px 48px -28px rgba(43, 33, 26, 0.45); }
.cards--grid .tcard__frame { aspect-ratio: 16 / 11; border: 0; }
.cards--grid .tcard__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px 0; }
.cards--grid .tcard__title { font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; }
.cards--grid .tcard__price { font-size: 12.5px; flex-shrink: 0; }
.cards--grid .tcard__desc {
  margin: 5px 16px 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft);
  font-family: var(--serif); font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cards--grid .tcard__cat { display: none; }
.cards--grid .tcard__occ-label {
  font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
  font-weight: 700; margin: 6px 16px 0;
}
.cards--grid .tcard__actions { margin-top: auto; padding: 12px 16px 16px; gap: 10px; }
.cards--grid .tcard__create { flex: 1; text-align: center; padding: 10px 16px; font-size: 11px; }
.cards--grid .tcard__preview-link { font-size: 10.5px; }
.tcard__desc { display: none; }
.cards--grid .tcard__desc { display: -webkit-box; }
.tcard__frame {
  display: block;
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  aspect-ratio: 4 / 5;
}
/* Live miniature of the template itself (iframe) + slow auto-scroll.
   Fallback (motif + name) sits underneath; the iframe fades in over it when ready. */
.tcard__live {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 100%; height: 100%; border: 0; display: block;
  opacity: 0; transition: opacity 0.6s ease 0.15s;
  pointer-events: none;
}
.tcard__live.is-ready { opacity: 1; }
.tcard__frame.no-live .tcard__live { display: none; }
.tcard__fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 26px; text-align: center;
}
@media (prefers-reduced-motion: reduce) { .tcard__live { transition: none; } }
.tcard__art {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  transition: transform 1.2s var(--ease);
  padding: 26px; text-align: center;
}
.tcard:hover .tcard__art { transform: scale(1.045); }
.tcard__motif { width: 66px; opacity: 0.9; }
.tcard__name { font-family: var(--serif); font-size: 30px; letter-spacing: 0.2em; }
.tcard__cat { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--taupe); }
.tcard__meta { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 4px 0; }
.tcard__title { font-family: var(--serif); font-size: 24px; letter-spacing: 0.12em; }
.tcard__price { font-size: 14px; color: var(--ink-soft); letter-spacing: 0.06em; }
.tcard__view { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.tcard:hover .tcard__view { border-color: var(--accent); }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.step { text-align: center; }
.step__no {
  font-family: var(--serif); font-style: italic; font-size: 58px; color: var(--champagne);
  display: block; margin-bottom: 16px;
}
.step h3 { font-size: 28px; margin-bottom: 12px; }
.step p { color: var(--ink-soft); max-width: 280px; margin: 0 auto; }

/* ---------- Brand statement ---------- */
.statement { text-align: center; padding: 150px 24px; }
.statement blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.3; max-width: 840px; margin: 0 auto 30px;
}
.statement p { color: var(--ink-soft); max-width: 560px; margin: 0 auto; font-size: 17px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 80px 0 46px; background: var(--bg-deep); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 60px; }
.footer__brand p { color: var(--ink-soft); font-family: var(--serif); font-style: italic; font-size: 18px; margin-top: 12px; max-width: 260px; }
.footer h4 { font-family: var(--sans); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--taupe); margin-bottom: 20px; font-weight: 600; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 12px; }
.footer li a { color: var(--ink-soft); font-size: 14px; transition: color 0.3s; }
.footer li a:hover { color: var(--accent); }
.footer__base { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid var(--line); color: var(--taupe); font-size: 12.5px; letter-spacing: 0.06em; }
.footer__base img { height: 26px; opacity: 0.8; }

/* ---------- Gallery page ---------- */
.filters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 64px; }
.filter {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  padding: 10px 22px; border: 1px solid var(--line); border-radius: 100px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: all 0.35s var(--ease);
}
.filter:hover { border-color: var(--accent); color: var(--accent); }
.filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ---------- Template detail ---------- */
.detail { display: grid; grid-template-columns: 1fr 420px; gap: 80px; align-items: start; padding: 90px 0 120px; }
.phone {
  width: 340px; margin: 0 auto;
  border: 10px solid #241814;
  border-radius: 46px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 40px 90px -30px rgba(59, 36, 32, 0.35);
  position: relative;
}
.phone::before {
  content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 22px; background: #241814; border-radius: 12px; z-index: 5;
}
.phone__screen { height: 640px; overflow-y: auto; scrollbar-width: none; }
.phone__screen::-webkit-scrollbar { display: none; }
.detail__price { font-family: var(--serif); font-size: 40px; color: var(--accent); margin: 26px 0 34px; }
.detail__price small { font-family: var(--sans); font-size: 12px; color: var(--taupe); letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 8px; }
.detail__actions { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.detail__note { font-size: 13px; color: var(--taupe); margin-top: 20px; font-style: italic; font-family: var(--serif); font-size: 15px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 30px; }
.field label { display: block; font-family: var(--serif); font-size: 21px; margin-bottom: 10px; }
.field label .req { color: var(--accent); }
.input, .textarea, select.input {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 22px; color: var(--ink);
  padding: 10px 2px 12px;
  transition: border-color 0.3s;
  border-radius: 0;
}
.input::placeholder, .textarea::placeholder { color: #C4B2A4; font-style: italic; font-size: 19px; }
.input:focus, .textarea:focus, select.input:focus { outline: none; border-bottom-color: var(--accent); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.input--file { font-family: var(--sans); font-size: 13px; padding: 14px 0; }
.field .hint { font-size: 12.5px; color: var(--taupe); margin-top: 8px; }

/* ---------- Create flow ---------- */
.create { display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 90px; padding: 70px 0 130px; align-items: start; }
.create__preview { position: sticky; top: 110px; }

/* ---------- Interactive builder (one question at a time) ---------- */
.builder { padding: 34px 0 90px; }
.builder__grid { max-width: 660px; margin: 0 auto; }
.builder__panel { text-align: center; }
.builder__back-crumb {
  display: inline-block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--taupe); margin-bottom: 26px;
}
.builder__back-crumb:hover { color: var(--accent); }
.builder__phone-wrap { position: relative; display: inline-block; }
/* Slightly smaller phone than the old create page — leaves room for the question + CTA. */
.phone--builder { width: min(258px, 68vw); }
.phone--builder .phone__screen { height: min(470px, 56svh); }
.builder__step-note { display: block; margin-top: 10px; }

/* One question at a time */
.bstep { border: 0; padding: 0; margin: 34px 0 0; text-align: center; }
.bstep[hidden] { display: none; }
.bstep--in { animation: bstepIn 0.45s var(--ease); }
@keyframes bstepIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.bstep__no { display: block; font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 14px; }
.bstep__q { font-family: var(--serif); font-size: clamp(24px, 4.4vw, 32px); letter-spacing: 0.02em; margin-bottom: 24px; }
.bstep__opt { font-size: 0.55em; color: var(--taupe); font-style: italic; letter-spacing: 0.04em; text-transform: none; }
.bstep .input, .bstep .textarea, .bstep .input--file { text-align: center; }
.bstep .input--area { text-align: left; }
.bstep__err { color: var(--accent); font-size: 13.5px; margin-top: 14px; font-family: var(--serif); font-style: italic; }
.builder__nav { display: flex; justify-content: center; gap: 16px; margin-top: 34px; }
.builder__nav .btn--primary { min-width: 168px; }

/* Upload box */
.uploadbox {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border: 1.5px dashed var(--line); border-radius: 14px; padding: 30px 22px;
  cursor: pointer; transition: border-color 0.3s, background 0.3s; margin: 0 auto; max-width: 320px;
}
.uploadbox:hover { border-color: var(--gold); background: rgba(201, 162, 94, 0.05); }
.uploadbox__icon { width: 42px; height: 42px; color: var(--gold); }
.uploadbox__icon svg { width: 100%; height: 100%; }
.uploadbox__label { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.uploadbox__file { font-size: 12.5px; color: #3E6B40; }

@media (max-width: 720px) {
  .builder { padding: 20px 0 70px; }
  .phone--builder { width: min(232px, 62vw); }
  .phone--builder .phone__screen { height: min(420px, 50svh); }
  .builder__nav { position: sticky; bottom: 12px; margin-top: 26px; }
  .builder__nav .btn--primary { box-shadow: 0 14px 34px -12px rgba(20, 11, 6, 0.45); }
}
.stepbar { display: flex; gap: 26px; margin-bottom: 54px; }
.stepbar__item { display: flex; flex-direction: column; gap: 6px; opacity: 0.38; transition: opacity 0.4s; }
.stepbar__item.active, .stepbar__item.done { opacity: 1; }
.stepbar__step { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.stepbar__label { font-family: var(--serif); font-size: 18px; }
.create__nav { display: flex; justify-content: space-between; margin-top: 54px; gap: 16px; }

/* ---------- Mobile preview switch ---------- */
.preview-toggle { display: none; }

/* ---------- Preview page ---------- */
.preview-page { padding: 80px 0 120px; text-align: center; }
.preview-page .phone { margin: 46px auto; }
.preview-meta { display: flex; justify-content: center; gap: 54px; margin: 30px 0 40px; flex-wrap: wrap; }
.preview-meta div span { display: block; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--taupe); margin-bottom: 6px; }
.preview-meta div strong { font-family: var(--serif); font-size: 22px; font-weight: 500; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; border: 1px solid var(--line); color: var(--ink-soft);
}
.badge--published, .badge--paid, .badge--active { background: #EDF4EC; border-color: #C8DCC6; color: #3E6B40; }
.badge--draft { background: var(--bg-deep); }
.badge--payment_pending, .badge--pending { background: #FBF3E2; border-color: #EBDDBE; color: #8A6A2B; }
.badge--archived, .badge--cancelled { background: #F4E9E7; border-color: #E4CFCB; color: #8B4A42; }

/* ---------- Admin ---------- */
.admin { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.admin__side { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; min-height: 100vh; border-right: 1px solid var(--line); padding: 30px 22px; background: var(--bg-deep); }
.admin__side .nav__brand { display: inline-flex; align-items: center; width: max-content; max-width: 100%; margin-bottom: 38px; }
.admin__side .nav__brand img { display: block; max-width: 100%; height: auto; }
.admin__navigation { min-width: 0; }
.admin__nav { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; }
.admin__nav a {
  display: flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 6px;
  font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; transition: color 0.2s, background 0.2s;
}
.admin__nav a:hover { color: var(--accent); background: rgba(143, 16, 24, 0.05); }
.admin__nav a[aria-current] { background: var(--accent); color: var(--bg); }
.admin__nav-label { margin: 20px 14px 4px; color: var(--taupe); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.admin__nav-signout { margin-top: auto; padding-top: 22px; }
.admin__main { min-width: 0; padding: 48px clamp(24px, 4.4vw, 60px); }
.admin__table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.admin__table-wrap .table { min-width: 700px; }
.admin__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 36px; gap: 20px; flex-wrap: wrap; }
.admin__head h1 { font-size: clamp(30px, 4vw, 40px); }
.admin__greet { font-family: var(--serif); font-size: clamp(32px, 5vw, 44px); font-style: italic; margin-bottom: 8px; }
.admin__date { color: var(--taupe); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 40px 0 60px; }
.stat { border: 1px solid var(--line); padding: 28px 26px; background: var(--bg); }
.stat__num { font-family: var(--serif); font-size: 46px; color: var(--accent); line-height: 1; margin-bottom: 10px; }
.stat__label { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe); font-weight: 600; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--taupe); font-weight: 700; padding: 0 16px 14px 0; border-bottom: 1px solid var(--line);
}
.table td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:hover td { background: rgba(143, 16, 24, 0.02); }
.table .serif { font-size: 18px; }
.table-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.link-btn {
  background: none; border: 0; cursor: pointer; font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); padding: 4px 2px;
  border-bottom: 1px solid transparent;
}
.link-btn:hover { border-color: var(--accent); }
.link-btn--danger { color: #A33A32; }
.link-btn--muted { color: var(--taupe); }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.login__card { width: 420px; max-width: 100%; border: 1px solid var(--line); padding: 60px 52px; background: var(--bg); text-align: center; }
.login__card img { height: 54px; margin: 0 auto 26px; }
.login__card h1 { font-size: 30px; margin-bottom: 8px; }
.login__card .sub { color: var(--taupe); font-size: 14px; margin-bottom: 40px; font-family: var(--serif); font-style: italic; font-size: 16px; }
.login form { text-align: left; }
.login form .btn { width: 100%; margin-top: 12px; }
.form-error {
  background: #F9ECEA; border: 1px solid #E7C8C3; color: #8B3229;
  font-size: 13.5px; padding: 12px 16px; margin-bottom: 22px; border-radius: 3px;
}

/* ---------- QR card ---------- */
.qr-card {
  width: 340px; margin: 0 auto; background: var(--bg); border: 1px solid var(--line);
  padding: 40px 34px 34px; text-align: center; position: relative;
}
.qr-card::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--champagne); pointer-events: none; }
.qr-card img.logo { height: 40px; margin: 0 auto 18px; }
.qr-card .qr-line { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.35; margin-bottom: 24px; }
.qr-card .qr-img { width: 200px; height: 200px; margin: 0 auto 20px; }
.qr-card .qr-url { font-size: 12px; letter-spacing: 0.14em; color: var(--taupe); }

/* ---------- Empty / error states ---------- */
.empty { text-align: center; padding: 110px 24px; }
.empty h1 { font-size: clamp(34px, 5vw, 54px); font-style: italic; margin-bottom: 16px; }
.empty p { color: var(--ink-soft); margin-bottom: 36px; font-size: 17px; }
.empty .dove { width: 90px; margin: 0 auto 30px; opacity: 0.85; animation: float 7s ease-in-out infinite; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bg); font-size: 14px; letter-spacing: 0.04em;
  padding: 14px 26px; border-radius: 3px; opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); z-index: 200;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .detail { grid-template-columns: 1fr; gap: 60px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .create { grid-template-columns: 1fr; gap: 60px; }
  .create__preview { position: static; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .admin { grid-template-columns: minmax(0, 1fr); }
  .admin__side { position: static; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); padding: 20px clamp(18px, 4vw, 30px); }
  .admin__side .nav__brand { margin-bottom: 14px; }
  .admin__nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .admin__nav-label { flex: 0 0 100%; margin: 14px 12px 4px; }
  .admin__nav-signout { margin: 0 0 0 auto; padding: 0; }
  .admin__main { padding: 32px clamp(18px, 4vw, 32px); }
  .admin__form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 22px !important; }
  .admin__detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
}
@media (max-width: 720px) {
  .wrap, .wrap-narrow { padding: 0 22px; }
  .admin__main { padding: 26px 18px; }
  .login__card { padding: 42px 24px; }
  .admin__head { align-items: flex-start; margin-bottom: 28px; }
  .admin__head h1 { font-size: clamp(28px, 8vw, 36px); }
  .admin__greet { font-size: clamp(30px, 8vw, 38px); }
  .stats { gap: 12px; margin: 28px 0 40px; }
  .stat { padding: 20px 16px; }
  .stat__num { font-size: 36px; }
  .stat__label { font-size: 9px; letter-spacing: 0.16em; }
  .admin__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin__nav li { min-width: 0; }
  .admin__nav a { min-height: 44px; padding: 9px 10px; font-size: 10px; letter-spacing: 0.06em; }
  .admin__nav-label { grid-column: 1 / -1; margin: 12px 10px 3px; }
  .admin__nav-signout { grid-column: 1 / -1; margin: 0; padding: 2px 0 0; }
  .admin__form-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  .admin__detail-stats { gap: 10px !important; }
  .admin__detail-stats .stat { padding: 16px 12px; }
  .admin__table-wrap { margin-right: -2px; }

  .section { padding: 84px 0; }
  .occasions, .steps { grid-template-columns: 1fr; }
  /* collection grid stays 2-up on mobile — scanning beats scrolling */
  .cards--grid { gap: 18px 12px; }
  .cards--grid .tcard__meta { padding: 11px 12px 0; }
  .cards--grid .tcard__title { font-size: 14px; letter-spacing: 0.1em; }
  .cards--grid .tcard__desc { margin: 4px 12px 0; font-size: 11px; }
  .cards--grid .tcard__occ-label { margin: 4px 12px 0; }
  .cards--grid .tcard__actions { padding: 10px 12px 12px; }
  /* small phones: static art (motif + name) beats a 3x live iframe — lighter,
     legible, no accidental taps. Quick-preview still gives the live look. */
  @media (max-width: 560px) {
    .cards--grid .tcard__frame:not(.tcard__frame--custom) .tcard__live { display: none; }
  }
  .steps { gap: 48px; }
  .nav__links {
    display: none; position: absolute; top: 78px; left: 0; right: 0;
    flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 26px 22px 34px; gap: 22px;
  }
  .nav__links.open { display: flex; }
  .nav__burger { display: block; }
  .hero { min-height: calc(100svh - 78px); }
  .phone { width: min(340px, 92vw); }
  .phone__screen { height: min(600px, 72vh); }
  .footer__base { flex-direction: column; gap: 14px; text-align: center; }
  .stepbar { flex-wrap: wrap; gap: 18px; }
  .preview-toggle { display: inline-flex; margin-bottom: 24px; }
  .create__preview { display: none; }
  .create__preview.force-show { display: block; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   PREMIUM EDITORIAL LAYER (2026-09 redesign)
   Deep brown / ivory / gold over the existing ivory system.
   Dark surfaces (nav, hero, footer) carry the brand's
   stationery register; ivory sections remain untouched below.
   ============================================================ */
:root {
  --dark:      #241610;
  --dark-soft: #2E1D14;
  --dark-line: rgba(233, 220, 195, 0.16);
  --gold:      #C9A25E;
  --gold-soft: #E9DCC3;
  --ivory:     #F5E9D5;
}

/* ---------- Dark nav ---------- */
.nav--dark {
  background: color-mix(in srgb, var(--dark) 90%, transparent);
  border-bottom: 1px solid var(--dark-line);
}
.nav--dark .nav__links a { color: rgba(245, 233, 213, 0.72); }
.nav--dark .nav__links a:hover, .nav--dark .nav__links a[aria-current] { color: var(--gold); }
.nav--dark .nav__burger span { background: var(--ivory); }
.nav--dark.is-stuck { box-shadow: 0 12px 34px -18px rgba(0, 0, 0, 0.65); }
.nav__actions { display: flex; align-items: center; gap: 18px; }
.nav__cta { padding: 12px 24px; font-size: 11px; }
.nav--dark .btn--primary { background: var(--gold); border-color: var(--gold); color: var(--dark); }
.nav--dark .btn--primary:hover { background: var(--ivory); border-color: var(--ivory); color: var(--dark); }

/* ---------- Dark hero ---------- */
.hero--dark {
  position: relative;
  min-height: calc(100vh - 78px);
  display: block;
  text-align: left;
  padding: 90px 0 110px;
  background:
    radial-gradient(1100px 620px at 82% 8%, rgba(201, 162, 94, 0.10), transparent 60%),
    radial-gradient(900px 560px at 8% 88%, rgba(143, 16, 24, 0.10), transparent 55%),
    var(--dark);
  overflow: hidden;
}
.hero--dark .wrap {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center; gap: 64px;
}
.hero--dark::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 94, 0.55), transparent);
}
.hero--dark .hero__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 26px;
}
.hero--dark h1 {
  font-size: clamp(46px, 6.4vw, 84px);
  line-height: 1.04; letter-spacing: 0.005em;
  color: var(--ivory); font-weight: 500;
  margin-bottom: 26px;
}
.hero--dark h1 em { font-style: italic; color: var(--gold); }
.hero--dark .hero__lede { max-width: 480px; color: rgba(245, 233, 213, 0.66); font-size: 17.5px; line-height: 1.7; margin-bottom: 42px; }
.hero--dark .hero__ctas { justify-content: flex-start; gap: 16px; flex-wrap: wrap; }
.hero--dark .btn--primary { background: var(--gold); border-color: var(--gold); color: var(--dark); padding: 17px 30px; }
.hero--dark .btn--primary:hover { background: var(--ivory); border-color: var(--ivory); color: var(--dark); }
.hero--dark .btn--outline { border-color: rgba(245, 233, 213, 0.35); color: var(--ivory); padding: 17px 30px; }
.hero--dark .btn--outline:hover { border-color: var(--ivory); background: rgba(245, 233, 213, 0.06); color: var(--ivory); }
.hero--dark .hero__micro { display: flex; gap: 28px; margin-top: 46px; color: rgba(245, 233, 213, 0.45); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.hero--dark .hero__micro span { display: flex; align-items: center; gap: 9px; }
.hero--dark .hero__micro i { font-style: normal; color: var(--gold); }

/* Hero device mockup: a floating phone holding a live template render. */
.hero__device { position: relative; display: flex; justify-content: center; }
.hero__device .phone { width: 320px; border-width: 9px; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(233, 220, 195, 0.14); }
.hero__device .phone__screen { height: 600px; background: var(--bg); }
.hero__device::before, .hero__device::after {
  content: ''; position: absolute; border: 1px solid rgba(201, 162, 94, 0.30); border-radius: 50%;
}
.hero__device::before { width: 420px; height: 420px; top: -60px; right: -40px; }
.hero__device::after { width: 260px; height: 260px; bottom: -40px; left: -30px; border-color: rgba(233, 220, 195, 0.16); }

/* ---------- Dark sections ---------- */
.section--dark { background: var(--dark); color: var(--ivory); }
.section--dark .section__title { color: var(--ivory); }
.section--dark .section__sub { color: rgba(245, 233, 213, 0.6); }
.section--dark .kicker { color: var(--gold); }

/* ---------- Occasion cards ---------- */
.occ-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.occ-card {
  position: relative; overflow: hidden; border-radius: 14px;
  aspect-ratio: 4 / 3; display: flex; align-items: flex-end;
  background: var(--dark-soft);
  border: 1px solid var(--dark-line);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s;
}
.occ-card:hover { transform: translateY(-6px); border-color: rgba(201, 162, 94, 0.5); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.occ-card__art {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transition: transform 1.4s var(--ease); opacity: 0.95;
}
.occ-card:hover .occ-card__art { transform: scale(1.05); }
.occ-card__art svg { width: 44%; max-width: 130px; height: auto; }
.occ-card::after {
  content: ''; position: absolute; inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(20, 11, 6, 0.88));
}
.occ-card__label { position: relative; z-index: 2; padding: 24px 26px; width: 100%; }
.occ-card__label h3 { font-size: 26px; color: var(--ivory); margin-bottom: 4px; }
.occ-card__label p { font-size: 13px; color: rgba(245, 233, 213, 0.62); font-family: var(--serif); font-style: italic; }
.occ-card__label .occ-card__count { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); display: block; margin-top: 8px; font-family: var(--sans); font-style: normal; font-weight: 600; }

/* ---------- Trending cards (dark, exactly 2 side by side) ---------- */
.trend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.trend-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 14px;
  background: var(--dark-soft); border: 1px solid var(--dark-line);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s;
}
.trend-card:hover { transform: translateY(-6px); border-color: rgba(201, 162, 94, 0.5); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.trend-card__frame {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10;
}
.trend-card__frame .tcard__live { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease 0.15s; }
.trend-card__frame .tcard__live.is-ready { opacity: 1; }
.trend-card__flame {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-size: 15px; line-height: 1; padding: 7px 10px; border-radius: 999px;
  background: rgba(20, 11, 6, 0.72); backdrop-filter: blur(4px);
  border: 1px solid rgba(201, 162, 94, 0.35);
}
.trend-card__meta { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px 20px; }
.trend-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.trend-card__name { font-family: var(--serif); font-size: 22px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory); }
.trend-card__desc {
  font-size: 13.5px; line-height: 1.5; color: rgba(245, 233, 213, 0.62);
  font-family: var(--serif); font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.trend-card__occ { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-top: 4px; }
@media (max-width: 720px) {
  .trend-grid { gap: 14px; }
  .trend-card__name { font-size: 17px; letter-spacing: 0.1em; }
  .trend-card__meta { padding: 12px 14px 14px; }
  .trend-card__desc { font-size: 12px; -webkit-line-clamp: 2; }
  .trend-card__flame { font-size: 12px; padding: 5px 8px; top: 10px; left: 10px; }
}

/* ---------- Featured template cards (light, editorial) ---------- */
.tcard { position: relative; }
.tcard__badges { position: absolute; top: 12px; left: 12px; z-index: 5; display: flex; gap: 6px; }
.pill {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  background: var(--dark); color: var(--ivory);
}
.pill--free { background: #3E6B40; color: #F0F7EC; }
.pill--gold { background: var(--gold); color: var(--dark); }
.tcard__actions { display: flex; gap: 14px; align-items: center; padding: 12px 4px 0; }
.tcard__create {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--dark); color: var(--ivory); padding: 10px 20px; border-radius: 100px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.tcard:hover .tcard__create { background: var(--accent); color: #FBF4ED; }
.tcard__preview-link { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid transparent; }
.tcard__preview-link:hover { border-color: var(--ink-soft); }
.tcard__price--free { color: #3E6B40; font-weight: 700; letter-spacing: 0.16em; font-size: 12.5px; }

/* Quick-preview affordance on the card frame */
.tcard__quick {
  position: absolute; right: 10px; bottom: 10px; z-index: 6;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(36, 22, 16, 0.18); background: rgba(251, 244, 237, 0.92);
  color: var(--ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s;
}
.tcard__quick svg { width: 17px; height: 17px; }
.tcard__frame:hover .tcard__quick, .tcard__frame:focus-within .tcard__quick { opacity: 1; transform: translateY(0); }
.tcard__quick:hover { background: var(--dark); color: var(--ivory); }
@media (hover: none) { .tcard__quick { opacity: 1; transform: none; } }

/* ---------- Quick preview modal ---------- */
.qpm { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.qpm[hidden] { display: none; }
.qpm__backdrop { position: absolute; inset: 0; background: rgba(20, 11, 6, 0.78); backdrop-filter: blur(3px); }
.qpm__panel {
  position: relative; z-index: 2; width: min(420px, 100%); max-height: min(92svh, 860px);
  background: var(--bg); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}
.qpm__close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(251, 244, 237, 0.92); color: var(--ink); font-size: 20px; line-height: 1;
}
.qpm__frame { position: relative; flex: 1; min-height: 220px; aspect-ratio: 9 / 16; overflow: hidden; background: var(--bg-deep); }
.qpm__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qpm__poster--placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.qpm__poster-title { font-family: var(--serif); font-size: 30px; letter-spacing: 0.14em; text-transform: uppercase; }
.qpm__poster-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe); }
.qpm__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 18px 20px 20px; }
.qpm__meta h3 { font-family: var(--serif); font-size: 24px; letter-spacing: 0.1em; margin-bottom: 4px; }
.qpm__meta p { font-size: 13px; color: var(--ink-soft); font-family: var(--serif); font-style: italic; line-height: 1.5; }
.qpm__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.qpm__price { font-size: 13px; letter-spacing: 0.08em; color: var(--ink-soft); }
.qpm__price--free { color: #3E6B40; font-weight: 700; letter-spacing: 0.14em; }
.qpm__detail { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid transparent; }
.qpm__detail:hover { border-color: var(--ink-soft); }
.qpm .btn--primary { padding: 12px 22px; font-size: 12px; white-space: nowrap; }

/* ---------- Search + filter bar ---------- */
.gallery-head { text-align: center; margin-bottom: 40px; }
.searchbar { position: relative; max-width: 460px; margin: 34px auto 0; }
.searchbar input {
  width: 100%; padding: 15px 22px 15px 48px; border-radius: 100px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px;
}
.searchbar input:focus { outline: none; border-color: var(--taupe); }
.searchbar svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--taupe); }
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 26px auto 14px; }
.filterbar .fsep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; }
.mobile-filters { display: none; }
.grid-count { text-align: center; color: var(--taupe); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; margin: 6px 0 40px; }
.grid-empty { text-align: center; padding: 70px 20px; }
.grid-empty h3 { font-size: 30px; margin-bottom: 12px; }
.grid-empty p { color: var(--ink-soft); margin-bottom: 28px; }
.grid-empty .suggestions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.grid-empty .suggestions a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 18px; border: 1px solid var(--line); border-radius: 100px; color: var(--ink-soft); }
.grid-empty .suggestions a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Occasion landing hero ---------- */
.occ-land { background: var(--dark); color: var(--ivory); padding: 84px 0 78px; position: relative; }
.occ-land::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 162, 94, 0.5), transparent); }
.occ-land h1 { font-size: clamp(38px, 5.4vw, 64px); color: var(--ivory); }
.occ-land h1 em { font-style: italic; color: var(--gold); }
.occ-land p { color: rgba(245, 233, 213, 0.62); max-width: 560px; font-size: 17px; margin-top: 16px; }
.occ-land .kicker { color: var(--gold); }
.occ-land .crumbs { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245, 233, 213, 0.45); margin-bottom: 30px; display: inline-block; }
.occ-land .crumbs a { color: var(--gold); }
.occ-land .crumbs a:hover { color: var(--ivory); }

/* ---------- Final CTA (cream) ---------- */
.final-cta { background: var(--bg-deep); text-align: center; padding: 130px 24px; position: relative; }
.final-cta::before, .final-cta::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 1px; height: 60px; background: linear-gradient(rgba(201, 162, 94, 0.6), transparent);
}
.final-cta::before { top: 0; }
.final-cta h2 { font-size: clamp(32px, 4.6vw, 52px); margin-bottom: 16px; }
.final-cta p { color: var(--ink-soft); font-family: var(--serif); font-style: italic; font-size: 20px; margin-bottom: 44px; }

/* ---------- Dark footer ---------- */
.footer--dark { background: var(--dark); border-top: 1px solid var(--dark-line); }
.footer--dark .footer__brand p { color: rgba(245, 233, 213, 0.55); }
.footer--dark h4 { color: var(--gold); }
.footer--dark li a { color: rgba(245, 233, 213, 0.66); }
.footer--dark li a:hover { color: var(--gold); }
.footer--dark .footer__base { color: rgba(245, 233, 213, 0.4); border-color: var(--dark-line); }
.footer__top { display: grid; grid-template-columns: 1.2fr 2fr; gap: 60px; margin-bottom: 60px; }
.footer--dark .footer__base { padding-top: 28px; }

/* ---------- Legal / info pages ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 90px 0 130px; }
.legal h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 12px; }
.legal .legal__updated { color: var(--taupe); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 54px; display: block; }
.legal h3 { font-size: 24px; margin: 44px 0 12px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 12px; }
.legal ul { padding-left: 22px; margin-bottom: 18px; }
.legal a { color: var(--accent); border-bottom: 1px solid rgba(143, 16, 24, 0.3); }

/* ---------- Sticky mobile create bar (template detail) ---------- */
.sticky-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: rgba(36, 22, 16, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--dark-line);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 0.4s var(--ease);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sticky-cta__info strong { font-family: var(--serif); font-size: 19px; color: var(--ivory); display: block; letter-spacing: 0.06em; }
.sticky-cta__info span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.sticky-cta .btn--primary { background: var(--gold); border-color: var(--gold); color: var(--dark); padding: 13px 26px; }

/* ---------- Responsive (editorial layer) ---------- */
@media (max-width: 1020px) {
  .hero--dark .wrap { grid-template-columns: 1fr; text-align: center; }
  .hero--dark { padding: 70px 0 90px; }
  .hero--dark .hero__lede { margin-left: auto; margin-right: auto; }
  .hero--dark .hero__ctas, .hero--dark .hero__micro { justify-content: center; }
  .occ-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .nav__actions .nav__cta { display: none; }
  .nav--dark.menu-open .nav__links { display: flex; background: var(--dark); }
  .occ-grid { grid-template-columns: 1fr; gap: 18px; }
  .occ-card { aspect-ratio: 16 / 10; }
  .hero--dark .hero__micro { gap: 16px; font-size: 10.5px; }
  /* owner ask: the hero phone mockup pushes everything down on phones — off it goes */
  .hero__device { display: none; }
  .section--dark, .occ-land { padding-top: 70px; padding-bottom: 70px; }
  .final-cta { padding: 90px 24px; }
  .cards { gap: 30px; }
  .cards--6 { grid-template-columns: 1fr; }
  .filterbar { display: none; }
  .mobile-filters {
    display: flex; gap: 10px; justify-content: center; align-items: center;
    margin: 22px auto 14px; max-width: 560px; padding: 0 22px;
  }
  .mobile-filters select {
    flex: 1; padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px;
    background: #fff; color: var(--ink); font-family: var(--sans); font-size: 14px;
  }
  .sticky-cta { display: block; }
  .footer--dark { padding-bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .occ-card, .occ-card__art, .tcard { transition: none !important; transform: none !important; }
}

/* ---------- Marble studio sign-in ---------- */
.admin-login { min-height:100svh; background:#f1f1ee; }
.admin-login__layout { min-height:100svh; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr); }
.admin-login__story { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; min-height:100svh; padding:clamp(28px,5vw,70px); color:#453c35; background-color:#ededeb; background-image:linear-gradient(135deg,rgba(245,245,242,.64),rgba(237,237,234,.82)),url('/brand/admin-marble.svg'); background-position:center; background-size:cover; }
.admin-login__story::after { content:""; position:absolute; z-index:-1; right:-90px; bottom:-180px; width:430px; height:430px; border:1px solid rgba(164,137,89,.24); border-radius:50%; box-shadow:0 0 0 24px rgba(164,137,89,.035),0 0 0 54px rgba(164,137,89,.025),0 0 0 84px rgba(164,137,89,.02); }
.admin-login__brand { display:inline-flex; width:max-content; }
.admin-login__brand img { width:138px; height:auto; }
.admin-login__story .admin__eyebrow { margin:36px 0 auto; }
.admin-login__story-copy { max-width:590px; margin:auto 0; padding:46px 0 70px; }
.admin-login__story-copy h1 { margin:23px 0 15px; font-size:clamp(48px,6.5vw,82px); letter-spacing:-.025em; color:#42352f; }
.admin-login__story-copy p { max-width:42ch; color:#716b64; font:400 16px/1.65 var(--sans); }
.admin-login__seal { display:grid; place-items:center; width:54px; height:54px; border:1px solid rgba(144,114,69,.6); border-radius:50%; color:#8a2e35; font:italic 31px/1 var(--serif); box-shadow:0 0 0 5px rgba(255,255,255,.25); }
.admin-login__story-foot { display:flex; align-items:center; justify-content:space-between; color:#9d8a6c; font:600 9px/1 var(--sans); letter-spacing:.19em; }
.admin-login__story-foot span:last-child { color:#8a2e35; font-size:18px; }
.admin-login__form { display:grid; place-items:center; min-height:100svh; padding:clamp(28px,6vw,80px); background:rgba(250,250,247,.96); }
.admin-login__form-inner { width:min(100%,390px); }
.admin-login__form h2 { margin:0; color:#3f342e; font-size:clamp(38px,4vw,48px); }
.admin-login__lede { margin:8px 0 30px; color:#81786d; font-size:13px; }
.admin-login__fields { display:grid; gap:18px; }
.admin-login__fields .field { margin:0; }
.admin-login__fields .field label { color:#5f5951; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.admin-login__fields .input { min-height:52px; border-radius:11px; background:#fff; font-size:16px !important; }
.admin-login__fields .btn { width:100%; min-height:52px; margin-top:4px; border-radius:12px; background:linear-gradient(110deg,#77252d,#963d43); border-color:#8a3038; font-size:11px; letter-spacing:.13em; }
.admin-login__fields .btn span { font-size:16px; }
.admin-login__back { display:inline-block; margin-top:27px; color:#887c6b; font:600 10px/1.3 var(--sans); letter-spacing:.08em; }
.admin-login__back:hover { color:#822a32; }
@media(max-width:760px){.admin-login__layout{grid-template-columns:minmax(0,1fr)}.admin-login__story{min-height:124px;height:124px;padding:16px 20px;flex-direction:row;align-items:center}.admin-login__story .admin__eyebrow,.admin-login__story-copy{display:none}.admin-login__story-foot{gap:8px}.admin-login__form{min-height:calc(100svh - 124px);padding:30px 22px 48px;place-items:start center}.admin-login__form-inner{margin:0}.admin-login__form h2{font-size:38px}.admin-login__lede{margin-bottom:24px}}

/* ---------- Admin console: Carrara / burgundy studio ---------- */
.admin { grid-template-columns: 264px minmax(0, 1fr); background:#f5f5f2; min-height:100svh; }
.admin__side { position:sticky; top:0; align-self:start; min-height:100svh; height:100svh; display:flex; flex-direction:column; padding:25px 18px 16px; border-right:1px solid rgba(78,88,91,.14); background-color:#f2f2ef; background-image:linear-gradient(160deg,rgba(250,250,248,.88),rgba(239,239,235,.93)),url('/brand/admin-marble.svg'); background-size:cover,cover; background-position:center; }
.admin__brand-row { padding:2px 13px 25px; border-bottom:1px solid rgba(87,97,100,.15); }
.admin__side .nav__brand { margin:0; width:max-content; max-width:100%; }
.admin__side .nav__brand img { width:120px; height:auto; }
.admin__brand-note { display:block; margin-top:9px; color:#9b8c75; font:600 9px/1 var(--sans); letter-spacing:.2em; }
.admin__navigation { min-width:0; padding:19px 0 12px; flex:1; }
.admin__nav-caption { margin:0 13px 9px; color:#9b8c75; font:600 9px/1 var(--sans); letter-spacing:.19em; text-transform:uppercase; }
.admin__nav { list-style:none; display:flex; flex-direction:column; gap:4px; margin:0; padding:0; }
.admin__nav-label { margin:18px 13px 5px; color:#a19480; font:600 9px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; }
.admin__nav a, .admin__signout, .admin__more-panel a { display:flex; align-items:center; gap:12px; min-height:45px; padding:10px 13px; border:1px solid transparent; border-radius:11px; color:#5e6262; text-decoration:none; font:600 12px/1.2 var(--sans); letter-spacing:.025em; transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; }
.admin__icon { width:19px; height:19px; flex:0 0 19px; }
.admin__nav a:hover, .admin__signout:hover, .admin__more-panel a:hover { color:#7e1720; background:rgba(255,255,255,.72); border-color:rgba(177,157,120,.28); }
.admin__nav a[aria-current] { color:#fffaf3; background:linear-gradient(110deg,#76242b,#913b40); border-color:rgba(255,255,255,.2); box-shadow:0 7px 18px rgba(85,35,38,.16); }
.admin__side-bottom { margin-top:auto; padding-top:12px; border-top:1px solid rgba(87,97,100,.15); display:flex; align-items:center; justify-content:space-between; gap:6px; }
.admin__side-foot { display:flex; align-items:center; gap:10px; min-width:0; color:#4d5554; font:600 11px/1.25 var(--sans); }
.admin__side-foot b, .admin__side-foot small { display:block; }
.admin__side-foot small { margin-top:4px; color:#a19480; font:600 8px/1 var(--sans); letter-spacing:.16em; }
.admin__status-dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#6f947b; box-shadow:0 0 0 4px rgba(111,148,123,.12); }
.admin__signout { min-height:38px; gap:7px; padding:8px 9px; font-size:10px; }
.admin__main { min-width:0; padding:clamp(28px,4.2vw,58px) clamp(20px,5vw,72px) 64px; background-color:#f7f7f4; background-image:linear-gradient(105deg,rgba(248,248,245,.84),rgba(248,248,245,.94)),url('/brand/admin-marble.svg'); background-size:cover,cover; background-position:center; }
.admin__mobile-nav { display:none; }
.admin__welcome { min-height:190px; position:relative; display:flex; align-items:center; justify-content:space-between; gap:22px; overflow:hidden; isolation:isolate; padding:32px clamp(24px,4vw,48px); border:1px solid rgba(142,126,98,.24); border-radius:22px; background:linear-gradient(105deg,rgba(255,255,253,.97),rgba(245,245,241,.9)),url('/brand/admin-marble.svg') center 38%/cover; box-shadow:0 16px 42px rgba(60,54,45,.055); }
.admin__welcome::after { content:""; position:absolute; z-index:-1; right:-44px; top:-85px; width:310px; height:310px; border:1px solid rgba(180,152,101,.18); border-radius:50%; box-shadow:0 0 0 24px rgba(180,152,101,.025),0 0 0 48px rgba(180,152,101,.02); }
.admin__welcome-copy { max-width:660px; }
.admin__eyebrow { margin-bottom:10px; color:#9b886a; font:600 9px/1.2 var(--sans); letter-spacing:.22em; text-transform:uppercase; }
.admin__welcome-copy h1 { max-width:620px; font-size:clamp(34px,4.6vw,54px); color:#382f2b; letter-spacing:-.015em; }
.admin__welcome-copy > p:last-child { margin-top:9px; color:#77736c; font-size:13px; }
.admin__welcome-mark { position:relative; z-index:1; color:rgba(136,34,42,.72); font:italic 132px/.8 var(--serif); padding-right:12px; }
.admin__welcome-mark span { position:absolute; right:-8px; top:-3px; color:#b79a66; font:400 20px/1 var(--sans); }
.admin__metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin:16px 0 30px; }
.admin__metric { min-width:0; position:relative; display:grid; grid-template-columns:1fr auto; align-items:start; gap:2px 12px; padding:17px 18px 16px; border:1px solid rgba(113,105,88,.16); border-radius:15px; background:rgba(255,255,253,.83); box-shadow:0 8px 22px rgba(60,54,45,.035); }
.admin__metric::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px; background:#b69864; border-radius:0 2px 2px 0; }
.admin__metric-label { color:#8e8577; font:600 9px/1.25 var(--sans); letter-spacing:.15em; text-transform:uppercase; }
.admin__metric strong { grid-column:2; grid-row:1/3; color:#7e2730; font:500 32px/.95 var(--serif); }
.admin__metric-note { grid-column:1; color:#aaa398; font-size:9px; line-height:1.25; }
.admin__studio, .admin__activity { margin-top:26px; }
.admin__section-head { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:14px; }
.admin__section-head .admin__eyebrow { margin-bottom:5px; }
.admin__section-head h2 { color:#403530; font-size:clamp(25px,3vw,34px); }
.admin__section-head > span { color:#a29a8d; font-size:11px; }
.admin__tool-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.admin__tool-card { position:relative; min-height:178px; display:grid; grid-template-columns:auto 1fr auto; align-content:start; align-items:start; gap:8px 13px; overflow:hidden; padding:21px 23px 19px; border:1px solid rgba(122,111,89,.18); border-radius:17px; color:#39312c; text-decoration:none; background-color:rgba(255,255,253,.88); box-shadow:0 10px 26px rgba(60,54,45,.045); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.admin__tool-card::after { content:""; position:absolute; inset:0; z-index:0; opacity:.12; pointer-events:none; background:url('/brand/admin-marble.svg') center/cover; }
.admin__tool-card:hover { transform:translateY(-2px); border-color:rgba(143,16,24,.28); box-shadow:0 16px 30px rgba(60,54,45,.08); }
.admin__tool-icon { grid-column:1; grid-row:1/3; display:grid; place-items:center; width:40px; height:40px; border-radius:13px; color:#812932; background:rgba(143,16,24,.075); }
.admin__tool-index { align-self:center; color:#a19580; font:600 9px/1.2 var(--sans); letter-spacing:.15em; }
.admin__tool-card h3, .admin__tool-card p, .admin__tool-link, .admin__tool-index, .admin__tool-icon { position:relative; z-index:1; }
.admin__tool-card h3 { grid-column:2; color:#3a312d; font-size:25px; }
.admin__tool-card p { grid-column:2/4; max-width:42ch; margin-top:1px; color:#77736c; font-size:12px; line-height:1.5; }
.admin__tool-link { grid-column:2/4; display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:10px; border-top:1px solid rgba(113,105,88,.15); color:#7d2730; font:600 10px/1.2 var(--sans); letter-spacing:.11em; text-transform:uppercase; }
.admin__tool-link b { font-size:15px; font-weight:500; }
.admin__activity { padding:21px 23px 18px; border:1px solid rgba(113,105,88,.15); border-radius:18px; background:rgba(255,255,253,.83); box-shadow:0 10px 26px rgba(60,54,45,.035); }
.admin__text-link { display:inline-flex; align-items:center; gap:8px; color:#822a32; font:600 10px/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.admin__text-link span { font-size:16px; }
.admin__head { align-items:center; }
.admin__head h1 { color:#3c312d; }
.admin__table-wrap { border-radius:12px; }
.admin__table-wrap .table { min-width:700px; }
.admin__table-wrap .table th { padding-top:8px; color:#999080; font-size:9px; letter-spacing:.15em; }
.admin__table-wrap .table td { padding:13px 12px 13px 0; }
.admin__table-wrap .table .serif { font-size:16px; }
.admin__mobile-nav .admin__icon, .admin__more-panel .admin__icon { width:19px; height:19px; }
.admin__more { position:relative; min-width:0; }
.admin__more summary { list-style:none; cursor:pointer; display:flex; height:100%; min-height:48px; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#766e63; font:600 9px/1.1 var(--sans); }
.admin__more summary::-webkit-details-marker { display:none; }
.admin__more summary .admin__icon { width:19px; height:19px; }
.admin__more[open] summary { color:#7f2630; }
.admin__more-panel { position:absolute; right:0; bottom:calc(100% + 12px); z-index:110; display:grid; gap:3px; width:min(260px,calc(100vw - 28px)); padding:8px; border:1px solid rgba(113,105,88,.2); border-radius:16px; background:rgba(255,255,253,.98); box-shadow:0 16px 42px rgba(42,35,30,.18); }
.admin__more-panel a { min-height:44px; }
@media (max-width:1120px) {
  .admin__metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin__main { padding-right:clamp(18px,3vw,34px); padding-left:clamp(18px,3vw,34px); }
}
@media (max-width:960px) {
  .admin { grid-template-columns:minmax(0,1fr); min-height:100svh; }
  .admin__side { position:relative; height:auto; min-height:0; padding:13px 20px; border-right:0; border-bottom:1px solid rgba(78,88,91,.14); }
  .admin__brand-row { padding:0; border:0; }
  .admin__side .nav__brand img { width:104px; }
  .admin__brand-note, .admin__navigation, .admin__side-bottom { display:none; }
  .admin__main { padding:22px 24px 112px; }
  .admin__mobile-nav { position:fixed; z-index:100; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); min-height:64px; padding:5px; border:1px solid rgba(130,116,91,.2); border-radius:18px; background:rgba(253,253,250,.94); box-shadow:0 10px 35px rgba(42,35,30,.17); backdrop-filter:blur(18px); }
  .admin__mobile-nav > a { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:12px; color:#776e62; text-decoration:none; font:600 9px/1.1 var(--sans); }
  .admin__mobile-nav > a[aria-current] { color:#812932; background:rgba(143,16,24,.075); }
  .admin__mobile-nav > a .admin__icon { width:19px; height:19px; }
  .admin__more summary { min-height:52px; }
  .admin__welcome { min-height:174px; }
}
@media (max-width:720px) {
  .admin__main { padding:17px 14px 108px; }
  .admin__welcome { min-height:144px; padding:20px 18px; border-radius:17px; }
  .admin__welcome-copy h1 { max-width:13ch; font-size:32px; }
  .admin__welcome-copy > p:last-child { max-width:30ch; font-size:11px; }
  .admin__welcome-mark { margin-right:-18px; font-size:94px; }
  .admin__metrics { gap:9px; margin:11px 0 24px; }
  .admin__metric { padding:14px 12px 13px; border-radius:13px; gap:4px; }
  .admin__metric strong { font-size:27px; }
  .admin__metric-label { font-size:8px; letter-spacing:.11em; }
  .admin__metric-note { display:none; }
  .admin__section-head { align-items:center; }
  .admin__section-head h2 { font-size:27px; }
  .admin__section-head > span { display:none; }
  .admin__tool-cards { grid-template-columns:1fr; gap:9px; }
  .admin__tool-card { min-height:84px; padding:12px; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:4px 10px; border-radius:14px; }
  .admin__tool-icon { grid-column:1; grid-row:1/3; align-self:center; width:34px; height:34px; border-radius:11px; }
  .admin__tool-card h3 { grid-column:2; grid-row:2; align-self:start; font-size:21px; }
  .admin__tool-index { grid-column:2; grid-row:1; font-size:8px; }
  .admin__tool-card p { display:none; }
  .admin__tool-link { grid-column:3; grid-row:1/3; display:flex; align-items:center; gap:3px; margin:0; padding:6px 7px; border:1px solid rgba(143,16,24,.16); border-radius:999px; color:#7d2730; font-size:8px; white-space:nowrap; }
  .admin__activity { padding:15px 13px 13px; border-radius:15px; }
  .admin__activity .admin__section-head { margin:0 0 11px; }
  .admin__activity .admin__section-head h2 { font-size:25px; }
  .admin__table-wrap { margin:0; overflow:visible; }
  .admin__table-wrap .table { display:block; width:100%; min-width:0; border-collapse:separate; }
  .admin__table-wrap .table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .admin__table-wrap .table tbody { display:grid; gap:9px; }
  .admin__table-wrap .table tr { display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; padding:13px 13px 11px; border:1px solid rgba(113,105,88,.15); border-radius:13px; background:rgba(255,255,253,.9); }
  .admin__table-wrap .table td { display:flex; min-width:0; flex-direction:column; align-items:flex-start; gap:4px; padding:0; border:0; background:none !important; overflow-wrap:anywhere; font-size:12px; }
  .admin__table-wrap .table td::before { content:attr(data-label); color:#a19684; font:600 8px/1.1 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
  .admin__table-wrap .table td:first-child { grid-column:1/-1; padding-bottom:7px; border-bottom:1px solid rgba(113,105,88,.12); }
  .admin__table-wrap .table td:last-child { grid-column:1/-1; display:flex; flex-direction:row; justify-content:flex-end; align-items:center; padding-top:5px; }
  .admin__table-wrap .table td:last-child::before { margin-right:auto; }
  .admin__table-wrap .table-actions { gap:6px; }
  .admin__table-wrap .badge { padding:4px 8px; font-size:8px; letter-spacing:.08em; }
  .admin__head { margin-bottom:20px; }
  .admin__head h1 { font-size:31px; }
  .admin__form-grid { grid-template-columns:minmax(0,1fr) !important; gap:0 !important; }
  .admin__detail-stats { gap:8px !important; }
  .admin__detail-stats .stat { padding:13px 10px; }
  .admin__detail-stats .serif { font-size:19px !important; }
  .admin__more-panel { right:-5px; }
  .admin__nav a, .admin__signout, .admin__more-panel a { min-height:48px; }
  .login__card { padding:38px 23px; border-radius:19px; background:rgba(255,255,253,.88); box-shadow:0 20px 60px rgba(45,38,30,.1); }
}
@media (max-width:375px) {
  .admin__mobile-nav { left:7px; right:7px; }
  .admin__mobile-nav > a, .admin__more summary { font-size:8px; }
  .admin__welcome-mark { display:none; }
  .admin__tool-card p { grid-column:1/-1; }
}