/* ============================================================
   PATERA STUDIO — shared stylesheet
   Aesthetic: warm heritage luxury. Bone & walnut, aged brass,
   characterful serif display (Fraunces) + quiet sans (Hanken Grotesk).
   ============================================================ */

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

:root{
  --paper:#FAF6EE;          /* base background */
  --bone:#F1EADD;           /* secondary surface */
  --bone-deep:#E7DCC9;      /* borders / dividers */
  --ink:#211C17;           /* near-black walnut for text */
  --walnut:#3A2E22;        /* dark section background */
  --walnut-deep:#251C13;   /* deepest dark */
  --brass:#9C7B41;         /* aged brass accent */
  --brass-light:#C3A063;
  --muted:#6E6354;         /* secondary text */
  --muted-light:#B7AC99;
  --max:1240px;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Hanken Grotesk',-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* subtle paper grain over everything */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  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='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,6vw,5rem)}
h2{font-size:clamp(2rem,4vw,3.2rem)}
h3{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:400}
p{font-size:1.05rem;color:var(--ink)}
.lead{font-size:clamp(1.15rem,1.7vw,1.4rem);color:var(--muted);font-weight:300}

.label{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--brass);
}
.serif-em{font-family:var(--serif);font-style:italic;font-weight:300}

a{color:inherit;text-decoration:none}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 max(1.25rem,7vw);position:relative;z-index:2}
.nav-inner{padding-left:max(1.25rem,7vw)!important;padding-right:max(1.25rem,7vw)!important}

/* drop-in photo replacement for .imgtile placeholders */
.photo{width:100%;height:auto;display:block;border-radius:2px;
  box-shadow:0 28px 60px -28px rgba(30,20,10,.5);object-fit:cover}
section{position:relative;z-index:2}
.pad{padding:clamp(5rem,11vh,9rem) 0}

/* ---------- Nav ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,246,238,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bone-deep);
}
.nav-inner{max-width:var(--max);margin:0 auto;padding:1.1rem 7vw;
  display:flex;align-items:center;justify-content:space-between}
.brand{font-family:var(--serif);font-size:1.45rem;letter-spacing:.04em;font-weight:400}
.brand span{color:var(--brass)}
.nav-links{display:flex;gap:2.2rem;align-items:center}
.nav-links a{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);transition:color .3s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-cta{border:1px solid var(--ink);padding:.55rem 1.2rem;border-radius:1px;
  color:var(--ink)!important;transition:all .35s}
.nav-cta:hover{background:var(--ink);color:var(--paper)!important}
.menu-btn{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ink)}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--sans);font-size:.8rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;padding:1rem 2.4rem;border-radius:1px;
  cursor:pointer;transition:all .4s;border:1px solid var(--ink)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--brass);border-color:var(--brass)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-light{border-color:var(--paper);color:var(--paper)}
.btn-light:hover{background:var(--paper);color:var(--ink)}

/* ---------- Hero ---------- */
.hero{padding:clamp(4rem,9vh,7rem) 0 clamp(4rem,8vh,6rem);
  display:grid;grid-template-columns:1.05fr .95fr;gap:5vw;align-items:center}
.hero-tag{margin-bottom:1.6rem}
.hero h1{margin-bottom:1.6rem}
.hero h1 em{color:var(--brass)}
.hero .lead{max-width:34ch;margin-bottom:2.4rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.hero-note{font-size:.85rem;color:var(--muted);margin-top:1.6rem;letter-spacing:.02em}

/* ---------- Pen render frame ---------- */
.pen-stage{position:relative;aspect-ratio:4/5;border-radius:2px;overflow:hidden;
  background:radial-gradient(120% 90% at 70% 20%,#4A3B2B 0%,#2E2419 55%,#1C140C 100%);
  box-shadow:0 40px 80px -30px rgba(30,20,10,.6), inset 0 0 120px rgba(0,0,0,.4)}
.pen-stage svg{position:absolute;inset:0;width:100%;height:100%}
.pen-cap{position:absolute;left:8%;bottom:7%;z-index:3}
.pen-cap .label{color:var(--brass-light)}
.pen-cap .nm{font-family:var(--serif);font-style:italic;color:var(--paper);
  font-size:1.15rem;margin-top:.3rem}

/* ---------- Image tiles (placeholder for real photos) ---------- */
.imgtile{position:relative;border-radius:2px;overflow:hidden;
  background:linear-gradient(135deg,#6A5743 0%,#41331F 50%,#2A2014 100%);
  display:flex;align-items:flex-end;min-height:320px;
  box-shadow:0 28px 60px -28px rgba(30,20,10,.5)}
.imgtile::after{content:"";position:absolute;inset:0;opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.imgtile .cap{position:relative;z-index:2;padding:1.4rem 1.6rem}
.imgtile .cap .label{color:var(--brass-light)}
.imgtile .cap .t{font-family:var(--serif);font-style:italic;color:var(--paper);font-size:1.1rem;margin-top:.2rem}
.imgtile.light{background:linear-gradient(135deg,#EFE6D5,#DCCBB0 60%,#C9B493)}
.imgtile.light .cap .t{color:var(--walnut)}
.imgtile.light .cap .label{color:var(--brass)}

/* ---------- Sections ---------- */
.dark{background:var(--walnut);color:var(--paper)}
.dark h1,.dark h2,.dark h3{color:var(--paper)}
.dark p{color:#D8CDBC}
.dark .lead{color:#C9BCA6}
.dark .label{color:var(--brass-light)}
.bone{background:var(--bone)}

.eyebrow-row{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.8rem}
.eyebrow-row .rule{height:1px;width:54px;background:var(--brass);opacity:.6}

/* story / prose */
.prose{max-width:62ch;margin:0 auto}
.prose p{margin-bottom:1.5rem;font-size:1.18rem;line-height:1.78}
.prose p.first::first-letter{font-family:var(--serif);font-size:3.6rem;float:left;
  line-height:.82;padding:.1em .12em 0 0;color:var(--brass)}

/* steps / how it works */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
.step .num{font-family:var(--serif);font-size:2.4rem;color:var(--brass);font-style:italic;display:block;margin-bottom:.6rem}
.step h3{margin-bottom:.7rem}
.step p{color:var(--muted);font-size:1rem}

/* feature split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}
.split.rev .split-media{order:-1}

/* price card */
.pricecard{border:1px solid var(--bone-deep);background:var(--paper);
  padding:2.6rem;border-radius:2px;max-width:420px}
.pricecard .label{display:block;margin-bottom:.8rem}
.pricecard .amt{font-family:var(--serif);font-size:3rem;line-height:1}
.pricecard .amt small{font-size:1rem;color:var(--muted);font-style:italic}
.pricecard ul{list-style:none;margin:1.6rem 0;border-top:1px solid var(--bone-deep)}
.pricecard li{padding:.7rem 0;border-bottom:1px solid var(--bone-deep);
  font-size:.95rem;color:var(--muted);display:flex;gap:.7rem;align-items:flex-start}
.pricecard li::before{content:"—";color:var(--brass)}

/* ---------- Forms ---------- */
.formwrap{max-width:620px;margin:0 auto}
.field{margin-bottom:1.5rem}
.field label{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.55rem;font-weight:500}
.field input,.field select,.field textarea{
  width:100%;padding:.95rem 1.1rem;background:var(--paper);
  border:1px solid var(--bone-deep);border-radius:1px;font-family:var(--sans);
  font-size:1rem;color:var(--ink);transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brass)}
.field textarea{resize:vertical;min-height:120px}
.checkrow{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--muted)}
.checkrow input{width:auto;margin-top:.25rem}
.formnote{font-size:.82rem;color:var(--muted-light);margin-top:1.2rem;line-height:1.5}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}

/* ---------- Footer ---------- */
footer{background:var(--walnut-deep);color:#C9BCA6;padding:4rem 0 2.4rem}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem}
footer .brand{color:var(--paper);margin-bottom:1rem;display:block}
footer p{color:#9C8F7C;font-size:.92rem;max-width:34ch}
footer h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-light);margin-bottom:1.1rem;font-weight:600}
footer a{display:block;color:#C9BCA6;font-size:.92rem;margin-bottom:.6rem;transition:color .3s}
footer a:hover{color:var(--paper)}
.footbottom{max-width:var(--max);margin:3rem auto 0;padding:1.8rem 7vw 0;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;font-size:.8rem;color:#7D7060;flex-wrap:wrap;gap:1rem}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Page hero (interior pages) ---------- */
.phero{padding:clamp(3.5rem,8vh,6rem) 0 clamp(2.5rem,5vh,4rem)}
.phero h1{margin:.8rem 0 1.2rem}
.phero .lead{max-width:48ch}

/* ---------- Responsive ---------- */
@media(max-width:880px){
  .hero{grid-template-columns:1fr;gap:3rem}
  .pen-stage{aspect-ratio:5/4}
  .split,.grid3,footer .wrap{grid-template-columns:1fr;gap:2.5rem}
  .split.rev .split-media{order:0}
  .row2{grid-template-columns:1fr}
  .nav-links{display:none}
  .menu-btn{display:block}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:var(--paper);padding:1.5rem 7vw;gap:1.2rem;
    border-bottom:1px solid var(--bone-deep)}
}