:root{
  --bg:#F1E9DC;
  --bg-sand:#E5D8C4;
  --bg-walnut:#3A2A1D;
  --ink:#2A2018;
  --ink-2:#7A6A57;
  --ink-light:#F1E9DC;
  --copper:#9C5A2C;
  --sage:#59705B;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}

.wrap{
  width:100%;
  max-width:1160px;
  margin:0 auto;
  padding:0 24px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:0 24px;
}

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink)}
h1{font-size:clamp(2rem,5vw,3.1rem);line-height:1.15;margin:0}
h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;margin:0 0 18px}
h3{font-size:1.18rem;line-height:1.3;margin:34px 0 10px}
p{margin:0 0 18px}
a{color:var(--copper)}
a:focus-visible,
.nav a:focus-visible,
.foot a:focus-visible{
  outline:2px solid var(--sage);
  outline-offset:3px;
}

.note{
  font-size:12.5px;
  line-height:1.6;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.caption{
  font-size:13px;
  line-height:1.6;
  color:var(--ink-2);
}

/* ---------- header / nav ---------- */
.top{
  border-bottom:1px solid rgba(122,106,87,.35);
  background:var(--bg);
}
.top-in{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px 28px;
  padding-top:20px;
  padding-bottom:18px;
}
.brand{
  font-family:var(--serif);
  font-size:1.32rem;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand span{
  display:block;
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav a{
  font-size:14.5px;
  color:var(--ink-2);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--copper)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--copper)}

/* ---------- hero ---------- */
.hero{padding:72px 0 0}
.hero-in{position:relative;padding-left:34px}
.hero-in::before{
  content:"";
  position:absolute;
  left:0;top:6px;bottom:22px;
  width:1px;
  background:var(--copper);
}
.hero-in::after{
  content:"";
  position:absolute;
  left:-5px;top:6px;
  width:11px;height:1px;
  background:var(--copper);
  box-shadow:0 0 0 0 transparent;
}
.tick-bottom{
  position:absolute;
  left:-5px;bottom:22px;
  width:11px;height:1px;
  background:var(--copper);
}
.hero h1{max-width:calc((100% - 11*24px)*8/12 + 7*24px)}
.hero h1 .l2{display:block;padding-left:8.5%}
.dimline{
  display:flex;
  align-items:center;
  gap:14px;
  margin:32px 0 26px;
  max-width:calc((100% - 11*24px)*9/12 + 8*24px);
}
.dimline::before,.dimline::after{
  content:"";
  height:1px;
  background:var(--copper);
  flex:1;
}
.dimline span{
  flex:0 0 auto;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--copper);
}
.hero .lead{
  max-width:calc((100% - 11*24px)*6/12 + 5*24px);
  font-size:1.06rem;
}

/* ---------- sections ---------- */
section{padding:72px 0}
section.r2{padding:88px 0}
section.r3{padding:104px 0}
.sand{background:var(--bg-sand)}
.walnut{background:var(--bg-walnut);color:var(--ink-light)}
.walnut h2,.walnut h3{color:var(--ink-light)}
.walnut .caption,.walnut .note{color:#C8B99F}
.walnut a{color:#D89257}

.rule{margin-bottom:34px}
.rule::before{
  content:"";
  display:block;
  height:1px;
  background:var(--copper);
  max-width:calc((100% - 11*24px)*9/12 + 8*24px);
}
.rule::after{
  content:"";
  display:block;
  height:3px;
  margin-top:5px;
  background:var(--copper);
  width:calc((100% - 11*24px)*2/12 + 24px);
}
.walnut .rule::before,.walnut .rule::after{background:#B9713C}

.col7{
  grid-column:1 / span 7;
}
.col9{grid-column:1 / span 9}
.col5{grid-column:1 / span 5}
.aside4{
  grid-column:9 / span 4;
  align-self:start;
  padding-top:6px;
}

/* ---------- main image block ---------- */
.figblock{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:0 24px;
  align-items:start;
}
.figblock figure{
  grid-column:1 / span 7;
  margin:0;
  max-width:900px;
}
.figblock img{
  display:block;
  width:100%;
  height:auto;
}
.figblock .callout{
  grid-column:8 / span 4;
  position:relative;
  padding-top:28px;
  padding-left:22px;
}
.figblock .callout::before{
  content:"";
  position:absolute;
  left:-24px;top:34px;
  width:44px;height:1px;
  background:var(--copper);
}

/* detail image in walnut section */
.detailblock{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
  align-items:end;
}
.detailblock .txt{grid-column:1 / span 6}
.detailblock figure{
  grid-column:8 / span 5;
  margin:0;
}
.detailblock img{display:block;width:100%;height:auto}
.detailblock figcaption{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #B9713C;
}

/* ---------- lists ---------- */
.check{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  max-width:calc((100% - 11*24px)*7/12 + 6*24px);
}
.check li{
  position:relative;
  padding-left:30px;
  margin-bottom:18px;
}
.check li::before{
  content:"";
  position:absolute;
  left:0;top:.75em;
  width:16px;height:2px;
  background:var(--copper);
}
.walnut .check li::before{background:#B9713C}
.check strong{font-weight:600}

.plainlist{margin:18px 0 0;padding-left:20px}
.plainlist li{margin-bottom:12px}

/* ---------- about sheet ---------- */
.sheet{position:relative;padding-left:38px}
.sheet::before{
  content:"";
  position:absolute;
  left:0;top:8px;bottom:0;
  width:1px;
  background:var(--copper);
}
.sheet .blk{position:relative;margin-bottom:52px}
.sheet .blk::before{
  content:"";
  position:absolute;
  left:-38px;top:.85em;
  width:22px;height:1px;
  background:var(--copper);
}
.sheet .blk p,.sheet .blk ul{max-width:calc((100% - 11*24px)*7/12 + 6*24px)}
.contactbox{
  background:var(--bg-sand);
  padding:32px 30px;
  border-top:3px solid var(--copper);
  max-width:640px;
}
.contactbox p{margin-bottom:8px}

.legal .blk{max-width:calc((100% - 11*24px)*9/12 + 8*24px)}
.legal h2{margin-top:46px}
.legal h2:first-of-type{margin-top:0}

/* ---------- footer ---------- */
.foot{
  background:var(--bg-sand);
  padding:56px 0 26px;
  margin-top:0;
}
.foot-top{
  border-top:1px solid var(--copper);
  padding-top:0;
}
.foot .dbl{
  height:3px;
  width:calc((100% - 11*24px)*2/12 + 24px);
  background:var(--copper);
  margin-bottom:40px;
}
.foot-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:32px 24px;
}
.foot-brand{grid-column:1 / span 6}
.foot-brand .fname{
  font-family:var(--serif);
  font-size:1.9rem;
  line-height:1.2;
  margin:0 0 10px;
}
.foot-brand p{max-width:34ch;color:var(--ink-2);font-size:15px}
.foot-nav{grid-column:8 / span 3}
.foot-mail{grid-column:11 / span 2}
.foot h2{
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 14px;
}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px}
.foot a{color:var(--ink);text-decoration:none;font-size:15px;border-bottom:1px solid transparent}
.foot a:hover{border-bottom-color:var(--copper)}
.foot-end{
  margin-top:46px;
  padding-top:16px;
  border-top:1px solid rgba(122,106,87,.4);
  font-size:13px;
  color:var(--ink-2);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{padding-top:52px}
  section{padding:48px 0}
  section.r2{padding:52px 0}
  section.r3{padding:56px 0}
  .hero h1,.dimline,.hero .lead,.rule::before,.check,
  .sheet .blk p,.sheet .blk ul,.legal .blk{max-width:none}
  .rule::after{width:120px}
  .hero h1 .l2{padding-left:0}
  .col7,.col9,.col5,.aside4{grid-column:1 / -1}
  .aside4{padding-top:22px}
  .figblock figure,.figblock .callout,
  .detailblock .txt,.detailblock figure{grid-column:1 / -1}
  .figblock .callout{padding-left:0;padding-top:18px}
  .figblock .callout::before{left:0;top:0;width:44px}
  .detailblock figure{margin-top:26px}
  .foot-brand,.foot-nav,.foot-mail{grid-column:1 / -1}
  .foot .dbl{width:120px;margin-bottom:30px}
  .foot-grid{gap:26px}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .wrap{padding:0 18px}
  .hero-in{padding-left:22px}
  .sheet{padding-left:24px}
  .sheet .blk::before{left:-24px;width:14px}
  .nav ul{gap:6px 16px}
}