/* Shared styles for markotoole.com */
:root{
  --paper:#F4F3EF;
  --ink:#1A1917;
  --muted:#77726A;
  --accent:#2B41C4;
  --accent-wash:rgba(43,65,196,0.07);
  --line:#E2DFD8;

  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --body:"Inter", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;

  --maxw:1080px;
  --gutter:clamp(20px, 5vw, 72px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; }

::selection{ background:var(--accent); color:var(--paper); }

/* ---------- shared layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--accent);
  display:inline-block;
}

/* ---------- top bar ---------- */
header.bar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.bar-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}
.brand{
  font-family:var(--mono);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.02em;
  text-decoration:none;
}
.brand span{ color:var(--accent); }
nav.links{ display:flex; gap:28px; }
nav.links a{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.04em;
  text-decoration:none;
  color:var(--muted);
  transition:color .2s ease;
}
nav.links a:hover{ color:var(--ink); }
@media (max-width:620px){ nav.links{ display:none; } }

/* ---------- hero ---------- */
.hero{ padding:clamp(64px,12vh,150px) 0 clamp(56px,9vh,110px); }
.hero h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(3rem, 11vw, 8.2rem);
  line-height:0.92;
  letter-spacing:-0.03em;
  margin:0.15em 0 0.35em;
}
.hero .lede{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.25rem, 3vw, 2rem);
  line-height:1.3;
  letter-spacing:-0.01em;
  max-width:22ch;
  margin:0 0 40px;
}
.hero .lede em{ color:var(--accent); font-style:normal; }

.hero-grid{ display:grid; grid-template-columns:1.35fr 0.85fr; gap:clamp(32px,6vw,68px); align-items:center; }
.hero-photo{ display:flex; justify-content:center; }
.hero-photo img{
  width:100%; max-width:360px; aspect-ratio:1/1; object-fit:cover;
  border-radius:6px; border:1px solid var(--line);
  box-shadow:0 18px 40px -24px rgba(26,25,23,0.45);
}
@media (max-width:820px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo{ justify-content:flex-start; order:-1; margin-bottom:4px; }
  .hero-photo img{ max-width:190px; }
}

.cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.btn{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.03em;
  text-decoration:none;
  padding:13px 22px;
  border:1px solid var(--ink);
  border-radius:2px;
  transition:transform .18s ease, background .18s ease, color .18s ease;
  display:inline-block;
}
.btn.primary{ background:var(--ink); color:var(--paper); }
.btn.primary:hover{ background:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }

/* ---------- sections ---------- */
section{ padding:clamp(56px,9vh,104px) 0; border-top:1px solid var(--line); }
.section-head{ margin-bottom:44px; }
.section-head h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.8rem,4.5vw,3rem);
  letter-spacing:-0.02em;
  line-height:1.05;
  margin:0;
  max-width:20ch;
}

/* about */
.about-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(28px,5vw,72px); }
@media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } }
.about-grid p{ margin:0 0 20px; font-size:clamp(1.05rem,2vw,1.22rem); line-height:1.55; }
.about-grid p:last-child{ margin-bottom:0; }
.about-aside{ font-family:var(--mono); font-size:13px; color:var(--muted); line-height:2; }
.about-aside .k{ color:var(--ink); display:block; letter-spacing:0.04em; }
.about-aside .g{ margin-bottom:22px; }

/* work timeline */
.role{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:clamp(16px,4vw,48px);
  padding:34px 0;
  border-top:1px solid var(--line);
}
.role:first-child{ border-top:none; padding-top:0; }
@media (max-width:680px){ .role{ grid-template-columns:1fr; gap:10px; } }
.role .when{ font-family:var(--mono); font-size:13px; color:var(--muted); letter-spacing:0.02em; padding-top:6px; }
.role h3{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.3rem,3vw,1.75rem);
  letter-spacing:-0.01em;
  margin:0 0 4px;
}
.role .co{ font-family:var(--mono); font-size:1.1rem; font-weight:700; color:var(--accent); margin:2px 0 16px; letter-spacing:0.01em; }
.role ul{ margin:0; padding:0; list-style:none; }
.role li{ position:relative; padding-left:22px; margin-bottom:9px; color:var(--ink); }
.role li::before{
  content:"→"; position:absolute; left:0; color:var(--accent); font-family:var(--mono);
}
.role li b{ font-weight:600; }

/* capabilities */
.caps{ display:flex; flex-wrap:wrap; gap:10px; }
.cap{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.02em;
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--accent-wash);
}

/* built / tools */
.built-intro{ max-width:640px; margin:0 0 40px; color:var(--muted); font-size:1.05rem; }
.tools{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:760px){ .tools{ grid-template-columns:1fr; } }
.tool{
  border:1px solid var(--line);
  border-radius:6px;
  padding:28px;
  background:var(--paper);
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tool:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px -28px rgba(26,25,23,0.45);
  border-color:var(--accent);
}
.tool-kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px;
}
.tool-name{
  font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,3vw,1.6rem);
  letter-spacing:-0.01em; margin:0 0 12px;
}
.tool-desc{ margin:0 0 20px; font-size:1rem; line-height:1.55; flex:1; }
.tool-stack{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:0.02em; margin:0 0 22px; }
.tool-links{ display:flex; flex-wrap:wrap; gap:22px; }
.tool-links a{
  font-family:var(--mono); font-size:13px; letter-spacing:0.03em; text-decoration:none;
  color:var(--muted); display:inline-flex; gap:8px; align-items:center; transition:color .2s ease;
}
.tool-links a:hover{ color:var(--ink); }
.tool-links a .arr{ color:var(--accent); }

/* video */
.video-embed{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:6px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 18px 40px -24px rgba(26,25,23,0.45);
  background:var(--ink);
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* contact */
#contact{ padding-bottom:clamp(70px,10vh,120px); }
.contact-big{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.2rem,7vw,5rem);
  letter-spacing:-0.03em;
  line-height:1;
  margin:0 0 36px;
}
.contact-big a{ text-decoration:none; border-bottom:3px solid var(--accent); transition:color .2s ease; }
.contact-big a:hover{ color:var(--accent); }
.contact-links{ display:flex; flex-wrap:wrap; gap:26px; }
.contact-links a{
  font-family:var(--mono); font-size:14px; letter-spacing:0.03em; text-decoration:none;
  color:var(--muted); transition:color .2s ease; display:inline-flex; gap:8px; align-items:center;
}
.contact-links a:hover{ color:var(--ink); }
.contact-links a .arr{ color:var(--accent); }

footer.foot{
  border-top:1px solid var(--line);
  padding:28px 0 40px;
  font-family:var(--mono); font-size:12px; color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  letter-spacing:0.03em;
}

a:focus-visible, .btn:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ================================================================
   Added Nov 2026 — multi-page components (consulting / full-time)
   ================================================================ */

/* brand link (sub-pages) */
.bar-inner.has-brand{ justify-content:space-between; }
.brand{ color:var(--ink); }

/* sub-page hero */
.page-hero{ padding:clamp(56px,10vh,130px) 0 clamp(48px,8vh,96px); border-top:none; }
.page-hero h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.4rem, 6.5vw, 4.9rem);
  line-height:0.98;
  letter-spacing:-0.03em;
  margin:0.1em 0 0.45em;
  max-width:16ch;
}
.page-hero .lede{
  font-size:clamp(1.08rem,2.2vw,1.3rem);
  line-height:1.55;
  max-width:620px;
  margin:0 0 36px;
}

/* generic card grids (reuse .tool card look) */
.cards-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:980px){ .cards-3{ grid-template-columns:1fr; } }
@media (max-width:760px){ .cards-2{ grid-template-columns:1fr; } }
a.tool{ text-decoration:none; color:inherit; }
.tool .go{
  font-family:var(--mono); font-size:13px; letter-spacing:0.03em; color:var(--muted);
  display:inline-flex; gap:8px; transition:color .2s ease;
}
.tool:hover .go{ color:var(--ink); }
.tool .go .arr{ color:var(--accent); }
.tool ul{ margin:0 0 22px; padding:0; list-style:none; }
.tool li{ position:relative; padding-left:22px; margin-bottom:8px; font-size:0.97rem; line-height:1.5; }
.tool li::before{ content:"→"; position:absolute; left:0; color:var(--accent); font-family:var(--mono); }
.tool-format{
  font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:0.02em;
  border-top:1px solid var(--line); padding-top:16px; margin:auto 0 0;
}

/* problem list */
.problems{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(24px,4vw,48px); }
@media (max-width:900px){ .problems{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .problems{ grid-template-columns:1fr; } }
.problem{ border-top:1px solid var(--line); padding:22px 0 26px; }
.problem .n{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:0.08em; display:block; margin-bottom:10px; }
.problem p{ margin:0; font-family:var(--display); font-weight:500; font-size:clamp(1.1rem,2vw,1.28rem); line-height:1.3; letter-spacing:-0.01em; }

/* steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,36px); counter-reset:step; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ border-top:2px solid var(--ink); padding-top:18px; }
.step .n{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:0.1em; }
.step h3{ font-family:var(--display); font-weight:600; font-size:1.3rem; letter-spacing:-0.01em; margin:8px 0 8px; }
.step p{ margin:0; color:var(--muted); font-size:0.98rem; line-height:1.55; }

/* faq */
.faq{ max-width:780px; }
.faq details{ border-top:1px solid var(--line); padding:20px 0; }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:600; font-size:1.2rem; letter-spacing:-0.01em;
  display:flex; justify-content:space-between; gap:20px; align-items:baseline;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--accent); font-weight:400; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:12px 0 0; color:var(--muted); max-width:660px; }
.faq summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.cards-3 .tool-desc{ flex:0 0 auto; min-height:4.7em; }
@media (max-width:980px){ .cards-3 .tool-desc{ min-height:0; } }

/* full-time page */
.steps.three{ grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .steps.three{ grid-template-columns:1fr; } }
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 clamp(20px,3vw,40px); }
@media (max-width:900px){ .facts{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .facts{ grid-template-columns:1fr; } }
.fact{ border-top:1px solid var(--line); padding:20px 0 24px; }
.fact .k{ font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px; }
.fact p{ margin:0; font-family:var(--display); font-weight:500; font-size:clamp(1.1rem,2vw,1.28rem); line-height:1.3; letter-spacing:-0.01em; }
.mail-note{ font-family:var(--mono); font-size:13px; color:var(--muted); margin:16px 0 0; }
.mail-note span{ color:var(--ink); user-select:all; }

/* wide "something else" card under the offers */
.tool-wide{
  margin-top:24px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,56px);
  background:var(--accent-wash);
  border-style:dashed;
}
.tool-wide > div{ display:flex; flex-direction:column; min-width:0; }
.tool-wide .tool-desc{ flex:0 0 auto; max-width:46ch; margin-bottom:28px; }
.tool-wide .btn{ align-self:flex-start; }
.tool-wide ul{ margin-bottom:22px; }
@media (max-width:760px){ .tool-wide{ grid-template-columns:1fr; } }

/* availability badge */
.status{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  padding:7px 14px 7px 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--paper); color:var(--ink); margin:0 0 22px;
}
.status::before{
  content:""; width:8px; height:8px; border-radius:50%; background:#2E9E5B;
  box-shadow:0 0 0 3px rgba(46,158,91,0.18);
}
.tool-kicker .avail{ color:#2E9E5B; }