/* Taldegu — stitched-margins */

:root{
  --bg:#151b2b;
  --bg-alt:#1c2436;
  --bg-light:#eee8dc;
  --tx:#e4e0d4;
  --tx-dim:#8a93a5;
  --tx-dark:#151b2b;
  --acc:#c98a4c;
  --acc2:#7fa3b8;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:24px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(201,138,76,.5)}
a:hover{border-bottom-color:var(--acc)}

a:focus-visible,
:focus-visible{
  outline:2px solid var(--acc);
  outline-offset:3px;
}

h1,h2,h3{font-family:var(--serif);font-weight:400;text-transform:none;margin:0}
h1{font-size:clamp(30px,4.6vw,50px);line-height:1.18;letter-spacing:.005em}
h2{font-size:clamp(23px,2.7vw,31px);line-height:1.28;margin-bottom:18px}
h3{font-size:20px;font-style:italic;line-height:1.35;margin:32px 0 10px}

p{margin:0 0 18px}
p:last-child{margin-bottom:0}

/* ---------- stitching helpers ---------- */

.stitch,
.stitch-x,
.stitch-l,
.stitch-r,
.stitch-t,
.stitch-b{
  background-repeat:no-repeat;
}

.stitch{
  background-image:
    repeating-linear-gradient(to right,var(--acc) 0 14px,transparent 14px 27px),
    repeating-linear-gradient(to right,var(--acc) 0 14px,transparent 14px 27px),
    repeating-linear-gradient(to bottom,var(--acc) 0 14px,transparent 14px 27px),
    repeating-linear-gradient(to bottom,var(--acc) 0 14px,transparent 14px 27px);
  background-size:100% 2px,100% 2px,2px 100%,2px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
}

.stitch-l{
  background-image:repeating-linear-gradient(to bottom,var(--acc) 0 14px,transparent 14px 27px);
  background-size:2px 100%;
  background-position:0 0;
  padding-left:30px;
}

.stitch-r{
  background-image:repeating-linear-gradient(to bottom,var(--acc) 0 14px,transparent 14px 27px);
  background-size:2px 100%;
  background-position:100% 0;
  padding-right:30px;
}

.stitch-t{
  background-image:repeating-linear-gradient(to right,var(--acc) 0 14px,transparent 14px 27px);
  background-size:100% 2px;
  background-position:0 0;
  padding-top:26px;
}

.rule-dash{
  border:0;height:2px;margin:34px 0;
  background:repeating-linear-gradient(to right,var(--acc2) 0 11px,transparent 11px 22px);
}

.rule-double{
  border:0;height:8px;margin:0;
  background-image:
    linear-gradient(var(--tx-dim),var(--tx-dim)),
    repeating-linear-gradient(to right,var(--acc) 0 12px,transparent 12px 24px);
  background-size:100% 1px,100% 2px;
  background-position:0 0,0 6px;
  background-repeat:no-repeat;
}

/* ---------- layout ---------- */

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  row-gap:32px;
}

.label{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--acc2);
  margin:0 0 14px;
}

.num{
  font-size:12px;
  letter-spacing:.19em;
  color:var(--acc2);
  display:block;
  margin-bottom:10px;
}

.dim{color:var(--tx-dim)}

/* ---------- header ---------- */

.site-head{padding:26px 0 22px}
.head-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 28px}

.brand{
  font-family:var(--serif);
  font-size:23px;
  letter-spacing:.03em;
  color:var(--tx);
  border-bottom:0;
}
.brand span{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc2);margin-top:2px}

.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:0}
.site-nav a{
  font-size:14px;letter-spacing:.06em;color:var(--tx);border-bottom:1px solid transparent;padding-bottom:2px;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-bottom-color:var(--acc);color:var(--acc)}

/* ---------- hero ---------- */

.hero{padding:14px 0 76px}
.hero-frame{padding:24px}
.hero-inner{padding:40px 34px 34px}

.hero-title{grid-column:1 / span 8}
.hero-title h1{max-width:14ch}
.hero-lede{grid-column:9 / span 4;align-self:end}
.hero-lede p{font-size:16px;color:var(--tx)}

.hero-media{grid-column:7 / span 6;justify-self:end;margin-top:14px}
.hero-media .framed{padding:12px}
.hero-note{grid-column:1 / span 5;align-self:end;color:var(--tx-dim);font-size:15px}

.framed{display:inline-block;max-width:100%}
figure{margin:0}
figcaption{font-size:13px;color:var(--tx-dim);margin-top:10px;line-height:1.5}

/* ---------- sections ---------- */

.sec{padding:80px 0}
.sec--alt{background:var(--bg-alt)}
.sec--light{background:var(--bg-light);color:var(--tx-dark)}
.sec--light h2,.sec--light h3{color:var(--tx-dark)}
.sec--light .dim,.sec--light figcaption{color:#5c5548}
.sec--light .label,.sec--light .num{color:#7a6a52}
.sec--light a{color:#a6642c;border-bottom-color:rgba(166,100,44,.5)}
.sec--light .stitch-l,
.sec--light .stitch-r,
.sec--light .stitch-t,
.sec--light .stitch{
  --acc:#b5793d;
}

.block-7{grid-column:1 / span 7}
.block-5-r{grid-column:8 / span 5}
.block-6{grid-column:1 / span 6}
.block-6-r{grid-column:7 / span 6}
.block-8{grid-column:1 / span 8}
.block-7-r{grid-column:6 / span 7}
.block-full{grid-column:1 / span 12}
.g1-5{grid-column:1 / span 5}
.g1-4{grid-column:1 / span 4}
.g6-7{grid-column:6 / span 7}
.g9-4{grid-column:9 / span 4}
.g5-8{grid-column:5 / span 8}

/* About page blocks */
.grid--about{row-gap:64px}
.ab1{grid-column:1 / span 8}
.ab2{grid-column:7 / span 6}
.ab3{grid-column:3 / span 7}

.detail-media{grid-column:2 / span 4}
.detail-text{grid-column:7 / span 6}

ul.checks,ol.steps{margin:0 0 18px;padding-left:0;list-style:none}
ul.checks li,ol.steps li{position:relative;padding-left:26px;margin-bottom:11px}
ul.checks li::before{content:"";position:absolute;left:0;top:12px;width:12px;height:2px;background:var(--acc)}
ol.steps{counter-reset:s}
ol.steps li{counter-increment:s;padding-left:36px}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-size:12px;letter-spacing:.12em;color:var(--acc2);
}

.sec--light ol.steps li::before{color:#7a6a52}

.lead{font-size:19px;line-height:1.62}

/* ---------- inner page hero ---------- */

.page-head{padding:10px 0 56px}
.page-head .frame{padding:20px}
.page-head .inner{padding:34px 30px}
.page-head h1{max-width:18ch}
.page-head .sub{grid-column:8 / span 5;align-self:end;color:var(--tx-dim);font-size:16px}
.page-head .ttl{grid-column:1 / span 7}

/* ---------- footer ---------- */

.site-foot{background:var(--bg-alt);margin-top:0}
.foot-pad{padding:16px}
.foot-inner{padding:36px 30px}
.foot-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:28px}
.foot-a{grid-column:1 / span 6}
.foot-b{grid-column:8 / span 5}
.foot-b ul{list-style:none;margin:0 0 18px;padding:0}
.foot-b li{margin-bottom:7px}
.foot-b a{font-size:15px}
.foot-name{font-family:var(--serif);font-size:21px;margin:0 0 10px}
.foot-note{color:var(--tx-dim);font-size:14.5px;line-height:1.6}
.foot-bottom{padding:22px 0 40px;color:var(--tx-dim);font-size:13px}

/* ---------- responsive ---------- */

@media (max-width:960px){
  .hero-title,.hero-lede,.hero-media,.hero-note,
  .block-7,.block-5-r,.block-6,.block-6-r,.block-8,.block-7-r,.block-full,
  .g1-5,.g1-4,.g6-7,.g9-4,.g5-8,.ab1,.ab2,.ab3,
  .detail-media,.detail-text,
  .page-head .ttl,.page-head .sub{grid-column:1 / span 12}
  .hero-media{justify-self:start}
  .hero-lede.stitch-l{padding-left:0;background-image:none}
  .foot-a,.foot-b{grid-column:1 / span 12}
}

@media (max-width:640px){
  body{font-size:16.5px}
  .sec{padding:48px 0}
  .hero{padding:8px 0 48px}
  .hero-frame{padding:14px}
  .hero-inner{padding:26px 18px}
  .page-head .frame{padding:12px}
  .page-head .inner{padding:24px 18px}
  .wrap{padding:0 18px}
  .grid{row-gap:26px}
  .grid--about{row-gap:40px}
  .foot-inner{padding:28px 18px}
  .foot-pad{padding:12px}
  .stitch-r{padding-right:0;background-image:none}
  .head-row{gap:12px}
  .site-nav ul{gap:6px 18px}
}