/* ==========================================================================
   RESET + BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--text-hi);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,picture,video,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--gilt);outline-offset:3px;border-radius:2px}
::selection{background:var(--gilt);color:var(--ink)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.06;letter-spacing:-.02em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.2}
p{max-width:var(--maxw-text)}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gilt);color:var(--ink);padding:.85rem 1.5rem;
  font-weight:600;font-size:var(--fs-sm)
}
.skip-link:focus{left:1rem;top:1rem}

/* Layout ------------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp-gutter)}
/* Sections clip horizontally so decorative glows and hover nudges can never
   create a page-level horizontal scrollbar. Vertical stays visible. */
.section{padding-block:var(--sp-section);position:relative;overflow-x:clip}
.section--light{background:var(--museum);color:var(--text-dark-hi)}
.section--light p{color:var(--text-dark-lo)}
.section--warm{background:var(--museum-warm);color:var(--text-dark-hi)}
.section--warm p{color:var(--text-dark-lo)}
.section--dark{background:var(--ink)}
.section--soft{background:var(--ink-soft)}

/* Eyebrow: hairline rule + letterspaced small caps ------------------------- */
.eyebrow{
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--font-body);
  font-size:var(--fs-eyebrow);
  letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  color:var(--gilt);margin-bottom:1.4rem
}
.eyebrow::before{content:"";width:40px;height:1px;background:var(--gilt);flex:none}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{content:"";width:40px;height:1px;background:var(--gilt);flex:none}

.section-head{margin-bottom:clamp(2.5rem,5vw,4rem);max-width:64ch}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head--center .eyebrow::after{content:"";width:40px;height:1px;background:var(--gilt)}
.section-head p{margin-top:1.15rem;color:var(--text-lo);font-size:1.0625rem}
.section--light .section-head p,.section--warm .section-head p{color:var(--text-dark-lo)}
.section-head--center p{margin-inline:auto}

.lede{font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.65}

/* Buttons ----------------------------------------------------------------- */
.btn{
  --btn-bg:var(--gilt);--btn-fg:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.95rem 2rem;
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--radius);cursor:pointer;overflow:hidden;
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
  box-shadow:var(--shadow-lift-sm);
}
.btn::after{ /* shimmer sweep */
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform 620ms var(--ease-out);pointer-events:none
}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{box-shadow:var(--shadow-gilt),var(--shadow-lift-sm);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--outline{--btn-bg:transparent;--btn-fg:var(--gilt);box-shadow:inset 0 0 0 1px var(--gilt)}
.btn--outline:hover{--btn-bg:var(--gilt);--btn-fg:var(--ink)}
.btn--crimson{--btn-bg:var(--crimson);--btn-fg:#fff}
.btn--crimson:hover{--btn-bg:var(--crimson-lit)}
.btn--ghost-light{--btn-bg:transparent;--btn-fg:var(--text-dark-hi);box-shadow:inset 0 0 0 1px var(--border-light)}
.btn--ghost-light:hover{--btn-bg:var(--text-dark-hi);--btn-fg:var(--museum)}
.btn--lg{min-height:60px;padding:1.15rem 2.6rem;font-size:1rem}
.btn--full{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.25rem}

/* THE SIGNATURE DETAIL — every image sits in a real CSS-drawn frame:
   outer moulding, gold fillet, mat board.                                     */
.framed{
  position:relative;
  background:linear-gradient(145deg,#2f2a24,#191512 45%,#332c22);
  padding:12px;border-radius:var(--radius);
  box-shadow:var(--shadow-lift);
  transition:transform var(--dur-slow) var(--ease-frame),box-shadow var(--dur-slow) var(--ease-frame);
}
.framed::before{ /* gold fillet */
  content:"";position:absolute;inset:9px;border:1px solid var(--gilt);
  opacity:.55;pointer-events:none;z-index:2;transition:opacity var(--dur) var(--ease-out)
}
.framed__mat{
  background:var(--linen);padding:clamp(10px,2.2vw,20px);
  overflow:hidden;position:relative;
}
.framed__mat img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 900ms var(--ease-frame)}
.framed:hover{box-shadow:var(--shadow-gilt),var(--shadow-lift)}
.framed:hover::before{opacity:1}
.framed:hover .framed__mat img{transform:scale(1.055)}
.framed--gilt{background:linear-gradient(145deg,#d9b64a,#8a6d14 48%,#e8ce72)}
.framed--noMat .framed__mat{padding:0;background:transparent}

/* Utility ------------------------------------------------------------------ */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gilt{color:var(--gilt)}
.serif{font-family:var(--font-display)}
.text-center{text-align:center}
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--glass-border),transparent);border:0}