/* ==========================================================================
   Taq Ventures — sitemap.html
   The site's own information architecture, drawn as a wireframe.

   Why a wireframe and not a bulleted list of links: the page has two jobs.
   It has to work as a site map — every public page, one click away — and it
   has to show a visitor what "structure" actually means, because structure is
   the first thing we sell on website.html and the first thing the digital
   audit measures. A list of nineteen links proves nothing. Nineteen boxes with
   their depth drawn in shows the shape of the decision.

   Every card is the same box; the bars inside it are the only thing that
   changes, so two pages of different kinds read as different shapes at a
   glance. The bars are decorative and carry aria-hidden — a screen reader gets
   the nested list of links underneath, which is the honest version of this
   page for anything that is not looking at it.
   ========================================================================== */

/* ---- page intro: same block every interior page carries ---- */
.intro{
  padding: 84px 0 60px;
  border-bottom: 1px solid var(--line);
}
.intro .eyebrow{
  display:flex; align-items:center; gap: 10px;
  color: var(--muted); font-size: 14px; margin-bottom: 24px;
}
.intro .eyebrow .rule{ width: 28px; height: 2px; background: var(--accent-bright); }
.intro h1{
  font-size: clamp(32px, 4.5vw, 46px);
  letter-spacing: -0.01em;
}
.intro p{
  color: var(--muted);
  font-size: 18px;
}

/* ==========================================================================
   The wireframe
   ========================================================================== */
.wf-section{ padding: 60px 0 68px; border-bottom: 1px solid var(--line); }

.wf-head{ margin-bottom: 34px; }
.wf-head h2{ font-size: 28px; margin-bottom: 10px; }
.wf-head p{ color: var(--muted); max-width: 62ch; }

/* ---- legend ----
   Three notations to explain, so three items. Inline rather than a floating
   key, because a key you have to hunt for is a key nobody reads. */
.wf-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  margin-bottom: 30px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
}
.wf-legend-item{ display: flex; align-items: center; gap: 9px; }
.wf-legend-swatch{
  width: 26px; height: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg);
  flex: none;
}
.wf-legend-swatch-here{ border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.wf-legend-swatch-line{
  border: none;
  height: 0;
  border-top: 1px dashed var(--line-strong);
  border-radius: 0;
}

/* ---- the tree canvas ----
   The faint grid is what makes the panel read as drafting paper rather than
   just another tinted band. It is two gradients rather than an image so it
   costs nothing and scales to any width. */
.wf{
  --wf-indent: 34px;   /* how far each generation steps right */
  --wf-pad: 14px;      /* vertical gap above each card */
  --wf-card-h: 58px;   /* fixed, so the elbow can be positioned deterministically */

  padding: 30px 26px 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, rgba(66, 90, 125, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(66, 90, 125, 0.055) 1px, transparent 1px);
  background-size: 22px 22px;
  overflow-x: auto;
}

.wf ol{ list-style: none; margin: 0; padding: 0; }

/* ---- connectors ----
   Drawn with borders on the <li> rather than an SVG overlay, so the lines
   follow the cards when the text reflows instead of being a picture of where
   the cards used to be. */
.wf .wf-children{ padding-left: var(--wf-indent); }
.wf-children > li{ position: relative; padding-top: var(--wf-pad); }

/* the vertical trunk running down past every sibling */
.wf-children > li::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-left: 1px dashed var(--line-strong);
}
/* the last sibling stops its trunk at the elbow, so the line does not
   dangle past the final card with nothing to join */
.wf-children > li:last-child::before{
  bottom: auto;
  height: calc(var(--wf-pad) + var(--wf-card-h) / 2);
}
/* the elbow into the card */
.wf-children > li::after{
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--wf-pad) + var(--wf-card-h) / 2);
  width: calc(var(--wf-indent) - 12px);
  border-top: 1px dashed var(--line-strong);
}

/* ---- the card ---- */
.wf-card{
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: var(--wf-card-h);
  max-width: 380px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.wf-card:hover{
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(22, 24, 27, 0.07);
  transform: translateY(-1px);
}
.wf-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wf-label{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 0.004em;
}
/* The real URL, in the one place on the site where showing a visitor the URL
   is the point: a readable path is a ranking signal and an audit line item. */
.wf-path{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: -0.01em;
}

/* the root card carries the site, so it gets the weight */
.wf-root-card{
  max-width: 420px;
  min-height: 66px;
  border-color: var(--line-strong);
  background: var(--panel);
}

/* "you are here" — the only accented card on the page */
.wf-card-here{
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
  background: var(--bg);
}
.wf-card-here:hover{
  box-shadow: inset 3px 0 0 var(--accent), 0 2px 10px rgba(22, 24, 27, 0.07);
}
.wf-here-tag{
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: auto;
  padding-left: 10px;
  flex: none;
}

/* ---- the mock inside each card ----
   One box, three bars, every variant. The variants below only move the bars
   around; nothing needs a different number of elements, which is what keeps
   the generated markup and the hand-written markup identical in shape. */
.wf-mock{
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  width: 46px;
  height: 32px;
  flex: none;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
}
.wf-mock > span{ background: var(--line-strong); border-radius: 1px; }
.wf-root-card .wf-mock{ width: 54px; height: 38px; }

/* hero: headline, subhead, one button */
.wf-mock-hero{ grid-template-rows: 1.3fr 1fr 1fr; }
.wf-mock-hero > span:nth-child(1){ background: var(--accent); }
.wf-mock-hero > span:nth-child(2){ width: 82%; }
.wf-mock-hero > span:nth-child(3){ width: 46%; background: var(--accent-solid); }

/* hub: a title, then a row of cards — the columns are a gradient because
   three more elements per card would be markup nobody can read */
.wf-mock-hub{ grid-template-rows: 1fr 0.6fr 1.6fr; }
.wf-mock-hub > span:nth-child(1){ width: 68%; background: var(--accent); }
.wf-mock-hub > span:nth-child(2){ width: 88%; }
.wf-mock-hub > span:nth-child(3){
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 10px, transparent 10px 13px);
}

/* detail: a title and body copy — the shape of every service page */
.wf-mock-detail > span:nth-child(1){ width: 58%; background: var(--accent); }
.wf-mock-detail > span:nth-child(3){ width: 84%; }

/* list: stacked rows of equal weight — case studies, FAQ */
.wf-mock-list > span{ width: 100%; }
.wf-mock-list > span:nth-child(1){ background: var(--accent); width: 52%; }

/* board: a title over a grid of tiles */
.wf-mock-board{ grid-template-rows: 0.8fr 1.1fr 1.1fr; }
.wf-mock-board > span:nth-child(1){ width: 50%; background: var(--accent); }
.wf-mock-board > span:nth-child(2),
.wf-mock-board > span:nth-child(3){
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 11px);
}

/* form: a label, a field, a submit */
.wf-mock-form{ grid-template-rows: 0.8fr 1.2fr 1fr; }
.wf-mock-form > span:nth-child(1){ width: 46%; }
.wf-mock-form > span:nth-child(2){
  background: var(--bg);
  border: 1px solid var(--line-strong);
}
.wf-mock-form > span:nth-child(3){ width: 42%; background: var(--accent-solid); }

/* tool: one input and one action, which is the whole grader */
.wf-mock-tool{ grid-template-rows: 0.7fr 1.4fr 0.9fr; }
.wf-mock-tool > span:nth-child(1){ width: 56%; background: var(--accent); }
.wf-mock-tool > span:nth-child(2){
  background: var(--bg);
  border: 1px dashed var(--accent);
}
.wf-mock-tool > span:nth-child(3){ width: 34%; background: var(--accent-solid); }

/* map: a staircase — this page, drawn as itself */
.wf-mock-map > span:nth-child(1){ width: 74%; }
.wf-mock-map > span:nth-child(2){ width: 56%; margin-left: 18%; }
.wf-mock-map > span:nth-child(3){ width: 38%; margin-left: 36%; }
.wf-mock-map > span{ background: var(--accent); opacity: 0.55; }

/* ---- branch captions ----
   The tree has three kinds of branch and saying so in one line each is most of
   the educational value of the page. */
.wf-branch-note{
  margin: 6px 0 2px;
  font-size: 13px;
  color: var(--muted);
  max-width: 54ch;
}
.wf-children .wf-branch-note{ padding-left: 2px; }

/* ==========================================================================
   Principles — why the tree is this shape
   ========================================================================== */
.wf-why{ padding: 66px 0 72px; border-bottom: 1px solid var(--line); }
.wf-why h2{ font-size: 28px; margin-bottom: 12px; }
.wf-why-intro{ color: var(--muted); max-width: 62ch; margin-bottom: 34px; }
.wf-why-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.wf-why-item{
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-veil);
}
.wf-why-item h3{ font-size: 20px; margin-bottom: 8px; }
.wf-why-item p{ color: var(--muted); font-size: 15px; }
.wf-why-num{
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--accent);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

/* ---- closing CTA: same block every interior page carries ---- */
.cta-block{ padding: 76px 0; }
.cta-block h2{ font-size: 34px; }
.cta-block p{ color: var(--muted); margin-bottom: 24px; }

/* ==========================================================================
   Small screens
   The tree is the one thing here that cannot simply reflow: at 34px per
   generation, four generations plus a card no longer fits a phone. The indent
   tightens and the cards go full width, which keeps the hierarchy legible
   without a horizontal scrollbar doing the work.
   ========================================================================== */
@media (max-width: 900px){
  .wf-why-grid{ grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px){
  .intro{ padding: 40px 0 32px; }
  .intro .eyebrow{ margin-bottom: 18px; }
  .intro p{ font-size: 17px; }

  .wf-section{ padding: 38px 0 42px; }
  .wf-head{ margin-bottom: 24px; }
  .wf-why{ padding: 40px 0 44px; }
  .cta-block{ padding: 44px 0; }

  .wf{
    --wf-indent: 20px;
    --wf-card-h: 54px;
    padding: 20px 14px 24px;
    background-size: 18px 18px;
  }
  .wf-card{ max-width: none; gap: 11px; padding: 9px 12px; }
  .wf-label{ font-size: 17px; }
  .wf-mock{ width: 40px; height: 29px; }
  .wf-root-card .wf-mock{ width: 44px; height: 32px; }
  .wf-legend{ gap: 8px 18px; padding: 12px 14px; }
  /* The tag doubles the height of the card it sits in at this width. The
     accented edge already says "you are here" on its own. */
  .wf-here-tag{ display: none; }
}