/*
  The House. Page chrome for every parent page: the front door, the Studio wing,
  Labs, About, Contact and the legal pages. Option A Maison: cream ground,
  Midnight type, square corners, gold hairlines. Loads after brand.css.
*/
.wrap{max-width:1320px;margin:0 auto;padding:0 24px}

/* Masthead. The stripe sits directly under it, once per page. */
.mast{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:20px;padding-bottom:16px}
.mast .lockup{text-decoration:none}
.nav{display:flex;flex-wrap:wrap;gap:2px 13px}
.nav a{padding:6px 0;font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--text2);text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--brand);text-decoration:underline;text-underline-offset:6px}

/* Type. */
.label{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text2)}
.display{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1.08;color:var(--brand)}
.lede{font-size:19px;color:var(--text2);max-width:34em;margin-top:22px}
.big{font-size:21px;line-height:1.5;color:var(--text);max-width:30em}
.prose p{color:var(--text2);max-width:38em}
.prose p + p{margin-top:14px}
.note{font-size:15px;color:var(--text2);max-width:40em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Page head and sections. */
.pagehead{padding:52px 0 56px}
.pagehead h1{font-size:32px;margin-top:18px;max-width:17em}
.subnav{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:30px;padding-top:16px;border-top:1px solid var(--gold)}
.subnav a{padding:6px 0;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);text-decoration:none}
.subnav a:hover,.subnav a[aria-current]{color:var(--brand);text-decoration:underline;text-underline-offset:6px}
.band{padding-bottom:72px}
.band > .label{display:block;padding-bottom:20px}
.band > h2.display{font-size:24px;max-width:20em;margin-bottom:26px}

/* Links that read as links. */
.go{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.go a,a.go{display:inline-block;color:var(--brand);text-decoration:none;border-bottom:1px solid var(--brand);padding:6px 0 4px}
.go a:hover,a.go:hover{border-bottom-width:2px;padding-bottom:3px}
.prose a,.note a,.inline{color:var(--blue);font-weight:500;text-underline-offset:3px}

/* Cards. Square corners, linen border. */
.cards{display:grid;gap:16px}
.card{display:flex;flex-direction:column;padding:26px 24px 28px;background:var(--surface);border:1px solid var(--line)}
.card h3{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;color:var(--brand)}
.card p{font-size:15.5px;color:var(--text2);margin-top:10px}
.card .go{margin-top:auto;padding-top:18px}
.card .price,.price{font-family:var(--display);font-weight:700;font-size:40px;line-height:1;color:var(--brand);margin:16px 0 18px}
.price small{font-family:var(--body);font-weight:500;font-size:15px;color:var(--text2);white-space:nowrap}
.ticks li{padding:9px 0;border-top:1px solid var(--line);font-size:15.5px;color:var(--text2)}
.card .kicker{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);margin:0 0 10px}
.actions .go{margin:0;padding:0}

/* Lines with gold hairlines: name, figure, detail. */
.lines{border-bottom:1px solid var(--gold)}
.lines li{display:grid;gap:4px;padding:20px 0;border-top:1px solid var(--gold)}
.pk{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.pr{font-family:var(--display);font-weight:600;font-size:16px;color:var(--brand)}
.dt{color:var(--text2)}

/* Numbered steps. */
.steps{counter-reset:step;border-bottom:1px solid var(--gold)}
.steps li{counter-increment:step;display:grid;gap:6px;padding:22px 0;border-top:1px solid var(--gold)}
.steps li::before{content:"0" counter(step);font-family:var(--display);font-size:14px;font-weight:500;letter-spacing:.22em;color:var(--text2)}
.steps b{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.steps span{color:var(--text2);max-width:40em}

/* Quiet tiles for Labs. */
.quiet{display:grid;gap:12px}
.quiet li{padding:22px 22px 24px;border:1px solid var(--line);background:var(--surface)}
.quiet b{display:block;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.quiet span{display:block;color:var(--text2);font-size:15px;margin-top:6px}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:36px}
.mail{font-size:21px;font-weight:500;color:var(--brand);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:4px;overflow-wrap:anywhere}
.mail:hover{border-bottom-color:var(--brand)}

footer{border-top:1px solid var(--gold);padding:24px 0 48px;font-size:14px;color:var(--text2)}
footer a{text-underline-offset:3px}

@media (min-width:768px){
  .wrap{padding:0 40px}
  .mast{padding-top:26px;padding-bottom:24px}
  .nav{gap:2px 30px}
  .nav a{font-size:12px;letter-spacing:.2em}
  .pagehead{padding:84px 0 88px}
  .pagehead h1{font-size:52px}
  .lede{font-size:21px}
  .big{font-size:26px}
  .band{padding-bottom:104px}
  .band > h2.display{font-size:34px}
  .cards.c2{grid-template-columns:1fr 1fr}
  .cards.c3{grid-template-columns:repeat(3,1fr);gap:20px}
  .lines li{grid-template-columns:240px 170px 1fr;gap:24px;align-items:baseline}
  .steps li{grid-template-columns:72px 240px 1fr;gap:24px;align-items:baseline}
  .quiet{grid-template-columns:1fr 1fr}
  .mail{font-size:26px}
}
@media (min-width:1200px){
  .pagehead{padding:104px 0 112px}
  .pagehead h1{font-size:64px}
  .cards.c4{grid-template-columns:repeat(4,1fr)}
  .quiet{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:768px) and (max-width:1199px){
  .cards.c4{grid-template-columns:1fr 1fr}
  .cards.c3 .card{padding-left:18px;padding-right:18px}
  .cards.c3 .price{font-size:30px}
}