:root {
  --sq-ground: #e0f7e2;
  --sq-ink: #20232f;
  --sq-blue: #283671;
  --sq-support: #c6d1eb;
  --sq-paper: #fafcfa;
  --sq-display: "Zilla Slab", Georgia, serif;
  --sq-reading: "Mukta", "Mukta Mahee", sans-serif;
  --sq-width: min(1280px, calc(100% - 112px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; color: var(--sq-ink); background: var(--sq-ground); font: 20px/1.55 var(--sq-reading); }
a { color: var(--sq-blue); text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--sq-blue); outline-offset: 6px; }
::selection { color: var(--sq-ink); background: var(--sq-support); }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--sq-display); font-weight: 500; }
.sq-skip { position: absolute; z-index: 10; top: -100px; left: 20px; padding: 8px 18px; background: var(--sq-paper); }
.sq-skip:focus { top: 10px; }
.sq-masthead { position: relative; z-index: 2; width: var(--sq-width); margin: 0 auto; padding: 23px 0 19px; }
.sq-wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--sq-ink); font: 500 41px/1.15 var(--sq-display); letter-spacing: -1px; text-decoration: none; }
.sq-wordmark > span:not(.sq-icon) { color: var(--sq-blue); }
.sq-wordmark .sq-wordmark-icon { width: 32px; height: 32px; margin-left: 10px; color: var(--sq-blue); }
span.sq-wordmark-icon::before { width: 69%; height: 59%; top: 12%; left: 6%; border-radius: 3px; }
span.sq-wordmark-icon::after { width: 58%; height: 48%; top: 35%; left: 33%; border: 1.6px solid currentColor; border-top: 0; border-left: 0; background: none; border-radius: 0 0 3px 0; }
.sq-shelves { display: flex; gap: 58px; margin-top: 17px; }
.sq-shelf { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 21px; line-height: 1.35; }
.sq-shelf-name { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--sq-blue); font: italic 500 18px/1.35 var(--sq-display); }
.sq-shelf a { position: relative; width: fit-content; padding: 4px 0; font-size: 18px; text-decoration: none; }
.sq-shelf a::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--sq-blue); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.sq-shelf a:hover::after, .sq-shelf a:focus-visible::after, .sq-shelf a[aria-current="page"]::after { transform: scaleX(1); }
.sq-shelf a[aria-current="page"] { font-weight: 700; }
.sq-icon { display: inline-block; position: relative; flex: 0 0 auto; width: 21px; height: 21px; vertical-align: middle; }
/* A quiet folded-sheet marker remains when the CDN is unavailable. */
span.sq-icon::before { content: ""; position: absolute; width: 65%; height: 75%; top: 12%; left: 16%; border: 1.6px solid currentColor; border-radius: 1px 5px 1px 1px; }
span.sq-icon::after { content: ""; position: absolute; width: 35%; height: 1.6px; top: 52%; left: 32%; background: currentColor; }
.sq-home-intro { position: relative; isolation: isolate; min-height: 580px; padding: 42px max(56px, calc((100vw - 1280px) / 2)) 80px; }
.sq-photo { margin: 0; }
.sq-hero-photo { position: absolute; z-index: -1; inset: 0; }
.sq-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.sq-hero-photo figcaption { position: absolute; right: max(60px, calc((100vw - 1240px) / 2)); bottom: 84px; width: 255px; padding: 20px 25px 23px; color: var(--sq-blue); background: var(--sq-paper); font: italic 500 27px/1.15 var(--sq-display); transform: rotate(3deg); box-shadow: 8px 9px 0 #28367128, 0 10px 26px #20232f1a; }
.sq-hero-photo figcaption::before { content: ""; position: absolute; top: -7px; left: calc(50% - 6px); width: 13px; height: 13px; border-radius: 50%; background: var(--sq-blue); box-shadow: 2px 3px 2px #20232f30; }
.sq-hero-panel { display: flex; flex-direction: column; width: min(750px, 65%); padding: 35px 39px 32px; background: var(--sq-ground); box-shadow: 12px 12px 0 #28367135, 0 16px 45px #20232f20; animation: sq-paper-settle .55s ease-out; }
.sq-hero-panel h1 { order: 1; margin: 0; font-size: clamp(48px, 4.45vw, 66px); line-height: 1.025; letter-spacing: -1.5px; text-wrap: balance; }
.sq-welcome { order: 3; margin: 21px 0 0; font-size: 21px; line-height: 1.35; }
.sq-hanging { order: 2; position: relative; margin: 23px 0 0; padding: 22px 3px 0; color: var(--sq-blue); cursor: auto; }
.sq-hanging p { margin: 0; font-size: 18px; line-height: 1.45; }
.sq-hanging strong { font-weight: 700; }
.sq-note-pin { position: absolute; top: 0; width: 14px; height: 14px; }
.sq-note-pin-first { left: 1px; }
.sq-note-pin-last { right: 1px; }
.sq-wall { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(18, 44px); gap: 16px 22px; width: var(--sq-width); margin: -38px auto 80px; }
.sq-wall::after { content: "?"; position: absolute; z-index: -1; left: -8px; top: 650px; color: var(--sq-blue); font: italic 500 240px/1 var(--sq-display); transform: rotate(-12deg); opacity: .14; }
.sq-placard { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 31px 28px; background: var(--sq-paper); color: var(--sq-ink); text-decoration: none; box-shadow: 7px 9px 0 #28367127, 0 14px 25px #20232f0e; transition: transform .22s ease, box-shadow .22s ease; }
.sq-placard::before { content: ""; position: absolute; z-index: -2; inset: 8px -6px -6px 7px; background: var(--sq-support); transform: rotate(1.4deg); }
.sq-placard::after { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--sq-paper); }
.sq-placard:hover, .sq-placard:focus-visible { z-index: 2; transform: translateY(-7px) rotate(0); box-shadow: 11px 16px 0 #28367135, 0 20px 32px #20232f19; }
.sq-pair { display: block; flex-shrink: 0; width: 76px; height: 24px; margin-bottom: 16px; }
.sq-sheet-number { position: absolute; top: 18px; right: 25px; color: var(--sq-blue); font: 500 45px/1 var(--sq-display); opacity: .22; }
.sq-sheet-number::before { content: attr(data-number); }
.sq-placard h2 { max-width: 470px; margin: 0 0 13px; font-size: 35px; line-height: 1.08; letter-spacing: -.55px; }
.sq-placard p { margin: 0 0 17px; font-size: 19px; line-height: 1.4; }
.sq-answer-label { display: flex; align-items: center; justify-content: space-between; gap: 24px; align-self: stretch; margin-top: auto; color: var(--sq-blue); font-size: 17px; text-decoration: underline; text-underline-offset: 5px; }
.sq-route-icon { width: 26px; height: 26px; }
span.sq-route-icon::before { width: 13px; height: 13px; top: 5px; left: 7px; border: 0; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; border-radius: 0; }
span.sq-route-icon::after { width: 19px; top: 12px; left: 4px; transform: rotate(-45deg); }
.sq-place-one { grid-column: 1 / 7; grid-row: 1 / 6; transform: rotate(-1deg); }
.sq-place-two { grid-column: 8 / 13; grid-row: 3 / 8; background: var(--sq-support); transform: rotate(1.1deg); }
.sq-place-two::before, .sq-place-four::before { background: var(--sq-paper); }
.sq-place-two::after, .sq-place-four::after { background: var(--sq-support); }
.sq-place-three { grid-column: 2 / 8; grid-row: 7 / 12; transform: rotate(.6deg); }
.sq-place-four { grid-column: 9 / 13; grid-row: 10 / 16; background: var(--sq-support); transform: rotate(-1.25deg); }
.sq-place-four h2 { font-size: 32px; }
.sq-place-five { grid-column: 3 / 9; grid-row: 14 / 19; transform: rotate(-.7deg); }
.sq-home-reading { position: relative; padding: 76px max(56px, calc((100vw - 1160px) / 2)) 85px; background: var(--sq-paper); }
.sq-home-reading::before { content: ""; position: absolute; top: -16px; right: 0; left: 0; height: 17px; background: var(--sq-paper); clip-path: polygon(0 50%, 12% 10%, 24% 55%, 41% 0, 63% 65%, 78% 20%, 100% 55%, 100% 100%, 0 100%); }
.sq-reading-section { display: grid; grid-template-columns: minmax(200px, 290px) minmax(0, 660px); justify-content: space-between; gap: 55px; padding: 35px 0 42px; border-top: 2px solid var(--sq-support); }
.sq-reading-section:first-child { padding-top: 0; border-top: 0; }
.sq-reading-section h2 { position: sticky; align-self: start; top: 30px; margin: 0; font-size: 31px; line-height: 1.17; letter-spacing: -.3px; }
.sq-section-copy > :first-child { margin-top: 0; }
.sq-section-copy > :last-child { margin-bottom: 0; }
.sq-section-copy p { margin: 0 0 23px; }
.sq-section-copy h3 { margin: 27px 0 16px; font-size: 27px; line-height: 1.2; }
.sq-section-copy ul { margin: 24px 0 28px; padding-left: 24px; }
.sq-section-copy li { margin-bottom: 16px; padding-left: 4px; }
.sq-answer-main { margin: 0 0 90px; }
.sq-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: var(--sq-width); margin: 7px auto 23px; font-size: 17px; }
.sq-breadcrumb span[aria-hidden] { margin: 0 4px; }
.sq-answer-band { position: relative; isolation: isolate; padding: 12px max(56px, calc((100vw - 1280px) / 2)) 23px; }
.sq-answer-band.sq-has-photo { min-height: 465px; padding-top: 32px; padding-bottom: 48px; }
.sq-band-photo { position: absolute; z-index: -1; inset: 0; }
.sq-band-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sq-band-photo figcaption { position: absolute; right: max(56px, calc((100vw - 1280px) / 2)); bottom: 32px; width: 245px; padding: 15px 20px; color: var(--sq-ink); background: var(--sq-paper); font: italic 500 22px/1.25 var(--sq-display); box-shadow: 5px 6px 0 #28367130; transform: rotate(2deg); }
.sq-opening { position: relative; max-width: 875px; padding: 30px 39px 35px; background: var(--sq-paper); box-shadow: 10px 11px 0 #28367130, 0 13px 30px #20232f10; }
.sq-has-photo .sq-opening { max-width: min(835px, 70%); margin-bottom: -70px; }
.sq-opening .sq-pair { margin-bottom: 14px; }
.sq-opening-label { margin: 0 0 12px; color: var(--sq-blue); font-size: 18px; }
.sq-opening h1 { margin: 0; font-size: clamp(40px, 3.7vw, 55px); line-height: 1.07; letter-spacing: -.8px; text-wrap: balance; }
.sq-dek { max-width: 700px; margin: 22px 0 0; font-size: 22px; line-height: 1.4; }
.sq-prose { width: min(1160px, calc(100% - 112px)); margin: 85px auto 0; }
.sq-return { width: min(1160px, calc(100% - 112px)); margin: 20px auto 0; padding-top: 22px; border-top: 2px solid var(--sq-support); }
.sq-footer { position: relative; padding: 50px 0 29px; background: var(--sq-support); }
.sq-footer::before { content: ""; position: absolute; top: -11px; left: 8%; width: 70px; height: 22px; background: var(--sq-ground); transform: rotate(-5deg); }
.sq-footer-inner { display: grid; grid-template-columns: minmax(0, 650px) 1fr; gap: 30px 80px; width: var(--sq-width); margin: 0 auto; }
.sq-footer-sentence { margin: 0; font: 500 29px/1.3 var(--sq-display); }
.sq-footer-nav { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 13px 24px; font-size: 18px; }
.sq-copyright { grid-column: 1 / -1; margin: 0; font-size: 16px; }
.sq-lost { width: min(850px, calc(100% - 112px)); margin: 60px auto 100px; }
.sq-lost h1 { font-size: 54px; line-height: 1.12; }
@keyframes sq-paper-settle {
  from { transform: translateY(7px) rotate(-.35deg); }
  to { transform: translateY(0) rotate(0); }
}
@media (max-width: 1150px) {
  :root { --sq-width: calc(100% - 64px); }
  .sq-shelves { gap: 35px; }
  .sq-shelf { gap: 14px; }
  .sq-home-intro { padding-left: 32px; padding-right: 32px; }
  .sq-hero-panel { width: 72%; padding: 30px; }
  .sq-hero-photo figcaption { right: 30px; width: 205px; font-size: 24px; }
  .sq-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; align-items: start; gap: 42px 32px; margin-bottom: 75px; }
  .sq-placard { grid-column: auto; grid-row: auto; padding: 26px; min-height: 300px; }
  .sq-placard h2, .sq-place-four h2 { font-size: 31px; }
  .sq-place-two { margin-top: 70px; }
  .sq-place-three { margin-top: -40px; }
  .sq-place-four { margin-top: 25px; }
  .sq-place-five { grid-column: 1 / 3; width: 65%; margin: 0 auto; }
  .sq-wall::after { top: 710px; left: 1%; font-size: 170px; }
  .sq-home-reading { padding: 65px 32px; }
  .sq-reading-section { grid-template-columns: minmax(170px, 240px) minmax(0, 1fr); gap: 35px; }
  .sq-reading-section h2 { font-size: 29px; }
  .sq-prose, .sq-return { width: calc(100% - 64px); }
  .sq-answer-band { padding-left: 32px; padding-right: 32px; }
  .sq-has-photo .sq-opening { max-width: 72%; padding: 27px 30px 32px; }
  .sq-band-photo figcaption { right: 28px; width: 190px; font-size: 21px; }
  .sq-footer-inner { gap: 30px 50px; }
}
@media (max-width: 820px) {
  .sq-shelves { display: grid; gap: 5px; }
  .sq-shelf { grid-template-columns: 118px 168px minmax(0, 1fr); gap: 13px; }
  .sq-hero-panel { width: 80%; }
  .sq-hero-photo figcaption { right: 28px; bottom: 32px; }
  .sq-home-intro { padding-bottom: 140px; }
  .sq-has-photo .sq-opening { max-width: 85%; }
  .sq-band-photo figcaption { right: 30px; bottom: 28px; }
  .sq-answer-band.sq-has-photo { padding-bottom: 145px; }
  .sq-has-photo .sq-opening { margin-bottom: 0; }
  .sq-footer-inner { grid-template-columns: 1fr; gap: 27px; }
  .sq-footer-nav { max-width: 450px; }
}
@media (max-width: 650px) {
  :root { --sq-width: calc(100% - 40px); }
  body { font-size: 18px; line-height: 1.55; }
  .sq-masthead { padding: 16px 0 13px; }
  .sq-wordmark { gap: 6px; font-size: 30px; letter-spacing: -.7px; }
  .sq-wordmark .sq-wordmark-icon { width: 25px; height: 25px; margin-left: 3px; }
  .sq-shelves { margin-top: 11px; gap: 5px; }
  .sq-shelf { grid-template-columns: 110px 82px minmax(0, 1fr); column-gap: 8px; }
  .sq-shelf-name { gap: 5px; font-size: 16px; }
  .sq-shelf-name .sq-icon { width: 15px; height: 17px; }
  .sq-shelf a { padding: 2px 0; font-size: 16px; line-height: 1.25; }
  .sq-home-intro { display: flex; flex-direction: column; min-height: 0; padding: 0; }
  .sq-hero-panel { order: 1; position: relative; z-index: 1; width: 100%; padding: 22px 20px 29px; box-shadow: none; animation: none; }
  .sq-hero-panel h1 { font-size: 36px; line-height: 1.06; letter-spacing: -.65px; text-wrap: initial; }
  .sq-welcome { order: 2; margin-top: 14px; font-size: 18px; line-height: 1.3; }
  .sq-hanging { order: 3; margin-top: 20px; padding: 21px 1px 0; }
  .sq-hanging p { font-size: 17px; line-height: 1.35; }
  .sq-hero-photo { order: 2; position: relative; z-index: 0; height: 265px; inset: auto; }
  .sq-hero-photo img { object-position: center; }
  .sq-hero-photo figcaption { right: 22px; bottom: 25px; width: 205px; padding: 15px 19px 18px; font-size: 23px; }
  .sq-wall { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; margin-top: -13px; margin-bottom: 64px; }
  .sq-wall::after { display: none; }
  .sq-placard { width: calc(100% - 14px); min-height: 270px; margin: 0; padding: 24px; }
  .sq-placard h2, .sq-place-four h2 { font-size: 31px; }
  .sq-placard p { font-size: 18px; }
  .sq-place-two, .sq-place-four { align-self: flex-end; }
  .sq-place-three { width: calc(100% - 7px); }
  .sq-place-five { width: calc(100% - 20px); margin-left: 8px; }
  .sq-sheet-number { right: 21px; font-size: 40px; }
  .sq-home-reading { padding: 48px 20px 45px; }
  .sq-reading-section { display: block; padding: 29px 0 31px; }
  .sq-reading-section h2 { position: static; margin: 0 0 20px; font-size: 29px; line-height: 1.18; }
  .sq-section-copy p { margin-bottom: 21px; }
  .sq-section-copy h3 { font-size: 25px; }
  .sq-answer-main { margin-bottom: 65px; }
  .sq-breadcrumb { margin-top: 6px; margin-bottom: 20px; gap: 6px; font-size: 16px; line-height: 1.35; }
  .sq-answer-band, .sq-answer-band.sq-has-photo { padding: 0 20px; min-height: 0; }
  .sq-answer-band.sq-has-photo { display: flex; flex-direction: column; }
  .sq-opening, .sq-has-photo .sq-opening { order: 1; max-width: 100%; width: 100%; padding: 25px 24px 29px; margin: 0; }
  .sq-opening h1 { font-size: 37px; line-height: 1.1; letter-spacing: -.55px; text-wrap: initial; }
  .sq-opening-label { margin-bottom: 14px; font-size: 17px; }
  .sq-dek { margin-top: 19px; font-size: 20px; line-height: 1.4; }
  .sq-band-photo { position: relative; order: 2; z-index: 0; inset: auto; height: 220px; margin: 27px -20px 0; }
  .sq-band-photo img { width: 100%; height: 100%; border-radius: 18px; }
  .sq-band-photo figcaption { right: 22px; bottom: 19px; width: 215px; padding: 12px 16px; font-size: 20px; }
  .sq-prose { width: var(--sq-width); margin-top: 42px; }
  .sq-return { width: var(--sq-width); margin-top: 8px; }
  .sq-footer { padding: 35px 0 26px; }
  .sq-footer-sentence { font-size: 25px; }
  .sq-footer-nav { gap: 11px 17px; font-size: 17px; }
  .sq-lost { width: var(--sq-width); margin-top: 35px; }
  .sq-lost h1 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  body { background: white; color: black; }
  .sq-skip, .sq-shelves, .sq-footer-nav, .sq-return, .sq-icon { display: none; }
  .sq-hero-panel, .sq-opening, .sq-placard { box-shadow: none; animation: none; transform: none; }
  .sq-home-intro { min-height: 0; padding: 0; }
  .sq-hero-panel { width: 100%; }
  .sq-hero-photo, .sq-band-photo { position: relative; height: 200px; }
  .sq-wall, .sq-reading-section { display: block; }
  .sq-wall { margin-top: 30px; }
  .sq-placard { break-inside: avoid; margin-bottom: 20px; }
  .sq-reading-section h2 { position: static; }
}
