/* Layout: a storm-day wedding post. Misty white pages, full-bleed photographs,
   butter-yellow display serif, lowercase sans subtitles, handwritten notes with
   hand-drawn arrows, and one storm-gray band. Deliberately a single light look. */
:root{
  --paper:#fbfbfa; --paper-2:#eff1f2; --ink:#2b2e30; --muted:#6a7278;
  --line:#dde1e3; --accent:#2b2e30; --gold:#2b2e30; --film:#eff1f2; --film-ink:#6a7278;
  --sun:#f6d45c; --storm:#5b676e; --storm-ink:#e6eaec; --night:#1f2224;
  --ok:#2f7a45;
  --display:"Gloock", "Bodoni 72", Didot, Georgia, serif;
  --body:"Outfit", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --mono:"Outfit", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --hand:"Patrick Hand", "Comic Neue", "Marker Felt", cursive;
  --s1:.8125rem; --s2:1.02rem; --s3:1.2rem; --s4:1.75rem; --s5:clamp(2.3rem,5.2vw,3.8rem); --s6:clamp(3.2rem,9.5vw,7.4rem);
  --gutter:clamp(16px,4vw,48px);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--s2);line-height:1.6;padding-inline:clamp(16px,4vw,48px)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1180px;margin-inline:auto}
.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-inline:calc(-1*clamp(16px,4vw,48px));padding:.8rem clamp(16px,4vw,48px)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.mark{font-family:var(--display);font-size:1.7rem;text-decoration:none;line-height:1}
.mark i{color:var(--accent)}
.mark small{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-left:.15rem}
nav.main{display:flex;gap:clamp(.8rem,2.4vw,1.8rem);align-items:center;flex-wrap:wrap}
nav.main a{text-decoration:none;font-size:.92rem;color:var(--muted)}
nav.main a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:.5rem;font:500 .92rem var(--body);padding:.7rem 1.15rem;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--paper-2)}
nav.main .btn{color:var(--paper);padding:.5rem 1rem}

section{padding-block:clamp(3.5rem,8vw,6.5rem);border-bottom:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:2rem;align-items:end;margin-bottom:2.5rem}
.sec-head h2{font-size:var(--s5)}
.sec-head p{color:var(--muted);max-width:52ch}
@media (max-width:760px){.sec-head{grid-template-columns:1fr;gap:1rem}}

/* film frames */
.frame{position:relative;overflow:hidden;background:var(--film);border-radius:2px}
.frame .img{position:absolute;inset:0;background:var(--g);transition:transform .8s ease}
.frame .img::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay;opacity:.55}
.frame > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.frame:hover .img,.gallery .frame:hover > img{transform:scale(1.03)}
.lightbox .frame > img{object-fit:contain}
.reader .body figure.inline{margin:.8rem 0;display:grid;gap:.6rem}
.reader .body figure.inline img{width:100%;height:auto;display:block;border-radius:2px}
.reader .body figure.inline.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:460px){.reader .body figure.inline.two{grid-template-columns:1fr}}
.edge{display:flex;justify-content:space-between;gap:.6rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--muted);padding-top:.45rem;font-variant-numeric:tabular-nums}
.edge b{color:var(--gold);font-weight:500}

/* hero */
.hero{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{font-size:var(--s6);letter-spacing:-.01em}
.hero h1 em{color:var(--accent)}
.hero .lede{font-size:var(--s3);color:var(--muted);max-width:44ch;margin-top:1.4rem}
.hero .ctas{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.hero .facts{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.hero .facts div{display:grid;gap:.1rem}
.hero .facts strong{font-family:var(--display);font-size:1.9rem;font-weight:400;font-variant-numeric:tabular-nums}
.strip{background:var(--film);padding:1.3rem .9rem;border-radius:3px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;position:relative}
.strip::before,.strip::after{content:"";position:absolute;left:.35rem;right:.35rem;height:.42rem;background:repeating-linear-gradient(90deg,var(--paper) 0 .5rem,transparent .5rem 1.2rem);opacity:.85;border-radius:1px}
.strip::before{top:.35rem}.strip::after{bottom:.35rem}
.strip .cell{display:grid;gap:.3rem}
.strip .frame{aspect-ratio:4/5}
.strip .cell:nth-child(2) .frame,.strip .cell:nth-child(3) .frame{aspect-ratio:4/5}
.strip .code{font-family:var(--mono);font-size:.62rem;color:var(--film-ink);letter-spacing:.1em;display:flex;justify-content:space-between}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}

/* portfolio */
.filters{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.8rem}
.chip{font:500 .85rem var(--body);padding:.45rem .95rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.gallery{columns:3 260px;column-gap:1rem}
.gallery figure{margin:0 0 1rem;break-inside:avoid;cursor:zoom-in}
.gallery figure .frame{aspect-ratio:var(--ar)}
.gallery figcaption{font-size:.9rem;margin-top:.15rem}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(10,11,9,.92);display:grid;grid-template-rows:1fr auto;padding:calc(env(safe-area-inset-top,0px) + 1rem) 1rem calc(env(safe-area-inset-bottom,0px) + 1rem)}
.lightbox .stage{display:grid;place-items:center;min-height:0}
.lightbox .frame{width:min(92vw,calc(78vh * var(--arn)));aspect-ratio:var(--ar);max-height:78vh}
.lightbox .bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:#e8e6df;font-family:var(--mono);font-size:.78rem;max-width:1000px;margin-inline:auto;width:100%;padding-top:.8rem;flex-wrap:wrap}
.lightbox button{background:transparent;border:1px solid rgba(255,255,255,.35);color:#f2f0e9;border-radius:999px;padding:.45rem .9rem;font:500 .8rem var(--body);cursor:pointer}

/* approach */
.timeline{margin-top:3rem;border:1px solid var(--line);border-radius:4px;overflow-x:auto}
.timeline table{width:100%;border-collapse:collapse;min-width:560px;font-variant-numeric:tabular-nums}
.timeline th,.timeline td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:top}
.timeline tr:last-child td{border-bottom:0}
.timeline th{font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--paper-2)}
.timeline td:first-child{font-family:var(--mono);white-space:nowrap}
.timeline .gh{color:var(--gold)}

/* how the day goes: a shot list that checks itself off as you scroll */
.checklist{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.ck-side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 6rem);display:grid;gap:.9rem;min-width:0}
.ck-side h3{font-size:var(--s4)}
.ck-count{font-family:var(--hand);font-size:1.35rem;color:#fff;font-variant-numeric:tabular-nums}
.ck-bar{height:3px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden;max-width:18rem}
.ck-bar span{display:block;height:100%;width:0;background:var(--sun);transition:width .5s ease}
.ck-note{color:rgba(230,234,236,.82);font-size:.95rem;max-width:42ch;margin-top:.6rem}
.ck-list{list-style:none;margin:0;padding:0;display:grid;min-width:0}
.ck-item{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1.1rem;padding-block:1.5rem;border-top:1px solid rgba(255,255,255,.18)}
.ck-item:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.ck-item h4{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.8vw,2.1rem);line-height:1;letter-spacing:-.03em;color:#fff;margin:.35rem 0 .5rem}
.ck-item p{color:rgba(230,234,236,.82);font-size:.97rem;max-width:52ch}
.tick{width:2.6rem;height:2.6rem;overflow:visible}
.tick .box{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tick .check{fill:none;stroke:var(--sun);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
/* with JS on, boxes start empty and check as each item scrolls past the middle of the screen */
.ck-live .tick .check{stroke-dashoffset:1;transition:stroke-dashoffset .55s cubic-bezier(.6,0,.3,1)}
.ck-live .ck-item h4,.ck-live .ck-item p{transition:opacity .4s ease}
.ck-live .ck-item:not(.is-done) h4{opacity:.6}
.ck-live .ck-item:not(.is-done) p{opacity:.55}
.ck-live .ck-item.is-done .tick .check{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.ck-live .tick .check,.ck-bar span{transition:none}}
@media (max-width:860px){.checklist{grid-template-columns:1fr;gap:1.5rem}.ck-side{position:static}}

/* journal */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.post-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.2rem;text-decoration:none;align-items:start}
.post-card .frame{aspect-ratio:4/5}
.post-card h3{font-size:1.65rem;margin:.4rem 0 .5rem}
.post-card p{color:var(--muted);font-size:.95rem}
.post-card .more{display:inline-block;margin-top:.8rem;font-size:.88rem;color:var(--accent);font-weight:500}
.posts .post-card:first-child{grid-column:1/-1;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center}
.posts .post-card:first-child .frame{aspect-ratio:3/2}
.posts .post-card:first-child h3{font-size:clamp(2.2rem,4vw,3.2rem)}
@media (max-width:860px){.posts .post-card:first-child{grid-template-columns:1fr}}
.post-card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (max-width:860px){.posts{grid-template-columns:1fr}}
@media (max-width:460px){.post-card{grid-template-columns:1fr}.post-card .frame{aspect-ratio:4/5}}

/* reader */
.reader{padding-block:2.5rem 5rem}
.reader .back{font-size:.9rem;color:var(--muted);text-decoration:none}
.reader header{max-width:760px;margin:2rem auto 2rem;display:grid;gap:1rem}
.reader h1{font-size:var(--s5)}
.reader .cover{max-width:1000px;margin:0 auto 2.5rem}
.reader .cover .frame{aspect-ratio:16/9}
.reader .body{max-width:65ch;margin-inline:auto;font-size:1.08rem;display:grid;gap:1.15rem}
.reader .body h2{font-size:1.9rem;margin-top:1rem}
.reader .body ul{margin:0;padding-left:1.2rem;display:grid;gap:.4rem}
.reader .body .note{border-left:2px solid var(--gold);padding:.2rem 0 .2rem 1rem;color:var(--muted)}
.reader .next{max-width:65ch;margin:3rem auto 0;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* packages */
.packages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
@media (max-width:1100px){.packages{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pkg{border:1px solid var(--line);border-radius:4px;padding:1.6rem;display:grid;gap:1rem;align-content:start}
.pkg.featured{border-color:var(--ink);background:var(--paper-2)}
.pkg h3{font-size:2rem}
.pkg .price{font-family:var(--display);font-size:2.4rem;font-variant-numeric:tabular-nums}
.pkg .price small{font-family:var(--body);font-size:.85rem;color:var(--muted)}
.pkg ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;font-size:.94rem}
.pkg li{padding-left:1.1rem;position:relative}
.pkg li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:1px;background:var(--accent)}
.pkg .hours{font-family:var(--mono);font-size:.75rem;color:var(--muted);letter-spacing:.06em}
@media (max-width:620px){.packages{grid-template-columns:1fr}}
.addons{margin-top:2.4rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:2rem;align-items:start;border-top:1px solid var(--line);padding-top:2rem}
.addons h3{font-size:1.9rem}
.addons dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.5rem}
.addons dt,.addons dd{padding:.6rem 0;border-bottom:1px solid var(--line);margin:0;font-size:.95rem}
.addons dd{font-variant-numeric:tabular-nums;text-align:right;font-family:var(--mono);font-size:.88rem}
.addons .off{margin-top:1rem;color:var(--muted);font-size:.92rem}
@media (max-width:760px){.addons{grid-template-columns:1fr;gap:1rem}}
.fine{margin-top:1.4rem;color:var(--muted);font-size:.9rem;max-width:70ch}

/* about */
.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.about .frame{aspect-ratio:4/5}
.about .copy{display:grid;gap:1.1rem;max-width:60ch}
.about h2{font-size:var(--s5)}
.about p{color:var(--muted)}
.about .kit{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.about .kit span{font-family:var(--mono);font-size:.72rem;border:1px solid var(--line);padding:.3rem .6rem;border-radius:3px;color:var(--muted)}
@media (max-width:760px){.about{grid-template-columns:1fr}}

/* booking */
.book-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:860px){.book-grid{grid-template-columns:1fr}}
.steps{display:grid;gap:1.2rem;margin-top:1.8rem}
.steps div{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.8rem}
.steps b{font-family:var(--mono);font-weight:500;color:var(--gold);font-size:.85rem;padding-top:.15rem}
.steps p{color:var(--muted);font-size:.95rem}
.steps strong{color:var(--ink);font-weight:600;display:block}
form.inquiry{border:1px solid var(--line);border-radius:4px;padding:clamp(1.2rem,3vw,2rem);display:grid;gap:1.1rem;background:var(--paper-2)}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:560px){.row{grid-template-columns:1fr}}
.field{display:grid;gap:.35rem;min-width:0}
.field label{font-size:.85rem;font-weight:500}
.field .hint{font-size:.8rem;color:var(--muted)}
input,select,textarea{font:inherit;font-size:.98rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:.65rem .75rem;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
textarea{min-height:7rem;resize:vertical}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#b24a3c}
.err{color:#b24a3c;font-size:.8rem}
.avail{font-size:.85rem;font-family:var(--mono);letter-spacing:.02em}
.avail.open{color:var(--ok)} .avail.tight{color:var(--gold)}
.pkg-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
@media (max-width:560px){.pkg-pick{grid-template-columns:1fr}}
.pkg-pick label{border:1px solid var(--line);border-radius:3px;padding:.6rem .7rem;background:var(--paper);cursor:pointer;display:grid;gap:.1rem;font-size:.9rem}
.pkg-pick input{position:absolute;opacity:0;pointer-events:none}
.pkg-pick label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pkg-pick label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.pkg-pick small{color:var(--muted);font-family:var(--mono);font-size:.72rem}
.done{display:grid;gap:1rem}
.done h3{font-size:2rem}
.done pre{white-space:pre-wrap;font-family:var(--mono);font-size:.8rem;background:var(--paper);border:1px solid var(--line);padding:1rem;border-radius:3px;margin:0;max-height:18rem;overflow:auto}
.done .actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.addr{font-family:var(--mono);user-select:all;overflow-wrap:anywhere;background:var(--paper);border:1px solid var(--line);padding:.35rem .6rem;border-radius:3px}

footer{padding-block:2.5rem 3rem;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;color:var(--muted);font-size:.88rem}
footer .mark{font-size:1.4rem;color:var(--ink)}

/* ---- storm-day post overrides ---- */
body{font-weight:300;letter-spacing:.005em}
strong,b,dt,.btn,label{font-weight:500}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.035em;line-height:.92}
.label{font-family:var(--hand);font-size:1.12rem;letter-spacing:0;text-transform:none;color:var(--muted)}
.edge{font-family:var(--body);letter-spacing:.04em}
.edge b{font-weight:400;color:var(--muted)}
.mark{font-family:var(--display);font-size:1.75rem;letter-spacing:-.03em}
.mark i{font-style:normal;color:var(--ink)}
.mark small{font-family:var(--hand);font-size:1.05rem;color:var(--muted);letter-spacing:0}
nav.main a{font-weight:400}
.btn{border-radius:999px;font-weight:500;padding:.75rem 1.3rem;letter-spacing:.01em}
.btn:hover{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.btn.ghost{border-color:var(--ink)}
.btn.ghost:hover{background:var(--sun);border-color:var(--sun)}
nav.main .btn:hover{color:var(--ink)}
.chip{border-radius:999px;font-weight:400}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.frame{border-radius:0;background:var(--paper-2)}
section{border-bottom:0;border-top:0}
.sec-head{align-items:end}
.sec-head h2{position:relative;padding-bottom:1rem}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:min(14rem,70%);height:1.5px;background:var(--ink);transform:rotate(-.6deg);transform-origin:left}
.hand{font-family:var(--hand);font-weight:400;letter-spacing:0}
.arrow{display:inline-block;width:4.5rem;height:1.2rem;vertical-align:middle;margin-left:.6rem}

/* hero: a full-bleed photograph with the type set in the sky */
html,body{overflow-x:clip}
.hero{position:relative;padding:0;margin-inline:calc(50% - 50vw);margin-bottom:clamp(2.5rem,6vw,4rem)}
.hero-photo{position:relative;aspect-ratio:16/9;max-height:92vh;width:100%;overflow:hidden;background:var(--paper-2)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%}
.hero-copy{position:absolute;top:clamp(1.5rem,6vw,5.5rem);left:max(var(--gutter),calc(50vw - 590px));width:min(38rem,56%);display:grid;gap:clamp(.6rem,1.4vw,1rem)}
.hero-copy .date{font-size:clamp(1.3rem,2.4vw,2rem);color:var(--ink)}
.hero h1{font-size:var(--s6);color:var(--sun);letter-spacing:-.045em;line-height:.86;text-shadow:var(--sun-shadow)}
.hero h1 em{font-style:normal;color:var(--sun)}
.hero .rule{height:1.5px;background:var(--ink);width:88%;transform:rotate(-.5deg);border:0;margin:.4rem 0 0}
.hero .sub{font-size:clamp(1.05rem,2vw,1.6rem);font-weight:300;color:var(--ink);line-height:1.2;max-width:24ch;padding-left:clamp(.5rem,3vw,2.5rem)}
.hero .swipe{position:absolute;right:var(--gutter);bottom:clamp(1rem,4vw,3rem);color:#fff;font-size:clamp(1.3rem,2.6vw,2.2rem);text-decoration:none;display:flex;align-items:center;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.hero .swipe .arrow{width:clamp(4rem,10vw,9rem)}
.intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:end;padding-bottom:clamp(2rem,5vw,3.5rem)}
.intro .lede{font-size:var(--s3);color:var(--ink);max-width:48ch;margin:0}
.intro .ctas{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.intro .facts{display:flex;gap:2rem;flex-wrap:wrap;justify-content:flex-start}
.intro .facts div{display:grid;gap:0}
.intro .facts strong{font-family:var(--display);font-weight:400;font-size:2.4rem;line-height:1;letter-spacing:-.03em}
@media (max-width:760px){
  .hero-photo{aspect-ratio:4/5}
  .hero-photo img{object-position:74% 50%}
  .hero-copy{width:calc(100% - 2*var(--gutter))}
  .intro{grid-template-columns:1fr}
}

/* the storm band */
.band{background:var(--storm);color:var(--storm-ink);box-shadow:0 0 0 100vmax var(--storm);clip-path:inset(0 -100vmax)}
.band h2,.band h3{color:var(--sun)}
.band .sec-head h2::after{background:var(--sun)}
.band .sec-head p{color:rgba(230,234,236,.82)}
.band .label{color:#fff}

/* packages */
.pkg{border-radius:0;border-color:var(--line);background:var(--paper)}
.pkg h3{font-size:2.3rem}
.pkg .price{font-family:var(--display);font-size:2.6rem;letter-spacing:-.03em}
.pkg .hours{font-family:var(--hand);font-size:1.05rem;letter-spacing:0}
.pkg li::before{background:var(--ink)}
.pkg.featured{background:var(--storm);border-color:var(--storm);color:#fff}
.pkg.featured h3,.pkg.featured .price{color:var(--sun)}
.pkg.featured .label,.pkg.featured .hours,.pkg.featured .price small{color:var(--storm-ink)}
.pkg.featured li::before{background:var(--sun)}
.pkg.featured .btn{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.pkg.featured .btn:hover{background:#fff;border-color:#fff}
.addons dd{font-family:var(--body)}

/* journal + reader */
.post-card h3{font-size:2rem}
.post-card .more{font-family:var(--hand);font-size:1.15rem;color:var(--ink)}
.reader h1{color:var(--ink)}
.reader .loc{display:flex;align-items:center;gap:.6rem;font-family:var(--hand);font-size:1.35rem;line-height:1.15}
.reader .loc svg{width:1.6rem;height:2rem;flex:none}
.reader .loc span b{font-weight:400;color:#b8911a}
.reader .body .note{border-left-color:var(--sun);border-left-width:3px}
.reader .body h2{font-size:2.2rem}

/* booking */
form.inquiry{border-radius:0;background:var(--paper-2);border-color:var(--line)}
input,select,textarea{border-radius:0;font-weight:300}
.pkg-pick label{border-radius:0}
.pkg-pick small{font-family:var(--body)}
.steps b{font-family:var(--hand);font-size:1.3rem;color:var(--ink)}
.about .kit span{border-radius:999px;font-family:var(--body)}
.about h2{font-size:var(--s5)}
.addr,.done pre{border-radius:0;font-family:var(--body)}
.avail{font-family:var(--body)}

/* footer */
footer{margin-top:clamp(3rem,7vw,5rem);background:var(--night);color:rgba(255,255,255,.7);box-shadow:0 0 0 100vmax var(--night);clip-path:inset(0 -100vmax);padding-block:3rem 3.5rem}
footer .mark{color:var(--sun);font-size:2.4rem}
footer .mark i{color:var(--sun)}
footer .mark small{color:rgba(255,255,255,.7)}
footer .label{color:rgba(255,255,255,.75)}
footer .addr{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
footer a.mail-link{user-select:text;text-decoration:none;transition:background .2s ease,color .2s ease,border-color .2s ease}
footer a.mail-link:hover,footer a.mail-link:focus-visible{background:var(--sun);border-color:var(--sun);color:var(--ink)}

/* kind words */
.quotes{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:end}
.quote{margin:0;display:grid;gap:1rem;padding-top:1.2rem;border-top:1.5px solid var(--ink)}
.quote blockquote{margin:0;font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.quote.big blockquote{font-size:clamp(2rem,4.4vw,3.4rem);color:var(--ink)}
.quote.big blockquote::before{content:"\201C";display:block;color:var(--sun);font-size:1.6em;line-height:.6;margin-bottom:.1em}
.quote figcaption{font-size:.9rem;color:var(--muted)}
.quote figcaption .hand{font-size:1.2rem;color:var(--ink)}
.g-link{display:inline-block;margin-top:.4rem;color:var(--ink);font-weight:500;text-underline-offset:3px}
.review-cta{margin-top:2rem;color:var(--muted);font-size:.95rem}
.review-cta a{color:var(--ink);text-underline-offset:3px}
@media (max-width:760px){.quotes{grid-template-columns:1fr}}

/* subtle drop shadow on all yellow text */
:root{--sun-shadow:0 1px 1px rgba(30,32,34,.22),0 3px 14px rgba(30,32,34,.16);--sun-shadow-dark:0 1px 2px rgba(0,0,0,.35),0 3px 12px rgba(0,0,0,.25)}
.hero h1,.hero h1 em{text-shadow:var(--sun-shadow)}
.band h2,.band h3,.pkg.featured h3,.pkg.featured .price,footer .mark,footer .mark i,footer .hand,.quote.big blockquote::before{text-shadow:var(--sun-shadow-dark)}

/* soft blur on the photo behind the hero text, feathered at the edges */
.hero-copy{isolation:isolate}
.hero-copy::before{content:"";position:absolute;z-index:-1;inset:-2.5rem -3rem -2.5rem -3.5rem;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  background:rgba(251,251,250,.05);
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 45% 50%,#000 30%,transparent 100%);
          mask-image:radial-gradient(ellipse 70% 65% at 45% 50%,#000 30%,transparent 100%);
  pointer-events:none}
@media (prefers-reduced-transparency:reduce){.hero-copy::before{background:rgba(251,251,250,.5)}}

/* scrolling effects: gentle parallax on the hero photo, and content that eases up
   into place as it scrolls into view. Pure CSS scroll timelines, so browsers
   without support (or visitors who prefer less motion) simply see the static page. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-photo img{animation:hero-drift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .hero-copy{animation:hero-lift linear both;animation-timeline:scroll(root);animation-range:0 80vh}
    @keyframes hero-drift{from{transform:translateY(0) scale(1.02)}to{transform:translateY(14%) scale(1.08)}}
    @keyframes hero-lift{to{transform:translateY(-12%);opacity:.35}}

    .sec-head,.gallery figure,.post-card,.pkg,.quote,.ck-side,.about > div,.addons,.book-grid > div,.intro > div,.reader .body figure.inline{
      animation:ease-rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    @keyframes ease-rise{from{opacity:.15;transform:translateY(32px)}to{opacity:1;transform:none}}
  }
}

header.top .mark{white-space:nowrap}
header.top .mark small{margin-left:.4rem}

/* instagram link */
.ig-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none;font-weight:500}
.ig-link span{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ig-link:hover span{text-decoration-thickness:2px}
.ig-icon{width:1.25rem;height:1.25rem;flex:none}
.ig-link.foot{color:#fff;margin-top:.35rem}

nav.main a.ig-nav{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;color:var(--ink)}
nav.main a.ig-nav:hover{background:var(--sun)}
nav.main a.ig-nav .ig-icon{width:1.3rem;height:1.3rem}

/* the package cards' hidden radio buttons stay inside their card (they used to hang off the right edge on phones) */
.pkg-pick label{position:relative}
.pkg-pick input{width:1px;height:1px;left:0;top:0}

/* ---------- phones: everything below applies only up to 760px wide; desktop is unchanged ---------- */
@media (max-width:760px){
  html{scroll-padding-top:6.5rem}
  /* compact two-row header: logo + "Check your date" on top, the menu as one swipeable row below */
  header.top{padding-block:.55rem .1rem}
  header.top .wrap{position:relative;display:block}
  header.top .mark{font-size:1.4rem;display:inline-block;padding-block:.35rem}
  header.top .mark small{font-size:.92rem;margin-left:.3rem}
  nav.main{flex-wrap:nowrap;overflow-x:auto;gap:.15rem;margin-top:.3rem;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding-inline:.6rem;font-size:.95rem}
  nav.main a:first-child{padding-left:0}
  nav.main a.ig-nav{width:44px;height:44px}
  nav.main .btn{position:absolute;top:0;right:0;min-height:40px;padding:.45rem .9rem;font-size:.85rem}

  /* hero: keep the eyebrow on one line */
  .hero-copy .date{font-size:1.05rem}

  /* intro numbers sit in one row */
  .intro .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start}
  .intro .facts div{align-content:start}
  .intro .facts .label{line-height:1.2;margin-top:.3rem}
  .intro .facts strong{font-size:1.9rem}
  .intro .ctas .btn{flex:1 1 auto;justify-content:center;min-height:48px}

  /* gallery: two columns instead of one long stack, filters as one swipeable row */
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:none;min-height:40px}
  .gallery{columns:2;column-gap:.55rem}
  .gallery figure{margin-bottom:.55rem}

  /* lightbox buttons big enough for thumbs */
  .lightbox button{min-height:44px;padding-inline:1.1rem}

  /* buttons and form: comfortable to tap, and 16px text so iPhones don't zoom in when a box is tapped */
  .pkg .btn,.reader .next .btn{width:100%;justify-content:center;min-height:48px}
  input,select,textarea{font-size:16px}
  .pkg-pick label{min-height:52px}
  form.inquiry button[type=submit]{width:100%;justify-content:center;min-height:52px}
  footer .addr{padding:.6rem .8rem}
}

/* ---------- SEO update (Oct 2026) ---------- */
/* hero: the small handwritten line now sits inside the h1 so the heading says "boston wedding photographer" */
.hero h1{display:grid;gap:clamp(.6rem,1.4vw,1rem)}
.hero h1 .date{display:block;line-height:1.6;text-shadow:none;letter-spacing:0}
.hero h1 .h1-main{display:block}

/* where I photograph */
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.5vw,2rem) clamp(1.5rem,3vw,2.5rem)}
.areas > div{border-top:1.5px solid var(--ink);padding-top:1rem;display:grid;gap:.45rem;align-content:start}
.areas h3{font-size:1.75rem;letter-spacing:-.02em;line-height:1}
.areas p{color:var(--muted);font-size:.95rem;margin:0}
.areas .far{border-top-color:var(--sun)}
@media (max-width:860px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.areas{grid-template-columns:1fr}}

/* journal pages */
.reader .crumbs{font-size:.9rem;color:var(--muted)}
.reader .crumbs a{text-decoration:none}
.reader .crumbs a:hover{text-decoration:underline}
.reader .byline{max-width:65ch;margin:3rem auto 0;padding:1.4rem 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:72px minmax(0,1fr);gap:1rem;align-items:center}
.reader .byline img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.reader .byline p{margin:0;color:var(--muted);font-size:.95rem}
.reader .byline strong{color:var(--ink);font-weight:500}
.reader .more-posts{max-width:1100px;margin:4rem auto 0}
.reader .more-posts h2{font-size:var(--s4);margin-bottom:1.5rem}
.reader .more-posts .posts .post-card:first-child{grid-column:auto;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
.reader .more-posts .posts .post-card:first-child .frame{aspect-ratio:4/5}
.reader .more-posts .posts .post-card:first-child h3{font-size:2rem}
.journal-page{padding-block:2.5rem 0}
.journal-page .sec-head h1{font-size:var(--s5);position:relative;padding-bottom:1rem}
.journal-page .sec-head h1::after{content:"";position:absolute;left:0;bottom:0;width:min(14rem,70%);height:1.5px;background:var(--ink);transform:rotate(-.6deg);transform-origin:left}
.notfound{padding-block:5rem;text-align:center;display:grid;gap:1.2rem;justify-items:center}
.notfound h1{font-size:var(--s5)}
.notfound p{color:var(--muted);max-width:46ch}