/* Oct 9 · opener K on / (from opener-mockups-2026-10-09/k.py, editor removed). Desktop position under min-width:701px. */

#top.desk-opener{--k-x:76px;--k-y:60px;--k-scale:1;--k-blurb:19px;--k-cta:13.5px;--k-by:12px;--k-w:36.5ch;--k-gap:26px}   /* Brian tuned values, Oct 9: blurb 19px at 36.5ch */
#top.desk-opener .page-controls{gap:22px;top:30px}
#top.desk-opener .page-controls .appearance-toggle.mk-glyph{border:0;padding:4px;min-height:0;font-size:0;color:var(--muted)}
#top.desk-opener .page-controls .appearance-toggle.mk-glyph::after{content:'◐';font:15px/1 Duo,monospace}
#top.desk-opener .page-controls .appearance-toggle.mk-glyph:hover{color:var(--ink)}
@media (min-width:701px){
#top.desk-opener .do-ident.mk-k{left:var(--k-x);bottom:var(--k-y);max-width:none}
}
#top.desk-opener .do-ident.mk-k h1{display:flex;align-items:center;gap:.6em;font-size:calc(var(--k-by)*var(--k-scale));line-height:1.7;letter-spacing:0;margin:0}
#top.desk-opener .do-ident.mk-k h1 .name,#top.desk-opener .do-ident.mk-k h1 .role{display:inline;font-size:calc(var(--k-by)*var(--k-scale));margin:0;letter-spacing:0;line-height:1.7}
#top.desk-opener .do-ident.mk-k h1 .name{color:var(--ink)}
#top.desk-opener .do-ident.mk-k h1 .role{color:var(--muted)}
#top.desk-opener .do-ident.mk-k .mk-blurb{font-size:calc(var(--k-blurb)*var(--k-scale));line-height:1.36;letter-spacing:-.025em;max-width:var(--k-w);margin:calc(14px*var(--k-scale)) 0 0;color:var(--ink)}
#top.desk-opener .do-ident.mk-k .mk-cta{margin-top:calc(var(--k-gap)*var(--k-scale));font-size:calc(var(--k-cta)*var(--k-scale));line-height:1.8}
#top.desk-opener .do-ident.mk-k .mk-q{margin:0;font-family:inherit;font-weight:400;font-size:calc(var(--k-by)*var(--k-scale));letter-spacing:0;color:var(--ink)}   /* Oct 11: styled like the name line */
#top.desk-opener .do-ident.mk-k .mk-go{font-family:inherit;font-weight:400;font-size:calc(var(--k-by)*var(--k-scale));letter-spacing:0;display:flex;gap:.65em;align-items:baseline}
#top.desk-opener .do-ident.mk-k .mk-clk{width:.93em;height:.93em;align-self:center;margin-right:-.05em;fill:none;stroke:var(--muted);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;flex:none}
#top.desk-opener .do-ident.mk-k .mk-go i{font-style:normal;color:var(--muted);opacity:.6}
#top.desk-opener .do-ident.mk-k .mk-go a{color:var(--muted);text-decoration:none!important;transition:color .12s ease-out}
#top.desk-opener .do-ident.mk-k .mk-go a.on{color:var(--ink)}
#top.desk-opener .do-ident.mk-k .mk-go .mk-clk{display:none}
/* contact card on the name */
#top.desk-opener .mk-who{position:relative;cursor:default;outline:none}
#top.desk-opener .mk-who .name{text-decoration:underline dotted;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:4px}
#top.desk-opener .mk-card{position:absolute;left:-14px;bottom:calc(100% + 10px);display:flex;flex-direction:column;gap:2px;padding:10px 14px;min-width:210px;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 24px -10px rgba(0,0,0,.25);font-size:12px;line-height:1.8;letter-spacing:0;
  opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .15s ease-out,transform .15s ease-out}
#top.desk-opener .mk-card::after{content:'';position:absolute;left:0;right:0;top:100%;height:12px}
#top.desk-opener .mk-who:hover .mk-card,#top.desk-opener .mk-who:focus-within .mk-card{opacity:1;transform:none;pointer-events:auto}
#top.desk-opener .mk-card a{color:var(--ink);text-decoration:none}
#top.desk-opener .mk-card a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* phones: the name card opens on tap (brief.js toggles .open); the block flows under the desk */
#top.desk-opener .mk-who.open .mk-card{opacity:1;transform:none;pointer-events:auto}
@media (max-width:700px){
#top.desk-opener .do-ident.mk-k{--k-blurb:21px;--k-cta:13.5px}
#top.desk-opener .do-ident.mk-k .mk-blurb{max-width:none}
#top.desk-opener .do-ident.mk-k .mk-go{flex-wrap:wrap;row-gap:0}
#top.desk-opener .page-controls{top:16px;right:16px}
}

/* Oct 9: with "Interactive · click inside the phone." cut, the ArgOS "Open the concept on its own" link keeps its distance from the route buttons */
#argos-concept .argos-story .concept-routes+.text-link{display:inline-block;margin-top:22px}

/* Oct 9 · phones: the first screen is only the desk and the opener (the prose starts below the fold); a larger ◐ tap target */
@media (max-width:700px){
#top.desk-opener .do-hero{min-height:100svh;box-sizing:border-box;padding-bottom:28px}
#top.desk-opener .do-hero .do-ident.mk-k{margin-top:auto}
#top.desk-opener .page-controls .appearance-toggle.mk-glyph{width:44px;height:44px;padding:0;display:grid;place-items:center}
#top.desk-opener .page-controls .appearance-toggle.mk-glyph::after{font-size:20px}
#top.desk-opener .page-controls{top:8px;right:6px}
}
/* Oct 11 (Brian): visible breathing room in the length picker, "1  /  5 minutes  /  15". Each number carries its own
   horizontal padding (part of its hit area); the first has none on the left and the last none on the right, so the row stays
   flush with the name line and blurb. On touch the padding also grows vertically to a 44px-tall target (negative margins keep the row height),
   and the first link reaches a little into the page gutter, invisibly, so the bare "1" is easier to hit. */
#top.desk-opener .do-ident.mk-k .mk-go{gap:0}
#top.desk-opener .do-ident.mk-k .mk-go a{padding:0 .75em;-webkit-tap-highlight-color:transparent}
#top.desk-opener .do-ident.mk-k .mk-go a:first-of-type{padding-left:0}
#top.desk-opener .do-ident.mk-k .mk-go a:last-of-type{padding-right:0}
#top.desk-opener .do-ident.mk-k .mk-go i{pointer-events:none}
@media (pointer:coarse){
#top.desk-opener .do-ident.mk-k .mk-go{align-items:center}
#top.desk-opener .do-ident.mk-k .mk-go a{position:relative;display:inline-flex;align-items:center;min-height:44px;margin:-11px 0;white-space:pre}
#top.desk-opener .do-ident.mk-k .mk-go a:first-of-type::before{content:"";position:absolute;left:-16px;top:0;bottom:0;width:16px}
}