/* =========================================================
   Imani Handmade Crafts — design tokens
   Palette pulled directly from the brand logo:
     rust      #C53403  (scissors, "CRAFTS/HANDMADE")
     marigold  #FC9400  (Africa outline, flowers)
     cobalt    #127CE0  ("IMANI")
   Ink/paper + raffia (basket green) added to give the dark,
   market-table backdrop the prints need to pop against.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* --ink / --paper are the page's bg / text pairing.
     Flipped to an off-white surface with dark ink text. */
  --ink: #f7f1e4;
  --ink-soft: #eee2c8;
  --paper: #201810;
  --paper-dim: #6b5f4d;
  --rust: #c53403;
  --rust-dark: #8f2702;
  --marigold: #fc9400;
  --cobalt: #127ce0;
  --raffia: #3c5a3f;
  --raffia-light: #6f8f6a;

  /* fixed light tokens for the few spots that sit on a dark
     photo scrim or a saturated accent fill, independent of
     the page theme above (hero photo, rust/cobalt tags, ig icon) */
  --onphoto: #f7f1e4;
  --onphoto-dim: rgba(247,241,228,0.78);
  --onaccent: #fbf6ea;

  --display: 'Fraunces', Georgia, serif;
  --body: 'Work Sans', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --edge: 1px solid rgba(32,24,16,0.12);
  --max: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ overflow-x: hidden; width: 100%; }
body{
  margin:0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 600;
  margin: 0 0 0.4em;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; }
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.eyebrow{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marigold);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width: 22px; height:1px;
  background: var(--marigold);
  display:inline-block;
}
:focus-visible{
  outline: 2px solid var(--marigold);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior:auto !important; }
}

/* ---------- header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--ink);
  border-bottom: var(--edge);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ height: 66px; width:auto; }
.brand-text{
  font-family: var(--display);
  font-weight:600;
  font-size: 1.02rem;
  color: var(--paper);
  letter-spacing: 0.01em;
}
.brand-text span{ color: var(--marigold); }

nav.primary{ display:flex; align-items:center; gap: 28px; }
nav.primary a{
  text-decoration:none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--paper-dim);
  position:relative;
  padding: 4px 0;
}
nav.primary a:hover{ color: var(--paper); }
nav.primary a.active{ color: var(--paper); }
nav.primary a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background: var(--rust);
}
.nav-cta{
  border: 1px solid var(--marigold) !important;
  padding: 8px 16px !important;
  border-radius: 999px;
  color: var(--marigold) !important;
}
.nav-cta:hover{ background: var(--marigold); color: var(--paper) !important; }

.nav-toggle{
  display:none;
  background:none; border:none; color: var(--paper);
  width: 40px; height: 40px; cursor:pointer;
}
.nav-toggle svg{ width:22px; height:22px; }

@media (max-width: 780px){
  nav.primary{
    position: fixed; inset: 95px 0 0 0;
    background: var(--ink);
    z-index: 55;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 22px;
    transform: translateX(100%);
    transition: transform 0.35s ease;
  }
  nav.primary.open{ transform: translateX(0); }
  nav.primary a{ font-size: 1.1rem; }
  .nav-toggle{ display:block; }
}

/* ---------- swing tag, the signature element ----------
   A market swing-tag: notch cut left, thread hole, slight
   rotation. Used for badges, filters and reserve buttons —
   echoing the actual paper tags tied to each piece on her table. */
.tag{
  --tag-color: var(--marigold);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--tag-color);
  padding: 8px 16px 8px 22px;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  transform: rotate(-1.5deg);
  white-space: nowrap;
}
.tag::before{
  content:"";
  position:absolute;
}
a.tag{ text-decoration:none; cursor:pointer; border:none; }
.tag.tag-outline{
  background: transparent;
  color: var(--tag-color);
  border: 1.5px solid var(--tag-color);
}
.tag-rust{ --tag-color: var(--rust); color: var(--onaccent); }
.tag-cobalt{ --tag-color: var(--cobalt); color: var(--onaccent); }
.tag-raffia{ --tag-color: var(--raffia-light); color: var(--onaccent); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--body); font-weight:600; font-size:0.95rem;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid transparent;
  cursor:pointer;
}
.btn-primary{ background: var(--rust); color: var(--onaccent); }
.btn-primary:hover{ background: var(--rust-dark); }
.btn-cobalt{ background: var(--cobalt); color: var(--onaccent); }
.btn-cobalt:hover{ background: #0f66bd; }
/* btn-ghost is only ever used over the dark hero photo */
.btn-ghost{ border-color: rgba(247,241,228,0.5); color: var(--onphoto); }
.btn-ghost:hover{ border-color: var(--onphoto); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height: 86vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-bottom: var(--edge);
}
.hero-media{
  position:absolute; inset:0;
  overflow:hidden;
}
.hero-media img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 30%;
  display:block;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(23,18,14,0.15) 0%, rgba(23,18,14,0.55) 55%, rgba(23,18,14,0.96) 100%);
}
.hero-body{
  position:relative; z-index:2;
  padding: 60px 0 64px;
  width:100%;
}
.hero-body .eyebrow{ margin-bottom: 18px; }
.hero h1{
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  max-width: 14ch;
  color: var(--onphoto);
}
.hero .lede{
  max-width: 46ch;
  font-size: 1.08rem;
  color: var(--onphoto-dim);
  margin-top: 14px;
}
.hero-actions{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top: 28px;
}

/* ---------- page hero (shorter, for interior pages) ---------- */
.page-hero{
  padding: 64px 0 44px;
  border-bottom: var(--edge);
  position:relative;
  overflow:hidden;
}
.page-hero h1{ font-size: clamp(2rem, 4.2vw, 3rem); max-width: 16ch; }
.page-hero .lede{ max-width: 60ch; color: var(--paper-dim); font-size:1.05rem; margin-top:14px; }

/* ---------- next-stop teaser bar (home) ---------- */
.next-stop-bar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding: 22px 0;
  border-bottom: var(--edge);
}
.next-stop-bar p{ margin:0; color: var(--paper-dim); font-size:0.96rem; }
.next-stop-bar a{ color: var(--marigold); text-decoration:underline; }

/* ---------- section rhythm ---------- */
section{ padding: 84px 0; position:relative; }
section.tight{ padding: 56px 0; }
.section-head{ max-width: 60ch; margin-bottom: 46px; }
.section-head h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-top:10px; }
.section-head p{ color: var(--paper-dim); font-size: 1.02rem; }

hr.rule{ border:none; border-top: var(--edge); margin:0; }

/* ---------- how-it-works steps (a real 3-step sequence) ---------- */
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: step;
}
.step{
  border-top: 2px solid var(--rust);
  padding-top: 20px;
}
.step .num{
  font-family: var(--mono);
  color: var(--rust);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}
.step h3{ font-size: 1.25rem; margin: 10px 0 8px; }
.step p{ color: var(--paper-dim); font-size: 0.96rem; margin:0; }
@media (max-width: 760px){ .steps{ grid-template-columns: 1fr; } }

/* ---------- market-table teaser grid (home) ---------- */
.table-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 130px;
  gap: 14px;
}
.table-grid a{ text-decoration:none; display:block; }
.tgi{
  position:relative;
  overflow:hidden;
  border: var(--edge);
}
.tgi img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.tgi::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(23,18,14,0.85) 100%);
  opacity:0;
  transition: opacity 0.25s ease;
}
.tgi:hover::after{ opacity:1; }
.tgi .cap{
  position:absolute; left:12px; right:12px; bottom:10px;
  font-family: var(--mono); font-size:0.68rem; letter-spacing:0.06em;
  color: var(--onphoto);
  opacity:0; transform: translateY(6px);
  transition: all 0.25s ease;
}
.tgi:hover .cap{ opacity:1; transform:none; }
.tgi.big{ grid-column: span 3; grid-row: span 2; }
.tgi.med{ grid-column: span 2; grid-row: span 2; }
.tgi.small{ grid-column: span 2; grid-row: span 1; }
@media (max-width: 900px){
  .table-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows:150px; }
  .tgi.big{ grid-column: span 2; grid-row: span 2; }
  .tgi.med{ grid-column: span 2; grid-row: span 2; }
  .tgi.small{ grid-column: span 1; grid-row: span 1; }
}

/* ---------- story page ---------- */
.story-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:start;
}
.story-layout img{ border: var(--edge); }
.story-copy p{ color: var(--paper-dim); font-size: 1.03rem; }
.story-copy p:first-of-type{
  color: var(--paper);
  font-size: 1.14rem;
  font-family: var(--display);
  font-weight: 400;
  line-height:1.5;
}
.pull{
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--marigold);
  border-left: 2px solid var(--rust);
  padding-left: 22px;
  margin: 36px 0;
  max-width: 32ch;
}
@media (max-width: 820px){
  .story-layout{ grid-template-columns: 1fr; gap: 36px; }
}

.craft-list{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 20px;
}
.craft-item h4{ font-size: 1.05rem; color: var(--marigold); }
.craft-item p{ color: var(--paper-dim); font-size: 0.94rem; }
@media (max-width: 760px){ .craft-list{ grid-template-columns: 1fr; } }

/* ---------- collection ---------- */
.filters{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom: 44px;
}
.filters button{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(32,24,16,0.22);
  color: var(--paper-dim);
  padding: 9px 16px;
  border-radius: 999px;
  cursor:pointer;
}
.filters button.active{
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.market-table{
  columns: 3 280px;
  column-gap: 22px;
}
.piece{
  break-inside: avoid;
  margin-bottom: 22px;
  border: var(--edge);
  background: var(--ink-soft);
  overflow:hidden;
  position:relative;
}
.piece .shot{
  width:100%; height:auto; display:block;
}
.piece .info{ padding: 16px 18px 20px; }
.piece .kind{
  font-family: var(--mono); font-size:0.66rem; letter-spacing:0.1em;
  text-transform:uppercase; color: var(--marigold);
}
.piece h3{
  font-size: 1.12rem; margin: 6px 0 6px;
}
.piece p{ color: var(--paper-dim); font-size: 0.9rem; margin:0 0 14px; }
.reserve-links{ display:flex; gap:8px; flex-wrap:wrap; }
.piece .badge-one{
  position:absolute; top:12px; right:-6px;
  transform: rotate(4deg);
}
@media (max-width: 760px){ .market-table{ columns: 1 100%; } }

/* ---------- find us ---------- */
.event-card{
  border: 1px dashed rgba(32,24,16,0.3);
  padding: 34px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 24px;
  flex-wrap: wrap;
}
.event-card.confirmed{
  border: var(--edge);
}
.event-card.confirmed + .event-card.confirmed{ margin-top: 16px; }
.event-list{ display:flex; flex-direction:column; gap:16px; }
.event-card .when{
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--rust);
  margin: 6px 0 10px;
}
.event-card .placeholder-note{
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--marigold);
  text-transform:uppercase;
  margin-bottom:10px;
}
.event-card h3{ font-size: 1.4rem; margin-bottom:6px; }
.event-card p{ color: var(--paper-dim); margin:0; }

.reserve-panel{
  background: var(--ink-soft);
  border: var(--edge);
  padding: 46px;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items:center;
}
@media (max-width: 820px){ .reserve-panel{ grid-template-columns: 1fr; padding: 30px; } }

.ig-block{
  display:flex; align-items:center; gap: 16px;
  padding: 22px 26px;
  border: var(--edge);
  background: var(--ink-soft);
}
.ig-icon{
  width:44px; height:44px; border-radius: 12px;
  background: linear-gradient(135deg,#fc9400,#c53403 55%,#127ce0);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ig-icon svg{ width:22px; height:22px; fill:var(--onphoto); }

/* ---------- footer ---------- */
footer{
  border-top: var(--edge);
  padding: 48px 0 28px;
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap: 30px;
}
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-brand img{ height:54px; }
.footer-brand span{ font-family:var(--display); font-weight:600; }
footer .fine{
  color: var(--paper-dim); font-size: 0.82rem;
  margin-top: 26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
footer nav{ display:flex; gap:22px; flex-wrap:wrap; }
footer nav a{ text-decoration:none; color: var(--paper-dim); font-size:0.9rem; }
footer nav a:hover{ color: var(--paper); }