/* ==========================================================================
   Beezy Beads

   Every colour, typeface and spacing decision lives in the :root block
   below. Change a value there and it updates everywhere on the shop.
   Nothing further down invents its own colour.
   ========================================================================== */

:root{
  /* ---- colour ---------------------------------------------------------
     Sampled off the photograph on the home page: the sea at dusk, wet
     sand, and the gold of the wire. The greys are pulled very slightly
     toward the sea so nothing on the page reads as a flat machine grey. */
  --ground:#FAFAF8;
  /* The page is not one flat colour any more: it starts at --ground and
     settles into --sand by the foot of the document. Components still take
     --ground, which is the gradient's own first colour, so a sticky header
     or a filter bar sitting near the top disappears into it. */
  --sand:#E7E1D5;
  --surface:#FFFFFF;
  --raise:#EDF3F4;
  --ink:#32433B;
  --mute:#5E7178;
  --sea:#2F6274;
  --sea-deep:#204C5C;
  --sea-soft:#E4EEF1;
  --night:#0E1519;

  /* state, kept apart from the accent so "in stock" never reads as a link */
  --stock:#2C6A52;
  --low:#8A5622;
  --gone:#8B9498;
  --alarm:#A33A2C;

  /* the ink again, at low alpha - a rule is the text colour thinned, not a
     grey of its own, so these follow --ink whenever it moves */
  --line:rgba(50,67,59,.15);
  --hair:rgba(50,67,59,.08);

  /* ---- type ---------------------------------------------------------- */
  --display:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* ---- layout -------------------------------------------------------- */
  --pad:clamp(14px,3.6vw,40px);
  --wrap:1240px;
  --r:3px;
  --bar:57px;
}

*{box-sizing:border-box}

/* The gutter the scrollbar sits in is held open whether or not the page is
   long enough to need one. Without it, filtering a grid down to two pieces
   takes the scrollbar away, the viewport gets wider, and everything centred
   on it slides sideways - the same jump a drawer or a sheet used to cause by
   locking the page behind it. Where the scrollbar floats over the page this
   reserves nothing and costs nothing. */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* The front of the shop fades from the light neutral at the top of the page
   to sand at the bottom of it. The gradient is sized to the body, which is
   the whole document, so it reads as one wash from the wordmark down to the
   footer rather than repeating once per screen. min-height keeps a short
   page - a 404, an empty shop - from finishing the fade in 200 pixels.
   The back room and the checkout stay flat on purpose. */
body.nu{
  min-height:100vh;
  background:linear-gradient(180deg,var(--ground) 0%,var(--sand) 100%) no-repeat;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sea);outline-offset:2px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.lbl{font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.skip{
  position:absolute;left:8px;top:-60px;z-index:60;background:var(--ink);color:#fff;
  padding:10px 14px;border-radius:var(--r);transition:top .18s;
}
.skip:focus{top:8px}
[hidden]{display:none!important}

/* ==========================================================================
   Header
   ========================================================================== */

.top{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--ground) 94%,transparent);
  backdrop-filter:saturate(160%) blur(9px);
  -webkit-backdrop-filter:saturate(160%) blur(9px);
  border-bottom:1px solid var(--line);
}
.top .in{
  max-width:var(--wrap);margin:0 auto;padding:10px var(--pad);
  display:flex;align-items:center;gap:clamp(12px,2.6vw,26px);min-height:var(--bar);
}
.brand{display:flex;align-items:center;margin-right:auto;color:var(--ink)}
.brand svg{width:clamp(116px,17vw,150px);height:auto;fill:currentColor}
.top nav{display:flex;gap:clamp(13px,2.4vw,22px)}
.top nav a{color:var(--mute);font-weight:500;padding:4px 0}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--sea)}
.ig{display:inline-flex;color:var(--mute);padding:4px}
.ig:hover{color:var(--sea)}
.ig svg{width:19px;height:19px}
.bagbtn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--ink);color:#fff;border:0;border-radius:var(--r);
  padding:8px 13px;font-weight:600;font-size:13px;
}
.bagbtn:hover{background:var(--sea)}
.bagbtn .n{
  background:#fff;color:var(--ink);border-radius:999px;min-width:19px;height:19px;padding:0 5px;
  display:inline-grid;place-items:center;font-size:11.5px;font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   Photo band, used as the opener on the home and about pages
   ========================================================================== */

.band{position:relative;background:var(--night)}
.band>img{width:100%;height:clamp(190px,30vw,330px);object-fit:cover;object-position:50% 44%;opacity:.92}
.band.tall>img{height:clamp(240px,42vw,470px)}
.band .over{
  position:absolute;inset:auto 0 0 0;
  padding:clamp(16px,3vw,30px) var(--pad);
  background:linear-gradient(to top,rgba(10,18,22,.86),rgba(10,18,22,.15) 65%,transparent);
  color:#EAF2F4;
}
.band .over .in{max-width:var(--wrap);margin:0 auto}
.band h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(21px,3.4vw,33px);letter-spacing:-.022em;line-height:1.16;
  margin:0;text-wrap:balance;max-width:22ch;
}
.band p{margin:5px 0 0;color:#B7C8CE;font-size:clamp(13px,1.5vw,15px);max-width:56ch}

/* ==========================================================================
   Sections
   ========================================================================== */

section{padding:clamp(20px,3.4vw,38px) 0}
section.last{padding-bottom:clamp(34px,5vw,60px)}
.sechead{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
  margin-bottom:clamp(14px,2.4vw,22px);
}
.sechead h2{
  font-family:var(--display);font-weight:600;font-size:clamp(19px,2.4vw,25px);
  letter-spacing:-.022em;margin:0;
}
.sechead .aside{margin-left:auto;color:var(--mute);font-size:13.5px}
.sechead .aside a{color:var(--sea);font-weight:600;box-shadow:inset 0 -1px 0 var(--sea)}

/* ==========================================================================
   The grid of pieces
   ========================================================================== */

.grid{display:grid;gap:clamp(10px,1.8vw,18px);grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}}

.tile{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;
}
.tile>a{display:block}
.tile .nm a:hover{box-shadow:inset 0 -1px 0 currentColor}
.tile figure{margin:0;aspect-ratio:1;background:var(--sea-soft);overflow:hidden;position:relative}
.tile figure img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.tile:hover figure img{transform:scale(1.04)}
.tile figure .none{
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--mute);font-size:12.5px;letter-spacing:.04em;
}
.pill{
  position:absolute;top:8px;left:8px;background:var(--surface);
  border-radius:999px;padding:3px 9px;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.pill.ok{color:var(--stock)}
.pill.low{color:var(--low)}
.pill.gone{color:var(--gone)}
.tile .body{padding:11px 12px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.tile .nm{
  font-family:var(--display);font-weight:600;
  font-size:clamp(14.5px,1.6vw,16.5px);letter-spacing:-.018em;line-height:1.25;
}
.tile .mt{color:var(--mute);font-size:12.5px}
.tile .foot{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:11px}
.tile .pr{font-family:var(--display);font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}
/* A sold piece is still worth looking at - it is the best argument for the
   ones that are left - so the photograph keeps its colour and the name its
   ink. The SOLD badge and the dead Add button say it plainly enough, and
   the whole tile has already sunk to the bottom of the grid. */

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  border:1px solid var(--ink);background:transparent;border-radius:var(--r);
  padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:background .18s,color .18s,border-color .18s;
}
.btn:hover{background:var(--ink);color:#fff}
.btn.solid{background:var(--ink);color:#fff}
.btn.solid:hover{background:var(--sea);border-color:var(--sea)}
.btn.big{padding:13px 20px;font-size:15px;width:100%}
.btn.quiet{border-color:var(--line);color:var(--mute)}
.btn.quiet:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn[disabled],.btn[aria-disabled="true"]{
  border-color:var(--hair);color:var(--gone);background:transparent;
  cursor:not-allowed;pointer-events:none;
}
.btn .spin{
  width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.tile .add{margin-left:auto}

/* ==========================================================================
   Product page
   ========================================================================== */

.product{
  display:grid;gap:clamp(18px,3vw,44px);grid-template-columns:1fr;
  padding-top:clamp(16px,2.6vw,30px);
}
@media(min-width:820px){.product{grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);align-items:start}}

.shots{position:relative}
/* Beside the photograph, never on it: a quiet way back that does not sit
   over the piece. On a narrow screen there is nowhere to put it but above;
   from 1100px up it moves into a column of its own to the left of the
   photograph, where it reads as the way out of the page rather than as a
   heading over it. */
.product > .back{
  grid-column:1 / -1;justify-self:start;
  display:inline-flex;align-items:center;gap:4px;
  margin:0 0 2px -6px;padding:6px 10px;border-radius:999px;
  color:var(--mute);font-size:13.5px;font-weight:600;line-height:1;
  transition:color .15s,background .15s;
}
.product > .back svg{width:16px;height:16px;flex:none}
.product > .back:hover{color:var(--ink);background:var(--raise)}

@media(min-width:1100px){
  .product{
    grid-template-columns:auto minmax(0,1.05fr) minmax(320px,.95fr);
    column-gap:clamp(12px,1.6vw,22px);
  }
  /* All three on the first row, so the link sits level with the top of the
     photograph rather than floating at the middle of a tall page. */
  .product > .back{grid-column:1;grid-row:1;justify-self:start;align-self:start;margin:0}
  .product > .shots{grid-column:2;grid-row:1}
  .product > .detail{
    grid-column:3;grid-row:1;
    /* the column gap shrank for the link's sake; the reading column keeps
       the distance from the photograph it had before */
    padding-left:clamp(6px,1.4vw,22px);
  }
}
.shots figure{margin:0;background:var(--sea-soft);border-radius:var(--r);overflow:hidden;aspect-ratio:1}
.shots figure img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:8px;margin-top:9px;overflow-x:auto;padding-bottom:4px}
.thumbs button{
  flex:none;width:64px;height:64px;padding:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--hair);background:var(--sea-soft);cursor:pointer;
}
.thumbs button[aria-current="true"]{border-color:var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:cover}

.detail h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(24px,3.4vw,33px);letter-spacing:-.025em;line-height:1.14;margin:0 0 6px;
  text-wrap:balance;
}
.detail .price{
  font-family:var(--display);font-weight:600;font-size:22px;
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:11px;
}
.detail .price .pill{position:static}
.detail .desc{margin:16px 0;color:var(--mute);max-width:52ch;white-space:pre-line}
.detail dl{
  margin:16px 0 0;display:grid;grid-template-columns:auto 1fr;gap:7px 16px;
  font-size:14px;border-top:1px solid var(--hair);padding-top:14px;
}
.detail dt{color:var(--mute)}
.detail dd{margin:0}
/* Sizes. A row of real buttons rather than a dropdown: on a phone they are
   easier to hit, and a sold-out size can be shown as sold instead of
   silently missing from a list. */
.pick{margin:18px 0 0;border-top:1px solid var(--hair);padding-top:16px}
.sizes-label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute);margin-bottom:9px;
}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.size{
  min-width:56px;padding:10px 14px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r);
  font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;
  transition:border-color .15s,background .15s,color .15s;
}
.size:hover:not([disabled]){border-color:var(--ink)}
.size[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.size[disabled]{
  cursor:not-allowed;color:var(--gone);border-color:var(--hair);
  background:var(--raise);text-decoration:line-through;
}
.sizes-note{margin:10px 0 0;font-size:12.5px;color:var(--mute)}

.detail .buy{margin:20px 0 0;display:grid;gap:9px}
.detail .note{color:var(--mute);font-size:13px;margin:0}

/* ==========================================================================
   Prose, used on About and the policy blocks
   ========================================================================== */

.prose{max-width:62ch}
.prose h2{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.4vw,24px);letter-spacing:-.022em;margin:26px 0 8px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px;color:var(--mute)}
.prose p.lead{color:var(--ink);font-size:clamp(16px,2vw,18.5px)}
.prose a{color:var(--sea);font-weight:600;box-shadow:inset 0 -1px 0 var(--sea)}
.split{display:grid;gap:clamp(18px,3vw,44px);grid-template-columns:1fr;align-items:start}
@media(min-width:820px){.split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
/* Photographs here vary from square to very tall. Cap the height and crop,
   so one portrait shot cannot stretch a section down two screens. */
.split img{
  width:100%;max-height:clamp(300px,46vw,520px);
  object-fit:cover;object-position:50% 45%;border-radius:var(--r);
}

/* ==========================================================================
   Bag drawer
   ========================================================================== */

.scrim{
  position:fixed;inset:0;background:rgba(10,18,22,.42);z-index:30;
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.scrim[data-open]{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(390px,100%);z-index:40;
  background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(101%);transition:transform .28s cubic-bezier(.2,.75,.3,1);
  display:flex;flex-direction:column;
}
.drawer[data-open]{transform:none}
.drawer>header{display:flex;align-items:center;gap:10px;padding:15px var(--pad);border-bottom:1px solid var(--hair)}
.drawer>header h2{font-family:var(--display);font-weight:600;font-size:17px;margin:0;margin-right:auto}
.x{border:0;background:transparent;cursor:pointer;font-size:22px;line-height:1;color:var(--mute);padding:2px 6px}
.x:hover{color:var(--ink)}
.lines{flex:1;overflow-y:auto;padding:2px var(--pad)}
.lines .empty{color:var(--mute);padding:26px 0;text-align:center}
.line{
  display:grid;grid-template-columns:52px 1fr auto;gap:11px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--hair);
}
.line img{width:52px;height:52px;object-fit:cover;border-radius:var(--r);background:var(--sea-soft)}
.line .n{display:block;font-weight:600;font-size:13.5px;line-height:1.3}
.line .q{display:block;color:var(--mute);font-size:12.5px}
.line .p{font-variant-numeric:tabular-nums;font-weight:600;font-size:13.5px;text-align:right}
.qty{display:inline-flex;align-items:center;gap:2px;margin-top:5px}
.qty button{
  width:24px;height:24px;border:1px solid var(--line);background:transparent;border-radius:var(--r);
  cursor:pointer;color:var(--mute);line-height:1;display:grid;place-items:center;font-size:14px;
}
.qty button:hover:not([disabled]){color:var(--ink);border-color:var(--ink)}
.qty button[disabled]{opacity:.4;cursor:not-allowed}
.qty .v{min-width:26px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
/* Sits beside the counter, far enough from + that a thumb aiming for one
   never lands on the other. */
.line .drop{background:none;border:0;color:var(--mute);cursor:pointer;font-size:12px;
  padding:0;margin:5px 0 0 14px}
.line .drop:hover{color:var(--alarm)}

/* the way back out of the bag: the checkout button's shape, in white, sitting
   directly under the pieces rather than down beside the total */
.lines .keep{margin:16px 0 4px;background:var(--surface);color:var(--ink)}
.lines .keep:hover{background:var(--sea-soft);border-color:var(--ink);color:var(--ink)}

.sum{padding:14px var(--pad) max(20px,env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:9px}
.sum .fine{font-size:12px;color:var(--mute);text-align:center;margin:0}

/* A label on the left, a figure on the right. Used by the bag drawer and by
   the order summary on the checkout page, so it is not scoped to either. */
.r{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13.5px;color:var(--mute);font-variant-numeric:tabular-nums;
}
.r.t{color:var(--ink);font-weight:600;font-size:16.5px;font-family:var(--display)}

/* ==========================================================================
   Checkout
   ========================================================================== */

.checkout{
  display:grid;gap:clamp(20px,3vw,46px);grid-template-columns:1fr;
  padding:clamp(18px,3vw,34px) 0 clamp(34px,5vw,60px);align-items:start;
}
@media(min-width:900px){.checkout{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)}}
@media(min-width:900px){.checkout .review{position:sticky;top:calc(var(--bar) + 18px)}}

.pay-card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:clamp(14px,2.4vw,22px)}
.pay-card h1{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.8vw,27px);letter-spacing:-.024em;margin:0 0 4px}
.pay-card .sub{color:var(--mute);margin:0 0 18px;font-size:14px}
.field-group{margin:0 0 18px}
.field-group>h2{
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:-.01em;
  margin:0 0 9px;display:flex;align-items:baseline;gap:8px;
}
.field-group>h2 span{font-family:var(--body);font-weight:400;font-size:12.5px;color:var(--mute)}
.express{min-height:0}
.express:empty{display:none}
.orline{
  display:flex;align-items:center;gap:12px;color:var(--mute);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:18px 0;
}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}

.pay-note{color:var(--mute);font-size:12.5px;margin:10px 0 0;text-align:center}
#pay-hint{color:var(--low)}

.review{background:var(--raise);border:1px solid var(--hair);border-radius:var(--r);padding:clamp(14px,2.4vw,20px)}
.review h2{font-family:var(--display);font-weight:600;font-size:15px;margin:0 0 12px}
.review .line{grid-template-columns:46px 1fr auto;border-bottom-color:var(--line)}
.review .line:last-of-type{border-bottom:0}
.review .line img{width:46px;height:46px}
.review .totals{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;display:grid;gap:8px}

.notice{
  border-radius:var(--r);padding:11px 13px;font-size:13.5px;margin:0 0 14px;
  border:1px solid var(--line);background:var(--raise);color:var(--ink);
}
.notice.bad{border-color:rgba(163,58,44,.35);background:rgba(163,58,44,.07);color:var(--alarm)}
.notice.good{border-color:rgba(44,106,82,.35);background:rgba(44,106,82,.07);color:var(--stock)}
.notice:empty{display:none}

/* ==========================================================================
   Order confirmation
   ========================================================================== */

.done{max-width:640px;margin:0 auto;padding:clamp(26px,5vw,60px) 0}
.done .tick{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--stock);color:#fff;margin:0 0 14px;
}
.done h1{font-family:var(--display);font-weight:600;font-size:clamp(24px,3.4vw,32px);letter-spacing:-.025em;margin:0 0 6px}
.done .sub{color:var(--mute);margin:0 0 22px}
.done .card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:clamp(14px,2.4vw,20px)}
.done dl{margin:16px 0 0;display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:14px}
.done dt{color:var(--mute)}
.done dd{margin:0}

/* ==========================================================================
   Loading placeholders
   ========================================================================== */

.skel{background:linear-gradient(90deg,var(--raise),var(--sea-soft),var(--raise));
  background-size:200% 100%;animation:sweep 1.3s ease-in-out infinite;border-radius:var(--r)}
@keyframes sweep{0%{background-position:200% 0}100%{background-position:-200% 0}}
.tile.is-loading figure{background:var(--raise)}
.tile.is-loading .nm,.tile.is-loading .mt,.tile.is-loading .pr{
  color:transparent;background:var(--raise);border-radius:2px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-foot{border-top:1px solid var(--line);margin-top:clamp(20px,4vw,44px)}
.site-foot .in{
  max-width:var(--wrap);margin:0 auto;padding:22px var(--pad) 40px;
  display:flex;flex-wrap:wrap;gap:9px 22px;align-items:baseline;
  color:var(--mute);font-size:13px;
}
.site-foot a:hover{color:var(--ink)}
.site-foot .sp{margin-left:auto}

/* ==========================================================================
   Front of house - home, store and about

   Shared pieces (header, section headings, footer) are scoped to body.nu.
   The opener and the wordmark are home only.

   The display face is Cormorant Garamond, already self hosted in
   assets/fonts and declared in fonts.css - no new download, nothing fetched
   from Google.
   ========================================================================== */

/* The display face has one weight, so nothing below asks for another.

   --hero used to be 2200px: the two photographs and the wordmark ran nearly
   to the edges of a wide screen while the pieces, the About block and the
   footer stopped at --wrap, and the page read as two documents. It is the
   reading width now, and the whole page lines up on one measure. */
body.nu{--serif:'Instrument Serif',Georgia,'Times New Roman',serif;--bar:78px;--hero:var(--wrap)}

/* the stamp off the business card, standing in for a wordmark and for Home */
body.nu .beemark{
  display:flex;align-items:center;color:var(--ink);
  margin-right:clamp(8px,1.2vw,16px);
}
body.nu .beemark svg{width:clamp(60px,8vw,98px);height:auto;fill:currentColor;display:block}
body.nu .beemark:hover{color:var(--sea)}

/* The home page opens straight into the photographs, so the rule under the
   header lands across the top of them like a seam. It waits until the page
   has been scrolled, where it is doing the job it is there for. */
body.home .top{border-bottom-color:transparent}
body.home[data-scrolled] .top{border-bottom-color:var(--line)}

/* ---- header: nav only, since the wordmark now lives in the page --------- */
body.nu .top .in{padding-top:0;padding-bottom:0;min-height:var(--bar)}
body.nu .top .in{max-width:var(--hero)}
body.nu .top nav{margin-right:auto}
body.nu .top nav a{
  font-family:var(--serif);font-weight:400;line-height:1;
  font-size:clamp(20px,2.7vw,29px);letter-spacing:-.01em;
  padding:0 0 3px;box-shadow:none;border-bottom:1px solid transparent;
}
body.nu .top nav a:hover{color:var(--ink);border-bottom-color:var(--line)}
body.nu .top nav a[aria-current="page"]{
  color:var(--ink);box-shadow:none;border-bottom-color:currentColor;
}
body.nu .ig svg{width:clamp(26px,3.4vw,33px);height:clamp(26px,3.4vw,33px)}

/* ---- headings ----------------------------------------------------------- */
body.nu .sechead h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(22px,3vw,31px);letter-spacing:-.018em;
}
.pagehead{padding:clamp(26px,5vw,64px) 0 clamp(18px,3vw,34px)}
.pagehead h1{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(34px,6.4vw,76px);line-height:1.02;letter-spacing:-.028em;
  margin:0;max-width:18ch;text-wrap:balance;
}

/* ---- home: the pair of photographs and the wordmark fill the first screen
       exactly, so the mark sits flush on the fold when the page loads ----- */
.opener{padding:0}

/* The opener is not held to the 1240 reading measure the rest of the site
   uses - the photographs take the window, capped only so they are never
   scaled past the pixels the source files actually have. */
.hero .in{max-width:var(--hero);margin:0 auto;padding:0 var(--pad)}
.opener .in{
  display:grid;grid-template-columns:1fr;gap:clamp(10px,1.6vw,18px);
}
/* Two photographs, treated differently on purpose.

   The one on the right is shown whole - the box, the hand, the sand behind
   it - so it is never cropped and it is what decides how tall the row is.
   The one on the left has no such claim on the composition, so it fills
   whatever is left and crops to fit. */
.opener figure{margin:0;background:var(--sea-soft);overflow:hidden;border-radius:var(--r)}
.opener img{width:100%;height:clamp(230px,56vw,420px);object-fit:cover}
.opener .shore img{object-position:54% 52%}

/* No background behind an uncropped photograph: whatever the aspect ratio
   leaves over should read as the page, not as a grey mat around the frame. */
.opener .tray{background:none;border-radius:0;overflow:visible}
.opener .tray img{height:auto;object-fit:contain;border-radius:var(--r)}

/* The wordmark at one end of the line and the way into the shop at the
   other, sharing a baseline. On a narrow screen the button drops to its own
   line and stays on the right. */
/* ---- the phone --------------------------------------------------------
   A narrow screen is not a small version of the wide one, so four things
   change rather than scale. */
@media(max-width:719px){
  /* One photograph, not two. Stacked, the pair pushed the wordmark most of
     a screen down before the page had said anything - and the tray is the
     one that carries the whole range in a single uncropped frame. */
  .opener .shore{display:none}

  /* The mark is the page's opening line here, with nothing beside it to
     share the screen with, so it is set forty per cent larger than the
     shared clamp would give it. */
  .markline{--markscale:1.47}

  /* Nav links at their clamp floor were the smallest type in the header;
     a thumb-sized target wants thumb-sized words. */
  body.nu .top nav a{font-size:24px}

  /* The About text reads before the photograph rather than under it: the
     column is one file on a phone, and the words are what it is for. */
  .maker .prose{order:-1}
}

/* 24px of air above the mark on a phone, where the clamp used to give 12
   and the wordmark sat almost on the photograph above it. Wide screens were
   already at the clamp's ceiling, so nothing moves there. */
.markline{padding:24px 0 clamp(16px,2.6vw,30px)}
.markline{--markfs:calc(min(clamp(34px,7.8vw,137px),17vh) * var(--markscale,1.05))}
.markline .in{
  display:flex;align-items:flex-end;flex-wrap:wrap;
  gap:clamp(6px,1.4vw,28px);
}
/* A serif's line box runs on past its baseline, and the wordmark adds .22em
   of its own so the y has somewhere to go - .383em below the baseline in
   all. Flush to the bottom of that box, a button hangs a long way under the
   letters and reads as misaligned. Lifting it by exactly that overhang puts
   its bottom edge on the baseline, where the eye expects it. */
.markline .shopbtn{flex:none;margin-left:auto;margin-bottom:calc(var(--markfs) * .383)}
.markline h1{
  font-family:var(--serif);font-weight:400;
  /* Instrument Serif sets smaller than Cormorant at the same size, so the
     mark is scaled back up to the width it held before. The colour is its
     own - the one place on the site that is not --ink. */
  font-size:var(--markfs);
  line-height:1;letter-spacing:-.013em;color:#3B4E46;
  margin:0;padding-bottom:.22em;   /* room for the descender on the y */
}

@media(min-width:720px){
  /* one column of screen: photographs take whatever the wordmark leaves */
  /* a definite height, not a minimum - a minimum lets the photographs'
     own pixel height grow the block and push the mark past the fold */
  .hero{display:flex;flex-direction:column;height:calc(100vh - var(--bar) - 2px)}
  @supports (height:100svh){
    .hero{height:calc(100svh - var(--bar) - 2px)}
  }
  /* Flex rather than grid, because the two columns are no longer a ratio
     somebody chose. The tray takes a share of the width and its own shape
     decides how tall it is - that is what "uncropped" costs, and it is why
     the row is shorter than the space above the wordmark rather than
     filling it. The shore then stretches to the tray's height and crops to
     whatever width is left.

     The leftover height goes between the photographs and the wordmark:
     `align-items:center` here, and the mark still sits on the fold. */
  .opener{flex:1 1 auto;min-height:0;display:flex;align-items:center;overflow:hidden}
  .opener .in{
    display:flex;width:100%;max-height:100%;
    align-items:stretch;grid-template-columns:none;
  }
  .opener figure{min-height:0}

  .opener .tray{flex:0 1 auto;width:64%}
  /* width from the column, height from the photograph: no crop and no mat
     around it. max-height is the short-window case - the picture gives up
     size rather than any of itself. */
  .opener .tray img{width:100%;height:auto;max-height:100%;object-fit:contain}

  .opener .shore{flex:1 1 0;min-width:0}
  .opener .shore img{height:100%}
  .markline{flex:0 0 auto;padding-bottom:0}
}

/* ---- home: the featured row is a teaser - photograph and name only.
       No price without the detail beside it, and no Add button without a
       price, so the whole foot goes rather than half of it. ------------- */
body.home .tile .mt,
body.home .tile .foot{display:none}
body.home .tile .body{padding-bottom:14px}
/* the piece's name in the wordmark's face, not the grotesque */
body.home .tile .nm{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(17px,1.9vw,20px);letter-spacing:-.012em;
}

/* ---- home: four featured pieces, not the store's auto-filling shelf ---- */
body.home .grid{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){body.home .grid{grid-template-columns:repeat(4,1fr)}}

/* the row above the featured pieces carries only the way into the shop */
.sechead.bare{justify-content:flex-end;margin-bottom:clamp(10px,1.8vw,16px)}

/* It used to be a 13.5px link in this corner - smaller than the names of
   the pieces under it, on the only route from the home page into the shop.
   It is a button now: the wordmark's face at twice the size, and 52px of
   height for a thumb to land on. Outlined rather than filled, so it does
   not compete with the Contact me button at the foot of the page. */
.shopbtn{
  display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 clamp(20px,3vw,26px);border-radius:999px;
  border:1px solid #2B3630;background:#2B3630;color:var(--surface);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,2.4vw,24px);letter-spacing:-.012em;line-height:1;
  transition:background .18s,border-color .18s;
}
.shopbtn svg{width:17px;height:17px;flex:none;transition:transform .18s}
.shopbtn:hover{background:#3B4E46;border-color:#3B4E46}
.shopbtn:hover svg{transform:translateX(3px)}

/* ---- the maker: what used to be the About page --------------------------
   A small label, the line she leads with, and the line that was the About
   page's subtext under it. The label is the site's own uppercase small
   print rather than another serif heading - it names the block without
   competing with the sentence it introduces. */
.maker .prose .eyebrow{
  font-family:var(--serif);font-weight:400;color:var(--mute);
  font-size:clamp(17px,1.9vw,22px);letter-spacing:.05em;
  text-transform:uppercase;line-height:1;
  /* tracking is added to the right of the last letter as well as between
     them, so the word sits a fraction left of the sentence under it unless
     that trailing space is taken back */
  margin:0 0 clamp(14px,2vw,20px);margin-right:-.05em;
}
.maker{--saidfs:clamp(28px,4.6vw,52px)}
.maker .said{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:var(--saidfs);line-height:1.08;letter-spacing:-.022em;
  margin:0 0 clamp(14px,2vw,22px);
}

/* the same serif, quieter and smaller: a second thought after the first
   sentence rather than a paragraph of its own */
.maker .under{
  font-family:var(--serif);font-weight:400;color:var(--mute);
  font-size:clamp(17px,2.1vw,24px);line-height:1.35;letter-spacing:-.012em;
  margin:0;max-width:32ch;
}


/* the necklace sits high in the frame, so crop to it rather than the middle */
.maker img{object-position:50% 34%}


/* ---- home: saying hello ------------------------------------------------
   The end of the About block. It is a mailto and nothing else - no form to
   fill in, no address to copy out, just her inbox.

   The words themselves on a rule rather than a filled pill: nothing else on
   the home page is filled dark, and the About block reads quieter without
   one. It always falls a little below the lines above it - it does not
   reach for the photograph's bottom edge and it does not share the name's
   line, at any width.

   Scoped past `.prose a`, which would otherwise hand it the reading
   column's sea-blue underline and its 600 weight. */
.maker .hello-link{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  margin-top:clamp(22px,3vw,32px);padding-bottom:5px;
  border-bottom:1px solid var(--ink);color:var(--ink);box-shadow:none;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,2.1vw,24px);letter-spacing:-.012em;line-height:1;
  transition:color .18s,border-color .18s;
}
.maker .hello-link svg{width:17px;height:17px;flex:none;transition:transform .18s}
/* the wordmark's green rather than the sea blue, which was the old ink's
   companion and is no longer anybody's */
.maker .hello-link:hover{color:#3B4E46;border-color:#3B4E46}
.maker .hello-link:hover svg{transform:translateX(4px)}



/* ---- footer: one credit line, no rule above it, sitting low ------------- */
body.nu .site-foot{border-top:0;margin-top:0}
body.nu .site-foot .in{
  justify-content:center;text-align:center;
  padding:calc(clamp(46px,8vw,96px) + 15px) var(--pad) clamp(22px,3.4vw,38px);
  font-size:10.76px;font-weight:400;
}
body.nu .site-foot .in p{margin:0}
.heart{color:var(--alarm)}

/* ---- bag: the bag itself, no pill and no label -------------------------- */
body.nu .bagbtn{
  background:none;border:0;padding:2px 0 2px 2px;color:var(--mute);
  display:inline-flex;align-items:center;gap:5px;
}
body.nu .bagbtn:hover{background:none;color:var(--ink)}
body.nu .bagbtn svg{
  width:clamp(26px,3.4vw,33px);height:clamp(26px,3.4vw,33px);display:block;
}
body.nu .bagbtn .n{
  background:none;color:inherit;border-radius:0;min-width:0;height:auto;padding:0;
  font-family:var(--body);font-weight:600;
  font-size:15px;
  font-variant-numeric:tabular-nums;line-height:1;
}

/* ---- the count under a page heading ------------------------------------- */
.pagehead .count{
  margin:10px 0 0;color:var(--mute);
  font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
}

/* prose subheads follow the serif so a page reads in one voice */
body.nu .prose h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,2.6vw,27px);letter-spacing:-.018em;margin:30px 0 8px;
}

/* ==========================================================================
   The store page

   Three pieces to a row on a wide screen rather than as many as will fit:
   these are photographs of small things, and five-up showed them too small
   to see.

   The grid used to be held to a column narrower than the rest of the site
   so that three would not stretch into billboards. It is not any more - the
   shop is the same measure as the home page, so walking from one to the
   other does not move the edges of the page. Three across that width is a
   big tile, which is the point.
   ========================================================================== */

.shopbar{padding:clamp(14px,2.4vw,26px) 0 0}

.filters{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  padding-bottom:clamp(12px,2vw,18px);
}
.filters .chips{display:flex;flex-wrap:wrap;gap:7px}
.filters .chip{
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:7px 15px;font-size:13.5px;font-weight:500;color:var(--mute);
  cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.filters .chip:hover{color:var(--ink);border-color:var(--ink)}
.filters .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.filters .chip .n{opacity:.55;margin-left:6px;font-variant-numeric:tabular-nums}


/* On a phone six chips wrapped onto four lines, which pushed the pieces
   down the screen - the opposite of the point. One swiping row instead,
   bled to the screen edges so a half-scrolled chip does not look clipped in
   the gutter. The page itself still never scrolls sideways. */
@media(max-width:699px){
  .filters{flex-wrap:nowrap;align-items:center;gap:10px}
  .filters .chips{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-left:calc(var(--pad) * -1);padding-left:var(--pad);
  }
  .filters .chips::-webkit-scrollbar{display:none}
  /* There used to be a fade at the trailing edge, from when a stock switch
     sat to the right of this row and a chip could slide under it. The
     switch is gone and the row now ends at the screen edge, so the fade was
     greying out the last chip - usually Earrings - for nothing. */
  .filters .chip{flex:none}
}

@media(min-width:900px){
  body.p-store .grid{grid-template-columns:repeat(3,1fr)}
}

/* Bigger tiles want a little more room to breathe inside them. */
@media(min-width:900px){
  body.p-store .tile .body{padding:14px 15px 15px}
  body.p-store .tile .nm{font-size:17.5px}
  body.p-store .tile .pr{font-size:17px}
}


/* ==========================================================================
   The phone, one third larger below the wordmark

   Every clamp on this page is tuned for a wide screen and bottoms out at
   its floor on a phone, which left the whole page under the mark set
   smaller than the nav above it. Each size is multiplied rather than
   rewritten, so a change to the clamp still carries down here.

   This block is last in the file on purpose. A media query adds nothing to
   specificity, so these have to come after the rules they raise or the
   plain ones further up win on source order alone.
   ========================================================================== */

@media(max-width:719px){
  body.home .tile .nm{font-size:calc(clamp(17px,1.9vw,20px) * 1.3)}
  .maker .prose .eyebrow{font-size:calc(clamp(17px,1.9vw,22px) * 1.3)}
  .maker{--saidfs:calc(clamp(28px,4.6vw,52px) * 1.3)}
  .maker .under{font-size:calc(clamp(17px,2.1vw,24px) * 1.3)}
  .notice{font-size:calc(13.5px * 1.3)}
  body.nu .site-foot .in{font-size:calc(10.76px * 1.3)}

  /* ---- the phone keeps the button ---------------------------------------
     A rule under two words is a fine way to say "click here" beside a wide
     column of text; on a phone, where the name and the way to reach her are
     the whole line, it is too quiet. So here it stays the filled pill it was,
     sitting at the end of the name's line.

     Grid areas rather than a wrapper element: the source order is the one
     the wide layout wants - name, line under it, then the link - and this
     rearranges it without the markup having to care. */
  .maker .prose{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name link" "under under";
    align-items:end;column-gap:14px;
    /* the space under the name belongs to the grid here, not to the name:
       `align-items:end` lines up margin boxes, so a bottom margin on one of
       the two would lift it clear of the other by exactly that much */
    row-gap:clamp(14px,2vw,22px);
  }
  .maker .said{grid-area:name;margin-bottom:0}
  .maker .under{grid-area:under}
  .maker .hello-link{
    grid-area:link;justify-self:end;margin-top:0;
    justify-content:center;min-height:39px;padding:10px 23px;
    border-bottom:0;border-radius:999px;
    background:#2B3630;color:var(--surface);
    font-size:calc(clamp(16px,1.7vw,19px) * 1.3);letter-spacing:-.005em;
    transition:background .18s;
    /* the same correction the wordmark's button gets: "Hi, I'm Eliza."
       carries .2em of line box below its baseline, so the pill comes up by
       that much and the two bottoms land on one line */
    margin-bottom:calc(var(--saidfs) * .2);
  }
  /* both buttons sit shorter on a phone than the wide screen wants them */
  .shopbtn{min-height:39px}

  /* the arrow is a wide-screen affordance; the pill does not need one */
  .maker .hello-link svg{display:none}
  .maker .hello-link:hover{background:#3B4E46;color:var(--surface)}
}