/* ============================================================
   Kevin Cohen Design — "Claude" warm-clay theme  (STAGED PREVIEW)
   kevtheme, 2026-10-14.  Load this LAST in <head> so the :root
   token redefinitions win over the inline/house CSS.
   Palette = colours only.  No Claude/Anthropic name, mark or logo.
   The ENTIRE theme is this one file — one edit changes everything.
   ============================================================ */

:root{
  /* ---- canvas & surfaces ---- */
  --bg:#faf7f2;            /* warm cream canvas            */
  --bg-2:#f1ece3;          /* warm sand secondary band     */
  --surface:#ffffff;       /* card / panel                 */

  /* ---- hairlines ---- */
  --line:rgba(30,27,22,.12);
  --line-2:rgba(30,27,22,.22);

  /* ---- ink (warm near-black -> warm greys) ---- */
  --ink:#1d1b16;           /* 16.1:1 on cream  (AAA)       */
  --ink-dim:#5b5349;       /* 7.07:1 on cream  (AAA body)  */
  --ink-faint:#6e665c;     /* 5.29:1 on cream  (AA labels) */

  /* ---- clay accents ---- */
  --accent:#b04a2e;        /* workhorse clay: AA as text (5.08 cream /
                              4.62 sand) AND white-on-clay (5.43) buttons */
  --accent-2:#8a3620;      /* deep clay: link hover / emphasis (7.47)   */
  --accent-bright:#d97757; /* true clay tone — DECORATIVE ONLY, never
                              load-bearing text (bars, glows, ticks,
                              grid lines, hover grade) */
  --clay-tint:rgba(217,119,87,.10);

  --radius:3px;
  --ease:cubic-bezier(.22,1,.36,1);
  --focus:#b04a2e;
}

/* ============================================================
   1.  VISIBLE FOCUS  (site hides the native cursor, so keyboard
       focus must be unmistakable — accessibility win)
   ============================================================ */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:2px;
}

/* ============================================================
   2.  SOFT LAYERED SHADOWS  (architectural depth, not flat boxes)
   ============================================================ */
.work,.j-card,.svc-hero,figure.kc-fig,.a-cta .box{
  box-shadow:0 1px 2px rgba(31,28,23,.04),
             0 10px 30px -14px rgba(31,28,23,.14);
}
.work:hover,.j-card:hover{
  box-shadow:0 1px 2px rgba(31,28,23,.05),
             0 20px 46px -16px rgba(176,74,46,.24);
}

/* ============================================================
   3.  CLAY TOP-BARS & PLAN-LINE SECTION HEADS
   ============================================================ */
.j-card::before{
  background:linear-gradient(90deg,var(--accent-bright),var(--accent));
  height:2px;
}
/* dimension-line under every section head */
.sec-head{
  position:relative;
  border-bottom:1px solid var(--line);
  padding-bottom:clamp(16px,2vw,22px);
}
.sec-head::after{
  content:"";
  position:absolute;left:0;bottom:-1px;
  width:54px;height:2px;
  background:var(--accent);
}

/* ============================================================
   4.  CORNER TICKS  (plan-drawing registration marks on cards)
   ============================================================ */
.work,.j-card{position:relative}
.work::after,.j-card::after{
  content:"";
  position:absolute;top:10px;right:10px;
  width:13px;height:13px;
  border-top:1.5px solid var(--accent-bright);
  border-right:1.5px solid var(--accent-bright);
  opacity:0;transform:translate(-3px,3px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  pointer-events:none;z-index:3;
}
.work:hover::after,.j-card:hover::after{opacity:.9;transform:none}

/* ============================================================
   5.  JOURNAL CARD — repair dark-theme hover remnant (#17171b
       made text unreadable) + warm clay lift
   ============================================================ */
.j-card:hover{
  background:var(--surface);
  border-color:rgba(176,74,46,.40);
  transform:translateY(-5px);
}
.j-card:hover h3{color:var(--accent-2)}

/* ============================================================
   6.  IMAGE TREATMENTS — gentle arched top + warm clay grade
   ============================================================ */
.svc-hero,.a-hero{border-radius:12px 12px var(--radius) var(--radius)}
.work .frame{position:relative}
.work .frame::after{
  content:"";position:absolute;inset:0;
  background:var(--accent-bright);
  mix-blend-mode:multiply;opacity:0;
  transition:opacity .6s var(--ease);
  pointer-events:none;z-index:1;
}
.work:hover .frame::after{opacity:.12}

/* ============================================================
   7.  OFF-PALETTE LITERALS left by the old bronze theme -> clay
   ============================================================ */
.sign-pen{
  background:linear-gradient(180deg,transparent,var(--accent-bright),transparent);
  box-shadow:0 0 18px 3px rgba(217,119,87,.55);
}
body.hovering .cursor-ring{
  border-color:var(--accent);
  background:rgba(217,119,87,.05);
}
.award-band{
  background:linear-gradient(90deg,rgba(217,119,87,.16),rgba(217,119,87,.02));
}
.a-body a{border-bottom-color:rgba(217,119,87,.40)}

/* ============================================================
   8.  TEXT-SELECTION & THEME-COLOR already use --accent (clay).
       Keep white on clay (5.43:1).
   ============================================================ */
::selection{background:var(--accent);color:#fff}

/* ============================================================
   9.  REDUCED MOTION — honour the user preference everywhere
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .work:hover .frame::after,.work:hover img{transform:none}
}