/*
Theme Name: Phoebe Sharpe
Theme URI: https://phoebesharpe.co.uk
Author: Phoebe Sharpe design project
Description: Custom theme for Phoebe Sharpe, bridal and occasion makeup artist in Manchester. Editable prices, enquiry form and contact details.
Version: 1.9.4
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: phoebe-sharpe
*/
:root{
  --ox:#34101a; --ox2:#4a1a27; --pow:#ecd9d4; --por:#faf6f4; --ink:#1c0f12; --lip:#b3263f; --mute:#6a5659; --rose:#e9cdc8;
  --serif:'Bodoni Moda','Bodoni 72',Didot,'Playfair Display','Liberation Serif',Georgia,serif;
  --sans:'Hanken Grotesk','Helvetica Neue',Arial,'Liberation Sans',sans-serif;
  --pad:clamp(20px,5vw,72px);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);background:var(--por);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--lip);outline-offset:3px}
.dark :focus-visible,header.on-dark:not(.solid) :focus-visible{outline-color:#fff}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.015em}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}

/* header */
header{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:calc(20px + env(safe-area-inset-top,0px)) var(--pad) 20px;transition:background .3s,color .3s,box-shadow .3s}
header.on-dark{color:var(--por)}
header.solid{background:rgba(250,246,244,.94);backdrop-filter:blur(10px);color:var(--ink);box-shadow:0 1px 0 rgba(28,15,18,.1)}
.mark{text-decoration:none;display:flex;flex-direction:column;line-height:1}
.mark b{font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:-.02em}
.mark span{font-size:12px;letter-spacing:.14em;margin-top:5px;opacity:.8}
nav ul{display:flex;gap:34px;list-style:none}
nav a{text-decoration:none;font-size:15.5px;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s}
nav a:hover,nav a[aria-current="page"]{background-size:100% 1.5px}
.burger{display:none;background:none;border:0;color:inherit;font:inherit;font-size:15px;padding:10px 0;cursor:pointer}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 30px;border-radius:999px;border:1.5px solid currentColor;font:500 16px var(--sans);text-decoration:none;cursor:pointer;background:none;color:inherit;transition:background .25s,color .25s,border-color .25s}
.btn.fill{background:var(--lip);border-color:var(--lip);color:#fff}
.btn.fill:hover{background:#8f1c31;border-color:#8f1c31}
.btn.light{background:var(--por);border-color:var(--por);color:var(--ox)}
.btn.light:hover{background:var(--pow);border-color:var(--pow)}
.btn.line:hover{background:currentColor}
.btn.line:hover span{color:var(--por);mix-blend-mode:normal}
.lnk{font-weight:500;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.lnk:hover{border-color:var(--lip);color:var(--lip)}
.dark .lnk:hover{color:var(--rose);border-color:var(--rose)}

/* shared sections */
section{position:relative}
.dark{background:var(--ox);color:var(--por)}
.pow{background:var(--pow)}
.arch{border-radius:999px 999px 0 0;overflow:hidden}
.arch img,.pill img,.fill-img{width:100%;height:100%;object-fit:cover}
.pill{border-radius:999px;overflow:hidden}
.sec{padding:clamp(72px,11vw,150px) var(--pad)}
.lead{font-size:clamp(18px,1.6vw,21px);max-width:46ch}
.h2{font-size:clamp(2.5rem,5.4vw,5.2rem)}
.stmt{font-size:clamp(2.8rem,7vw,7rem);text-align:center;max-width:12ch;margin:0 auto}
.stmt+p{max-width:50ch;margin:34px auto 0;text-align:center;font-size:19px}

/* hero */
.hero{min-height:100svh;display:grid;grid-template-columns:1.3fr .8fr;align-items:end;gap:0;padding:130px var(--pad) 0;overflow:hidden}
.hero.flip{grid-template-columns:.8fr 1.3fr}
.hero.flip .arch{order:-1}
.hero.flip .htxt{padding-left:6vw}
.htxt{position:relative;z-index:2;padding-bottom:clamp(48px,8vw,100px)}
.hero h1{font-size:clamp(3.4rem,8.4vw,9.4rem);line-height:.93;letter-spacing:-.03em}
.hero.flip h1{font-size:clamp(3.2rem,7vw,8rem)}
.hero h1 span{display:block}
.hero h1 span:nth-child(2){padding-left:.7em}
.hero .htxt p{max-width:42ch;margin:34px 0 30px;font-size:clamp(18px,1.5vw,20px);color:var(--rose)}
.hero .acts{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .arch{height:min(82vh,860px);margin-left:-9vw;position:relative;z-index:1;align-self:end}
.hero.flip .arch{margin-left:0;margin-right:-4vw}
.hero .arch::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(52,16,26,.78),rgba(52,16,26,0) 48%)}
.hero.flip .arch::after{background:linear-gradient(270deg,rgba(52,16,26,.6),rgba(52,16,26,0) 40%)}
.rise{animation:rise 1.2s cubic-bezier(.2,.7,.1,1) both}
.rise img{animation:settle 1.8s cubic-bezier(.2,.7,.1,1) both}
@keyframes rise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes settle{from{transform:scale(1.14)}to{transform:scale(1)}}
.hero.light{background:var(--pow);color:var(--ink)}
.hero.light .htxt p{color:var(--mute)}
.hero.light .pill{height:min(78vh,820px);align-self:center;margin-top:-20px}
.hero.light .pill::after{display:none}

.cred{padding:22px var(--pad);border-bottom:1px solid rgba(28,15,18,.15);font-size:15.5px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cred span{color:var(--mute)}

/* meet */
.meet{display:grid;grid-template-columns:.8fr 1fr;gap:clamp(30px,8vw,130px);align-items:center}
.meet h2{margin-bottom:26px}
.meet p{max-width:44ch;font-size:clamp(18px,1.6vw,21px)}
.meet .sig{margin-top:30px;font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.4rem);font-style:italic;color:var(--ox)}
.meet .lnk{display:inline-block;margin-top:34px}

/* services */
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:clamp(60px,9vw,120px) var(--pad) 40px}
.svc{display:grid;grid-template-columns:1fr 1fr}
.sp{position:relative;min-height:min(86vh,820px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.sp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(40,10,20,.88),rgba(40,10,20,0) 62%)}
.sp .in{position:relative;z-index:2;padding:clamp(24px,4vw,56px)}
.sp h3{font-size:clamp(2.4rem,4.4vw,4.4rem);margin-bottom:10px}
.sp p{max-width:30ch;margin-bottom:22px;font-size:18px}

/* work */
.work{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(16px,2.4vw,34px);align-items:start;margin-top:56px}
.work>*:nth-child(2){margin-top:70px}
.work figcaption{margin-top:12px;font-size:15px;color:var(--mute)}
.ba{position:relative;aspect-ratio:3/4;overflow:hidden;background:#000;--p:50;touch-action:pan-y}
.ba i{background-image:var(--img);position:absolute;inset:0;background-size:200% auto;background-repeat:no-repeat;background-position-y:30%}
.ba .a{background-position-x:100%}
.ba .b{background-position-x:0;clip-path:inset(0 calc(100% - var(--p)*1%) 0 0)}
.ba .ln{position:absolute;top:0;bottom:0;left:calc(var(--p)*1%);width:2px;margin-left:-1px;background:#fff}
.ba .kn{position:absolute;top:50%;left:calc(var(--p)*1%);width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ox);font-size:16px;letter-spacing:-2px;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba:focus-within{outline:2px solid var(--lip);outline-offset:3px}
.ba .t{position:absolute;bottom:12px;font-size:13px;background:rgba(250,246,244,.92);color:var(--ink);padding:4px 12px;border-radius:99px}
.ba .t.l{left:12px}.ba .t.r{right:12px}
.work .still{aspect-ratio:3/4;overflow:hidden}


/* portrait stage: shapes drift behind Phoebe */
.stage{position:relative;aspect-ratio:1/1.12;width:100%;max-width:540px;clip-path:inset(-40% -40% 0 -40%)}
.stage.sm{max-width:320px;margin-top:34px}
.stage .s{position:absolute;opacity:0;will-change:translate,scale}
.stage.go .s{opacity:1;animation:pop 1.1s cubic-bezier(.2,.7,.1,1) both,var(--dr) var(--t) ease-in-out 1.1s infinite alternate}
.stage .s1{left:7%;bottom:0;width:60%;height:94%;border-radius:999px 999px 0 0;background:#dcb7af;transform-origin:50% 100%;--dr:driftX;--t:11s}
.stage .s2{right:0;top:7%;width:31%;aspect-ratio:1;border-radius:50%;background:var(--ox2);--dr:driftY;--t:7s}
.stage .s3{left:-2%;bottom:24%;width:32%;height:10%;border-radius:999px;background:var(--lip);rotate:-16deg;--dr:driftX;--t:9s}
.stage .s4{right:4%;bottom:0;width:48%;height:76%;border-radius:999px 999px 0 0;border:1.5px solid var(--ox);border-bottom:0;transform-origin:50% 100%;--dr:driftY;--t:13s}
.stage .s5{left:19%;top:5%;width:9%;aspect-ratio:1;border-radius:50%;background:#c99a91;--dr:driftY;--t:6s}
.stage .s6{right:12%;bottom:30%;width:22%;height:7%;border-radius:999px;border:1.5px solid var(--lip);rotate:14deg;--dr:driftX;--t:8s}
.stage .who{position:absolute;left:0;bottom:0;width:100%;height:auto;z-index:3}
@keyframes pop{from{scale:.15;opacity:0}to{scale:1;opacity:1}}
@keyframes driftX{from{translate:-7% 0}to{translate:7% 0}}
@keyframes driftY{from{translate:0 -10%}to{translate:0 10%}}


/* pricing, morning, about, footer contact */
.morn{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,70px) clamp(30px,6vw,100px);margin-top:56px}
.morn h3{font-size:clamp(1.6rem,2.4vw,2.3rem);margin-bottom:12px}
.morn p{color:var(--mute);max-width:46ch}
.pricing{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,7vw,110px);align-items:start}
.pricing .min{margin-top:26px;font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.2;max-width:20ch}
.pl{list-style:none;border-top:1px solid rgba(128,100,100,.45)}
.pl li{display:grid;grid-template-columns:1fr auto;gap:8px 24px;padding:24px 0;border-bottom:1px solid rgba(128,100,100,.45);align-items:baseline}
.pl b{font-weight:500;font-size:19px}
.pl span{display:block;opacity:.82;font-size:16px;max-width:42ch;margin-top:2px}
.pl .pr{font-family:var(--serif);font-size:clamp(2rem,3.4vw,3.2rem);letter-spacing:-.02em;white-space:nowrap;line-height:1}
.pnote{margin-top:24px;font-size:16.5px;max-width:52ch;opacity:.9}
.good{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px);margin-top:46px}
.good h3{font-size:clamp(1.5rem,2vw,1.9rem);margin-bottom:10px}.good p{color:var(--mute)}
.abt{border-top:1px solid rgba(28,15,18,.2)}
.abt .r{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,6vw,100px);padding:clamp(34px,5vw,64px) 0;border-bottom:1px solid rgba(28,15,18,.2)}
.abt h3{font-size:clamp(2rem,3.4vw,3.2rem)}
.abt p{font-size:clamp(18px,1.5vw,20px);max-width:54ch}
.hero.light .stage{max-width:520px;width:100%;align-self:end}
.fc{display:flex;flex-direction:column;gap:4px;font-size:16px}.fc b{font-weight:500;margin-bottom:4px}.fc a:hover{color:var(--lip)}
.floc{margin-top:14px;font-size:15px;color:var(--mute);max-width:32ch}
@media (max-width:900px){
  .morn,.pricing,.good,.abt .r{grid-template-columns:1fr}
  .hero.light .stage{width:92%;max-width:430px;order:-1;margin:0 0 -10px}
  .pl li{grid-template-columns:1fr auto}
}


/* price drum */
.pdrum .stick{padding:clamp(72px,11vw,150px) var(--pad);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,7vw,110px);align-items:start}
.pdrum .idx,.pdrum .win{display:none}
.pdrum .min{margin-top:26px;font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.2;max-width:20ch}
.pafter{display:flow-root;padding-top:0!important;padding-bottom:clamp(60px,9vw,110px)!important}
.pafter>*{max-width:52ch}
.pdrum.live{height:calc(100vh + (var(--n) - 1) * 46vh);height:calc(100svh + (var(--n) - 1) * 46svh)}
.pdrum.live .stick{position:sticky;top:0;height:100vh;height:100svh;padding-top:96px;padding-bottom:40px;align-items:center}
.pdrum.live .win{display:block;position:absolute;left:2%;right:2%;top:50%;height:140px;margin-top:-70px;border-top:1px solid rgba(128,100,100,.55);border-bottom:1px solid rgba(128,100,100,.55);pointer-events:none}
.pdrum.live .win::before{content:"";position:absolute;left:-14px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--lip)}
.pdrum.live .dw{position:relative;perspective:900px;height:480px;-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent)}
.pdrum.live .drum{position:relative;height:100%;border:0;transform-style:preserve-3d;list-style:none}
.pdrum.live .drum li{position:absolute;left:14%;right:14%;top:50%;height:112px;margin-top:-56px;padding:0;border:0;align-items:center;backface-visibility:hidden;will-change:transform,opacity}
.pdrum.live .drum li .pr{font-size:clamp(1.8rem,2.8vw,2.6rem)}
.pdrum.live .drum li b{font-size:17px}
.pdrum.live .drum li span{font-size:14.5px;max-width:30ch}
.pdrum.live .idx{display:flex;flex-direction:column;gap:6px;list-style:none;margin-top:42px}
.idx button{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;font-size:16px;opacity:.5;padding:5px 0;transition:opacity .3s}
.idx button i{width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;transition:background .3s,border-color .3s}
.idx button.on{opacity:1}.idx button.on i{background:var(--lip);border-color:var(--lip)}
.idx button:focus-visible{outline:2px solid var(--lip);outline-offset:4px}
@media (max-width:900px){
  .pdrum .stick{grid-template-columns:1fr}
  .pdrum.live .stick{gap:6px;align-content:center;padding-top:88px}
  .pdrum.live .pl-left{display:flex;flex-direction:column}
  .pdrum.live .min{margin-top:12px;font-size:1.3rem}
  .pdrum.live .idx{flex-direction:row;gap:14px;margin-top:16px}
  .pdrum.live .idx button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pdrum.live .idx button{padding:10px 4px}
  .pdrum.live .dw{perspective:700px;height:min(360px,46svh)}
  .pdrum.live .win{height:116px;margin-top:-58px}
  .pdrum.live .drum li{height:92px;margin-top:-46px;left:13%;right:13%}
  .pdrum.live .drum li .pr{font-size:1.7rem}
  .pdrum.live .drum li b{font-size:16px}
  .pdrum.live .drum li span{font-size:13px;line-height:1.35}
}

/* planning */
.plan{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,7vw,110px);border-top:1px solid rgba(28,15,18,.18)}
.plan .cols{display:grid;gap:34px}
.plan h3{font-size:clamp(1.5rem,2.2vw,2.1rem);margin-bottom:8px}
.plan p{max-width:44ch}

/* closing */
.close{text-align:center;padding:clamp(90px,13vw,180px) var(--pad)}
.close h2{font-size:clamp(3rem,8.4vw,9rem);line-height:.95;letter-spacing:-.03em;max-width:11ch;margin:0 auto 40px}
.close .sm{color:var(--rose);margin-bottom:22px}

/* bridal parts */
.made{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(30px,8vw,120px);align-items:center}
.made .arch{aspect-ratio:4/5;max-width:520px}
.made p{max-width:44ch;margin-top:24px;font-size:19px}
.steps{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,7vw,110px);align-items:start}
.steps ol{list-style:none;border-top:1px solid rgba(250,246,244,.3)}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:30px 0;border-bottom:1px solid rgba(250,246,244,.3)}
.steps li b{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--rose)}
.steps h3{font-size:clamp(1.6rem,2.4vw,2.3rem);margin-bottom:8px}
.steps p{color:var(--rose);max-width:44ch}
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,7vw,110px)}
.faq details{border-bottom:1px solid rgba(28,15,18,.2)}
.faq details:first-child{border-top:1px solid rgba(28,15,18,.2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-size:19px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;line-height:1;color:var(--lip);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 40px 26px 0;max-width:56ch;color:var(--mute)}
.tbc{display:inline-block;margin-top:10px;border:1px dashed #b0743a;color:#7a4a14;background:#fff2dc;border-radius:6px;padding:2px 10px;font-size:14px}

/* occasion */
.diary{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(30px,7vw,110px)}
.diary ul{list-style:none;border-top:1px solid rgba(28,15,18,.2)}
.diary li{display:grid;grid-template-columns:minmax(0,.9fr) 1.1fr;gap:20px;padding:26px 0;border-bottom:1px solid rgba(28,15,18,.2);align-items:baseline}
.diary li b{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.01em}
.diary li span{color:var(--mute)}
.chair{display:grid;grid-template-columns:1fr .8fr;gap:clamp(30px,8vw,120px);align-items:center}
.chair .arch{aspect-ratio:4/5;max-width:480px;justify-self:end;width:100%}
.chair p{max-width:46ch;margin-top:22px;font-size:19px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,44px);max-width:1000px;margin-top:50px}
.two .ba{aspect-ratio:3/4}

/* contact */
.chero{padding:150px var(--pad) 30px;background:var(--pow)}
.chero h1{font-size:clamp(3.4rem,9vw,9.6rem);letter-spacing:-.03em;line-height:.93;max-width:10ch}
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,8vw,120px);padding:60px var(--pad) 110px;background:var(--pow)}
.contact aside p{max-width:36ch;margin-bottom:22px;font-size:18px}
.contact aside h2{font-size:clamp(1.6rem,2.4vw,2.2rem);margin:36px 0 12px}
form{display:grid;grid-template-columns:1fr 1fr;gap:30px 30px;align-content:start}
.f{display:flex;flex-direction:column;gap:6px}.f.w{grid-column:1/-1}
label{font-size:15px;font-weight:500}
input,select,textarea{font:400 17px var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid rgba(28,15,18,.45);padding:12px 2px;border-radius:0;width:100%}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--lip);box-shadow:0 1.5px 0 var(--lip)}
textarea{min-height:130px;resize:vertical}
.sub{grid-column:1/-1;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.sub small{color:var(--mute);font-size:14.5px}
.note{grid-column:1/-1;font-size:14px;color:var(--mute)}
.prev{background:var(--por);padding:clamp(24px,4vw,48px);border-radius:0 0 0 0}
.prev h2{font-size:clamp(2rem,3.4vw,3.2rem);margin-bottom:22px}
.prev dl{display:grid;grid-template-columns:150px 1fr;gap:12px 20px;margin-bottom:28px}
.prev dt{color:var(--mute);font-size:15px}.prev dd{overflow-wrap:anywhere}

/* footer */
footer{background:var(--por);padding:70px var(--pad) 36px;border-top:1px solid rgba(28,15,18,.14)}
.fr{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
footer ul{list-style:none;display:flex;gap:30px;flex-wrap:wrap}
footer a{text-decoration:none}footer ul a:hover{color:var(--lip)}
.fb{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:60px;padding-top:22px;border-top:1px solid rgba(28,15,18,.14);font-size:14.5px;color:var(--mute)}

@media (max-width:900px){
  body{font-size:16.5px}
  nav{position:fixed;inset:0;background:var(--ox);color:var(--por);display:flex;align-items:center;justify-content:center;transform:translateY(-100%);transition:transform .45s cubic-bezier(.2,.7,.1,1);z-index:-1;visibility:hidden}
  nav.open{transform:none;visibility:visible}
  nav ul{flex-direction:column;gap:22px;text-align:center}
  nav a{font-family:var(--serif);font-size:2.6rem;background:none}
  .burger{display:block;position:relative;z-index:40}
  header.menu{color:var(--por);background:transparent;box-shadow:none;backdrop-filter:none}
  .hero,.hero.flip{grid-template-columns:1fr;padding-top:calc(96px + env(safe-area-inset-top,0px));min-height:0}
  .hero .arch,.hero.flip .arch{order:-1;margin:0 0 -40px;height:min(62vh,470px);width:78%;justify-self:end}
  .hero.flip .arch{justify-self:start}
  .hero.flip .htxt{padding-left:0}
  .hero h1 span:nth-child(2){padding-left:0}
  .hero .arch::after{background:linear-gradient(0deg,rgba(52,16,26,.85),rgba(52,16,26,0) 55%)}
  .htxt{padding-bottom:54px}
  .hero.light .pill{height:min(56vh,430px);width:84%;order:-1;margin:0 0 -30px}
  .meet,.made,.steps,.faq,.diary,.chair,.contact,.plan{grid-template-columns:1fr}
  .made .arch{max-width:none;width:84%}.meet .stage{max-width:420px;width:94%}
  .chair .arch{justify-self:start;width:84%}
  .svc{grid-template-columns:1fr}.sp{min-height:560px}
  .work{grid-template-columns:1fr 1fr}.work>*:nth-child(2){margin-top:0}.work>*:nth-child(3){grid-column:1/-1}
  .work>*:nth-child(3) .still{aspect-ratio:4/3}
  .two{grid-template-columns:1fr 1fr}
  .diary li{grid-template-columns:1fr;gap:6px}
  form{grid-template-columns:1fr}
  .chero{padding-top:110px}
  .prev dl{grid-template-columns:1fr;gap:2px}.prev dd{margin-bottom:10px}
  .stmt{max-width:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.stage .s{opacity:1!important}}

.tint{background:#F1E6DC}
.tint :is(h2,h3,dt,.stmt){color:var(--brown)}
/* Palette from Phoebe's invitation: paper brown with copper foil, on every non-white background */
:root{--brown:#4A3327;--brown2:#54392b;--gold:#D9A883;--goldl:#F0CDAE;--ox:#4A3327;--ox2:#3a281e;--rose:#D9A883;--pow:#54392b}
.dark,.pow,.hero.light,.chero,.contact{color:var(--gold)}
.hero.light .htxt p,.hero.light h1,.hero.light .htxt{color:var(--gold)}
:is(.dark,.pow,.hero.light,.chero,.contact) :is(p,span,small,dt,figcaption,label,li){color:var(--gold)}
.ba .t{color:var(--ink)!important}.ba .kn{color:var(--ox)!important}
.contact .prev,.contact .prev :is(p,span,dt,dd,h2,small){color:var(--ink)}.contact .prev dt{color:var(--mute)}
.msg,.msg *{color:var(--ink)!important}
:is(.dark,.pow,.hero.light,.chero,.contact) .btn.fill,:is(.dark,.pow,.hero.light,.chero,.contact) .btn.light{background:var(--gold);border-color:var(--gold);color:var(--brown)}
:is(.dark,.pow,.hero.light,.chero,.contact) .btn.fill:hover,:is(.dark,.pow,.hero.light,.chero,.contact) .btn.light:hover{background:var(--goldl);border-color:var(--goldl)}
:is(.dark,.pow,.hero.light,.chero,.contact) .lnk:hover{color:var(--goldl);border-color:var(--goldl)}
:is(.dark,.pow,.hero.light,.chero,.contact) :focus-visible{outline-color:var(--gold)}
header.on-dark{color:var(--gold)}
header.solid{background:rgba(74,51,39,.95);color:var(--gold);box-shadow:0 1px 0 rgba(217,168,131,.25)}
.hero .arch::after{background:linear-gradient(90deg,rgba(74,51,39,.8),rgba(74,51,39,0) 48%)}
.hero.flip .arch::after{background:linear-gradient(270deg,rgba(74,51,39,.65),rgba(74,51,39,0) 40%)}
.sp::after{background:linear-gradient(0deg,rgba(52,35,26,.9),rgba(52,35,26,0) 62%)}
.steps ol,.steps li,.pdrum .pl,.pdrum .pl li,.diary ul,.diary li{border-color:rgba(217,168,131,.35)}
.pdrum.live .win{border-color:rgba(217,168,131,.55)}
.pdrum.live .win::before,.idx button.on i{background:var(--gold);border-color:var(--gold)}
.steps li b{color:var(--gold)}
.contact input,.contact select,.contact textarea{color:var(--gold);border-bottom-color:rgba(217,168,131,.6)}
.contact input::placeholder,.contact textarea::placeholder{color:rgba(217,168,131,.6)}
.contact option{color:#2b1a12;background:#fff}
.contact input:focus,.contact select:focus,.contact textarea:focus{border-color:var(--goldl);box-shadow:0 1.5px 0 var(--goldl)}
.stage .s1{background:#8a6450}.stage .s2{background:#a87558}.stage .s3{background:var(--gold)}
.stage .s4{border-color:#b9845f}.stage .s5{background:#c8956e}.stage .s6{border-color:var(--gold)}
.arches{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,44px);margin-top:56px;align-items:start}
.arches.four{grid-template-columns:repeat(4,1fr)}
.arches figure:nth-child(even){margin-top:56px}
.arches .arch{aspect-ratio:3/4;background:#34241b}
.arches img{transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.arches figure:hover img{transform:scale(1.04)}
.arches figcaption{margin-top:12px;font-size:15px}
.gal .lead{margin-top:18px}
.steps .sidepic{margin-top:44px;max-width:360px;aspect-ratio:4/5}
.party{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,7vw,110px);align-items:center}
.party p{max-width:46ch;margin-top:22px;font-size:19px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,32px)}
.duo figure:nth-child(2){margin-top:56px}
.duo .fr{aspect-ratio:3/4;overflow:hidden;background:#34241b}.duo .fr img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  nav{background:var(--brown);color:var(--gold)}
  header.menu{color:var(--gold)}
  .hero.light .pill{margin:0 0 28px}
  .hero .arch::after,.hero.flip .arch::after{background:linear-gradient(0deg,rgba(74,51,39,.9),rgba(74,51,39,0) 58%)}
  .arches,.arches.four{grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
  .arches figure:nth-child(even){margin-top:36px}
  .arches.three figure:nth-child(3){grid-column:1/-1;width:62%;justify-self:center;margin-top:0}
  .steps .sidepic{max-width:none;width:70%}
  .party{grid-template-columns:1fr}.duo figure:nth-child(2){margin-top:32px}
}

/* premium home hero */
.phero{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);align-items:center;gap:4vw;padding:112px var(--pad) 5vh;position:relative}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 78% 55%,rgba(217,168,131,.16),transparent 70%);pointer-events:none}
.phero .htxt{position:relative;z-index:3}
.phero .htxt p.pk{margin:0 0 26px;font-size:12px;line-height:1.2;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:16px;max-width:none;white-space:nowrap}
.phero .pk::before{content:"";width:56px;height:1px;background:var(--gold)}
.phero h1{font-size:clamp(2.8rem,4.3vw,5.4rem);line-height:.98}
.phero .htxt p.pl{max-width:44ch;margin:28px 0 30px;font-size:clamp(16px,1.25vw,19px);border:0;padding:0}
.pcomp{position:relative;height:min(76vh,780px);align-self:center;margin:0 3vw 0 0}
.pcomp figure{margin:0;position:absolute}
.pcomp .arch{height:100%;width:100%;margin:0;position:relative;z-index:1;align-self:auto}
.pcomp img{width:100%;height:100%;object-fit:cover;display:block}
.pcomp .pm{right:0;top:0;bottom:0;width:68%}
.pcomp .pm::before{content:"";position:absolute;inset:-14px -14px 0 14px;border:1px solid rgba(217,168,131,.55);border-radius:999px 999px 0 0;z-index:0}
.pcomp .ps{left:0;bottom:-3vh;width:40%;height:46%;z-index:2}
.pcomp .ps .arch{box-shadow:0 0 0 10px #4A3327,0 24px 60px rgba(20,10,4,.45)}
.pcomp figcaption{position:absolute;z-index:3;left:50%;transform:translateX(-50%);padding:9px 16px 8px;border-radius:99px;background:rgba(74,51,39,.82);font-size:10.5px;line-height:1;letter-spacing:.24em;text-transform:uppercase;color:#F0CDAE;backdrop-filter:blur(4px)}
.pcomp .pm figcaption{bottom:24px}
.pcomp .ps figcaption{bottom:16px}
.phero .arch::after{display:none}
.phero{animation:pfade 1.1s ease both}
@keyframes pfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.phero{animation:none}}
@media (max-width:980px){
 .phero{grid-template-columns:minmax(0,1fr);gap:38px;padding:calc(96px + env(safe-area-inset-top,0px)) var(--pad) 8vh;min-height:0}
 .phero .htxt p.pk{margin-bottom:20px;font-size:11px;white-space:normal;letter-spacing:.2em;gap:12px}
 .phero .pk::before{width:34px;flex:none}
 .phero h1{font-size:clamp(2.5rem,9.5vw,4.6rem)}
 .phero h1 span:nth-child(2){padding-left:0}
 .phero .htxt p.pl{margin:22px 0 26px;font-size:16px;max-width:52ch}
 .pcomp{order:2;height:min(112vw,560px);width:min(100%,500px);margin:0 auto}
 .pcomp .pm{width:72%}
 .pcomp .pm::before{inset:-10px -10px 0 10px}
 .pcomp .ps{width:42%;height:44%;bottom:-18px}
 .pcomp .ps .arch{box-shadow:0 0 0 7px #4A3327,0 16px 36px rgba(20,10,4,.4)}
}
@media (max-width:420px){.phero .htxt p.pk{letter-spacing:.14em}.pcomp{height:118vw}}
/* touch-friendly hit areas */
@media (pointer:coarse){
 .lnk{display:inline-block;padding:12px 0 10px;border-bottom:0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/100% 1.5px no-repeat}
 footer ul a,footer .fc a{display:inline-block;padding:9px 0}
 .pdrum.live .idx{gap:4px}
 .pdrum.live .idx button{padding:17px 15px}
}
@media (max-width:980px){.pdrum.live .idx button{padding:17px 15px}}

/* horizontal gallery carousel */
.gcar{position:relative;margin-top:52px}
.gcar .arches,.gcar .arches.four{display:flex;grid-template-columns:none;gap:clamp(14px,2vw,30px);margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:flex-start;outline-offset:6px}
.gcar .arches::-webkit-scrollbar{display:none}
.gcar .arches figure{flex:0 0 clamp(250px,25vw,390px);margin:0;scroll-snap-align:start;width:auto}
.gcar .arches figure:nth-child(even){margin-top:44px}
.gcar .arches.three figure:nth-child(3){grid-column:auto;width:auto;justify-self:auto;margin-top:0}
.gcar .arches figure:last-child{margin-right:var(--pad)}
.gcar .arch{aspect-ratio:3/4}
.gcar .arch img{width:100%;height:100%;object-fit:cover}
.gnav{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:30px}
.gcar[data-fit] .gnav{display:none}
.gcount{font-size:13px;letter-spacing:.2em;color:var(--gold)}
.gbtns{display:flex;gap:12px}
.gbtns button{all:unset;box-sizing:border-box;width:52px;height:52px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--gold);transition:background .25s,color .25s,opacity .25s}
.gbtns button:hover:not(:disabled){background:var(--gold);color:var(--brown)}
.gbtns button:disabled{opacity:.35;cursor:default}
.gbtns button:focus-visible,.gcar .arches:focus-visible{outline:2px solid var(--goldl);outline-offset:3px}
.gbtns svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.gprog{flex:1;height:1px;background:rgba(217,168,131,.3);position:relative;max-width:340px}
.gprog i{position:absolute;left:0;top:-1px;height:3px;background:var(--gold);width:20%;transition:left .2s,width .2s}
@media (max-width:800px){
 .gcar .arches figure{flex-basis:min(74vw,330px)}
 .gcar .arches figure:nth-child(even){margin-top:28px}
 .gcar{margin-top:36px}
 .gprog{max-width:none}
}
@media (prefers-reduced-motion:reduce){.gcar .arches{scroll-behavior:auto}}

.faq summary h3{font:500 19px var(--sans);letter-spacing:0;line-height:inherit;margin:0}
.diary li h3{font-weight:400;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.01em}
.abt h2{font-size:clamp(2rem,3.4vw,3.2rem)}
.chero h1{font-size:clamp(3rem,7.4vw,7.6rem);max-width:15ch}
.hero h1{font-size:clamp(3rem,7vw,8rem)}.hero.flip h1{font-size:clamp(3rem,6.2vw,7rem)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* WordPress additions */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--por);color:var(--ink);padding:10px 16px}.skip:focus{left:10px;top:10px}
.hp{position:absolute!important;left:-9999px!important;height:0;overflow:hidden}
.msg{padding:18px 22px;margin-bottom:28px;border-left:3px solid var(--lip);background:var(--por);font-size:17px}
.msg.ok{border-color:#2f6b4f}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body.admin-bar header{top:32px}
@media (max-width:782px){body.admin-bar header{top:46px}}
.entry{padding:150px var(--pad) 100px;max-width:900px}.entry h1{font-size:clamp(2.6rem,6vw,5rem);margin-bottom:30px}.entry p{margin-bottom:1em}