/* ============================================================
   JJ Stuff — Content & form pages (About, Custom Orders, etc.)
   ============================================================ */

/* Page hero */
.page-hero{background:linear-gradient(180deg,var(--warm-white),var(--linen));border-bottom:1px solid var(--cream)}
.page-hero__inner{max-width:var(--wrap);margin:0 auto;padding:40px clamp(16px,4vw,24px);text-align:center}
.page-hero__eyebrow{font-family:var(--font-hand);font-size:24px;color:var(--gold-text)}
.page-hero__title{font-family:var(--font-head);font-size:clamp(30px,5vw,44px);font-weight:600;line-height:1.05}
.page-hero__sub{color:var(--muted);font-size:16px;margin-top:8px;max-width:560px;margin-inline:auto}

/* ---------- About ---------- */
.about-lead{max-width:var(--wrap);margin:0 auto;padding:56px clamp(16px,4vw,24px);display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.about-lead__photo{aspect-ratio:4/5;border-radius:20px;background:linear-gradient(150deg,#D48A7C,#B85C50);display:flex;align-items:center;justify-content:center;font-family:var(--font-hand);font-size:18px;color:rgba(255,255,255,.85);box-shadow:var(--shadow-md)}
.about-lead__eyebrow{font-family:var(--font-hand);font-size:24px;color:var(--coral)}
.about-lead h2{font-family:var(--font-head);font-size:clamp(26px,4vw,34px);font-weight:600;margin:4px 0 16px}
.about-lead p{font-family:var(--font-editorial);color:var(--muted);font-size:16px;line-height:1.85;margin-bottom:14px}

.story{background:var(--warm-white);border-top:1px solid var(--cream);border-bottom:1px solid var(--cream)}
.story__inner{max-width:820px;margin:0 auto;padding:56px clamp(16px,4vw,24px)}
.story__block{display:grid;grid-template-columns:120px 1fr;gap:28px;padding:26px 0;border-bottom:1px solid var(--cream)}
.story__block:last-child{border-bottom:none}
.story__num{font-family:var(--font-hand);font-size:44px;color:var(--gold-lt);line-height:1}
.story__block h3{font-family:var(--font-head);font-size:22px;font-weight:600;margin-bottom:10px}
.story__block p{font-family:var(--font-editorial);color:var(--muted);font-size:15.5px;line-height:1.85}
.about-sig{text-align:center;padding:48px 24px}
.about-sig p{font-family:var(--font-editorial);color:var(--muted);font-size:16px;max-width:560px;margin:0 auto 12px;line-height:1.8}
.about-sig .sig{font-family:var(--font-hand);font-size:32px;color:var(--coral)}

.values{max-width:var(--wrap);margin:0 auto;padding:56px clamp(16px,4vw,24px)}
.values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.value{background:var(--warm-white);border:1px solid var(--cream);border-radius:var(--radius);padding:24px;text-align:center}
.value__icon{font-size:28px;margin-bottom:10px}
.value h3{font-family:var(--font-head);font-size:18px;font-weight:600;margin-bottom:6px}
.value p{font-size:13.5px;color:var(--muted);line-height:1.6}

/* ---------- Form pages (Custom Orders, Contact) ---------- */
.form-wrap{max-width:720px;margin:0 auto;padding:48px clamp(16px,4vw,24px) 64px}
.form-card{background:var(--warm-white);border:1px solid var(--cream);border-radius:var(--radius);padding:clamp(20px,4vw,36px)}
.form-intro{font-family:var(--font-editorial);color:var(--muted);font-size:15.5px;line-height:1.8;margin-bottom:26px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--navy);margin-bottom:6px}
.field .opt{color:var(--light);font-weight:400}
.field input,.field select,.field textarea{
  width:100%;border:2px solid var(--cream);border-radius:var(--radius-sm);padding:12px 14px;
  font-family:var(--font-body);font-size:15px;background:var(--linen);color:var(--navy);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--coral);background:var(--warm-white)}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%231C2E47' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.upload{
  border:2px dashed var(--coral-lt);border-radius:var(--radius-sm);background:var(--coral-pale);
  padding:24px;text-align:center;cursor:pointer;display:block;transition:border-color .15s,background .15s;
}
.upload:hover{border-color:var(--coral);background:#fbe8e4}
.upload__icon{font-size:26px}
.upload__text{font-size:13px;color:var(--coral-dark);font-weight:700;margin-top:6px}
.upload__hint{font-size:11.5px;color:var(--muted);margin-top:2px}
.upload input{display:none}
.form-note{font-family:var(--font-hand);font-size:16px;color:var(--gold-text);text-align:center;margin-top:18px}

@media (max-width:820px){
  .about-lead{grid-template-columns:1fr;gap:28px}
  .about-lead__photo{max-width:340px;margin:0 auto;order:-1}
  .values__grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .story__block{grid-template-columns:1fr;gap:8px}
  .story__num{font-size:34px}
  .field-row{grid-template-columns:1fr}
}

/* Wrapper for index/page/single/search/404 templates */
.page-content{max-width:var(--wrap);margin:0 auto;padding:32px clamp(16px,4vw,24px) 64px}
.page-content .story__inner{display:block}
.page-content h2{font-family:var(--font-head);font-size:22px;margin:24px 0 10px}
.page-content p{font-family:var(--font-editorial);color:var(--muted);line-height:1.8;margin-bottom:14px}
.jj-search{display:flex;gap:10px;margin-bottom:24px}
.jj-search .co-input{flex:1}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.pagination{margin-top:28px;display:flex;gap:8px;flex-wrap:wrap}

/* Honeypot: off-screen for humans, still reachable by the bots that fill it. */
.jj-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Real photo fills the about-page portrait slot (same 4:5 as the source image). */
.about-lead__photo{overflow:hidden;padding:0}
.about-lead__photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* Contact page cards. The shared .values__grid is 3-up, which left an empty
   third column on a page that only has two things to say. */
.values__grid--contact{grid-template-columns:repeat(2,1fr)}
.values__grid--contact .value p a{color:var(--coral-dark);font-weight:700}
@media (max-width:640px){.values__grid--contact{grid-template-columns:1fr}}