/* DJWB & Co – legal pages
   Matches the live site's tokens (styles.css, Aug 2026): ink, charcoal, paper, brass, rust, steel.
   Load after the site's own styles.css if you want one stylesheet; this file also works on its own. */

:root{
  --ink:#12161d; --charcoal:#1c222c; --charcoal-2:#252c38;
  --paper:#f4f0e6; --paper-dim:#e9e2d1; --card:#fbf9f4;
  --brass:#b4863c; --brass-light:#dcb877; --rust:#8c4433; --steel:#8a93a3;
  --line:rgba(180,134,60,0.28); --body-text:#2b3038; --muted:#4a4f57;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.65;color:var(--body-text);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:var(--rust)}
a:hover{color:var(--brass)}
h1,h2,h3,h4{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.12;letter-spacing:-0.01em;color:var(--ink)}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}

/* Header – same as the home page */
header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(18,22,29,0.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(180,134,60,0.18)}
nav{max-width:1120px;margin:0 auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.15rem;letter-spacing:0.01em;color:var(--paper);text-decoration:none}
.logo span{color:var(--brass)}
.navlinks{display:flex;gap:34px}
.navlinks a{font-family:"IBM Plex Mono",monospace;font-size:0.76rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--steel);text-decoration:none}
.navlinks a:hover{color:var(--brass-light)}
.navcta{font-family:"IBM Plex Mono",monospace;font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;background:var(--brass-light);color:var(--ink);padding:9px 18px;border-radius:2px;text-decoration:none}
.navcta:hover{background:var(--brass);color:var(--ink)}
.nav-check{display:none}
.navtoggle{display:none;cursor:pointer;flex-direction:column;gap:5px}
.navtoggle span{display:block;width:22px;height:2px;background:var(--paper)}
@media (max-width:860px){
  .navtoggle{display:flex}
  .navcta{display:none}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--ink);border-bottom:1px solid rgba(180,134,60,0.18)}
  .navlinks a{padding:14px 32px;border-top:1px solid rgba(244,240,230,0.06)}
  .nav-check:checked ~ .navlinks{display:flex}
}

/* Page head – a short dark band in place of the home-page hero */
.page-head{background:var(--ink);color:var(--paper);padding:150px 0 64px;background-image:radial-gradient(circle at 85% 20%,rgba(180,134,60,0.12),transparent 45%)}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:"IBM Plex Mono",monospace;font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--brass);margin-bottom:18px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--brass)}
.page-head h1{color:var(--paper);font-size:clamp(2rem,4vw,3rem);margin:0 0 16px;max-width:22ch}
.page-head .lede{color:#c9cdd4;max-width:62ch;margin:0;font-size:1.05rem}
.meta{margin-top:26px;font-family:"IBM Plex Mono",monospace;font-size:0.72rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--steel)}
.meta span+span::before{content:" · "}

/* Body – a reading column with a sticky contents list */
.legal{padding:72px 0 110px}
.legal-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;align-items:start}
.toc{position:sticky;top:100px;font-size:0.85rem}
.toc .toc-title{font-family:"IBM Plex Mono",monospace;font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--brass);margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc li a{display:block;padding:5px 0 5px 14px;color:var(--muted);text-decoration:none;line-height:1.35}
.toc li a:hover{color:var(--rust)}
.prose{max-width:72ch}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.75rem);margin:56px 0 16px;padding-top:24px;border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:1.12rem;margin:30px 0 10px}
.prose p,.prose li{margin:0 0 14px}
.prose ul{padding-left:20px}
.prose li::marker{color:var(--brass)}
.clause{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:4px;margin:0 0 14px}
.clause .n{font-family:"IBM Plex Mono",monospace;font-size:0.8rem;color:var(--brass);padding-top:3px}
.clause p{margin:0}
.clause.em p{font-style:italic}
.box{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:4px;padding:18px 22px;margin:22px 0}
.box .box-label{font-family:"IBM Plex Mono",monospace;font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--brass);margin-bottom:6px}
.box.rust{border-left-color:var(--rust)}
.box.rust .box-label{color:var(--rust)}
.box p:last-child{margin-bottom:0}
dl.facts{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);margin:0 0 20px;border-top:1px solid var(--line)}
dl.facts dt,dl.facts dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
dl.facts dt{font-family:"IBM Plex Mono",monospace;font-size:0.74rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);padding-right:16px;padding-top:15px}
.table-wrap{overflow-x:auto;margin:18px 0 22px}
table{width:100%;border-collapse:collapse;font-size:0.92rem;background:var(--card);border:1px solid var(--line)}
th{font-family:"IBM Plex Mono",monospace;font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;text-align:left;background:var(--charcoal);color:var(--paper);padding:10px 12px;font-weight:400}
td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:22px;text-decoration:none;color:var(--body-text);display:block}
.card h3{margin:0 0 6px;font-size:1.05rem}
.card p{margin:0;font-size:0.9rem;color:var(--muted)}
.card:hover{border-color:var(--brass)}
.btn-primary{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:0.78rem;letter-spacing:0.05em;text-transform:uppercase;background:var(--brass-light);color:var(--ink);padding:14px 26px;border-radius:2px;text-decoration:none}
.btn-primary:hover{background:var(--brass);color:var(--ink)}
.print-link{font-family:"IBM Plex Mono",monospace;font-size:0.72rem;letter-spacing:0.05em;text-transform:uppercase}

/* Footer – the home-page footer plus the legal line every page needs */
footer{background:var(--ink);border-top:1px solid rgba(244,240,230,0.1);padding:40px 0 34px;color:var(--steel)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 40px}
.fbrand{font-family:Fraunces,Georgia,serif;color:var(--paper);font-size:0.95rem}
footer p{font-size:0.78rem;max-width:60ch;margin:6px 0 0}
.flinks{display:flex;flex-wrap:wrap;gap:8px 22px;align-content:flex-start;max-width:420px}
.flinks a{font-family:"IBM Plex Mono",monospace;font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--steel);text-decoration:none}
.flinks a:hover{color:var(--brass-light)}
.fcompany{flex-basis:100%;font-size:0.72rem;border-top:1px solid rgba(244,240,230,0.08);padding-top:16px;margin-top:4px}

@media (max-width:900px){
  .legal-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .legal-grid > *{min-width:0}
  .toc{position:static;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:16px 18px}
}
@media (max-width:720px){
  .wrap,nav{padding-left:22px;padding-right:22px}
  .page-head{padding:120px 0 48px}
  .legal{padding:48px 0 72px}
  .cards{grid-template-columns:1fr}
  dl.facts{grid-template-columns:1fr}
  dl.facts dt{border-bottom:0;padding-bottom:0}
  .clause{grid-template-columns:2.8em minmax(0,1fr)}
}
@media print{
  header,.toc,footer .flinks,.print-link{display:none}
  .page-head{padding:20px 0;background:none;color:#000}
  .page-head h1{color:#000}
  .legal-grid{display:block}
  body{background:#fff}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Data protection contact form (js/dp-form.js) */
.dp-form{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:4px;padding:22px;margin:22px 0}
.dp-form label{display:block;font-family:"IBM Plex Mono",monospace;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.dp-form label:first-of-type{margin-top:0}
.dp-form input,.dp-form select,.dp-form textarea{width:100%;font:inherit;font-size:0.95rem;color:var(--body-text);background:#fff;border:1px solid var(--line);border-radius:3px;padding:10px 12px}
.dp-form input:focus,.dp-form select:focus,.dp-form textarea:focus{outline:2px solid var(--brass);outline-offset:1px}
.dp-form textarea{min-height:140px;resize:vertical}
.dp-form button{margin-top:18px;border:0;cursor:pointer}
.dp-form .dp-note{font-size:0.85rem;color:var(--muted);margin:14px 0 0}
.dp-status{margin:14px 0 0;font-size:0.9rem}
.dp-status.dp-error{color:var(--rust)}
.dp-status.dp-ok{color:var(--body-text)}