@font-face{
  font-family:'Inter';
  src:url('assets/inter-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --paper:#F5ECE8;
  --ink:#363031;
  --muted:#6D625D;
  --amber:#AB895B;
  --line:rgba(54,48,49,.16);
  --edge:clamp(20px,3vw,48px);
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:
    radial-gradient(110% 70% at 86% -14%, #EBDFDA 0%, rgba(235,223,218,0) 48%),
    radial-gradient(90% 70% at 0% 105%, #EFE4DE 0%, rgba(239,228,222,0) 60%),
    var(--paper);
  color:var(--ink);
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- stone arch --------------------------------------------------- */

.arch{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:clamp(160px,20vw,320px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
  z-index:0;
  pointer-events:none;
}

/* ---------- frame -------------------------------------------------------- */

.page{
  position:relative;
  z-index:1;
  min-height:100svh;
  padding:0 var(--edge);
  display:flex;
  flex-direction:column;
}

/* ---------- header ------------------------------------------------------- */

.nav{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:clamp(20px,4vw,60px);
  padding-top:clamp(26px,4.4vh,48px);
}

.brand{
  margin:0;
  font-size:clamp(15px,2.1vw,38px);
  font-weight:600;
  line-height:1.2;
  letter-spacing:.665em;
  text-transform:uppercase;
  color:var(--ink);
}
.brand span{display:block}
.brand span:last-child{letter-spacing:.485em}

.links{
  display:flex;
  gap:clamp(16px,3.1vw,56px);
  padding-top:clamp(4px,.9vh,10px);
  font-size:clamp(11px,.92vw,15px);
  letter-spacing:.005em;
  color:var(--muted);
  white-space:nowrap;
}
.links a{
  color:inherit;
  text-decoration:none;
  transition:color .2s ease;
}
.links a:hover,.links a.is-current{color:var(--ink)}

/* ---------- quote -------------------------------------------------------- */

.quote{
  padding-top:clamp(66px,20vh,190px);
  padding-left:clamp(0px,8.7vw,140px);
  padding-bottom:clamp(40px,7vh,70px);
}

.eyebrow{
  margin:0;
  font-size:clamp(12px,1.31vw,21px);
  font-weight:400;
  letter-spacing:.325em;
  text-transform:uppercase;
  color:var(--muted);
}

.price{
  margin:clamp(8px,2.2vh,21px) 0 0;
  font-size:clamp(52px,13.1vw,236px);
  font-weight:700;
  line-height:.86;
  letter-spacing:-.048em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  display:flex;
  align-items:baseline;
}

.price .sym{
  font-size:.72em;
  font-weight:500;
  letter-spacing:0;
  line-height:1;
  margin-right:.055em;
}

.price .amt{display:block}
.price.is-empty .amt{font-weight:300;letter-spacing:0}

.unit{
  margin:clamp(18px,4.4vh,44px) 0 0;
  font-size:clamp(11px,1.06vw,17px);
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--muted);
}

.stamp{
  margin:clamp(12px,2.8vh,28px) 0 0;
  display:flex;
  align-items:center;
  gap:.62em;
  font-size:clamp(11px,1.13vw,18px);
  letter-spacing:.275em;
  text-transform:uppercase;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stamp .sep{color:var(--amber)}
.dot{
  width:.46em;height:.46em;
  border-radius:50%;
  background:var(--amber);
  flex:0 0 auto;
}
.dot.is-idle{background:#9A918B}
.dot.is-error{background:#B0743F}

/* ---------- metal switch ------------------------------------------------- */

.switch{
  display:flex;
  gap:clamp(22px,2.7vw,46px);
  margin-top:clamp(38px,8.4vh,82px);
}

.switch button{
  appearance:none;
  background:none;
  border:0;
  padding:0 0 clamp(9px,1.5vh,13px);
  border-bottom:2px solid transparent;
  font-family:inherit;
  font-size:clamp(11px,1.19vw,19px);
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--muted);
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.switch button:hover{color:var(--ink)}
.switch button.is-active{color:var(--ink);border-bottom-color:var(--amber)}
.switch button:focus-visible{outline:2px solid var(--amber);outline-offset:5px}

/* ---------- rule + per gram --------------------------------------------- */

.rule{
  width:min(100%,clamp(320px,70.8vw,1133px));
  height:1px;
  background:var(--line);
  margin-top:clamp(12px,2.4vh,24px);
}

.gram{
  display:flex;
  align-items:baseline;
  gap:clamp(18px,2.6vw,40px);
  margin-top:clamp(22px,4.2vh,42px);
}

.gram-label{
  font-size:clamp(10px,.94vw,15px);
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--muted);
}

.gram-value{
  font-size:clamp(18px,2vw,32px);
  font-weight:700;
  letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
}

/* ---------- version ------------------------------------------------------ */

.ver{
  position:absolute;
  right:var(--edge);
  bottom:clamp(14px,2.4vh,24px);
  font-size:10px;
  letter-spacing:.14em;
  color:rgba(109,98,93,.55);
}

/* ---------- grain -------------------------------------------------------- */

.grain{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  opacity:.26;
  mix-blend-mode:multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23m)' opacity='.16'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  background-size:700px 700px, 220px 220px;
}

/* ---------- accessibility ------------------------------------------------ */

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- small screens ------------------------------------------------ */

@media (max-width:900px){
  .nav{flex-direction:column;gap:18px}
  .links{flex-wrap:wrap;
    gap:clamp(16px,4.6vw,32px);
    font-size:14px;
  }
  .arch{top:clamp(86px,13vw,120px)}
  .quote{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-left:0;
    padding-top:clamp(24px,4vh,48px);
    padding-bottom:clamp(48px,8vh,90px);
  }
  .price{font-size:clamp(46px,17vw,120px);margin-top:18px}
  .unit{margin-top:20px}
  .stamp{margin-top:16px}
  .switch{margin-top:clamp(30px,4.4vh,46px)}
  .rule{width:100%;margin-top:clamp(16px,2.6vh,24px)}
  .gram{margin-top:clamp(18px,2.8vh,26px)}
}

@media (max-width:520px){
  .brand{font-size:14px;letter-spacing:.30em}
  .brand span:last-child{letter-spacing:.22em}
  .price{font-size:clamp(40px,17.5vw,88px)}
  .links{font-size:13px;letter-spacing:.02em}
  .eyebrow,.unit,.stamp{letter-spacing:.24em}
  .gram-label{letter-spacing:.2em}
}