/* ============================================================
   CAMILLE ISABEL — site stylesheet
   Edit colours in one place: the :root block below.
   ============================================================ */

:root{
  /* core palette */
  --ink:#100D0B;          /* page ground — warm near-black */
  --cherry:#38141A;       /* Black Cherry accent — fills only, never type */
  --brass:#A98750;        /* antique brass — hairlines, small-caps labels */
  --bone:#EAE3D7;         /* primary type */
  --smoke:#8F8479;        /* secondary type, specs, captions */

  /* lighting tokens — one light source, upper left */
  --pitch:#070505;        /* the dark the light falls away into */
  --lit:#221B16;          /* ground where the lamp reaches */
  --rule:#2A211C;         /* hairlines and dividers */
  --edge-lit:rgba(234,227,215,.10);
  --edge-shade:rgba(0,0,0,.55);
  --lamp:rgba(169,135,80,.13);

  /* type */
  --brand:"Tenor Sans","Futura","Helvetica Neue",sans-serif;  /* wordmark only */
  --serif:"Marcellus","Hoefler Text","Times New Roman",serif; /* headings */
  --sans:"Jost","Futura","Helvetica Neue",Arial,sans-serif;   /* body, UI, specs */
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--pitch);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{display:block; max-width:100%; height:auto}
.wrap{max-width:1180px; margin:0 auto; padding-inline:24px}

h1,h2,h3,h4{
  font-family:var(--serif); font-weight:400; margin:0;
  text-wrap:balance; letter-spacing:.005em;
}
p{margin:0}

.mark{
  font-family:var(--brand); text-transform:uppercase; color:var(--bone);
  line-height:1; display:inline-block;
}
.label{
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brass); font-weight:400;
}
.tbc{color:var(--brass); border-bottom:1px dotted rgba(169,135,80,.6); font-style:italic}

a{color:inherit; text-decoration:none}
a:focus-visible{outline:1px solid var(--brass); outline-offset:4px}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--lit); color:var(--bone); padding:12px 18px; z-index:99;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.skip:focus{left:12px; top:12px}

/* pebbled-grain overlay, used on photography frames */
.grain{position:relative; overflow:hidden}
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; opacity:.07;
}

/* ---------------------------------------------------- top bar */
.topbar{
  position:relative; z-index:5;
  background:linear-gradient(180deg, rgba(34,27,22,.55), rgba(7,5,5,0));
}
.topbar-in{
  display:flex; flex-wrap:wrap; gap:14px 30px;
  align-items:center; justify-content:space-between; padding-block:20px;
}
.nav,.util{display:flex; gap:24px; flex-wrap:wrap}
.nav a,.util a{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--smoke); padding-block:4px; border-bottom:1px solid transparent;
  transition:color .25s ease, border-color .25s ease;
}
.nav a:hover,.util a:hover{color:var(--bone); border-bottom-color:var(--brass)}
.house .mark{font-size:12px; letter-spacing:.26em; text-indent:.26em}

/* ---------------------------------------------------- buttons */
.btn,.btn-q{
  display:inline-block; font-family:var(--sans);
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  padding:13px 0 8px; background:transparent; cursor:pointer;
  border:0; border-bottom:1px solid var(--brass);
  transition:color .25s ease, border-color .25s ease;
}
.btn{color:var(--bone)}
.btn:hover{color:var(--brass)}
.btn-q{color:var(--smoke); border-bottom-color:transparent}
.btn-q:hover{color:var(--bone); border-bottom-color:var(--rule)}

/* ---------------------------------------------------- hero */
.threshold{
  background:
    radial-gradient(74% 86% at 20% 2%, var(--lamp) 0%, rgba(169,135,80,.035) 32%, rgba(0,0,0,0) 64%),
    radial-gradient(124% 132% at 18% 0%, var(--lit) 0%, var(--ink) 44%, var(--pitch) 100%);
}
.threshold-in{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(34px,5vw,72px); align-items:center;
  padding-block:clamp(54px,7vw,104px) clamp(58px,8vw,116px);
}
/* the brass plaque: wordmark, nothing else on it */
.plate{
  display:inline-block;
  padding:clamp(20px,2.6vw,30px) clamp(26px,3.4vw,44px);
  border-top:1px solid var(--edge-lit);
  border-left:1px solid rgba(234,227,215,.055);
  border-right:1px solid rgba(0,0,0,.4);
  border-bottom:1px solid rgba(0,0,0,.5);
  background:linear-gradient(152deg, rgba(234,227,215,.045) 0%, rgba(0,0,0,.18) 100%);
  box-shadow:20px 26px 44px -12px rgba(0,0,0,.8), 46px 58px 82px -20px rgba(0,0,0,.55);
}
.plate .mark{
  font-size:clamp(15px,2.6vw,24px); letter-spacing:.3em; text-indent:.3em;
  text-shadow:13px 17px 24px rgba(0,0,0,.85), 32px 42px 56px rgba(0,0,0,.5);
}
.threshold h1{
  font-size:clamp(27px,4.3vw,49px); line-height:1.14;
  margin-block:clamp(28px,3.4vw,40px) 20px; max-width:19ch;
  text-shadow:10px 14px 26px rgba(0,0,0,.7);
}
.threshold .sub{color:var(--smoke); max-width:44ch; font-size:15px}
.threshold .hours{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--rule);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--smoke); max-width:44ch; line-height:2;
}
.actions{display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center; margin-top:28px}
.hero-shot{min-height:clamp(300px,44vw,520px); position:relative; overflow:hidden}
.hero-shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* ---------------------------------------------------- promises */
.rules{background:linear-gradient(180deg, var(--pitch) 0%, #0C0A09 46%, var(--pitch) 100%)}
.rules-in{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:clamp(26px,3.2vw,48px); padding-block:clamp(44px,5vw,68px);
}
.rule .n{
  display:block; font-family:var(--serif); font-size:12px;
  letter-spacing:.2em; color:var(--brass); margin-bottom:13px;
}
.rule h3{font-size:18px; margin-bottom:8px}
.rule p{font-size:13.5px; color:var(--smoke); line-height:1.7}

/* ---------------------------------------------------- product grid */
.run{
  background:
    radial-gradient(70% 60% at 26% 0%, rgba(169,135,80,.075) 0%, rgba(0,0,0,0) 58%),
    linear-gradient(180deg, var(--pitch) 0%, var(--ink) 34%, #0A0807 100%);
}
.sechead{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:12px 34px; padding-block:clamp(52px,6vw,84px) 34px;
}
.sechead h2{font-size:clamp(23px,3.1vw,32px); text-shadow:8px 12px 22px rgba(0,0,0,.6)}
.pieces{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(262px,400px));
  justify-content:start;
  gap:clamp(28px,3.4vw,44px); padding-bottom:clamp(52px,6vw,88px);
}
.case{position:relative}
.case .frame{aspect-ratio:4/5; position:relative; overflow:hidden}
.case .frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* a lit plinth with the shadow raking across it */
.floor{
  position:relative; height:48px; overflow:hidden;
  background:linear-gradient(180deg,#211A16 0%,#141010 58%,#0A0808 100%);
  border-top:1px solid rgba(234,227,215,.05);
}
.cast{
  position:absolute; top:0; left:15%; width:76%; height:48px;
  background:linear-gradient(96deg, rgba(5,3,3,.94) 0%, rgba(5,3,3,.6) 40%, rgba(5,3,3,0) 86%);
  transform:skewX(-54deg); transform-origin:top left;
  filter:blur(6px); pointer-events:none;
}
.pmeta{padding-top:20px}
.pmeta .no{
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass); font-variant-numeric:tabular-nums;
}
.pmeta h3{font-size:19px; margin-top:7px; transition:color .25s ease}
.pieces a:hover h3{color:var(--brass)}
.pmeta .row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; margin-top:8px;
}
.pmeta .price{font-size:15px; font-variant-numeric:tabular-nums}
.pmeta .spec{font-size:12px; color:var(--smoke)}
.pmeta .dims{font-size:12px; color:var(--smoke); margin-top:7px; font-variant-numeric:tabular-nums}

/* ---------------------------------------------------- editorial split */
.leather{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:linear-gradient(180deg,#0A0807 0%, var(--ink) 50%, #0A0807 100%);
}
.leather .side{min-height:clamp(300px,40vw,480px); position:relative; overflow:hidden}
.leather .side img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.led{padding:clamp(44px,5vw,78px) clamp(24px,4vw,64px); align-self:center}
.led h2{font-size:clamp(22px,3vw,33px); line-height:1.2; margin-block:16px 20px; max-width:22ch}
.led p{color:var(--smoke); font-size:15px; max-width:50ch; margin-bottom:18px}
.led dl{margin:28px 0 30px; border-top:1px solid var(--rule)}
.led .r{
  display:grid; grid-template-columns:minmax(108px,150px) 1fr;
  gap:6px 24px; padding-block:12px;
  border-bottom:1px solid var(--rule); align-items:baseline;
}
.led dt{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--smoke)}
.led dd{margin:0; font-size:14px; font-variant-numeric:tabular-nums}

/* ---------------------------------------------------- the making */
.craft{
  background:
    radial-gradient(64% 62% at 24% 2%, rgba(169,135,80,.085) 0%, rgba(0,0,0,0) 58%),
    linear-gradient(180deg,#0A0807 0%, var(--ink) 40%, #0A0807 100%);
}
.craft-in{padding-block:clamp(52px,6vw,88px)}
.craft h2{
  font-size:clamp(23px,3.2vw,33px); line-height:1.2;
  margin-block:14px 20px; max-width:24ch;
  text-shadow:9px 13px 24px rgba(0,0,0,.65);
}
.craft .lede{color:var(--smoke); font-size:15.5px; max-width:62ch; margin-bottom:34px}
.checks{margin:0; border-top:1px solid var(--rule)}
.ck{
  display:grid; grid-template-columns:minmax(0,270px) 1fr;
  gap:8px 44px; padding-block:22px;
  border-bottom:1px solid var(--rule); align-items:baseline;
}
.ck dt{font-family:var(--serif); font-size:18px; line-height:1.3}
.ck dd{margin:0; font-size:14.5px; color:var(--smoke); max-width:58ch}
.craft .close{
  margin-top:32px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); line-height:2; max-width:56ch;
}

/* ---------------------------------------------------- the list / forms */
.intro{
  background:
    radial-gradient(58% 80% at 30% 6%, var(--lamp) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg,#0A0807 0%, var(--ink) 40%, var(--pitch) 100%);
}
.intro-in{padding-block:clamp(56px,7vw,96px)}
.ledger{
  max-width:600px; padding:clamp(30px,4vw,48px);
  border-top:1px solid var(--edge-lit);
  border-left:1px solid rgba(234,227,215,.05);
  border-right:1px solid rgba(0,0,0,.4);
  border-bottom:1px solid rgba(0,0,0,.5);
  background:linear-gradient(152deg, rgba(234,227,215,.038) 0%, rgba(0,0,0,.2) 100%);
  box-shadow:22px 30px 50px -14px rgba(0,0,0,.8), 52px 66px 90px -24px rgba(0,0,0,.5);
}
.ledger h2{font-size:clamp(21px,2.8vw,29px); margin-block:14px 14px; max-width:24ch}
.ledger p{color:var(--smoke); font-size:14.5px; max-width:46ch}
form{display:grid; gap:18px; margin-top:30px; max-width:400px}
label{display:flex; flex-direction:column; gap:8px}
input{
  background:transparent; border:0; border-bottom:1px solid var(--rule);
  color:var(--bone); font-family:var(--sans); font-weight:300; font-size:15px;
  padding:9px 0; transition:border-color .25s ease;
}
input::placeholder{color:#59504a}
input:focus{outline:none; border-bottom-color:var(--brass)}
form button{justify-self:start}
.formnote{margin-top:16px; font-size:13px; color:var(--brass); min-height:1.7em}

/* ---------------------------------------------------- footer */
footer{background:var(--pitch); border-top:1px solid var(--rule)}
.foot-in{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:34px 30px; padding-block:clamp(44px,5vw,64px) 30px;
}
.foot-in h4{
  font-family:var(--sans); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brass); font-weight:400; margin:0 0 14px;
}
.foot-in ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.foot-in li a{font-size:13px; color:var(--smoke); border-bottom:1px solid transparent}
.foot-in li a:hover{color:var(--bone); border-bottom-color:var(--brass)}
.brandcol .mark{font-size:14px; letter-spacing:.26em; text-indent:.26em}
.brandcol p{margin-top:15px; font-size:12px; color:var(--smoke); max-width:34ch; line-height:1.85}
.legal{
  border-top:1px solid var(--rule); padding-block:20px 42px;
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between;
  font-size:10.5px; color:#5f574f; letter-spacing:.1em;
}

/* ---------------------------------------------------- product page */
.product{
  background:
    radial-gradient(62% 70% at 26% 2%, var(--lamp) 0%, rgba(0,0,0,0) 58%),
    linear-gradient(180deg, var(--lit) 0%, var(--ink) 26%, var(--pitch) 100%);
}
.crumb{padding-block:22px 0}
.crumb a{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--smoke)}
.crumb a:hover{color:var(--brass)}
.pgrid{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(28px,4vw,62px);
  padding-block:clamp(26px,3vw,40px) clamp(52px,6vw,86px);
  align-items:start;
}
.gallery{display:grid; gap:clamp(18px,2.4vw,30px)}
.pframe{
  position:relative; margin:0; background:var(--pitch);
  border-top:1px solid var(--edge-lit);
  border-left:1px solid rgba(234,227,215,.05);
  border-right:1px solid rgba(0,0,0,.45);
  border-bottom:1px solid rgba(0,0,0,.55);
  box-shadow:18px 24px 44px -14px rgba(0,0,0,.85), 44px 56px 80px -24px rgba(0,0,0,.5);
}
.pframe figcaption{
  padding:11px 14px 14px; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--smoke);
  border-top:1px solid rgba(255,255,255,.035);
  background:linear-gradient(180deg, rgba(34,27,22,.5), rgba(7,5,5,0));
}
.detail{position:sticky; top:24px}
.detail .runline{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline}
.detail h1{
  font-size:clamp(25px,3.4vw,38px); line-height:1.16; margin-block:14px 6px;
  text-shadow:9px 13px 24px rgba(0,0,0,.7);
}
.detail .colour{font-size:14px; color:var(--smoke)}
.detail .price{font-family:var(--serif); font-size:23px; margin-top:20px; font-variant-numeric:tabular-nums}
.detail .blurb{color:var(--smoke); font-size:14.5px; margin-top:20px; max-width:44ch}
.buy{display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; margin-top:30px}
.detail dl{margin:32px 0 0; border-top:1px solid var(--rule)}
.detail .r{
  display:grid; grid-template-columns:minmax(96px,132px) 1fr;
  gap:6px 22px; padding-block:12px;
  border-bottom:1px solid var(--rule); align-items:baseline;
}
.detail dt{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--smoke)}
.detail dd{margin:0; font-size:14px; font-variant-numeric:tabular-nums}
.appt{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--rule);
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--smoke); line-height:2;
}
.secret{background:linear-gradient(180deg, var(--pitch) 0%, var(--ink) 46%, var(--pitch) 100%)}
.secret-in{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,4vw,64px); align-items:center; padding-block:clamp(52px,6vw,88px);
}
.secret h2{
  font-size:clamp(23px,3.1vw,34px); line-height:1.2; margin-block:16px 20px;
  max-width:22ch; text-shadow:9px 13px 24px rgba(0,0,0,.65);
}
.secret p{color:var(--smoke); font-size:15px; max-width:46ch; margin-bottom:16px}
.secret p:last-of-type{margin-bottom:0}
.secret .pframe{max-width:460px; margin-left:auto}
.care{background:var(--pitch); border-top:1px solid var(--rule)}
.care-in{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(26px,3.2vw,50px); padding-block:clamp(44px,5vw,70px);
}
.care h3{font-size:17px; margin-block:12px 8px}
.care p{font-size:13.5px; color:var(--smoke)}


/* ---------------------------------------------------- the bag, described */
.described{background:linear-gradient(180deg,#0A0807 0%, var(--ink) 44%, #0A0807 100%)}
.described-in{padding-block:clamp(48px,6vw,80px)}
.described h2{
  font-size:clamp(22px,3vw,31px); line-height:1.22; margin-block:14px 28px; max-width:24ch;
  text-shadow:9px 13px 24px rgba(0,0,0,.6);
}
.desc-cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:6px clamp(34px,4.5vw,64px);
}
.described h3{
  font-size:16px; margin-block:26px 8px; color:var(--bone);
  padding-top:18px; border-top:1px solid var(--rule);
}
.desc-cols > div > p:first-child{margin-top:0}
.described p{font-size:14.5px; color:var(--smoke); line-height:1.75; margin-bottom:14px; max-width:56ch}
.described p:last-child{margin-bottom:0}


/* ---------------------------------------------------- paypal panel */
/* PayPal's button is bright yellow and cannot be restyled. Rather than
   let it float on the dark ground, it sits on a bone panel so it reads
   as a deliberate object — the one loud thing on the page, like the lining. */
.paypal-slot{
  margin-top:28px; padding:20px 20px 16px;
  background:var(--bone);
  border-top:1px solid #fff;
  box-shadow:16px 20px 36px -12px rgba(0,0,0,.8);
}
.paypal-slot form{margin:0; display:block; max-width:none}
.paypal-placeholder{
  margin:0; padding:14px 0; text-align:center;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#8a7f72; border:1px dashed #c3b9a8;
}
.buy-note{
  margin-top:12px; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--smoke);
}

/* ---------------------------------------------------- 404 */
.oops{display:grid; place-items:center; min-height:70vh; text-align:center}
.oops h1{font-size:clamp(24px,3.4vw,34px); margin-bottom:16px}
.oops p{color:var(--smoke); margin-bottom:26px}

/* ---------------------------------------------------- responsive */
@media (max-width:900px){
  .pgrid,.secret-in{grid-template-columns:1fr}
  .detail{position:static}
  .secret .pframe{margin-left:0; max-width:none}
}
@media (max-width:860px){
  .threshold-in,.leather{grid-template-columns:1fr}
  .hero-shot{order:-1; min-height:300px}
  .leather .side{min-height:280px}
  .topbar-in{flex-direction:column; text-align:center}
  .nav,.util{justify-content:center}
}
@media (max-width:760px){
  .ck{grid-template-columns:1fr; gap:6px}
}

/* one orchestrated moment: the lamp comes up */
@media (prefers-reduced-motion:no-preference){
  .plate{animation:lamp 1.5s cubic-bezier(.2,.75,.3,1) both}
  .plate .mark{animation:track 1.5s cubic-bezier(.2,.75,.3,1) both}
  .threshold h1{animation:lamp 1.5s .12s cubic-bezier(.2,.75,.3,1) both}
  @keyframes lamp{ from{opacity:.35} to{opacity:1} }
  @keyframes track{
    from{letter-spacing:.46em; text-indent:.46em}
    to{letter-spacing:.3em; text-indent:.3em}
  }
}