/* Trikabi — specimen-sheet */

:root{
  --bg:#efeae1;
  --bg-alt:#e3dbce;
  --bg-dark:#2c3a5c;
  --ink:#2b2822;
  --ink-soft:#6f6759;
  --ink-invert:#efeae1;
  --accent:#a83b2c;
  --accent2:#6e7a47;
  --rule:#c9c0b0;
  --gap:88px;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}

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

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- sheet ---------- */

.sheet{
  max-width:1180px;
  margin:40px auto;
  padding:0;
  background:var(--bg);
  border:1px solid var(--accent);
}

.pad{padding:0 clamp(20px,4vw,56px)}

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

/* ---------- topbar / nav ---------- */

.topbar{
  border-bottom:1px solid var(--rule);
  padding-top:20px;
  padding-bottom:16px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px 28px;
}

.brand{
  font-size:19px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand span{
  display:block;
  font-size:12px;
  font-weight:400;
  letter-spacing:.09em;
  color:var(--accent2);
}

.nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
}
.nav a{
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  padding:2px 0;
  border-bottom:1px solid transparent;
}
.nav a:hover{border-bottom-color:var(--accent)}
.nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)}

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

.hero{padding-top:48px;padding-bottom:8px}

.hero h1{
  grid-column:1 / span 8;
  margin:0;
  font-size:clamp(34px,5.6vw,62px);
  line-height:1.03;
  font-weight:700;
  letter-spacing:-0.025em;
}

.spec{
  grid-column:9 / span 4;
  border:1px solid var(--rule);
  padding:14px 16px;
  align-self:start;
  font-size:13px;
  line-height:1.55;
  color:var(--ink-soft);
}
.spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:6px}
.spec dt{color:var(--accent2);letter-spacing:.05em}
.spec dd{margin:0;color:var(--ink)}

.lede{
  grid-column:1 / span 7;
  margin:34px 0 0;
  font-size:19px;
  line-height:1.65;
}

/* ---------- figures ---------- */

.figmain{
  grid-column:1 / span 5;
  margin:40px 0 0;
}
.figmain img{border:1px solid var(--rule);width:100%}
.figmain figcaption,
.figside{
  font-size:13px;
  line-height:1.55;
  color:var(--ink-soft);
}
.figmain figcaption{margin-top:10px}

.figside{
  grid-column:7 / span 4;
  align-self:end;
  margin:40px 0 0;
  padding-left:16px;
  border-left:1px solid var(--accent2);
}

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

.band{padding:var(--gap) 0 0}
.band.alt{background:var(--bg-alt);margin-top:var(--gap);padding:calc(var(--gap) - 16px) 0}
.band.dark{background:var(--bg-dark);color:var(--ink-invert);margin-top:var(--gap);padding:calc(var(--gap) - 16px) 0}
.band.dark h2,.band.dark h3{color:var(--ink-invert)}
.band.dark a{color:#e0b6ae}
.band.dark .side,
.band.dark figcaption{color:#c3c9d8}
.band.dark .card{border-color:#59647f}

h2{
  font-size:clamp(23px,2.6vw,31px);
  line-height:1.2;
  font-weight:700;
  letter-spacing:-0.012em;
  margin:0 0 18px;
}
h3{
  font-size:19px;
  line-height:1.35;
  font-weight:700;
  margin:32px 0 10px;
}

p{margin:0 0 16px;max-width:68ch}

.col-main{grid-column:1 / span 7}
.col-side{grid-column:9 / span 4}

.side{
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
}

.card{
  border:1px solid var(--rule);
  padding:14px 16px;
  margin-bottom:18px;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
}
.card h3{
  margin:0 0 8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--accent2);
}
.card p{margin:0 0 8px;max-width:none}
.card p:last-child{margin:0}
.card ul{margin:0;padding-left:16px}
.card li{margin-bottom:5px}
.card a{color:var(--accent)}

/* lists */

ul.checks{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  max-width:68ch;
}
ul.checks li{
  position:relative;
  padding-left:22px;
  margin-bottom:9px;
}
ul.checks li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:9px;height:1px;
  background:var(--accent);
}

ol.steps{
  margin:0 0 20px;
  padding-left:22px;
  max-width:68ch;
}
ol.steps li{margin-bottom:10px}
ol.steps li::marker{color:var(--accent2);font-weight:700}

dl.terms{margin:0 0 20px;max-width:68ch}
dl.terms dt{font-weight:700;margin-top:14px}
dl.terms dd{margin:2px 0 0}

/* separator with end ticks */

.rule{
  position:relative;
  height:1px;
  background:var(--rule);
  margin:var(--gap) 0 0;
}
.rule::before,.rule::after{
  content:"";
  position:absolute;
  top:-4px;
  width:1px;height:9px;
  background:var(--accent2);
}
.rule::before{left:0}
.rule::after{right:0}

/* detail image inside dark band */

.detailwrap{align-items:center;row-gap:28px}
.figdetail{grid-column:8 / span 5;margin:0}
.figdetail img{border:1px solid #59647f;width:100%}
.figdetail figcaption{margin-top:10px;font-size:13px;line-height:1.55;color:#c3c9d8}
.detailtext{grid-column:1 / span 6}

/* about */

.abouttext{grid-column:1 / span 7}
.aboutside{grid-column:9 / span 4}

/* legal / long text pages */

.doc{grid-column:1 / span 8}
.docside{grid-column:10 / span 3}

/* footer */

footer.site{
  max-width:1180px;
  margin:0 auto 40px;
  padding:0 clamp(20px,4vw,56px) 8px;
}
.footrow{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:8px 24px;
  padding-bottom:14px;
}
.footname{font-weight:700}
.footline{height:1px;background:var(--rule)}
.footbottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:14px 32px;
  padding-top:14px;
  font-size:13px;
  color:var(--ink-soft);
}
.footbottom ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0}
.footbottom a{color:var(--ink)}
.footnote{max-width:52ch;margin:0}

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

@media (max-width:900px){
  :root{--gap:52px}
  .sheet{margin:20px 14px}
  .hero{padding-top:34px}
  .hero h1,.spec,.lede,.figmain,.figside,
  .col-main,.col-side,.figdetail,.detailtext,
  .abouttext,.aboutside,.doc,.docside{grid-column:1 / -1}
  .spec{margin-top:24px}
  .figside{border-left:0;padding-left:0;border-top:1px solid var(--accent2);padding-top:12px;margin-top:16px}
  .figmain{max-width:420px}
  .figdetail{max-width:420px;margin-bottom:24px}
  .col-side{margin-top:26px}
  .footbottom{flex-direction:column}
}

@media (max-width:520px){
  body{font-size:16px}
  .topbar{flex-direction:column;align-items:flex-start}
}