/* Written by ../build.py from the <style> block in ../tony.html. Edit it there. */
  .wrap{max-width:var(--ds-measure);margin:0 auto;padding:0 var(--ds-pad) 80px;}
  h2.sec{margin:0 0 8px;font-size:22px;}

  /* FIVE VIEWS, NOT FIVE SECTIONS OF ONE LONG PAGE.
     Tony: "there were 4 branches on the tree on index, 5 tony.html#career
     sections ... in this style you get lost in a long page." A tab set is the
     grammar's VIEW level -- which way of looking at this surface, never
     navigation -- and the contract draws it as underlines precisely so it does
     not read like a plane switch. The vertical variant is v0.7's, asked for by
     him and unused until now; it falls back to a horizontal row below 560px of
     its own container, so the phone gets the row and the desktop gets the rail.
     The views are the branches on the index tree, same names, same order: seven
     since 2026-10-01. One structure, two surfaces.

     WITHOUT SCRIPT the panels are all visible and the page is the long page it
     used to be. _chrome.js hides the unselected ones on mount, which is the
     right way round: the failure mode is more content, never less. */
  .views{margin-top:22px;}
  .views .ds-tabs[data-orient="vertical"]{position:sticky;top:calc(var(--ds-frame-bar-h) + 8px);
         align-self:start;}
  /* MEASURED, NOT TYPED (W101, 2026-10-10). The typed 68 px sat under a header that
     measures 109 px, so Career was hidden behind it at every width, and on a phone the
     switch is a three-line row with no ground, which a followed fragment landed 98 px
     under. As [data-ds-stick] it takes _chrome.js's measured --ds-stick-top. As a column
     beside the views it keeps its own look; as a row across the top it takes the
     contract's stuck-row ground, rule and bleed. */
  :root[data-ds-stack] .views .ds-tabs[data-ds-stick]{top:calc(var(--ds-stick-top) + 8px);
         background:none;border-bottom:0;padding-inline:0;margin-inline:0;}
  @container ds-tabset (max-width: 560px){
    :root[data-ds-stack] .views .ds-tabs[data-ds-stick]{top:var(--ds-stick-top);
         background:var(--ds-ground);border-bottom:var(--ds-border) solid var(--ds-line);
         padding-inline:var(--ds-chrome-bleed,var(--ds-pad));
         margin-inline:calc(var(--ds-chrome-bleed,var(--ds-pad)) * -1);}
  }
  /* A fragment lands below whatever is stuck above it, which the script below measures
     as --views-clear. The fallback is the contract's own margin. */
  .views [id]{scroll-margin-top:calc(var(--views-clear, calc(var(--ds-frame-bar-h) + 28px)) + 12px);}
  .views .ds-tabpanel{padding-block:2px;}
  .lede{color:var(--ds-ink-2);max-width:66ch;font-size:17px;margin:0 0 4px;}
  /* THE SUMMARY. Three sentences under the name: where the record began, where it ends,
     and what is being built now. It was the Career view's lede until 2026-10-01. */
  .summary{color:var(--ds-ink);max-width:62ch;font-size:17px;line-height:1.55;margin:14px 0 0;}
  .sub{color:var(--ds-ink-3);max-width:68ch;margin:0 0 16px;}
  /* The bullets under a section lede: the same voice, as a list. A section is
     one sentence and then the facts. */
  ul.pts{color:var(--ds-ink-2);max-width:66ch;font-size:17px;margin:8px 0 0;padding-left:20px;}
  ul.pts li{margin:5px 0;}

  /* A role is a card. The head carries WHO and WHEN; the body carries what was
     built, as bullets rather than paragraphs. */
  /* The roles are one frame-level row inside .ds-group-body, not six cards in
     its grid: a career record is ordered, so it is a column. v0.7's
     `.ds-group-body > :not(.ds-card)` rule spans this wrapper across the frame,
     which is exactly what a wrapper is for here.

     GRID, NOT `flex-direction:column`, and it is not a preference. The contract
     sets `details.ds-card:not([open]){align-self:start}` so a folded card does
     not draw its rail down the height of an open neighbour. In a COLUMN FLEX
     the cross axis is horizontal, so that same rule collapses a folded card to
     its content width -- measured here at 7px, five of six roles invisible. In
     a one-column grid, align-self is the block axis and the width still
     stretches, which is what the rule means. */
  .roles{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ds-gap);}
  .role{margin-top:0;}
  .role h3{margin:0 0 2px;font-size:16px;color:var(--ds-ink);}
  .role-org{font-family:var(--ds-font-mono);font-size:var(--ds-text-sm);color:var(--ds-ink-3);}
  .role ul{margin:10px 0 0;padding-left:18px;color:var(--ds-ink-2);}
  .role li{margin:5px 0;}
  .role .ds-nodata{margin:0;}

  /* THE SCHOOLS: one capsule at the foot of the historical record, three
     pills left to right in time. Each emblem is the school's colours with a
     generic motif, never its mark. The contract's reduced-motion invariant
     stops the drift for a reader who asks. */
  .edu-bed{margin-top:var(--ds-gap);}
  .edu{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;gap:8px;list-style:none;
       margin:0;padding:8px;border:var(--ds-border) solid var(--ds-line);border-radius:32px;
       background:var(--ds-surface-2);}
  .edu::after{content:"";position:absolute;inset:0;pointer-events:none;
       background:linear-gradient(100deg,transparent 42%,
         color-mix(in oklab,var(--ds-accent) 22%,transparent) 50%,transparent 58%);
       transform:translateX(-100%);animation:edu-sweep 8s ease-in-out infinite;}
  .edu li{display:flex;flex:1 1 210px;margin:0;}
  .edu-pill{display:flex;align-items:center;gap:10px;flex:1;min-height:44px;
       padding:5px 16px 5px 5px;border-radius:var(--ds-radius-pill);background:var(--ds-surface);
       border:var(--ds-border) solid var(--ds-line-2);color:var(--ds-ink);text-decoration:none;
       font-family:var(--ds-font-display);font-size:16px;line-height:1.2;}
  .edu-pill:hover{border-color:var(--ds-accent);}
  .edu-pill .edu-go{margin-left:auto;color:var(--ds-ink-3);font-size:14px;}
  .bedrock{display:block;width:100%;height:22px;margin-top:6px;}
  .bedrock .bed-drift{animation:edu-drift 9s linear infinite;}
  .bedrock .bed-drift.slow{animation-duration:16s;}
  .bedrock .bed-drift.fast{animation-duration:6s;}
  @keyframes edu-sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
  .edu-hero{width:38px;height:38px;flex:none;border-radius:50%;display:block;}
  .edu-hero .edu-drift{animation:edu-drift 3s linear infinite;}
  .edu-hero .edu-drift.slow{animation-duration:5s;}
  .edu-hero .edu-sway{transform-box:view-box;transform-origin:20px 8px;
       animation:edu-sway 3.2s ease-in-out infinite alternate;}
  @keyframes edu-drift{from{transform:translateX(0)}to{transform:translateX(var(--p))}}
  @keyframes edu-sway{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}

  /* THE COMPANY MARK. ONE HEIGHT, and the width follows the artwork -- two of
     the eight tiles are wider than they are tall, and forcing them square
     would letterbox two logos to make six line up. The rounded square is
     already in the PNG, cut with transparent corners by
     content/career/make-icons.py, so nothing here clips or draws a frame.
     flex:none keeps it from shrinking when a long company name wraps beside
     it.
     A 26px disc was right while the marks were circular; a 50% radius on a
     square tile cuts the corner off artwork drawn to the corner. */
  .co{height:28px;width:auto;flex:none;display:block;}

  /* "Currently working on" -- a control, not a card. It is one tap target, so
     the whole thing is the anchor rather than a panel with a link inside it. */
  .now{display:flex;align-items:center;gap:12px;max-width:640px;text-decoration:none;
       padding:var(--ds-pad-tight) var(--ds-pad);margin-top:var(--ds-gap);
       border:var(--ds-border) solid var(--ds-line);border-radius:var(--ds-radius-sm);
       background:var(--ds-surface-2);color:var(--ds-ink);}
  .now:hover,.now:focus-visible{border-color:var(--ds-accent);}
  .now[href^="http"]{border-style:dashed;}
  .now .now-b{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .now .now-t{font-family:var(--ds-font-display);font-size:17px;}
  .now .now-go{margin-left:auto;color:var(--ds-ink-3);}
  .now:hover .now-go{color:var(--ds-accent);}

  /* The design clip. 1920x1080, 73s. 560 rather than the 420 the first square
     one got: the same cap on a 16:9 source gives a 236px-tall picture, which is
     too small to read a CAD walkthrough in. */
  /* The film archive's one still. */
  .film{display:block;max-width:360px;margin-top:var(--ds-gap);}
  .film img{display:block;width:100%;height:auto;border-radius:var(--ds-radius-sm);
            border:var(--ds-border) solid var(--ds-line);}

  /* The lab loop, Lab Manager's SVG inline. 720 is its own viewBox width. */
  .loop{margin:var(--ds-gap) 0 0;max-width:720px;}
  .loop svg{display:block;width:100%;height:auto;}
  /* A figure Lab Manager gives as a frame of its film, not as SVG (V4 to V5). */
  .loop img{display:block;width:100%;height:auto;border-radius:var(--ds-radius-sm);}
  .loop figcaption{margin-top:6px;color:var(--ds-ink-3);font-size:var(--ds-text-sm);}

  /* .clip-sound looks like .clip and is not one: the autoplay script below selects
     video.clip, which is muted and silent, and a track with sound starts only when pressed. */
  .clip,.clip-sound{display:block;width:100%;max-width:560px;height:auto;border-radius:var(--ds-radius-sm);
        border:var(--ds-border) solid var(--ds-line);background:#000;margin-top:var(--ds-gap);}

  /* FILMSTRIP. A row of views under the clip, scrolling sideways rather than
     wrapping -- four orthographic views are an ordered set and a wrapped grid
     reads as an unordered one. Each thumb is a button, so it is reachable by
     keyboard and carries a focus ring from the contract. */
  /* [hidden] GUARDS. A class that sets `display` outranks the browser's own
     [hidden]{display:none}, so the attribute silently stops working. That is
     true of 81 of the 83 components in contract.css and it is filed as W36;
     these two are mine and are fixed here. */
  .strip[hidden],.stage[hidden]{display:none;}
  .strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin-top:10px;
         max-width:560px;scrollbar-width:thin;}
  .strip button{flex:none;padding:0;border:var(--ds-border) solid var(--ds-line);
        border-radius:var(--ds-radius-sm);background:var(--ds-surface-2);cursor:pointer;
        line-height:0;overflow:hidden;}
  .strip button[aria-pressed="true"]{border-color:var(--ds-accent);}
  .strip img{display:block;width:120px;height:80px;object-fit:cover;}
  .strip .cap{display:block;line-height:1.2;padding:4px 6px;text-align:left;
        font-family:var(--ds-font-mono);font-size:var(--ds-label-size);
        letter-spacing:var(--ds-label-spacing);text-transform:uppercase;color:var(--ds-ink-3);}
  /* The opened view. Hidden until a thumb is pressed -- nothing is preselected,
     because the clip above is what the section leads with. */
  .stage{margin-top:var(--ds-gap);max-width:560px;}
  .stage img{display:block;width:100%;height:auto;border-radius:var(--ds-radius-sm);
        border:var(--ds-border) solid var(--ds-line);}
  .stage figcaption{margin-top:6px;color:var(--ds-ink-3);font-size:var(--ds-text-sm);}
  .ds-card-head .ds-card-name{display:inline-flex;align-items:center;gap:10px;}


  /* ── THE HOVER CLIP ───────────────────────────────────────────────────────
     One shared box, driven by clips.js off any element carrying data-clip.
     The element declares the size; this only says how the box looks. It never
     takes the pointer, so moving onto it cannot pull the pointer off whatever
     opened it -- which would flicker it open and shut. */
  .clip-pop{position:fixed;z-index:60;border-radius:var(--ds-radius-sm);
       border:var(--ds-border) solid var(--ds-line);background:#000;
       object-fit:cover;box-shadow:0 14px 34px -12px rgba(0,0,0,.9);
       pointer-events:none;opacity:0;transition:opacity 160ms var(--ds-ease);}
  .clip-pop.on{opacity:1;}

  /* AGENTIC BLOGS (Tony, 2026-10-01). Five views are each one context's posts, newest
     first. A post is a card: a name and its date in the head, then a title, one sentence,
     the facts, and what shows them. Lab Manager's text is cut to a one-sentence summary,
     highlights that do not repeat it and one closing sentence (Tony, 2026-10-09). In
     Software projects and Industrial design the name
     carries its project's mark, the one on the index tree (Tony, 2026-10-08), at the
     career cards' size and as .co, so it is decoration with the name beside it. An SPM
     post on the sensor head takes img/design/sensor-head.png. A grid column for the reason .roles gives. */
  .posts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ds-gap);margin-top:var(--ds-gap);}
  .post h3{margin:0 0 6px;font-size:17px;color:var(--ds-ink);}
  /* A post's title links to the post's own page in post/, which build.py writes (W117).
     It reads as the title it was: underlined only under the pointer or the focus ring. */
  .post h3 a{color:inherit;text-decoration:none;}
  .post h3 a:hover, .post h3 a:focus-visible{text-decoration:underline;}
  .post p{margin:0;color:var(--ds-ink-2);max-width:66ch;}
  .post ul{margin:10px 0 0;padding-left:18px;color:var(--ds-ink-2);max-width:66ch;}
  .post li{margin:5px 0;}
  .post ul + p{margin-top:10px;}
  .post .film{margin-top:0;}
  .post h4{margin:14px 0 4px;font-size:15px;color:var(--ds-ink);}
  .post dl.spec{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;
        margin:10px 0 0;max-width:66ch;color:var(--ds-ink-2);}
  .post dl.spec dt{color:var(--ds-ink-3);}
  .post dl.spec dd{margin:0;}
  .post .ds-slot{margin:0;}
  /* A figure keeps the browser's 40px side margin unless told otherwise. */
  .post figure{margin-left:0;margin-right:0;}
  /* A line called out at Tony's ask (2026-10-23): bold, in the console skin's dark yellow,
     its d4 at hue 75. Literal, because this page's mood rotates the ramp tokens and d4 here
     draws magenta. */
  .post strong.gold{color:#895700;}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .post strong.gold{color:#EDB25A;}}
  :root[data-theme="dark"] .post strong.gold{color:#EDB25A;}
  .post strong.gold a{color:inherit;text-decoration:underline;}

  .grid2{display:grid;gap:var(--ds-gap);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
  .proj{display:flex;flex-direction:column;text-decoration:none;color:inherit;}
  /* :target too -- a card the index tree landed on lights the way a pointed-at
     one does, so the reader sees which of the four the branch meant. */
  .proj:hover .ds-card,.proj:focus-visible .ds-card,.proj:target .ds-card{border-color:var(--ds-accent);}
  .proj .ds-card{height:100%;}
  .proj h3{margin:0 0 4px;font-size:17px;color:var(--ds-ink);font-family:var(--ds-font-display);}
  .proj p{margin:0;color:var(--ds-ink-2);font-size:var(--ds-text-sm);}
  .proj ul{margin:8px 0 0;padding-left:16px;color:var(--ds-ink-3);font-size:var(--ds-text-sm);}
  .proj li{margin:3px 0;}
  .proj .go{margin-top:10px;font-family:var(--ds-font-mono);font-size:var(--ds-label-size);
            letter-spacing:var(--ds-label-spacing);text-transform:uppercase;color:var(--ds-accent);}

  .gallery{display:grid;gap:var(--ds-gap);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
           margin-top:var(--ds-gap);}
  .gallery figure{margin:0;}
  .gallery img{display:block;width:100%;height:auto;border-radius:var(--ds-radius-sm);
               border:var(--ds-border) solid var(--ds-line);background:var(--ds-surface-2);}
  .gallery figcaption{margin-top:6px;color:var(--ds-ink-3);font-size:var(--ds-text-sm);}
  .load{display:flex;flex-direction:column;align-items:center;justify-content:center;
        gap:10px;padding:30px 18px;text-align:center;}
  .load p{margin:0;color:var(--ds-ink-3);font-size:var(--ds-text-sm);max-width:46ch;}
  .foot{margin-top:44px;padding-top:18px;border-top:var(--ds-border) solid var(--ds-line);
        color:var(--ds-ink-3);font-size:var(--ds-text-sm);}
  .foot a{color:var(--ds-accent);}

  /* THE VERSION LINE. Two numbers from two different sources -- site.json for
     the site, contract.css's --ds-version for the design system -- and the
     data-ver attributes are what check-deployed.sh finds them by. Nothing on
     this page reads either file at runtime: these are copies, checked, exactly
     like ds/ is a checked copy of design-system/. */
  .ver{display:block;margin-top:10px;font-family:var(--ds-font-mono);
       font-size:var(--ds-label-size);letter-spacing:var(--ds-label-spacing);
       text-transform:uppercase;color:var(--ds-ink-3);}