/* ===========================================================================
   Canaan — legal pages + cookie notice
   Palette and type come from styles/canaan.css; this file adds only the
   long-form document layout and the notice bar. Load canaan.css first.

   These pages are deliberately plain HTML — no React, no runtime, no
   template. A legal page that needs a framework to render is a legal page
   that can fail to render.
   =========================================================================== */

/* ===== page frame ======================================================== */

.doc-nav{
  position:sticky;top:0;z-index:40;
  background:rgba(15,14,12,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.doc-nav__grid{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,2vw,32px);
  height:64px;
}
.doc-nav__right{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}
.doc-nav__right a{
  font-size:12.5px;color:var(--muted);
  transition:color .25s var(--ease);
}
.doc-nav__right a:hover{color:var(--limestone)}
.doc-nav__right a[aria-current="page"]{color:var(--limestone)}
.doc-nav__sep{width:1px;height:14px;background:var(--line-3)}

/* ===== masthead ========================================================== */

.doc-head{padding-block:clamp(48px,8vh,104px) clamp(28px,4vh,48px)}
.doc-head h1{font-size:var(--t-h1);line-height:1.02;max-width:16ch}
.doc-head h1 b{font-weight:400;font-style:italic;color:var(--terracotta)}
.doc-head .lede{
  margin-top:20px;max-width:58ch;
  font-size:var(--t-lead);line-height:1.62;color:var(--body);
  text-wrap:pretty;
}
.doc-meta{
  display:flex;flex-wrap:wrap;gap:8px 26px;
  margin-top:26px;padding-top:20px;
  border-top:1px solid var(--line);
}
.doc-meta div{display:flex;flex-direction:column;gap:5px}
.doc-meta span:last-child{font-size:13px;color:var(--muted)}

/* ===== body + contents =================================================== */

.doc-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(34px,5vw,72px);
  padding-bottom:clamp(60px,10vh,120px);
}
@media(min-width:1000px){
  .doc-wrap{grid-template-columns:210px minmax(0,1fr)}
}

.toc{display:none}
@media(min-width:1000px){
  .toc{
    display:block;position:sticky;top:96px;align-self:start;
    max-height:calc(100vh - 140px);overflow-y:auto;
  }
}
.toc ol{margin:12px 0 0;padding:0;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{
  display:block;padding:6px 0 6px 26px;position:relative;
  font-size:12.5px;line-height:1.4;color:var(--muted);
  transition:color .25s var(--ease);
  text-wrap:pretty;
}
.toc a::before{
  content:counter(toc);position:absolute;left:0;top:7px;
  font-family:var(--mono);font-size:10px;color:var(--ghost);
}
.toc a:hover{color:var(--limestone)}

/* ===== prose ============================================================= */

.prose{max-width:70ch}
.prose > section{
  padding-block:clamp(26px,4vh,40px);
  border-top:1px solid var(--line);
  /* clears the 64px sticky nav, so a link to #cookies lands on the heading
     rather than a few lines past it */
  scroll-margin-top:84px;
}
.prose > section:first-child{border-top:0;padding-top:0}
.prose h2{
  display:flex;gap:16px;align-items:baseline;
  font-size:var(--t-h3);line-height:1.2;
  text-wrap:balance;
}
.prose h2 i{
  font-family:var(--mono);font-style:normal;
  font-size:11px;color:var(--terracotta);
  letter-spacing:.08em;flex:none;
  transform:translateY(-2px);
}
.prose h3{
  margin-top:26px;
  font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.01em;color:var(--limestone);
}
.prose p{
  margin-top:14px;
  font-size:var(--t-body);line-height:1.72;color:var(--body);
  text-wrap:pretty;
}
.prose h2 + p{margin-top:18px}
.prose a{
  color:var(--limestone);
  border-bottom:1px solid var(--accent-line);
  transition:color .2s,border-color .2s;
}
.prose a:hover{color:var(--terracotta)}
.prose strong{color:var(--limestone);font-weight:500}
.prose em{color:var(--limestone);font-style:italic;font-family:var(--serif);font-size:1.06em}

.prose ul{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.prose ul li{
  position:relative;padding-left:20px;
  font-size:var(--t-body);line-height:1.68;color:var(--body);
  text-wrap:pretty;
}
.prose ul li::before{
  content:"";position:absolute;left:2px;top:.66em;
  width:5px;height:1px;background:var(--terracotta);
}
.prose ul li strong{display:block;color:var(--limestone);font-weight:500;margin-bottom:2px}

/* a claim we are making about ourselves, set apart from the running text */
.claim{
  margin-top:20px;padding:18px 20px;
  background:var(--accent-wash);
  border-left:2px solid var(--accent-line);
}
.claim p{margin:0;color:var(--limestone)}
.claim p + p{margin-top:10px}

/* ===== the cookie table ================================================== */

/* The table carries three columns where the prose carries one, so it is
   allowed past the 70ch measure rather than squeezed inside it. There is
   nothing to its right to collide with. */
.tbl{
  margin-top:18px;border-top:1px solid var(--line-2);
  width:min(760px,calc(100vw - 2 * var(--pad)));
}
.tbl__row{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:4px 20px;
  padding-block:14px;
  border-bottom:1px solid var(--line);
}
@media(min-width:660px){
  .tbl__row{grid-template-columns:140px minmax(0,1fr) 84px}
}
.tbl__row code{
  font-family:var(--mono);font-size:11.5px;color:var(--terracotta);
  word-break:break-all;
}
.tbl__row p{margin:0;font-size:13px;line-height:1.6}
.tbl__row .when{font-size:11.5px;color:var(--muted);font-family:var(--mono)}

/* ===== placeholders the studio still has to fill ========================= */

.tbd{
  background:rgba(200,85,61,.14);
  border-bottom:1px dashed var(--accent-line);
  color:var(--terracotta-lift);
  padding:0 4px;
  font-family:var(--mono);font-size:.88em;
}

/* ===== foot ============================================================== */

.doc-foot{
  border-top:1px solid var(--line);
  background:var(--ink-deep);
  padding-block:30px;
}
.doc-foot__grid{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:16px 30px;
}
.doc-foot__grid a,.doc-foot__grid span{font-size:12.5px;color:var(--muted)}
.doc-foot__grid a{transition:color .25s var(--ease)}
.doc-foot__grid a:hover{color:var(--terracotta)}
.doc-foot__links{display:flex;flex-wrap:wrap;gap:14px 22px}

/* ===========================================================================
   Cookie notice — used on every page, including index.html
   =========================================================================== */

.ck{
  position:fixed;inset:auto 0 0 0;z-index:900;
  padding:0 var(--pad) max(var(--pad),env(safe-area-inset-bottom));
  pointer-events:none;
  transform:translateY(14px);opacity:0;
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.ck[data-in="true"]{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){
  .ck{transition:none;transform:none}
}

.ck__panel{
  pointer-events:auto;
  width:100%;max-width:var(--shell);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  justify-content:space-between;
  padding:18px 22px;
  background:rgba(19,17,16,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line-2);
  border-top:1px solid var(--accent-line);
  box-shadow:0 26px 70px -30px rgba(0,0,0,.9);
}
.ck__text{max-width:72ch;min-width:min(100%,32ch);flex:1 1 380px}
.ck__text p{
  margin:0;font-size:12.5px;line-height:1.62;color:var(--body);
  text-wrap:pretty;
}
.ck__text a{
  color:var(--limestone);
  border-bottom:1px solid var(--accent-line);
  transition:color .2s;
}
.ck__text a:hover{color:var(--terracotta)}
.ck__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex:none}
.ck__acts .btn{white-space:nowrap}

@media(max-width:620px){
  .ck__panel{flex-direction:column;align-items:stretch;padding:18px}
  /* The 380px basis above is a width. Once the panel stacks it would become
     a height and blow the notice up to half the screen, so it is reset. */
  .ck__text{flex:0 1 auto;min-width:0}
  .ck__acts{justify-content:flex-start}
  .ck__acts .btn{flex:1 1 auto;justify-content:center}
}