/* ===== Editorial shelf =====================================================================
   The curated layer between a landing page's hero and its directory.

   TYPE follows the directories: "PT Serif" for anything a person reads as prose, Archivo for
   the 10-11px uppercase micro-labels, where PT Serif's serifs fill in and Montserrat's wide
   geometric bowls go soft. Montserrat is the masthead face and is deliberately not used here.
   See the head of lc-shops.css — masthead face vs body face vs label face is the system.

   box-sizing is scoped to this block, never set globally: a page-wide reset changes how
   unrelated links measure elsewhere in this theme.
   ========================================================================================= */
.lc-shelf{
  --lc-ink:#1d2721;--lc-muted:#6b7772;--lc-line:#e3e6e3;--lc-accent:#2f6f57;
  /* The same 22px the hero scrim and the directory's count bar use, so the section heading,
     the card names and the toolbar beneath them all start on one vertical line down the page.
     That single left edge is most of what makes the three blocks read as one page. */
  --lc-gut:22px;
  padding:46px var(--lc-gut) 10px;
}
.lc-shelf,.lc-shelf *{box-sizing:border-box}

/* ---- Heading + lede: headline left, standfirst right ------------------------------------
   Two columns rather than one centred stack. A centred block of prose under a full-bleed
   photograph reads as a caption for the photograph; an offset pair reads as the opening of
   an article, which is what it is. */
.lc-shelf__head{display:grid;gap:16px 52px;margin:0 0 32px}
@media(min-width:900px){
  .lc-shelf__head{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:end}
}
.lc-shelf__h{
  font-family:"PT Serif",Georgia,serif;font-weight:700;color:var(--lc-ink);
  font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.04;letter-spacing:-.018em;
  margin:0;max-width:15ch;text-wrap:balance}
.lc-shelf__lede{
  font-family:"PT Serif",Georgia,serif;color:var(--lc-ink);margin:0;max-width:58ch;
  font-size:1.02rem;line-height:1.62;text-wrap:pretty}
/* The opening sentence carries at display size and the rest at reading size: the eye gets a
   line it can take in at a glance before it commits to the paragraph. */
.lc-shelf__lede-lead{display:block;font-size:1.32rem;line-height:1.32;margin:0 0 7px}

/* ---- The two shapes ----------------------------------------------------------------------
   ANCHORS are posters — type over the photograph, wide. PLATES are a photograph with its
   caption beneath. Two shapes because they do two jobs: the anchors are the places the lede
   names and open the section, the plates are what it contains. */
.lc-shelf__anchors,.lc-shelf__grid{list-style:none;margin:0;padding:0}
.lc-shelf__anchors{display:grid;gap:22px;margin:0 0 24px}
@media(min-width:820px){.lc-shelf__anchors{grid-template-columns:1fr 1fr}}
.lc-shelf__grid{
  display:grid;gap:28px 22px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,278px),1fr))}

.lc-shelf__link{display:block;position:relative;text-decoration:none;color:inherit}
/* The plate colour under a decoding photograph is the hero's ink, not a grey. A grey rectangle
   is the shape of a failure on this site; a dark plate reads as a picture on its way in. */
.lc-shelf__frame{display:block;position:relative;overflow:hidden;background:#1d2721}
.lc-shelf__img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.lc-shelf__tile .lc-shelf__frame{aspect-ratio:4/3}
/* The posters flatten as they widen. Stacked full-width on a tablet a 3:2 poster is nearly
   500px tall and two of them are the whole screen, so the ratio steps down before the pair
   goes side by side. */
.lc-shelf__anchor .lc-shelf__frame{aspect-ratio:3/2}
@media(min-width:560px){.lc-shelf__anchor .lc-shelf__frame{aspect-ratio:16/9}}
@media(min-width:820px){.lc-shelf__anchor .lc-shelf__frame{aspect-ratio:2/1}}
.lc-shelf__link:hover .lc-shelf__img,
.lc-shelf__link:focus-visible .lc-shelf__img{transform:scale(1.045)}

/* Poster type sits on the frame, over a scrim in the same family the page's hero uses.
   The scrim is a fraction of the PHOTOGRAPH, not of the text block: hung off the text it is
   only as tall as the words, and over a bright frame — a white Savannah storefront, a pale sky
   — the first line lands in the thin part of the fade and the eyebrow disappears. Anchoring it
   to the frame makes the bottom third reliably dark whatever the picture is doing. */
.lc-shelf__anchor .lc-shelf__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(12,16,14,.90) 0%,rgba(12,16,14,.70) 22%,
                             rgba(12,16,14,.26) 52%,rgba(12,16,14,0) 78%)}
.lc-shelf__over{position:absolute;inset:auto 0 0 0;display:block;padding:26px 24px 20px}
.lc-shelf__cap{display:block;padding:12px 0 0}

.lc-shelf__eyebrow{
  display:block;font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  text-transform:uppercase;letter-spacing:1.5px;font-size:10.5px;font-weight:600;
  color:var(--lc-muted);margin:0 0 6px}
.lc-shelf__name{
  display:block;font-family:"PT Serif",Georgia,serif;color:var(--lc-ink);
  font-size:1.22rem;line-height:1.16;letter-spacing:-.005em;
  transition:color .18s ease}
/* Three lines, so a long blurb and a short one make rows of the same height and the grid stays
   a grid. The full text is on the district's own page, one click away. */
.lc-shelf__blurb{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin:8px 0 0;font-family:"PT Serif",Georgia,serif;
  font-size:.925rem;line-height:1.5;color:var(--lc-muted)}

.lc-shelf__over .lc-shelf__eyebrow{color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(0,0,0,.55)}
.lc-shelf__over .lc-shelf__name{
  color:#fff;font-size:clamp(1.5rem,2.7vw,2.05rem);text-shadow:0 2px 20px rgba(0,0,0,.42)}
.lc-shelf__over .lc-shelf__blurb{
  color:rgba(255,255,255,.9);-webkit-line-clamp:2;max-width:44ch;
  text-shadow:0 1px 12px rgba(0,0,0,.45)}

.lc-shelf__link:hover .lc-shelf__cap .lc-shelf__name{color:var(--lc-accent)}
.lc-shelf__link:focus-visible{outline:2px solid var(--lc-accent);outline-offset:3px}

/* ---- Phone: the plates become one swipeable rail ----------------------------------------
   Thirteen stacked photographs put the directory two and a half screens down, and the reader
   who came for the directory would never reach it. The two posters stay stacked — they are the
   section's opening and worth the height — and the eleven plates run as one snap rail, so the
   whole shelf costs about a screen and a half.
   Padding, never a negative margin: the rail must not widen the document. */
@media(max-width:719px){
  .lc-shelf{padding:30px 0 6px}
  .lc-shelf__head,.lc-shelf__anchors{padding-left:var(--lc-gut);padding-right:var(--lc-gut)}
  .lc-shelf__head{margin-bottom:20px;gap:12px}
  /* Desktop's display sizes put roughly a screen of pure type between the hero and the first
     photograph on a phone, which is the wall this section exists to replace. The words are the
     same; they are set to be read on a 414px column rather than scaled down from a 1440 one. */
  .lc-shelf__h{font-size:1.42rem;line-height:1.12;max-width:none}
  .lc-shelf__lede{font-size:.97rem;line-height:1.55}
  .lc-shelf__lede-lead{font-size:1.1rem;line-height:1.3;margin-bottom:5px}
  .lc-shelf__grid{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-left:var(--lc-gut);padding:0 var(--lc-gut) 8px;
    -webkit-overflow-scrolling:touch}
  /* The next card peeks by about a thumb's width. Wider than that and the peek shows the top
     of its caption, so the rail's edge reads as clipped sentences rather than as more to come;
     narrower and there is no affordance at all. What peeks should be photograph. */
  .lc-shelf__grid>li{flex:0 0 80%;scroll-snap-align:start}
  .lc-shelf__over{padding:20px 18px 16px}
  /* A 3:2 poster on a phone has room the 2:1 desktop one does not, and two lines cut the lead
     card's sentence mid-phrase. */
  .lc-shelf__over .lc-shelf__blurb{-webkit-line-clamp:3}
}

@media(prefers-reduced-motion:reduce){
  .lc-shelf__img,.lc-shelf__name{transition:none}
  .lc-shelf__link:hover .lc-shelf__img,
  .lc-shelf__link:focus-visible .lc-shelf__img{transform:none}
}

/* ===== Further reading — the magazine's own pieces about the same streets ================
   A thumbnail beside a headline, not another tile. It has to read as a second, quieter layer:
   two rows of equally weighted cards are two shelves, and a reader picks neither. */
.lc-read{padding:6px var(--lc-gut,22px) 0}
.lc-read,.lc-read *{box-sizing:border-box}
.lc-read__h{
  font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;
  letter-spacing:1.5px;font-size:11px;font-weight:600;color:#6b7772;
  margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid #e3e6e3}
/* auto-FIT, not auto-fill: three pieces in a four-track row leave a dead quarter on the right
   and the strip reads as a row that lost an item. Collapsing the empty track lets the three
   stretch and the block stays balanced however many pieces a page has. */
.lc-read__list{
  list-style:none;margin:0;padding:0;display:grid;gap:16px 26px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.lc-read__link{
  display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:start;
  text-decoration:none;color:inherit}
.lc-read__frame{display:block;overflow:hidden;background:#1d2721;aspect-ratio:4/3}
.lc-read__img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.lc-read__link:hover .lc-read__img,
.lc-read__link:focus-visible .lc-read__img{transform:scale(1.05)}
.lc-read__title{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-family:"PT Serif",Georgia,serif;font-size:1.02rem;line-height:1.24;color:#1d2721;
  transition:color .18s ease}
.lc-read__dek{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:6px;font-family:"PT Serif",Georgia,serif;font-size:.86rem;line-height:1.45;color:#6b7772}
.lc-read__link:hover .lc-read__title{color:#2f6f57}
.lc-read__link:focus-visible{outline:2px solid #2f6f57;outline-offset:3px}
@media(max-width:719px){
  .lc-read{padding-top:14px}
  .lc-read__link{grid-template-columns:108px 1fr;gap:12px}
  .lc-read__dek{display:none}   /* at this width the headline is the whole decision */
}
@media(prefers-reduced-motion:reduce){
  .lc-read__img,.lc-read__title{transition:none}
  .lc-read__link:hover .lc-read__img,
  .lc-read__link:focus-visible .lc-read__img{transform:none}
}

/* ===== The hand-off line into the directory ==============================================
   Same gutter as the shelf and the toolbar below it, so all three keep the one left edge. */
.lc-shelf-intro{padding:26px var(--lc-gut,22px) 20px;border-top:1px solid #e3e6e3;margin-top:22px}
.lc-shelf-intro__h{
  font-family:"PT Serif",Georgia,serif;font-weight:700;color:#1d2721;
  font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.12;letter-spacing:-.012em;margin:0 0 8px}
.lc-shelf-intro__p{
  font-family:"PT Serif",Georgia,serif;font-size:1rem;line-height:1.6;color:#6b7772;
  margin:0;max-width:66ch;text-wrap:pretty}
@media(max-width:719px){.lc-shelf-intro{padding:22px 22px 16px}}