:root{
  --bg:#f7f0e6;           /* linen */
  --ink:#1f1f1f;
  --muted:#5f5f5f;
  --accent:#8a6a4d;       /* thread brown */
  --accent-2:#b59b80;     /* lighter brown */
  --blue:#c7d6e1;         /* soft gray-blue */
  --pink:#f4c9cf;         /* dusty pink */
  --orange:#f6d3a3;       /* warm beige */
  --red:#e78c80;          /* muted red pop */
  --paper:#fffaf3;
  --card:#ffffff;
  --shadow:0 8px 30px rgba(0,0,0,.07);
  --radius:16px;
  --nav-h: 72%;
  color-scheme: light;
}

*{box-sizing:border-box;}
html,body{min-height:100%; scroll-behavior:smooth;}
body{
  position:relative;
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Open Sans","Nunito", system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.15) 0, rgba(255,255,255,.15) 1px, transparent 1px, transparent 12px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0, rgba(255,255,255,.12) 1px, transparent 1px, transparent 12px);
}
body > *{position:relative; z-index:2;}

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:rgba(247,240,230,.6);
  box-shadow:inset 0 0 80px rgba(0,0,0,.05);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.95; z-index:0;
  background-image:
    url("assets/stickers/handmade.webp"),
    url("assets/stickers/bow.webp"),
    url("assets/stickers/scissors.webp"),
    url("assets/stickers/needle.webp"),
    url("assets/stickers/thread.webp"),
    url("assets/stickers/pillow.webp"),
    url("assets/stickers/leaves.webp"),
    url("assets/stickers/measuringTape.webp"),
    url("assets/stickers/reel.webp"),
    url("assets/stickers/safetyPin.webp"),
    url("assets/stickers/glasses.webp"),
    url("assets/stickers/bobbin.webp");
  background-size:
    240px,
    240px,
    220px,
    200px,
    230px,
    200px,
    200px,
    220px,
    160px,
    180px,
    200px,
    160px;
  background-repeat:no-repeat;
  background-position:
    5% 10%,
    95% 8%,
    12% 37%,
    78% 32%,
    32% 68%,
    82% 58%,
    8% 82%,
    50% 16%,
    63% 44%,
    54% 72%,
    39% 44%,
    92% 86%;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.08));
}

@media (max-width: 767.98px){
  body::after{
    background-image: url("assets/stickers/bow.webp");
    background-size: 260px;
    background-repeat: no-repeat;
    background-position: 50% 40%;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  body::after{
    background-image:
      url("assets/stickers/handmade.webp"),
      url("assets/stickers/leaves.webp"),
      url("assets/stickers/scissors.webp");
    background-repeat: no-repeat, no-repeat, no-repeat;

    background-position:
      15% 20%,
      85% 25%,
      55% 75%;

    background-size:
      280px,
      220px,
      240px;
  }
}

.container{max-width:1040px; margin:0 auto; padding:0 16px;}
.section{padding:2.25rem 0;}
.section.alt{background:var(--paper);}
section[id], #hero, #about, #work, #contact {scroll-margin-top: var(--nav-h);}
.muted{color:var(--muted);}
.micro{font-size:.9rem;}

h1,.display{font-family:"Playfair Display", Georgia, serif; letter-spacing:.2px;}
.h2{font-size:1.85rem; margin:0 0 .5rem;}
.h3{font-size:1.25rem; margin:0 0 .4rem;}
.display{font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.05; margin:0 0 .4rem;}
.lead{font-size:1.1rem; color:var(--muted); max-width:62ch;}
.hand{font-family:"Caveat","Comic Sans MS",system-ui;}
.tag{display:inline-block; padding:.25rem .75rem; border-radius:999px; background:var(--pink); color:var(--ink); margin:0 0 .35rem; box-shadow:0 2px 0 rgba(0,0,0,.06);}

.scribble-underline{position:relative; display:inline-block;}
.scribble-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:10px; opacity:.95;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M5 15 Q 40 5, 80 14 T 195 12' fill='none' stroke='%236b705c' stroke-width='3' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}

.badge.badge-1{background:#d64545; color:#fff; border-radius:999px; padding:.2rem .6rem;}
.badge.badge-2{background:#f08aab; color:#311018; border-radius:999px; padding:.2rem .6rem;}
.badge.badge-3{background:#f4c361; color:#3b2d0c; border-radius:999px; padding:.2rem .6rem;}
.badge.badge-4{background:#b5e28f; color:#1e2e10; border-radius:999px; padding:.2rem .6rem;}
.badge.badge-5{background:#4fb171; color:#0f1f14; border-radius:999px; padding:.2rem .6rem;}

.nav{
  position:sticky; top:0; background:rgba(247,240,230,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid #e5dccf; z-index:10;
}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:.85rem 0;}
.brand{font-weight:800; letter-spacing:.5px; text-decoration:none; color:var(--ink); font-size:1.05rem;}
.brand i{font-style:normal; letter-spacing:0; font-weight:400;}
.brand-logo{height:70px; width:auto; display:block; padding-left: 32px;}

.links a{margin-left:1rem; text-decoration:none; color:var(--ink); font-weight:700;}
.links a:hover{color:var(--accent);}
.lang-toggle{
  margin-left:1rem; padding:.45rem .75rem; border-radius:999px; border:1px solid #d6cbb5;
  background:var(--orange); color:var(--ink); font-weight:800; cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.08);
}
.lang-toggle:hover{filter:brightness(1.05);}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .brand{padding-left: 32px; padding-right: 12px;}
  .brand-logo{height: 80px;}
}

@media (max-width: 767.98px){
  .nav{backdrop-filter: none; -webkit-backdrop-filter: none;}
  .nav-row{flex-direction: column; align-items:center; gap: .35rem; }
  .brand{display:flex; justify-content:center; width:100%;}
  .links{ width: 100%; text-align: center; }
  .brand-logo{height: 60px;}
  .lang-toggle{
    align-self:flex-end;
    width:auto;
    margin: 0;
    padding: .25rem .55rem;
    font-size: .85rem;
    opacity: .85;
    box-shadow: none;
    border-color: rgba(0,0,0,.15);
    background: transparent;
  }
}

.btn{
  display:inline-block; padding:.68rem 1rem; border-radius:999px;
  background:var(--accent); color:#fff; text-decoration:none; font-weight:800;
  box-shadow:0 3px 0 rgba(0,0,0,.08); border:none; cursor:pointer;
}
.btn:hover{filter:brightness(1.05);}
.btn-secondary{background:var(--ink);}
.btn-stitch{position:relative; background:#8a6a4d;}
.btn-stitch::before{
  content:""; position:absolute; inset:6px; border:2px dashed rgba(255,255,255,.85);
  border-radius:999px;
}

.hero{padding:2.75rem 0 2rem; position:relative; overflow:hidden;}
.hero-inner{
  display:grid; gap:1.2rem; grid-template-columns:1.1fr 0.9fr; align-items:start;
}
.hero-copy{position:relative; z-index:1;}
.hero-actions{display:flex; gap:.75rem; flex-wrap:wrap; margin:1rem 0;}
.hero-note ul{margin:.5rem 0 0; padding-left:1.1rem;}
.meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.5rem 9rem; margin:1.25rem 0 0; padding:0;}
.meta dt{font-weight:800;}
.meta dd{margin:0; color:var(--muted);}

.paper{
  background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1rem 1.25rem; position:relative; border:1px solid rgba(0,0,0,.04);
}
.paper.torn{
  -webkit-mask:
    radial-gradient(12px 6px at 10% 100%, transparent 98%, #000) bottom left,
    radial-gradient(12px 6px at 30% 100%, transparent 98%, #000) bottom center,
    radial-gradient(12px 6px at 55% 100%, transparent 98%, #000) bottom center,
    radial-gradient(12px 6px at 80% 100%, transparent 98%, #000) bottom right,
    linear-gradient(#000,#000);
  -webkit-mask-composite: source-over; mask-composite:add;
  -webkit-mask-size:25% 16px,25% 16px,25% 16px,25% 16px,auto;
  -webkit-mask-repeat:no-repeat;
  outline:1px solid rgba(0,0,0,.05);
}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.1rem 1.25rem;}

.frame{position:relative; border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--shadow);}
.frame img{display:block; width:100%; height:auto;}
.frame.polaroid figcaption{
  padding:.5rem .8rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:.85rem;
  background:#fff9f3; color:var(--muted);
}

.section-head{display:flex; align-items:baseline; gap:1rem; justify-content:space-between; flex-wrap:wrap;}

.gallery-wrap{padding:1.25rem 1.25rem 1.5rem; box-shadow:inset 0 0 0 1px rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.04);}
.gallery-grid{display:grid; gap:1.25rem; grid-template-columns:1.3fr .85fr; align-items:start;}
.ba{display:grid; gap:1rem; grid-template-columns:1fr 1fr;}
.ba-aside .muted{margin:0 0 .7rem;}

.thumbs{list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; margin:1rem 0 .4rem; padding:0;}
.thumb{
  width:100%; padding:0; background:#fff; border:2px solid transparent; border-radius:12px;
  box-shadow:var(--shadow); cursor:pointer; transform:rotate(-1.2deg);
}
.thumb:nth-child(2n){transform:rotate(1.2deg);}
.thumb.active{border-color:var(--accent);}
.thumb img{display:block; width:100%; height:80px; object-fit:cover; border-radius:10px;}

.about-grid{display:grid; gap:1.2rem; grid-template-columns:1.2fr .8fr;}
.pill-row{display:flex; gap:.5rem; flex-wrap:wrap; margin:.75rem 0 0;}
.pill{padding:.45rem .8rem; border-radius:999px; background:var(--blue); box-shadow:0 2px 0 rgba(0,0,0,.05);}
.pill:nth-child(2){background:var(--orange);}
.pill:nth-child(3){background:var(--pink);}

.card-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));}

.contact-grid{display:grid; gap:1.2rem; grid-template-columns:1fr 1fr; align-items:start;}
.form label{display:flex; flex-direction:column; gap:.35rem; font-weight:700; color:var(--ink);}
.form input,.form textarea{
  width:100%; padding:.65rem .75rem; border-radius:10px; border:1px solid #dcd2c4;
  font-size:1rem; font-family:inherit; background:#fff; color:var(--ink);
}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent-2); border-color:var(--accent);}
.form button{margin-top:.5rem;}

.footer{margin-top:2rem; border-top:1px solid #e5dccf;}
.footer-row{display:flex; gap:1rem; justify-content:space-between; align-items:center; padding:1rem 0; flex-wrap:wrap;}
.footer-links a{color:var(--muted); text-decoration:none; margin-left:1rem;}
.footer-links a:hover{color:var(--accent);}

.sticker-cloud{
  position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.sticker{position:absolute; opacity:.65; filter:drop-shadow(0 10px 18px rgba(0,0,0,.08));}
.sticker-1{width:120px; top:12%; left:-2%;}
.sticker-2{width:200px; top:45%; left:-6%; transform:rotate(-8deg);}
.sticker-3{width:140px; top:10%; right:-4%; transform:rotate(6deg);}
.sticker-4{width:160px; bottom:0; right:-3%; transform:rotate(-12deg);}

@media (max-width:980px){
  .hero-inner,.gallery-grid,.contact-grid,.about-grid{grid-template-columns:1fr;}
  .hero{padding-top:2.5rem;}
  .sticker-cloud{display:none;}
}
@media (max-width:640px){
  .nav-row{flex-direction:column; align-items:flex-start; gap:.35rem;}
  .links a{margin-left:.5rem;}
  .lang-toggle{margin-left:0;}
  .hero-actions{flex-direction:column;}
  .ba{grid-template-columns:1fr;}
  .thumbs{grid-template-columns:repeat(auto-fit, minmax(90px,1fr));}
}