/* Generated study pages (/studies/<slug>). Tokens and the method card live in atlas.css. */

/* The painting on the night desk */
.sp-hero{padding:clamp(48px,6vw,88px) 0 clamp(64px,7vw,104px);border-top:1px solid rgba(142,171,198,.18)}
.sp-hero-in{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(36px,5vw,80px);align-items:center}
.sp-art{margin:0}
.sp-frame{background:var(--card);padding:clamp(8px,.9vw,14px);box-shadow:var(--shadow-lift);transform:rotate(-.5deg)}
.sp-frame img{width:100%;height:auto}
.sp-art figcaption{margin-top:14px;font:italic 400 14px/1.35 var(--text);color:var(--on-night-3)}
.sp-artist{margin:0 0 6px;font-size:19px;color:var(--on-night-2)}
.sp-title{margin:0 0 12px}
.sp-title cite{font-style:normal}
.sp-meta{margin:0 0 26px;font:italic 400 16px/1.4 var(--text);color:var(--on-night-2)}
.sp-q{margin:0 0 30px;color:var(--on-night)}
.sp-fig{display:flex;align-items:baseline;gap:18px;margin:0 0 26px;padding:20px 0 0;border-top:1px solid rgba(142,171,198,.3)}
.sp-fig .big-num{font-size:clamp(72px,7vw,112px);color:var(--red-bright)}
.sp-fig-t{font-size:18px;line-height:1.45;color:var(--on-night-2);max-width:25ch}
.sp-stamps{display:flex;flex-wrap:wrap;gap:12px 16px;margin:0 0 30px}
.sp-stamps .stamp:nth-child(2){--rot:3deg}
.sp-jump{display:flex;flex-wrap:wrap;gap:10px 30px;margin:0;font-size:17px}
.sp-jump a{color:var(--on-night)}

/* The records */
.study-evidence{padding:clamp(72px,8vw,120px) 0 20px}
.sp-block{margin:0 0 clamp(88px,9vw,140px)}
.sp-block-head{max-width:66ch;margin:0 0 30px}
.sp-block-head h2{margin:0 0 16px}
.sp-text{font-size:18px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.sp-chart{margin:0;background:var(--card);padding:clamp(18px,2.2vw,32px) clamp(14px,2vw,30px) 18px;box-shadow:var(--shadow-paper)}
.sp-chart figcaption{margin:14px 0 0;font:italic 400 14.5px/1.45 var(--text);color:var(--ink-3);max-width:90ch}
.sp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:34px 0 0;padding:0}
.sp-stats div{border-top:1.5px solid var(--ink);padding-top:14px}
.sp-stats dt{font:500 clamp(40px,3.6vw,54px)/.95 var(--display);font-variant-numeric:lining-nums;letter-spacing:-.015em}
.sp-stats dd{margin:8px 0 0;font-size:15.5px;line-height:1.4;color:var(--ink-2)}
.sp-table{margin:28px 0 0}
.sp-table summary{cursor:pointer;font:italic 400 17px var(--text);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:.22em;width:max-content}
.sp-scroll{overflow-x:auto;margin-top:16px}
.sp-scroll table{border-collapse:collapse;width:100%;font-size:15px;background:var(--card)}
.sp-scroll th{font-weight:600;text-align:left;padding:10px 14px;border-bottom:1.5px solid var(--ink);white-space:nowrap}
.sp-scroll td{padding:7px 14px;border-bottom:1px dotted var(--rule-blue);white-space:nowrap}
.sp-scroll table.sp-wrap td{white-space:normal;min-width:7em}
.sp-table tbody{display:block;max-height:420px;overflow-y:auto}
.sp-table thead,.sp-table tbody tr{display:table;width:100%;table-layout:fixed}
.sp-storms tr.hot td:first-child{color:var(--red-ink);font-weight:600}
.sp-storms tr.gap td{background:var(--paper-2);text-align:center;font:italic 500 16.5px/1.4 var(--text);color:var(--red-ink);padding:16px 14px;white-space:normal}

.sp-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,3vw,48px);margin:36px 0 0}
.sp-quotes blockquote{margin:0;padding:18px 0 0;border-top:1.5px solid var(--ink)}
.sp-quotes p{font:italic 400 19px/1.5 var(--text);color:var(--ink);margin:0 0 12px}
.sp-quotes .sp-tr{font:400 15.5px/1.5 var(--text);color:var(--ink-2);margin:-4px 0 12px}
.sp-quotes cite{font-style:normal;font-size:14.5px;line-height:1.4;color:var(--ink-3)}

.sp-docs{display:grid;gap:44px}
.sp-doc{margin:0}
.sp-doc a{display:block;position:relative;background:var(--card);padding:clamp(10px,1.2vw,18px);box-shadow:var(--shadow-paper);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.sp-doc a:hover{box-shadow:var(--shadow-lift)}
.sp-doc img{width:100%;height:auto;mix-blend-mode:multiply;filter:sepia(.14) contrast(1.05)}
.sp-doc figcaption{margin-top:12px;font:italic 400 15px/1.45 var(--text);color:var(--ink-3)}
.sp-plate a{transform:rotate(-.25deg)}
.sp-page{max-width:780px;justify-self:end}
.sp-page a{transform:rotate(.6deg)}
.sp-doc .pencil{inset:clamp(10px,1.2vw,18px);width:auto;height:auto}

/* Charts */
.ch{display:block;width:100%;height:auto;overflow:visible}
.ch text{font-family:var(--text)}
.ch-ax{font-size:14px;fill:var(--ink-3);font-variant-numeric:tabular-nums}
.ch-m{font-style:italic;font-size:16px;fill:var(--ink-2)}
.ch-mm{font-size:12px}
.ch-yr{font:italic 500 19px var(--display);fill:var(--ink)}
.ch-grid{stroke:var(--rule-blue-soft);stroke-width:1}
.ch-500{stroke:var(--rule-blue);stroke-dasharray:3 5}
.ch-base{stroke:var(--ink);stroke-width:1.5}
.ch-month{stroke:var(--ink);stroke-width:1}
.ch-bar.wet{fill:var(--ink)}
.ch-bar.trace{fill:var(--rule-blue)}
.ch-bar.dry{fill:var(--paper-3)}
.ch-bar:hover{fill:var(--red)}
.ch-thr{stroke:var(--red);stroke-width:1.5;stroke-dasharray:5 5}
.ch-flag{stroke:var(--red);stroke-width:1.2;stroke-dasharray:2 4}
.ch-note{font:italic 500 16px var(--text);fill:var(--red-ink)}
.ch-dot{fill:var(--ink);fill-opacity:.4}
.ch-dot:hover{fill-opacity:1}
.ch-dot.hot{fill:var(--red);fill-opacity:1;stroke:var(--card);stroke-width:2.5}
.ch-ref{stroke:var(--red);stroke-width:2.5}
.ch-reft{fill:var(--red-ink);font-style:italic}
.ch-quiet{fill:var(--paper-2)}
.ch-qt{font:500 24px var(--display);fill:var(--ink)}
.ch-storm line{stroke:var(--ink);stroke-width:1.4;stroke-opacity:.5}
.ch-storm circle{fill:var(--ink)}
.ch-storm.hot line{stroke:var(--red);stroke-opacity:.75}
.ch-storm.hot circle{fill:var(--red)}
.ch-storm.far line{stroke:var(--ink-3);stroke-width:2;stroke-opacity:.7}
.ch-storm:hover line{stroke-opacity:1;stroke-width:2.2}

/* Rain falls into the gauge once, when the chart arrives */
.js .sp-block .ch-bar{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%;transition:transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 7ms)}
.js .sp-block.in .ch-bar{transform:none}
.js .sp-block .ch-storm line{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 40ms)}
.js .sp-block.in .ch-storm line{stroke-dashoffset:0}
.js .sp-block .ch-storm circle{opacity:0;transition:opacity .4s;transition-delay:calc(var(--i,0) * 40ms + .7s)}
.js .sp-block.in .ch-storm circle{opacity:1}

/* Receipts */
.sp-receipts{padding:clamp(64px,7vw,100px) 0;border-top:1.5px solid var(--ink)}
.sp-rc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,3vw,56px)}
.sp-rc li{padding:16px 0;border-top:1px dotted var(--rule-blue);font-size:16px;line-height:1.45}
.sp-rc a{text-decoration-color:var(--red)}
.sp-rc-meta{display:block;font-size:14px;color:var(--ink-3);margin-top:4px}
.sp-rc code{display:block;margin-top:6px;font:12.5px/1.4 ui-monospace,Menlo,monospace;color:var(--ink-2);word-break:break-all}
.sp-data{display:flex;flex-wrap:wrap;gap:10px 30px;margin:30px 0 0;font-size:17px}

/* Look closer */
.sp-closer{padding:clamp(64px,7vw,100px) 0}
.sp-closer-in{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.sp-closer-img{display:block;background:var(--card);padding:8px;box-shadow:var(--shadow-lift);transform:rotate(1.2deg);transition:transform .5s var(--ease-out)}
.sp-closer-img:hover{transform:rotate(0) translateY(-4px)}
.sp-closer h2{margin:0 0 14px}
.sp-closer .sp-text{color:var(--on-night-2);max-width:56ch;margin-bottom:24px}

@media (max-width:1000px){
  .sp-hero-in{grid-template-columns:1fr}
  .sp-quotes{grid-template-columns:1fr}
  .sp-rc{grid-template-columns:1fr}
  .sp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .sp-chart{overflow-x:auto}
  .sp-chart .ch{min-width:760px}
  .sp-closer-in{grid-template-columns:1fr}
  .sp-closer-img{max-width:240px}
}
@media (prefers-reduced-motion:reduce){
  .js .sp-block .ch-bar,.js .sp-block .ch-storm line,.js .sp-block .ch-storm circle{transform:none;stroke-dashoffset:0;opacity:1;transition:none}
}
@media print{.sp-hero,.sp-closer{background:none;color:var(--ink)}}
.ch-note,.ch-reft{paint-order:stroke;stroke:var(--card);stroke-width:6px;stroke-linejoin:round}
.sp-stats .neg{font-family:var(--text);font-weight:500;margin-right:.03em}
.ch-letter{font:italic 600 20px var(--text)}
.ch-key{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 36px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.ch-key b{font:italic 600 18px var(--text);color:var(--red-ink);margin-right:8px}
.sp-pair{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.sp-pair .sp-page{max-width:none;justify-self:stretch}
.sp-stack{grid-template-columns:1fr;margin:0;gap:28px}
@media (max-width:1000px){.sp-pair,.ch-key{grid-template-columns:1fr}}

/* Two paintings on the desk (Van Gogh: from life and the repetition) */
.sp-art-pair{position:relative;display:grid;grid-template-columns:1fr;padding:0 0 12% 0}
.sp-pair-art{margin:0}
.sp-pair-art figcaption{margin-top:10px;font:italic 400 14px/1.35 var(--text);color:var(--on-night-3);max-width:38ch}
.sp-pa-0{width:74%;position:relative;z-index:2}
.sp-pa-0 .sp-frame{transform:rotate(-1.4deg)}
.sp-pa-1{width:62%;position:absolute;right:0;bottom:0;z-index:1}
.sp-pa-1 .sp-frame{transform:rotate(1.6deg)}
.sp-pa-1 figcaption{text-align:right;margin-left:auto}

/* The September ledger */
.ch-ledger text{font-family:var(--text)}
.lg-window{fill:var(--paper-2)}
.lg-day{font-size:12.5px}
.lg-rule{stroke:var(--rule-blue);stroke-width:1;stroke-dasharray:1 3}
.lg-name{font:600 16px var(--text);fill:var(--ink)}
.lg-sub{font:italic 400 13px var(--text);fill:var(--ink-3)}
.lg-wet{font:600 16px var(--text);fill:var(--red-ink);font-variant-numeric:tabular-nums}
.lg-dry{fill:var(--ink);fill-opacity:.55}
.lg-calm{fill:var(--ink-3);fill-opacity:.45}
.lg-mistral{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lg-temp{fill:none;stroke:var(--ink);stroke-width:1.6}
.lg-tdot{fill:var(--ink)}
.ch-bar.hotbar{fill:var(--red)}
.ch-hot{fill:var(--red-ink);font-weight:600}
.sp-table-scan{margin-top:40px}
@media (max-width:1000px){.sp-art-pair{padding-bottom:0}.sp-pa-0,.sp-pa-1{width:100%;position:relative}.sp-pa-1{margin-top:24px}}
.ch-bare{stroke:none}
/* The first painting's caption sits above it, clear of the second painting. */
.sp-pa-0{display:flex;flex-direction:column-reverse}
.sp-pa-0 figcaption{margin:0 0 10px}

.sp-withheld .sp-frame{aspect-ratio:4/3;display:grid;place-items:center;background:var(--night-2);outline:1px solid var(--rule-blue-soft);outline-offset:-14px}
.sp-withheld-in{max-width:34ch;padding:28px;text-align:center;font:italic 400 18px/1.55 var(--text);color:var(--on-night-2)}
.sp-withheld-in p{margin:0 0 14px}.sp-withheld-in .text-link{font-style:normal;color:var(--on-night)}