/* 2nd Draft Co storefront — shared layout on the brand system (mirrors content/brand.md).
   Pages link /brand.css then /storefront.css. Editorial, parchment, square corners. */
:root{
  --paper:#f4f1ea; --paper-dim:#ece8de; --panel:#fff8e8;
  --forest:#1a2018; --forest-soft:#2d3a2e; --sage:#6b7a5a; --sand:#c4a878;
  --copper:#a85a3a; --cream:#fff8e8; --rule:rgba(45,58,46,0.16);
  --serif:"Cormorant Garamond",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--paper);color:var(--forest);font-family:var(--serif);
  font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:var(--forest);text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.28em;font-size:11px;color:var(--sage);}
em{font-style:italic;}

/* ---- top nav ---- */
.nav{position:sticky;top:0;z-index:1500;background:rgba(244,241,234,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);}
.nav .wrap{display:flex;align-items:center;gap:1.3rem;height:58px;max-width:none;padding:0 1.2rem;}
.nav .mark{font-weight:500;font-size:21px;letter-spacing:-.01em;margin-right:auto;}
.nav .mark em{font-style:italic;}
.nav a.link{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;font-size:11px;
  color:var(--forest-soft);padding:.3rem 0;border-bottom:1px solid transparent;}
.nav a.link:hover{color:var(--forest);border-bottom-color:var(--sand);}
.nav a.cta{font-family:var(--mono);text-transform:uppercase;letter-spacing:.24em;font-size:11px;
  background:var(--forest);color:var(--cream);padding:.6rem .95rem;border:1px solid var(--forest);}
.nav a.cta:hover{background:var(--sand);border-color:var(--sand);color:var(--forest);}
/* account control in the nav (storefront.js) */
.acct{position:relative;display:inline-flex;align-items:center;}
.nav .avatar{width:34px;height:34px;border-radius:50%;border:none;background:var(--forest);color:var(--cream);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--mono);font-size:14px;
  text-transform:uppercase;padding:0;}
.nav .avatar:hover{filter:brightness(1.1);}
.acct-menu{position:absolute;right:0;top:42px;min-width:190px;background:var(--cream);border:1px solid var(--rule);
  box-shadow:0 8px 24px rgba(45,58,46,.18);z-index:3000;display:none;}
.acct-menu.open{display:block;}
.acct-menu .em{padding:.55rem .8rem;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--sage);border-bottom:1px solid var(--rule);word-break:break-all;}
.acct-menu a{display:block;padding:.6rem .8rem;color:var(--forest);text-decoration:none;font-size:13.5px;}
.acct-menu a:hover{background:var(--paper-dim);}
.navtoggle{display:none;}
@media(max-width:760px){
  .nav .wrap{gap:.9rem;}
  .nav a.link{display:none;}
  .nav a.cta{padding:.5rem .7rem;letter-spacing:.16em;}
}

/* ---- hero ---- */
.hero{padding:3.4rem 0;border-bottom:1px solid var(--rule);}
.hero .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;max-width:1180px;}
.hero h1{font-size:clamp(2.2rem,5vw,3.7rem);font-weight:500;line-height:1.05;margin:.2em 0 .25em;
  letter-spacing:-.02em;}
.hero h1 em{color:var(--forest-soft);}
.hero p.sub{font-size:1.2rem;color:var(--forest-soft);max-width:30em;margin:.4em 0 1.6em;}
.hero-art{margin:0;}
.hero-art img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule);
  background:var(--paper-dim);box-shadow:0 14px 36px rgba(45,58,46,.16);}
@media(max-width:760px){
  .hero{padding:1.4rem 0 2.4rem;}
  .hero .hero-grid{grid-template-columns:1fr;gap:1.3rem;}
  .hero-art{order:-1;}                       /* lead with the visual on mobile */
  .hero p.sub{font-size:1.08rem;margin:.4em 0 1.2em;}
}
.btn{display:inline-block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.28em;
  font-size:12px;padding:.95rem 1.6rem;border:1px solid var(--forest);background:var(--forest);
  color:var(--cream);transition:background .18s,color .18s;cursor:pointer;}
.btn:hover{background:var(--sand);border-color:var(--sand);color:var(--forest);}
.btn.ghost{background:transparent;color:var(--forest);}
.btn.ghost:hover{background:var(--forest);color:var(--cream);}
.btnrow{display:flex;gap:.8rem;flex-wrap:wrap;}

/* ---- sections ---- */
section{padding:3.2rem 0;border-bottom:1px solid var(--rule);}
section h2{font-size:2rem;font-weight:500;letter-spacing:-.01em;margin:0 0 .2em;}
section h2 em{color:var(--forest-soft);}
.lead{color:var(--forest-soft);max-width:40em;}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;margin-top:1.6rem;}
.cols h3{font-size:1.15rem;font-weight:600;margin:.2em 0 .2em;}
.cols .label{margin-bottom:.5em;}

/* ---- product grid ---- */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.6rem;margin-top:1.6rem;}
.product{background:var(--cream);border:1px solid var(--rule);transition:border-color .15s,box-shadow .2s;}
.product:hover{border-color:var(--sand);box-shadow:0 10px 30px rgba(45,58,46,.10);}
.product .ph{aspect-ratio:4/3;background:var(--paper-dim);object-fit:cover;width:100%;display:block;}
/* crossfade carousel inside a product card (the Custom card) */
.product .ph.cs{position:relative;overflow:hidden;}
.cs-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;}
.cs-slide.on{opacity:1;}
.cs-dots{position:absolute;bottom:9px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:2;}
.cs-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 3px rgba(0,0,0,.5);transition:background .3s;}
.cs-dots i.on{background:#fff;}
.product .body{padding:.9rem 1rem 1.1rem;}
.product h3{font-size:1.25rem;font-weight:500;margin:.1em 0 .15em;}
.product .meta{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;}
.product .price{font-family:var(--mono);font-size:13px;color:var(--forest);}
.stamp{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:10px;
  background:var(--forest);color:var(--cream);padding:.2rem .5rem;}
.stamp.soon{background:var(--sand);color:var(--forest);}
.stamp.sold{background:var(--copper);color:var(--cream);}

/* ---- content (about/faq/policies/contact) ---- */
.page{padding:3.2rem 0 4rem;}
.page h1{font-size:clamp(2rem,5vw,3rem);font-weight:500;letter-spacing:-.02em;margin:.1em 0 .6em;}
.page h2{font-size:1.5rem;font-weight:500;margin:1.8em 0 .3em;}
.page h3{font-size:1.15rem;font-weight:600;margin:1.4em 0 .1em;}
.page p,.page li{color:var(--forest-soft);max-width:42em;}
.page a{color:var(--copper);border-bottom:1px solid var(--sand);}
.page blockquote{border-left:3px solid var(--sand);margin:1.2em 0;padding:.2em 0 .2em 1.1em;
  font-style:italic;color:var(--forest-soft);}
.qa{border-top:1px solid var(--rule);padding:1.1rem 0;}
.qa .q{font-weight:600;color:var(--forest);}
.qa .a{color:var(--forest-soft);margin-top:.25em;}

/* ---- forms ---- */
.field{margin:.9rem 0;max-width:30em;}
.field label{display:block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;
  font-size:11px;color:var(--sage);margin-bottom:.35em;}
.field input,.field textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--forest);
  background:var(--paper);color:var(--forest);font-family:var(--mono);font-size:14px;border-radius:0;}
.field textarea{min-height:8em;font-family:var(--serif);font-size:17px;}

/* ---- footer ---- */
.foot{background:var(--forest);color:var(--cream);padding:3rem 0;}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;}
.foot .mark{font-size:22px;font-weight:500;}
.foot .mark em{font-style:italic;}
.foot p{color:rgba(255,248,232,.7);font-size:15px;max-width:24em;}
.foot h4{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;font-size:10.5px;
  color:var(--sand);margin:.2em 0 .8em;}
.foot a{display:block;color:rgba(255,248,232,.82);font-size:15px;padding:.18rem 0;}
.foot a:hover{color:var(--cream);}
.foot .fine{grid-column:1/-1;border-top:1px solid rgba(255,248,232,.15);margin-top:1rem;padding-top:1rem;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:rgba(255,248,232,.55);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;}
@media(max-width:680px){.foot .wrap{grid-template-columns:1fr;} }

/* ---- hero trust line + showcase (animated "design it live -> we make it") ---- */
.trustline{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--sage);
  margin:1.3rem 0 0;text-transform:uppercase;}
@media(max-width:760px){.trustline{font-size:10px;letter-spacing:.02em;}}
.showcase{position:relative;aspect-ratio:4/3;border:1px solid var(--rule);background:var(--cream);
  box-shadow:0 14px 36px rgba(45,58,46,.16);overflow:hidden;}
.showcase .face{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;}
.showcase .face.on{opacity:1;}
.showcase .face.made img{width:100%;height:100%;object-fit:cover;}
.showcase .chrome{position:absolute;top:0;left:0;right:0;height:34px;display:flex;align-items:center;
  gap:6px;padding:0 12px;background:rgba(244,241,234,.92);border-bottom:1px solid var(--rule);z-index:3;}
.showcase .chrome i{width:8px;height:8px;border-radius:50%;background:var(--sand);}
.showcase .chrome span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--sage);
  margin-left:8px;text-transform:uppercase;}
/* The contour face is the FIRST thing shown (the whole first screen on mobile), so it must be colourful
   on first PAINT and match the finished-print photo it crossfades into: warm wood canvas, cream relief
   rising to a white peak, navy water, fine charcoal contour lines. The filled bands give instant colour;
   the fine lines draw in live on top. [Josh: first mobile image too monochrome / off-palette] */
.contour{position:absolute;left:0;top:34px;width:100%;height:calc(100% - 34px);display:block;
  background:linear-gradient(165deg,#efe7d8 0%,#e1d4bb 56%,#d3c2a2 100%);}
.contour .relief{filter:drop-shadow(4px 8px 6px rgba(40,33,22,.18));}
.contour .band{stroke:rgba(46,43,38,.42);stroke-width:.8;vector-effect:non-scaling-stroke;}
.contour .band.water{stroke:rgba(28,38,52,.5);}
.contour .band.peak{stroke:rgba(58,62,58,.6);stroke-width:1.1;}
.contour .cl{fill:none;stroke:rgba(46,43,38,.34);stroke-width:.7;vector-effect:non-scaling-stroke;
  stroke-dasharray:1600;stroke-dashoffset:1600;animation:draw 2.4s ease forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.contour .pulse{transform-box:fill-box;transform-origin:center;animation:pinpulse 2.2s ease-out infinite;}
@keyframes pinpulse{0%{transform:scale(1);opacity:.85;}70%{opacity:0;}100%{transform:scale(3);opacity:0;}}
.showtabs{position:absolute;bottom:0;left:0;right:0;display:flex;z-index:4;}
.showtabs b{flex:1;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;text-align:center;padding:.5rem .3rem;background:rgba(26,32,24,.8);
  color:rgba(255,248,232,.5);transition:background .6s,color .6s;}
.showtabs b.on{background:var(--forest);color:var(--cream);}
@media(prefers-reduced-motion:reduce){.contour path{animation:none;stroke-dashoffset:0;}.contour .pulse{animation:none;}}

/* ---- process showcase: a real 3D topo + live customisation (pick -> customise -> we make it) ---- */
.showcase .stage{position:absolute;inset:34px 0 0;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 28%,#fbfaf7,#ece9e2);}
.showcase .demo-topo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* selection box -- the real picker look: white halo under a dark dashed line, gently breathing */
.showcase .selbox{position:absolute;left:23%;top:22%;right:23%;bottom:28%;border:1.5px dashed #15180f;
  box-shadow:0 0 0 2px rgba(255,255,255,.92);animation:selbreathe 4.2s ease-in-out infinite;z-index:3;}
.showcase .selbox .h{position:absolute;width:11px;height:11px;background:#fff;border:1.5px solid #15180f;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 1px 3px rgba(0,0,0,.4);}
.showcase .selbox .h.nw{left:-6px;top:-6px;} .showcase .selbox .h.se{right:-6px;bottom:-6px;}
@keyframes selbreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
.showcase .locpin{position:absolute;left:calc(50% - 11px);top:25%;width:22px;height:29px;z-index:3;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));animation:locdrop 3.6s ease-in-out infinite;}
@keyframes locdrop{0%,55%,100%{transform:translateY(0);}28%{transform:translateY(-7px);}}
.showcase .ctrlbar{position:absolute;left:12px;right:12px;bottom:34px;z-index:5;display:flex;align-items:center;gap:8px;}
.showcase .swatches{display:flex;gap:6px;background:rgba(255,255,255,.94);padding:6px 8px;border-radius:18px;box-shadow:0 2px 9px rgba(0,0,0,.28);}
.showcase .swatches i{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);animation:swactive 5.2s ease infinite;}
.showcase .swatches i:nth-child(1){animation-delay:0s;} .showcase .swatches i:nth-child(2){animation-delay:1.3s;}
.showcase .swatches i:nth-child(3){animation-delay:2.6s;} .showcase .swatches i:nth-child(4){animation-delay:3.9s;}
@keyframes swactive{0%,78%,100%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);}18%,62%{box-shadow:0 0 0 2px #fff,0 0 0 3.6px var(--accent);}}
.showcase .snowctrl{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.94);padding:6px 11px;border-radius:18px;
  box-shadow:0 2px 9px rgba(0,0,0,.28);font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;color:var(--ink);}
.showcase .snowctrl .track{position:relative;width:50px;height:4px;border-radius:2px;background:#d8d3c7;}
.showcase .snowctrl .track b{position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--accent);
  box-shadow:0 1px 3px rgba(0,0,0,.45);animation:snowslide 4.6s ease-in-out infinite;}
@keyframes snowslide{0%,100%{left:6%;}50%{left:74%;}}
.showcase .sizetag{margin-left:auto;background:rgba(26,32,24,.82);color:var(--cream);font-family:var(--mono);
  font-size:9px;letter-spacing:.08em;padding:6px 10px;border-radius:18px;box-shadow:0 2px 9px rgba(0,0,0,.28);}
@media(prefers-reduced-motion:reduce){.showcase .selbox,.showcase .locpin,.showcase .swatches i,.showcase .snowctrl .track b{animation:none;}}
/* step 1 -- the MAP EDITOR: a map with the selection box being sized, search + basemap toggles */
.showcase .stage.maped{background:#cfd8cb;}
.showcase .map-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.showcase .map-credit{position:absolute;bottom:4px;right:5px;font-family:var(--mono);font-size:7px;letter-spacing:.02em;
  color:rgba(35,35,25,.72);background:rgba(255,255,255,.6);padding:2px 4px;border-radius:3px;}
.showcase .map-bg{position:absolute;inset:0;background:
  radial-gradient(55% 50% at 32% 34%,#a6b485,transparent 72%),
  radial-gradient(50% 55% at 74% 72%,#7e8e60,transparent 72%);}
.showcase .map-feat{position:absolute;inset:0;width:100%;height:100%;}
.showcase .map-search{position:absolute;top:10px;left:10px;right:104px;background:rgba(255,255,255,.95);border-radius:6px;
  padding:7px 10px;font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.28);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.showcase .map-basemaps{position:absolute;top:10px;right:10px;display:flex;border-radius:6px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.28);}
.showcase .map-basemaps b{background:#fff;color:var(--ink);font-family:var(--mono);font-weight:400;font-size:7px;letter-spacing:.05em;
  padding:6px 6px;border-left:1px solid rgba(0,0,0,.12);text-transform:uppercase;}
.showcase .map-basemaps b:first-child{border-left:none;}
.showcase .map-basemaps b.on{background:var(--ink);color:var(--cream);}
.showcase .selbox.sizing{animation:sizing 4.6s ease-in-out infinite;}
@keyframes sizing{0%,100%{left:25%;top:25%;right:25%;bottom:31%;}50%{left:19%;top:20%;right:19%;bottom:25%;}}
.showcase .selbox .dim{position:absolute;left:50%;bottom:-7px;transform:translate(-50%,100%);white-space:nowrap;
  background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:7.5px;letter-spacing:.04em;padding:3px 6px;border-radius:4px;}
/* step 2 -- the SNOW slider actually drives the snow: high-snow render crossfades IN SYNC with the thumb */
.showcase .snowlayer{opacity:0;animation:snowfade 4.6s ease-in-out infinite;}
@keyframes snowfade{0%,100%{opacity:0;}50%{opacity:1;}}

/* ---- full-bleed studio band (the custom-design centrepiece) ---- */
.band{background:var(--forest);}
.band .label{color:var(--sand);}
.band-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.6rem;align-items:center;margin-top:2rem;}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.3rem;}
.steps li{display:flex;gap:1rem;align-items:flex-start;}
.steps .n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--forest);background:var(--sand);
  padding:.3rem .5rem;line-height:1;flex:none;margin-top:.25rem;}
.steps h3{font-size:1.3rem;font-weight:500;color:var(--cream);margin:0 0 .15em;}
.steps p{color:rgba(255,248,232,.74);font-size:15.5px;margin:0;max-width:30em;}
.band-art{display:block;}
.band-art .cs{position:relative;overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(255,248,232,.18);
  box-shadow:0 16px 40px rgba(0,0,0,.32);background:#11160f;}
.band-art .cs-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;}
.band-art .cs-slide.on{opacity:1;}
.band-art .cs-dots{position:absolute;bottom:9px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:2;}
.band-art .cs-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 0 3px rgba(0,0,0,.5);transition:background .3s;}
.band-art .cs-dots i.on{background:#fff;}
.btn.light{background:var(--cream);border-color:var(--cream);color:var(--forest);}
.btn.light:hover{background:var(--sand);border-color:var(--sand);color:var(--forest);}
.band-note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(255,248,232,.6);
  align-self:center;max-width:22em;}
@media(max-width:760px){
  .band-grid{grid-template-columns:1fr;gap:1.6rem;}
  .band-art{order:-1;}
}