/* ============================================================
   Samantha Seitz Interiors — revised structure sections
   Case study · Designer's Home · About · FAQ · Journal
   Builds on ../../colors_and_type.css + styles.css
   ============================================================ */

/* ---- shared section intro ---- */
.intro{max-width:820px;margin:0 auto 52px;text-align:center;}
.intro .seclabel{display:block;margin-bottom:14px;}
.intro h2{font-family:var(--serif-display);font-weight:500;font-size:clamp(32px,3.8vw,50px);line-height:1.05;color:var(--green-deep);}
.intro .sub{font-family:var(--serif-display);font-style:italic;font-size:20px;color:var(--green);margin-top:14px;}

/* before / after slider */
.ba{position:relative;width:100%;height:420px;overflow:hidden;border:1px solid var(--hair);user-select:none;background:var(--ivory-deep);}
.ba-tag{font-family:var(--serif-body);font-size:10px;letter-spacing:.30em;text-transform:uppercase;}
.ba-after .ba-tag{color:var(--green);}
.ba-before .ba-tag{color:#6f6a5c;}
.ba-handle{position:absolute;top:0;bottom:0;width:2px;background:var(--ivory);transform:translateX(-1px);z-index:5;cursor:ew-resize;box-shadow:0 0 0 1px rgba(40,49,41,.18);}
.cs-detail .frame{height:340px;border:none;}
.cs-detail .copy .lab{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-lt);margin-bottom:14px;}
.cs-quote .mark{font-family:var(--serif-display);font-size:64px;color:var(--brass-lt);line-height:.5;height:28px;}
.cs-quote .attr{font-family:var(--serif-body);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);}
.designer .lab{font-size:11px;letter-spacing:.30em;text-transform:uppercase;color:var(--brass);}
.designer .strip{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:360px;}
.designer .strip .frame{height:100%;}
.designer .strip .tall{grid-row:span 2;}

/* ============================================================
   About — one set of hands
   ============================================================ */
.about{padding:90px 0;}
.about-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:.82fr 1.18fr;gap:54px;align-items:start;}
.about .portrait{margin:0;border:1px solid var(--hair);padding:9px;background:var(--ivory-deep);}
.about .portrait img{width:100%;height:auto;display:block;}
.about .lab{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass);}
.about h2{font-family:var(--serif-display);font-weight:500;font-size:clamp(30px,3.4vw,46px);line-height:1.04;color:var(--green-deep);margin:14px 0 6px;}
.about .role{font-family:var(--serif-display);font-style:italic;font-size:19px;color:var(--green);margin-bottom:20px;}
.about p{font-size:16.5px;line-height:1.66;color:var(--green-deep);margin-bottom:15px;max-width:60ch;}
.about p b{font-weight:600;}
.agents .lab{color:var(--brass);margin-bottom:10px;}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--ivory-deep);padding:84px 0;}
.faq-list{max-width:760px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--hair);}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:22px 2px;display:flex;justify-content:space-between;align-items:baseline;gap:18px;font-family:var(--serif-display);font-weight:600;font-size:22px;color:var(--green-deep);}
.faq-q .pm{font-family:var(--serif-display);font-style:italic;font-size:24px;color:var(--brass);flex:none;transition:transform .3s var(--ease);}
.faq-item.open .pm{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
.faq-a .inner{padding:0 2px 22px;font-size:16px;line-height:1.62;color:var(--green-deep);max-width:62ch;}

/* ============================================================
   Journal
   ============================================================ */
.journal{padding:88px 0;}
.jrnl-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.post .frame{height:230px;cursor:pointer;transition:transform .4s var(--ease);}
.post .frame:hover{transform:translateY(-3px);}
.post .date{font-family:var(--serif-body);font-size:11px;letter-spacing:.20em;text-transform:uppercase;color:var(--brass);margin:16px 0 8px;}
.post h3{font-family:var(--serif-display);font-weight:600;font-size:23px;line-height:1.18;color:var(--green-deep);}
.post p{font-size:15px;line-height:1.55;color:var(--fg2);margin-top:9px;}
.post .more{font-family:var(--serif-display);font-style:italic;font-size:16px;color:var(--green);margin-top:11px;display:inline-block;}

@media (max-width:880px){
  .cs-detail{grid-template-columns:1fr;}
  .designer-inner,.about-inner{grid-template-columns:1fr;gap:30px;padding:0 24px;}
  .about .portrait{max-width:420px;}
  .about{padding:60px 0;}
  .faq{padding:60px 0;}
  .journal{padding:60px 0;}
  .jrnl-grid{grid-template-columns:1fr 1fr;gap:18px;}
  .ba{height:280px;}
}

@media (max-width:520px){
  .jrnl-grid{grid-template-columns:1fr;}
  .about-inner{grid-template-columns:1fr;}
  .about .portrait{max-width:none;}
  .ba{height:220px;}
}

/* ============================================================
   Privacy Policy — plain prose, About's type scale
   ============================================================ */
.privacy{padding:90px 0 100px;}
.privacy-head{margin-bottom:38px;}
.privacy h1{font-family:var(--serif-display);font-weight:500;font-size:clamp(34px,4.2vw,54px);line-height:1.04;color:var(--green-deep);}
.privacy-head .eff{font-family:var(--serif-body);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-top:16px;}
.privacy h2{font-family:var(--serif-display);font-weight:600;font-size:24px;line-height:1.2;color:var(--green-deep);margin:38px 0 14px;}
.privacy p{font-size:16.5px;line-height:1.66;color:var(--green-deep);margin-bottom:15px;}
.privacy p a{color:var(--green-deep);text-decoration:none;border-bottom:1px solid var(--brass-lt);transition:color .2s,border-color .2s;}
.privacy p a:hover{color:var(--brass);border-bottom-color:var(--brass);}

@media (max-width:520px){
  .privacy{padding:64px 0 76px;}
  .privacy h2{font-size:21px;}
}

/* ---- Journal index: fewer than three posts stay centred instead of
       orphaning a card at the left edge of a three-column grid ---- */
.jrnl-grid.jrnl-few{grid-template-columns:repeat(auto-fit,minmax(0,340px));justify-content:center;}
.post .post-link{color:inherit;text-decoration:none;display:block;}
.post h3 .post-link:hover{color:var(--brass);}
a.more{font-family:var(--serif-display);font-style:italic;font-size:16px;color:var(--green);text-decoration:none;display:inline-block;transition:color .25s var(--ease);}
a.more:hover{color:var(--brass);}
.post .more.soon{color:var(--fg2);font-style:italic;}

/* ============================================================
   Journal post — long-form entry
   ============================================================ */
.post-page{padding:88px 0 96px;}
.post-head{text-align:center;margin-bottom:44px;}
.post-head .seclabel{display:block;margin-bottom:14px;}
.post-head h1{font-family:var(--serif-display);font-weight:500;font-size:clamp(34px,4.4vw,56px);line-height:1.04;color:var(--green-deep);}
.post-head .standfirst{font-family:var(--serif-display);font-style:italic;font-size:20px;color:var(--green);margin-top:16px;}
.post-head .tape{margin:28px auto 0;}
.post-hero{margin:0 0 40px;}
.post-hero img{width:100%;height:auto;display:block;border:1px solid var(--hair);}
.post-hero .cap{font-family:var(--serif-display);font-style:italic;font-size:15px;color:var(--green);margin-top:10px;text-align:center;}
.post-body p{font-size:17.5px;line-height:1.72;color:var(--green-deep);margin-bottom:22px;}
.post-body p em{font-style:italic;}
.post-body p:first-child{font-size:19px;}
.post-foot{margin-top:48px;padding-top:26px;border-top:1px solid var(--hair);}

@media (max-width:880px){
  .post-page{padding:56px 0 64px;}
  .post-body p{font-size:16.5px;}
  .post-body p:first-child{font-size:17.5px;}
  .post-hero{margin-bottom:28px;}
}