/* Tofadachi public website.
   Dark by default, light through prefers-color-scheme.

   Colour notes. Every pair below was measured against the WCAG relative
   luminance formula before being chosen.
     dark  body text  #F5F2EA on #0B0B0C  17.59:1
     dark  muted text #BDB8AC on #0B0B0C   9.95:1
     dark  brass      #C9A24A on #0B0B0C   8.20:1
     dark  border     #6A645A on #121214    3.19:1
     light body text  #16191B on #FAF8F3  16.64:1
     light muted text #4A4A46 on #FAF8F3   8.39:1
     light brass      #8A6508 on #FAF8F3   5.01:1
     light border     #8C867B on #FFFFFF    3.61:1
   The border is the subtlest tone that still clears the 3:1 asked of
   borders, so it is as quiet as the rule allows rather than as quiet as
   the eye might like. */

:root{
  --bg:#0B0B0C;
  --surface:#121214;
  --text:#F5F2EA;
  --muted:#BDB8AC;
  --brass:#C9A24A;
  --border:#6A645A;
  --focus:#C9A24A;

  --measure:68ch;
  --gap:clamp(2.5rem, 6vw, 5rem);
  --pad:clamp(1rem, 4vw, 2rem);
  --radius:16px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#FAF8F3;
    --surface:#FFFFFF;
    --text:#16191B;
    --muted:#4A4A46;
    --brass:#8A6508;
    --border:#8C867B;
    --focus:#6B4E06;
  }
}

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

html{
  -webkit-text-size-adjust:100%;
  /* No smooth scrolling. Anchor jumps should land immediately and the
     page has no sticky header to scroll under. */
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1.125rem;          /* 18px floor */
  line-height:1.6;
  /* Long words and addresses wrap rather than push the page sideways at
     320px or at 400 per cent zoom. Overflow is fixed at the cause, not
     hidden with overflow-x, which would only clip it out of sight. */
  overflow-wrap:break-word;
}

/* ---- Skip link ---------------------------------------------------- */

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--surface);
  color:var(--text);
  border:2px solid var(--brass);
  border-radius:var(--radius);
  padding:14px 20px;
  text-decoration:none;
}
.skip:focus{left:12px;top:12px;}

/* ---- Focus ---------------------------------------------------------
   Never removed, never thinner than 3px, and offset so it is not
   swallowed by the thing it surrounds. */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:4px;
}

/* ---- Layout -------------------------------------------------------- */

.wrap{
  width:100%;
  max-width:72rem;
  margin:0 auto;
  padding-inline:var(--pad);
}

main{display:block;}

.band{padding-block:var(--gap);}
.band + .band{border-top:1px solid var(--border);}

.measure{max-width:var(--measure);}

/* ---- Header -------------------------------------------------------- */

.site-header{
  border-bottom:1px solid var(--border);
  padding-block:1rem;
}
.site-header .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.5rem 2rem;
}

.wordmark{
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--text);
  text-decoration:none;
  /* 44px minimum target. */
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-inline:2px;
}
.wordmark:hover{color:var(--brass);}

.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:0.125rem 1.25rem;
}
.site-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-inline:2px;
  color:var(--muted);
  text-decoration:none;
}
.site-nav a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px;}
.site-nav a[aria-current="page"]{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--brass);
  text-decoration-thickness:3px;
  text-underline-offset:6px;
}

/* ---- Type ---------------------------------------------------------- */

h1,h2,h3{
  line-height:1.15;
  margin:0 0 0.5em;
  font-weight:600;
  text-wrap:balance;
  /* The accessibility statement heading contains the bare domain name,
     a single 34 character token that cannot fit 320px at heading size.
     It must be allowed to break rather than widen the page. */
  overflow-wrap:anywhere;
}
h1{font-size:clamp(2rem, 1.3rem + 3.4vw, 3.75rem);letter-spacing:-0.02em;}
h2{font-size:clamp(1.5rem, 1.15rem + 1.7vw, 2.25rem);color:var(--brass);letter-spacing:-0.01em;}
h3{font-size:clamp(1.175rem, 1.05rem + 0.6vw, 1.4rem);}

p{margin:0 0 1.1em;max-width:var(--measure);}
.lead{font-size:clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);color:var(--text);}

a{color:var(--text);text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}

.muted{color:var(--muted);}

/* Long unbroken strings, such as the email address, must wrap rather
   than push the page sideways at 320px. */
.nowrap-safe{overflow-wrap:anywhere;}

/* The email address is the main action on the site, so it is given a
   44px tall target even though it sits inside a sentence. Links that are
   genuinely part of running prose keep the WCAG inline exception. */
.mail-link{
  display:inline-block;
  min-height:44px;
  padding-block:0.5rem;
  overflow-wrap:anywhere;
}

/* ---- Actions ------------------------------------------------------- */

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem 1rem;
  margin:1.75rem 0 0;
  padding:0;
  list-style:none;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:44px;
  padding:0.7rem 1.35rem;
  border:2px solid var(--brass);
  border-radius:var(--radius);
  color:var(--text);
  text-decoration:none;
  font-weight:600;
}
.btn:hover{background:var(--brass);color:var(--bg);}
.btn-quiet{border-color:var(--border);}
.btn-quiet:hover{border-color:var(--brass);background:transparent;color:var(--brass);}

/* ---- Cards --------------------------------------------------------- */

.cards{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
}
.card h3{margin-top:0;color:var(--brass);}
.card p{margin-bottom:0;}

/* ---- Product and service entries ----------------------------------- */

.entry{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  padding:clamp(1.25rem, 3vw, 2rem);
  margin-block-end:1.25rem;
}
.entry h2{margin-top:0;}
.entry > :last-child{margin-bottom:0;}

.status{
  display:inline-block;
  font-weight:600;
  color:var(--brass);
  border:1px solid var(--border);
  border-radius:999px;
  padding:0.3rem 0.85rem;
  margin:0.25rem 0 1.1em;
  font-size:1rem;
}

/* ---- Pull quote ---------------------------------------------------- */

.pull{
  border-inline-start:4px solid var(--brass);
  padding-inline-start:1.25rem;
  margin-block:var(--gap) 0;
  font-size:clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  max-width:var(--measure);
}

/* ---- Figure -------------------------------------------------------- */

figure{margin:2rem 0 0;max-width:var(--measure);}
figcaption{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  padding:1.25rem 1.4rem;
  color:var(--muted);
}
figcaption b{
  display:block;
  color:var(--brass);
  font-size:0.95rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:0.4rem;
}

/* ---- Lists in prose ------------------------------------------------ */

.prose ul{max-width:var(--measure);padding-inline-start:1.3rem;}
.prose li{margin-bottom:0.5em;}

/* ---- Footer -------------------------------------------------------- */

.site-footer{
  border-top:1px solid var(--border);
  margin-top:var(--gap);
  padding-block:var(--gap);
  color:var(--muted);
}
.site-footer nav ul{
  list-style:none;margin:0 0 1.5rem;padding:0;
  display:flex;flex-wrap:wrap;gap:0.125rem 1.5rem;
}
.site-footer nav a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--text);
}
.site-footer a[aria-current="page"]{text-decoration-color:var(--brass);text-decoration-thickness:3px;}
.legal{font-size:1rem;max-width:var(--measure);margin:0;}

/* ---- Motion --------------------------------------------------------
   The reveal only ever starts once the script has added .js-reveal to
   the root, and the script only adds it when the reader has not asked
   for reduced motion. With scripting off, or with reduced motion set,
   nothing is hidden and nothing moves. */

@media (prefers-reduced-motion: no-preference){
  .js-reveal .reveal{
    opacity:0;
    transform:translateY(14px);
    transition:opacity 500ms ease-out, transform 500ms ease-out;
  }
  .js-reveal .reveal.is-visible{
    opacity:1;
    transform:none;
  }
  /* If focus reaches anything inside a section that has not been
     revealed yet, show it at once. Nobody should ever be tabbed onto
     something they cannot see. */
  .js-reveal .reveal:focus-within{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ---- Prices ---------------------------------------------------------
   Brass on the page ground measures 8.20:1 in dark and 5.01:1 in light,
   so a price reads as a heading would and still clears the 4.5:1 asked
   of ordinary text, not only the 3:1 allowed for large text. */

.price{
  font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  line-height:1.2;
  font-weight:600;
  color:var(--brass);
  margin:0 0 0.6em;
}

/* ---- Numbered steps ------------------------------------------------- */

.steps{
  max-width:var(--measure);
  padding-inline-start:1.4rem;
  margin:0 0 1.5rem;
}
.steps li{
  margin-bottom:0.9em;
  padding-inline-start:0.3rem;
}
.steps li::marker{
  color:var(--brass);
  font-weight:600;
}