/* Homepage layout (type, buttons and photo parts come from site.css) */

/* Hero: clean photo that fades into cream */
.hero{height:76vh;min-height:520px;}
.hero img{object-position:center 40%;}

.intro .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:96px;align-items:center;}
.intro{border-bottom:1px solid var(--fog);}
.intro h1{margin-top:18px;}
.intro .t-lead{margin-bottom:30px;}
.featured{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;margin-top:24px;color:var(--muted);}
.featured:before{content:"";width:28px;margin-right:14px;border-top:1px solid var(--bronze-lt);}
.featured b{font-weight:400;color:var(--charcoal);white-space:nowrap;}

/* The difference */
.diff .head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:56px;}
.diff .hint{color:rgba(252,251,247,.55);padding-bottom:8px;white-space:nowrap;}
.diff .ba{height:46vh;min-height:360px;max-height:480px;max-width:900px;margin:0 auto;}
.diff .ba img{object-position:center 58%;pointer-events:none;}
.stats{display:flex;max-width:900px;margin:0 auto;border:1px solid rgba(252,251,247,.18);border-top:0;}
.stats div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 12px;text-align:center;}
.stats div+div{border-left:1px solid var(--rule-dark);}
.stats .n{font-family:var(--serif);font-size:36px;font-weight:500;font-style:italic;color:var(--bronze-lt);line-height:1;}
.stats .caps{color:rgba(252,251,247,.65);}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:900px;margin:34px auto 0;}
.trio button{height:300px;border:0;padding:0;text-align:left;cursor:zoom-in;}
.trio img{transition:transform .6s ease;}
.trio button:hover img{transform:scale(1.03);}
.more-link{display:flex;justify-content:center;margin-top:40px;}

/* Beyond the walls */
.walls{background:#E5DBCD;text-align:center;}
.walls .container{max-width:calc(860px + 2 * var(--gutter));}
.walls .eyebrow{color:var(--charcoal);}
.walls .rule{display:block;margin:22px auto 34px;width:44px;border-top:1px solid #A8865A;}
.walls .rule.w{width:68px;margin:34px auto;}
.walls h2{font-weight:400;line-height:1.25;text-wrap:balance;}
.walls p{color:#4A433A;margin:0 auto;max-width:640px;text-wrap:pretty;}

/* Underway band */
.nb{display:grid;grid-template-columns:1.2fr 1fr;min-height:640px;background:var(--clay);}
.nb .copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:var(--sec-sm) 72px var(--sec-sm) max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter)));}
.nb .eyebrow{color:var(--sand-lt);}
.nb h2{margin-top:24px;}
.nb .t-body{margin:20px 0 34px;max-width:440px;}
.nb:hover .link-cta .arr{transform:translateX(4px);}
.nb .link-cta .arr{transition:transform .25s ease;}
.nb .photo{background:#6A4D37;}
.nb .photo img{object-fit:contain;}

/* Contact band */
.cband .grid{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:center;}
.cband h2{margin-top:18px;}
.cband .r{display:flex;flex-direction:column;align-items:flex-start;gap:28px;}
.cband .t-body{max-width:440px;}
.mail{border-bottom:1px solid rgba(201,163,106,.7);padding-bottom:4px;white-space:nowrap;}
.mail:hover{color:var(--bronze-lt);}

@media(max-width:900px){
  /* Phones: a little taller than the photo's own shape; only slivers of the far left and right are cropped */
  /* The photo sits 56px lower so the logo lands on plain ceiling above the beam; the band above
     is the ceiling's own color and the photo's top edge fades into it */
  .hero{height:calc(75vw + 56px);min-height:0;background:linear-gradient(to right,#CDCBC3,#C4C0B9 50%,#D0D0C8);}
  .hero>img{top:56px;height:calc(100% - 56px);object-position:center center;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 28px);mask-image:linear-gradient(to bottom,transparent,#000 28px);}
  .intro .grid,.cband .grid{grid-template-columns:1fr;gap:36px;}
  .diff .head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:32px;}
  .diff .ba{height:auto;min-height:0;aspect-ratio:4/3;}
  .diff .photo-cap{flex-direction:column;align-items:flex-start;gap:0;}
  .stats{flex-direction:column;}
  .stats div+div{border-left:0;border-top:1px solid var(--rule-dark);}
  .trio{grid-template-columns:1fr;gap:16px;}
  .nb{grid-template-columns:1fr;min-height:0;}
  .nb .copy{padding:var(--sec-sm) var(--gutter);}
  .nb .photo{min-height:340px;}
}