/* ============================================================
   fashionbunnysmith — shared site design system
   One source of truth for the single-menu site.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  --paper:#faf7f2;
  --paper-2:#f2ebdf;
  --ink:#1c1815;
  --muted:#6f665c;
  --line:#e6ded1;
  --accent:#a9573d;
  --accent-deep:#7f3d2a;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"EB Garamond",Georgia,serif;
  --wrap:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}

/* --- shared bits --- */
.kicker{text-transform:uppercase;letter-spacing:.32em;font-size:12.5px;color:var(--accent);margin:0 0 20px;}
.rule{width:64px;height:1px;background:var(--accent);border:0;margin:32px 0;}
.rule--center{margin-left:auto;margin-right:auto;}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.08;margin:0;letter-spacing:.01em;}
.display-1{font-size:clamp(46px,8vw,88px);}
.display-2{font-size:clamp(32px,5vw,54px);}
.display-3{font-size:clamp(23px,3.4vw,32px);}
.lead{font-size:clamp(19px,2.2vw,23px);color:var(--muted);font-style:italic;line-height:1.5;}
em,i{font-style:italic;}

/* --- buttons / links --- */
.btn{display:inline-block;font-family:var(--body);text-transform:uppercase;letter-spacing:.18em;
  font-size:12.5px;text-decoration:none;padding:15px 30px;border:1px solid var(--ink);
  color:var(--ink);background:transparent;transition:background .25s,color .25s,border-color .25s;}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn--accent{border-color:var(--accent);color:var(--accent);}
.btn--accent:hover{background:var(--accent);border-color:var(--accent);color:var(--paper);}
.link-underline{font-family:var(--body);text-transform:uppercase;letter-spacing:.16em;
  font-size:12px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--accent);
  padding-bottom:4px;transition:color .25s;}
.link-underline:hover{color:var(--accent);}

/* --- header / single menu --- */
.site-header{border-bottom:1px solid var(--line);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;
  padding-top:26px;padding-bottom:24px;gap:18px;flex-wrap:wrap;}
.brand{font-family:var(--display);font-size:27px;font-weight:500;letter-spacing:.02em;
  text-decoration:none;color:var(--ink);}
.site-nav{display:flex;gap:26px;flex-wrap:wrap;align-items:center;}
.site-nav a{font-family:var(--body);text-transform:uppercase;letter-spacing:.16em;font-size:12.5px;
  color:var(--muted);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--accent);border-color:var(--accent);}

/* --- sections --- */
.section{padding:84px 0;}
.section--tight{padding:56px 0;}
.section--paper2{background:var(--paper-2);}
.section-head{text-align:center;max-width:720px;margin:0 auto 54px;}
.section-head .kicker{text-align:center;}
.section-head p{color:var(--muted);margin:16px 0 0;}

/* --- hero --- */
.hero{padding:20px 0 8px;}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;
  padding:70px 0;}
.hero__body .lead{margin:26px 0 0;}
.hero__cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;}
.hero__media{position:relative;}
.hero__media img{width:100%;box-shadow:0 30px 70px -34px rgba(28,24,21,.55);height:auto;object-fit:cover;}
.hero__media::after{content:"";position:absolute;inset:16px -16px -16px 16px;
  border:1px solid var(--line);z-index:-1;}

/* --- work grid --- */
.grid{display:grid;gap:38px;}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.work{margin:0;text-decoration:none;color:inherit;display:block;}
.work__media{overflow:hidden;background:var(--paper-2);aspect-ratio:4/5;}
.work__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.work:hover .work__media img{transform:scale(1.05);}
.work__cap{padding:18px 2px 0;}
.work__title{font-family:var(--display);font-size:23px;font-weight:500;margin:0 0 5px;}
.work__meta{color:var(--muted);font-size:15px;font-style:italic;margin:0;}

/* --- feature split --- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:start;}
.feature__media{max-width:420px;margin-inline:auto;}
.feature__media img{width:100%;height:auto;box-shadow:0 24px 60px -30px rgba(28,24,21,.5);}
.feature__body p{color:var(--muted);margin:0 0 18px;}
.feature--reverse .feature__media{order:2;}

/* --- route cards (Portfolio / Workshops / Shop) --- */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);}
.route{padding:46px 38px;text-decoration:none;color:inherit;border-right:1px solid var(--line);
  transition:background .3s;display:block;}
.route:last-child{border-right:0;}
.route:hover{background:var(--paper-2);}
.route h3{margin:0 0 12px;font-size:28px;}
.route p{color:var(--muted);margin:0 0 20px;font-size:16px;}
.route span{text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;color:var(--accent);}

/* --- footer --- */
.site-footer{border-top:1px solid var(--line);margin-top:0;padding:58px 0 66px;text-align:center;}
.site-footer .brand{display:inline-block;margin-bottom:10px;}
.site-footer__tag{color:var(--muted);font-size:15px;margin:0 0 24px;font-style:italic;}
.site-footer__nav{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:24px;}
.site-footer__nav a{text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--muted);
  text-decoration:none;transition:color .25s;}
.site-footer__nav a:hover{color:var(--accent);}
.site-footer__meta{font-size:13px;color:var(--muted);}

/* --- responsive --- */
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr;gap:40px;padding:48px 0;}
  .hero__media{order:-1;}
  .hero__media::after{display:none;}
  .feature{grid-template-columns:1fr;gap:34px;}
  .feature--reverse .feature__media{order:0;}
  .grid--3{grid-template-columns:1fr 1fr;}
  .routes{grid-template-columns:1fr;}
  .route{border-right:0;border-bottom:1px solid var(--line);}
  .route:last-child{border-bottom:0;}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
  .grid--3,.grid--2{grid-template-columns:1fr;}
  .site-header .wrap{justify-content:center;text-align:center;}
  .site-nav{gap:15px;justify-content:center;}
  .section{padding:60px 0;}
}

/* Prose lists inside a section. Added when /about/ was rebuilt on this template:
   a bare <ul> inherits the browser's 40px padding-left, which pushed the grid
   column 24px past a 390px viewport and made the whole page scroll sideways. */
.section ul{margin:0 0 1.4rem;padding-left:1.15rem;}
.section li{margin:0 0 .55rem;line-height:1.55;overflow-wrap:anywhere;}
@media (max-width:560px){
  .section ul{padding-left:1rem;}
}

/* Grid children default to min-width:auto, so a column refuses to shrink below
   its content's intrinsic width and pushes the page sideways. Only bites once a
   grid holds long prose (the rebuilt /about/ CV columns). */
.grid > *{min-width:0;}
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:24px;
  align-items:start;
}
.gallery figure{
  margin:0;
}
.gallery img{
  width:100%;
  height:auto;
  display:block;
  border-radius:2px;
}