/* crumb-editorial-light: warm paper magazine plate.
   Editorial Light: Fraunces + Inter, gold script once, flat hairline cards, generous whitespace.
   Builds on shared shadcn-inspired tokens (baked in for Pages deploy). */
:root{
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --t-h1:clamp(2.4rem,5.2vw,4.2rem);
  --t-h2:clamp(1.8rem,3vw,2.6rem);
  --t-h3:1.2rem;
  --t-lede:1.05rem;
  --t-label:0.7rem;
  --t-small:0.82rem;
  --t-body:1.05rem;
  --muted:#7A6E62;
  --border:#DDD2C3;
  --ring:#2F4A6E;
  --radius-sm:2px;
  --radius:4px;
  --radius-pill:999px;
  --wrap:1180px;

  --c-page:#F7F3EC;
  --c-surface:#FFFCF7;
  --c-surface-alt:#EFE8DC;
  --c-ink:#1C1814;
  --c-body:#4A4038;
  --c-muted:var(--muted);
  --c-hairline:var(--border);
  --c-accent:#2F4A6E;
  --c-accent-soft:#E8EDF3;
  --c-accent-ink:#FBF7F0;
  --c-gold:#A67C3D;
  --f-display:"Fraunces",Georgia,serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-script:"Caveat",cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--c-page);
  color:var(--c-body);
  font:400 var(--t-body)/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
p{margin:0 0 var(--sp-4)}
a{color:var(--c-accent)}
h1,h2,h3{
  font-family:var(--f-display);
  color:var(--c-ink);
  line-height:1.08;
  margin:0;
  font-weight:500;
}
h1{font-size:var(--t-h1);letter-spacing:-.02em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-weight:600}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-5)}

.script{
  font-family:var(--f-script);
  font-size:1.55rem;
  color:var(--c-gold);
  display:block;
  margin:var(--sp-2) 0 var(--sp-4);
}
.label{
  font:600 var(--t-label)/1 var(--f-body);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-gold);
  margin:0 0 var(--sp-3);
}
.lede{font-size:var(--t-lede);max-width:36ch}

.btn{
  display:inline-block;
  background:var(--c-accent);
  color:var(--c-accent-ink);
  border:0;
  border-radius:var(--radius-pill);
  padding:14px 28px;
  text-decoration:none;
  font:500 1rem var(--f-body);
  cursor:pointer;
}
.btn:hover{filter:brightness(1.05)}
.btn:focus-visible{outline:2px solid var(--ring);outline-offset:3px}

/* Flat hairline card: magazine plate, no shadow */
.card{
  background:var(--c-surface);
  border:1px solid var(--c-hairline);
  border-radius:var(--radius);
  padding:var(--sp-5);
}

.draft{display:none}
[data-draft] .draft{
  display:block;
  position:sticky;
  top:0;
  z-index:60;
  background:var(--c-ink);
  color:#fff;
  text-align:center;
  font:500 .8rem var(--f-body);
  padding:var(--sp-2) var(--sp-3);
}

.el-nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(247,243,236,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--c-hairline);
}
[data-draft] .el-nav{top:33px}
.el-nav .in{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  padding:var(--sp-4) var(--sp-5);
  max-width:var(--wrap);
  margin:0 auto;
}
.el-mark{
  font-family:var(--f-display);
  font-size:1.05rem;
  color:var(--c-ink);
  text-decoration:none;
  font-weight:600;
}
.el-nav .links{margin-left:auto;display:flex;gap:1.4rem;font-size:.92rem}
.el-nav .links a{color:var(--c-body);text-decoration:none}
.el-nav .links a:hover{color:var(--c-accent)}

.el-hero{
  display:grid;
  grid-template-columns:1.15fr .95fr;
  min-height:78vh;
  margin:0 0 var(--sp-8);
}
.el-hero-photo{
  margin:0;
  background:#1a2433;
  min-height:70vh;
  position:relative;
  overflow:hidden;
}
.el-hero-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.el-hero-panel{
  background:var(--c-accent);
  color:var(--c-accent-ink);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(2rem,4vw,3.8rem);
}
.el-hero-panel .label{color:rgba(251,247,240,.7)}
.el-hero-panel h1{color:#fff;max-width:11ch}
.el-hero-panel .script{color:#E8C9A8}
.el-hero-panel .lede{color:rgba(251,247,240,.9);max-width:32ch}
.el-hero-panel .btn{background:#FBF7F0;color:var(--c-accent)}
.el-hero-sec{
  display:inline-block;
  margin-top:var(--sp-4);
  color:rgba(251,247,240,.92);
  font-size:.95rem;
}

.el-trust{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-5);
  border-top:1px solid var(--c-hairline);
  border-bottom:1px solid var(--c-hairline);
  padding:var(--sp-5) 0;
  margin:0 0 var(--sp-8);
}
.el-trust b{
  display:block;
  font-family:var(--f-display);
  color:var(--c-ink);
  margin-bottom:var(--sp-1);
}
.el-trust div{font-size:.9rem}

.el-section{margin:0 0 var(--sp-8)}

.el-offers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-6);
  margin-top:var(--sp-6);
  align-items:start;
}
.el-offers .card{padding:0;overflow:hidden}
.el-offers .card-body{padding:var(--sp-5)}
.el-offers .shot{
  margin:0;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--c-surface-alt);
  border-bottom:1px solid var(--c-hairline);
}
.el-offers .shot img{width:100%;height:100%;object-fit:cover}
.el-offers h3{margin-bottom:var(--sp-2)}
.el-offers p{color:var(--c-muted);margin:0;font-size:.95rem}

.el-about{max-width:62ch;margin:0 0 var(--sp-8)}
.el-about a{text-decoration:none}
.el-about a:hover{text-decoration:underline}

.el-how{margin:0 0 var(--sp-8);max-width:62ch}

.el-order{
  background:var(--c-ink);
  color:#fff;
  padding:var(--sp-7);
  margin:0 0 var(--sp-6);
  border-radius:var(--radius);
}
.el-order h2{color:#fff}
.el-order .label{color:rgba(255,255,255,.55)}
.el-order form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-4);
  margin-top:var(--sp-5);
}
.el-order label{
  display:block;
  font:500 .82rem var(--f-body);
  margin-bottom:var(--sp-2);
  opacity:.9;
}
.el-order input,
.el-order select,
.el-order textarea{
  width:100%;
  border:0;
  border-radius:var(--radius);
  padding:12px 14px;
  font:400 1rem var(--f-body);
  color:var(--c-ink);
}
.el-order textarea{min-height:110px;resize:vertical}
.el-order .full{grid-column:1/-1}
.el-order .btn{background:#fff;color:var(--c-ink);font-weight:600}
#draftnote{display:none;margin:.75rem 0 0;font-size:.9rem}
.el-order .hint{font-size:var(--t-small);opacity:.85;margin:.5rem 0 0}

.el-footer{
  border-top:1px solid var(--c-hairline);
  padding:var(--sp-6) 0 var(--sp-7);
  font-size:.92rem;
}
.el-footer .in{
  display:flex;
  gap:var(--sp-6);
  flex-wrap:wrap;
  justify-content:space-between;
}
.el-footer a{color:var(--c-body);text-decoration:none}
.el-footer b{font-family:var(--f-display);color:var(--c-ink)}
.credit{color:var(--c-muted);font-size:.8rem;margin-top:var(--sp-5)}

@media(max-width:900px){
  .el-hero{grid-template-columns:1fr;min-height:auto}
  .el-hero-photo{min-height:56vh;order:-1}
  .el-trust{grid-template-columns:1fr}
  .el-offers{grid-template-columns:1fr}
  .el-nav .links{display:none}
  .el-order form{grid-template-columns:1fr}
  .el-order{padding:var(--sp-5)}
}

/* ---- WebKnight mock extensions (Sep 2026): mobile-first additions on top of Editorial Light ---- */
.el-nav .cta{display:none}
.el-gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-5)}
.el-gallery figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--c-surface-alt);border-radius:var(--radius)}
.el-gallery img{width:100%;height:100%;object-fit:cover}
.el-gallery figure.wide{grid-column:1/-1;aspect-ratio:4/3}
.el-note{font-size:var(--t-small);color:var(--c-muted);border-left:3px solid var(--c-accent);padding:var(--sp-2) var(--sp-4);background:var(--c-surface);margin-top:var(--sp-5)}
.el-contact{list-style:none;padding:0;margin:var(--sp-4) 0 0;display:grid;gap:var(--sp-3)}
.el-contact li{background:var(--c-surface);border:1px solid var(--c-hairline);border-radius:var(--radius);padding:var(--sp-4)}
.el-contact b{display:block;font:600 var(--t-label)/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--sp-2)}
.el-contact a{color:var(--c-ink);text-decoration:none;font-weight:500;word-break:break-word}
.el-footer .social{display:flex;gap:var(--sp-4)}
@media(max-width:900px){
  .el-nav .cta{display:inline-block;margin-left:auto;background:var(--c-accent);color:var(--c-accent-ink);padding:8px 16px;border-radius:var(--radius-pill);font-size:.85rem;text-decoration:none}
  .el-hero{margin-bottom:var(--sp-7)}
  .el-hero-photo{min-height:62vh}
  .el-section,.el-about,.el-how,.el-trust{margin-bottom:var(--sp-7)}
  h1{font-size:clamp(2.2rem,9vw,3rem)}
  .draft{font-size:.72rem}
}
@media(min-width:901px){
  .el-gallery{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
  .el-gallery figure.wide{grid-column:span 2;aspect-ratio:auto}
  .el-offers.three{grid-template-columns:repeat(3,1fr)}
  .el-contact{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  [data-draft] .draft{position:relative}
  [data-draft] .el-nav{top:0}
}