/* Harty & Howe — 9 April 2027
   Palette and type are taken from the save the date.
   Colours: slate #5c5f64 / #6b6e73, paper #fdfdfc, mist #f3f5f8, gilt #b99b5e */

:root{
  --ink:#3c3e42; --slate:#4b4e53; --soft:#54575c; --mute:#6e7176; --faint:#7f8287;
  --paper:#fdfdfc; --mist:#f3f5f8; --gilt:#b99b5e; --gilt-soft:#c9b587;
  --rule:rgba(110,122,142,.38); --blue:#5f6c82;
  --serif:'Cormorant Garamond',Georgia,serif;
  --script:'Pinyon Script',cursive;
  --pad:clamp(20px,5vw,46px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--soft);font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.7;text-wrap:pretty}
img{max-width:100%;display:block}
a{color:#4f5c72}
a:hover{color:#3c3e42}
.wrap{max-width:900px;margin:0 auto;padding:0 var(--pad)}
.wide{max-width:1120px;margin:0 auto;padding:0 var(--pad)}

/* ---- nav ---- */
.nav{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:20}
.nav-in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);padding:12px var(--pad)}
.nav-crest{flex:none;line-height:0}
.nav-links{margin-left:auto}
.nav a{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#5f6266;text-decoration:none;white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}
.nav a[aria-current=page]{border-bottom:1px solid var(--gilt);padding-bottom:4px}
.nav-links{display:flex;gap:clamp(14px,2.4vw,28px);align-items:center}
.mono{height:56px;width:auto}
.btn-rsvp{border:1px solid var(--gilt);color:var(--ink)!important;padding:9px 18px;letter-spacing:.24em}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);color:var(--ink);font-family:var(--serif);font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:9px 14px;cursor:pointer}

@media (max-width:860px){
  .nav-in{flex-wrap:wrap;justify-content:space-between}
  .mono{height:46px;order:-1}
  .nav-toggle{display:block}
  .nav-links{order:3;flex-basis:100%;display:none;flex-direction:column;align-items:flex-start;gap:0;padding-bottom:8px}
  .nav-links.open{display:flex}
  .nav-links a{display:block;width:100%;padding:14px 0;border-bottom:1px solid var(--rule)}
  .nav a[aria-current=page]{border-bottom:1px solid var(--rule)}
  .btn-rsvp{border:none;padding:14px 0;letter-spacing:.22em}
}

/* ---- ornament ---- */
.orn{position:relative;overflow:hidden}
.orn>img{position:absolute;pointer-events:none;mix-blend-mode:multiply;user-select:none}
.orn .c-tl{top:-3%;left:-6%;width:min(400px,42vw)}
.orn .c-tr{top:-3%;right:-6%;width:min(400px,42vw)}
.orn .c-bl{bottom:-3%;left:-6%;width:min(380px,40vw)}
.orn .c-br{bottom:-3%;right:-6%;width:min(380px,40vw)}
.orn .full{top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}
.orn>*:not(img){position:relative}

/* ---- type ---- */
h1,h2,h3{font-weight:400;color:var(--slate);margin:0}
.script{font-family:var(--script);font-weight:400;color:var(--slate);line-height:1.15}
.page-title{font-family:var(--script);font-size:clamp(34px,7vw,52px);text-align:center}
h2.sec{font-family:var(--script);font-size:clamp(28px,4.4vw,40px);text-align:center;margin:0 0 8px}
h3{font-family:var(--script);font-size:clamp(22px,3.4vw,28px)}
.eyebrow{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:#4f5c72}
.kicker{font-size:clamp(11px,2.4vw,12.5px);letter-spacing:.26em;text-transform:uppercase;color:#5f6266}
.lead{font-size:clamp(18px,2.4vw,21px);font-style:italic;color:#4b4e53}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* ---- rules & marks ---- */
.diamond{display:flex;align-items:center;gap:14px;width:min(240px,60%);margin:0 auto}
.diamond span{flex:1;height:1px;background:var(--gilt-soft)}
.diamond i{width:5px;height:5px;background:var(--gilt);transform:rotate(45deg)}
.sec-rule{display:flex;align-items:center;gap:18px;margin:32px 0 4px}
.sec-rule span{flex:1;height:1px;background:var(--gilt-soft)}
.sec-rule b{font-weight:500;font-size:clamp(10.5px,2.2vw,12.5px);letter-spacing:.24em;text-transform:uppercase;color:#4b4e53;white-space:nowrap}
.kite{width:clamp(46px,8vw,64px);height:auto;margin:0 auto;opacity:.85}

/* ---- hero ---- */
.hero-in{display:flex;align-items:center;justify-content:center;gap:clamp(28px,4vw,60px);max-width:960px;margin:0 auto;padding:clamp(54px,10vw,104px) clamp(34px,7vw,120px)}
.hero-text{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.hero-text .kicker{white-space:nowrap;font-size:clamp(10px,2.7vw,12.5px);letter-spacing:.24em}
.names{font-family:var(--script);font-size:clamp(42px,6.4vw,68px);line-height:.95;color:var(--slate);text-wrap:nowrap}
.hero-date{font-size:clamp(14px,1.7vw,17px);letter-spacing:.22em;text-transform:uppercase;color:#3f4247;text-wrap:nowrap}
.hero-photo{flex:0 1 268px;min-width:0;max-width:268px}
@media (max-width:1120px){
  .hero-in{flex-direction:column;padding:clamp(52px,12vw,76px) clamp(40px,13vw,88px)}
  .hero-photo{flex:none;width:min(250px,58vw);max-width:none}
  .names{font-size:clamp(42px,8.4vw,62px)}
  .orn .c-tl,.orn .c-tr{width:min(300px,34vw)}
  .orn .c-bl,.orn .c-br{width:min(280px,32vw)}
}
@media (max-width:620px){
  .orn .c-tl,.orn .c-tr{width:min(230px,44vw)}
  .orn .c-bl,.orn .c-br{width:min(210px,40vw)}
  .hero-in{padding:44px 26px 48px}
  .hero-photo{width:min(220px,62vw)}
}
/* the full card frame only holds its proportions on wide screens;
   narrower than that we swap to feathered corner sprays */
.orn .full{display:block}
.orn .alt{display:none}
@media (max-width:1120px){
  .orn .full{display:none}
  .orn .alt{display:block}
}

/* ---- countdown ---- */
.count{background:var(--mist);border-top:1px solid var(--gilt-soft);border-bottom:1px solid var(--gilt-soft);padding:26px var(--pad);display:flex;align-items:center;justify-content:center;gap:clamp(20px,5vw,64px);flex-wrap:wrap}
.count ol{list-style:none;display:flex;gap:clamp(18px,5vw,48px);margin:0;padding:0;text-align:center}
.count .n{font-size:clamp(30px,6vw,44px);color:var(--ink);line-height:1}
.count .l{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#5c6066;margin-top:4px}

/* ---- cards ---- */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1080px){.g5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:880px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g2{grid-template-columns:1fr}}
@media (max-width:760px){.g5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.g4,.g5{grid-template-columns:1fr}}
.card{border:1px solid var(--rule);background:#fff;padding:clamp(20px,3vw,30px) clamp(18px,2.4vw,24px);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:11px;align-items:center;text-align:center}
.card:hover{border-color:var(--gilt)}
.card .script{font-size:clamp(22px,3vw,26px)}
.card .hair{width:26px;height:1px;background:var(--gilt-soft)}
.card p{font-size:16.5px;line-height:1.55;color:#54575c}
.card .go{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#4f5c72}
.card.plain{text-align:left;align-items:stretch}

/* ---- schedule ---- */
.event{display:flex;gap:clamp(16px,3vw,30px);padding:26px 0;border-bottom:1px solid rgba(126,139,160,.22)}
.event:last-child{border-bottom:none}
.event .when{flex:none;width:clamp(96px,14vw,140px);text-align:right}
.event .time{font-size:clamp(20px,3.4vw,26px);color:var(--ink)}
.event .sub{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#5f6266}
.event h3{margin-bottom:6px}
.addr{font-size:clamp(10.5px,2.2vw,11.5px);letter-spacing:.1em;text-transform:uppercase;color:#4f5c72;margin-top:10px}
@media (max-width:600px){
  .event{flex-direction:column;gap:6px}
  .event .when{width:auto;text-align:left}
}
.note{border-left:3px solid var(--gilt);background:#eef1f5;padding:15px 18px;margin:14px 0;font-size:17.5px;line-height:1.65;color:#3f4247}

/* ---- Q&A ---- */
.qa{border-bottom:1px solid rgba(126,139,160,.22);padding:22px 0}
.qa:last-child{border-bottom:none}
.qa h3{margin-bottom:8px}
.tbc{border:1px dashed #9aa3b3;background:#eef1f5;padding:14px 18px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.08em;color:#6a6d72}

/* ---- forms ---- */
form{display:flex;flex-direction:column;gap:24px}
label{display:block}
.lab{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:#54575c;margin-bottom:8px}
input[type=text],input[type=email],input[type=tel],textarea,select{width:100%;font-family:var(--serif);font-weight:400;font-size:18px;color:var(--ink);background:#fff;border:none;border-bottom:1px solid #a9acb1;padding:10px 2px;border-radius:0}
textarea{border:1px solid #a9acb1;padding:10px 12px;min-height:88px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gilt)}
.choice{display:flex;gap:14px}
.choice label{flex:1;border:1px solid #a9acb1;padding:14px 10px;text-align:center;font-size:clamp(15px,2.6vw,18px);color:#54575c;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice input:checked+span{color:var(--ink)}
.choice label:has(input:checked){border-color:var(--gilt);background:#f9f8f4;color:var(--ink)}
.check{display:flex;gap:14px;align-items:flex-start;border-top:1px solid rgba(126,139,160,.22);border-bottom:1px solid rgba(126,139,160,.22);padding:18px 0;font-size:19px;line-height:1.5;color:var(--slate);cursor:pointer}
.check input{flex:none;width:17px;height:17px;margin-top:5px;accent-color:var(--slate)}
button[type=submit]{align-self:flex-start;background:#585b60;color:var(--paper);border:none;padding:15px 44px;font-family:var(--serif);font-size:11px;letter-spacing:.28em;text-transform:uppercase;cursor:pointer}
button[type=submit]:hover{background:var(--ink)}
.form-card{display:flex;gap:clamp(24px,4vw,44px);background:#fff;border:1px solid var(--rule);padding:clamp(22px,4vw,38px)}
.form-aside{flex:none;width:270px;display:flex;flex-direction:column;gap:16px}
.form-body{flex:1}
@media (max-width:820px){.form-card{flex-direction:column}.form-aside{width:auto}}

/* ---- photos ---- */
img.pic{width:100%;height:auto;object-fit:cover;border:1px solid var(--rule);background:#f5f3ef}
img.pic.arch{aspect-ratio:3/4;border:none;border-radius:50% 50% 0 0/19% 19% 0 0}
img.pic.banner{aspect-ratio:16/5}
img.pic.wide{aspect-ratio:16/7}
img.pic.three2{aspect-ratio:3/2}
img.pic.two3{aspect-ratio:2/3}
img.pic.sq{aspect-ratio:1}
img.pic.round{aspect-ratio:1;border-radius:50%;flex:none;width:160px;border:1px solid var(--rule)}
@media (max-width:620px){img.pic.round{width:132px}}

.ph{background:repeating-linear-gradient(45deg,#eceae5 0 7px,#f5f3ef 7px 14px);border:1px solid var(--rule);display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.08em;color:#63666b;text-align:center}
.ph.arch{border-radius:50% 50% 0 0/19% 19% 0 0;aspect-ratio:3/4;align-items:center;padding:0}
.ph.banner{aspect-ratio:16/5}
.ph.sq{aspect-ratio:1}
.ph.round{border-radius:50%;aspect-ratio:1;align-items:center;padding:0;flex:none;width:160px}

/* ---- band & footer ---- */
.band{background:var(--mist);border-top:1px solid var(--gilt-soft);border-bottom:1px solid var(--gilt-soft);padding:clamp(34px,6vw,48px) 0}
.closer{background:#585b60;color:#f6f5f2;padding:clamp(40px,8vw,64px) var(--pad);text-align:center}
.closer .script{color:#f6f5f2;font-size:clamp(32px,6vw,46px)}
.closer p{color:#e6e4df;max-width:420px;margin:14px auto}
.closer .btn{display:inline-block;border:1px solid #d8cfae;color:#f6f5f2;text-decoration:none;padding:14px 46px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;margin-top:6px}
.closer .btn:hover{background:rgba(255,255,255,.08);color:#fff}
footer{padding:30px var(--pad);text-align:center;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#5f6266}
.stack{display:flex;flex-direction:column;gap:14px}
.center{text-align:center}
.sec-head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.pad{padding-block:clamp(40px,7vw,58px)}
.pad-sm{padding-block:clamp(26px,4vw,36px)}

/* ---- red kite scroll tracker ---- */
.kite-track{position:fixed;top:var(--navh,80px);left:0;right:0;height:44px;pointer-events:none;z-index:10;overflow:hidden}
.kite-track img{position:absolute;top:5px;left:0;width:30px;height:auto;opacity:.8;transform:translateX(0)}
@media (max-width:620px){.kite-track{height:34px}.kite-track img{width:24px;top:4px}}
@media (prefers-reduced-motion:reduce){.kite-track{display:none}}

/* ---- lists ---- */
ol.steps{list-style:none;counter-reset:s;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
ol.steps li{counter-increment:s;position:relative;padding-left:52px;font-size:17.5px;line-height:1.6;color:#4b4e53}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border:1px solid var(--gilt);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#5f6c82;background:#fff}
ol.steps li b{font-weight:500;color:var(--ink)}
ul.list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
ul.list li{font-size:17px;color:#4b4e53;padding-left:16px;position:relative}
ul.list li::before{content:"·";position:absolute;left:2px;color:var(--gilt);font-size:20px;line-height:1}
ul.tel{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
ul.tel li{font-size:17px;color:#4b4e53;border-bottom:1px solid var(--rule);padding-bottom:10px}
@media (max-width:620px){ol.steps li{padding-left:44px;font-size:17px}}

.card.plain a.script{color:var(--slate);text-decoration:none;border-bottom:1px solid var(--gilt-soft);align-self:flex-start}
.card.plain a.script:hover{color:var(--ink);border-bottom-color:var(--gilt)}