/* Bonnie Jane Nail Studio — V1
   Design tokens first; nothing below should hardcode a colour. */

:root{
  --ink:        #1A2B34;
  --ink-soft:   #4B646D;
  --orange:     #C25C1C;
  --orange-dark:#A54A11;
  --green:      #7F8E3C;
  --field:      #C9D0CE;
  --orange-soft:rgba(194, 92, 28, .26);
  --green-soft: rgba(127,142, 60, .24);
  --gold-soft:  rgba(174,144, 87, .22);
  --rule:       rgba(26, 43, 52, .18);
  --on-orange:  #FCF4EC;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, -apple-system, sans-serif;

  --measure: 60ch;
  --gutter: 40px;
  --shell: 1180px;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }

body{
  background-color: var(--field);
  background-image: url("stone.jpg");
  background-size: 1000px 1200px;
  background-repeat: repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.wrap{
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
}

.caps{ text-transform:uppercase; letter-spacing:.34em; font-weight:400 }

:focus-visible{ outline:2px solid var(--orange); outline-offset:3px }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--field); color:var(--ink);
  padding:10px 16px; font-size:12px; z-index:10;
}
.skip:focus{ left:12px; top:12px }

/* ---------- header ---------- */
header{ display:flex; justify-content:flex-end; align-items:baseline; padding:20px 0 0 }
.addr{
  font-size:10px; color:var(--ink-soft); text-decoration:none;
  text-align:right; line-height:1.9; transition:color .3s ease;
}
.addr:hover,.addr:focus-visible{ color:var(--orange) }

.logo-wrap{ display:flex; justify-content:center; margin:14px 0 2px }
.logo-wrap img{ width:min(420px, 56%); height:auto; display:block }

nav{ display:flex; justify-content:center; gap:34px; margin:26px 0 0 }
nav a{
  font-size:10px; color:var(--ink-soft); text-decoration:none;
  text-transform:uppercase; letter-spacing:.34em; font-weight:400;
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
nav a:hover,nav a:focus-visible{ color:var(--orange) }
nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:rgba(26,43,52,.32) }

/* ---------- type ---------- */
h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(38px, 4.4vw, 54px); line-height:1.1;
  margin:0 0 22px;
}

/* ---------- home ---------- */
.split{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:54px; padding:40px 0 64px; align-items:start;
}
.about p{ font-size:16px; line-height:1.9; margin:0 0 17px; max-width:var(--measure) }
.about p:last-of-type{ margin-bottom:0 }

.book{
  display:inline-block; margin-top:34px;
  background:var(--orange); color:var(--on-orange);
  text-decoration:none; padding:16px 34px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  border-radius:2px; transition:background .3s ease;
}
.book:hover,.book:focus-visible{ background:var(--orange-dark) }

/* ---------- drifting shapes ---------- */
.stage{ position:relative; min-height:510px }
.orb{ position:absolute; border-radius:50% }
#o1{ width:306px; height:306px; background:var(--orange-soft); top:0;     right:0;     animation:drift1 26s ease-in-out infinite }
#o2{ width:228px; height:228px; background:var(--green-soft);  top:252px; right:132px; animation:drift2 32s ease-in-out infinite }
#o3{ width:158px; height:158px; background:var(--gold-soft);   top:168px; right:238px; animation:drift3 38s ease-in-out infinite }

@keyframes drift1{ 0%,100%{transform:translate(0,0)} 33%{transform:translate(-32px,24px)}  66%{transform:translate(18px,-20px)} }
@keyframes drift2{ 0%,100%{transform:translate(0,0)} 33%{transform:translate(26px,-26px)}  66%{transform:translate(-22px,16px)} }
@keyframes drift3{ 0%,100%{transform:translate(0,0)} 33%{transform:translate(-20px,-22px)} 66%{transform:translate(26px,20px)} }

.bg-orbs{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
.bg-orbs div{ position:absolute; border-radius:50% }
.bg-orbs .a{ width:272px; height:272px; background:var(--orange-soft); opacity:.55; top:150px; right:18px;  animation:drift1 34s ease-in-out infinite }
.bg-orbs .b{ width:196px; height:196px; background:var(--green-soft);  opacity:.5;  top:520px; right:152px; animation:drift2 42s ease-in-out infinite }
.bg-orbs .c{ width:148px; height:148px; background:var(--gold-soft);   opacity:.5;  top:840px; right:46px;  animation:drift3 48s ease-in-out infinite }

/* ---------- interior pages ---------- */
.page{ padding:34px 0 60px; max-width:760px }

.svc{ padding:0 0 34px; margin-bottom:34px; border-bottom:0.5px solid var(--rule) }
.svc:last-of-type{ border-bottom:0 }
.svc-head{ display:flex; align-items:baseline; gap:16px }
.svc-name{ font-family:var(--serif); font-weight:400; font-size:27px; line-height:1.25; margin:0; flex:0 1 auto }
.svc-dots{ flex:1 1 auto; border-bottom:1px dotted rgba(26,43,52,.30); transform:translateY(-5px) }
.svc-price{ font-size:15px; letter-spacing:.06em; white-space:nowrap }
.svc p{ font-size:15px; line-height:1.85; margin:12px 0 0; max-width:58ch; color:var(--ink-soft) }
.svc-book{
  display:inline-block; margin-top:16px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--orange); text-decoration:none;
  border-bottom:1px solid rgba(194,92,28,.4); padding-bottom:3px;
  transition:color .3s ease, border-color .3s ease;
}
.svc-book:hover,.svc-book:focus-visible{ color:var(--orange-dark); border-bottom-color:var(--orange-dark) }

.faq-item{ padding:0 0 30px; margin-bottom:30px; border-bottom:0.5px solid var(--rule) }
.faq-item:last-of-type{ border-bottom:0 }
.faq-q{ font-family:var(--serif); font-weight:400; font-size:25px; line-height:1.3; margin:0 0 12px }
.faq-a{ font-size:15px; line-height:1.85; margin:0; max-width:58ch; color:var(--ink-soft) }
.faq-a + .faq-a{ margin-top:12px }
.faq-a a{ color:var(--orange); text-decoration:none; border-bottom:1px solid rgba(194,92,28,.4) }
.faq-a a:hover,.faq-a a:focus-visible{ color:var(--orange-dark); border-bottom-color:var(--orange-dark) }

.placeholder{
  display:inline-block; background:#FFE9A8; color:#5A3E00;
  padding:2px 7px; border:1px dashed #B08900; font-size:13px;
}

/* ---------- instagram ---------- */
.feed{ border-top:0.5px solid var(--rule); padding:38px 0 8px }
.feed-head{ display:flex; justify-content:space-between; align-items:baseline }
.feed-head .label{ font-size:10px; color:var(--green) }
.feed-head .handle{ font-size:10px; color:var(--ink-soft); text-decoration:none }
.feed-head .handle:hover,.feed-head .handle:focus-visible{ color:var(--orange) }
/* height reserved so the footer doesn't jump while the widget loads */
.feed-body{ margin-top:20px; min-height:260px }

/* ---------- footer ---------- */
footer{
  border-top:0.5px solid var(--rule); margin-top:34px; padding:22px 0 44px;
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
}
.hours{ font-size:13px; color:var(--ink-soft) }
.social{ font-size:10px }
.social a{ color:var(--orange); text-decoration:none }
.social a:hover,.social a:focus-visible{ color:var(--orange-dark) }

/* ---------- narrow screens (V2 will tune this properly) ---------- */
@media (max-width:1080px){ .bg-orbs{ display:none } }
@media (max-width:820px){
  :root{ --gutter:22px }
  .logo-wrap{ margin:8px 0 0 }
  .logo-wrap img{ width:70% }
  nav{ gap:22px; margin-top:20px }
  .split{ grid-template-columns:1fr; gap:34px; padding:32px 0 44px }
  .stage{ min-height:340px }
  .feed-body{ min-height:420px }
  .svc-head{ flex-wrap:wrap; gap:6px }
  .svc-dots{ display:none }
}

@media (prefers-reduced-motion: reduce){
  .orb, .bg-orbs div{ animation:none }
  *{ transition-duration:.01ms !important }
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}