/* The faces are linked from index.html (line 28). They used to be @imported
   here as well, which registered every face in the FontFaceSet twice and put
   their discovery behind this file instead of in front of the preload
   scanner. The <link> in the markup is the one that stays. */

/* ============================================================ tokens ==== */
:root{
  /* ground */
  --paper:#ede8dd;
  --paper-lift:#f3efe5;
  --page:#f6f2e9;
  --paper-deep:#e4ddcf;

  /* ink.
     The ground is warm and light, so an alpha that looks like grey ink on
     white goes to nothing on paper. Every step here is set from the contrast
     it actually lands at over --paper, not from how it reads in the swatch.
     ink-2 is body copy at 6.4:1, ink-3 is the tracked labels at 4.7:1. */
  --ink:#241f19;
  --ink-2:rgba(36,31,25,.78);
  --ink-3:rgba(36,31,25,.66);
  --ink-4:rgba(36,31,25,.46);
  --hair:rgba(36,31,25,.2);
  --hair-soft:rgba(36,31,25,.11);

  /* accent */
  --gold:#a67c45;
  --gold-lift:#c2a16b;
  --gold-deep:#7d5a2c;   /* 5:1 on paper: it is used for words, not just rules */
  --sage:#8e9683;
  --oxblood:#8c4238;

  /* type */
  --display:'Cormorant Garamond','New York',Georgia,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --hand:'Caveat','Segoe Script',cursive;

  --tr-caps:.22em;   /* tracked small caps */
  --tr-wide:.32em;   /* the widest label tracking */
  --tr-nav:.06em;

  /* rhythm */
  --gut:clamp(20px,5vw,64px);
  --sec:clamp(72px,11vh,140px);
  --rule:1px;

  /* motion */
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-soft:cubic-bezier(.4,.01,.2,1);
  --e-back:cubic-bezier(.34,1.28,.64,1);
  --t-fast:.22s;
  --t-mid:.42s;
  --t-slow:.8s;

  --hdr:86px;
}
@media (max-width:760px){ :root{ --hdr:66px } }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.64;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overflow-wrap:break-word;
}
body.is-locked{overflow:hidden}

a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
/* An <img> carrying a height attribute keeps that height as a presentational
   hint unless CSS says otherwise, so any rule that sets only a width leaves
   the picture stretched to the attribute and object-fit falls back to `fill`.
   That is how the Worn magnolia came to be drawn 230 by 760. The reset gives
   every image a height that follows its own shape; the handful that really
   are sized in both directions say so in their own, more specific rule. */
img{height:auto}
/* An inline <svg viewBox> with no width or height takes its size from its
   containing block. Inside a shrink to fit box that resolves to nothing, and
   inside a wide one it resolves to 300 by 150. Both have shipped here: the
   carnet chevrons rendered at zero by zero for weeks, and the glass in the
   gallery cue rendered at ninety pixels. Every icon gets an explicit size,
   and this is the floor under the ones that get missed. */
button>svg,a>svg,span>svg,i>svg{width:1em;height:1em}
button,input,select,textarea{font:inherit;color:inherit}
button{border:none;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
::selection{background:rgba(36,31,25,.86);color:var(--paper)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}
/* Every route change sends the reading position to the top of the new view
   by focusing <main>, which is right for a screen reader and wrong for a
   ring: main is the whole page, so the ring was a gold rule drawn across the
   bottom of it. The move is not a control and does not need an indicator. */
main[tabindex="-1"]:focus,main[tabindex="-1"]:focus-visible{outline:none}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:8px;left:8px;z-index:2000;
  background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:2px;
  transform:translateY(-160%);transition:transform var(--t-fast) var(--e-out);
  font-size:12px;letter-spacing:var(--tr-caps);text-transform:uppercase;
}
.skip:focus{transform:none}

/* ============================================================== type ==== */
.d1{font-family:var(--display);font-weight:300;line-height:1.02;letter-spacing:-.005em;
    font-size:clamp(44px,7.2vw,104px)}
.d2{font-family:var(--display);font-weight:300;line-height:1.06;
    font-size:clamp(34px,4.6vw,66px)}
.d3{font-family:var(--display);font-weight:400;line-height:1.14;
    font-size:clamp(25px,2.7vw,38px)}
.d4{font-family:var(--display);font-weight:400;line-height:1.2;
    font-size:clamp(20px,1.8vw,26px)}
.it{font-style:italic;font-weight:300}

.label{
  font-size:11.5px;font-weight:400;letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--ink-3);
}
/* --gold is 3.1:1 on paper: a rule colour, not a word colour. Small caps
   set in it (the plate number, the 404) need --gold-deep, which is 5.1:1. */
.label-gold{color:var(--gold-deep)}
.eyebrow{
  font-size:12.5px;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--ink-3);
}
.lede{font-size:clamp(16.5px,1.5vw,19px);line-height:1.74;color:var(--ink-2);font-weight:400}
.body{font-size:16px;line-height:1.74;color:var(--ink-2);font-weight:400}
.small{font-size:13.5px;line-height:1.62;color:var(--ink-3)}
/* the display serif defaults to old style figures, which sit at three
   different heights next to the sans ones in the same table */
.num{font-variant-numeric:lining-nums tabular-nums;
     font-feature-settings:"tnum" 1,"lnum" 1}
.hand{font-family:var(--hand);font-size:22px;line-height:1.42;color:var(--gold-deep)}

/* ============================================================ layout ==== */
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{width:100%;max-width:980px;margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.stack>*+*{margin-top:var(--s,16px)}
.row{display:flex;align-items:center;gap:12px}
.row>*{min-width:0}
.grid{display:grid}
.grid>*{min-width:0}

.rule-paint{
  display:block;width:min(1020px,84vw);margin:clamp(28px,6vh,60px) auto;
  aspect-ratio:909/48;
  background:url(../img/atmos/divider.webp) center / contain no-repeat;
  opacity:.62;
}
.rule-paint.short{width:min(360px,46vw);opacity:.34}
.hr{height:1px;background:var(--hair);border:0;margin:0}

/* ========================================================== controls ==== */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;min-height:52px;padding:0 30px;
  font-size:12px;letter-spacing:var(--tr-caps);text-transform:uppercase;font-weight:400;
  border:1px solid var(--ink);border-radius:2px;color:var(--ink);
  background-color:transparent;overflow:hidden;isolation:isolate;
  transition:color var(--t-mid) var(--e-out),border-color var(--t-mid) var(--e-out);
  -webkit-tap-highlight-color:transparent;
}
.btn>span{position:relative;z-index:2}
/* the fill sweeps in from the left, the way a graver cuts */
.btn:before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--ink);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-mid) var(--e-out);
}
/* Hover is a mouse state. Chrome leaves :hover on the last element a finger
   touched until it touches something else, so an unguarded hover on a button
   that does not navigate — the piece page's Add to bag — left the primary CTA
   filled and its label white for the rest of the visit. Every hover in this
   file is behind (hover:hover) for that reason. */
@media (hover:hover){
  .btn:hover{color:var(--paper)}
  .btn:hover:before{transform:scaleX(1)}
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn[disabled]{opacity:.38;pointer-events:none}
/* A soft light that follows the cursor across the face of the fill. It is
   the ground the label sits on while it is under the cursor, so its strength
   is a contrast decision, not a taste one: at .22 it lifted the swept gold to
   rgb(150,121,81) and white on that measures 4.08:1. At .12 it measures
   4.8:1 and still reads as a light passing over the metal. */
.btn:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),
    rgba(255,250,235,.12),rgba(255,250,235,0) 68%);
  opacity:0;transition:opacity .3s var(--e-out);
}
@media (hover:hover){ .btn:hover:after{opacity:1} }
/* The two hover drop shadows that used to live here are gone. Neither was in
   the transition list, so both snapped on in one frame, and a 24px brown-black
   blur under a flat editorial button is the generic-UI tell. The fill sweeping
   in from the left is the answer to the hover; it does not need a shadow.
   The letter-spacing that opened the label out is gone for a second reason:
   it is a layout property, so it relaid the button and its row on every one
   of the 30 frames of the transition. */
@media (prefers-reduced-motion:reduce){
  .btn:after{display:none}
}

/* The sweep is the ground the label ends up on, so it has to carry the label.
   White on --gold is 3.7:1 and fails at 12px; on --gold-deep it is 6.2:1. */
.btn-gold{border-color:var(--gold);color:var(--gold-deep)}
.btn-gold:before{background:var(--gold-deep)}
@media (hover:hover){ .btn-gold:hover{color:#fff} }

.btn-solid{background-color:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-solid:before{background:var(--gold-deep)}
@media (hover:hover){ .btn-solid:hover{color:#fff;border-color:var(--gold-deep)} }

.btn-ghost{border-color:var(--hair);color:var(--ink-2)}
.btn-ghost:before{background:var(--paper-deep)}
@media (hover:hover){ .btn-ghost:hover{color:var(--ink);border-color:var(--ink-4)} }

.btn-sm{min-height:40px;padding:0 18px;font-size:11px}
.btn-block{display:flex;width:100%}

/* a text link whose rule is drawn, not switched on */
.ln{
  position:relative;display:inline-block;color:var(--ink);
  padding-bottom:2px;transition:color var(--t-fast) var(--e-out);
}
.ln:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right center;
  transition:transform var(--t-mid) var(--e-out);
}
.ln:focus-visible:after{transform:scaleX(1);transform-origin:left center}
@media (hover:hover){
  .ln:hover:after{transform:scaleX(1);transform-origin:left center}
}
.ln-on:after{transform:scaleX(1)}

.field{display:block}
.field>.label{display:block;margin-bottom:8px}
.input,.textarea{
  width:100%;min-height:50px;padding:12px 14px;
  background-color:var(--paper-lift);
  border:1px solid var(--hair);border-radius:2px;
  font-size:15px;font-weight:400;
  transition:border-color var(--t-fast) var(--e-out),background-color var(--t-fast) var(--e-out);
}
.textarea{min-height:104px;resize:vertical}
@media (hover:hover){ .input:hover,.textarea:hover{border-color:var(--ink-4)} }
.input:focus,.textarea:focus{outline:none;border-color:var(--gold);background-color:#fff;
  box-shadow:0 0 0 3px rgba(166,124,69,.11)}
.input::placeholder,.textarea::placeholder{color:var(--ink-4)}
.field.is-bad .input,.field.is-bad .textarea,
.field.is-bad .cs-btn{border-color:var(--oxblood)}
.err{display:block;margin-top:6px;font-size:12px;color:var(--oxblood);letter-spacing:.02em}
.field .err{max-height:0;overflow:hidden;opacity:0;
  transition:max-height var(--t-fast) var(--e-out),opacity var(--t-fast) var(--e-out),margin-top var(--t-fast)}
.field.is-bad .err{max-height:40px;opacity:1}

/* ========================================================== reveals ==== */
/* Base opacity stays 1 so a frozen-clock preview still shows the page.
   The .js class is what arms the hidden state, and the shown rule is
   scoped to out-specify it. */
html.js .rv{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .78s var(--e-out),transform .78s var(--e-out)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv-slow{transition-duration:1.05s}
html.js .rv-fade{transform:none}
html.js .rv-clip{
  opacity:1;transform:none;clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s var(--e-soft);
}
html.js .rv-clip.in{clip-path:inset(0 0 0 0)}
/* a rule that draws itself rather than switching on */
html.js .rv-draw{
  transform:none;opacity:1;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s var(--e-soft);
}
html.js .rv-draw.in{clip-path:inset(0 0 0 0)}
/* a word set on its own line, lifted out from behind a mask */
.mask{display:block;overflow:hidden}
html.js .mask>*{display:block;transform:translate3d(0,105%,0);
  transition:transform .92s var(--e-out)}
html.js .mask.in>*{transform:none}

@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .rv-clip,html.js .rv-draw,html.js .mask>*{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}

/* A finger needs more than a cursor does. */
@media (pointer:coarse){
  .btn-sm{min-height:44px}
  .qty button{width:40px;height:40px}
  .pill{min-height:40px}
  .icon-btn{width:46px;height:46px}
  .size{min-height:46px}
}

/* ================================================== the house dropdown ==
   A native select hands its open list to the operating system, which draws
   it in the wrong font on the wrong ground. This is the same control with
   the panel kept on the page. */
.cs{position:relative;display:inline-block;text-align:left}
.cs-wide{display:block;width:100%}
.cs-btn{
  display:inline-flex;align-items:center;gap:9px;width:100%;
  min-height:42px;padding:0 14px;
  border:1px solid var(--hair);border-radius:999px;
  background-color:rgba(252,249,242,.6);
  color:var(--ink);text-align:left;
  transition:border-color var(--t-fast) var(--e-out),background-color var(--t-fast) var(--e-out);
}
.cs-wide .cs-btn{border-radius:2px;min-height:50px;padding-inline:14px;
  background-color:var(--paper-lift);justify-content:flex-start}
@media (hover:hover){
  .cs-btn:hover{border-color:var(--ink-4);background-color:rgba(255,253,247,.94)}
}
.cs.is-open .cs-btn{border-color:var(--gold);background-color:#fff}
.cs-cap{font-size:11px;letter-spacing:var(--tr-caps);text-transform:uppercase;
  color:var(--ink-3);flex:none}
.cs-val{font-size:13px;letter-spacing:.04em;flex:1 1 auto;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cs-wide .cs-val{font-size:15px;letter-spacing:0}
.cs-chev{width:11px;height:8px;flex:none;color:var(--ink-3);
  transition:transform var(--t-fast) var(--e-out),color var(--t-fast)}
.cs.is-open .cs-chev{transform:rotate(180deg);color:var(--gold)}

.cs-menu{
  position:absolute;z-index:120;top:calc(100% + 7px);right:0;
  min-width:max(100%,224px);max-height:min(52vh,320px);overflow-y:auto;
  padding:6px;margin:0;
  background-color:var(--paper-lift);
  border:1px solid var(--hair);border-radius:3px;
  box-shadow:0 2px 6px rgba(58,44,26,.08),0 20px 46px rgba(58,44,26,.19);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);
  transform-origin:top right;
  transition:opacity .2s var(--e-out),transform .24s var(--e-out),visibility .24s;
}
.cs-wide .cs-menu{left:0;right:auto;transform-origin:top left}
.cs.cs-up .cs-menu{top:auto;bottom:calc(100% + 7px);transform-origin:bottom right;
  transform:translateY(6px) scale(.985)}
.cs.is-open .cs-menu{opacity:1;visibility:visible;transform:none}
.cs-menu:before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:3px;
  background:url(../img/atmos/paper.webp) center / cover no-repeat;opacity:.42;
}
.cs-opt{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:40px;padding:0 11px;border-radius:2px;cursor:pointer;
  font-size:14px;color:var(--ink-2);
  transition:background-color .16s var(--e-out),color .16s var(--e-out);
}
.cs-opt svg{width:15px;height:15px;flex:none;opacity:0;color:var(--gold);
  transition:opacity .16s var(--e-out)}
.cs-opt[aria-selected="true"]{color:var(--ink)}
.cs-opt[aria-selected="true"] svg{opacity:1}
.cs-opt.is-active{background-color:rgba(166,124,69,.13);color:var(--ink)}
@media (pointer:coarse){ .cs-btn{min-height:44px} .cs-opt{min-height:46px} }
@media (prefers-reduced-motion:reduce){
  .cs-menu{transition:none} .cs-chev{transition:none}
}