/* Shared site chrome — the home-page header, cluster, burger and menu overlay, carried to every page (Julien, Oct 25 2026). Extracted from style.css; edit there first, then re-extract. */
:root{
  --font-primary: 'Roobert', system-ui, sans-serif;
  --font-secondary: 'Roobert', system-ui, sans-serif;

  --bg-light: #eae4df;
  --bg-light-alt: #d3cac3;
  --bg-dark: #222222;
  --bg-dark-alt: #222222;
  --white: #fff;
  --light: #f3f3f3;
  --medium: #757474;
  --dark: #222222;
  --black: #000;

  --main: #f15e3f;          
  --main-alt: #d3492c;

  --border-light: hsla(0, 0%, 100%, .2);
  --border-dark: rgba(0, 0, 0, .2);
  --shadow: 0px 7.5px 22.5px 0px rgba(0, 0, 0, .12);

  --radius: clamp(5.2px, 4.17vw, 7.9px);
  --radius-lg: clamp(9px, 0.825vw, 15px);

  --expoInOut: cubic-bezier(.895, 0, .18, 1);
  --expoOut: cubic-bezier(.16, 1, .3, 1);
  --expoIn: cubic-bezier(.7, 0, .84, 0);
  --easeOut: cubic-bezier(.05, .76, .38, 1.015);

  --gutter: clamp(26.2px, 2.083vw, 39.8px);
  --gap: clamp(7.5px, 0.782vw, 15px);
}

.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  padding: clamp(12px, 1.2vw, 22.5px) 0;
  transition: transform .6s var(--expoOut), padding .5s var(--expoOut);
}

.header::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(247, 244, 241, .58);
  -webkit-backdrop-filter: blur(13.5px) saturate(1.4);
  backdrop-filter: blur(13.5px) saturate(1.4);
  border-bottom: 1px solid rgba(23, 21, 18, .07);
  opacity: 0;
  transition: opacity .45s var(--expoOut);
  pointer-events: none;
}

.header .container{ position: relative; }

.header .container{ display: flex; align-items: center; gap: var(--gap); }

.header .logo{
  display: inline-flex;
  align-items: center;
  gap: clamp(7.5px, .06vw, 11.2px);
  flex: none;
}

.header .logo .wordmark{
  display: flex;
  align-items: center;
  color: var(--white);
  transition: opacity .5s var(--expoOut), transform .5s var(--expoOut);
}

.header .logo .wordmark .lockup{
  height: clamp(24px, 1.95vw, 37.5px);
  width: auto;
  display: block;
  transition: height .5s var(--expoOut);
}

.header .nav{
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 22.5px);
  margin-left: auto;
  transition: opacity .5s var(--expoOut), transform .5s var(--expoOut);
}

.header .nav a{
  color: var(--white);
  font-size: clamp(10.5px, 0.83vw, 15.8px);
  letter-spacing: -.01em;
  opacity: .92;
  transition: opacity .3s;
}

.header .nav a:hover{ opacity: 1; color: var(--main); }

.header .cluster{
  display: flex;
  align-items: center;
  gap: clamp(4.5px, .0375vw, 7.5px);
  background: var(--white);
  border-radius: 749.2px;
  padding: clamp(3.8px, .315vw, 6px);
  box-shadow: var(--shadow);
  flex: none;
  transition: background .45s var(--expoOut), box-shadow .45s var(--expoOut), padding .45s var(--expoOut);
}

.header .cluster .pill{
  border: 1px solid var(--border-dark);
  border-radius: 749.2px;
  height: clamp(25.5px, 2.1vw, 39px);
  display: inline-flex;
  align-items: center;
  padding: 0 clamp(12px, 0.975vw, 18.8px);
  font-size: clamp(9.8px, 0.78vw, 15px);
  color: var(--dark);
  text-decoration: none;
  transition: background .4s var(--expoOut), color .4s var(--expoOut), border-color .4s var(--expoOut);
}

.header .cluster .pill:hover{ background: var(--main); color: var(--white); border-color: var(--main); }

.header .cluster .iconbtn{
  width: clamp(25.5px, 2.1vw, 39px);
  height: clamp(25.5px, 2.1vw, 39px);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 749.2px;
  color: var(--dark);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .3s;
}

.header .cluster .iconbtn:hover{ background: var(--light); }

.header .cluster .iconbtn svg{ width: clamp(11.2px, 0.862vw, 15.8px); height: clamp(11.2px, 0.862vw, 15.8px); }

.header .burger{
  flex: none;
  width: clamp(30px, 2.4vw, 43.5px);
  height: clamp(30px, 2.4vw, 43.5px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4.5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  margin-left: clamp(3px, .03vw, 6px);
}

.header .burger span{
  display: block;
  width: clamp(15px, 1.275vw, 23.2px);
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .5s var(--expoOut), background .5s, width .5s var(--expoOut);
}

.header .burger:hover span:nth-child(1){ width: clamp(10.5px, 0.9vw, 16.5px); }

.header.--dark-text .logo .wordmark, .header.--dark-text .nav a{ color: var(--dark); }

.header.--dark-text .burger span{ background: var(--dark); }

.header.--dark-text .nav a:hover{ color: var(--main); }

.header.--scrolled .nav{
  opacity: 0;
  transform: translateY(-7.5px);
  pointer-events: none;
}

.header.--scrolled .logo .wordmark{ color: var(--dark); }

.header.--scrolled .burger span{ background: var(--dark); }

.header.--scrolled{ padding: clamp(7.5px, .7125vw, 13.5px) 0; }

.header.--scrolled::before{ opacity: 1; }

.header.--scrolled .logo .wordmark .lockup{ height: clamp(20.2px, 1.575vw, 30px); }

.header.--scrolled .cluster{ background: transparent; box-shadow: none; padding: 0; }

.header.--hidden{ transform: translateY(-120%); }

.menu{
  position: fixed; inset: 0;
  z-index: 95;
  background: var(--bg-light);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s var(--expoOut), visibility 0s linear .6s;
}

.menu.--open{ opacity: 1; visibility: visible; pointer-events: all; transition-delay: 0s; }

.menu .container{ padding: clamp(67.5px, 6.75vw, 120px) 0 clamp(30px, 3.0vw, 52.5px); width: 100%; }

.menu .cols{ display: flex; gap: clamp(30px, 4.5vw, 90px); align-items: flex-end; flex-wrap: wrap; }

.menu .primary li{ overflow: hidden; padding: .06em .12em .14em; margin: -.06em -.12em -.14em; }

.menu .primary a{
  display: inline-block;
  font-size: clamp(30px, 3.38vw, 64.5px);
   font-weight:300;
  letter-spacing: -.05em;
  line-height: 1.18;
  transform: translateY(140%);
  transition: transform .9s var(--expoOut), color .3s;
}

.menu.--open .primary a{ transform: translateY(0); }

.menu .primary a:hover{ color: var(--main); }

.menu .primary li:nth-child(1) a{ transition-delay: .05s; }

.menu .primary li:nth-child(2) a{ transition-delay: .1s; }

.menu .primary li:nth-child(3) a{ transition-delay: .15s; }

.menu .primary li:nth-child(4) a{ transition-delay: .2s; }

.menu .primary li:nth-child(5) a{ transition-delay: .25s; }

.menu .secondary{ display: flex; flex-direction: column; gap: .9em; }

.menu .secondary a{
  font-size: clamp(12px, 1.04vw, 20.2px);
  letter-spacing: -.02em;
  color: var(--medium);
  transition: color .3s;
}

.menu .secondary a:hover{ color: var(--main); }

.menu .meta{
  margin-top: clamp(30px, 3.375vw, 60px);
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  font-family: var(--font-secondary);
  font-size: clamp(10.53px, 6.25vw, 12px);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--medium);
}

.menu .closer{
  position: absolute;
  top: clamp(15px, 1.5vw, 28.5px);
  right: var(--gutter);
  width: clamp(33px, 2.7vw, 48px);
  height: clamp(33px, 2.7vw, 48px);
  border-radius: 749.2px;
  background: var(--dark);
  color: var(--white);
  border: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .4s, transform .6s var(--expoOut);
}

.menu .closer:hover{ background: var(--main); transform: rotate(90deg); }

.menu .closer svg{ width: 40%; height: 40%; }
@media (max-width: 1024px){.header .nav{ display: none; }.header .cluster{ margin-left: auto; }.header .burger span{ background: var(--white); }.header.--dark-text .burger span{ background: var(--dark); }.header.--scrolled .burger span{ background: var(--dark); }}
@media (max-width: 760px){.header .cluster .pill{ display: none; }}
@media (prefers-reduced-motion: reduce){.loader{ transition: none; }}

.header .cluster .iconbtn{ position: relative; }

.header .cluster .iconbtn .badge{
  position: absolute;
  top: 2px; right: 0;
  min-width: 12px; height: 12px;
  border-radius: 749.2px;
  background: var(--main);
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

.header .cluster .iconbtn .badge:empty{ display: none; }

.header .cluster .iconbtn .pro-dot{
  position: absolute;
  top: 3px; right: 3px;
  width: 6px; height: 6px;
  border-radius: 749.2px;
  background: #42ec8b;
}

.menu .primary-wrap{ display: flex; gap: clamp(30px, 4.5vw, 90px); align-items: flex-start; }

.menu .menu-k{ font-family: 'Roobert', sans-serif; font-size: clamp(7.5px, .6vw, 10px); letter-spacing: .22em; color: var(--main); display: block; margin-bottom: clamp(6px, .75vw, 14px); }

.menu .primary.--split a{ font-size: clamp(16.5px, 1.72vw, 33px); }

.menu .primary.--split li{ padding: .04em .1em .1em; }

body.--pp5 .header:not(.--scrolled) .nav a{ color: #fff; }

body.--pp5 .header:not(.--scrolled) .wordmark{ color: #fff; }

body.--pp5 .header:not(.--scrolled) .cluster{ color: #fff; }

body.--pp5 .header:not(.--scrolled) .cluster a, body.--pp5 .header:not(.--scrolled) .cluster button{ color: #fff; }

.header .cluster .iconbtn.--signed-in::after{
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 6px; height: 6px;
  border-radius: 749.2px;
  background: var(--main);
}
.header .container,.menu .container{margin:auto;max-width:calc(100% - clamp(52.5px,4.167vw,79.5px));position:relative}
body.--locked{overflow:hidden}
.header .nav a,.menu a{text-decoration:none}

/* guard against page-level .logo/.nav rules on pages that host the chrome */
.header .logo{display:block;font-size:inherit;margin:0;padding:0}
.header .nav{font-size:inherit}

/* Category nav (Julien, Oct 25 2026 — option C): the eleven editions across the top in short names, between the logo and the cluster; hamburger and search stay where they are. Stays visible on scroll (dark text on the frosted bar). */
.header .cluster{margin-left:0}.header .nav.cats{position:static;transform:none;margin:0 clamp(14px,1.6vw,28px) 0 auto;flex:0 1 auto;min-width:0;overflow:visible;gap:clamp(14px,1.9vw,32px);padding:4px 0;line-height:1.3}   /* overflow visible + line-height: descenders ('Flooring') were clipped (Julien, Oct 26 2026) */   /* Julien, Oct 26 2026: nav justified right, beside the cluster */
/* product pages (Julien, Oct 25 2026, option 2): the header is a solid Natural Black bar (#222222, Pantone Natural Black C) from the start — the editions read white on it over any ground; the sheet starts under it */
.header.--darkbar::before{opacity:1;background:#222222;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:none;-webkit-backdrop-filter:none}.header.--darkbar .nav.cats a,.header.--darkbar .logo .wordmark{color:#fff}.header.--darkbar .nav.cats a.on,.header.--darkbar .nav.cats a:hover{color:var(--main)}.header.--darkbar .burger span{background:#fff}.header.--darkbar.--scrolled .logo .wordmark{color:#fff}.header.--darkbar.--scrolled .burger span{background:#fff}
.header.--solid::before{opacity:1}.header.--solid .logo .wordmark,.header.--solid .nav.cats a{color:var(--dark)}.header.--solid .nav.cats a:hover,.header.--solid .nav.cats a.on{color:var(--main)}.header.--solid .burger span{background:var(--dark)}.header.--solid .nav.cats a{opacity:.8}.header.--solid .nav.cats a.on{opacity:1}
/* Julien, Oct 26 2026: nav like the relats reference — sentence case, ~15px, generous spacing */
.header .nav.cats a{font-size:clamp(13px,1.05vw,16px);letter-spacing:-.01em;text-transform:none;opacity:.92;white-space:nowrap}
.header .nav.cats a:hover,.header .nav.cats a.on{opacity:1;color:var(--main)}
/* Julien, Oct 25 2026: the editions row disappears on the first scroll (the frosted bar keeps logo, cluster and burger; the menu carries the full list) */
.header.--scrolled .nav.cats{opacity:0;transform:translateY(-7.5px);pointer-events:none}
.header .cluster button.iconbtn{border:0;background:transparent;cursor:pointer;font:inherit}
@media(max-width:1300px){.header .nav.cats a{font-size:12.5px}}@media(max-width:1100px){.header .nav.cats{display:none}.header .cluster{margin-left:auto}}
/* Search: a glass sheet that filters the editions and the Stone Library by name */
.srch{position:fixed;inset:0;z-index:95;display:none;align-items:flex-start;justify-content:center;padding:96px 20px 20px;background:rgba(34,34,34,.28)}
.srch.on{display:flex}
.srch .box{width:min(640px,100%);background:rgba(34,30,26,.42);-webkit-backdrop-filter:blur(40px) saturate(1.6);backdrop-filter:blur(40px) saturate(1.6);border:1px solid rgba(255,255,255,.18);border-radius:24px;color:#fff;font-family:'Roobert',system-ui,sans-serif;font-weight:400;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.22)}
.srch input{width:100%;border:0;background:transparent;color:#fff;font:inherit;font-weight:300;font-size:24px;padding:22px 26px;outline:0}
.srch input::placeholder{color:rgba(255,255,255,.62)}
.srch ul{list-style:none;margin:0;padding:6px 10px 14px;max-height:52vh;overflow:auto;border-top:1px solid rgba(255,255,255,.1);scrollbar-width:thin}
.srch li a{display:flex;align-items:baseline;gap:14px;padding:10px 16px;border-radius:12px;color:#fff;text-decoration:none;font-size:15px}
.srch li a:hover,.srch li.on a{background:rgba(255,255,255,.1)}
.srch li a small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);min-width:58px}
.srch li.k{padding:12px 16px 4px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.srch .none{padding:14px 16px 10px;font-size:13.5px;color:rgba(255,255,255,.62)}
/* Menu footer (Julien, Oct 26 2026): bare mailto + Instagram icon (data-ig: swap the handle in one place) */
.menu .meta .meta-contact{display:inline-flex;align-items:center;gap:12px}
.menu .meta a{color:inherit;transition:color .3s}
.menu .meta a:hover{color:var(--main)}
.menu .meta .ig svg{width:18px;height:18px;display:block}