/* A collection of real, uncropped field guides, laid out like keepsakes. */
.field-guide-viewer [hidden] { display: none !important; }
.explore-page .field-guide-collection { padding-block: clamp(1rem, 2vw, 2rem) clamp(2.5rem, 6vw, 5rem); }
.guide-collection-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.guide-collection-header h1 { margin: .7rem 0 0; font: 400 clamp(3rem, 5.8vw, 5rem)/1.04 var(--serif); letter-spacing: -.03em; }
.guide-collection-header h1 em { color: var(--department); }
.guide-collection-header > p { max-width: 30rem; margin: 0; font-size: 1rem; line-height: 1.65; }
.field-guide-collage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 3rem 1.8rem; margin-top: 3.5rem; padding: .5rem; }
.field-guide-card { min-width: 0; --tilt: -1.8deg; }
.field-guide-card:nth-child(4n + 2) { --tilt: 1.7deg; margin-top: 1.4rem; }
.field-guide-card:nth-child(4n + 3) { --tilt: -.8deg; margin-top: .35rem; }
.field-guide-card:nth-child(4n + 4) { --tilt: 2deg; margin-top: 1.8rem; }
.guide-open { display: block; color: inherit; text-decoration: none; }
.guide-paper { display: block; padding: 7px; background: #fffdf6; border: 1px solid #76684e28; box-shadow: 0 4px 5px #51483312, 0 12px 24px #5148331a; transform: rotate(var(--tilt)); transition: transform .25s ease, box-shadow .25s ease; }
.guide-paper img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; }
.guide-open:hover .guide-paper, .guide-open:focus-visible .guide-paper { transform: translateY(-5px) rotate(0); box-shadow: 0 8px 20px #5148332a; }
.guide-open:focus-visible, .guide-download:focus-visible, .field-guide-viewer a:focus-visible, .guide-viewer-close:focus-visible { outline: 2px solid var(--department, #795b3a); outline-offset: 5px; }
.guide-place { display: block; margin-top: 1.4rem; font-size: .6rem; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; color: var(--department); }
/* The illustration already carries the title. Keep its text for search and
   retain each link's descriptive aria-label without repeating it visually. */
.field-guide-card h3 { display: none; }
.field-guide-card .guide-description { margin: .7rem 0 .25rem; font-size: .85rem; line-height: 1.55; }
.guide-download { display: inline-flex; align-items: center; justify-content: flex-start; gap: .55rem; min-height: 44px; padding: .5rem 0; color: inherit; font: 500 .67rem/1.3 'DM Sans', sans-serif; text-decoration: none; letter-spacing: .07em; text-transform: uppercase; }
.guide-download:hover, .field-guide-viewer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.guide-download svg, .field-guide-viewer a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.guide-save-note { margin: 2.5rem 0 0; font-size: .8rem; line-height: 1.6; color: var(--department); }
.field-guide-collection .gather-reading { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.4rem; }
.field-guide-collection .gather-reading > div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.field-guide-collection .gather-reading a { font: 400 1.3rem/1.25 var(--serif); color: inherit; }
.field-guide-viewer { box-sizing: border-box; width: min(900px, 96vw); max-width: none; max-height: 94dvh; padding: 0; border: 1px solid #b9b09e; background: #f6f1e6; color: #293128; box-shadow: 0 24px 100px #141a1366; overflow: auto; }
.field-guide-viewer::backdrop { background: #20251cbb; backdrop-filter: blur(4px); }
.guide-viewer-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: start; gap: 1rem; padding: 1rem 1.25rem; background: #f6f1e6; border-bottom: 1px solid #29312830; }
.guide-viewer-top > div { flex: 1; min-width: 0; }
.guide-viewer-top .eyebrow { margin: 0 0 .35rem; font-size: .55rem; }
.guide-viewer-top h2 { margin: 0; font: 400 clamp(1.5rem, 3vw, 2.1rem)/1.1 var(--serif); }
.guide-viewer-close { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 10px; margin: 0; border: 1px solid #29312840; color: inherit; background: transparent; cursor: pointer; }
.guide-viewer-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.guide-viewer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding: .5rem 1.25rem; }
.guide-viewer-actions a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: inherit; font-size: .75rem; }
.guide-viewer-image { padding: 0 1.25rem 1.25rem; }
.guide-viewer-image img { display: block; width: 100%; height: auto; }
.guide-viewer-status { margin: 0; padding: 0 1.25rem; font: 400 .85rem/1.5 'DM Sans', sans-serif; }
.guide-viewer-status:not(:empty) { padding-bottom: 1rem; }
@media (max-width: 1000px) {
  .guide-collection-header { display: block; }
  .guide-collection-header > p { margin-top: 1rem; }
  .field-guide-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
  .field-guide-card:nth-child(odd) { margin-top: 0; }
  .field-guide-card:nth-child(even) { margin-top: 1.1rem; }
}
@media (max-width: 640px) {
  .field-guide-collage { gap: 1.5rem .9rem; padding-inline: 2px; margin-top: 2rem; }
  .guide-paper { padding: 4px; }
  .guide-place { font-size: .55rem; letter-spacing: .06em; margin-top: 1rem; }
  .field-guide-card h3 { font-size: 1.3rem; }
  .guide-download { font-size: .6rem; letter-spacing: .04em; }
  .field-guide-collection .gather-reading > div { grid-template-columns: 1fr; }
  .guide-viewer-top, .guide-viewer-actions { padding-inline: .8rem; }
  .guide-viewer-image { padding: 0 .6rem .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-paper { transition: none; }
}

.field-guide-viewer.full-sheet[open] {
  display: flex;
  flex-direction: column;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100dvh;
  max-height: none;
  border: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.full-sheet .guide-viewer-image { flex: 1; min-height: 0; }
.full-sheet .guide-viewer-image img { width: 100%; height: 100%; object-fit: contain; }
.full-sheet .guide-viewer-top, .full-sheet .guide-viewer-actions { flex: none; }

.field-guide-viewer:not(.full-sheet) .walk-only,
.full-sheet.reading-stops .guide-viewer-image,
.full-sheet.reading-stops .guide-viewer-actions { display:none; }
.full-sheet .walk-toolbar, .walk-bottom { flex:none; padding:8px clamp(12px,3vw,32px); }
.walk-toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:1px solid #d4d5c5; }
.walk-switch { display:flex; padding:3px; background:#e6e7d9; border-radius:24px; }
.walk-toolbar button,.walk-bottom button,.walk-stops button { color:#374832; background:transparent; border:0; font:500 13px/1.3 'DM Sans',sans-serif; cursor:pointer; min-height:44px; }
.walk-switch button { padding:6px 14px; border-radius:24px; }
.walk-switch button[aria-pressed=true], #walk-all { background:#42543a; color:white; }
.walk-stops button { border:1px solid #b3bba9; border-radius:24px; padding:7px 14px; }
.walk-stops { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; background:#fbf8f0; }
.walk-inner { max-width:680px; padding:22px clamp(16px,4vw,38px) 24px; margin:auto; }
.walk-inner h2 { margin:0; font:400 clamp(27px,3.6vw,42px)/1.12 var(--serif); }
.walk-lead,.walk-inner li p { font-size:15px; line-height:1.55; margin:6px 0; }
.walk-inner ol { padding-left:1.6rem; margin:18px 0 0; }
.walk-inner li { border-top:1px solid #d3d6c7; padding:12px 0 6px 5px; }
.walk-inner li::marker { color:#717d60; font-family:Georgia,serif; }
.walk-stop-top { display:flex; justify-content:space-between; gap:6px; align-items:center; }
.walk-stop-top h3 { font:400 25px/1.15 var(--serif); margin:0; }
.walk-stop-top button{flex:none}
.walk-inner .walk-address{font-size:13px;color:#556049;margin:0}
.walk-links{display:flex;gap:1.2rem;flex-wrap:wrap}.walk-links a,.walk-bottom a,.walk-bottom button{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:#35462d}
.walk-bottom{border-top:1px solid #c6ccb9;background:#edf0e4;text-align:center}
.walk-bottom>div{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
#walk-all{padding:6px 18px;border-radius:24px;text-decoration:none;font:500 14px/1.3 'DM Sans',sans-serif}
.walk-bottom p,.walk-bottom [role=status]{font-size:12px;line-height:1.4;margin:5px 0 0}
.walk-bottom [role=status]:empty{display:none}
@media(max-width:430px){.walk-switch button{padding-inline:10px}.walk-toolbar button{font-size:12px}.walk-bottom>div{gap:2px 8px}.walk-inner{padding-top:15px}.full-sheet .guide-viewer-actions{padding-block:0}}
.walk-links a,.walk-bottom a { gap:5px; }

.guide-visit { margin:12px 0; padding:10px 12px; border-left:2px solid #a5b497; background:#edf0e480; overflow-wrap:anywhere; }
.guide-visit .guide-visit-line { margin:6px 0; font:400 15px/1.55 'DM Sans',sans-serif; }
.guide-visit .guide-visit-line strong { font-weight:600; color:#35462d; }
.guide-visit-links { display:flex; flex-wrap:wrap; gap:0 16px; }
.guide-visit-links a { display:inline-flex; align-items:center; min-height:44px; color:#35462d; font:500 14px/1.4 'DM Sans',sans-serif; text-underline-offset:3px; }
.guide-visit .guide-visit-checked { font:400 12px/1.5 'DM Sans',sans-serif; color:#556049; margin:5px 0 0; }
.guide-planning { margin:8px 20px 20px; padding:0 16px; border:1px solid #a5b497; background:#fbf8f0; }
.guide-planning summary { cursor:pointer; padding:14px 0; font:500 16px/1.4 'DM Sans',sans-serif; color:#35462d; }
.guide-planning section { padding:6px 0 10px; }
.guide-planning h3 { margin:0; font:400 25px/1.2 var(--serif); }
@media(max-width:640px) { .guide-planning { margin-inline:10px; padding-inline:12px; } }


.walk-sheet-frame { display:contents; }
.walk-pins { display:none; }
@media (min-width:960px) {
  .field-guide-viewer.full-sheet[open] {
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    background:#eeeadd;
  }
  .full-sheet .guide-viewer-top { grid-area:1/1/2/3; padding:12px max(420px,48%) 12px 28px; align-items:center; }
  .full-sheet .guide-viewer-close { position:absolute; right:20px; top:50%; transform:translateY(-50%); }
  .full-sheet .walk-toolbar { grid-area:1/2; z-index:3; justify-self:end; align-self:center; border:0; padding:0; margin-right:80px; }
  .full-sheet .walk-switch { display:none; }
  .full-sheet .guide-viewer-image { grid-area:2/1; min-width:0; padding:clamp(8px,1.6dvh,18px) 16px;
    container-type:size; display:grid; place-items:center; }
  .full-sheet .guide-viewer-actions { grid-area:3/1; justify-content:center; align-items:center; border-top:1px solid #cccabb; }
  .full-sheet .guide-viewer-status { grid-area:2/1; z-index:1; align-self:start; pointer-events:none; }
  .full-sheet .walk-stops { grid-area:2/2; border-left:1px solid #c6ccb9; }
  .full-sheet .walk-bottom { grid-area:3/2; }
  .full-sheet .walk-inner { max-width:760px; padding-block:clamp(10px,2dvh,24px); }
  .full-sheet .walk-inner ol { margin-top:clamp(6px,1.2dvh,14px); }
  .pin-selected .walk-inner ol { padding:0; list-style:none; }
  .pin-selected .walk-inner li { border:0; padding-left:0; }
  .pin-selected .walk-stop-top h3 {font-size:clamp(30px,3.1vw,52px)}
  .walk-place-map { width:100%; height:clamp(200px,35dvh,360px); border:1px solid #d5d6c9; margin-top:12px; }
  #walk-reset-pin { background:#eef0e3; }
}
.walk-stop-name {display:none}
@media(min-width:960px){
  .pin-selected .walk-lead{display:none}
  .full-sheet:not(.pin-selected) .walk-inner li{
    position:relative; padding:clamp(4px,.8dvh,10px) 0 clamp(4px,.8dvh,10px) 4px;
    min-height:46px; box-sizing:border-box;
  }
  .full-sheet:not(.pin-selected) .walk-stop-name{min-height:0}
  .full-sheet:not(.pin-selected) .walk-stop-top h3{font-size:clamp(20px,2.8dvh,25px)}
  .full-sheet:not(.pin-selected) .walk-address{line-height:1.3}
  .full-sheet .walk-inner h2{font-size:clamp(27px,4.5dvh,42px)}
  .full-sheet:not(.pin-selected) .walk-stop-top h3 span{display:none}
  .full-sheet:not(.pin-selected) .walk-stop-name{display:inline-block;text-align:left;padding:0;border:0;font:inherit}
  .walk-stop-name:hover,.walk-stop-name:focus-visible{text-decoration:underline;text-underline-offset:4px}
  .pin-selected .walk-stop-name{display:none}
}
@media (min-width:960px) and (max-height:700px) {
  .full-sheet:not(.pin-selected) .walk-inner {
    padding:8px clamp(16px,2.5vw,32px);
  }
  .full-sheet:not(.pin-selected) .walk-inner ol { margin-top:4px; }
  .full-sheet:not(.pin-selected) .walk-inner li { padding-block:3px; }
  .full-sheet.pin-selected .walk-place-map { height:clamp(145px,calc(100dvh - 450px),240px); }
}

@media (min-width:960px) {
  .full-sheet .walk-toolbar #walk-all {
    display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px;
  }
  .full-sheet .guide-viewer-actions { padding-block:0; }
  .full-sheet .walk-bottom {
    display:flex; align-items:center; justify-content:center; gap:0 12px; flex-wrap:wrap;
    padding:0 16px; text-align:left;
  }
  .full-sheet .walk-bottom p { margin:0; flex:0 1 auto; max-width:calc(100% - 115px); }
  .full-sheet .walk-bottom [role=status]:not(:empty) { flex-basis:100%; text-align:center; }
}

@media (min-width:960px) {
  .field-guide-viewer[data-guide-region="chicago"] {
    --guide-scene: url('/assets/field-guides/chicago-street-environment.avif');
  }
  .field-guide-viewer[data-guide-region="michigan"],
  .field-guide-viewer[data-guide-region="indiana"] {
    --guide-scene: url('/assets/field-guides/great-lakes-environment.avif');
  }
  .field-guide-viewer[data-guide-region].full-sheet[open],
  .field-guide-viewer[data-guide-region]:not(.full-sheet)::backdrop {
    background-color:#eeeadd;
    background-image:linear-gradient(100deg, rgb(246 242 232 / 77%), rgb(246 242 232 / 83%)), var(--guide-scene);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
  }
  .field-guide-viewer[data-guide-region]:not(.full-sheet)::backdrop { backdrop-filter:none; }
  .field-guide-viewer[data-guide-region].full-sheet .walk-sheet-frame {
    box-shadow:0 5px 22px #28291938;
  }
  .field-guide-viewer[data-guide-region].full-sheet .walk-stops {
    margin:clamp(8px,1.6dvh,18px) clamp(12px,2vw,32px) clamp(8px,1.6dvh,18px) 0;
    background:#fbf8f0; border:1px solid #c9c5b6;
    box-shadow:0 4px 18px #26261524;
  }
  .field-guide-viewer[data-guide-region].full-sheet .guide-viewer-actions { background:#f6f1e6; }
  .field-guide-viewer[data-guide-region]:not(.full-sheet)[open] .guide-viewer-image img {
    height:auto; max-height:calc(90dvh - 150px); object-fit:contain;
  }
}


/* The line and the Method leaf frame the panel independently of its scroll area. */
.full-sheet .walk-stops { position:relative; overflow:hidden; padding:10px; }
.walk-stops::before {
  content:""; position:absolute; inset:8px; border:1px solid #899674;
  pointer-events:none;
}
.walk-stops::after {
  content:""; position:absolute; top:0; right:22px; width:36px; height:20px;
  background:#fbf8f0 url('/assets/email/weekly/leaf-05dc9a7fa782.png') center / contain no-repeat;
  pointer-events:none;
}
.walk-scroll { height:100%; overflow:auto; overscroll-behavior:contain; }
.walk-stops .walk-about {
  color:#33452d; background:#e3e9d9; border-color:#99a58a; padding-inline:12px;
}
.walk-about::after {
  content:""; display:inline-block; width:6px; height:6px; margin:0 2px 3px 8px;
  border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
}
.walk-about[aria-expanded=true]::after { transform:rotate(225deg); margin-bottom:0; }
.walk-details { padding:4px 0 8px; }
.walk-details .walk-place-map { display:block; width:100%; max-width:100%; }
@media(min-width:960px) {
  .full-sheet:not(.pin-selected) .walk-stop-top { min-height:0; }
  .full-sheet:not(.pin-selected) .walk-about { position:absolute; top:2px; right:0; }
  .full-sheet:not(.pin-selected) .walk-stop-top h3,.full-sheet:not(.pin-selected) .walk-address { margin-right:86px; }
  .full-sheet.pin-selected .walk-inner>h2 { display:none; }
}
@media(max-width:959px) {
  .walk-details .walk-place-map { height:180px; border:1px solid #d3d6c7; }
}

/* Keep the legend off the artwork and fit the pin layer to the printed sheet. */
.full-sheet .guide-viewer-image {
  container-type:size;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
}
.full-sheet.reading-stops .guide-viewer-image { display:none; }
.full-sheet .walk-pin-key {
  flex:none;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:24px;
  margin:0;
  padding:1px 10px;
  background:#fbf8ef;
  border:1px solid #bac2ad;
  border-radius:18px;
  color:#34462d;
  font:500 13px/1.3 'DM Sans',sans-serif;
}
.walk-pin-key span,.walk-marker {
  box-sizing:border-box;
  display:grid;
  place-items:center;
  width:16px;
  height:16px;
  background:#237240;
  color:white;
  border-radius:50%;
  font:600 14px/1 Arial,sans-serif;
}
.full-sheet .walk-sheet-frame {
  display:block;
  position:relative;
  flex:none;
  width:min(100cqw, calc((100cqh - 33px) * 2 / 3));
  aspect-ratio:2/3;
}
.full-sheet .walk-sheet-frame img { display:block; width:100%; height:100%; object-fit:contain; }
.full-sheet .walk-pins { display:block; position:absolute; inset:0; pointer-events:none; }
.walk-pins button {
  position:absolute;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  border-radius:4px;
}
.walk-marker {
  position:absolute;
  left:0;
  top:50%;
  transform:translate(-20%,-50%);
  width:28px;
  height:28px;
  border:2px solid #fffdf5;
  font-size:22px;
  box-shadow:0 1px 4px #17351d66;
}
.walk-pins button:is(:hover,:focus-visible,[aria-pressed=true]) {
  outline:2px solid #455e3c;
  background:#71895c1a;
}
.walk-pins button:focus-visible { outline-offset:2px; }
@media (prefers-reduced-motion:no-preference) {
  .full-sheet[open].introducing-markers .walk-marker {
    animation:walk-marker-wiggle 1.15s ease-in-out var(--wiggle-delay,0ms) 3;
  }
  .walk-pins button:nth-child(3n+2) { --wiggle-delay:100ms; }
  .walk-pins button:nth-child(3n) { --wiggle-delay:200ms; }
  @keyframes walk-marker-wiggle {
    0%,45%,100% { translate:0; }
    12% { translate:-3px; }
    28% { translate:3px; }
  }
}
@media(max-width:959px) {
  .walk-pins button { min-width:24px; min-height:24px; }
  .walk-marker { width:24px; height:24px; font-size:19px; }
}

.explore-page .guide-place, .explore-page #guide-viewer-region { font-size: .7rem; letter-spacing: .08em; line-height: 1.45; }

/* Holiday itineraries retain live editorial copy beside the illustrated stops. */
.walk-editorial{font-size:16px;line-height:1.6;max-width:100%;overflow-wrap:anywhere}
.walk-story{margin:14px 0 20px;padding:12px 14px;border:1px solid #b5bea5;background:#f4f1e6}
.walk-story summary{cursor:pointer;color:#566847;font-style:italic}
.walk-story p{margin:14px 0}
.walk-route-section{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6b754f;margin:12px 0!important}
.walk-order{font-style:italic;color:#657654}
.walk-evening-notes{border-top:1px solid #cbd0be;margin-top:24px;padding-top:18px}
.walk-evening-notes h3{font-size:20px!important;line-height:1.3}
.walk-evening-notes ul{padding-left:20px}
.walk-evening-notes li{margin:12px 0}
.walk-holiday-signoff{color:#657654;font-style:italic;font-weight:400}
@media(max-width:959px){.walk-editorial{font-size:15px}}
.walk-seasonal-note{font:14px/1.5 'DM Sans',sans-serif;border-block:1px solid #d4d9c9;padding:12px 0;margin:12px 0;color:#48513f}
.seasonal-edition .walk-pin-key{max-width:100%;font-size:13px;line-height:1.4;text-align:center;color:#48513f}
.guide-season-note{font:500 12px/1.4 'DM Sans',sans-serif;color:#526248;margin:8px 0 0}
.seasonal-edition .walk-bottom p{font-size:11px;line-height:1.4;max-width:none}

/* Individual Bucktown shop artwork is shared with the mobile guide. */
.walk-business-sketch { display:block; width:180px; max-width:100%; height:150px; object-fit:contain; margin:0 auto 12px; mix-blend-mode:multiply; }