/* TOP HAIR — public hub styles.
   Two presentation modes share one set of content styles:
   - No-JS (default): sections stack in normal document flow, fully readable.
   - JS (html.js): the prototype's fixed single-screen hub with side rails. */

:root{
  --bone:#f3ece2;--bone-2:#ece2d4;--espresso:#2a221d;--espresso-soft:#5a4f46;
  --brass:#9a6a33;--brass-soft:#b98c52;--line:#d8ccbb;
  --ease:cubic-bezier(.72,0,.18,1);--dur:820ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  background:radial-gradient(120% 90% at 50% 12%, #f8f2ea 0%, var(--bone) 46%, var(--bone-2) 100%);
  background-attachment:fixed;
  color:var(--espresso);font-family:"Hanken Grotesk",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
a{color:inherit}

/* ---------- shared content styling (both modes) ---------- */
.brand{text-align:center;text-decoration:none;color:inherit;display:block}
.brand h1{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(2.6rem,7vw,4.4rem);letter-spacing:.14em;line-height:.95}
.brand .sub{font-size:.62rem;letter-spacing:.46em;text-transform:uppercase;color:var(--espresso-soft);margin-top:.9rem;padding-left:.46em}

.item{
  font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;font-weight:500;
  color:var(--espresso-soft);text-decoration:none;white-space:nowrap;
}
.item:hover{color:var(--espresso)}
.item.active{color:var(--brass)}

.cta{
  text-decoration:none;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;
  color:var(--bone);background:var(--espresso);padding:.95rem 2rem;border-radius:999px;white-space:nowrap;
  transition:background .35s ease;
}
.cta:hover{background:var(--brass)}

.panel .eyebrow{font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--brass)}
.panel h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(2rem,5vw,3rem);letter-spacing:.04em;margin:.7rem 0 1.4rem}
.panel p{color:var(--espresso-soft);line-height:1.75;font-size:.95rem;max-width:42ch;margin:0 auto}
.panel p.lead{color:var(--espresso);font-family:"Cormorant Garamond",serif;font-size:1.2rem;line-height:1.55;font-style:italic;margin-bottom:1.5rem}
.panel .rule{width:46px;height:1px;background:var(--line);margin:1.6rem auto}

.prices{list-style:none;max-width:30ch;margin:0 auto;text-align:left}
.prices li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.prices li span:last-child{color:var(--brass);font-variant-numeric:tabular-nums;white-space:nowrap}

.contact{font-size:.95rem;color:var(--espresso-soft);line-height:2}
.contact strong{color:var(--espresso);font-weight:600}
.contact .tel{color:var(--espresso-soft);text-decoration:none;border-bottom:1px solid var(--line)}
.contact .tel:hover{color:var(--brass)}
.contact .note{font-size:.82rem;line-height:1.6;color:var(--espresso-soft);max-width:34ch;margin:2rem auto 0;padding-top:1.5rem;border-top:1px solid var(--line);opacity:.85}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:1.1rem}
.gallery-grid .tile{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:10px;box-shadow:0 6px 18px rgba(42,34,29,.10);display:block}
.gallery-empty{color:var(--espresso-soft);font-size:.9rem;margin-top:1rem}
.gallery-cap{font-size:.72rem;color:var(--espresso-soft);margin-top:1rem;letter-spacing:.04em}
@media (max-width:520px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} }

/* ---------- no-JS / default: stacked, readable ---------- */
.stage{max-width:720px;margin:0 auto;padding:clamp(2.5rem,7vw,5rem) 1.5rem 5rem;text-align:center}
.stage > .brand{margin-bottom:2.5rem}
.rail{display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem;margin-bottom:2.5rem}
.stage > .cta{display:inline-block;margin-bottom:3.5rem}
.panels{display:block}
.panel{margin:0 auto 3.5rem;max-width:560px;scroll-margin-top:1.5rem}
.panel:last-child{margin-bottom:0}

/* ---------- JS hub: fixed single-screen stage ---------- */
.js body{overflow:hidden}
.js .stage{position:fixed;inset:0;max-width:none;margin:0;padding:0;overflow:hidden;text-align:initial}
.js .brand,.js .item,.js .cta,.js .panel{position:absolute;left:50%;top:50%;will-change:transform,opacity}
.js .brand{transform:translate(-50%,-50%);transition:transform var(--dur) var(--ease);cursor:pointer;z-index:20;user-select:none}

.js .rail{display:contents} /* items position themselves on the stage */
.js .item{
  transform:translate(-50%,-50%);
  transition:transform var(--dur) var(--ease),color .35s ease,opacity .5s ease;
  padding:.5rem .2rem;z-index:20;
}
.js .item::after{content:"";display:block;height:1px;background:var(--brass);width:0;margin-top:.5rem;transition:width .4s var(--ease)}
.js .item:hover::after,.js .item.active::after{width:100%}

.js .cta{
  transform:translate(-50%,-50%);
  transition:transform var(--dur) var(--ease),background .35s ease,color .35s ease;
  z-index:20;
}

.js .panels{display:contents}
.js .panel{
  transform:translate(-50%,-50%) scale(.96);width:min(90vw,560px);
  opacity:0;pointer-events:none;text-align:center;z-index:10;
  transition:opacity .6s ease var(--del,0ms),transform var(--dur) var(--ease);
}
.js .stage.is-open .panel.active{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.js .stage.is-open.m .panel.active{transform:translate(-50%,0) scale(1);overflow-y:auto;-webkit-overflow-scrolling:touch}

/* hide everything until hub.js has positioned it, to avoid a flash of
   overlapping centered elements */
.js .stage:not(.ready) .brand,
.js .stage:not(.ready) .item,
.js .stage:not(.ready) .cta{opacity:0;filter:blur(6px)}
.js .reveal{animation:rise .9s var(--ease) both}
@keyframes rise{from{opacity:0;filter:blur(6px)} to{opacity:1;filter:blur(0)}}

/* ---------- discreet admin link ---------- */
.admin-link{
  position:fixed;z-index:30;
  right:calc(10px + env(safe-area-inset-right));
  bottom:calc(10px + env(safe-area-inset-bottom));
  display:grid;place-items:center;width:36px;height:36px;
  color:var(--espresso-soft);opacity:.3;
  transition:opacity .35s ease,color .35s ease;
}
.admin-link:hover,.admin-link:focus-visible{opacity:1;color:var(--brass)}
.admin-link svg{width:15px;height:15px;display:block}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:0ms !important;animation-duration:0ms !important;animation-delay:0ms !important}
  .js .reveal{animation:none}
  .js .stage:not(.ready) .brand,
  .js .stage:not(.ready) .item,
  .js .stage:not(.ready) .cta{filter:none}
}