/* Showcase Kitchens & Baths, Inc. */
:root{
  --canvas:#F4F2ED; --surface:#FFFFFF; --ink:#2B2B2B; --accent:#1F6F78;
  --rule:#C9C4BA; --rule-strong:#2B2B2B;
  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s24:24px; --s32:32px; --s48:48px; --s64:64px;
  --display:"Oswald",Haettenschweiler,"Arial Narrow","Franklin Gothic Condensed",sans-serif;
  --body:"Open Sans","Segoe UI",Arial,Helvetica,sans-serif;
  --caption:"Droid Serif",Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--canvas);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-text-size-adjust:100%}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
a:focus-visible,.skip:focus{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s16);top:var(--s8);background:var(--surface);padding:var(--s8) var(--s12);z-index:9}
.canvas{max-width:1160px;margin:0 auto;padding:0 var(--s24)}

/* header */
.strip{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s24);min-height:80px;padding:var(--s24) 0 var(--s12)}
.mark{text-decoration:none;color:var(--ink);display:block}
.mark b{font-family:var(--display);font-weight:600;font-size:30px;line-height:1;display:block;letter-spacing:.01em}
.mark span{font-size:13px;text-transform:uppercase;letter-spacing:.14em;display:block;margin-top:var(--s4)}
.pagelinks{display:flex;flex-wrap:wrap;gap:var(--s16) var(--s24);list-style:none;margin:0;padding:0}
.pagelinks a{font-size:12px;text-transform:uppercase;letter-spacing:.16em;text-decoration:none;color:var(--ink);padding:var(--s8) 0;display:inline-block}
.pagelinks a:hover,.pagelinks a[aria-current]{color:var(--accent)}
.headrule{border:0;border-top:1px solid var(--rule-strong);margin:0}

/* anchors */
.anchors{padding:var(--s12) 0 var(--s8)}
.anchors ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.anchors li+li{border-left:1px solid var(--rule);margin-left:var(--s16);padding-left:var(--s16)}
.anchors a{font-size:12px;text-transform:uppercase;letter-spacing:.16em;text-decoration:none;color:var(--ink);padding:var(--s8) 0;display:inline-block}
.anchors a:hover{color:var(--accent)}

/* opening */
.opening{display:grid;grid-template-columns:minmax(0,1fr) 500px;align-items:center;margin:var(--s24) 0 var(--s48)}
.stage{grid-column:1 / span 2;grid-row:1;height:420px;overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stage img{width:100%;height:420px;object-fit:cover;object-position:left center}
.panel{grid-column:2;grid-row:1;background:var(--surface);border:1px solid var(--rule);padding:var(--s32);margin-right:-40px;position:relative}
.panel h1{font-family:var(--display);font-weight:500;font-size:46px;line-height:1.1;margin:0 0 var(--s16)}
.panel p{margin:0 0 var(--s16);max-width:34em}
.routelink{font-size:12px;text-transform:uppercase;letter-spacing:.16em;text-decoration:none;display:inline-block;border-bottom:1px solid var(--accent);padding-bottom:2px}

/* chapters */
.chapter{padding:var(--s32) 0;border-top:1px solid var(--rule)}
.chapter>h2{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:.02em;margin:0 0 var(--s16);padding-bottom:var(--s8);border-bottom:1px solid var(--rule-strong)}
.chapter p{max-width:66ch}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s32)}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s32) var(--s48)}
.speclist h3{font-family:var(--display);font-weight:500;font-size:19px;margin:0 0 var(--s8)}
.speclist ul{list-style:none;margin:0;padding:0}
.speclist li{border-bottom:1px solid var(--rule);padding:var(--s8) 0;font-size:16px}
.note{font-family:var(--caption);font-style:italic;font-size:15px;color:var(--ink);max-width:60ch}

/* product rows */
.defrow{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--s24);border-top:1px solid var(--rule);padding:var(--s16) 0}
.defrow:last-child{border-bottom:1px solid var(--rule)}
.defrow h3{font-family:var(--display);font-weight:500;font-size:19px;margin:0}
.defrow ul{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--s32)}
.defrow li{font-size:16px;padding:2px 0;break-inside:avoid}

/* gallery rows */
.galrow{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s32);border-top:1px solid var(--rule);padding:var(--s24) 0;align-items:start}
.galrow:last-of-type{border-bottom:1px solid var(--rule)}
.galrow h3{font-family:var(--display);font-weight:500;font-size:22px;margin:0 0 var(--s8)}
.galrow p{margin:0 0 var(--s12);max-width:60ch}
.galrow figure{margin:0}
.galrow figcaption,.plate figcaption{font-family:var(--caption);font-style:italic;font-size:15px;padding-top:var(--s8)}
.galrow img{border:1px solid var(--rule);background:var(--surface)}

/* inner pages */
.pagehead{padding:var(--s32) 0 var(--s16);border-bottom:1px solid var(--rule-strong)}
.pagehead h1{font-family:var(--display);font-weight:500;font-size:40px;line-height:1.1;margin:0}
.standfirst{font-size:17px;max-width:66ch;margin:var(--s16) 0 0}
.plate{margin:var(--s32) 0;background:var(--surface);border:1px solid var(--rule);padding:var(--s24);max-width:660px}
.plate img{border:1px solid var(--rule)}
.factstrip{border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);margin:var(--s32) 0;padding:var(--s8) 0}
.factstrip dl{display:grid;grid-template-columns:220px minmax(0,1fr);margin:0}
.factstrip dt{font-size:12px;text-transform:uppercase;letter-spacing:.16em;padding:var(--s12) 0;border-bottom:1px solid var(--rule)}
.factstrip dd{margin:0;padding:var(--s12) 0;border-bottom:1px solid var(--rule);font-size:16px}
.factstrip dl>dt:nth-last-of-type(1),.factstrip dl>dd:last-of-type{border-bottom:0}
.returns{padding:var(--s16) 0 var(--s48);font-size:16px}
.returns a{margin-right:var(--s24)}

/* contact */
.factcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s48)}
.factcols h3{font-family:var(--display);font-weight:500;font-size:19px;margin:0 0 var(--s8)}
address{font-style:normal}
table.hours{border-collapse:collapse;width:100%;max-width:340px}
table.hours th,table.hours td{text-align:left;padding:var(--s8) var(--s16) var(--s8) 0;border-bottom:1px solid var(--rule);font-size:16px;font-weight:400}
table.hours th{font-size:12px;text-transform:uppercase;letter-spacing:.16em}

/* directory */
.routes{list-style:none;margin:0;padding:0;max-width:640px}
.routes li{border-bottom:1px solid var(--rule);padding:var(--s12) 0}
.routes ul{list-style:none;margin:var(--s8) 0 0;padding:0 0 0 var(--s24)}
.routes ul li{border-bottom:0;padding:var(--s4) 0;font-size:16px}

/* footer */
.edge{border-top:1px solid var(--rule-strong);margin-top:var(--s48);padding:var(--s24) 0 var(--s48);display:flex;flex-wrap:wrap;gap:var(--s16) var(--s32);align-items:baseline;justify-content:space-between}
.edge .mark b{font-size:22px}
.edge nav ul{display:flex;flex-wrap:wrap;gap:var(--s8) var(--s24);list-style:none;margin:0;padding:0}
.edge nav a{font-size:12px;text-transform:uppercase;letter-spacing:.16em;text-decoration:none;color:var(--ink)}
.edge nav a:hover{color:var(--accent)}
.credit{font-size:12px;letter-spacing:.04em;width:100%;color:#5A554D}

@media (max-width:1040px){
  .opening{grid-template-columns:minmax(0,1fr) 440px}
  .panel{margin-right:0;padding:var(--s24)}
  .stage,.stage img{height:360px}
}
@media (max-width:760px){
  .strip{display:block;padding-bottom:var(--s8)}
  .pagelinks{margin-top:var(--s16)}
  .anchors li+li{border-left:0;margin-left:0;padding-left:0}
  .anchors li{margin-right:var(--s24)}
  .opening{display:block;margin-bottom:var(--s32)}
  .stage,.stage img{height:auto}
  .stage img{object-fit:contain}
  .panel{margin:0;border-top:0}
  .panel h1{font-size:30px}
  .pagehead h1{font-size:27px}
  .chapter>h2{font-size:19px}
  .cols3,.cols2,.factcols,.galrow,.defrow{grid-template-columns:minmax(0,1fr);gap:var(--s24)}
  .defrow ul{columns:1}
  .factstrip dl{grid-template-columns:minmax(0,1fr)}
  .factstrip dd{border-bottom:1px solid var(--rule);padding-top:0}
  .factstrip dt{border-bottom:0;padding-bottom:0}
  .plate{padding:var(--s16)}
}
@media (max-width:420px){
  .canvas{padding:0 var(--s16)}
  .panel h1{font-size:26px}
  .pagehead h1{font-size:24px}
}