/* Shared tokens and chrome. Every page links this, so the header, the footer
   and the frame look identical wherever they appear. */
:root{
  --paper:#FCFBF8; --paper-2:#F5F3ED; --ink:#16203A; --blue:#22386B; --blue-soft:#E7ECF6;
  --gold:#A9822F; --muted:#6C7488; --line:#E2DFD6;

  --fs-xs:  clamp(.70rem,.67rem + .14vw,.78rem);
  --fs-sm:  clamp(.83rem,.80rem + .18vw,.93rem);
  --fs-base:clamp(.98rem,.94rem + .22vw,1.08rem);
  --fs-lg:  clamp(1.2rem,1.08rem + .55vw,1.55rem);
  --fs-xl:  clamp(1.6rem,1.35rem + 1.1vw,2.4rem);
  --fs-2xl: clamp(2.1rem,1.6rem + 2.2vw,3.4rem);
  --pad: clamp(1.15rem,.9rem + 2.6vw,4.5rem);

  --foil-gold:  linear-gradient(128deg,#F7E7BC,#D9B673 14%,#FBF1D6 28%,#C9A053 44%,#F4E3B4 58%,#CDA75C 74%,#F8EDCB 88%,#D4B067);
  --foil-silver:linear-gradient(128deg,#F4F6F8,#CBD1D8 14%,#FFFFFF 28%,#BAC2CB 44%,#EDF0F3 58%,#C3CAD2 74%,#FAFBFC 88%,#CDD3DA);
}
*,*::before,*::after{box-sizing:border-box}
/* an author `display` beats the UA rule for [hidden], which silently keeps
   hidden elements on screen. Make hidden mean hidden. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:'Jost',system-ui,sans-serif; font-weight:300; font-size:var(--fs-base); line-height:1.62}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif; font-weight:300; margin:0; line-height:1.08; letter-spacing:-.01em}
p{margin:0}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.eyebrow{font-size:var(--fs-xs); letter-spacing:.3em; text-transform:uppercase; color:var(--gold)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* header */
header{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1rem var(--pad); background:var(--paper); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:baseline; gap:.42em; font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.1rem,.95rem + .45vw,1.4rem); letter-spacing:.3em; text-transform:uppercase}
.brand span:last-child{color:var(--gold)}
nav{display:flex; align-items:center; gap:clamp(.9rem,2vw,2.2rem); font-size:var(--fs-sm); letter-spacing:.06em}
nav a{color:var(--muted)}
nav a:hover,nav a[aria-current]{color:var(--ink)}
.lang{display:flex; align-items:center; gap:.1rem; font-size:var(--fs-xs); letter-spacing:.18em; color:var(--muted)}
.lang button{background:none; border:0; cursor:pointer; padding:.2rem .28rem; letter-spacing:inherit}
.lang button[aria-pressed="true"]{color:var(--blue)}
.cart{font-size:var(--fs-sm); letter-spacing:.1em; color:var(--ink)}
@media (max-width:820px){nav a{display:none}}

/* the product, wherever it is shown */
.frame{border-style:solid; border-width:var(--bw,12px); border-color:transparent;
  border-image:var(--frameimg,url(tex/frame-natural.png)) 120 stretch;
  box-shadow:0 18px 40px -22px rgba(22,32,58,.55)}
.sheet{position:relative; background:var(--foil,var(--foil-gold)); overflow:hidden; aspect-ratio:var(--ratio,.75)}
.sheet img{width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; filter:contrast(1.06) saturate(.86)}

/* controls */
.chip{padding:.6rem 1rem; border:1px solid var(--line); background:transparent; cursor:pointer;
  font-size:var(--fs-sm); letter-spacing:.04em}
.chip[aria-pressed="true"]{border-color:var(--blue); background:var(--blue-soft)}
.chip[disabled]{opacity:.4; cursor:not-allowed}
.chip .cm{color:var(--muted); font-size:var(--fs-xs); margin-left:.45rem}
.btn{padding:.95rem 1.9rem; border:1px solid var(--blue); background:var(--blue); color:var(--paper);
  font-size:var(--fs-sm); letter-spacing:.16em; text-transform:uppercase; cursor:pointer}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}

/* footer */
footer{border-top:1px solid var(--line); background:var(--paper-2);
  padding:clamp(2.5rem,6vh,4.5rem) var(--pad) 2rem; display:grid; gap:2.5rem}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem}
.col{display:grid; gap:.45rem; font-size:var(--fs-sm); color:var(--muted)}
.col b{font-weight:400; color:var(--ink); font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; margin-bottom:.3rem}
.col a:hover{color:var(--blue)}
.fine{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:var(--fs-xs); color:var(--muted); letter-spacing:.1em}

/* first-visit notice */
.notice{position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between; padding:.9rem var(--pad);
  background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -8px 24px -20px rgba(22,32,58,.5)}
.notice p{font-size:var(--fs-sm); color:var(--muted); max-width:80ch; margin:0}
.notice a{color:var(--blue); text-decoration:underline; text-underline-offset:3px}
.notice-actions{display:flex; gap:.6rem; flex-wrap:wrap}
.notice button{padding:.6rem 1.3rem; border:1px solid var(--blue); background:var(--blue); color:var(--paper);
  font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; cursor:pointer}
/* refusing must be exactly as easy as accepting */
.notice button.ghost{background:transparent; color:var(--ink); border-color:var(--line)}