/* Jittery and Alone · styles only its pages use, loaded after /shared/deep-dive.css.
   1 · Lone Endeavor, 2 · No form letters, 3 · Inside the walls and the entrance use only shared blocks. */

/* the first issue, page by page (4 · Ink-stained wretches): one tile per page of the eight-page
   Grapevine of June 1944, with what each page held. Items for members far from a group (at sea,
   in uniform, on an island, writing in) are in the accent color with a mark before them; the tile
   of a page that carried any gets an accent edge. Phones: two tiles across; from 700px, four. */
.issue{margin:24px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.issue{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:32px}}
.pg{background:var(--mat);border:1px solid var(--line);border-radius:4px;padding:12px 12px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 0 var(--line-2)}
.pg.far{border-top:4px solid var(--accent)}
.pg .pno{margin:0;font:700 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.pg ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.pg li{font:400 calc(15px*var(--ts,1))/1.35 var(--serif);color:var(--ink)}
.pg li.f{color:var(--accent);font-weight:600;padding-left:14px;position:relative}
.pg li.f::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pg li .n{display:block;margin-top:2px;font:400 calc(13px*var(--ts,1))/1.4 var(--sans);color:var(--ink-2)}
@media (min-width:1100px){.pg{padding:14px 16px 16px}.pg li{font-size:calc(16px*var(--ts,1))}}
.issue-key{margin:14px 0 0;font:400 calc(13px*var(--ts,1))/1.5 var(--sans);color:var(--ink-2);display:flex;align-items:center;gap:8px}
.issue-key::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

/* the captain's log (5 · A loner at sea): his letters to the office as dated entries, oldest first.
   Each entry has a place and date (mono) and one or two sentences. A slip gets a dashed edge; the
   last entry is boxed in the card color. Phones stack the place and date above the entry; from
   700px they sit in a column on the left, as in a ship's log; boxed entries narrow that column by
   their extra padding so the entries still line up. The last entry has a solid accent edge. */
.log{margin:24px 0 0;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.log li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 4px 16px;border-bottom:1px solid var(--line-2)}
.log .at{margin:0;font:700 calc(13px*var(--ts,1))/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.log .at span{display:block;font-weight:400;color:var(--ink-2)}
.log .entry{margin:0;font-size:calc(18px*var(--ts,1));line-height:1.5}
.log li.slip{border:1px dashed var(--accent);border-radius:8px;margin:8px 0;padding:14px 14px 16px}
.log li.last{background:var(--card);border:1px solid var(--accent);border-radius:8px;margin:10px 0 0;padding:14px 14px 16px}
@media (min-width:700px){
  .log li{grid-template-columns:200px minmax(0,1fr);gap:24px;padding:16px 8px 18px}
  .log li.slip,.log li.last{padding:16px 16px 18px;grid-template-columns:192px minmax(0,1fr)}
}
@media (min-width:1100px){.log{margin-top:32px}.log li{grid-template-columns:240px minmax(0,1fr)}.log li.slip,.log li.last{grid-template-columns:232px minmax(0,1fr)}.log .entry{font-size:calc(19px*var(--ts,1))}}

/* on your end (6 · Bulletin boards): one stop per new line, oldest first, strung on a wire. Each stop
   has a year (mono), the line as a heading, a sentence, and "On your end": what a member needed at
   home. Phones: one column, the wire down the left with a dot at each stop. From 700px: two columns,
   then four from 1100px, each stop hung from an accent edge with its dot on top. The last stop is
   boxed in the night colors. */
.wire{margin:24px 0 0;padding:0 0 0 24px;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;position:relative}
.wire::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--accent);opacity:.55}
.wire li{position:relative;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.wire li::before{content:"";position:absolute;left:-24px;top:17px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--accent)}
.wire .yr{margin:0;font:700 calc(14px*var(--ts,1))/1.2 var(--mono);letter-spacing:.06em;color:var(--accent)}
.wire h3{margin:0;font:400 calc(22px*(1 + (var(--ts,1) - 1)*0.9))/1.2 var(--display)}
.wire .what{margin:0;flex-grow:1;font-size:calc(17px*var(--ts,1));line-height:1.5}
.wire .end{margin:4px 0 0;padding-top:10px;border-top:1px dashed var(--line-2);font:400 calc(14px*var(--ts,1))/1.45 var(--sans);color:var(--ink-2)}
.wire .end b{font-weight:600;color:var(--ink)}
.wire li.last{background:var(--night);color:var(--night-ink);border-color:var(--night-edge)}
.wire li.last .yr{color:var(--gold)}
.wire li.last .end{color:var(--night-2);border-top-color:var(--night-btn)}
.wire li.last .end b{color:var(--night-ink)}
@media (min-width:700px){
  .wire{padding:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;margin-top:32px}
  .wire::before{display:none}
  .wire li{border-top:3px solid var(--accent)}
  .wire li::before{left:16px;top:-9px}
  .wire li.last{border-top-color:var(--gold)}
  .wire li.last::before{border-color:var(--gold);background:var(--night)}
}
@media (min-width:1100px){.wire{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 20px}}

/* gallery view (7 · Can you hear me?): the spring of 2020 as the tiles of a meeting on a screen,
   cameras off. Each tile has a small label (where and when), a sentence, and a name bar with a
   muted microphone; the member speaking is outlined in gold, and the caller by telephone has a
   handset. Night colors in both themes, like a screen. Phones: one column; from 700px two; from
   1100px three. */
.call{margin:24px 0 0;padding:10px;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;background:var(--night);border:1px solid var(--night-edge);border-radius:12px}
.call li{position:relative;min-height:150px;background:var(--night-line);color:var(--night-ink);border-radius:8px;padding:14px 16px 46px;display:flex;flex-direction:column;gap:8px}
.call .where{margin:0;font:400 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--night-2)}
.call .said{margin:0;font-size:calc(17px*var(--ts,1));line-height:1.5}
.call .name{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);margin:0;padding:4px 10px 4px 26px;border-radius:4px;background:var(--night);font:600 calc(13px*var(--ts,1))/1.3 var(--sans);color:var(--night-ink)}
.call .name::before{content:"";position:absolute;left:9px;top:50%;width:6px;height:10px;margin-top:-6px;border:1.5px solid var(--night-2);border-radius:4px}
.call .name::after{content:"";position:absolute;left:6px;top:50%;width:14px;height:1.5px;margin-top:-1px;background:var(--night-2);transform:rotate(-45deg)}
.call li.on{box-shadow:inset 0 0 0 2px var(--gold)}
.call li.on .name::after{display:none}
.call li.on .name::before{border-color:var(--gold)}
.call .phone{display:inline-flex;align-items:center;gap:8px}
.call .phone svg{flex:none;color:var(--night-2)}
@media (min-width:700px){.call{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;margin-top:32px}.call li{min-height:180px}}
@media (min-width:1100px){.call{grid-template-columns:repeat(3,minmax(0,1fr))}.call .said{font-size:calc(18px*var(--ts,1))}}

/* still open (Legacy): every route in the piece, the year it opened and where it stands now, with
   a link to its part. Phones stack the three; from 700px they sit in three columns, like a ledger.
   The last row, the newest route, has a gold rule above it. */
.routes{margin:24px 0 0;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.routes li{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 4px 14px;border-bottom:1px solid var(--line-2)}
.routes .began{margin:0;font:400 calc(21px*var(--ts,1))/1.25 var(--display)}
.routes .began span{display:block;margin-bottom:4px;font:700 calc(13px*var(--ts,1))/1.3 var(--mono);letter-spacing:.06em;color:var(--accent)}
.routes .now{margin:0;font-size:calc(17px*var(--ts,1));line-height:1.5}
.routes .now b{display:block;margin-bottom:2px;font:600 calc(11px*var(--ts,1))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.routes a{display:inline-flex;align-items:center;min-height:44px;font:600 calc(14px*var(--ts,1))/1.3 var(--sans);text-decoration:none}
.routes li.last{border-top:3px solid var(--gold);margin-top:-1px}
@media (min-width:700px){
  .routes li{grid-template-columns:minmax(0,4fr) minmax(0,7fr) minmax(0,3fr);gap:24px;align-items:baseline;padding:18px 8px 16px}
  .routes .now b{display:none}
  .routes a{justify-self:end;text-align:right;min-height:0}
}
@media (min-width:1100px){.routes{margin-top:32px}.routes .now{font-size:calc(18px*var(--ts,1))}}