/* cordiallyyoursevents.com -> "The Guest List"
   Swish List PBN (3rd one pointing there; must not echo mycountrywedding's
   dusty-rose paper/checkbox-nav/band archetype or aaronnoblephotography's
   leaf-paper/mosaic/crest-nav). Fonts: Cormorant Garamond + Plus Jakarta
   Sans, unused elsewhere on the network. Ground is an icy near-white with a
   deliberate navy cast, not cream. Menu is a native <details> expand that
   pushes the page down in normal flow -- not a checkbox-dropdown overlay,
   not a translate-x drawer. Footer is one prose sign-off, no link row, no
   copyright line. Archetype: a rail itinerary, borrowed honestly from a
   wedding-day run sheet -- numbered stops down a ruled spine. */

:root{
  --paper:#f6f7fb; --card:#ffffff; --ink:#1d2333; --mute:#5b6070;
  --line:#e2e5ee; --line2:#ececf5; --rust:#b6553a; --rust-d:#8a3f29;
  --navy-d:#12151f; --navy-mid:#1c2236;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-size:17px;line-height:1.68;
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;}
p{text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:var(--rust)}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1.16;
  color:var(--ink);text-wrap:balance;margin:0}
:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.narrow{max-width:700px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.head{background:var(--card);border-bottom:1px solid var(--line)}
.headbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0}
.brand{display:flex;align-items:center;text-decoration:none;color:inherit;flex:none}
.brand-wordmark{height:51px;width:auto;display:block}

.nav-wide{display:flex;gap:22px;align-items:center}
.nav-wide a{font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav-wide a:hover,.nav-wide a.on{border-bottom-color:var(--rust);color:var(--rust)}

/* mobile: native <details> in-flow expand -- opening pushes the hero down,
   it is not an overlay and not a translating panel */
.nav-exp{display:none}
.nav-exp summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--ink);padding:8px 4px}
.nav-exp summary::-webkit-details-marker{display:none}
.nav-exp summary .ico{width:20px;height:14px;position:relative;display:inline-block}
.nav-exp summary .ico span{position:absolute;left:0;right:0;height:2px;background:var(--ink);border-radius:2px}
.nav-exp summary .ico span:nth-child(1){top:0}
.nav-exp summary .ico span:nth-child(2){top:6px}
.nav-exp summary .ico span:nth-child(3){top:12px}
.nav-exp[open] summary .ico span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-exp[open] summary .ico span:nth-child(2){opacity:0}
.nav-exp[open] summary .ico span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-exp .navlist{display:flex;flex-direction:column;border-top:1px solid var(--line2);
  margin-top:6px;padding-top:4px}
.nav-exp .navlist a{padding:12px 4px;font-size:15px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line2)}
.nav-exp .navlist a.on{color:var(--rust)}

@media(max-width:780px){
  .nav-wide{display:none}
  .nav-exp{display:block;flex:none}
}

/* ---------- intro / masthead panel ---------- */
.intro{padding:52px 0 40px;border-bottom:1px solid var(--line)}
.introgrid{display:grid;grid-template-columns:1.3fr .9fr;gap:44px;align-items:center}
.intro h1{font-size:clamp(32px,4.6vw,50px)}
.intro .lede{margin-top:16px;color:var(--mute);font-size:18px;max-width:56ch}
.intro .byline{margin-top:20px;font-size:14px;color:var(--mute)}
.intro .byline b{color:var(--ink)}
.intropic{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:4/3}
.intropic img{width:100%;height:100%;object-fit:cover}
@media(max-width:780px){.introgrid{grid-template-columns:1fr}.intropic{order:-1;aspect-ratio:16/9}}

/* ---------- itinerary rail (homepage / category archetype) ---------- */
.rundown{padding:44px 0 60px;position:relative}
.rundown::before{content:"";position:absolute;left:29px;top:10px;bottom:60px;width:1px;
  background:var(--line);z-index:0}
@media(max-width:640px){.rundown::before{left:19px}}
.stop{position:relative;z-index:1;display:grid;grid-template-columns:60px 1fr 190px;
  gap:22px;align-items:start;padding:26px 0;border-bottom:1px solid var(--line2)}
.stop:first-child{padding-top:4px}
.stop:last-child{border-bottom:0}
@media(max-width:640px){.stop{grid-template-columns:40px 1fr;}.stop .stopthumb{display:none}}
.stopno{display:flex;align-items:center;justify-content:center;width:58px;height:58px;
  border-radius:50%;background:var(--card);border:1px solid var(--line);
  font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;color:var(--rust);font-weight:600}
@media(max-width:640px){.stopno{width:40px;height:40px;font-size:14px}}
.stopbody .eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--rust)}
.stopbody h2{font-size:clamp(21px,2.6vw,26px);margin-top:8px}
.stopbody h2 a{color:var(--ink);text-decoration:none}
.stopbody h2 a:hover{color:var(--rust)}
.stopbody p{color:var(--mute);margin-top:8px;font-size:15.5px;max-width:64ch}
.stopbody .when{display:block;margin-top:10px;font-size:12.5px;color:var(--mute)}
.stopthumb{display:block;border-radius:4px;overflow:hidden}
.card-image{aspect-ratio:3/2;overflow:hidden}
.card-image img{width:100%;height:100%;object-fit:cover}

.rundown-head{padding:44px 0 0}
.rundown-head h1{font-size:clamp(28px,4vw,40px)}
.rundown-head p{color:var(--mute);margin-top:10px;max-width:60ch}

/* ---------- article ---------- */
.article{padding:46px 0 30px}
.articlehead{max-width:74ch;margin:0 auto}
.articlehead .eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--rust)}
.articlehead h1{font-size:clamp(30px,4.6vw,46px);margin-top:10px}
.articlehead .meta{margin-top:14px;font-size:13.5px;color:var(--mute)}
.articlefig{max-width:900px;margin:30px auto;border-radius:4px;overflow:hidden}
.articlefig img{width:100%;aspect-ratio:16/9;object-fit:cover}
.articlefig figcaption{font-size:12.5px;color:var(--mute);padding:8px 2px 0}
.prose{max-width:68ch;margin:0 auto}
.prose .standfirst{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:21px;line-height:1.5;color:var(--navy-mid);margin-bottom:8px}
.prose h2{font-size:25px;margin:38px 0 12px}
.prose p{margin:0 0 17px}
.prose p a{color:var(--rust);text-decoration-color:rgba(182,85,58,.4)}
.prose p a:hover{text-decoration-color:var(--rust)}
.pull{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:22px;
  line-height:1.45;color:var(--ink);margin:30px 0;padding-left:22px;border-left:3px solid var(--rust)}
.midfig{margin:26px 0;border-radius:4px;overflow:hidden}
.midfig img{width:100%;aspect-ratio:3/2;object-fit:cover}
.midfig figcaption{font-size:12.5px;color:var(--mute);padding:8px 2px 0}

.morecat{border-top:1px solid var(--line);margin-top:52px;padding-top:8px}
.morecat-head{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);padding:26px 0 0}

/* generic page (about/contact/privacy) */
.page{padding:46px 0 60px}
.page .prose h1{font-size:clamp(28px,4.2vw,40px);margin-bottom:22px}

/* ---------- footer: one prose sign-off, no labelled row, no copyright line ---------- */
.signoff{background:var(--navy-d);color:#c9cbdb;margin-top:20px;padding:44px 0 36px}
.signoff p{max-width:66ch;margin:0 auto;font-size:15px;line-height:1.7}
.signoff a{color:#f0c6b8}
.signoff a:hover{color:#fff}
/* traditional structured footer: logo centered above a centered link row -
   deliberately distinct position from Paddock Diary's left-of-prose treatment */
.foot-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.foot-logo{height:34px;width:auto;filter:brightness(0) invert(1)} /* dark navy mark -> white, footer bg is near-black */
.foot-tag{margin:0;font-size:13px;color:#8d91a8;font-style:italic;max-width:48ch}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:14px;margin-top:4px}
.foot-links a{color:#e8dfda;text-decoration:none;font-weight:500}
.foot-links a:hover{color:#fff}
.foot-fine{margin:10px 0 0;font-size:13px;color:#8d91a8}

@media(max-width:640px){
  body{font-size:16.5px}
  .brand-wordmark{height:42px}
}