/* ============ Brittani Fagel — base: tokens, textures, paper, type ============ */
:root {
  --cream: #F6EDDD;
  --ivory: #FFFBF3;
  --fiber: #FFFDF8;
  --linen: #F1E6D2;
  --blush: #F2C9CF;
  --blush-2: #F9E6E7;
  --rose: #C97A8A;       /* decorative pink, large sizes only */
  --rose-ink: #9E4A5E;   /* pink for small text — readable on ivory */
  --burgundy: #5E1624;
  --velvet: #4A0F1B;
  --brown: #5A3B2A;
  --cocoa: #3B251B;
  --butter: #F3E3A8;
  --butter-2: #FAF2D6;
  --gold: #B08D57;
  --gold-lt: #E4D0A0;

  --f-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --f-body: "Jost", "Futura", "Avenir Next", "Helvetica Neue", sans-serif;

  --shadow-soft: drop-shadow(0 1px 1px rgba(59, 37, 27, .16)) drop-shadow(0 10px 14px rgba(59, 37, 27, .2));
  --shadow-lift: drop-shadow(0 2px 2px rgba(59, 37, 27, .14)) drop-shadow(0 22px 26px rgba(59, 37, 27, .3));
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* real photo textures (assets/) — swap the files to change the look */
  --img-velvet: url("../assets/velvet.jpg");
  --img-lace: url("../assets/lace-trim.webp");
  --img-pearl: url("../assets/pearl.webp");

  /* textures */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.14'/%3E%3C/svg%3E");
  --crush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .016' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
  --floral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M9 15q-4 1-5 5M15 15q4 1 5 5' stroke='%23A7A688' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='3.3' fill='%23D08E9B'/%3E%3Cpath d='M10.6 11.8q1.6-1.8 2.8.4' stroke='%23F9E6E7' stroke-width='.8' fill='none'/%3E%3Cpath d='M32 37q-3 1-4 4M36 37q3 1 4 4' stroke='%23A7A688' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='34' cy='34.5' r='2.5' fill='%23EAB9C1'/%3E%3Ccircle cx='36' cy='10' r='1' fill='%23E4D0A0'/%3E%3Ccircle cx='10' cy='36' r='1' fill='%23E4D0A0'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* hidden things stay hidden, whatever their own display style says */
html { scroll-behavior: smooth; color-scheme: light; }
body {
  margin: 0;
  color: var(--cocoa);
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  background-color: var(--cream);
  background-image:
    var(--grain),
    radial-gradient(circle, rgba(90, 59, 42, .78) 0 2.2px, transparent 2.8px),
    radial-gradient(circle, rgba(90, 59, 42, .78) 0 2.2px, transparent 2.8px);
  background-size: 180px 180px, 34px 34px, 34px 34px;
  background-position: 0 0, 0 0, 17px 17px;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 1.5px solid var(--burgundy); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--burgundy); color: var(--ivory); padding: 8px 14px; font-family: var(--f-body); }
.skip:focus { top: 12px; }

/* ---------- type roles ---------- */
.eyebrow {
  margin: 0;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rose-ink);
}
.hand { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.35; color: var(--brown); }

/* ---------- surfaces ---------- */
.paper { background-color: var(--ivory); background-image: var(--grain); }
.velvet {
  background-color: var(--velvet);
  background-image:
    linear-gradient(rgba(58, 8, 20, .3), rgba(58, 8, 20, .3)),
    var(--img-velvet),
    var(--grain);
  background-blend-mode: multiply, normal, overlay;
  background-size: auto, 1500px auto, 180px 180px;
  background-position: 0 0, center top, 0 0;
  color: var(--ivory);
}
.lift { filter: var(--shadow-soft); }

/* patterned papers */
.pat-stripe {
  background-color: var(--ivory);
  background-image: var(--grain),
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(201, 122, 138, .42) 10px 11px, transparent 11px 13px, rgba(201, 122, 138, .42) 13px 14px, transparent 14px 24px);
}
.pat-gingham {
  background-color: var(--ivory);
  background-image: var(--grain),
    repeating-linear-gradient(0deg, rgba(242, 201, 207, .55) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(90deg, rgba(242, 201, 207, .55) 0 6px, transparent 6px 12px);
}
.pat-swiss {
  background-color: var(--blush-2);
  background-image: var(--grain),
    radial-gradient(circle, rgba(94, 22, 36, .5) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(94, 22, 36, .5) 0 1px, transparent 1.5px);
  background-size: 180px 180px, 12px 12px, 12px 12px;
  background-position: 0 0, 0 0, 6px 6px;
}
.pat-floral { background-color: var(--ivory); background-image: var(--grain), var(--floral); background-size: 180px 180px, 46px 46px; }
.pat-laid {
  background-color: var(--butter-2);
  background-image: var(--grain), repeating-linear-gradient(90deg, rgba(90, 59, 42, .06) 0 1px, transparent 1px 5px);
}
.pat-blush { background-color: var(--blush); background-image: var(--grain); }

/* ripped paper: .torn is the white paper core, .face the printed layer (JS tears both) */
.torn { background-color: var(--fiber); background-image: var(--grain); }
.face { position: relative; height: 100%; }

/* real lace trim — straight edge up, eyelash scallops hanging down */
.lace {
  position: relative;
  z-index: 3;
  height: 96px;
  background: var(--img-lace) repeat-x top / auto 96px;
  filter: drop-shadow(0 2px 2px rgba(30, 10, 14, .3));
  pointer-events: none;
}
.lace--up { transform: scaleY(-1); }
/* burgundy lace under the top bar on every page */
.lace--burgundy { height: 100px; background: url("../assets/lace-burgundy.png") repeat-x top / auto 100px; filter: drop-shadow(0 3px 3px rgba(40, 10, 16, .25)); }
body > .lace { margin-bottom: -60px; }  /* header lace hangs over the page instead of pushing it down */

/* photo placeholders — swap each .ph for an <img> later */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  background-color: #EFDCD6;
  background-image: var(--grain), radial-gradient(ellipse at 50% 35%, #F7E9E5, #E6CFC7 75%, #D9BFB6);
  color: var(--brown);
  overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  max-width: 76%;
  padding: 8px 12px;
  border-top: 1px solid rgba(90, 59, 42, .35);
  border-bottom: 1px solid rgba(90, 59, 42, .35);
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .2em;
  line-height: 1.6;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}
.ph--tall { aspect-ratio: 3 / 4; }
.ph--portrait { aspect-ratio: 4 / 5; }
.ph--reel { aspect-ratio: 9 / 16; }

/* photo print with gold photo corners (JS adds the corners) */
.mount {
  position: relative;
  margin: 0;
  padding: 12px 12px 14px;
  background-color: var(--ivory);
  background-image: var(--grain);
  box-shadow: 0 1px 1px rgba(59, 37, 27, .14), 0 16px 26px -12px rgba(59, 37, 27, .42);
  transform: rotate(var(--r, 0deg));
}
.mount figcaption { padding-top: 10px; text-align: center; }
.pc {
  position: absolute;
  z-index: 4;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #D9C08A 0%, #9C7843 45%, #E7D3A3 60%, #8B6A3A 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  pointer-events: none;
}
.pc--tl { top: -5px; left: -5px; }
.pc--tr { top: -5px; right: -5px; transform: rotate(90deg); }
.pc--br { bottom: -5px; right: -5px; transform: rotate(180deg); }
.pc--bl { bottom: -5px; left: -5px; transform: rotate(270deg); }

/* velvet button */
.btn-velvet {
  position: relative;
  display: inline-block;
  padding: 16px 32px 15px;
  color: var(--ivory);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  background-color: var(--velvet);
  background-image: linear-gradient(180deg, rgba(255, 190, 205, .1), transparent 45%, rgba(0, 0, 0, .3)), var(--img-velvet), var(--grain);
  background-blend-mode: screen, normal, overlay;
  background-size: auto, 720px auto, 180px 180px;
  background-position: center;
  box-shadow: 0 10px 18px -8px rgba(59, 37, 27, .6);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-velvet::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(228, 208, 160, .6); pointer-events: none; }
.btn-velvet:hover { transform: translateY(-2px); box-shadow: 0 16px 24px -10px rgba(59, 37, 27, .7); }
.link-line {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--burgundy);
  padding: 6px 2px;
  background: linear-gradient(var(--burgundy), var(--burgundy)) left bottom / 100% 1px no-repeat;
  transition: background-size .35s var(--ease);
}
.link-line:hover { background-size: 30% 1px; }

/* wax seal — CSS fallback until the photo is dropped in */
.wax {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: #F0C2CB;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  background: radial-gradient(circle at 38% 32%, #9A2E43, #6A1526 55%, #43091A 100%);
  clip-path: polygon(50% 0, 62% 4%, 74% 2%, 82% 11%, 94% 16%, 96% 30%, 100% 44%, 96% 57%, 99% 70%, 90% 82%, 82% 93%, 68% 96%, 55% 100%, 42% 97%, 28% 99%, 17% 90%, 7% 80%, 3% 66%, 0 52%, 4% 38%, 2% 24%, 12% 13%, 24% 5%, 37% 3%);
}
.wax::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .45), inset -1px -1px 2px rgba(255, 160, 180, .35); }
.wax span { position: relative; text-shadow: -1px -1px 0 rgba(0, 0, 0, .45), 1px 1px 0 rgba(255, 170, 190, .35); }

/* photographic decorations — real cut-out photos in assets/ */
.photo-el { position: absolute; display: block; max-width: none; height: auto; pointer-events: none; }
.bow { filter: drop-shadow(0 8px 8px rgba(40, 10, 16, .35)); }
.lace-piece { filter: drop-shadow(0 3px 3px rgba(59, 37, 27, .22)); }
.kiss-print { mix-blend-mode: multiply; opacity: .9; }
.seal-img { filter: drop-shadow(0 4px 4px rgba(30, 5, 10, .35)); }
.pearls { position: absolute; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(59, 37, 27, .3)); }
.pearls svg { display: block; width: 100%; height: auto; overflow: visible; }

/* real photos dropped in through data.js */
.media { position: relative; display: block; overflow: hidden; }
.media img, .media video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- top bar ---------- */
.topbar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 22px clamp(16px, 4vw, 48px) 18px;
  background-color: var(--ivory);
  background-image: var(--grain);
}
.nav { display: flex; gap: clamp(14px, 2.4vw, 30px); }
.nav--right { justify-content: flex-end; }
.nav a {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cocoa);
  padding: 4px 0;
  background: linear-gradient(var(--rose), var(--rose)) left bottom / 0 1px no-repeat;
  transition: background-size .35s var(--ease);
}
.nav a:hover { background-size: 100% 1px; }
.wordmark {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--burgundy);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span { font-style: italic; }

/* ---------- section headings ---------- */
.section { max-width: 1240px; margin: 0 auto; padding: clamp(64px, 9vw, 110px) clamp(16px, 4vw, 48px) 0; }
.band { position: relative; margin-top: clamp(64px, 9vw, 110px); padding-bottom: clamp(110px, 11vw, 140px); }
.band > .section { padding-top: clamp(104px, 10vw, 130px); }
/* soft blush band for Shop the look, so it reads as its own section */
.band--blush {
  background-color: #F6DFE2;
  background-image: var(--grain), repeating-linear-gradient(90deg, rgba(201, 122, 138, .09) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 -30px 40px -30px rgba(94, 22, 36, .18);
}
.band--blush + .band { margin-top: 0; }
/* fine cream pinstripes for the portfolio, so it separates from the hero
   (burgundy by default; add "band--brown" for brown pinstripes) */
.band--stripe {
  --stripe: 94, 22, 36;
  background-color: var(--cream);
  background-image: var(--grain),
    repeating-linear-gradient(180deg, rgba(var(--stripe), .42) 0 1px, transparent 1px 6px);
  box-shadow: inset 0 -30px 40px -30px rgba(59, 37, 27, .2);
}
.band--stripe.band--brown { --stripe: 90, 59, 42; }
.band--stripe + .band { margin-top: 0; }
.lace--down { position: absolute; top: 0; left: 0; right: 0; }
.band > .lace--up { position: absolute; bottom: 0; left: 0; right: 0; }
.sec-head { display: grid; justify-items: start; gap: 16px; margin-bottom: 44px; }
.sec-strip { transform: rotate(-1deg); }
.sec-strip .face { display: grid; gap: 6px; padding: 22px 42px 22px 34px; }
.sec-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 74px);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--burgundy);
  text-wrap: balance;
}
.sec-title em { font-style: italic; font-weight: 400; color: var(--rose-ink); }
.sec-sub {
  margin: 0;
  max-width: 50ch;
  padding: 10px 16px;
  font-size: 16.5px;
  color: var(--cocoa);
  background-color: var(--ivory);
  background-image: var(--grain);
  box-shadow: 0 6px 12px -8px rgba(59, 37, 27, .35);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}