/* ============================================================
   ATTIRE — page styles (extends site-v7.css)
   ============================================================ */

/* light-header nav (no dark hero on this page) */
.nav{ color:var(--navy); }
.nav .brand{ text-shadow:none; }

/* page header */
.page-head{ text-align:center; padding:clamp(128px,19vh,196px) 0 clamp(34px,5vw,60px); }
.page-head .kicker{ display:block; margin-bottom:18px; }
.page-head h1{ font-family:var(--display); font-weight:500; font-size:clamp(50px,10vw,128px); line-height:.98; padding-bottom:.3em; }
.page-head h1 .amp{ font-family:var(--script); color:var(--accent); }
.page-head .ph-sub{ font-family:var(--display); font-style:italic; font-size:clamp(18px,1.9vw,24px);
  color:var(--ink-soft); max-width:50ch; margin:clamp(16px,2.6vh,26px) auto 0; }
.feeling-line{ margin-top:clamp(20px,3vh,30px); font-family:var(--label); font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--navy); display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.feeling-line .dot{ color:var(--accent); }
.attire-jump{ margin-top:clamp(22px,3vh,32px); display:flex; gap:clamp(12px,1.6vw,18px); justify-content:center; flex-wrap:wrap; }
.attire-jump a{ display:inline-flex; align-items:center; gap:7px; font-family:var(--label); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  color:var(--cream); background:var(--navy); border:1px solid var(--navy); border-radius:999px; padding:11px 22px;
  box-shadow:0 8px 18px -12px rgba(41,56,79,.5); transition:background .3s var(--t), transform .3s var(--t), box-shadow .35s var(--t); }
.attire-jump a::after{ content:"\2193"; font-size:12px; opacity:.85; }
.attire-jump a:hover{ background:var(--accent); border-color:var(--accent); transform:translateY(-2px); box-shadow:0 16px 28px -14px rgba(41,56,79,.55); }

/* "the easy version" helper card */
.easy{ max-width:760px; margin:0 auto; background:var(--cream-2); border:1px solid var(--line); border-radius:6px;
  padding:clamp(26px,3.5vw,42px); text-align:center; }
.easy p{ font-family:var(--display); font-style:italic; font-size:clamp(19px,1.9vw,25px); color:var(--navy); line-height:1.4; margin:0; }
.easy p .reg{ font-family:var(--body); font-style:normal; font-size:.8em; color:var(--ink-soft); display:block; margin-top:14px; line-height:1.6; }

/* day-look section */
.look-sec{ padding:clamp(54px,8vw,100px) 0; }
.look-sec.alt{ background:var(--cream-2); }
.look-head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:clamp(36px,5vw,58px); }
.look-head h2{ font-family:var(--display); font-size:clamp(38px,6vw,76px); line-height:1; }
.look-head h2 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.look-head .lh-note{ font-family:var(--display); font-style:italic; font-size:clamp(17px,1.7vw,22px); color:var(--ink-soft); max-width:54ch; }

/* gallery of looks */
.look-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,24px); max-width:1120px; margin:0 auto; }
.look-grid.three{ grid-template-columns:repeat(3,1fr); max-width:920px; }
.look{ display:flex; flex-direction:column; }
.look .ph{ aspect-ratio:3/4; overflow:hidden; border:1px solid var(--line); border-radius:4px; background:var(--cream-2);
  box-shadow:0 20px 44px -30px rgba(41,56,79,.4); }
.look .ph img{ width:100%; height:100%; object-fit:cover; }
.look .l-cap{ margin-top:12px; text-align:center; font-family:var(--label); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); }

/* cues row (yes / finishing touches) */
.cues{ max-width:880px; margin:clamp(40px,6vw,64px) auto 0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); }
.cue h3{ font-family:var(--display); font-size:clamp(22px,2.2vw,28px); margin-bottom:14px; }
.cue h3 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.cue ul{ list-style:none; margin:0; padding:0; }
.cue li{ position:relative; padding-left:24px; margin-bottom:11px; color:var(--ink); font-size:16px; line-height:1.5; }
.cue li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.cue.avoid li::before{ background:none; content:"—"; top:0; color:var(--ink-soft); font-weight:600; }
.cue .c-note{ font-family:var(--display); font-style:italic; color:var(--ink-soft); font-size:15px; margin-top:14px; }

/* shopping row */
.shop{ max-width:1000px; margin:clamp(44px,6vw,68px) auto 0; }
.shop-head{ text-align:center; margin-bottom:clamp(24px,3vw,34px); }
.shop-head .kicker{ display:block; margin-bottom:8px; }
.shop-head p{ font-family:var(--display); font-style:italic; font-size:clamp(17px,1.6vw,21px); color:var(--ink-soft); max-width:54ch; margin:0 auto; }
.shop-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.shop-card{ display:flex; flex-direction:column; gap:8px; padding:clamp(20px,2.4vw,28px); border:1px solid var(--line);
  border-radius:6px; background:var(--cream); text-align:left; transition:transform .35s var(--t), border-color .35s, box-shadow .35s; }
.shop-card:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 22px 44px -28px rgba(41,56,79,.4); }
.shop-card .sc-name{ font-family:var(--display); font-size:clamp(21px,2vw,26px); color:var(--navy); }
.shop-card .sc-desc{ color:var(--ink-soft); font-size:14.5px; line-height:1.55; flex:1; }
.shop-card .sc-price{ font-family:var(--body); font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin-top:2px;
  padding-top:12px; border-top:1px dotted var(--line); }
.shop-card.feature .sc-price{ color:rgba(244,238,227,.8); border-top-color:rgba(244,238,227,.22); }
.shop-card.feature .sc-price strong{ color:var(--butter); }
.shop-card .sc-go{ font-family:var(--label); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-top:4px; }
.shop-card .sc-links{ display:flex; flex-direction:column; gap:9px; margin-top:6px; }
.shop-card .sc-links a{ font-family:var(--label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.shop-card .sc-links a:hover{ text-decoration:underline; }
.shop-card.feature .sc-links a{ color:var(--butter); }
.shop-card.feature{ background:var(--navy-deep); border-color:var(--navy-deep); }
.shop-card.feature .sc-name{ color:var(--cream); }
.shop-card.feature .sc-desc{ color:rgba(244,238,227,.82); }
.shop-card.feature .sc-go{ color:var(--butter); }
.shop-card.feature .perk{ font-family:var(--label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:var(--navy-deep); background:var(--butter); border-radius:999px; padding:4px 12px; align-self:flex-start; }
/* small men's links row */
.shop-mini{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:760px; margin:clamp(24px,3vw,34px) auto 0; }
.shop-mini a{ display:inline-flex; align-items:center; gap:7px; font-family:var(--label); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
  background:var(--cream); border:1px solid var(--navy); border-radius:999px; padding:11px 20px;
  box-shadow:0 6px 15px -10px rgba(41,56,79,.5); transition:background .3s var(--t), color .3s var(--t), transform .3s var(--t), box-shadow .35s var(--t); }
.shop-mini a::after{ content:"\2197"; font-size:11px; opacity:.6; }
.shop-mini a:hover{ background:var(--navy); color:var(--cream); transform:translateY(-2px); box-shadow:0 15px 26px -14px rgba(41,56,79,.55); }

/* gentle avoid band */
.avoid-band{ background:var(--cream); padding:clamp(52px,7vw,88px) 0; }
.avoid-inner{ max-width:760px; margin:0 auto; text-align:center; }
.avoid-inner h2{ font-family:var(--display); font-size:clamp(30px,4vw,50px); line-height:1; }
.avoid-inner h2 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.avoid-inner .a-lede{ font-family:var(--display); font-style:italic; color:var(--ink-soft); font-size:clamp(17px,1.6vw,21px); margin:14px auto clamp(28px,4vw,40px); max-width:50ch; }
.avoid-chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.avoid-chips span{ font-family:var(--label); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:9px 16px; background:var(--cream); }

/* palette reuse tweaks */
.attire-palette{ padding:clamp(48px,7vw,84px) 0; text-align:center; }

/* RSVP CTA band (same style as the Weekend page) */
.wk-cta{ text-align:center; padding:clamp(56px,8vw,96px) 0; background:var(--navy-deep); color:var(--cream); }
.wk-cta .kicker{ color:var(--butter); display:block; margin-bottom:14px; }
.wk-cta h2{ font-family:var(--display); font-size:clamp(34px,5vw,60px); line-height:1; margin-bottom:8px; }
.wk-cta h2 em{ font-family:var(--script); color:var(--butter); font-style:normal; }
.wk-cta p{ color:rgba(244,238,227,.8); font-style:italic; font-family:var(--display); font-size:clamp(17px,1.5vw,21px); max-width:46ch; margin:0 auto; }
.wk-cta .btn{ background:var(--cream); color:var(--navy); margin-top:clamp(20px,3vh,30px); }
.wk-cta .btn:hover{ background:var(--butter); }
.wk-cta-note{ margin:clamp(30px,4vh,42px) auto 0; max-width:48ch; font-family:var(--label); font-size:13px; color:rgba(244,238,227,.66); line-height:1.65; }

/* ============================================================
   NEW — framed intro placard (ceremony-card style)
   ============================================================ */
.intro-sec{ padding:clamp(6px,1.5vw,16px) 0 clamp(46px,7vw,84px); }
.placard{ position:relative; max-width:820px; margin:0 auto; background:var(--cream);
  border:1px solid var(--navy); padding:clamp(34px,5vw,68px); box-shadow:0 40px 80px -50px rgba(41,56,79,.5); }
.placard::after{ content:""; position:absolute; inset:9px; border:1px solid var(--line); pointer-events:none; }
.placard-floret{ position:absolute; width:clamp(108px,15vw,168px); z-index:3; }
.placard-floret.tr{ right:-6%; top:-8%; transform:scaleX(-1); }
.placard-floret.bl{ left:-6%; bottom:-8%; }
.placard-head{ text-align:center; position:relative; }
.placard-head .kicker{ display:block; margin-bottom:12px; }
.placard-head h2{ font-family:var(--display); font-weight:500; font-size:clamp(30px,4.4vw,54px); line-height:1.02; }
.placard-head h2 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.placard-lead{ font-family:var(--display); font-style:italic; font-size:clamp(17px,1.7vw,22px); color:var(--ink-soft);
  max-width:54ch; margin:clamp(14px,2vh,20px) auto 0; line-height:1.5; }
.placard-rows{ position:relative; max-width:540px; margin:clamp(24px,4vh,38px) auto 0; }
.p-row{ display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline; padding:13px 0; border-bottom:1px dotted var(--line); }
.p-row:last-child{ border-bottom:0; }
.p-row .k{ font-family:var(--label); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.p-row .v{ font-family:var(--display); font-size:clamp(18px,1.7vw,23px); text-align:right; color:var(--navy); }
.p-row .v em{ font-family:var(--script); color:var(--accent); font-style:normal; }

/* edit labels between dress groups */
.edit-label{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,20px);
  margin:clamp(6px,1.5vw,16px) auto clamp(22px,3vw,32px); }
.edit-label span:not(.rule){ font-family:var(--label); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--navy); white-space:nowrap; }
.edit-label .rule{ height:1px; width:min(120px,15vw); background:var(--line); }

/* dress + men look aspect ratios (full-body portrait shots) */
#her .look .ph, .look-grid.men .ph{ aspect-ratio:2/3; }
#her .look .ph img, .look-grid.men .ph img{ object-position:center top; }

/* fabric study (For Her) — floating background-free cutouts */
.fabric-study{ display:grid; grid-template-columns:1.15fr .92fr .92fr; gap:clamp(18px,2.6vw,38px); align-items:center;
  max-width:1080px; margin:clamp(48px,7vw,84px) auto clamp(10px,2vw,22px); }
.fs-copy .kicker{ display:block; }
.fs-copy h3{ font-family:var(--display); font-size:clamp(26px,3vw,40px); margin:10px 0 12px; }
.fs-copy h3 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.fs-copy p{ color:var(--ink-soft); font-size:15.5px; line-height:1.6; max-width:38ch; }
.fs-frame{ margin:0; background:none; border:0; padding:0; box-shadow:none; }
.fs-frame img{ width:100%; height:auto; display:block; filter:drop-shadow(0 20px 26px rgba(41,56,79,.26)); }
.fs-a{ transform:rotate(-2deg); }
.fs-b{ transform:rotate(2.2deg); }

/* the easy formula (For Him) — clean centered */
.him-make{ display:grid; grid-template-areas:"formula linen" "shoes shoes"; grid-template-columns:minmax(0,1.2fr) minmax(0,0.9fr);
  column-gap:clamp(30px,4.5vw,62px); row-gap:clamp(40px,5vw,62px); align-items:center;
  max-width:900px; margin:clamp(46px,7vw,82px) auto 0; }
.him-formula{ grid-area:formula; justify-self:end; max-width:440px; text-align:left; }
.him-formula .kicker{ display:block; margin-bottom:9px; }
.him-formula h3{ font-family:var(--display); font-size:clamp(26px,3vw,40px); margin-bottom:clamp(18px,2.6vw,28px); }
.him-formula h3 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.formula{ list-style:none; margin:0; padding:0; width:360px; max-width:100%; text-align:left; }
.formula li{ position:relative; padding-left:24px; margin-bottom:13px; color:var(--ink); font-size:16px; line-height:1.5; }
.formula li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.formula li em{ font-style:italic; }

/* linens + the finish — formal-bordered, reflowing pair */
.him-linen{ grid-area:linen; justify-self:start; }
.him-shoes{ grid-area:shoes; justify-self:center; }
.duo-card{ margin:0; display:flex; flex-direction:column; align-items:center; }
.duo-img{ display:block; }
.duo-img img{ display:block; width:auto; max-width:100%; }
.him-linen .duo-img img{ max-height:clamp(300px,38vw,420px); filter:drop-shadow(0 14px 22px rgba(41,56,79,.16)); }
.him-shoes .duo-img img{ max-height:clamp(270px,32vw,338px); background:#fff; padding:10px;
  border:1px solid var(--navy); box-shadow:0 24px 42px -28px rgba(41,56,79,.42); }
.duo-card figcaption{ text-align:center; margin-top:22px; display:flex; flex-direction:column; gap:5px; }
.dc-k{ font-family:var(--display); font-size:clamp(15px,1.5vw,18px); color:var(--navy); }
.dc-v{ font-family:var(--label); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); }

/* shopping note */
.shop-note{ max-width:62ch; margin:clamp(26px,3.5vw,38px) auto 0; text-align:center;
  font-family:var(--display); font-style:italic; font-size:clamp(16px,1.5vw,20px); color:var(--ink-soft); line-height:1.6; }
.shop-note em{ font-family:var(--script); font-style:normal; color:var(--accent); font-size:1.12em; }
.shop-note em.plain{ font-family:inherit; font-style:italic; color:var(--accent); font-size:1em; }

/* elegant section divider — hairline + navy diamond */
.section-rule{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,22px); margin:clamp(6px,1.5vw,14px) auto clamp(18px,2.6vw,30px); }
.section-rule .ln{ height:1px; width:clamp(64px,11vw,120px); background:var(--line); }
.section-rule .dia{ width:7px; height:7px; background:var(--navy); transform:rotate(45deg); flex:none; }

/* watercolor palette on paper */
.attire-palette{ padding:clamp(40px,5.5vw,72px) 0 clamp(50px,7vw,86px); position:relative; background:var(--cream-2); }
.palette-paper{ margin:clamp(26px,4vw,44px) auto 0; max-width:780px; }
.palette-paper img{ width:100%; height:auto; display:block;
  filter:drop-shadow(0 1px 1px rgba(41,56,79,.16)) drop-shadow(0 16px 30px rgba(41,56,79,.13)); }
.palette-coordinate{ margin:clamp(26px,3.6vw,42px) auto 0; max-width:52ch; text-align:center;
  font-family:var(--display); font-style:italic; font-size:clamp(16px,1.5vw,20px); color:var(--ink-soft); line-height:1.55; }
.palette-coordinate em{ font-family:var(--script); font-style:normal; color:var(--accent); font-size:1.1em; }

/* tighten gap below men's section into palette */
#him.look-sec{ padding-bottom:clamp(30px,4vw,52px); }

/* watercolor floral accents */
.sec-floral{ position:absolute; z-index:0; pointer-events:none; }
.look-sec{ position:relative; overflow:hidden; }
.fl-her{ width:clamp(180px,24vw,320px); left:-3%; bottom:-2%; transform:scaleX(-1); opacity:.85; }
.fl-him{ width:clamp(180px,24vw,320px); right:-3%; top:5%; opacity:.85; }
.look-sec .wrap{ position:relative; z-index:1; }
.floral-divider{ display:flex; justify-content:center; padding:clamp(22px,3.5vw,42px) 0 0; }
.floral-divider img{ width:clamp(300px,42vw,460px); height:auto; opacity:.95; }
.palette-floral-top{ width:clamp(240px,34vw,400px); height:auto; margin:0 auto clamp(4px,1.5vw,12px); display:block; opacity:.95; position:relative; z-index:1; }

/* ============================================================
   NAVY CLOSE — bridge RSVP CTA into footer, tighten rhythm
   ============================================================ */
.wk-cta{ padding-bottom:clamp(32px,4vw,50px); }
.wk-cta p.wk-cta-note{ margin-top:clamp(30px,4vh,42px); }
footer{ padding-top:clamp(36px,4.5vw,56px); border-top:1px solid rgba(244,238,227,.12); }
.f-crest{ margin-bottom:clamp(16px,2.4vw,26px); }
.f-detail{ margin-top:13px; }
.f-nav{ margin-top:clamp(24px,3.5vw,38px); padding-top:26px; }
.colophon{ margin-top:22px; }

@media (max-width:880px){
  .nav-links{ display:none; }
  .look-grid, .look-grid.three{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .cues{ grid-template-columns:1fr; gap:30px; }
  .shop-cards{ grid-template-columns:1fr; }
  .page-head{ padding:clamp(108px,16vh,150px) 0 clamp(28px,7vw,48px); }
  .look-sec{ padding:clamp(48px,10vw,72px) 0; }
  .fabric-study{ grid-template-columns:1fr 1fr; gap:20px; }
  .fs-copy{ grid-column:1 / -1; text-align:center; }
  .fs-copy p{ margin-inline:auto; }
  .him-linen .duo-img img, .him-shoes .duo-img img{ max-height:clamp(260px,40vw,360px); }
  .fl-her{ display:none; }
}
@media (max-width:600px){
  /* phone: formula beside the linen swatch, shoes centered below */
  .him-make{ grid-template-areas:"formula linen" "shoes shoes"; grid-template-columns:1.2fr .85fr;
    column-gap:16px; row-gap:24px; align-items:center; }
  .him-formula{ justify-self:stretch; max-width:none; text-align:left; }
  .him-formula h3{ font-size:clamp(22px,6.5vw,28px); margin-bottom:13px; }
  .formula{ width:auto; }
  .formula li{ font-size:13.5px; padding-left:19px; margin-bottom:9px; line-height:1.45; }
  .formula li::before{ width:7px; height:7px; top:7px; }
  .him-linen .duo-img img{ max-height:clamp(230px,62vw,300px); }
  .him-linen figcaption{ display:none; }
  .him-shoes{ justify-self:center; }
  .him-shoes .duo-img img{ max-height:clamp(220px,58vw,290px); }
  .duo-card figcaption{ margin-top:12px; }
}
@media (max-width:460px){
  .look-grid, .look-grid.three{ grid-template-columns:1fr 1fr; gap:14px; }
  .fabric-study{ grid-template-columns:1fr 1fr; gap:14px; }
  .placard-floret{ width:90px; }
}