/* ===================================================================
   DS PULSE - TUTORIALS
   pulse.domeraspace.com/tutorials

   Built on pulse.css: this page loads /pulse/pulse.css first and
   inherits its tokens, .nav, .btn, .wrap, .footer and the gold ambient
   wash on body::before. Everything here is namespaced `tut-` so it
   cannot collide with the marketing page.

   Approved build spec:
     mast:feature  entry:poster  group:path   filt:rail  fmt:rule
     art:steps     vid:flush     theme:paper  pub:hybrid amb:grain
   =================================================================== */

:root{
  /* pulse.css's --accent (#c99a2e) is a fill colour: on the hybrid
     paper ground it lands at ~2.6:1, well under the 4.5:1 small text
     needs. These are the readable relatives - accent for type, and a
     mid-neutral for metadata that --ink-3 (3.4:1) cannot carry. */
  --tut-accent-text: #7a5c14;
  --tut-meta: #63625b;
  --tut-shadow: 0 1px 2px rgba(11,13,10,.05), 0 14px 30px -20px rgba(11,13,10,.4);
  --tut-lift:   0 2px 5px rgba(11,13,10,.07), 0 26px 52px -26px rgba(11,13,10,.5);
}
html[data-theme="dark"]{
  --tut-accent-text: var(--accent-bright);
  --tut-meta: var(--ink-2);
  --tut-shadow: 0 1px 2px rgba(0,0,0,.5), 0 16px 34px -20px rgba(0,0,0,.9);
  --tut-lift:   0 2px 6px rgba(0,0,0,.55), 0 28px 56px -26px rgba(0,0,0,1);
}

[hidden]{ display:none !important; }

/* ---- shared atoms ---------------------------------------------- */
.tut-lab{ font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); }
.tut-meta{ font-size:12.5px; font-weight:500; color:var(--tut-meta);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-variant-numeric:tabular-nums; }
.tut-meta .sep{ width:3px; height:3px; border-radius:99px; background:var(--border-hi); flex:0 0 3px; }
.tut-meta b{ color:var(--tut-accent-text); font-weight:700; }
.tut-tag{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; border-radius:4px; padding:3px 8px;
  color:var(--tut-accent-text); background:var(--accent-dim); white-space:nowrap; }
.tut-tag--n{ color:var(--ink-2); background:var(--inset); }
.tut-tag--out{ color:var(--tut-meta); background:transparent; border:1px solid var(--border-hi); }

/* The format cue for this build is a hairline rule, not an icon chip:
   gold means a screen recording, neutral means a written walkthrough. */
.tut-rule{ display:block; width:100%; height:1px; background:var(--border-hi); }
.tut-rule--video{ background:var(--accent); }

/* ---- masthead (mast:feature) ------------------------------------ */
/* Top offset follows .hero in pulse.css: nav height plus the same clamp,
   not just the clamp alone - .nav is position:fixed, so without --nav-h
   here the low end of the clamp (34px) sits under the 60px bar instead
   of below it, on any viewport narrow enough to hit that end. */
.tut-mast{ padding-block:calc(var(--nav-h) + clamp(34px,5.5vw,66px)) clamp(22px,3vw,38px); }
.tut-mast__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,56px); align-items:center; }
.tut-mast h1{ font-size:clamp(30px,5vw,52px); font-weight:700; letter-spacing:-.03em;
  line-height:1.05; max-width:15ch; }
.tut-mast .tut-sub{ margin-top:16px; font-size:clamp(15px,1.6vw,17.5px); font-weight:400;
  line-height:1.65; color:var(--ink-2); max-width:54ch; }
.tut-ledger{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; }
.tut-ledger span{ font-size:12.5px; color:var(--tut-meta); display:flex; align-items:center; gap:7px; }
.tut-ledger b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.tut-ledger .dot{ width:5px; height:5px; border-radius:99px; background:var(--accent); flex:0 0 5px; }
.tut-search{ margin-top:22px; max-width:520px; display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--r);
  padding:11px 14px; box-shadow:var(--tut-shadow); }
.tut-search svg{ width:17px; height:17px; stroke:var(--ink-3); fill:none; stroke-width:1.8;
  stroke-linecap:round; flex:0 0 17px; }
.tut-search input{ flex:1; min-width:0; border:0; background:transparent; outline:none;
  font:inherit; font-size:14.5px; color:var(--ink); }
.tut-search input::placeholder{ color:var(--tut-meta); }
.tut-search:focus-within{ border-color:var(--accent-line); }
.tut-kbd{ font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:10.5px; color:var(--tut-meta); border:1px solid var(--border); border-radius:4px;
  padding:2px 6px; background:var(--inset); white-space:nowrap; }
@media (max-width:860px){ .tut-mast__grid{ grid-template-columns:1fr; } }

/* ---- hub shell (filt:rail) -------------------------------------- */
.tut-hub{ display:grid; grid-template-columns:196px minmax(0,1fr);
  gap:clamp(24px,4vw,52px); align-items:start; padding-bottom:clamp(48px,7vw,90px); }
@media (max-width:900px){ .tut-hub{ grid-template-columns:1fr; } }

.tut-rail{ position:sticky; top:calc(var(--nav-h) + 20px); display:flex; flex-direction:column; gap:22px; }
@media (max-width:900px){
  .tut-rail{ position:static; flex-direction:row; flex-wrap:wrap; gap:10px 26px;
    padding-bottom:20px; border-bottom:1px solid var(--border); }
  .tut-rail__group{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; }
  .tut-rail__h{ padding:0 4px 0 0; }
  .tut-rail__opt{ width:auto; border:1px solid var(--border); border-radius:99px; padding:5px 12px; }
}
.tut-rail__group{ display:flex; flex-direction:column; gap:2px; }
.tut-rail__h{ font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:8px; }
.tut-rail__opt{ display:flex; align-items:baseline; gap:10px; width:100%; text-align:left;
  background:transparent; border:0; padding:6px 8px; border-radius:var(--r-s);
  font:inherit; font-size:13.5px; color:var(--ink-2); cursor:pointer;
  transition:background .16s ease, color .16s ease; }
.tut-rail__opt:hover{ background:var(--inset); color:var(--ink); }
.tut-rail__opt em{ font-style:normal; margin-left:auto;
  font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.tut-rail__opt[aria-pressed="true"]{ color:var(--tut-accent-text); font-weight:600; }
.tut-rail__opt[aria-pressed="true"] em{ color:var(--tut-accent-text); }
.tut-rail__opt:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }

/* ---- tutorial card (entry:poster + fmt:rule) -------------------- */
.tut-grid{ display:grid; gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); }
.tut-card{ display:flex; flex-direction:column; gap:11px; text-align:left; color:inherit;
  transition:transform .26s cubic-bezier(.2,.7,.3,1); }
.tut-card:hover{ transform:translateY(-3px); }
.tut-card:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:6px;
  border-radius:var(--r-s); }
.tut-card__cover{ position:relative; border-radius:var(--r-s); overflow:hidden;
  box-shadow:var(--tut-shadow); aspect-ratio:16/9; background:var(--panel-2); }
.tut-card__cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.tut-card h3{ font-size:16px; font-weight:600; letter-spacing:-.012em; line-height:1.32; }
.tut-card:hover h3{ color:var(--tut-accent-text); }
.tut-card p{ font-size:13.5px; font-weight:400; line-height:1.55; color:var(--ink-2); }
.tut-card__row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Written posts have no video frame to grab, so the cover is set
   rather than photographed: module name, a big initial, paper tint. */
.tut-cover{ position:absolute; inset:0; background:var(--panel-2);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:14px 16px; overflow:hidden; }
.tut-cover::after{ content:attr(data-initial); position:absolute; right:-4px; bottom:-34px;
  font-size:124px; font-weight:700; line-height:1; color:var(--accent);
  opacity:.16; letter-spacing:-.05em; pointer-events:none; }
.tut-cover span{ position:relative; z-index:1; }
.tut-cover__t{ font-size:13px; font-weight:600; line-height:1.35; color:var(--ink);
  max-width:22ch; }

.tut-play{ position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:99px;
  background:var(--accent); display:grid; place-items:center;
  box-shadow:0 6px 20px -4px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.tut-play svg{ width:16px; height:16px; fill:#0c0e0b; stroke:none; margin-left:3px; }
.tut-card:hover .tut-play{ transform:scale(1.08); }
.tut-dur{ position:absolute; right:8px; bottom:8px; background:rgba(6,9,13,.85); color:#e9eef4;
  font-size:10.5px; font-weight:600; padding:3px 7px; border-radius:4px;
  font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-variant-numeric:tabular-nums; }

/* ---- learning paths (group:path) -------------------------------- */
.tut-group{ margin-bottom:clamp(30px,4.5vw,54px); }
.tut-group__head{ display:flex; align-items:baseline; gap:12px; padding-bottom:10px;
  border-bottom:1px solid var(--border); margin-bottom:22px; }
.tut-group__head h2{ font-size:17px; font-weight:700; letter-spacing:.01em; line-height:1.2; }
.tut-group__head em{ font-style:normal;
  font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:11px; color:var(--ink-3); margin-left:auto; font-variant-numeric:tabular-nums; }

.tut-path{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r);
  padding:clamp(18px,2.4vw,28px); box-shadow:var(--tut-shadow);
  margin-bottom:clamp(18px,2.2vw,26px); }
.tut-path__top{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; margin-bottom:8px; }
.tut-path h2{ font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.tut-path .tut-sub{ font-size:14px; font-weight:400; color:var(--ink-2); max-width:62ch;
  line-height:1.6; }
.tut-track{ display:flex; align-items:center; margin:22px 0 8px; }
.tut-node{ width:13px; height:13px; border-radius:99px; border:2px solid var(--border-hi);
  background:var(--panel); flex:0 0 13px; }
.tut-node--done{ background:var(--accent); border-color:var(--accent); }
.tut-seg{ flex:1; height:2px; background:var(--border-hi); }
.tut-tracklabels{ display:flex; }
.tut-tracklabels span{ flex:1; font-size:12px; color:var(--tut-meta); line-height:1.35; }
.tut-tracklabels span:first-child{ text-align:left; }
.tut-tracklabels span:last-child{ text-align:right; }
.tut-tracklabels span:not(:first-child):not(:last-child){ text-align:center; }
.tut-path__items{ margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }

/* ---- states ------------------------------------------------------ */
.tut-state{ padding-block:clamp(56px,10vw,120px); max-width:56ch; }
.tut-state h1,.tut-state h2{ font-size:22px; font-weight:700; letter-spacing:-.02em;
  margin-bottom:10px; line-height:1.25; }
.tut-state p{ font-size:15px; color:var(--ink-2); line-height:1.7; }
.tut-state p + p{ margin-top:12px; }
.tut-state a{ color:var(--tut-accent-text); text-decoration:underline; text-underline-offset:3px; }
.tut-spin{ display:inline-block; width:14px; height:14px; border-radius:99px;
  border:2px solid var(--border-hi); border-top-color:var(--accent);
  animation:tut-spin .7s linear infinite; vertical-align:-2px; margin-right:8px; }
@keyframes tut-spin{ to{ transform:rotate(360deg); } }
.tut-empty{ border:1px dashed var(--border-hi); border-radius:var(--r);
  padding:clamp(26px,4vw,42px); display:flex; flex-direction:column; align-items:flex-start;
  gap:12px; max-width:56ch; }
.tut-empty h2{ font-size:18px; font-weight:600; letter-spacing:-.015em; }
.tut-empty p{ font-size:14px; color:var(--ink-2); line-height:1.65; }

/* ---- article ----------------------------------------------------- */
/* Same fixed-nav offset as .tut-mast above - this view sits directly
   under <main> too, so it needs its own top padding, not inherited. */
.tut-art{ padding-block:calc(var(--nav-h) + clamp(24px,3.5vw,40px)) clamp(48px,7vw,90px); }
.tut-back{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tut-meta);
  padding:6px 0; transition:color .16s ease; }
.tut-back:hover{ color:var(--ink); }
.tut-back svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.tut-art__head{ max-width:74ch; margin-top:10px; }
.tut-art__head h1{ font-size:clamp(26px,4.2vw,42px); font-weight:700; letter-spacing:-.03em;
  line-height:1.1; margin-top:14px; }
.tut-standfirst{ margin-top:14px; font-size:clamp(15px,1.7vw,18px); font-weight:400;
  line-height:1.7; color:var(--ink-2); }
.tut-byline{ margin-top:20px; padding-bottom:20px; border-bottom:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; }

/* vid:flush - the recording runs edge to edge at the top of the piece
   with nothing framing it. Click-to-load, so no third-party script
   runs until the reader actually asks for the video. */
.tut-player{ margin-block:clamp(22px,3vw,36px); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--tut-lift); background:#0a0d12; aspect-ratio:16/9; position:relative;
  width:100%; border:0; padding:0; cursor:pointer; display:block; }
.tut-player img{ width:100%; height:100%; object-fit:cover; display:block; }
.tut-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.tut-player .tut-play{ width:64px; height:64px; }
.tut-player .tut-play svg{ width:22px; height:22px; }
.tut-player:hover .tut-play{ transform:scale(1.07); }
.tut-player:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:4px; }

/* art:steps - every `##` in the markdown becomes a numbered step on a
   rail. The numbering is real information here: the order matters. */
.tut-steps{ display:flex; flex-direction:column; max-width:80ch; margin-top:clamp(20px,3vw,32px); }
.tut-step{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:0 20px; }
.tut-step__rail{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.tut-step__n{ width:30px; height:30px; border-radius:99px; border:1.5px solid var(--accent);
  color:var(--tut-accent-text); display:grid; place-items:center;
  font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:13px; font-weight:500; flex:0 0 30px; background:var(--bg);
  font-variant-numeric:tabular-nums; }
.tut-step__line{ width:1.5px; flex:1; background:var(--border-hi); min-height:14px; }
.tut-step:last-child .tut-step__line{ background:transparent; }
.tut-step__b{ padding-bottom:34px; min-width:0; }
.tut-step__b > h2{ font-size:clamp(17px,2vw,22px); font-weight:700; letter-spacing:-.02em;
  line-height:1.28; margin:3px 0 0; }
@media (max-width:600px){
  .tut-step{ grid-template-columns:30px minmax(0,1fr); gap:0 14px; }
  .tut-step__n{ width:26px; height:26px; flex:0 0 26px; font-size:11.5px; }
}

.tut-prose{ max-width:70ch; font-size:16px; font-weight:400; line-height:1.75; color:var(--ink-2); }
.tut-prose > * + *{ margin-top:18px; }
.tut-prose strong{ color:var(--ink); font-weight:600; }
.tut-prose em{ font-style:italic; }
.tut-prose a{ color:var(--tut-accent-text); text-decoration:underline; text-underline-offset:3px; }
.tut-prose a:hover{ color:var(--ink); }
.tut-prose ul,.tut-prose ol{ display:flex; flex-direction:column; gap:9px;
  padding-left:0; margin-left:0; list-style:none; }
.tut-prose li{ padding-left:24px; position:relative; }
.tut-prose ul > li::before{ content:''; position:absolute; left:5px; top:11px; width:5px; height:5px;
  border-radius:99px; background:var(--accent); }
.tut-prose ol{ counter-reset:tutol; }
.tut-prose ol > li{ counter-increment:tutol; }
.tut-prose ol > li::before{ content:counter(tutol) '.'; position:absolute; left:0; top:0;
  font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:13px; color:var(--tut-accent-text); }
.tut-prose code{ font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:.87em; background:var(--inset); border:1px solid var(--border); border-radius:4px;
  padding:1px 5px; color:var(--ink); }
.tut-prose pre{ background:var(--inset); border:1px solid var(--border); border-radius:var(--r-s);
  padding:14px 16px; overflow-x:auto; }
.tut-prose pre code{ background:transparent; border:0; padding:0; font-size:12.5px; line-height:1.75; }
.tut-prose h3{ font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-.01em;
  margin-top:26px; }

.tut-fig{ margin:0; }
.tut-fig img{ width:100%; height:auto; border-radius:var(--r-s); box-shadow:var(--tut-shadow);
  display:block; background:var(--panel-2); }
.tut-fig figcaption{ font-size:12.5px; color:var(--tut-meta); padding-top:9px; line-height:1.55; }

.tut-callout{ border:1px solid var(--border); border-radius:var(--r-s); padding:14px 16px;
  background:var(--panel); display:flex; gap:12px; align-items:flex-start;
  font-size:14.5px; color:var(--ink-2); line-height:1.6; }
.tut-callout svg{ width:17px; height:17px; stroke:var(--tut-accent-text); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 17px; margin-top:3px; }
.tut-callout strong{ color:var(--ink); font-weight:600; }
.tut-callout--warn{ background:var(--accent-dim); border-color:var(--accent-line); }

.tut-pager{ display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-top:clamp(28px,4vw,44px); padding-top:24px; border-top:1px solid var(--border);
  max-width:80ch; }
@media (max-width:640px){ .tut-pager{ grid-template-columns:1fr; } }
.tut-pager a{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r);
  padding:16px 18px; display:flex; flex-direction:column; gap:5px; box-shadow:var(--tut-shadow);
  transition:border-color .18s ease, transform .22s cubic-bezier(.2,.7,.3,1); }
.tut-pager a:hover{ border-color:var(--accent-line); transform:translateY(-2px); }
.tut-pager--next{ text-align:right; align-items:flex-end; }
.tut-pager b{ font-size:15.5px; font-weight:600; letter-spacing:-.01em; line-height:1.3; }

@media (prefers-reduced-motion:reduce){
  .tut-card,.tut-play,.tut-pager a,.tut-player .tut-play{ transition:none; }
  .tut-card:hover,.tut-pager a:hover{ transform:none; }
  .tut-spin{ animation-duration:2s; }
}