/* NXNY — house stylesheet.
   The article design is a 1:1 port of the “Annals of Attraction” artifact
   (tokens, class vocabulary, three-state theming, print edition). Site
   chrome below is composed from the same tokens. Do not restyle casually. */

  /* Single appearance, by editorial decision: the magazine is white in every
     reader's theme. Do not reintroduce dark-mode blocks casually. */
  :root{
    --paper:#ffffff;
    --ink:#171512;
    --accent:#a81b1e;
    --muted:#6e675e;
    --rule:#171512;
    --hairline:rgba(23,21,18,.22);
    --tint:#f4efe3;
    --tint2:#e9e2d1;
    --tint3:#dcd3bf;
    --tintacc:rgba(168,27,30,.14);
    --display:"Didot","Bodoni 72","Playfair Display",Georgia,serif;
    --body:"Iowan Old Style",Charter,Palatino,Georgia,serif;
  }
  html,body{margin:0;padding:0}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:1.2rem;
    line-height:1.6;
    text-rendering:optimizeLegibility;
  }
  ::selection{background:var(--tintacc)}
  a{color:var(--accent);text-decoration:none}
  a:hover{text-decoration:underline}
  a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .article{max-width:41rem;margin:0 auto;padding:3.2rem 1.35rem 5rem}
  /* Ragged right on screen — browser justification makes rivers; the print
     edition below keeps the justified, hyphenated setting of the page. */
  .article p{margin:0 0 1.05em}
  .article p.rubric,.article p.dek,.article p.byline,.article p.dateline,.article p.colophon{text-align:center;hyphens:none;-webkit-hyphens:none}
  /* ————— masthead ————— */
  .masthead{text-align:center;border-top:3px solid var(--rule);padding-top:.85rem;margin-bottom:.4rem}
  .rubric{
    font-variant-caps:all-small-caps;
    letter-spacing:.34em;
    font-size:1.02rem;
    word-spacing:.15em;
    margin:0 0 .55rem;
  }
  .rubric .dm{color:var(--accent);letter-spacing:0;font-size:.72em;vertical-align:.14em;padding:0 .55em}
  .mastrule{border:none;border-top:1px solid var(--rule);margin:0 auto;width:100%}
  h1.title{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(2.3rem,7vw,3.4rem);
    line-height:1.06;
    letter-spacing:.01em;
    margin:1.5rem 0 .9rem;
    text-align:center;
    text-wrap:balance;
  }
  .dek{
    font-style:italic;
    font-size:1.24rem;
    line-height:1.55;
    max-width:32rem;
    margin:0 auto 1.15rem;
    text-align:center;
    text-wrap:pretty;
  }
  .byline{
    text-align:center;
    font-variant-caps:all-small-caps;
    letter-spacing:.2em;
    font-size:.98rem;
    margin:0 0 .2rem;
  }
  .dateline{
    text-align:center;
    font-variant-caps:all-small-caps;
    letter-spacing:.18em;
    font-size:.85rem;
    color:var(--muted);
    margin:0 0 1.6rem;
  }
  .spot{display:block;margin:0 auto .6rem;max-width:100%;height:auto}
  /* ————— structure ————— */
  .sep{text-align:center;color:var(--accent);font-size:.85rem;letter-spacing:.9em;padding-left:.9em;margin:2.7rem 0 1.1rem}
  h2.part{
    text-align:center;
    font-family:var(--body);
    font-weight:400;
    font-variant-caps:all-small-caps;
    letter-spacing:.3em;
    font-size:1.08rem;
    margin:0 0 1.5rem;
  }
  .dc::first-letter{
    font-family:var(--display);
    font-size:3.55em;
    float:left;
    line-height:.8;
    padding:.06em .09em 0 0;
  }
  .pull{
    font-family:var(--display);
    font-style:italic;
    font-weight:400;
    font-size:1.5rem;
    line-height:1.32;
    text-align:center;
    margin:2.3rem .8rem;
    padding:1.35rem .4rem;
    border-top:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    text-wrap:balance;
  }
  /* ————— figures ————— */
  figure.fig{margin:2.5rem 0;padding:1.5rem 0 1.05rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  figure.fig .figwrap{overflow-x:auto}
  figure.fig svg{display:block;margin:0 auto;max-width:100%;height:auto}
  figcaption{
    font-size:.9rem;
    font-style:italic;
    color:var(--muted);
    text-align:center;
    margin-top:.85rem;
    line-height:1.55;
    padding:0 .6rem;
    text-wrap:pretty;
  }
  figcaption .figno{
    font-style:normal;
    font-variant-caps:all-small-caps;
    letter-spacing:.16em;
    color:var(--ink);
    padding-right:.4em;
  }
  /* svg vocabulary */
  .sk{stroke:var(--ink);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
  .skthin{stroke-width:1}
  .skhair{stroke:var(--hairline);stroke-width:1}
  .ska{stroke:var(--accent)}
  .fa{fill:var(--accent)}
  .fi{fill:var(--ink)}
  .fp{fill:var(--paper)}
  .ft{font-size:12.5px;fill:var(--ink);font-family:var(--body)}
  .fti{font-size:11.5px;font-style:italic;fill:var(--muted);font-family:var(--body)}
  .fsc{font-size:11.5px;letter-spacing:.09em;fill:var(--ink);font-family:var(--body)}
  .t1{fill:var(--tint)}.t2{fill:var(--tint2)}.t3{fill:var(--tint3)}.tac{fill:var(--tintacc)}
  .mid{text-anchor:middle}.endt{text-anchor:end}
  /* ————— end matter ————— */
  .sources{margin-top:3.2rem;border-top:1px solid var(--rule);padding-top:1.3rem}
  .sources h2{
    font-family:var(--body);font-weight:400;text-align:center;
    font-variant-caps:all-small-caps;letter-spacing:.3em;font-size:1.02rem;margin:0 0 1.1rem;
  }
  .sources p{font-size:.92rem;text-align:left !important;hyphens:none !important;-webkit-hyphens:none !important;
    padding-left:1.5em;text-indent:-1.5em;margin:0 0 .5em;line-height:1.55}
  .sources .cn{color:var(--accent)}
  .srcnote{font-style:italic;color:var(--muted);text-indent:0 !important;padding-left:0 !important;margin-top:1em !important}
  .colophon{
    margin-top:2.6rem;font-size:.82rem;font-style:italic;color:var(--muted);
    text-align:center;border-top:1px solid var(--hairline);padding-top:1.1rem;line-height:1.6;
  }
  .colophon .fin{color:var(--accent);font-style:normal;letter-spacing:.5em;padding-left:.5em;display:block;margin-top:.6rem}
  /* ————— black-and-white print edition ————— */
  @page{ size:A4; margin:16mm 18mm }
  @media print{
    :root{
      --paper:#ffffff; --ink:#000000; --accent:#000000; --muted:#333333;
      --rule:#000000; --hairline:rgba(0,0,0,.4);
      --tint:#f3f3f3; --tint2:#e4e4e4; --tint3:#d2d2d2; --tintacc:#bdbdbd;
    }
    html,body{background:#fff}
    body{ font-size:11.5pt; line-height:1.62;
      -webkit-print-color-adjust:exact; print-color-adjust:exact }
    .article{ max-width:100%; padding:0; animation:none }
    .article p{ orphans:3; widows:3; text-align:justify; hyphens:auto; -webkit-hyphens:auto }
    .sep{ break-after:avoid; page-break-after:avoid; margin-top:1.8rem }
    h2.part{ break-after:avoid; page-break-after:avoid }
    figure.fig, .pull, .masthead{ break-inside:avoid; page-break-inside:avoid }
    /* one ink: differentiate the paired curves by dash instead of color */
    .ska{ stroke-dasharray:6 5 }
  }

  /* ————— site chrome (NXNY) — composed from the same tokens ————— */
  .sitebar{display:flex;justify-content:space-between;align-items:baseline;max-width:41rem;margin:0 auto;padding:.8rem 1.35rem .55rem;border-bottom:1px solid var(--hairline)}
  .sitebar-name{font-variant-caps:all-small-caps;letter-spacing:.28em;font-size:1.02rem;color:var(--ink)}
  .sitebar-name:hover{text-decoration:none;color:var(--accent)}
  .sitefooter{max-width:41rem;margin:0 auto;padding:1.1rem 1.35rem 2.4rem;border-top:1px solid var(--hairline);text-align:center}
  .sitefooter p{font-size:.8rem;font-style:italic;color:var(--muted);margin:0}
  /* ————— front page ————— */
  .frontpage{max-width:41rem;margin:0 auto;padding:2.6rem 1.35rem 4rem}
  .nameplate{text-align:center;border-top:3px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.1rem 0 1.25rem;margin-bottom:2rem}
  .np-issue{font-variant-caps:all-small-caps;letter-spacing:.3em;font-size:.85rem;color:var(--muted);margin:0 0 .35rem}
  .np-title{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,9vw,4.2rem);line-height:1;margin:.08em 0 .12em}
  .np-motto{font-style:italic;font-size:1rem;color:var(--muted);margin:0}
  .indexlist{list-style:none;margin:0;padding:0}
  .indexentry{padding:1.55rem 0;border-bottom:1px solid var(--hairline);text-align:center}
  .indexentry:last-child{border-bottom:none}
  .ie-rubric{font-variant-caps:all-small-caps;letter-spacing:.3em;font-size:.9rem;margin:0 0 .5rem}
  .ie-rubric .dm{color:var(--accent);letter-spacing:0;font-size:.7em;vertical-align:.14em;padding:0 .5em}
  .ie-title{font-family:var(--display);font-weight:400;font-size:1.95rem;line-height:1.12;margin:0 0 .45rem;text-wrap:balance}
  .ie-title a{color:var(--ink)}
  .ie-title a:hover{color:var(--accent);text-decoration:none}
  .ie-dek{font-style:italic;font-size:1.08rem;line-height:1.55;max-width:30rem;margin:0 auto .55rem;text-wrap:pretty}
  .ie-byline{font-variant-caps:all-small-caps;letter-spacing:.18em;font-size:.85rem;color:var(--muted);margin:0}
  .emptystate{text-align:center;font-style:italic;color:var(--muted);padding:3rem 0}
  .lostpage .lost-dek{text-align:center;font-style:italic;margin:2.2rem 0 1rem}
  .lostpage .lost-link{text-align:center;font-variant-caps:all-small-caps;letter-spacing:.14em}
  @media print{
    .sitebar,.sitefooter{display:none}
    .frontpage{padding:0}
  }