/* ==========================================================================
   sen-cutler.net — design system
   Sections: tokens · base · chrome · hero · demo · blocks · rail · article
             · lists · legacy · footer · responsive
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#000;            /* text on light */
  --ink-soft:#000;       /* long-form prose */
  --muted:#000;          /* secondary text */
  --band:#16212e;        /* the dark hero band. was --ink, split out so that
                            text could go black without blackening the band. */
  --paper:#fff;
  --wash:#f3f6f6;
  --rule:#dde3e5;
  --field:#b9c2c7;

  /* semantic: messy vs clean. used by demo panes only. */
  --messy:#9c4a2f;
  --messy-wash:#f7ebe6;

  --measure:64rem;
  --rail:21rem;

  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* default accent; per-service classes override */
  --accent:#0f7b83;
  --accent-dark:#0a5a60;
  --accent-wash:#e2f0f1;
  --accent-line:#b7d9dc;
  --accent-bright:#7fd0d6;
}

.accent-teal{--accent:#0f7b83;--accent-dark:#0a5a60;--accent-wash:#e2f0f1;--accent-line:#b7d9dc;--accent-bright:#7fd0d6}
.accent-indigo{--accent:#4a54a6;--accent-dark:#363e7d;--accent-wash:#e8e9f6;--accent-line:#c3c6e6;--accent-bright:#a3aae8}
.accent-ochre{--accent:#98661a;--accent-dark:#714b12;--accent-wash:#f6eede;--accent-line:#e0cda3;--accent-bright:#e3b767}
.accent-plum{--accent:#8b3d63;--accent-dark:#692c4a;--accent-wash:#f6e8ee;--accent-line:#e2c0d0;--accent-bright:#dda1bd}
.accent-moss{--accent:#3f7248;--accent-dark:#2d5434;--accent-wash:#e7f1e8;--accent-line:#bcd6c0;--accent-bright:#8fc79a}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:1.0625rem/1.65 var(--sans);
  color:var(--ink);
  background:var(--paper);
}
h1,h2,h3{letter-spacing:-.015em}
a{color:var(--accent-dark)}
a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.25rem}

.skip{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--band);color:#fff;padding:.7rem 1rem;text-decoration:none;
}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- chrome: masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead-inner{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:1.5rem;
  padding-top:.85rem;padding-bottom:.85rem;
}
.wordmark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.wordmark .mark{width:2rem;height:2rem;flex:0 0 auto;color:var(--ink);display:block}
.wordmark-text{display:block;font-weight:800;font-size:1.1rem;line-height:1.15}
.wordmark-text small{display:block;font-weight:400;font-size:.76rem;color:var(--muted);letter-spacing:0}

.nav-util{display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-end}
.nav-util a{color:var(--muted);text-decoration:none;font-size:.9rem;white-space:nowrap}
.nav-util a[aria-current=page]{color:var(--accent-dark)}
.nav-util a:hover,.nav-util a:focus-visible{color:var(--accent-dark);text-decoration:underline}

/* ---------- hero band ---------- */
.hero{background:var(--band);color:#fff;padding:3.25rem 0 3.5rem}
.hero--slim{padding:2.25rem 0}
.hero a{color:var(--accent-bright)}
.hero h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:800;line-height:1.08;margin:0 0 .85rem}
.hero--slim h1{font-size:clamp(1.6rem,3.5vw,2.2rem);margin-bottom:.4rem}
.hero .deck{margin:0;max-width:36rem;font-size:1.125rem;line-height:1.55;color:#fff}
.hero--slim .deck{font-size:1rem}
.hero .btn{margin-top:1.75rem;width:auto}

/* split hero: copy left, clickable pull quote right */
.hero-split{display:grid;grid-template-columns:1fr 19rem;gap:3rem;align-items:start}
.hero-quote{
  display:block;text-decoration:none;padding:0 0 0 1.1rem;
  border-left:3px solid var(--accent-bright);
}
.hero-quote blockquote{margin:0;font-size:.98rem;line-height:1.5;color:#fff}
.hero-quote blockquote::before{content:"\201C"}
.hero-quote blockquote::after{content:"\201D"}
.hero-quote-by{
  display:block;margin-top:.7rem;font-size:.78rem;line-height:1.4;
  color:#fff;
}
.hero-quote:hover blockquote{color:#fff}
.hero-quote:hover{border-left-color:#fff}

/* ---------- signature demo panes ---------- */
.demo{margin-top:2.5rem;display:grid;gap:1rem;grid-template-columns:1fr auto 1fr;align-items:center}
.pane{border-radius:5px;overflow:hidden;background:#0e1822;border:1px solid #2b3947}
.pane-label{
  font:600 .68rem/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;
  padding:.55rem .75rem;border-bottom:1px solid #2b3947;color:#8896a4;
}
.pane.before .pane-label{color:#e0937a;background:#1b1512}
.pane.after .pane-label{color:var(--accent-bright);background:#0d1c1e}
.pane table{width:100%;border-collapse:collapse;font:.78rem/1.35 var(--mono)}
.pane td{padding:.4rem .75rem;color:#b9c6d2;white-space:nowrap}
.pane tr+tr td{border-top:1px solid #212d3a}
.pane.after td{color:#d8ecee}
.pane .blob{
  font:.72rem/1.5 var(--mono);color:#8b98a6;padding:.7rem .75rem;
  white-space:pre-wrap;word-break:break-word;
}
.pane .blob mark{background:transparent;color:var(--accent-bright);font-weight:700}
.arrow{color:#5b6873;font-size:1.5rem;text-align:center;line-height:1}

/* ---------- body layout with rail ---------- */
.layout{
  display:grid;gap:3rem;
  grid-template-columns:minmax(0,1fr) var(--rail);
  padding:3rem 0 4rem;align-items:start;
}
.layout--wide{grid-template-columns:minmax(0,1fr)}

/* ---------- content blocks ---------- */
.section-label{
  font:600 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:.16em;
  color:var(--muted);margin:0 0 .9rem;
}
.blocks{margin-bottom:2.5rem}
.block{
  padding:1.4rem 1.5rem;background:var(--wash);
  border-left:3px solid var(--accent);border-radius:0 4px 4px 0;
}
.block+.block{margin-top:.85rem}
.block h2{margin:0 0 .3rem;font-size:1.05rem;font-weight:700}
.block p{margin:0;color:var(--ink-soft)}

.strip{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .75rem;padding:0;list-style:none}
.chip{font:600 .82rem/1 var(--mono);padding:.45rem .7rem;border:1px solid var(--rule);border-radius:3px;color:var(--muted)}
.chip.on{background:var(--accent-wash);border-color:var(--accent-line);color:var(--accent-dark)}
.note{margin:0;color:var(--muted);font-size:.95rem}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:4px;
  overflow:hidden;margin-top:2.5rem;
}
.stat{background:var(--paper);padding:1.1rem 1rem}
.stat b{display:block;font:800 1.4rem/1.1 var(--sans);letter-spacing:-.02em;color:var(--accent-dark)}
.stat span{display:block;margin-top:.25rem;font-size:.85rem;color:var(--muted)}

/* ---------- rail: contact card ---------- */
.rail{position:sticky;top:1.5rem}
.card{
  border:1px solid var(--rule);border-top:4px solid var(--accent);
  border-radius:4px;padding:1.4rem;background:var(--paper);
}
.card h2{margin:0 0 .4rem;font-size:1.15rem;font-weight:800}
.card>p{margin:0 0 1.1rem;color:var(--muted);font-size:.95rem;line-height:1.5}
.card label{display:block;margin-top:.9rem;margin-bottom:.25rem;font-size:.82rem;font-weight:700}
.card input,.card select,.card textarea{
  display:block;width:100%;padding:.55rem .65rem;font:inherit;font-size:.95rem;
  border:1px solid var(--field);border-radius:3px;background:var(--paper);color:var(--ink);
}
.card input:focus,.card select:focus,.card textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.card textarea{resize:vertical}
.card .alt{margin:.9rem 0 0;font-size:.88rem;color:var(--muted)}

.btn{
  display:inline-block;width:100%;margin-top:1.1rem;
  padding:.75rem 1.25rem;border:0;border-radius:3px;
  background:var(--accent);color:#fff;
  font:700 1rem/1 var(--sans);text-align:center;text-decoration:none;cursor:pointer;
}
.btn:hover,.btn:focus-visible{background:var(--accent-dark);color:#fff}

/* ---------- article pages (portfolio, resume, plain) ---------- */
.article{padding:2.5rem 0 1rem}

.article h1{font-size:clamp(1.6rem,3.5vw,2.2rem);margin:0 0 .25rem}
.article h2{font-size:1.45rem;margin:2rem 0 .5rem}
.article h2.h2--flush{margin-top:0}
.article h3{font-size:1.2rem;margin:1.5rem 0 .35rem}

.article p,.article li{color:var(--ink-soft)}
.count{color:var(--muted);font-size:.85rem}
.tags{color:var(--muted);font-size:.9rem;margin-top:1.5rem}
.tags a{color:var(--muted)}

/* next-step footer on any terminal page — the incline */
.next{
  margin-top:2.5rem;padding:1.4rem 1.5rem;
  background:var(--accent-wash);border-left:3px solid var(--accent);border-radius:0 4px 4px 0;
}
.next p{margin:0 0 .2rem;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-dark)}
.next a{font-size:1.05rem;font-weight:700;color:var(--ink)}
/* when a .next block offers more than one destination, stack them */
.next a + a{display:block;margin-top:.35rem}
.next a:first-of-type:not(:last-of-type){display:block}

/* ---------- list / section pages ---------- */
.entry{padding-bottom:1.5rem;border-bottom:1px solid var(--rule)}
.entry:last-child{border-bottom:0}
.entry h2{margin:1.25rem 0 .25rem;font-size:1.15rem}
.entry h2 a{color:var(--ink);text-decoration:none}
.entry h2 a:hover{color:var(--accent-dark);text-decoration:underline}

/* service index cards */
.svc-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));padding:0;margin:0;list-style:none}
.svc-grid--three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.svc-grid--three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svc-grid--three{grid-template-columns:1fr}}
.svc-card{border:1px solid var(--rule);border-top:4px solid var(--accent);border-radius:4px;padding:1.2rem}
.svc-card h2{margin:0 0 .35rem;font-size:1.05rem}
.svc-card h2 a{color:var(--ink);text-decoration:none}
.svc-card h2 a:hover{color:var(--accent-dark)}
.svc-card p{margin:0;font-size:.95rem;color:var(--muted)}

/* ---------- legacy classes, restyled ---------- */
.letter{margin:1.5rem 0 .5rem;padding:0 0 0 1.25rem;border-left:3px solid var(--accent-line);color:var(--ink-soft)}
.letter p:first-child{margin-top:0}
.letter p:last-child{margin-bottom:0}
.letter .fn-rule{width:25%;margin:1.5rem 0 .6rem;border:0;border-top:1px solid var(--rule)}
.letter .fn{font-size:.82rem;color:var(--muted)}
/* the attribution line: the paragraph immediately after the letter. Styled by
   position rather than by class so the markdown link still renders. */
.letter + p{text-align:right}
.resume-shot{margin:1.5rem 0}
.resume-shot img{width:816px;max-width:100%;display:block;border:1px solid var(--rule)}
.indent{padding-left:2.5rem}

/* standalone contact form (contact page) */
form.contact-form{display:block;margin-top:1.5rem;max-width:38rem}
form.contact-form label{display:block;margin-top:1rem;margin-bottom:.25rem;font-weight:700;font-size:.85rem}
form.contact-form input,form.contact-form select,form.contact-form textarea{
  display:block;width:100%;padding:.55rem .65rem;font:inherit;
  border:1px solid var(--field);border-radius:3px;
}
form.contact-form textarea{resize:vertical}
form.contact-form button{width:auto;margin-top:1.1rem;padding:.75rem 1.5rem;border:0;border-radius:3px;background:var(--accent);color:#fff;font:700 1rem/1 var(--sans);cursor:pointer}
form.contact-form button:hover{background:var(--accent-dark)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);background:var(--wash);padding:2rem 0 2.5rem;color:var(--muted);font-size:.9rem}
.foot-inner{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--accent-dark);text-decoration:underline}
.foot h2{font:600 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--ink);margin:0 0 .6rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:.3rem 0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:1.75rem}
  .masthead-inner{grid-template-columns:1fr;gap:.75rem}
  .nav-util{justify-content:flex-start}
  .layout{grid-template-columns:1fr;gap:2.5rem;padding-bottom:3rem}
  .rail{position:static}
}
@media (max-width:760px){
  .demo{grid-template-columns:1fr}
  .arrow{transform:rotate(90deg);font-size:1.2rem}
  .pane table{font-size:.72rem}
  .pane td{padding:.35rem .5rem}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .hero{padding:2.5rem 0 2.75rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- layout fixes ---------- */
.layout .article{padding-top:0}
a.chip{text-decoration:none}
a.chip:hover{border-color:var(--accent);color:var(--accent-dark)}

/* ---------- whole service card is the click target ---------- */
.svc-card{position:relative;transition:background .12s,border-color .12s}
.svc-card h2 a::after{content:"";position:absolute;inset:0}
.svc-card:hover{background:var(--accent-wash);border-color:var(--accent)}
.svc-card:hover h2 a{color:var(--accent-dark)}
.svc-card:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- focus ring on the dark hero ---------- */
/* var(--accent) sits at 2.3:1 to 3.2:1 against the ink band depending on
   the service accent; --accent-bright clears 7:1 for all five. */
.hero :focus-visible{outline-color:var(--accent-bright)}

/* ---------- print ---------- */
@media print{
  .masthead,.foot,.rail,.next,.skip{display:none}
  body{font-size:11pt;color:#000}
  .wrap{max-width:none;padding:0}
  .layout{display:block;padding:0}
  .article{padding-top:0}
  .hero,.hero--slim{background:#fff;color:#000;padding:0 0 1rem}
  .hero .deck,.hero--slim .deck{color:#000}
  .hero a{color:#000}
  a{color:#000;text-decoration:underline}
  .block{background:#fff;border-left:2px solid #000}
  .block p{color:#000}
  .article p,.article li{color:#000}
  .chip,.chip.on{background:#fff;border-color:#999;color:#000}
  .stats{border-color:#999;background:#999}
  .stat b{color:#000}
  .stat span,.note,.count,.tags,.tags a{color:#000}
  .pane{background:#fff;border-color:#999}
  .pane-label{background:#eee;color:#000;border-bottom-color:#999}
  .pane.before .pane-label,.pane.after .pane-label{background:#eee;color:#000}
  .pane td,.pane.after td,.pane .blob{color:#000}
  .pane tr+tr td{border-top-color:#ccc}
  .arrow{color:#000}
  .entry,.block,.svc-card,.demo,.stats{break-inside:avoid}
  h1,h2{break-after:avoid}
}
body.work-index .hero .deck{max-width:46rem}

/* compact competency grid: 2 across, 3 down, linking into /services/.
   Matches the "Jump to" grid on /services/, and gives the longer labels room. */
.comp-grid{
  display:grid;gap:.6rem;grid-template-columns:repeat(2,1fr);
  list-style:none;margin:0 0 2.5rem;padding:0;
}
.comp-grid a{
  display:block;height:100%;padding:.75rem .85rem;
  border:1px solid var(--rule);border-top:3px solid var(--accent);border-radius:4px;
  color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:600;line-height:1.3;
  transition:background .12s,border-color .12s;
}
.comp-grid a:hover,.comp-grid a:focus-visible{background:var(--accent-wash);border-color:var(--accent)}
@media (max-width:420px){.comp-grid{grid-template-columns:1fr}}

/* deep-linked section on /services/ shouldn't hide under the top of the window */
.article h2{scroll-margin-top:1.5rem}

/* form: optional-field marker */
.card label .opt,form.contact-form label .opt{font-weight:400;color:var(--muted);font-size:.82em}

/* table of contents on /services/ */
.toc{margin-bottom:2.25rem}
.toc-grid{
  display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  list-style:none;margin:0;padding:0;
}
.toc-grid a{
  display:block;height:100%;padding:.7rem .85rem;
  border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:0 4px 4px 0;
  color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:600;line-height:1.3;
  transition:background .12s,border-color .12s;
}
.toc-grid a:hover,.toc-grid a:focus-visible{background:var(--accent-wash);border-color:var(--accent)}
@media (max-width:560px){.toc-grid{grid-template-columns:1fr}}

/* ---------- tables in article prose ---------- */
/* Used by the Terms block on /contracting/: a two-column definition table with
   bold labels on the left. The header row is empty by design and hidden. */
.article table{
  width:100%;border-collapse:collapse;margin:0 0 1.75rem;
}
.article thead{display:none}
.article th,.article td{
  padding:.55rem .9rem .55rem 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;text-align:left;
}
.article tr:last-child td{border-bottom:0}
.article td:first-child{
  /* width:1% + nowrap makes the column shrink to its widest label rather than
     reserving a fixed width, so short labels don't leave a gap. */
  width:1%;padding-right:1.1rem;white-space:nowrap;color:var(--ink);
}
@media (max-width:560px){
  .article td:first-child{width:auto;white-space:normal}
  .article table,.article tbody,.article tr,.article td{display:block}
  .article td:first-child{padding-bottom:.1rem;border-bottom:0}
  .article tr{border-bottom:1px solid var(--rule);padding-bottom:.7rem;margin-bottom:.7rem}
  .article tr:last-child{border-bottom:0}
}