:root{
  --bg:#FBF7F2;
  --ink:#2A2A2A;
  --muted:#6B635E;

  --card:#FFFFFF;
  --border:rgba(32,24,18,.10);
  --shadow:0 18px 50px rgba(21,16,12,.06);
  --radius:20px;

  /* boho palette */
  --peach:#F6B59A;
  --coral:#F28C7B;
  --sun:#F7C86A;
  --sand:#EAD9C6;
  --clay:#B98262;

  --btn:#2A2A2A;
  --btnText:#ffffff;
}

/* ---------- Shop ---------- */
.shop-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
@media (max-width:900px){
  .shop-grid{ grid-template-columns:1fr; }
}

.shop-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
}

.shop-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  font-weight:800;
  color:var(--muted);
}
.shop-lefttop{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.shop-type{
  text-transform:capitalize;
}

.shop-price{
  color:var(--clay);
  font-weight:900;
}

.shop-title{
  margin:0;
  font-size:18px;
}

.shop-meta{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.shop-actions{ margin-top:auto; }

/* soft badge */
.badge-soft{
  display:inline-block;
  align-self:flex-start;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  background: rgba(234,217,198,.45);
  border:1px solid rgba(32,24,18,.10);
  color: var(--ink);
}

/* ---------- Base ---------- */

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);
  background:var(--bg);
}

a{
  color:inherit;
  text-decoration:none;
}

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:32px 20px 60px;
}

/* ---------- Header ---------- */

.top{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}

.top-inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  position:relative; /* for mobile dropdown */
}

.brand-logo{
  height:60px;
  width:auto;
  display:block;
}

@media (max-width:600px){
  .brand-logo{height:38px;}
}

/* ---------- Mobile-friendly navbar ---------- */

.nav{
  display:flex;
  gap:18px;
}

.nav a{
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  padding:6px 8px;
  border-radius:10px;
  transition:.15s ease;
}

.nav a:hover{
  background:var(--sand);
  color:var(--ink);
}

.nav a.is-active{
  background: rgba(234,217,198,.45);
  color: var(--ink);
}

.nav-toggle{
  display:none;
  appearance:none;
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  width:44px;
  height:44px;
  padding:0;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.nav-toggle:hover{
  background:rgba(234,217,198,.25);
}

.nav-toggle-bars{
  width:18px;
  height:2px;
  background:var(--ink);
  position:relative;
  display:block;
  border-radius:2px;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:var(--ink);
  border-radius:2px;
}

.nav-toggle-bars::before{ top:-6px; }
.nav-toggle-bars::after{ top: 6px; }


@media (max-width:820px){
  .nav-toggle{ display:inline-flex; }

  .nav{
    display:none; /* hidden by default on mobile */
    position:absolute;
    left:20px;
    right:20px;
    top:72px;
    flex-direction:column;
    gap:10px;
    padding:14px;
    background:rgba(255,255,255,.95);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(8px);
    z-index:50;
  }

  .nav.is-open{ display:flex; }

  .nav a{
    padding:10px 12px;
    border-radius:12px;
  }
}

/* ---------- Soft Studio Typography ---------- */

h1, h2, h3, h4{
  margin-top:0;
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.01em;
}

h1{
  font-size:32px;
  line-height:1.25;
  margin-bottom:18px;
  font-weight:700;
}

h2{
  font-size:21px;
  line-height:1.35;
  margin-bottom:16px;
  font-weight:600;
}

h3{
  font-size:17px;
  line-height:1.4;
  margin-bottom:10px;
  font-weight:600;
}

h4{
  font-size:15px;
  line-height:1.45;
  margin-bottom:8px;
  font-weight:600;
}

p{
  line-height:1.6;
  margin:0 0 14px;
}

p.muted{ color:var(--muted); }

.card h2{
  font-size:19px;
  font-weight:600;
}

.card h3{
  font-size:16px;
  font-weight:600;
}

.shop-filter{
margin-bottom:20px;
display:flex;
gap:8px;
flex-wrap:wrap;
}

.shop-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

@media (max-width:900px){
.shop-grid{grid-template-columns:1fr}
}

.shop-card{
background:#fff;
border:1px solid var(--border);
border-radius:18px;
padding:20px;
display:flex;
flex-direction:column;
gap:12px;
}

.shop-top{
display:flex;
justify-content:space-between;
font-size:13px;
font-weight:700;
color:var(--muted);
}

.shop-type{
text-transform:capitalize;
}

.shop-price{
color:var(--clay);
font-weight:900;
}

.shop-title{
font-size:18px;
margin:0;
}

.shop-meta{
font-size:14px;
color:var(--muted);
}

.shop-actions{
margin-top:auto;
}

/* ---------- Page shell + columns (global) ---------- */
.page{ padding:28px 30px; }
.page-head{ margin-bottom:18px; }
.page-title{ margin:0 0 10px; }
.page-sub{ margin:0; max-width:65ch; }

.cols{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:24px;
  align-items:start;
}
@media (max-width:900px){
  .page{ padding:22px 20px; }
  .cols{ grid-template-columns:1fr; }
}

/* Soft inner card + note blocks */
.soft-card{
  background: rgba(234,217,198,.18);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow:none;
}
.note{
  background: rgba(234,217,198,.25);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
}

/* Card typography helpers */
.card-title{ margin:0 0 6px; font-size:18px; font-weight:800; }
.card-meta{ margin:0 0 12px; }

/* Contact bits */
.contact-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 0;
}
.contact-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--clay);
  flex-shrink:0;
}
.contact-email{ font-weight:900; font-size:16px; }
.small{ font-size:13px; }

/* Lists */
.bullets{ margin:10px 0 0; padding-left:18px; color:var(--muted); }
.bullets li{ margin:8px 0; }
.plain-list{ list-style:none; padding:0; margin:10px 0 0; }
.plain-list li{ margin:10px 0; }
.plain-list a{ font-weight:800; }

/* Social links */
.socials{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.social{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border);
}
.social:hover{ background: rgba(234,217,198,.25); }
.social i{ width:18px; text-align:center; color:var(--clay); }
.social span{ font-weight:800; }

/* Mini spacing tweak for this page */
.mini-contact .mini-item{ background: rgba(234,217,198,.35); }

/* ---------- Section Title Accent ---------- */

.section-title{
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}

.section-title::after{
  content:"";
  display:block;
  width:44px;
  height:3px;
  margin-top:10px;
  border-radius:2px;
  background:linear-gradient(to right, var(--clay), var(--peach));
  opacity:.6;
}

/* ---------- Cards ---------- */

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ---------- Hero ---------- */

.hero{
  padding:28px 32px;
  margin-bottom:25px;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:40px;
  align-items:center;
}

@media (max-width:900px){
  .hero-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
}

.hero-copy{ max-width:720px; }

.pill{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  color:var(--clay);
  background:var(--sand);
  margin-bottom:14px;
}

.hero-logo{
  max-width:100%;
  height:auto;
  display:block;
}



.lead{
  font-size:18px;
  line-height:1.6;
  color:var(--muted);
  max-width:620px;
}

/* Hero side panel */

.hero-side{
  background:rgba(234,217,198,.25);
  border-radius:20px;
  padding:26px;
}

.side-label{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--clay);
  margin-bottom:8px;
}

.hero-side h3{
  margin:0 0 10px;
  font-size:18px;
}

.hero-side p{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.side-date{
  font-size:12px;
  color:var(--muted);
  margin-top:10px;
}

/* ---------- About list ---------- */
.about-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.about-item{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:14px 14px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--border);
  transition:.15s ease;
}

.about-item:hover{
  background: rgba(234,217,198,.20);
  transform: translateY(-1px);
}

.about-name{ font-weight:900; }
.about-meta{ font-size:13px; margin-top:4px; }

.about-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.about-pill{
  font-size:11px;
  font-weight:900;
  padding:5px 10px;
  border-radius:999px;
  background: rgba(234,217,198,.40);
  border:1px solid var(--border);
  color: var(--ink);
}

.about-arrow{
  font-weight:900;
  color: var(--clay);
  opacity:.75;
}
/* ---------- Buttons ---------- */

.cta-row{
  margin-top:20px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  padding:12px 18px;
  border-radius:14px;
  font-weight:700;
  font-size:14px;
  border:1px solid var(--border);
  background:#fff;
  transition:.15s ease;
}

.btn.primary{
  background:var(--btn);
  color:var(--btnText);
  border-color:rgba(0,0,0,.25);
}

.btn.primary:hover{ opacity:.9; }

.btn.ghost:hover{ background:var(--sand); }

.btn.small{
  padding:8px 14px;
  font-size:13px;
}

/* ---------- Mini blocks ---------- */

.mini{
  display:flex;
  gap:14px;
  margin-top:24px;
  flex-wrap:wrap;
}

.mini-item{
  padding:14px 16px;
  border-radius:14px;
  background:var(--sand);
}

.mini-k{
  font-weight:800;
  font-size:14px;
}

.mini-v{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}

/* ---------- Featured Grid ---------- */

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:28px;
}

@media (max-width:900px){
  .grid{ grid-template-columns:1fr; }
}

.hubcard{ padding:24px; }

.tag{
  font-size:11px;
  font-weight:800;
  padding:5px 10px;
  border-radius:999px;
  background:var(--sand);
  color:var(--clay);
  margin-right:6px;
}

/* ---------- Directory (hub cards) ---------- */

.hubwrap{
  padding:30px;
  margin-bottom:28px;
}

.hubhead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:22px;
  flex-wrap:wrap;
  gap:12px;
}

.hubsearch input{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  outline:none;
  min-width:260px;
}

.hubsearch input:focus{ border-color:var(--clay); }

.hubgrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

@media (max-width:760px){
  .hubgrid{ grid-template-columns:1fr; }
}

.hubitem{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#fff;
  transition:.15s ease;
}

.hubitem:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.hubicon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(234,217,198,.25);
  flex-shrink:0;
}

.hubicon i{
  font-size:20px;
  color:var(--clay);
  transition:.15s ease;
}

.hubitem:hover .hubicon i{ transform:translateY(-2px); }

.hubname{ font-weight:800; }

.hubmeta{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}

.hubgo{
  margin-left:auto;
  font-weight:800;
  color:var(--clay);
  opacity:.6;
}

/* ---------- FAQ ---------- */
.faq{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}

.faq-item{
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:900;
}

.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item .faq-plus{
  width:28px;
  height:28px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background: rgba(234,217,198,.25);
  color: var(--clay);
  font-weight:900;
  flex-shrink:0;
  transition:.15s ease;
}

.faq-item[open] .faq-plus{
  transform: rotate(45deg);
}

.faq-body{
  padding:0 16px 14px;
}

.faq-body p{
  margin:0;
}

/* ---------- Callout ---------- */

.callout{ padding:32px; }

.callout-grid{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}

/* ---------- Studio card utility ---------- */

.studio{
  padding:28px 30px;
  margin:0 0 28px;
}

.studio h2{
  margin:0 0 10px;
  font-size:20px;
}

.studio p{
  margin:0 0 10px;
  line-height:1.6;
}

.studio p.muted{
  margin:0;
  color:var(--muted);
}

/* ---------- Links Page (categorized + filter) ---------- */

.links-card{
  padding:26px 28px;
}

@media (max-width:640px){
  .links-card{ padding:20px; }
}

.links-card .link-hub{ margin-top:0; }

/* Toolbar */
.links-toolbar{
  margin-top:16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.links-filter{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  outline:none;
  min-width:260px;
}

.links-filter:focus{ border-color:var(--clay); }

.links-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.chip{
  border:1px solid var(--border);
  background:#fff;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  cursor:pointer;
}

.chip:hover{
  background:rgba(234,217,198,.25);
  color:var(--ink);
}

.links-count{
  margin-top:12px;
  font-size:13px;
  color:var(--muted);
}

/* Grid layout */
.link-hub{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}

@media (min-width:980px){
  .link-hub{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
}

/* Category groups */
.link-group{
  position:relative;
  padding-left:18px;
}

.link-group::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:3px;
  border-radius:2px;
  background:var(--sand);
  opacity:.6;
}

.link-group-studio::before{ background:var(--clay); }
.link-group-work::before{ background:var(--peach); }
.link-group-shop::before{ background:var(--sun); }
.link-group-updates::before{ background:var(--ink); opacity:.25; }

.link-heading{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin:0 0 14px;
}

/* Items */
.link-list{
  list-style:none;
  padding:0;
  margin:0;
}

.link-item{ margin-bottom:14px; }

.link-list a{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:.15s ease;
}

.link-list a:hover{ padding-left:6px; }

.link-left{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.link-name{
  font-weight:800;
  line-height:1.2;
}

.link-meta{
  font-size:13px;
  color:var(--muted);
  line-height:1.4;
}

.link-arrow{
  font-weight:900;
  color:var(--clay);
  opacity:.7;
  transition:.15s ease;
  margin-top:2px;
}

.link-list a:hover .link-arrow{
  opacity:1;
  transform:translateX(3px);
}

.badge-new{
  display:inline-block;
  align-self:flex-start;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  background:rgba(247,200,106,.35);
  border:1px solid rgba(185,130,98,.25);
  color:var(--ink);
}

/* ---------- Footer ---------- */

.footer{
  border-top:1px solid var(--border);
  background:#fff;
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:20px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:14px;
}

/* Columns */
.cols{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:24px;
  align-items:start;
}
@media (max-width:900px){
  .cols{ grid-template-columns:1fr; }
}

.note{
  background: rgba(234,217,198,.25);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
}
.note h3{ margin:0 0 8px; font-size:16px; }
.note p{ margin:0; color:var(--muted); }
@media (max-width:820px){
  .top-inner{ position:relative; }

  /* force hidden by default */
  .top .nav{ display:none !important; }

  /* show only when toggled */
  .top .nav.is-open{ display:flex !important; }

  /* show hamburger */
  .top .nav-toggle{ display:inline-flex !important; }
}