/* Juniper Row Salon. A concept site by Three Roses Digital. */

@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken";src:url("../fonts/hanken-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken";src:url("../fonts/hanken-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* Stand ins, shown only for the moment before the fonts above arrive on a slow connection. Each is a font the device already has,
   resized so its words take up the same room, so nothing jumps when the real font appears. */
@font-face{font-family:"Cormorant Fallback";src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Liberation Serif");font-weight:400 700;size-adjust:90.9%;ascent-override:101.6%;descent-override:31.6%;line-gap-override:0%}
@font-face{font-family:"Cormorant Fallback";src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Liberation Serif Italic");font-weight:400 700;font-style:italic;size-adjust:88.0%;ascent-override:105.0%;descent-override:32.6%;line-gap-override:0%}
@font-face{font-family:"Cormorant Fallback 2";src:local("Noto Serif"),local("NotoSerif");font-weight:400 700;size-adjust:79.9%;ascent-override:115.7%;descent-override:35.9%;line-gap-override:0%}
@font-face{font-family:"Cormorant Fallback 2";src:local("Noto Serif Italic"),local("NotoSerif-Italic");font-weight:400 700;font-style:italic;size-adjust:76.6%;ascent-override:120.6%;descent-override:37.4%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Roboto");font-weight:400 500;size-adjust:100.5%;ascent-override:99.5%;descent-override:30.1%;line-gap-override:0%}

:root{
  --stone:#EDEFEA;
  --white:#FFFFFF;
  --green:#1F3B33;
  --green-2:#2E5347;
  --blush:#EBCFC6;
  --ink:#16211D;
  --muted:#47534D;
  --line:#CDD3CB;
  --mist:#D9E2DC;
  --display:"Cormorant","Cormorant Fallback","Cormorant Fallback 2","Cormorant Garamond",Garamond,"Times New Roman",serif;
  --text:"Hanken","Hanken Fallback","Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1180px;
  --pad:clamp(20px,5vw,64px);
  --sec:clamp(72px,9vw,136px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--stone);color-scheme:light;color-scheme:only light}
body{margin:0;background:var(--stone);color:var(--ink);font-family:var(--text);font-weight:400;font-size:clamp(1rem,.2vw + .96rem,1.08rem);line-height:1.6;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,table,figure{margin:0}
ul{padding:0;list-style:none}
svg{display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:500;color:var(--green)}
em{font-style:italic}
:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.skip{position:absolute;left:12px;top:-80px;z-index:10;padding:12px 16px;background:var(--ink);color:var(--white);font-weight:500;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.defs{position:absolute}
.wrap{width:min(100% - 2 * var(--pad),var(--max));margin-inline:auto}

.concept-note{padding:9px var(--pad);background:#0D0D0D;color:#FFFFFF;font:400 13px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-align:center}
.concept-note a{white-space:nowrap;text-underline-offset:2px}

/* Header */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding-block:clamp(20px,2.6vw,32px)}
.logo{display:flex;align-items:center;gap:12px;color:var(--green);text-decoration:none}
.logo .sprig{width:30px;height:36px}
.logo-text{font-family:var(--display);font-weight:500;font-size:1.85rem;line-height:1;white-space:nowrap}
.logo-sub{color:var(--green-2)}
.top ul{display:flex;align-items:center;gap:clamp(18px,2.6vw,38px)}
.nav-link a{padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;text-decoration:none;transition:background-size .35s}
.nav-link a:hover,.nav-link a:focus-visible{background-size:100% 1px}

.btn{display:inline-flex;white-space:nowrap;align-items:center;justify-content:center;min-height:54px;padding:0 32px;border-radius:999px;background:var(--green);color:var(--white);font-weight:500;text-decoration:none;transition:background-color .25s}
.btn:hover{background:var(--green-2)}
.btn-small{min-height:44px;padding:0 22px;font-size:.95rem}
.link{padding-bottom:3px;border-bottom:1px solid currentColor;color:var(--green);text-decoration:none;transition:border-color .25s}
.link:hover{border-bottom-color:transparent}

/* Hero: a row of arched mirrors */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,84px);align-items:end;padding-block:clamp(34px,5.4vw,80px) var(--sec)}
.hero h1{font-size:clamp(3.05rem,1.3rem + 6.2vw,6.7rem);line-height:.95;letter-spacing:-.022em;text-wrap:balance}
.hero h1 .l{display:block}
.hero-lead{max-width:29em;margin-top:clamp(20px,2.4vw,32px);font-size:1.16em;line-height:1.5;color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:clamp(26px,3vw,42px)}
.arches{display:flex;align-items:flex-end;gap:clamp(10px,1.3vw,18px);height:clamp(320px,41vw,580px)}
.arch{position:relative;overflow:hidden;border-radius:999px 999px 0 0}
.arch-a{flex:31 1 0;height:66%;background:var(--blush)}
.arch-b{flex:41 1 0;height:100%;background:var(--green);color:var(--blush)}
.arch-c{flex:25 1 0;height:42%;border:1px solid var(--green);border-bottom:0;background:linear-gradient(118deg,transparent 46%,rgba(255,255,255,.8) 46% 52%,transparent 52% 57%,rgba(255,255,255,.55) 57% 59.5%,transparent 59.5%)}
.arch .strands{position:absolute;inset:0;width:100%;height:100%;opacity:.9}

/* Section heads */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,5vw,84px);align-items:end;padding-bottom:clamp(26px,3.2vw,46px)}
.sec-head h2,.color-copy h2{font-size:clamp(2.6rem,1.5rem + 3.7vw,4.6rem);line-height:.98;letter-spacing:-.015em}
.sec-head p{max-width:31em;color:var(--muted)}

/* Services */
.services{padding-bottom:var(--sec)}
.svc-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4.4vw,72px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--green)}
.svc-col h3,.note-cols h3{margin-bottom:8px;font-size:2rem;font-style:italic;line-height:1.1}
.price-list li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.price-list .p{font-family:var(--display);font-weight:500;font-size:1.55rem;line-height:1;color:var(--green);font-variant-numeric:lining-nums}
.svc-note{margin-top:20px;font-size:.95em;color:var(--muted)}

/* Color */
.color{padding-block:var(--sec);background:var(--white)}
.color-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center}
.color-copy p{max-width:28em;margin-top:18px;color:var(--muted)}
.swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(8px,1.4vw,20px)}
.swatches li{display:flex;flex-direction:column;align-items:center;gap:14px;font-size:.92rem;line-height:1.25;text-align:center}
.lock{width:100%;max-width:78px;height:auto}
.sw-1{color:#1E1A19}
.sw-2{color:#3B2A22}
.sw-3{color:#6A4230}
.sw-4{color:#A5522C}
.sw-5{color:#C89A58}
.sw-6{color:#DDBE82}
.sw-7{color:#CBBFAE}
.sw-8{color:#B9BBBD}

/* Your visit */
.notes{padding-block:var(--sec)}
.note-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4.4vw,72px)}
.note-cols li{padding-top:22px;border-top:1px solid var(--green)}
.note-cols p{color:var(--muted)}

/* Hours and visit */
.visit{padding-bottom:var(--sec)}
.visit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,84px);align-items:start;padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--green)}
.hours{width:100%;border-collapse:collapse}
.hours th,.hours td{padding:15px 0;border-bottom:1px solid var(--line);font-weight:400;text-align:left}
.hours td{font-family:var(--display);font-weight:500;font-size:1.5rem;line-height:1;color:var(--green);font-variant-numeric:lining-nums;text-align:right;white-space:nowrap}
.hours .closed td{font-style:italic;color:var(--muted)}
.placeholders{display:grid;gap:14px}
.placeholder{padding:18px 22px;border:1px dashed #84918A;border-radius:16px;font-size:.95em;color:var(--muted)}
.placeholder strong{display:block;margin-bottom:3px;font-weight:500;color:var(--ink)}

/* Book: one tall arch that grows out of the footer */
.book-inner{max-width:780px;padding:clamp(118px,17vw,214px) clamp(24px,6vw,76px) clamp(54px,7vw,92px);border-radius:999px 999px 0 0;background:var(--green);color:var(--white);text-align:center}
.book h2{font-size:clamp(2.9rem,1.5rem + 5vw,5.6rem);line-height:.98;letter-spacing:-.015em;color:var(--white)}
.book-tel{display:inline-block;margin-top:20px;font-family:var(--display);font-weight:500;font-size:clamp(2.1rem,1.3rem + 3vw,3.5rem);line-height:1.1;color:var(--blush);font-variant-numeric:lining-nums;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s}
.book-tel:hover{background-size:100% 1px}
.book p{max-width:25em;margin:16px auto 0;color:var(--mist)}
.book :focus-visible,.foot :focus-visible{outline-color:var(--blush)}

.foot{background:var(--green);color:var(--mist);font-size:.97rem}
.foot-grid{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px;padding-block:24px;border-top:1px solid rgba(255,255,255,.2)}
.foot-name{font-family:var(--display);font-weight:500;font-size:1.35rem;line-height:1.2;color:var(--white)}

@media (min-width:901px) and (max-width:1040px){
  .hero h1{font-size:7.4vw}
}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);gap:44px}
  .arches{height:clamp(250px,64vw,440px)}
  .sec-head{grid-template-columns:minmax(0,1fr);gap:14px}
  .svc-cols,.note-cols{grid-template-columns:minmax(0,1fr);gap:38px}
  .color-grid,.visit-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .nav-link{display:none}
  .logo-text{font-size:1.6rem}
  .swatches{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:28px}
  .foot-grid{flex-direction:column}
}
@media (max-width:430px){
  .logo{gap:9px}
  .logo .sprig{width:24px;height:29px}
  .logo-text{font-size:1.42rem}
  .btn-small{padding:0 17px;font-size:.9rem}
}
@media (max-width:359px){
  .top{gap:12px}
  .logo{gap:7px}
  .logo .sprig{width:20px;height:24px}
  .logo-text{font-size:1.2rem}
  .btn-small{padding:0 13px;font-size:.84rem}
}
@media print{
  html,body,.concept-note,.btn,.arch,.color,.lock,.book-inner,.foot{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}