/* The Arch Bar — brand package site. Gilt on fascia black. */
:root{
  --fascia:#14100D; --ink:#1A1411; --stout:#0A0706;
  --gilt:#C9A14A; --gilt-light:#E3C26A; --gilt-deep:#8E6B24;
  --amber:#D68A2A; --cream:#EFE6D2; --stone:#9A9186;
  --green:#0F6B3B; --oxblood:#6B2520; --tan:#8B5A2B;
  --line:color-mix(in srgb, var(--gilt) 26%, transparent);
  --font-display:"Playfair Display",Georgia,serif;
  --font-heritage:"IM Fell English SC",Georgia,serif;
  --font-cond:"Oswald","Work Sans",sans-serif;
  --font-body:"Work Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fascia);color:var(--cream);
  font-family:var(--font-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 50% -10%, color-mix(in srgb,var(--amber) 7%, transparent), transparent 55%);}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
section{padding:64px 0;border-top:1px solid color-mix(in srgb,var(--gilt) 12%, transparent)}

/* ---- masthead ---- */
.mast{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:10px 20px;background:color-mix(in srgb,var(--stout) 88%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.mast-logo{height:30px;width:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.mast-title{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:13px;color:var(--gilt)}
.mast nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px}
.mast nav a{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;color:var(--stone);text-decoration:none;padding:6px 9px;border-radius:6px;
  transition:color .2s,background .2s}
.mast nav a:hover{color:var(--fascia);background:var(--gilt)}

/* ---- cover ---- */
.cover{position:relative;text-align:center;padding:96px 24px 80px;
  border-bottom:1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb,var(--gilt) 4%, transparent) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, var(--stout), var(--fascia));}
.cover-inner{position:relative;display:inline-block;padding:46px 54px;
  border:1px solid var(--gilt);outline:3px solid var(--gilt);outline-offset:5px}
.cover-logo{height:120px;width:auto;margin:6px 0 12px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.cover h1{font-family:var(--font-display);font-weight:900;font-size:clamp(34px,6vw,60px);
  margin:0;letter-spacing:-.01em;line-height:1.02}
.italic-gilt{font-style:italic;color:var(--gilt);
  text-shadow:0 1px 0 var(--gilt-deep),0 2px 5px rgba(0,0,0,.4)}
.cover-line{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.32em;
  color:var(--gilt);margin:16px 0 6px;font-size:13px}
.cover-sub{color:var(--stone);font-size:13px;margin:0}

/* ---- shared section bits ---- */
.eyebrow{font-family:var(--font-heritage);text-transform:uppercase;letter-spacing:.34em;
  color:var(--gilt);font-size:13px;margin:0 0 10px}
.sec-title{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,4vw,38px);
  margin:0 0 12px}
.sec-intro{max-width:680px;color:color-mix(in srgb,var(--cream) 82%, transparent);
  font-size:15px;margin:0 0 28px}
.cap{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:12px;color:var(--gilt);margin:0 0 8px}
.note{color:var(--stone);font-size:12.5px;margin:6px 0 0}

.grid{display:grid;gap:16px}
.card{background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:18px}

/* ---- logo ---- */
.logo-grid{grid-template-columns:repeat(4,1fr)}
.lockup{display:flex;align-items:center;justify-content:center;height:150px;border-radius:8px;padding:18px}
.lockup img{max-height:96px;max-width:90%;width:auto;object-fit:contain}
.bg-fascia{background:var(--fascia);border:1px solid var(--line)}
.bg-cream{background:var(--cream)}
.bg-stone{background:var(--stone)}
figure{margin:0}
figcaption{margin-top:10px}

/* ---- do/don't ---- */
.dd{grid-template-columns:1fr 1fr}
.dd h4{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;
  margin:0 0 10px;font-size:14px}
.do{border-left:3px solid var(--green)} .do h4{color:var(--gilt-light)}
.dont{border-left:3px solid var(--oxblood)} .dont h4{color:#cf7a72}
.dd ul{margin:0;padding-left:18px} .dd li{margin:6px 0;font-size:13.5px;color:color-mix(in srgb,var(--cream) 85%, transparent)}

/* ---- colour ---- */
.swatches{grid-template-columns:repeat(4,1fr)}
.swatch{background:var(--ink);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.chip{height:74px}
.swatch .meta{padding:10px 12px}
.nm{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.hx{font-family:var(--font-cond);color:var(--gilt);font-size:12px;margin-top:2px}
.use{color:var(--stone);font-size:11.5px;margin-top:3px}

/* ---- type ---- */
.type-card .specimen{padding:16px 0;border-bottom:1px solid color-mix(in srgb,var(--gilt) 10%, transparent)}
.type-card .specimen:last-child{border-bottom:0}
.sp-display{font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1.1}
.sp-eyebrow{font-family:var(--font-heritage);text-transform:uppercase;letter-spacing:.34em;
  font-size:18px;color:var(--gilt)}
.sp-cond{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;font-size:22px;color:var(--cream)}
.sp-body{font-family:var(--font-body);font-size:16px;max-width:560px;color:color-mix(in srgb,var(--cream) 88%, transparent)}

/* ---- galleries ---- */
.gal-block{margin-bottom:30px}
.gal-head{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.gal-head .t{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.12em;font-size:15px;color:var(--cream)}
.gal-head .n{font-family:var(--font-cond);color:var(--gilt);font-size:12px}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.gal-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px;cursor:zoom-in;
  border:1px solid var(--line);transition:transform .18s,border-color .18s}
.gal-grid img:hover{transform:translateY(-2px);border-color:var(--gilt)}

/* ---- before/after sliders ---- */
.previews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.ba{background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px}
.ba-stage{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:8px;user-select:none}
.ba-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-after{clip-path:inset(0 0 0 50%)}
.ba-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gilt);transform:translateX(-1px)}
.ba-knob{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  background:var(--gilt);color:var(--fascia);display:flex;align-items:center;justify-content:center;
  font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-tag{position:absolute;top:8px;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:10px;padding:3px 7px;border-radius:4px;background:rgba(10,7,6,.7);color:var(--cream)}
.ba-tag.l{left:8px} .ba-tag.r{right:8px;color:var(--gilt)}
.ba-cap{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--stone);margin:10px 2px 2px}

.loading{color:var(--stone);font-size:14px}

/* ---- lightbox ---- */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(5,4,3,.92);
  display:flex;align-items:center;justify-content:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:94vw;max-height:90vh;object-fit:contain;border:1px solid var(--line);border-radius:6px}
.lb-close{position:absolute;top:18px;right:22px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:var(--ink);color:var(--cream);font-size:18px;cursor:pointer}
.lb-close:hover{background:var(--gilt);color:var(--fascia)}

footer{padding:40px 24px;text-align:center;color:var(--stone);font-size:12px;border-top:1px solid var(--line)}

/* ---- responsive ---- */
@media(max-width:860px){
  .logo-grid{grid-template-columns:repeat(2,1fr)}
  .swatches{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .dd{grid-template-columns:1fr}
  .swatches{grid-template-columns:repeat(2,1fr)}
  .mast-title{display:none}
}