@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/LibreCaslonText-400n.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/LibreCaslonText-400i.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/LibreCaslonText-700n.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/BarlowCondensed-500n.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/BarlowCondensed-600n.woff2) format("woff2")}

:root{
  --ink:#1c2027;
  --navy:#23406f;
  --navy-deep:#172a48;
  --oak:#c9a77c;
  --oak-ink:#86663f;
  --stone:#5f646c;
  --rule:#dfe2e6;
  --paper:#f1f4f8;
  --gridline:rgba(35,64,111,.075);
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --cond:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--ink);font:400 1.0625rem/1.7 var(--serif)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--oak-ink)}
:focus-visible{outline:3px solid var(--oak);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:-.01em;margin:0}
p{margin:0 0 1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.narrow > *{max-width:46rem}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:8px 14px;z-index:10}
.skip:focus{left:8px}

/* header */
.site-head{border-bottom:1px solid var(--rule)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.wordmark{font:400 1.3rem/1.15 var(--serif);color:var(--ink);text-decoration:none}
.wordmark span{display:block;font:500 .95rem/1.3 var(--cond);color:var(--stone);letter-spacing:.02em;margin-top:2px}
.wordmark:hover{color:var(--navy)}
.site-head nav{display:flex;gap:8px 26px;flex-wrap:wrap}
.site-head nav a{font:500 1.1rem/1 var(--cond);color:var(--ink);text-decoration:none;padding:10px 0;border-bottom:2px solid transparent}
.site-head nav a:hover{color:var(--navy);border-bottom-color:var(--rule)}
.site-head nav a[aria-current=page]{border-bottom-color:var(--oak)}

/* buttons */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px}
.actions.center{justify-content:center;margin-top:40px}
.btn{display:inline-block;background:var(--navy);color:#fff;font:600 1.15rem/1 var(--cond);letter-spacing:.02em;text-decoration:none;padding:.85em 1.45em;border-radius:3px}
.btn:hover{background:var(--navy-deep);color:#fff}
.link{font:500 1.15rem/1.3 var(--cond);color:var(--navy)}

/* drafting-paper sheet that holds a floor plan */
.sheet,.hero-sheet{background-color:var(--paper);background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:14px 14px;border:1px solid rgba(35,64,111,.22);padding:14px;margin:0}
.sheet img,.hero-sheet img{mix-blend-mode:multiply;width:100%;object-fit:contain}

/* hero */
.hero{padding:64px 0 96px}
.hero-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.35rem,4.6vw,3.75rem);line-height:1.05;letter-spacing:-.018em}
.lede{font-size:1.2rem;line-height:1.65;margin-top:24px;max-width:33em}
.hero-fig{position:relative;margin:0}
.hero-img{border-radius:3px;width:100%}
.hero-sheet{position:absolute;left:-44px;bottom:30px;width:41%;box-shadow:0 18px 40px -18px rgba(23,42,72,.45)}
.hero-sheet img{max-height:340px}
.hero-fig figcaption{font:500 1rem/1.4 var(--cond);color:var(--stone);margin-top:12px;text-align:right}

/* sections */
.books,.homes,.inside,.who,.faq,.list,.more{padding:88px 0}
.books{background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
section h2{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:14px}
.section-intro{font-size:1.12rem;max-width:40em;margin-bottom:44px}

/* books */
.book-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:start}
.book{display:grid;grid-template-columns:136px 1fr;gap:26px;align-items:start}
.book-main{grid-template-columns:250px 1fr;gap:34px}
.book-pair{display:grid;gap:40px}
.book-pair .book + .book{border-top:1px solid var(--rule);padding-top:40px}
.cover-link img,.book-cover img,.more-list img{box-shadow:0 1px 2px rgba(23,42,72,.18),0 14px 30px -12px rgba(23,42,72,.35);border-radius:1px}
.book h3{font-size:1.45rem;margin-bottom:8px}
.book-main h3{font-size:1.95rem}
.book h3 a{color:var(--ink);text-decoration:none}
.book h3 a:hover{color:var(--navy)}
.book-sub{font:500 1.2rem/1.3 var(--cond);color:var(--navy);margin-bottom:14px}
.spec{font:500 1.05rem/1.45 var(--cond);color:var(--stone);margin:0}
.book .actions{margin-top:18px}

/* featured homes as book spreads: text across the top, rendering and plan facing each other */
.spread{display:grid;grid-template-columns:1.5fr 1fr;grid-template-areas:"head head" "img sheet";gap:26px 28px;padding:56px 0;border-top:1px solid var(--rule)}
.spread:first-of-type{border-top:0;padding-top:8px}
.spread-head{grid-area:head;display:grid;grid-template-columns:1fr 1.25fr;gap:8px 44px;align-items:start}
.spread-img{grid-area:img;margin:0}
.spread-img img{border-radius:3px;width:100%;height:100%;object-fit:cover}
.spread .sheet{grid-area:sheet;display:flex;align-items:center;justify-content:center}
.spread .sheet img{max-height:520px;height:100%}
.house-name{font-size:1.85rem;margin-bottom:12px}
.facts{display:flex;flex-wrap:wrap;gap:6px 30px;margin:0;font-family:var(--cond)}
.facts dt{font-weight:500;font-size:.95rem;color:var(--stone);line-height:1.2}
.facts dd{margin:0;font-weight:600;font-size:1.12rem;line-height:1.3}
.spread-head p{font-size:1.02rem}
.in-book{font:500 1.05rem/1.4 var(--cond);color:var(--stone);margin:0}

/* inside */
.inside{background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sample{margin:30px 0 40px}
.sample img{border:1px solid var(--rule);background:#fff;box-shadow:0 16px 36px -22px rgba(23,42,72,.45);width:100%}
.sample figcaption{font:500 1rem/1.4 var(--cond);color:var(--stone);margin-top:12px}
.inside-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:20px 48px}
.inside-list li{padding-left:22px;position:relative}
.inside-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--oak)}
.inside-list strong{font-weight:700}

/* faq */
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{font-size:1.18rem;padding:20px 40px 20px 0;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:500 1.6rem/1 var(--cond);color:var(--navy)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 22px;max-width:40em}

/* book pages */
.crumbs{font:500 1rem/1 var(--cond);color:var(--stone);padding-top:22px;padding-bottom:0}
.crumbs a{color:var(--stone)}
.book-hero{padding:36px 0 80px}
.book-hero-grid{display:grid;grid-template-columns:340px 1fr;gap:60px;align-items:start}
.book-hero h1{font-size:clamp(2.1rem,4vw,3.1rem);line-height:1.08}
.book-hero .book-sub{margin:10px 0 24px;font-size:1.3rem}
.book-hero p{max-width:38em}
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;margin:28px 0 0;max-width:38em;font-family:var(--cond)}
.specs div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--rule);padding:9px 0}
.specs dt{color:var(--stone);font-weight:500}
.specs dd{margin:0;font-weight:600;text-align:right}
.book-hero + .homes{padding-top:0}
.homes h2 + .spread{padding-top:34px}
.who + .faq{padding-top:0}
.list{background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.houses{width:100%;border-collapse:collapse;margin-top:26px;background:#fff;border:1px solid var(--rule)}
.houses caption{caption-side:top;text-align:left;font:500 1.05rem/1.4 var(--cond);color:var(--stone);padding-bottom:12px}
.houses th,.houses td{padding:12px 16px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.houses thead th{font:600 1rem/1.2 var(--cond);color:var(--navy);background:#fff}
.houses tbody th{font-weight:400;font-size:1.05rem}
.houses td{font:500 1.08rem/1.5 var(--cond);white-space:nowrap}
.houses td:nth-child(2){text-align:right;font-variant-numeric:tabular-nums}
.houses thead th:nth-child(2){text-align:right}
.tag{display:block;font-style:italic;font-size:.92rem;color:var(--stone);margin-top:2px;line-height:1.45}
.badge{font:600 .85rem/1 var(--cond);background:var(--oak);color:var(--ink);padding:3px 7px;border-radius:2px;margin-left:8px;vertical-align:2px}
.more-list{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:32px 56px}
.more-list a{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:center;max-width:420px;text-decoration:none;color:var(--ink);font-size:1.25rem;line-height:1.25}
.more-list a:hover span{color:var(--navy);text-decoration:underline}
.notfound{padding:96px 0}
.notfound h1{font-size:2.6rem;margin-bottom:18px}

/* footer */
.site-foot{background:var(--navy-deep);color:#d9e0ea;padding:64px 0 36px;font-size:1rem}
.site-foot a{color:#fff}
.site-foot a:hover{color:var(--oak)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px 48px}
.foot-mark{font-size:1.35rem;color:#fff;margin-bottom:6px}
.site-foot h2{font:600 1.05rem/1.2 var(--cond);color:var(--oak);letter-spacing:.03em;margin-bottom:12px}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:8px;line-height:1.4}
.foot-fine{border-top:1px solid rgba(255,255,255,.16);margin-top:44px;padding-top:24px;font:500 1rem/1.5 var(--cond);color:#aab6c6}
.foot-fine p{max-width:60em;margin-bottom:8px}

/* tablet */
@media (max-width:1000px){
  .book-grid{grid-template-columns:1fr}
  .book-main{grid-template-columns:200px 1fr}
}
/* phone and small tablet */
@media (max-width:860px){
  .wrap{padding:0 16px}
  body{font-size:1.03rem}
  .hero{padding:36px 0 64px}
  .hero-grid,.book-hero-grid{grid-template-columns:1fr;gap:28px}
  .spread{grid-template-columns:1fr;grid-template-areas:"head" "img" "sheet";gap:20px}
  .spread-head{grid-template-columns:1fr;gap:14px}
  .spread .sheet img{height:auto;max-height:460px}
  .hero-sheet{position:relative;left:auto;bottom:auto;width:62%;margin:-44px 0 0 12px;padding:10px}
  .hero-fig figcaption{text-align:left}
  .books,.homes,.inside,.who,.faq,.list,.more{padding:60px 0}
  .book,.book-main{grid-template-columns:110px 1fr;gap:18px}
  .book-main h3{font-size:1.5rem}
  .spread{padding:40px 0}
  .inside-list{grid-template-columns:1fr}
  .book-cover{max-width:250px}
  .specs{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .houses caption{display:block;padding:0 0 12px}
  .houses thead{display:none}
  .houses,.houses tbody,.houses tr,.houses th,.houses td{display:block}
  .houses tr{padding:14px 16px;border-bottom:1px solid var(--rule)}
  .houses th,.houses td{padding:0;border:0}
  .houses td{display:inline;white-space:normal;color:var(--stone)}
  .houses td + td::before{content:", "}
  .houses td:nth-child(2)::after{content:" sq ft"}
  .houses tbody th{margin-bottom:4px}
}
@media (max-width:420px){
  .book,.book-main{grid-template-columns:1fr}
  .book .cover-link{max-width:170px}
  .more-list a{grid-template-columns:84px 1fr;font-size:1.1rem}
}
