/* =========================================================
   RSquare Photography — editorial / documentary redesign
   Type system modeled on Summer St. Films:
     · Playfair Display  → display headings (roman + italic mixed)
     · Newsreader        → serif body copy, narrow measure
     · Inter             → nav, eyebrows, UI micro-type
   Palette: cream #faf9f5 alternating with near-black, deep red accent #A62A24
   ========================================================= */

:root{
  --cream:#faf9f5;
  --cream-alt:#f3f0e8;
  --black:#100f0d;
  --black-soft:#1b1a17;
  --ink:#22201c;
  --ink-soft:#4d4840;
  --rust:#A62A24;
  --rust-light:#CE6D64;
  /* 深色底上的强调色 —— 不用红，改暖灰白（对比度 10.9:1）。
     深正红只留给浅色区块，稀缺反而更有分量。 */
  --accent-dark:#C9C5BC;
  --line:#ded7c8;
  --line-dark:rgba(250,249,245,.18);

  --display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --body:'Newsreader', Georgia, 'Times New Roman', serif;
  --ui:'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --measure:540px;      /* narrow narrative column */
  --maxw:1180px;
  --gut:6vw;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  font-weight:400;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}
.measure{max-width:var(--measure);margin-left:auto;margin-right:auto;}
.center{text-align:center;}

/* ---------------- Typography ---------------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;color:inherit;}

/* Stacked display lines — mix roman caps with italic lowercase */
.display{
  font-family:var(--display);
  font-weight:400;
  line-height:1.12;
  letter-spacing:.005em;
}
.display .roman{text-transform:uppercase;letter-spacing:.02em;}
.display .ital{font-style:italic;text-transform:none;letter-spacing:0;}
.d-xl{font-size:clamp(2.5rem,5.6vw,4.4rem);}
.d-lg{font-size:clamp(2rem,4.4vw,3.4rem);}
.d-md{font-size:clamp(1.5rem,3vw,2.2rem);}
/* 单行大字：字号跟视口走，保证三个词永远在同一行 */
.d-line{
  font-size:clamp(.95rem,4.4vw,2.6rem);
  white-space:nowrap;
  letter-spacing:.045em;
}

/* Small italic serif eyebrow with wide tracking (Summer St signature) */
.eyebrow{
  display:block;
  font-family:var(--body);
  font-style:italic;
  font-size:.88rem;
  letter-spacing:.24em;
  color:var(--rust);
  margin-bottom:1.6em;
  line-height:1.6;
}
.eyebrow-light{color:var(--accent-dark);}

/* The accent-coloured, all-caps, centered two-line statement */
.statement{
  font-family:var(--display);
  font-size:clamp(1.25rem,2.3vw,1.65rem);
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.35;
  color:var(--rust);
  text-align:center;
  margin:0 auto 1.8em;
  max-width:34ch;   /* honours the manual <br> breaks without re-wrapping */
  text-wrap:balance;
}
.statement-light{color:var(--accent-dark);}

p{margin:0 0 1.35em;}
.narrative p{
  font-size:1.02rem;
  line-height:1.9;
  color:var(--ink);
}
.narrative.on-dark p{color:rgba(250,249,245,.82);}
.lede{font-size:1.1rem;line-height:1.85;}
.small{font-size:.92rem;color:var(--ink-soft);}
em,.ital{font-style:italic;}

/* Underlined small-caps accent link (primary CTA) */
.link-rule{
  display:inline-block;
  font-family:var(--ui);
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--rust);
  padding:0 .3em .9em;
  position:relative;
}
.link-rule::after{
  content:'';position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--rust);transition:opacity .35s;
}
.link-rule:hover::after{opacity:.4;}
.link-rule.on-dark{color:var(--accent-dark);}
.link-rule.on-dark::after{background:var(--accent-dark);}

/* ---------------- Header / Nav ---------------- */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:60;
  padding:2.1em 0;
  transition:background .4s, padding .4s;
}
.site-header.is-solid{
  position:fixed;background:var(--cream);
  padding:1.05em 0;border-bottom:1px solid var(--line);
}
/* 顶栏不跟随 --maxw 居中：logo 贴左、导航贴右，只留一点边距。
   想再往外推就把 3.2vw 调大／clamp 的两端调小。 */
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;margin:0;
  padding:0 clamp(1.3rem,3.2vw,3.2rem);
}
.logo{
  font-family:var(--display);
  font-size:1.28rem;letter-spacing:.02em;
  color:var(--cream);white-space:nowrap;
}
.is-solid .logo{color:var(--ink);}
.main-nav{display:flex;gap:2.1em;align-items:center;}
.main-nav a{
  font-family:var(--ui);
  font-size:.71rem;font-weight:400;
  letter-spacing:.06em;
  color:var(--cream);
  padding-bottom:.25em;
  border-bottom:1px solid transparent;
  transition:border-color .3s,color .3s;
}
.is-solid .main-nav a{color:var(--ink);}
.main-nav a:hover,.main-nav a.active{border-color:currentColor;}
.nav-toggle{
  display:none;background:none;border:0;color:var(--cream);
  font-size:1.4rem;cursor:pointer;line-height:1;padding:.2em;
}
.is-solid .nav-toggle{color:var(--ink);}

@media (max-width:940px){
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:80vw;max-width:340px;
    background:var(--cream);flex-direction:column;
    align-items:flex-start;justify-content:center;gap:1.5em;
    padding:3em;transform:translateX(100%);
    transition:transform .45s cubic-bezier(.4,0,.2,1);
    box-shadow:-20px 0 60px rgba(0,0,0,.08);
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a,.is-solid .main-nav a{color:var(--ink);font-size:.85rem;letter-spacing:.14em;}
  .nav-toggle{display:block;}
}

/* ---------------- Sections & panels ---------------- */
section{padding:7.5em 0;}
.pad-sm{padding:4.5em 0;}
.pad-lg{padding:10em 0;}
.panel-dark{background:var(--black);color:var(--cream);}
.panel-dark h1,.panel-dark h2,.panel-dark h3{color:var(--cream);}
.panel-alt{background:var(--cream-alt);}

/* Typographic hero — dark, centered, no photo (Summer St home) */
.hero-type{
  background:var(--black);color:var(--cream);
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:9em var(--gut) 6em;
  position:relative;
}
.hero-type .display{color:var(--cream);}
.hero-type .eyebrow{color:var(--cream);margin-bottom:1.2em;}
/* HOME-01 首屏按钮 —— 与站内其它按钮同款：Inter 小号大写 + 一条下划线。
   区别只是首屏是黑底，所以用米白而不是深正红。 */
.btn-hero{
  display:inline-block;margin-top:2.6em;
  font-family:var(--ui);font-size:.68rem;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--cream);
  padding:0 .3em .9em;
  position:relative;
}
.btn-hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--cream);transition:opacity .35s;
}
.btn-hero:hover::after{opacity:.4;}
.hero-note{
  font-family:var(--ui);font-size:.66rem;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(250,249,245,.5);
  margin-top:2.8em;
}

/* Photo hero for inner pages */
.hero-photo{
  position:relative;min-height:78vh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background-size:cover;background-position:center;color:var(--cream);
  padding:9em var(--gut) 5em;
}
.hero-photo::after{content:'';position:absolute;inset:0;background:rgba(16,15,13,.46);}
.hero-photo-inner{position:relative;z-index:2;max-width:800px;}
.hero-photo .display{color:var(--cream);}
.hero-photo .eyebrow{color:var(--accent-dark);}

/* Full-bleed staggered image strip (their signature row) */
.strip{
  display:flex;gap:22px;
  padding:0 22px;
  overflow-x:auto;
  scrollbar-width:none;
  align-items:flex-start;
}
.strip::-webkit-scrollbar{display:none;}
.strip img{
  flex:0 0 auto;
  width:clamp(150px,17vw,215px);
  height:clamp(210px,24vw,300px);
  object-fit:cover;
}
.strip img:nth-child(even){margin-top:34px;}

/* Full-bleed single image */
.bleed{width:100%;height:clamp(320px,62vh,640px);object-fit:cover;}

/* Even grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:820px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr;}}
.grid-3 img,.grid-2 img,.grid-4 img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;}

/* Split: image + narrow copy */
.split{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;}
.split-copy{max-width:460px;}
@media (max-width:880px){
  .split{grid-template-columns:1fr;gap:2.4em;}
  .split.reverse .split-media{order:-1;}
}

/* ═══ HOME-06 · 照片底 CTA（原深色区块） ═══ */
.cta-photo{
  position:relative;
  background:url('images/home-cta.webp') center/cover no-repeat;
  padding:4.5em var(--gut);
  overflow:hidden;
}
/* 浅浅一层白罩染：中心 58% → 边缘 30%。想更淡就把这三个数一起调小。 */
.cta-photo::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 75% 125% at 50% 50%,
      rgba(250,249,245,.58) 0%,
      rgba(250,249,245,.46) 50%,
      rgba(250,249,245,.30) 100%);
}
.cta-photo > *{position:relative;z-index:2;}
.cta-photo .cta-line{
  font-family:var(--display);font-style:italic;font-weight:400;
  text-transform:none;
  font-size:clamp(1.7rem,3.6vw,2.7rem);
  line-height:1.2;color:var(--rust);margin:0;
}
.cta-photo .link-rule{color:var(--rust);}
.cta-photo .link-rule::after{background:var(--rust);}

/* ═══ HOME-07 · 自我介绍：黑底白字 ═══ */
.about-dark{background:var(--black);}
.about-dark .split-copy .eyebrow{color:var(--accent-dark);}
.about-dark .display{color:var(--cream);}
.about-dark .narrative p{color:rgba(250,249,245,.84);}
.about-dark .link-rule{color:var(--accent-dark);}
.about-dark .link-rule::after{background:var(--accent-dark);}

/* "More to Explore" link row */
.explore{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border-top:1px solid var(--line);
}
.explore a{
  padding:2.6em 1em;text-align:center;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-family:var(--display);font-size:1.2rem;
  transition:background .35s,color .35s;
}
.explore a:last-child{border-right:none;}
.explore a:hover{background:var(--black);color:var(--cream);}
.explore a .idx{
  display:block;font-family:var(--ui);font-size:.6rem;
  letter-spacing:.28em;color:var(--rust);margin-bottom:.7em;
}
@media (max-width:760px){
  .explore{grid-template-columns:repeat(2,1fr);}
  .explore a:nth-child(2n){border-right:none;}
}

/* Featured / named stories */
.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4em 1.6em;}
@media (max-width:820px){.featured-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.featured-grid{grid-template-columns:1fr;}}
.featured-item img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:opacity .4s;}
.featured-item:hover img{opacity:.82;}
.featured-item h3{
  font-family:var(--display);font-size:1.05rem;text-transform:uppercase;
  letter-spacing:.12em;margin-top:1em;text-align:center;
}
.featured-item .meta{
  display:block;text-align:center;font-family:var(--ui);
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rust);margin-top:.5em;
}

/* Numbered values list */
.values{max-width:640px;margin:0 auto;}
.values li{
  display:grid;grid-template-columns:3ch 1fr;gap:1.6em;
  padding:1.7em 0;border-top:1px solid var(--line);
  font-size:1rem;line-height:1.8;
}
.values li:last-child{border-bottom:1px solid var(--line);}
.values .n{font-family:var(--display);font-style:italic;color:var(--rust);font-size:1.15rem;}
.panel-dark .values li{border-color:var(--line-dark);color:rgba(250,249,245,.82);}
.panel-dark .values .n{color:var(--accent-dark);}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.6em 2.2em;}
@media (max-width:780px){.price-grid{grid-template-columns:1fr;}}
.price-card img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:1.5em;}
.price-card h3{
  font-family:var(--display);font-size:1.35rem;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.15em;
}
.price-card .price{
  display:block;font-family:var(--display);font-style:italic;
  color:var(--rust);font-size:1.15rem;margin-bottom:1.1em;
}
.price-card ul li{
  font-size:.95rem;padding:.45em 0;color:var(--ink-soft);
  border-top:1px solid var(--line);
}
.price-card ul li:first-child{border-top:none;}

/* FAQ */
.faq-group + .faq-group{margin-top:3.4em;}
.faq-group > h3{
  font-family:var(--ui);font-size:.64rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--rust);margin-bottom:.9em;
}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer;list-style:none;padding:1.15em 0;
  font-family:var(--display);font-size:1.12rem;line-height:1.5;
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5em;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';color:var(--rust);font-size:1.2rem;flex-shrink:0;}
.faq-item[open] summary::after{content:'\2013';}
.faq-item .faq-a{padding:0 0 1.5em;font-size:.98rem;color:var(--ink-soft);max-width:64ch;}
.faq-a a{color:var(--rust);border-bottom:1px solid var(--line);}

/* Testimonial */
.kind-words{text-align:center;}
.kind-words blockquote{
  margin:0 auto;max-width:760px;
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.6;
}
.kind-words .attr{
  display:block;margin-top:2em;font-family:var(--ui);
  font-size:.65rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent-dark);
}
.kind-words .eyebrow{color:var(--accent-dark);}

/* HOME-09 轮播：所有引言叠在同一个网格单元里，高度自动取最高的一条，
   靠 opacity 淡入淡出，不会有跳动。 */
.kw-stage{display:grid;}
.kw-item{
  grid-area:1/1;margin:0;
  opacity:0;pointer-events:none;
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1);
}
.kw-item.is-active{opacity:1;pointer-events:auto;}
.kw-ctx{
  display:block;margin-top:.7em;font-family:var(--ui);
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(250,249,245,.42);
}
.kw-dots{display:flex;justify-content:center;gap:.75em;margin-top:3em;}
.kw-dots button{
  width:6px;height:6px;padding:0;border:none;border-radius:50%;
  background:rgba(250,249,245,.28);cursor:pointer;
  transition:background .35s;
}
.kw-dots button.is-active{background:var(--accent-dark);}
.kw-source{
  display:block;margin-top:2.6em;font-family:var(--ui);
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(250,249,245,.4);
}
.kw-source a{color:rgba(250,249,245,.4);border-bottom:1px solid rgba(250,249,245,.25);}
.kw-source a:hover{color:var(--accent-dark);}

/* Contact form */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:6vw;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:3em;}}
.contact-info h4{
  font-family:var(--ui);font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--rust);margin:2.2em 0 .5em;
}
.contact-info h4:first-of-type{margin-top:1.6em;}
.contact-info a{border-bottom:1px solid var(--line);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.6em;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:1.5em;}
.field label{
  display:block;font-family:var(--ui);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.6em;
}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--line);
  padding:.6em 0;font-family:var(--body);font-size:1rem;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--rust);
}
.field textarea{resize:vertical;min-height:96px;}
.btn-submit{
  background:var(--black);color:var(--cream);border:0;cursor:pointer;
  font-family:var(--ui);font-size:.66rem;letter-spacing:.3em;
  text-transform:uppercase;padding:1.25em 3.4em;transition:background .35s;
}
.btn-submit:hover{background:var(--rust);}

/* Sticky sub-nav */
.jump-nav{
  position:sticky;top:0;z-index:50;
  background:var(--cream);border-bottom:1px solid var(--line);
}
.jump-nav ul{display:flex;justify-content:center;flex-wrap:wrap;gap:2.4em;padding:1.15em var(--gut);}
.jump-nav a{
  font-family:var(--ui);font-size:.65rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-soft);
}
.jump-nav a:hover{color:var(--rust);}

/* Footer */
.site-footer{background:var(--black);color:rgba(250,249,245,.7);padding:6em 0 2.4em;text-align:center;}
.site-footer .logo{color:var(--cream);font-size:1.9rem;display:block;margin-bottom:.5em;}
.footer-tag{
  font-family:var(--ui);font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent-dark);margin-bottom:3em;
}
.footer-meta{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1em;
  padding-top:2.4em;font-family:var(--ui);font-size:.65rem;
  letter-spacing:.08em;color:rgba(250,249,245,.42);
}
@media (max-width:640px){.footer-meta{justify-content:center;text-align:center;}}

/* Rules & spacing helpers */
.rule{width:1px;height:64px;background:var(--line);margin:0 auto 2.4em;}
.panel-dark .rule{background:var(--line-dark);}
.mt-2{margin-top:2em;}
.mt-3{margin-top:3em;}
.mb-0{margin-bottom:0;}

/* =========================================================
   PORTFOLIO PAGE — layout modelled on jonathanhicksjr.com/portfolio
   (giant overlapping wordmark, highlights band, story cards,
    feature slide, dark image CTA). Type stays Playfair/Newsreader/Inter.
   ========================================================= */

/* --- Giant wordmark hero with image behind the type --- */
.pf-hero{
  position:relative;background:var(--black);color:var(--cream);
  padding:11em var(--gut) 5em;overflow:hidden;
}
.pf-hero-stage{
  position:relative;max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
}
.pf-wordmark{
  position:absolute;top:0;left:0;right:0;
  text-align:center;z-index:3;pointer-events:none;
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.5rem,9.2vw,7.2rem);   /* 缩小：原 3.4–10.5rem */
  line-height:.9;
  letter-spacing:.02em;              /* 与首页 .display .roman 一致 */
  color:var(--rust);                 /* 深正红 */
  text-transform:uppercase;
}

/* PF-01 首屏幻灯片 —— 无罩染，照片原样。每张停 2 秒。 */
.pf-slides{
  position:relative;z-index:2;
  width:clamp(300px,40vw,560px);     /* 再放大一档 */
  aspect-ratio:3/4;
  margin-top:clamp(3rem,8vw,6.4rem);  /* 往下压，和大字几乎不再重叠 */
}
.pf-slide{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .55s cubic-bezier(.4,0,.2,1);
}
.pf-slide.is-active{opacity:1;}

/* PF-01 三个分类入口 —— 大字目录式：左对齐堆叠，整行可点。
   深色底上用米白；hover 时整行反白，这时才出现深正红编号
   （深正红在米色底上 6.69:1，在黑底上只有 2.72:1，所以只在反白后用）。 */
.pf-cats{
  position:relative;z-index:4;
  max-width:760px;margin:3.6em auto 0;
  border-top:1px solid rgba(250,249,245,.18);
}
.pf-cats a{
  display:flex;align-items:baseline;
  gap:1.4em;padding:1.15em clamp(1rem,4vw,2.4rem);
  border-bottom:1px solid rgba(250,249,245,.18);
  color:var(--cream);
  transition:background .35s,color .35s,padding-left .35s;
}
.pf-cats a:hover{
  background:var(--cream);color:var(--black);
  padding-left:clamp(1.6rem,5.5vw,3.4rem);
}
.pf-cats .n{
  flex:0 0 2.2em;
  font-family:var(--ui);font-size:.6rem;letter-spacing:.26em;
  color:var(--accent-dark);
  transition:color .35s;
}
.pf-cats a:hover .n{color:var(--rust);}
.pf-cats .t{
  font-family:var(--display);
  font-size:clamp(1.15rem,2.6vw,1.75rem);
  text-transform:uppercase;letter-spacing:.05em;
}

@media (max-width:720px){
  .pf-slides{width:74vw;margin-top:clamp(2.4rem,11vw,4rem);}
  .pf-cats{margin-top:2.6em;}
}

/* --- Big roman/italic statement (dark) --- */
.pf-statement{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.7rem,4.4vw,3.2rem);
  line-height:1.22;text-align:center;color:var(--cream);
  max-width:18ch;margin:0 auto;
}
.pf-statement .ital{font-style:italic;}
.pf-sub{
  text-align:center;max-width:44ch;margin:2.2em auto 0;
  color:rgba(250,249,245,.6);font-size:.98rem;line-height:1.9;
}

/* --- Full-bleed highlights band --- */
.pf-band{
  position:relative;width:100%;
  height:clamp(360px,74vh,700px);
  background-size:cover;background-position:center;
}
/* 罩染：.28 → .12。只压一个小标签，可以很淡。 */
.pf-band::after{content:'';position:absolute;inset:0;background:rgba(16,15,13,.12);}
/* 罩染减弱后，用一层柔和阴影保住可读性（不是描边，看不出来） */
.pf-band-label,
.pf-feature-inner,
.pf-cta-inner,
.pf-cta-note{text-shadow:0 1px 20px rgba(16,15,13,.6), 0 0 4px rgba(16,15,13,.35);}
.pf-band-label{
  position:absolute;z-index:2;left:var(--gut);bottom:2.4em;
  font-family:var(--ui);font-size:.66rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--cream);
}

/* --- Category label (centred, small caps) --- */
.pf-label{
  display:block;text-align:center;
  font-family:var(--ui);font-size:.68rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:3.4em;
}
.pf-label.on-dark{color:rgba(250,249,245,.65);}

/* --- Two-column large gallery --- */
.pf-duo{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,3.4vw,56px);
  max-width:1060px;margin:0 auto;
}
.pf-duo img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.pf-duo .tall{aspect-ratio:2/3;}
@media (max-width:640px){.pf-duo{grid-template-columns:1fr;}}

/* --- Named story cards (location + title) --- */
.pf-stories{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.6vw,40px);
}
@media (max-width:860px){.pf-stories{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.pf-stories{grid-template-columns:1fr;}}
.pf-story img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:opacity .4s;}
.pf-story:hover img{opacity:.85;}
.pf-story .loc{
  display:block;margin-top:1.4em;
  font-family:var(--ui);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rust);
}
.pf-story .name{
  display:block;margin-top:.45em;
  font-family:var(--display);font-size:1.28rem;line-height:1.35;color:var(--ink);
}

/* --- PF-04 / PF-06 / PF-08 作品网格：三列小图 ＋ 图下三行说明 --- */
.pf-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3.4vw,52px) clamp(18px,2.4vw,36px);
  max-width:1060px;margin:0 auto;
}
@media (max-width:860px){.pf-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.pf-grid{grid-template-columns:1fr;}}
.pf-cell{display:block;margin:0;}
.pf-cell img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:opacity .4s;}
.pf-cell:hover img{opacity:.86;}
.pf-cell figcaption{margin-top:1.15em;text-align:center;}
.pf-cell .loc{
  display:block;font-family:var(--ui);font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--rust);
}
.pf-cell .who{
  display:block;margin-top:.5em;
  font-family:var(--display);font-size:1.02rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
.pf-cell .desc{
  display:block;margin-top:.35em;
  font-family:var(--body);font-style:italic;
  font-size:.9rem;line-height:1.5;color:var(--ink-soft);
}
.panel-alt .pf-cell .who{color:var(--ink);}

/* --- 瀑布流相册（Highlights 页 + 各场婚礼的完整相册共用） ---
   默认用 CSS columns（没有 JS 时的样子）；main.js 会把它改造成
   .is-rows —— 弹性分列，照片按"从左到右"依次落位，而不是一列到底。 */
.masonry{
  columns:3;
  column-gap:clamp(8px,1vw,14px);
  max-width:1440px;margin:0 auto;
}
@media (max-width:900px){.masonry{columns:2;}}
@media (max-width:560px){.masonry{columns:1;}}
.masonry img{
  width:100%;height:auto;display:block;   /* height:auto 让 HTML 里的 width/height 变成宽高比占位 */
  margin-bottom:clamp(8px,1vw,14px);
  break-inside:avoid;
  transition:opacity .4s;
}
.masonry img:hover{opacity:.88;}

/* JS 接管后：真正的横向阅读顺序 */
.masonry.is-rows{
  columns:auto;
  display:flex;
  gap:clamp(8px,1vw,14px);
  align-items:flex-start;
}
.masonry.is-rows .mcol{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;
  gap:clamp(8px,1vw,14px);
}
.masonry.is-rows img{margin-bottom:0;}

/* Highlights 首屏：和 Portfolio 同一套大字，只是没有照片 */
.hl-hero{
  background:var(--black);color:var(--cream);
  padding:11em var(--gut) 4.5em;text-align:center;
}
.hl-hero .pf-wordmark{position:static;}
.hl-hero .lede{
  max-width:520px;margin:2.2em auto 0;
  font-family:var(--body);font-size:1rem;line-height:1.75;
  color:rgba(250,249,245,.8);
}

/* --- Full-bleed feature slide with italic title over image --- */
.pf-feature{
  position:relative;width:100%;
  min-height:clamp(420px,82vh,760px);
  display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;
  text-align:center;padding:5em var(--gut);
}
/* 罩染：.34 → .20 */
.pf-feature::after{content:'';position:absolute;inset:0;background:rgba(16,15,13,.20);}
.pf-feature-inner{position:relative;z-index:2;max-width:640px;}
.pf-feature h2{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(2rem,5.6vw,4rem);line-height:1.1;color:var(--cream);
}
.pf-feature p{
  color:rgba(250,249,245,.88);margin:1.2em auto 1.6em;max-width:38ch;
}

/* --- Dark image CTA --- */
.pf-cta{
  position:relative;width:100%;
  min-height:clamp(460px,88vh,780px);
  display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;
  text-align:center;padding:6em var(--gut);
}
/* 罩染：.60 → .40。这块字最多，不敢再淡。 */
.pf-cta::after{content:'';position:absolute;inset:0;background:rgba(16,15,13,.40);}
.pf-cta-inner{position:relative;z-index:2;max-width:620px;}
.pf-cta h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.15;color:var(--cream);
}
.pf-cta p{color:rgba(250,249,245,.78);margin:1.4em 0 1.8em;}
.pf-cta-note{
  position:absolute;z-index:2;left:var(--gut);bottom:2.4em;
  max-width:42ch;text-align:left;
  font-size:.9rem;color:rgba(250,249,245,.7);
}
@media (max-width:720px){.pf-cta-note{position:static;margin:2.6em auto 0;text-align:center;}}

/* =========================================================
   COUPLE STORIES — blog index + article
   Structure modelled on summerstfilms.com/blogposts
   (soft sage hero, 3-up card grid with centred serif titles)
   ========================================================= */

:root{
  --sage:#dcdfd4;
  --sage-deep:#cdd2c2;
  --sage-ink:#4a5043;
}

/* --- Sage hero panel --- */
.cs-hero{
  background:var(--sage);
  min-height:66vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:11em var(--gut) 7em;
}
.cs-hero h1{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(2.6rem,7vw,5rem);line-height:1.05;
  color:var(--cream);
  margin:0;
}
.cs-hero .cs-sub{
  font-family:var(--body);font-style:italic;
  font-size:1rem;letter-spacing:.06em;
  color:rgba(74,80,67,.72);
  margin-top:1.6em;
}

/* --- Post card grid --- */
.cs-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(3em,6vw,6.5em) clamp(20px,3vw,48px);
  max-width:1120px;margin:0 auto;
}
@media (max-width:860px){.cs-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cs-grid{grid-template-columns:1fr;}}

.cs-card{display:block;text-align:center;}
.cs-card img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:opacity .4s ease;
}
.cs-card:hover img{opacity:.85;}
.cs-card h2{
  font-family:var(--display);font-weight:400;
  font-size:1.12rem;line-height:1.5;
  color:var(--ink);margin:1.5em auto 0;max-width:26ch;
  transition:color .3s;
}
.cs-card:hover h2{color:var(--rust);}
.cs-card .cs-meta{
  display:block;margin-top:.7em;
  font-family:var(--ui);font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rust);
}

/* --- Article (single post) --- */
.cs-article-hero{
  width:100%;height:clamp(340px,72vh,680px);object-fit:cover;
}
.cs-article-head{text-align:center;max-width:760px;margin:0 auto;}
.cs-article-head .cs-loc{
  display:block;font-family:var(--ui);font-size:.63rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--rust);
  margin-bottom:1.4em;
}
.cs-article-head h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.2;
}
.cs-article-head .cs-date{
  display:block;margin-top:1.4em;
  font-family:var(--body);font-style:italic;font-size:.92rem;color:var(--ink-soft);
}
.cs-body{max-width:600px;margin:0 auto;}
.cs-body p{font-size:1.04rem;line-height:1.95;}
.cs-body h2{
  font-family:var(--display);font-size:1.5rem;
  margin:2.4em 0 .6em;color:var(--ink);
}
.cs-figure{margin:3.4em auto;}
.cs-figure img{width:100%;object-fit:cover;}
.cs-figure figcaption{
  text-align:center;margin-top:1em;
  font-family:var(--body);font-style:italic;font-size:.9rem;color:var(--ink-soft);
}
.cs-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);}
.cs-duo img{aspect-ratio:3/4;}
@media (max-width:600px){.cs-duo{grid-template-columns:1fr;}}

.cs-quote{
  max-width:640px;margin:3.6em auto;text-align:center;
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,2.6vw,1.8rem);line-height:1.55;color:var(--ink);
}
.cs-quote .who{
  display:block;margin-top:1.4em;
  font-family:var(--ui);font-style:normal;font-size:.63rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--rust);
}

/* Vendor credits */
.cs-credits{
  max-width:600px;margin:0 auto;
  border-top:1px solid var(--line);padding-top:2em;
}
.cs-credits h3{
  font-family:var(--ui);font-size:.63rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--rust);margin-bottom:1.2em;
}
.cs-credits li{
  display:flex;justify-content:space-between;gap:2em;
  padding:.55em 0;border-bottom:1px dotted var(--line);
  font-size:.94rem;
}
.cs-credits li span:first-child{color:var(--ink-soft);}

/* Post navigation */
.cs-postnav{
  display:flex;justify-content:space-between;gap:2em;flex-wrap:wrap;
  max-width:900px;margin:0 auto;
}
.cs-postnav a{
  font-family:var(--ui);font-size:.65rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-soft);
}
.cs-postnav a:hover{color:var(--rust);}

/* =========================================================
   HOME-01 · 首屏背景照片轮播（缓慢交叉淡入）
   ========================================================= */
.hero-type{overflow:hidden;}
.hero-slides{
  position:absolute;inset:0;z-index:0;
  background:var(--black);
}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  transition:opacity 2.2s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.hero-slide.is-active{opacity:1;}
/* 压暗，保证白字可读 */
.hero-slides::after{
  content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,
    rgba(16,15,13,.55) 0%,
    rgba(16,15,13,.42) 45%,
    rgba(16,15,13,.68) 100%);
}
/* 文字压在轮播之上 */
.hero-type > *:not(.hero-slides){position:relative;z-index:3;}

/* =========================================================
   HOME-02 · 自动横向滚动图带（顶部对齐、无缝循环）
   ========================================================= */
.marquee{
  width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{
  display:flex;align-items:flex-start;   /* 顶部对齐 —— 不再错落 */
  gap:10px;width:max-content;            /* 图片间距，原 22px */
  animation:marquee-scroll 260s linear infinite;   /* 29 张 · 与 8 张时同样的滚动速度 */
}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee img{
  flex:0 0 auto;
  width:clamp(160px,17vw,220px);
  height:clamp(215px,23vw,295px);
  object-fit:cover;
}
@keyframes marquee-scroll{
  from{transform:translate3d(0,0,0);}
  to  {transform:translate3d(-50%,0,0);}   /* 图片列表复制了一份，走一半即无缝 */
}

@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
  .hero-slide{transition:none;}
}

/* HOME-05 正文单行 */
.measure-wide{max-width:720px;margin-left:auto;margin-right:auto;}

/* =========================================================
   HOME-03 · 理念段落 —— 横向放宽（4 行 → 3 行）、纵向收紧
   ========================================================= */
.philosophy{padding:5.2em 0;}
.philosophy .statement{margin-bottom:1.5em;}
.philosophy .narrative{max-width:720px;margin-left:auto;margin-right:auto;}
.philosophy .narrative p{line-height:1.72;margin-bottom:1.05em;}
.philosophy .narrative p:last-of-type{margin-bottom:0;}