/* nyd-guide-top-build-1015 (ap-a269): the guide's top as Will picked it 10/15 (design-rounds/nyd-guide-top-1015: look 3 at 1024px and up, look 1 under).
   Loaded only by templates/guide-top.php, after guide.css, so only a flagged page carries it. Ported from the round's round.css: the same type, spacing and colors.
   The reading face is Maven Pro, the theme's own sans, in place of Merriweather (sans only, fleet directive 2026-10-05); maven-pro-500.woff2 is the variable file, so 400 and 700 come from it. */
@font-face{font-family:'Maven Pro';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/maven-pro-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Maven Pro';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/maven-pro-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
body.nyd-top{--body:"Maven Pro","MP Roboto","MP Arial",sans-serif;font:400 17px/1.65 var(--body)}
/* the old Customizer CSS printed after the theme sets body{font-family:Merriweather;font-size:20px;line-height:2} and h1 to h6 in Google's 'Spartan', serif;
   the round was drawn on the kit alone, so the flagged page says the kit's faces outright */
.nyd-top h1,.nyd-top h2,.nyd-top h3,.nyd-top h4,.nyd-top h5,.nyd-top h6{font-family:var(--disp)}
.nyd-top .bar .g{min-height:44px;display:inline-flex;align-items:center}

/* the hero: the photograph and the H1, shorter than the old full screen so her lead reaches the first screen */
.nyd-top .room{height:min(64vh,640px);min-height:420px;max-height:none;padding-bottom:44px}
.nyd-top .room h1{max-width:12em}
@media (max-width:820px){.nyd-top .room{min-height:0;height:62vh;height:62dvh;max-height:none;padding-bottom:24px}}
@media (min-width:1024px){.nyd-top .room{height:min(42vh,420px);min-height:300px}}

/* her byline and her lead */
.nyd-top .convo{max-width:1328px;margin:0 auto;padding:28px var(--gut) 8px}
.nyd-top .lead-text p{font:400 20px/1.6 var(--body);margin:0 0 1em;max-width:34em}
.nyd-top .lead-text p:last-child{margin-bottom:0}
.nyd-top .lead-text p.second{font-size:var(--t3);color:var(--ink2)}
.nyd-top .lead-text a{color:inherit;text-decoration-color:var(--taxi);text-decoration-thickness:2px;text-underline-offset:3px}
.nyd-top .lead-text a:hover{background:var(--taxi);text-decoration:none}
.nyd-top .lead-text img{max-width:100%;height:auto}

/* under 1024px, look 1 (the letter): her face beside her name and facts, the count under them, the invitation at the end of her words */
@media (max-width:1023px){
  .nyd-top .convo .by{display:grid;grid-template-columns:56px 1fr;gap:0 14px;align-items:center;margin:0 0 22px}
  .nyd-top .convo .by>div{display:contents}
  .nyd-top .convo .by img{width:56px;height:56px;grid-row:1/4;grid-column:1}
  .nyd-top .convo .by b{grid-column:2;font:600 var(--t4)/1.1 var(--disp);letter-spacing:-.02em;margin-top:0}
  .nyd-top .convo .by span{grid-column:2;display:block;font:400 var(--t1)/1.55 var(--body);letter-spacing:0;text-transform:none;opacity:1;color:var(--ink2);margin-top:2px}
  .nyd-top .convo .by .k{margin-top:6px;font:500 var(--t0)/1.6 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
  .nyd-top .talk{display:none}
}
@media (max-width:820px){.nyd-top .lead-text p{font-size:18px}}
.nyd-top .invite{margin-top:30px;padding-top:18px;border-top:2px solid var(--ink)}
.nyd-top .invite .door{display:inline-block;font:600 var(--t5)/1.25 var(--disp);letter-spacing:-.02em;color:var(--ink);text-decoration:none;border-bottom:3px solid var(--taxi);padding:4px 0 2px;min-height:44px;cursor:pointer}
.nyd-top .invite .door:hover{background:var(--taxi)}
.nyd-top .invite .door:focus-visible,.nyd-top .talk .all:focus-visible,.nyd-top .fold .tl:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.nyd-top .invite .cc{margin:18px 0 0;font:400 var(--t3)/1.6 var(--body);color:var(--ink2);max-width:34em}
.nyd-top .invite .cc .k{display:block;font:500 var(--t0)/1.6 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.nyd-top .invite .cc .gap{margin:0}
.nyd-top .invite .cc .c{padding:4px 0 0;border-bottom:0}

/* 1024px and up, look 3 (the conversation): her lead left, what readers said and the form right, on the first screen */
@media (min-width:1024px){
  .nyd-top .convo{padding:22px var(--gut) 8px;display:grid;grid-template-columns:minmax(0,720px) 420px;gap:0 56px;align-items:start}
  .nyd-top .convo .by{margin:0 0 22px}
  .nyd-top .convo .by span+span{margin-top:0}
  .nyd-top .convo .by b{color:var(--ink)}
  .nyd-top .convo .by span{color:var(--mute);opacity:1}
  .nyd-top .convo .by .k,.nyd-top .invite{display:none}
}
@media (min-width:1024px) and (max-width:1100px){.nyd-top .convo{grid-template-columns:minmax(0,1fr) 360px;gap:0 32px}}
.nyd-top .talk{border-top:2px solid var(--ink);padding-top:12px}
.nyd-top .talk .th{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.nyd-top .talk .th h2{font-size:var(--t5)}
.nyd-top .talk .th span{font:500 var(--t0)/1 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.nyd-top .talk .gap{margin:10px 0 0;font:400 var(--t2)/1.55 var(--body);color:var(--ink2)}
.nyd-top .talk .c{padding:16px 0 6px}
.nyd-top .talk .c .cn{font:700 var(--t2)/1.4 var(--body)}
.nyd-top .talk .c .cb{margin:4px 0 0;font:400 var(--t2)/1.6 var(--body)}
.nyd-top .talk .c .cb p{margin:0 0 6px;font:inherit}
.nyd-top .talk .all{display:inline-block;margin:14px 0 0}
.nyd-top .talk .all:hover{background:var(--taxi)}
.nyd-top .talk form.ask{margin:14px 0 0;padding:0;border-bottom:0}
.nyd-top .talk form.ask h3{font-size:var(--t5)}
.nyd-top .talk .ask .row{grid-template-columns:1fr 1fr}
.nyd-top .talk .ask textarea{min-height:88px}

/* comment rows, at the top and in the thread band: the date beside the name, her reply with her face */
.nyd-top .c .cn span{font:500 var(--t0)/1.4 var(--caps);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-left:8px}
.nyd-top .c .r{display:grid;grid-template-columns:28px 1fr;gap:12px}
.nyd-top .c .r>img{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 18%;margin-top:3px}
.nyd-top .c .r.reader{display:block}

/* the thread band: the gap line, the fold (the first five, then more or all), the form to Antonina */
.nyd-top .thread .gap{font:400 var(--t3)/1.6 var(--body);color:var(--ink2);margin:14px 0 0}
.nyd-top .fold{display:flex;flex-wrap:wrap;gap:8px 28px;margin:18px 0 6px}
.nyd-top .fold .tl{min-height:44px}
.nyd-top .fold .tl:hover{background:var(--taxi)}
.nyd-top .thread form.ask h3{font-size:var(--t5)}
.nyd-top .ask .acts .btn{min-height:44px}
.nyd-top .ask .acts .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}   /* critic r1: the kit's 2px taxi ring on white is 1.34:1 */
@media (max-width:820px){.nyd-top .talk .ask .row{grid-template-columns:1fr}.nyd-top .ask .acts{flex-wrap:wrap}}