/* ===== 愛露營週刊 T01 v4 — magazine spreads. Never 100vw; width:100% + overflow-x:clip. ===== */
:root{--serif:"Noto Serif TC",serif;--lat:"Bodoni Moda",serif;--m:24px;--fs-body:16px;--fs-h:40px;--fs-tt:56px;--fs-dek:20px}
@media(min-width:834px){:root{--m:72px;--fs-body:17px;--fs-h:64px;--fs-tt:96px;--fs-dek:24px}}
@media(min-width:1180px){:root{--m:120px;--fs-body:18px;--fs-h:84px;--fs-tt:128px;--fs-dek:26px}}
.tpl-T01{--bg:#fbf8f2;--paper:#fff;--ink:#111;--accent:#7a5c30;--credit:#4a4a4a;--band:#23264f;--on-band:#fbf8f2;--link:#111;--focus:#7a5c30}
*{box-sizing:border-box}html,body{overflow-x:clip;width:100%}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/1.95 var(--serif);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}a{color:var(--link)}:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.nw{white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:#fff;padding:12px 16px;min-height:44px;z-index:9}.skip:focus{top:8px}
/* photos: natural ratio, never cropped / cover */
.ph{margin:0}.ph .pi{position:relative}.ph img{width:100%;height:auto;object-fit:contain}
.ph figcaption{font:400 14px/1.5 var(--serif);letter-spacing:.06em;color:var(--credit);padding:8px var(--m) 0}
.ph.small{max-width:420px;margin:96px auto}.ph.small.sq{max-width:340px}.ph.small figcaption{padding:8px 0 0}
.spread{min-height:100vh;min-height:100svh;width:100%}
.spread.op{display:flex;flex-direction:column;justify-content:center;background:var(--bg)}
/* type: Latin italic only (Bodoni); never italic on Chinese */
.kick{margin:0;color:var(--accent);font:400 16px/1.4 var(--serif);letter-spacing:.12em}
.kick .en{font:italic 400 18px/1.3 var(--lat);letter-spacing:.06em}
.meta{font:400 16px/1.4 var(--lat);letter-spacing:.1em;margin:0}
.tt{font:900 var(--fs-tt)/1.05 var(--serif);letter-spacing:-.02em;margin:12px 0 0}
.h{font:900 var(--fs-h)/1.15 var(--serif);letter-spacing:-.01em;margin:16px 0 0}
.h .camp{display:block;font-size:.5em;font-weight:600;margin-top:12px}
.dek{font:300 var(--fs-dek)/1.7 var(--serif);margin:28px 0 0;max-width:30em}
.pg{width:100%;max-width:1200px;margin:0 auto;padding:96px var(--m)}
.pg.text{background:var(--paper)}.spread:has(>.pg.text){background:var(--paper)}
.head{border-top:2px solid var(--accent);padding-top:28px;margin-bottom:56px}
.cols{max-width:36em}.cols p{margin:0 0 1em}
@media(min-width:834px){.cols{max-width:none;column-count:2;column-gap:56px}.pg.text .cols{max-width:960px}}
.drop::first-letter{float:left;font:900 4.2em/.9 var(--serif);margin:.08em .12em 0 0;color:var(--ink)}
.pq{margin:56px 0 0;padding:28px 0 0;max-width:24em;position:relative}
.pq::before{content:"";position:absolute;left:0;top:0;width:40px;height:2px;background:var(--accent)}
.pq p{font:600 calc(var(--fs-dek)*1.15)/1.55 var(--serif);margin:0}
.act{margin:40px 0 0}
.book,.soft{display:inline-flex;align-items:center;min-height:44px;padding:10px 0;color:var(--ink);font:600 17px/1.4 var(--serif);letter-spacing:.06em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--accent)}
.book:hover,.soft:hover{text-decoration-thickness:2px}
.tip{margin:56px 0 0;max-width:36em;border-top:1px solid var(--accent);padding-top:20px}.tip .tl{display:block;color:var(--accent);font-weight:600;letter-spacing:.12em;font-size:16px}
/* cover */
.cv{background:var(--bg)}.cv .ph{--u:3.9px}
.cv .ov{position:absolute;left:6%;top:3%;color:var(--ink)}
.cv .ov .meta{font-size:max(14px,calc(2.2*var(--u)));line-height:1.3}
.cv .vt{display:flex;flex-direction:row;align-items:flex-start;gap:calc(2*var(--u));margin-top:calc(1.5*var(--u))}
.cv .mast,.cv .cl{writing-mode:vertical-rl;margin:0}
.cv .mast{font:900 calc(6.4*var(--u))/1 var(--serif);letter-spacing:.02em}
.cv .cl{font:600 max(14px,calc(3.4*var(--u)))/1.35 var(--serif);height:calc(8.4 * max(14px,calc(3.4*var(--u))))}
.cvb{padding:72px var(--m) 96px;max-width:1200px;margin:0 auto}.cvb .st{font:300 var(--fs-dek)/1.6 var(--serif);margin:20px 0 0}.cvb .kick{margin-top:24px}
/* contents: its own page */
.toc{background:var(--paper);display:flex;align-items:center}
.toc ol{list-style:none;margin:56px 0 40px;padding:0}
.toc li{border-top:1px solid var(--ink)}.toc li:last-child{border-bottom:1px solid var(--ink)}
.toc li a{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;min-height:44px;padding:24px 0;text-decoration:none;color:var(--ink)}
.toc .n{font:400 72px/.85 var(--lat);color:var(--accent);letter-spacing:-.03em}
.toc .t{font:900 26px/1.3 var(--serif)}.toc .s{display:block;font:400 16px/1.6 var(--serif);margin-top:6px}
.toc li a:hover .t{text-decoration:underline;text-underline-offset:6px}
@media(min-width:834px){.toc .n{font-size:140px}.toc .t{font-size:40px}.toc li a{gap:48px;padding:40px 0}}
@media(min-width:1180px){.toc .n{font-size:180px}.toc .t{font-size:48px}}
/* the ONE coloured band */
.band{background:var(--band);color:var(--on-band);display:flex;align-items:center;justify-content:center;padding:96px var(--m)}
.band .pull{font:600 calc(var(--fs-h)*.6)/1.5 var(--serif);max-width:18em;margin:0;text-align:center}
.band .pull::before{content:"";display:block;width:56px;height:2px;background:#e0c08a;margin:0 auto 32px}
.sechead{padding:120px var(--m);max-width:1200px;margin:0 auto;border-bottom:1px solid var(--ink)}
.remind{padding:120px var(--m);max-width:820px;margin:0 auto;text-align:center}.remind .rm{font:300 var(--fs-dek)/1.8 var(--serif);margin:24px 0 0}
/* interview */
.qa{background:var(--paper)}.iv{border-top:1px solid var(--ink);padding:48px 0 32px}
.iv .q{font:900 calc(var(--fs-h)*.5)/1.4 var(--serif);margin:0 0 28px;max-width:20em}
.end{padding:96px var(--m);text-align:center;border-top:2px solid var(--accent)}.end .mast{font:900 48px/1 var(--serif);margin:0 0 16px}.end p{margin:0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- switches + desktop art direction (2026-10-30) ---- */
.ph .pi picture{display:block}
.ph.cropframe .pi{height:100vh;height:100svh}
.ph.cropframe img.crop{width:100%;height:100%;object-fit:cover}
.d-only{display:none}
@media (min-width:1194px){
  .d-only{display:inline}.m-only{display:none}
  .op .ph.art img{width:auto;max-width:100%;max-height:100vh;max-height:100svh;margin:0 auto;display:block}
  .cv .ph.art.port .pi{max-width:none}
  /* masthead across the clear sky of smsl498-x2: x 2-62%, y 1-20% of the photo (branches start ~y16% at x10-30%) */
  .cv .ph.art .ov{left:2%;top:.6%;width:60%;right:auto}
  .cv .ph.art .ov .meta br{display:none}.cv .ph.art .ov .meta .dd{margin-left:1em}
  .cv .ph.art .vt{writing-mode:horizontal-tb;display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--u)*.4);margin-top:calc(var(--u)*.2)}
  .cv .ph.art .mast,.cv .ph.art .cl{writing-mode:horizontal-tb;max-height:none;max-width:none}
  .cv .ph.art .mast{font-size:clamp(84px,calc(var(--u)*7.2),124px);line-height:.92;letter-spacing:.62em;margin-right:-.62em;white-space:nowrap}
  .cv .ph.art .cl{height:auto;font-size:clamp(18px,calc(var(--u)*1.7),26px);line-height:1.3;text-align:right;white-space:nowrap}
}

/* text pages at wide widths (2026-10-30, Critiquito) */
.ph.small,.ph.small.sq{max-width:none;width:100%;margin:56px 0}
@media(min-width:834px){.ph.small,.ph.small.sq{width:50%;margin:96px auto 96px 0}
  .story:nth-of-type(even) .ph.small{margin:96px 0 96px auto}}
@media(min-width:1194px){:root{--fs-body:17px}}
@media(min-width:1300px){:root{--fs-body:17.5px}}
@media(min-width:1400px){:root{--fs-body:18px}}
/* soft sky-only scrim behind the right end of the masthead (photo x 38-70%, y 0-19% = clear sky only) */
@media(min-width:1194px){.cv .ph.art .pi::before{content:"";position:absolute;left:38%;top:0;width:32%;height:19%;background:radial-gradient(ellipse at 50% 35%,rgba(251,248,242,.22),rgba(251,248,242,0) 70%);pointer-events:none;z-index:1}.cv .ph.art .ov{z-index:2}}

/* inset_layout 'beside' (default, 2026-10-30): below 834 = pull, photo, link (link stays at the story end) */
.bs{display:flex;flex-direction:column}.bs .pq{order:1}.bs .ph.small{order:2}.bs .act{order:3}
@media(min-width:834px){
  .bs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:56px;margin:96px 0}
  .bs .ph.small,.bs .ph.small.sq{grid-column:1;grid-row:1/5;width:100%;margin:0;align-self:start}
  .bs .pq{grid-column:2;grid-row:2;margin:0}.bs .act{grid-column:2;grid-row:3;margin:32px 0 0}
  .story:nth-of-type(even) .bs .ph.small{grid-column:2}
  .story:nth-of-type(even) .bs .pq,.story:nth-of-type(even) .bs .act{grid-column:1}
}
/* masthead v3 (1194+): tight tracking, larger type; meta + cover line right-aligned under it */
@media(min-width:1194px){
  .cv .ph.art .ov{display:flex;flex-direction:column;align-items:flex-start;top:1.2%}
  .cv .ph.art .vt{display:contents}
  .cv .ph.art .mast{order:1;font-size:clamp(110px,calc(var(--u)*10.2),170px);letter-spacing:.02em;margin-right:0;line-height:1}
  .cv .ph.art .ov .meta{order:2;align-self:flex-end;margin-top:calc(var(--u)*.2)}
  .cv .ph.art .cl{order:3;align-self:flex-end}
}

/* ===== v5 (2026-10-30, Sebastian): full-page photos crop to fill the screen; insets never crop ===== */
.ph.full.cropframe .pi{height:100vh;height:100svh;overflow:hidden}
.ph.full.cropframe .pi picture{height:100%}
.ph.full.cropframe img.crop{width:100%;height:100%;max-width:none;max-height:none;margin:0;object-fit:cover;object-position:var(--p0,50% 50%)}
@media(min-width:834px){.ph.full.cropframe img.crop{object-position:var(--p834,var(--p0,50% 50%))}}
@media(min-width:1194px){.ph.full.cropframe img.crop{object-position:var(--p1194,var(--p834,var(--p0,50% 50%)))}}
@media(min-width:1441px){.ph.full.cropframe img.crop{object-position:var(--p1441,var(--p1194,50% 50%))}}
@media(min-width:1441px){.ph.full.nc1441 .pi{height:auto}.ph.full.nc1441 img.crop{height:auto;object-fit:contain}}
/* a band whose crop would cut a marked face/mark: natural ratio, never cropped */
@media(max-width:833.98px){.ph.full.nc0 .pi{height:auto}.ph.full.nc0 img.crop{height:auto;object-fit:contain}}
@media(min-width:834px) and (max-width:1193.98px){.ph.full.nc834 .pi{height:auto}.ph.full.nc834 img.crop{height:auto;object-fit:contain}}
@media(min-width:1194px) and (max-width:1440.98px){.ph.full.nc1194 .pi{height:auto}.ph.full.nc1194 img.crop{height:auto;object-fit:contain}}
/* credit just under the photo, on paper: #4a4a4a on #fbf8f2 = 8.6:1. Per-band credit spans (only when credits differ) */
.ph.full figcaption{padding:10px var(--m) 0}
.bc{display:none}
@media(max-width:833.98px){.bc[data-from="0"]{display:inline}}
@media(min-width:834px) and (max-width:1193.98px){.bc[data-from="834"]{display:inline}}
@media(min-width:1194px){.bc[data-from="1194"]{display:inline}}
/* caption mode: big headline (> story h2) + one 30–60字 caption */
.h.big{font-size:calc(var(--fs-h)*1.35);line-height:1.12;letter-spacing:-.015em;margin-top:20px}
.capsec .head{margin-bottom:40px}
.cap{font:400 calc(var(--fs-dek)*1.05)/1.8 var(--serif);max-width:24em;margin:0}
.cap.missing,.dek.missing{color:#8a1c1c;border:2px dashed #8a1c1c;padding:8px 12px;display:inline-block}
.capsec .act{margin-top:32px}
.qa.capsec .iv .q{font-size:calc(var(--fs-h)*.6)}.qa.capsec .iv .cap{margin-bottom:8px}
/* v5: <1194 vertical masthead sits on sky with thin cloud/branch tips; light sky-only scrim behind the type keeps >=4.5:1 */
@media (max-width:1193px){.cv .ov .meta,.cv .mast,.cv .cl{background:rgba(251,248,242,.42);box-shadow:0 0 14px 10px rgba(251,248,242,.42);border-radius:2px}}
/* ===== v5 vertical pass ===== */
/* running header + folio (aria-hidden) */
.rh{display:flex;justify-content:space-between;gap:16px;margin:0;padding:12px var(--m);font:400 14px/1.4 var(--serif);color:#4a4a4a;border-bottom:1px solid #d9d2c3;background:var(--bg)}
.rh .fo{font-family:var(--lat);letter-spacing:.08em}
.by{font:600 15px/1.5 var(--serif);color:#4a4a4a;margin:16px 0 0;letter-spacing:.08em}
/* split openers: phone = full-screen vertical frame; 834+ = photo half + text half, photo frame clamped to 9:16 .. viewport height */
.story.split .spread.op{min-height:0;justify-content:flex-start}
@media(min-width:834px){
  .story.split{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .story.split>.rh{grid-column:1/-1}
  .story.split>.spread{min-height:0}
  .story.split>.spread.op{position:sticky;top:0}
  .story.split .ph.full.cropframe .pi{height:auto;aspect-ratio:9/16;max-height:100vh;max-height:100svh}
  .story.split .ph.full.cropframe .pi picture{height:100%}
  .story.split .pg.text{padding:64px 48px;max-width:none}
  .story.split .pg.text .cols{column-count:1;max-width:36em}
  .story.split .bs{display:block}.story.split .bs .ph.small{width:100%;margin:32px 0}
  .story.split .ph.small,.story.split .ph.small.sq{width:100%;margin:32px 0}
}
@media(min-width:834px) and (max-width:1193.98px){.story.split .ph.full.nc834 .pi{aspect-ratio:auto;max-height:none}}
@media(min-width:1194px) and (max-width:1440.98px){.story.split .ph.full.nc1194 .pi{aspect-ratio:auto;max-height:none}}
@media(min-width:1441px){.story.split .ph.full.nc1441 .pi{aspect-ratio:auto;max-height:none}}
/* picks grid: uniform 4:5, three across from 834 */
.pgrid{list-style:none;margin:0 auto;padding:48px var(--m) 96px;display:grid;grid-template-columns:1fr;gap:64px;max-width:1440px}
@media(min-width:834px){.pgrid{grid-template-columns:repeat(3,1fr);gap:32px}}
.card{display:flex;flex-direction:column;height:100%}
.ph.g45 .pi{aspect-ratio:4/5;overflow:hidden}
.ph.g45 img{width:100%;height:100%;object-fit:contain}
.ph.g45.cropframe img.crop{object-fit:cover;object-position:var(--g,50% 50%)}
.ph.g45 figcaption{padding:0}
.card .h.big a{color:inherit;text-decoration:none}
.card .credit{font:400 14px/1.5 var(--serif);color:#4a4a4a;margin:12px 0 0}
.card .act{margin-top:auto;padding-top:20px}
@media(min-width:834px){.card .h.big{font-size:calc(var(--fs-h)*.5);line-height:1.2}.card .cap{font-size:17px;line-height:1.8}}
@media(min-width:1194px){.card .h.big{font-size:calc(var(--fs-h)*.48)}.card .cap{font-size:18px}}
/* back page */
.end.spread{display:flex;flex-direction:column;padding:0;text-align:left}
.end .bk{flex:1;display:grid;gap:40px;padding:64px var(--m);align-content:center}
@media(min-width:834px){.end .bk{grid-template-columns:1fr 1fr;align-items:center}}
.end .bk .ph.small{width:100%;margin:0}
.end .bt p{margin:0 0 12px}.end .bt .mast{font:900 calc(var(--fs-h)*1.15)/1 var(--serif);margin-bottom:24px}
.toc{flex-direction:column;align-items:stretch;justify-content:center}.toc>.rh{align-self:stretch}.toc>.pg{width:100%;box-sizing:border-box}
.pgrid>li{min-width:0}
@media(min-width:834px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.story.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.band,.qa,.remind{flex-wrap:wrap}
@media(min-width:834px){.story.split .h .nw{white-space:normal}.story.split .h{overflow-wrap:anywhere}}
@media (min-width:1194px){.cv .mast{text-shadow:0 0 18px rgba(251,248,242,.95),0 0 6px rgba(251,248,242,.9)}.cv .ov .meta,.cv .cl{background:rgba(251,248,242,.42);box-shadow:0 0 14px 10px rgba(251,248,242,.42)}}
@media (min-width:1194px){.cv .mast{background:rgba(251,248,242,.5);box-shadow:0 0 16px 12px rgba(251,248,242,.5);border-radius:2px}}
.ph.g45.cropframe .pi{height:auto;width:100%;aspect-ratio:4/5}.ph.g45 .pi picture{height:100%}.ph.g45.cropframe img.crop{height:100%}
/* cover credit at desktop: larger + darker (Mr. iCamping 3:22 PM) */
@media(min-width:1194px){.cv figcaption{font-size:16px;color:#2e2e2e;letter-spacing:.06em}}
/* crit round: phone cover full-screen masthead scale */
@media(max-width:833.98px){.cv .mast{font-size:60px;letter-spacing:.04em}.cv .cl{font-size:18px;height:calc(18px*8.4)}.cv .ov .meta{font-size:16px}}
/* crit round: ≥1194 no hard-edged pale boxes; white failed (mast 1.46–2.55, meta 2.21–2.53, cl 1.58–2.35), so dark ink on a feathered radial scrim */
@media(min-width:1194px){.cv .mast,.cv .ov .meta,.cv .cl{background:none!important;box-shadow:none!important;border-radius:0}
 .cv .mast{text-shadow:0 0 24px rgba(251,248,242,.9),0 0 8px rgba(251,248,242,.8)}
 .cv .ov{isolation:isolate}
 .cv .ov::before{content:"";position:absolute;z-index:-1;left:-12%;right:-14%;top:-30%;bottom:-40%;background:radial-gradient(closest-side,rgba(251,248,242,.88) 0%,rgba(251,248,242,.78) 55%,rgba(251,248,242,.35) 80%,rgba(251,248,242,0) 100%);pointer-events:none}}
/* swap round: <1194 no hard-edged panel; feathered radial scrim like desktop */
@media(max-width:1193.98px){.cv .mast,.cv .ov .meta,.cv .cl{background:none!important;box-shadow:none!important;border-radius:0}
 .cv .mast{text-shadow:0 0 16px rgba(251,248,242,.9),0 0 6px rgba(251,248,242,.85)}
 .cv .ov{isolation:isolate}
 .cv .ov::before{content:"";position:absolute;z-index:-1;left:-45%;right:-45%;top:-18%;bottom:-22%;background:radial-gradient(closest-side,rgba(251,248,242,.86) 0%,rgba(251,248,242,.76) 55%,rgba(251,248,242,.3) 82%,rgba(251,248,242,0) 100%);pointer-events:none}}
/* cover line breaks after ， only while vertical (<1194); horizontal desktop unchanged */
@media(max-width:1193.98px){.cv .cl .cls{display:block}.cv .cl{height:auto;max-height:none}}