/* A separate pocket edition leaves the desktop spread and reader intact. */
.pocket-entry{display:none}
body.pocket-open{overflow:hidden}
.pocket-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;padding:0;background:#f4f2e8;color:#252a23;overflow:hidden;overscroll-behavior:contain;box-shadow:none}
.pocket-dialog::backdrop{background:#20282080}
.pocket-shell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.pocket-header{display:grid;grid-template-columns:1fr 44px;align-items:center;padding:env(safe-area-inset-top,0px) 6% 10px;border-bottom:1px solid #252a2326;background:#e5e4db;gap:0 12px}
.pocket-header h2{font:400 1.65rem var(--serif);letter-spacing:-.03em;margin:0}
.pocket-close{border:0;background:none;font-size:29px;min-height:48px;color:inherit}
.pocket-contents{grid-column:1/-1;border:0;border-bottom:1px solid #252a232b;border-radius:0;background:transparent;color:inherit;font:400 13px var(--sans);width:100%;height:36px;min-width:0;padding:0 5px}
.pocket-track{overflow:hidden;min-height:0;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;perspective:800px;outline-offset:-4px;background:#f9f7ee;container-type:size}
.pocket-page{display:grid;min-height:100%;width:100%;max-width:680px;margin-inline:auto;position:relative;overflow:hidden;background:#f9f7ee;box-shadow:inset 8px 0 10px -12px #37352280}
.pocket-page .page-content{height:auto;min-height:100%;padding:23px 25px 28px;overflow:visible}
.pocket-page .page-folio{display:none}
.pocket-page .page-running{font-size:11px;letter-spacing:.02em;gap:10px;padding-bottom:12px}
.pocket-page .page-content h3{font-size:3.05rem;line-height:1;margin:25px 0 22px}
.pocket-page .page-text{font-size:16px;line-height:1.65;margin-bottom:17px}
.pocket-page .page-content blockquote{font-size:1.8rem;line-height:1.2;margin:12px 0 20px}
.pocket-page .editorial-photo{margin:18px 0 0}.pocket-page .editorial-photo img{height:190px}
.pocket-page .page-bleed{height:100%;width:100%;object-fit:cover}
.pocket-page .cover-layout{min-height:100%;color:#fff8e8;gap:12px}
.pocket-page .cover-layout h3{font-size:4.1rem;margin-top:28px}.pocket-page .cover-layout .cover-subtitle{margin-top:10px}
.pocket-page .mag-cover-top,.pocket-page .mag-cover-bottom{font-size:11px;letter-spacing:.04em}
.pocket-page .mag-cover-bottom{padding-top:16px;margin-top:auto}
.pocket-page .personality-title{margin:20px 0 12px}.pocket-page .big-initial{font-size:5rem}.pocket-page .personality-title p{font-size:1.7rem}
.pocket-page .page-small-photo{width:100%;margin:15px 0 0;transform:none}.pocket-page .page-small-photo img{max-height:180px;object-fit:cover}
.pocket-page .page-back .back-portrait{height:210px;width:60%;margin-top:18px}
.pocket-footer{display:grid;grid-template-columns:50px 1fr 50px;align-items:center;padding:8px 6% max(10px,env(safe-area-inset-bottom));border-top:1px solid #252a2326;background:#e5e4db;color:#252a23;gap:0 10px}
.pocket-footer button{width:48px;min-height:44px;border:1px solid #252a2350;border-radius:50%;background:none;color:inherit;font-size:22px}
.pocket-footer button:disabled{opacity:.25;cursor:default}
.pocket-progress{text-align:center;font:400 14px var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.12em}
.pocket-hint{grid-column:1/-1;text-align:center;margin-top:7px;font-size:11px;color:#606455;line-height:1.5}
.pocket-dialog :focus-visible{outline:2px solid #a3422a;outline-offset:2px}
@media(max-width:1100px){
  .pocket-mode #book-stage,.pocket-mode #book-hint,.pocket-mode #reading-toggle{display:none!important}
  .pocket-entry:not([hidden]){display:flex;align-items:center;flex-direction:column;margin-top:36px}
  .pocket-cover{width:min(270px,90%);aspect-ratio:3/4;position:relative;isolation:isolate;padding:22px 24px;border:0;color:#fff8e8;text-align:left;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 17px 30px #25332b25;transform:rotate(-2deg);background:#164d4b}
  .pocket-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
  .pocket-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#032d3970,transparent 7%),linear-gradient(#153f4770,#153f470a 55%,#123a4490);z-index:-1}
  .pocket-cover-edition{font-size:10px;line-height:1.5;letter-spacing:.09em;border-bottom:1px solid #fff8e866;padding-bottom:11px}
  .pocket-cover-title{font:400 3.6rem/.85 var(--serif);letter-spacing:-.055em;display:block;margin-top:auto;margin-bottom:27px}
  .pocket-cover-title em{display:block;font-weight:400;margin-top:5px}
  .pocket-cover-invitation{display:block;border-top:1px solid #fff8e866;padding-top:14px;font-size:13px;letter-spacing:.02em}
  .pocket-entry-note{font-size:13px;color:#626758;margin-top:27px;text-align:center}
  .pocket-skip{font-size:13px;margin-top:12px;min-height:44px;display:flex;align-items:center;gap:10px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#62675860}
}
@media(min-width:701px) and (max-width:1100px){.pocket-cover{width:320px}.pocket-entry{margin-bottom:20px}.pocket-track{background:#e9e7dc}.pocket-page .page-content{padding:32px 42px}.pocket-page .editorial-photo img{height:240px}}
@media(max-width:700px){
  /* Keep the title below the edition rule, clear of the boat and its wake. */
  .pocket-cover-title{font-size:min(3.6rem,14.5vw);margin-top:14px;margin-bottom:auto}
}

/* The pocket edition uses the available viewport, including Safari's bars.
   Typography and photograph space are fitted together, never clipped. */
.pocket-dialog{height:100dvh;height:var(--pocket-viewport-height,100dvh)}
.pocket-header{grid-template-columns:minmax(0,1fr) 44px;padding:env(safe-area-inset-top,0px) 5% 4px;gap:8px}
.pocket-header h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pocket-close{grid-column:2;grid-row:1;min-height:44px}
.pocket-contents{grid-column:1;grid-row:1;height:44px;font-size:13px}
.pocket-footer{padding:5px 5% max(6px,env(safe-area-inset-bottom));gap:0 8px}
.pocket-hint{display:none}
.pocket-page{height:100%;min-height:0;max-width:680px;--pocket-font:clamp(14px,2.55cqh,17px);--pocket-space:clamp(6px,1.55cqh,14px)}
.pocket-page .page-content{height:100%;min-height:0;padding:clamp(12px,2.6cqh,26px) clamp(18px,5vw,38px);overflow:visible}
.pocket-page .page-content>*{flex-shrink:0}
.pocket-page .page-running{font-size:10px;line-height:1.3;padding-bottom:var(--pocket-space);letter-spacing:0;gap:8px}
.pocket-page .page-content h3{font-size:clamp(28px,6.4cqh,46px);line-height:.98;margin:var(--pocket-space) 0;letter-spacing:-.04em}
.pocket-page .page-content .page-text,.pocket-page .page-back>p{font-size:var(--pocket-font);line-height:1.43;margin:0 0 var(--pocket-space);max-width:none}
.pocket-page .page-content blockquote{font-size:clamp(19px,3.8cqh,27px);line-height:1.13;margin:var(--pocket-space) 0}
.pocket-page .editorial-photo,.pocket-page .page-small-photo{display:flex;flex-direction:column;flex:1 1 0;min-height:50px;width:100%;margin:var(--pocket-space) 0 0;transform:none}
.pocket-page .editorial-photo img,.pocket-page .page-small-photo img{flex:1 1 0;min-height:0;width:100%;height:100%;max-height:36cqh;aspect-ratio:auto;object-fit:contain}
.pocket-page .page-small-photo figcaption{font-size:9px;line-height:1.2;padding-top:5px}
.pocket-page .personality-title{margin:var(--pocket-space) 0 0}
.pocket-page .personality-title p{font-size:clamp(22px,4cqh,30px)}
.pocket-page .big-initial{font-size:clamp(44px,9cqh,70px)}
.pocket-page .page-back .back-portrait{width:100%;height:35cqh;min-height:50px;max-height:280px;object-fit:contain;transform:none;margin:var(--pocket-space) 0}
.pocket-page .cover-layout{gap:var(--pocket-space)}
.pocket-page .cover-layout h3{font-size:clamp(42px,11cqh,76px);margin:var(--pocket-space) 0 0}
.pocket-page .cover-subtitle{font-size:var(--pocket-font);margin-top:var(--pocket-space)}
.pocket-page .mag-cover-top,.pocket-page .mag-cover-bottom{font-size:10px;line-height:1.4;letter-spacing:.03em;padding-block:var(--pocket-space)}
.pocket-page.is-compact{--pocket-font:14px;--pocket-space:5px}
.pocket-page.is-compact .page-content{padding-block:10px}
.pocket-page.is-compact .page-content h3{font-size:28px}
.pocket-page.is-compact .page-content blockquote{font-size:18px}
.pocket-page.is-compact .page-text{line-height:1.32}
