@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,340;0,9..144,440;1,9..144,440;1,9..144,540&family=Jost:wght@300;400;500&display=swap');

:root{
  --paper:#f6ebe7;
  --paper-raised:#efdad5;
  --ink:#2b1218;
  --ink-soft:#7a4c50;
  --hair:#dcbcb7;
  --accent:#9c2b4e;
  --accent-2:#c98a83;
  --focus:#5a6bd8;
  --ok:#4d7a52;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#180c0f;
    --paper-raised:#241317;
    --ink:#f3e2de;
    --ink-soft:#c99da0;
    --hair:#3d2226;
    --accent:#e8709a;
    --accent-2:#c98a83;
    --focus:#93a4ff;
    --ok:#8fc396;
  }
}
:root[data-theme="dark"]{
  --paper:#180c0f;
  --paper-raised:#241317;
  --ink:#f3e2de;
  --ink-soft:#c99da0;
  --hair:#3d2226;
  --accent:#e8709a;
  --accent-2:#c98a83;
  --focus:#93a4ff;
  --ok:#8fc396;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.7;
}
img{max-width:100%;}
a{color:inherit;}
::selection{background:var(--accent); color:var(--paper);}
:focus-visible{outline:1.5px solid var(--focus); outline-offset:4px;}
button{font:inherit;}
[hidden]{display:none!important;}

.wrap{max-width:1040px; margin:0 auto; padding:0 28px;}
.wrap-narrow{max-width:680px; margin:0 auto; padding:0 28px;}

h1,h2,h3{
  font-family:'Fraunces',Georgia,serif;
  font-weight:440;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
em{ font-style:italic; font-weight:540; color:var(--accent); }

.label{
  font-family:'Jost',sans-serif;
  font-size:.68rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:400;
}

header{ padding:34px 0 0; position:sticky; top:0; background:var(--paper); z-index:20; }
.headerbar{
  display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; gap:20px;
}
.wordmark{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:440;
  font-size:1.5rem;
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;
}
.headerbar nav{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.headerbar nav a{
  font-family:'Jost',sans-serif;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid var(--accent);
  padding-bottom:3px;
}
.headerbar nav a.quiet{ border-color:transparent; color:var(--ink-soft); }

.cart-toggle{
  font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  background:none; border:1px solid var(--ink); color:var(--ink); cursor:pointer;
  padding:8px 14px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.cart-toggle:hover{ border-color:var(--accent); color:var(--accent); }
.cart-toggle .count{
  background:var(--accent); color:var(--paper); border-radius:50%; min-width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center; font-size:.66rem; padding:0 4px;
}
.cart-toggle .count[data-zero="true"]{ display:none; }

.btn{
  font-family:'Jost',sans-serif;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  padding:16px 40px;
  color:var(--paper);
  background:var(--ink);
  display:inline-block;
  border:none;
  cursor:pointer;
  transition:background .25s ease;
}
.btn:hover{ background:var(--accent); }
.btn:disabled{ background:var(--hair); color:var(--ink-soft); cursor:not-allowed; }
.btn.btn-small{ padding:10px 20px; font-size:.66rem; }
.btn.btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.link-quiet{
  font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); border-bottom:1px solid var(--hair); padding-bottom:2px;
  background:none; border:none; cursor:pointer;
}
.link-quiet:hover{ color:var(--accent); border-color:var(--accent); }

hr.rule{ border:none; border-top:1px solid var(--hair); max-width:120px; margin:0 auto; }

footer{ padding:44px 0 48px; text-align:center; }
footer .wordmark{ font-size:1.05rem; }
footer p{ margin-top:10px; font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.1em; color:var(--ink-soft); }
footer .foot-links{ margin-top:14px; display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
footer a{ text-decoration:none; border-bottom:1px solid var(--hair); }
footer a:hover{ color:var(--accent); border-color:var(--accent); }

@media (prefers-reduced-motion:no-preference){
  .fade-in{ animation:fadeIn 1s ease both; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
}

/* ---------- Shop grid (homepage) ---------- */
.shop{ padding:100px 0 0; }
.shop-head{ text-align:center; margin-bottom:64px; }
.shop-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:16px; }
.shop-head p{ color:var(--ink-soft); max-width:44ch; margin:16px auto 0; font-size:.95rem; }

.shop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:52px 32px; }
@media (max-width:820px){ .shop-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .shop-grid{ grid-template-columns:1fr; max-width:340px; margin:0 auto; } }

.piece{ text-align:left; }
.swatch{ aspect-ratio:3/4; width:100%; margin-bottom:22px; position:relative; overflow:hidden; display:block; }
.swatch svg{ width:100%; height:100%; display:block; }
.swatch img{ width:100%; height:100%; object-fit:cover; display:block; }
a.swatch-link{ text-decoration:none; }
.piece h3{ font-style:italic; font-size:1.32rem; font-weight:440; }
.piece h3 a{ text-decoration:none; }
.piece h3 a:hover{ color:var(--accent); }
.piece .desc{ margin-top:8px; color:var(--ink-soft); font-size:.88rem; line-height:1.5; }
.piece .price{ margin-top:10px; font-family:'Jost',sans-serif; font-size:.85rem; letter-spacing:.04em; color:var(--ink); }
.piece .view-details{ display:inline-block; margin-top:8px; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--hair); }
.piece .view-details:hover{ color:var(--accent); border-color:var(--accent); }
.sizes{ margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }
.size-btn{
  font-family:'Jost',sans-serif; font-size:.74rem; letter-spacing:.04em; width:38px; height:34px;
  display:inline-flex; align-items:center; justify-content:center; background:transparent;
  border:1px solid var(--hair); color:var(--ink); cursor:pointer; transition:all .15s ease;
}
.size-btn:hover{ border-color:var(--accent); }
.size-btn[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* ---------- Cart drawer ---------- */
.cart-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40; opacity:0;
  transition:opacity .2s ease; pointer-events:none;
}
.cart-scrim.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,100%); background:var(--paper);
  z-index:41; box-shadow:-8px 0 30px rgba(0,0,0,.15); transform:translateX(100%);
  transition:transform .25s ease; display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:26px 26px 18px; border-bottom:1px solid var(--hair); }
.cart-head h2{ font-size:1.3rem; font-style:italic; }
.cart-close{ background:none; border:none; font-size:1.3rem; color:var(--ink-soft); cursor:pointer; line-height:1; padding:4px; }
.cart-close:hover{ color:var(--accent); }
.cart-body{ flex:1; overflow-y:auto; padding:20px 26px; }
.cart-line{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--hair); }
.cart-line .swatch-sm{ width:60px; height:80px; flex:none; overflow:hidden; }
.cart-line .swatch-sm svg, .cart-line .swatch-sm img{ width:100%; height:100%; object-fit:cover; display:block; }
.cart-line .info{ flex:1; }
.cart-line .name{ font-family:'Fraunces',serif; font-style:italic; font-size:1rem; }
.cart-line .meta{ font-size:.78rem; color:var(--ink-soft); margin-top:2px; }
.cart-line .row{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.qty-ctrl{ display:flex; align-items:center; gap:8px; }
.qty-ctrl button{ width:22px; height:22px; border:1px solid var(--hair); background:none; color:var(--ink); cursor:pointer; }
.qty-ctrl button:hover{ border-color:var(--accent); color:var(--accent); }
.cart-remove{ background:none; border:none; color:var(--ink-soft); font-size:.72rem; letter-spacing:.06em; text-decoration:underline; cursor:pointer; padding:0; }
.cart-remove:hover{ color:var(--accent); }
.cart-empty{ text-align:center; color:var(--ink-soft); font-size:.9rem; padding:40px 0; }
.cart-foot{ border-top:1px solid var(--hair); padding:20px 26px 26px; }
.cart-total{ display:flex; justify-content:space-between; font-family:'Jost',sans-serif; font-size:.95rem; margin-bottom:16px; }
.cart-total .amt{ font-weight:500; }
.cart-foot .btn{ width:100%; text-align:center; }

/* ---------- Checkout panel (used on homepage + PDP) ---------- */
.order-wrap{ padding:64px 0 108px; }
.order-panel{ background:var(--paper-raised); padding:44px 40px; max-width:560px; margin:0 auto; }
.order-empty{ text-align:center; color:var(--ink-soft); font-size:.92rkíŠ}
.order-summary{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:20px; margin-bottom:24px; border-bottom:1px solid var(--hair);
}
.order-summary .name{ font-family:'Fraunces',serif; font-style:italic; font-size:1.15rem; }
.order-summary .meta{ font-size:.8rem; color:var(--ink-soft); margin-top:4px; }
.order-lines{ margin-bottom:20px; }
.order-line{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--hair); font-size:.88rem; }
.order-line .ol-name{ font-family:'Fraunces',serif; font-style:italic; }
.order-line .ol-meta{ color:var(--ink-soft); font-size:.78rem; }
.field{ margin-bottom:16px; }
.field label{
  display:block; font-family:'Jost',sans-serif; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;
}
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--hair);
  color:var(--ink); padding:9px 2px; font-family:'Jost',sans-serif; font-size:.95rem;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.order-submit{ margin-top:8px; width:100%; text-align:center; }
.order-note{ margin-top:14px; font-size:.76rem; color:var(--ink-soft); text-align:center; }
.order-error{ margin-top:12px; font-size:.8rem; color:var(--accent); text-align:center; }

.confirm{ text-align:center; }
.confirm .check{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--ok);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
  color:var(--ok); font-size:1.1rem;
}
.confirm h3{ font-style:italic; font-size:1.3rem; }
.confirm p{ color:var(--ink-soft); font-size:.92rem; margin-top:12px; }
.confirm .ref{ font-family:'Jost',sans-serif; letter-spacing:.08em; font-size:.78rem; color:var(--ink); margin-top:14px; }
.confirm .pay-btn{ margin-top:20px; }
.confirm .copy-box{
  margin-top:20px; text-align:left; background:var(--paper); border:1px solid var(--hair);
  padding:14px 16px; font-family:'Jost',sans-serif; font-size:.78rem; white-space:pre-wrap;
  color:var(--ink-soft); max-height:180px; overflow-y:auto;
}
.confirm .copy-hint{ margin-top:8px; font-size:.74rem; }

/* ---------- Newsletter / access section ---------- */
.access{ padding:80px 0 108px; text-align:center; background:var(--paper-raised); }
.access h2{ font-size:clamp(1.6rem,3.2vw,2.2rem); }
.access p{ max-width:40ch; margin:18px auto 0; color:var(--ink-soft); font-size:.92rem; }
form.newsletter{
  margin:32px auto 0; display:flex; justify-content:center; gap:0; max-width:380px;
  border-bottom:1px solid var(--ink); padding-bottom:6px;
}
input[type="email"]{
  flex:1; background:transparent; border:none; color:var(--ink); padding:10px 6px;
  font-family:'Jost',sans-serif; font-size:.95rem; text-align:center; letter-spacing:.02em;
}
input[type="email"]::placeholder{ color:var(--ink-soft); }
input[type="email"]:focus{ outline:none; }
button.submit{
  background:none; border:none; font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); cursor:pointer; padding:10px 4px;
}

/* ---------- Product detail page ---------- */
.pdp{ padding:56px 0 100px; }
.pdp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:800px){ .pdp-grid{ grid-template-columns:1fr; gap:36px; } }
.pdp-media .swatch{ aspect-ratio:3/4; }
.pdp-breadcrumb{ margin-bottom:24px; }
.pdp-breadcrumb a{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; }
.pdp-breadcrumb a:hover{ color:var(--accent); }
.pdp-info h1{ font-style:italic; font-size:clamp(1.8rem,3vw,2.4rem); }
.pdp-info .tagline{ margin-top:10px; color:var(--ink-soft); font-size:.98rem; }
.pdp-info .price{ margin-top:18px; font-family:'Jost',sans-serif; font-size:1.1rem; letter-spacing:.03em; }
.pdp-info .proof{"
  display:inline-block; margin-top:14px; background:var(--accent); color:var(--paper);
  font-family:'Jost',sans-serif; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px;
}
.pdp-info .longdesc{ margin-top:22px; color:var(--ink); font-size:.95rem; line-height:1.7; }
.pdp-sizes{ margin-top:26px; }
.pdp-add{ margin-top:20px; }
.pdp-added-note{ margin-top:12px; font-size:.8rem; color:var(--ok); }
.pdp-accordion{ margin-top:40px; border-top:1px solid var(--hair); }
.acc-item{ border-bottom:1px solid var(--hair); }
.acc-trigger{
  width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:16px 0;
  display:flex; justify-content:space-between; align-items:center; font-family:'Jost',sans-serif;
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
}
.acc-trigger:hover{ color:var(--accent); }
.acc-trigger .chev{ transition:transform .2s ease; }
.acc-trigger[aria-expanded="true"] .chev{ transform:rotate(45deg); }
.acc-panel{ padding:0 0 18px; color:var(--ink-soft); font-size:.88rem; line-height:1.7; }
.acc-panel ul{ margin:0; padding-left:18px; }
.acc-panel li{ margin-bottom:6px; }
.pdp-other{ margin-top:64px; }
.pdp-other h2{ font-size:1.3rem; font-style:italic; margin-bottom:24px; }

/* ---------- Policy page ---------- */
.policy{ padding:64px 0 100px; }
.policy h1{ font-style:italic; font-size:clamp(1.9rem,3.4vw,2.5rem); text-align:center; }
.policy .lede{ text-align:center; color:var(--ink-soft); max-width:52ch; margin:16px auto 44px; font-size:.95rem; }
.policy-section{ margin-bottom:36px; max-width:680px; margin-left:auto; margin-right:auto; }
.policy-section h2{ font-size:1.15rem; font-style:italic; margin-bottom:12px; }
.policy-section p{ color:var(--ink); font-size:.92rem; margin:0 0 12px; }
.policy-section ul{ color:var(--ink); font-size:.92rem; padding-left:20px; margin:0 0 12px; }
.policy-section li{ margin-bottom:6px; }
.policy-note{ font-size:.82rem; color:var(--ink-soft); border-left:2px solid var(--accent-2); padding-left:14px; }