/* Dreamy Waters Designs */

:root {
  --paper:        #FBF8F1;
  --surface:      #FFFFFF;
  --mist:         #F4EFE3;
  --blush-mist:   #FAEEEE;
  --ink:          #38424E;
  --ink-soft:     #6E7887;
  --line:         #E5DECE;
  --line-soft:    #EFE9DC;
  --accent:       #A9C4D6;
  --accent-deep:  #446884;
  --blush:        #A96578;
  --blush-soft:   #D9A3AE;
  --gold:         #A07E3C;
  --gold-grad: linear-gradient(100deg,
                 #9C7734 0%, #C8A961 18%, #F0E2B6 34%,
                 #C2A057 52%, #91702F 70%, #D7BE84 88%, #A0803F 100%);
  --gold-grad-text: linear-gradient(100deg,
                 #86662A 0%, #A98840 20%, #B8964F 36%,
                 #9B7A36 54%, #7F6127 72%, #B08D4F 90%, #8A6A2C 100%);

  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body:    "Jost", "Avenir Next", "Segoe UI", sans-serif;
  --f-script:  "Parisienne", "Snell Roundhand", cursive;

  --wrap: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #191712;
    --surface:      #24211A;
    --mist:         #211E18;
    --blush-mist:   #241C1C;
    --ink:          #EDE8DC;
    --ink-soft:     #A8A294;
    --line:         #383327;
    --line-soft:    #2A261D;
    --accent:       #A9C4D6;
    --accent-deep:  #A6C6DC;
    --blush:        #E0A7B4;
    --blush-soft:   #C08B95;
    --gold:         #D8BC7E;
    --gold-grad: linear-gradient(100deg,
                   #B2924E 0%, #DCC489 18%, #F6ECC8 34%,
                   #D6B96F 52%, #A98B45 70%, #EBDAA6 88%, #BB9B55 100%);
    --gold-grad-text: linear-gradient(100deg,
                   #C9AC6B 0%, #E3D09A 20%, #F6ECC8 36%,
                   #DDC489 54%, #C4A55F 72%, #EFE0B4 90%, #CBAE6D 100%);
  }
}

:root[data-theme="dark"] {
  --paper:        #191712;
  --surface:      #24211A;
  --mist:         #211E18;
  --blush-mist:   #241C1C;
  --ink:          #EDE8DC;
  --ink-soft:     #A8A294;
  --line:         #383327;
  --line-soft:    #2A261D;
  --accent:       #A9C4D6;
  --accent-deep:  #A6C6DC;
  --blush:        #E0A7B4;
  --blush-soft:   #C08B95;
  --gold:         #D8BC7E;
  --gold-grad: linear-gradient(100deg,
                 #B2924E 0%, #DCC489 18%, #F6ECC8 34%,
                 #D6B96F 52%, #A98B45 70%, #EBDAA6 88%, #BB9B55 100%);
  --gold-grad-text: linear-gradient(100deg,
                 #C9AC6B 0%, #E3D09A 20%, #F6ECC8 36%,
                 #DDC489 54%, #C4A55F 72%, #EFE0B4 90%, #CBAE6D 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-deep); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--blush); }

:focus-visible { outline: 1px solid var(--accent-deep); outline-offset: 4px; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 300;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 3.55rem); line-height: 1.12; letter-spacing: -.015em; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.15rem); line-height: 1.2; letter-spacing: -.01em; }
h3 { font-size: 1.32rem; line-height: 1.3; }
h4 { font-size: 1.05rem; line-height: 1.4; font-family: var(--f-body); font-weight: 400; }

p { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 26px; }

.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.1em; }
.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 52ch; }

.script { font-family: var(--f-script); }

/* shimmering gold. This design has no divider rules, so gold now lives on
   the package prices and the small round list markers only. */

@keyframes shimmer { to { background-position: -200% 0; } }

.gold-text {
  background-image: var(--gold-grad-text);
  background-size: 200% 100%;
  color: var(--gold);
  animation: shimmer 14s linear infinite;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-text { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}

/* header */

.site-head { background: var(--paper); }
.head-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding-block: 20px 14px;
}

.brand { display: block; text-decoration: none; line-height: 0; }
.brand img { width: clamp(190px, 26vw, 256px); height: auto; }

.nav { display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; }
.nav a {
  font-size: .92rem; font-weight: 300; color: var(--ink-soft);
  text-decoration: none; padding: 6px 13px; white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav-cta { color: var(--accent-deep) !important; text-decoration: underline; }

/* buttons */

.btn {
  display: inline-block; font-family: var(--f-body); font-size: .95rem; font-weight: 400;
  text-decoration: none; padding: 12px 30px; border-radius: 2px;
  border: 1px solid var(--accent-deep); background: var(--accent-deep); color: var(--paper);
  transition: opacity .18s;
}
:root[data-theme="dark"] .btn, :root:not([data-theme="light"]) .btn { color: var(--paper); }
.btn:hover { opacity: .82; color: var(--paper); }
.btn-ghost { background: var(--surface); color: var(--accent-deep); border-color: var(--surface); }
.btn-ghost:hover { color: var(--accent-deep); opacity: .78; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

.arrow { font-size: .95rem; text-decoration: none; }
.arrow:hover { text-decoration: underline; }

/* sections */

section { padding-block: clamp(52px, 7.5vw, 92px); }
.band { background: var(--mist); }

.sec-head { max-width: 58ch; margin-bottom: 40px; display: flex; flex-direction: column; gap: 14px; }
.sec-head p { color: var(--ink-soft); }

/* hero */

.hero { padding-block: clamp(64px, 10vw, 120px) clamp(48px, 7vw, 84px); }
.hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.hero h1 { max-width: 15ch; }
.hero .lede { font-size: 1.18rem; max-width: 46ch; }

.page-head { padding-block: clamp(52px, 7vw, 90px) clamp(30px, 4vw, 48px); }
.page-head .inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

/* two offerings */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.offer { display: flex; flex-direction: column; gap: 14px; }
.offer > h2 { font-size: 1.32rem; line-height: 1.3; letter-spacing: 0; }
.offer p { color: var(--ink-soft); }
.offer a { margin-top: 4px; }

/* boxes. filled surfaces with a soft lift, never outlined,
   because every divider rule has been removed from this design. */

.box {
  background: var(--surface);
  border-radius: 5px;
  padding: 34px 32px;
  box-shadow: 0 1px 2px rgba(56,66,78,.05), 0 16px 34px -22px rgba(56,66,78,.30);
}
:root[data-theme="dark"] .box, :root:not([data-theme="light"]) .box {
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 16px 34px -22px rgba(0,0,0,.9);
}

/* real artwork in the galleries */

img.frame { padding: 0; aspect-ratio: 4 / 5; object-fit: cover; height: auto; border-radius: 4px; }

/* photographs that lose their subject when cropped to the 4:5 gallery box keep
   their own shape instead. --ar carries the file's real ratio; see the note on
   .collage img.frame for why `aspect-ratio: auto` must not be used on a lazy
   image. */
img.frame-natural { aspect-ratio: var(--ar, 4 / 5); object-fit: contain; }

/* fade sections in on scroll. Only applied once the script has run, so the
   page is never left parked at opacity 0 if JS fails or motion is reduced. */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}
.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .75s ease, transform .75s cubic-bezier(.22, .61, .36, 1);
}

/* the portfolio collage: natural heights, tiled into columns */

.collage { columns: 3; column-gap: 18px; }
.collage .piece { break-inside: avoid; margin: 0 0 18px; display: block; }
/* Collage images keep their own shape rather than the 4:5 gallery crop.
   The ratio comes from --ar, which piece() writes inline from the file's real
   pixel size. This is load-bearing, not cosmetic: `aspect-ratio: auto` was used
   here before, and on an unloaded lazy image it collapses the box to zero
   height, so the image never intersects the viewport, so it never loads, so it
   never gets a natural size. A deadlock, and the whole collage stayed blank.
   Never put `aspect-ratio: auto` on a lazy image. */
.collage img.frame {
  aspect-ratio: var(--ar, 4 / 5);
  object-fit: fill;
  width: 100%;
  height: auto;
}

/* single photographs placed through the invitations page */

.plates { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.plate { margin: 0; }
.plate img { width: 100%; height: auto; border-radius: 4px; }
.plate-single { max-width: 460px; margin-left: auto; }

/* a featured pair of photographs, shown whole rather than cropped */

.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.shot { margin: 0; }

.keepsake { grid-template-columns: 340px 1fr; gap: 48px; align-items: start; }
.keepsake .offer { padding-top: 6px; }
.shot img { width: 100%; height: auto; border-radius: 4px; }
.caption { margin-top: 20px; font-size: .92rem; color: var(--ink-soft); max-width: 66ch; }

/* the live painting clip */

.split-clip { grid-template-columns: 1.55fr 1fr; align-items: start; gap: 48px; }
.clip-stack { display: flex; flex-direction: column; gap: 26px; }
.clip { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.clip img { width: 100%; max-width: 320px; height: auto; border-radius: 4px; }
.clip video {
  width: 100%; max-width: 320px; height: auto; display: block;
  aspect-ratio: 9 / 16; object-fit: cover;
  background: var(--mist);
}
.clip figcaption { font-size: .88rem; color: var(--ink-soft); max-width: 320px; }

/* packages: columns divided by hairlines, not cards */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.tiers.two { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.tier {
  display: flex; flex-direction: column; gap: 16px;
}
.tier h3 { line-height: 1.2; }
.tier .price {
  font-family: var(--f-display); font-size: 1.78rem; font-weight: 300; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  background-image: var(--gold-grad-text); background-size: 200% 100%;
  color: var(--gold);
  animation: shimmer 14s linear infinite;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tier .price {
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.tier .price small { display: block; margin-top: 8px; font-family: var(--f-body); font-size: .82rem; color: var(--ink-soft); -webkit-text-fill-color: var(--ink-soft); }
.tier ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.tier li { font-size: .95rem; color: var(--ink-soft); padding-left: 16px; position: relative; }
.tier li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.tier .arrow { margin-top: auto; padding-top: 8px; }

.note { font-size: .95rem; color: var(--ink-soft); max-width: 64ch; }
.note strong { font-weight: 400; color: var(--ink); }

/* inquiry page */

.hb-embed { min-height: 200px; }
.hb-embed iframe { max-width: 100%; border: 0; }
.hb-fallback { margin-top: 22px; font-size: .92rem; color: var(--ink-soft); }

.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-list li { display: flex; flex-direction: column; gap: 2px; font-size: .97rem; color: var(--ink-soft); }
.contact-list li span { font-size: .84rem; color: var(--ink); }
.contact-list.plain li { padding-left: 16px; position: relative; }
.contact-list.plain li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* process */

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 56px; }
.steps li { display: flex; flex-direction: column; gap: 7px; }
/* Process steps are h3 (children of the section h2), sized down to what
   they were as h4 so nothing moved on the page. */
.steps h3 { font-size: 1.05rem; line-height: 1.4; font-family: var(--f-body);
            font-weight: 400; letter-spacing: 0; }
.steps .n { font-family: var(--f-display); font-size: .92rem; color: var(--accent); }
.steps p { color: var(--ink-soft); font-size: .96rem; }

/* lead times, as boxes rather than a ruled table */

.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 760px; }
.fact h3 { margin-bottom: 18px; }
.fact dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.fact dt { font-size: .84rem; color: var(--ink-soft); }
.fact dd {
  margin: 0; font-family: var(--f-display); font-size: 1.2rem; font-weight: 300;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

/* portfolio */

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 34px; }
.piece { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.frame {
  aspect-ratio: 4 / 5; max-width: 100%;
  background:
    radial-gradient(70% 60% at 35% 28%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%),
    radial-gradient(60% 55% at 78% 76%, color-mix(in srgb, var(--blush-soft) 24%, transparent), transparent 72%),
    radial-gradient(50% 50% at 62% 20%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%),
    var(--paper);
  display: grid; place-items: center; padding: 22px; text-align: center;
}
.frame span { font-size: .84rem; color: var(--ink-soft); opacity: .7; }
.piece figcaption { display: flex; flex-direction: column; gap: 2px; }
.piece .names { font-family: var(--f-script); font-size: 1.62rem; line-height: 1.15; color: var(--ink); }
.piece .what { font-size: .88rem; color: var(--ink-soft); }

/* reviews: one horizontal strip, repeated at the foot of every page.
   The track runs edge to edge so a part-visible card signals there is more. */

.reviews {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* keep the snap from swallowing the gutter that aligns cards with the heading */
  scroll-padding-inline: max(26px, calc((100vw - var(--wrap)) / 2 + 26px));
  padding-block: 6px 26px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  -webkit-overflow-scrolling: touch;
}
.reviews:focus-visible { outline-offset: -3px; }

.reviews-track {
  display: flex;
  gap: 20px;
  align-items: stretch;
  width: max-content;
  padding-inline: max(26px, calc((100vw - var(--wrap)) / 2 + 26px));
}

.review {
  flex: 0 0 clamp(268px, 74vw, 366px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 28px;
}
.review .stars {
  font-size: .95rem;
  letter-spacing: .14em;
  line-height: 1;
  color: var(--gold);
}
.review p { font-size: .97rem; line-height: 1.68; color: var(--ink); }
.review figcaption {
  margin-top: auto;
  font-size: .88rem;
  color: var(--blush);
  letter-spacing: .02em;
}
.review .src { color: var(--ink-soft); }

.reviews::-webkit-scrollbar { height: 8px; }
.reviews::-webkit-scrollbar-track { background: transparent; }
.reviews::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; }

/* faq */

.faq { max-width: 68ch; display: flex; flex-direction: column; gap: 12px; }
.faq details { padding: 4px 26px; }
.faq summary {
  cursor: pointer; list-style: none; padding-block: 22px;
  font-family: var(--f-display); font-weight: 300; font-size: 1.14rem;
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-family: var(--f-body); font-size: 1.15rem; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { padding-bottom: 22px; color: var(--ink-soft); font-size: .97rem; max-width: 62ch; }

/* cta */

.cta-block { display: flex; flex-direction: column; gap: 20px; max-width: 46ch; }

/* footer */

.site-foot { padding-block: 52px 34px; font-size: .94rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; }
/* The footer columns are h2 so the heading outline never skips a level.
   They are sized here, not by their tag. */
.foot-grid h2 { font-family: var(--f-display); font-weight: 300; font-size: 1.08rem;
                line-height: 1.4; letter-spacing: 0; margin-bottom: 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.foot-grid a { color: var(--ink-soft); text-decoration: none; }
.foot-grid a:hover { color: var(--accent-deep); text-decoration: underline; }
.foot-brand p { color: var(--ink-soft); max-width: 36ch; }
.foot-bottom {
  margin-top: 40px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
  color: var(--ink-soft); font-size: .86rem;
}

/* responsive */

@media (max-width: 900px) {
  .split, .foot-grid, .steps, .split-clip, .facts, .showcase, .keepsake, .plates { grid-template-columns: 1fr; }
  .collage { columns: 2; }
  .keepsake .piece { max-width: 340px; }
  .split { gap: 42px; }
  .tiers, .tiers.two { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
}

@media (max-width: 760px) {
  .nav { gap: 0; }
  .nav a { padding: 6px 10px; font-size: .87rem; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .collage { columns: 2; column-gap: 12px; }
  .collage .piece { margin-bottom: 12px; }
  .plate-single { max-width: 100%; margin-left: 0; }
  .gallery { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }