:root{
  --green:#2f4b3c;      /* Pilgrim green: primary accent */
  --green-deep:#22382c;
  --gold:#b48a3c;
  --gold-deep:#8a6a2e;
  --ink:#1a1a1a;
  --muted:#5f5a50;
  --bg:#fdfcf8;
  --line:#e6dcc6;
  --tint:#f8f2e4;
  --stone:#f3efe5;
  --head:"Cormorant Garamond",Georgia,serif;
  --body:"EB Garamond",Garamond,Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 19.5px/1.7 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--green)}
.shell{width:22px;height:22px;color:var(--gold);flex:none}
.kicker{font:600 14.5px/1.45 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 .6rem}
h1,h2,h3{font-family:var(--head);font-weight:600;color:var(--ink);line-height:1.15;margin:0}
.sr{position:absolute;left:-9999px}

/* Header */
.top{max-width:1040px;margin:0 auto;padding:22px 28px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--green);font:600 26px var(--head);letter-spacing:.06em}
nav a{margin-left:26px;text-decoration:none;color:var(--green);font:500 15px var(--body);letter-spacing:.15em;text-transform:uppercase}
nav a:first-child{margin-left:0}
nav a:hover{color:var(--gold-deep)}

/* Masthead */
.mast{max-width:680px;margin:0 auto;padding:84px 24px 40px;text-align:center}
.mast h1{font-size:clamp(54px,7.4vw,84px);font-weight:600;color:var(--green);letter-spacing:.02em}
.sub{font-size:22px;font-style:italic;color:var(--muted);margin:0 auto;max-width:540px}
.mast h1 .h1-name{display:block}
.mast h1 .sub{display:block;font-family:var(--body);font-size:24px;font-weight:400;font-style:italic;line-height:1.4;letter-spacing:.02em;word-spacing:normal;font-kerning:normal;max-width:560px;text-wrap:balance}
/* Hero rhythm: even steps from label to name to ornament to main line */
.mast{padding-bottom:28px}
.mast .kicker{margin-bottom:14px}
.mast .waymark{margin:20px auto 18px}
.hero-sub{font-size:19px;line-height:1.65;color:#2c2a26;max-width:560px;margin:18px auto 0}

/* Signature: the waymark, a gold scallop shell between hairlines */
.waymark{display:flex;align-items:center;justify-content:center;gap:14px;margin:26px auto 28px;max-width:260px}
.waymark span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.waymark span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.waymark .shell{width:26px;height:26px}
.waymark.small{max-width:180px;margin:0 auto 18px}
.waymark.small .shell{width:20px;height:20px}

/* Plate: book-plate framing with wide stone mat and gold fillet */
.plate{max-width:820px;margin:20px auto 76px;padding:0 24px;text-align:center}
.mat{background:var(--stone);padding:34px;border:1px solid var(--line);box-shadow:0 14px 34px -18px rgba(34,56,44,.45),0 2px 6px rgba(0,0,0,.05)}
.mat img{display:block;width:100%;height:auto;outline:1px solid var(--gold);outline-offset:6px}
.plate figcaption{margin-top:16px;font-size:17.5px;font-style:normal;color:var(--muted)}
.plate figcaption em{font-style:italic}

/* Intro */
.intro{max-width:640px;margin:0 auto;padding:0 24px 30px}
.intro .kicker{text-align:center}
.lede::first-letter{float:left;font:600 4.4em/.78 var(--head);color:var(--green);padding:.08em .1em 0 0}
.sign{font:italic 500 22px var(--head);color:var(--green);text-align:right;margin-top:1.4rem}
.sign > span{display:block}
.sign-name::before{content:"";display:inline-block;width:32px;height:1px;background:var(--gold);vertical-align:middle;margin-right:10px}

/* Sites: a road of numbered stops */
.sites{max-width:860px;margin:60px auto 0;padding:70px 24px 40px;border-top:1px solid var(--line)}
.sec-head{text-align:center;margin-bottom:46px}
.sites .sec-head{margin-bottom:40px}
.sec-head h2{font-size:46px}
.sec-sub{font-size:17.5px;font-style:italic;color:var(--muted);margin:.3rem 0 0}
.road{list-style:none;margin:0 auto;padding:0;max-width:700px;position:relative}
.road::before{content:"";position:absolute;left:27px;top:10px;bottom:10px;width:1px;background:linear-gradient(var(--gold),var(--line) 60%,var(--gold))}
.road li{position:relative;padding-left:84px;margin-bottom:26px}
.stop{position:absolute;left:0;top:18px;width:55px;height:55px;border-radius:50%;background:var(--bg);border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font:600 21px var(--head);color:var(--green);letter-spacing:.04em;box-shadow:0 0 0 5px var(--bg)}
.site{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);padding:22px 26px 20px;transition:border-color .2s,box-shadow .2s}
.site:hover{border-color:var(--gold);box-shadow:0 8px 22px -14px rgba(34,56,44,.5)}
.site h3{font-size:32px;color:var(--green);margin-bottom:.3rem}
.site p:not(.kicker){font-size:17.5px;margin:0 0 .8rem;color:#2c2a26}
.go{font:500 13.5px var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep);border-bottom:1px solid var(--line);padding-bottom:2px}
.site:hover .go{border-color:var(--gold)}

/* Ethos: four rules */
.ethos{max-width:860px;margin:30px auto 0;padding:60px 24px 20px;border-top:1px solid var(--line)}
.ethos .sec-head{margin-bottom:34px}
.rules{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.rules li{border-top:1px solid var(--gold);padding:18px 0 22px}
.rules h3{font-size:28px;color:var(--green);margin-bottom:.35rem}
.rules p{font-size:18px;margin:0;color:#2c2a26}

/* Free offer */
.offer{max-width:760px;margin:50px auto;padding:0 24px}
.offer-in{background:var(--tint);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);padding:44px 48px;text-align:center}
.offer h2{font-size:40px;margin-bottom:.6rem}
.offer p{max-width:540px;margin:0 auto 1rem}
.signup label{display:block;font-size:17.5px;font-style:italic;color:var(--muted);margin:1.2rem 0 .5rem}
.row{display:flex;gap:10px;max-width:480px;margin:0 auto}
input[type=email]{flex:1;min-width:0;font:inherit;font-size:17.5px;padding:11px 14px;border:1px solid var(--line);background:#fff;color:var(--ink)}
input[type=email]:focus{outline:1px solid var(--gold);border-color:var(--gold)}
button{font:500 14px var(--body);letter-spacing:.15em;text-transform:uppercase;background:var(--green);color:#fdfcf8;border:0;padding:12px 20px;cursor:pointer}
button:hover{background:var(--green-deep)}
.fine{font-size:17.5px;color:var(--muted);font-style:italic;margin:.7rem 0 0 !important}

/* Letter */
.letter{max-width:600px;margin:80px auto 40px;padding:0 24px;text-align:center}
.letter h2{font-size:40px;margin-bottom:.5rem}
.letter p{margin:0 0 1.2rem}
.signup.inline{display:flex;gap:10px;max-width:440px;margin:0 auto}

/* Footer line mock */
.mock{max-width:700px;margin:70px auto 20px;padding:24px;border:1px dashed var(--line);text-align:center}
.mock-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:14px;font-size:17.5px;color:var(--muted)}
.tp-line{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--green);font:500 13.5px var(--body);letter-spacing:.15em;text-transform:uppercase}
.tp-line .shell{width:18px;height:18px}

/* Footer */
.foot{max-width:760px;margin:40px auto 0;padding:46px 24px 60px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:17.5px}
.foot p{margin:.3rem 0}
.foot-brand{font:600 28px var(--head);color:var(--green);letter-spacing:.06em}
.foot-links a{margin:0 12px;color:var(--green);text-decoration:none;font-size:13.5px;letter-spacing:.15em;text-transform:uppercase;display:inline-block;padding:4px 0}

@media (max-width:640px){
  body{font-size:18.5px}
  .sub{font-size:20px}
  .mast h1 .sub{font-size:20px;max-width:340px}
  .mast .waymark{margin:16px auto 14px}
  .hero-sub{font-size:18px}
  .sec-head h2{font-size:38px}
  .offer h2,.letter h2{font-size:34px}
  .sign{font-size:20.5px}
  .brand{font-size:25px}
  .top{justify-content:center;padding:18px}
  nav{text-align:center}
  nav{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;justify-items:center;gap:8px 28px}
  nav a,nav a:first-child{margin:0;font-size:13.5px;letter-spacing:.14em}
  .mast{padding:52px 22px 28px}
  .mat{padding:14px}
  .mat img{outline-offset:4px}
  .road::before{left:19px}
  .road li{padding-left:56px}
  .stop{width:40px;height:40px;font-size:17.5px}
  .site{padding:18px}
  .site h3{font-size:28px}
  .offer-in{padding:32px 22px}
  .rules{grid-template-columns:1fr}
  .rules h3{font-size:26px}
  .row,.signup.inline{flex-direction:column}
  .mock-foot{justify-content:center}
}

/* Footer copyright */
.copy{margin-top:1rem !important}