/* A Portrait You Can Read (v6). V2's folio experience in the v6 voice: Newsreader + Source Sans 3, warm paper, navy and red.
   Page parts are .pt-*; the re-created work itself is reader.css (.work). The shelf is shelf.css. */
.pt{--brick:#a4442f;--paper-card:#fffdf8;--rule:#e2d8c6;--green:#2f7a4f}
.pt [hidden]{display:none!important}
.pt .eyebrow{font:700 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.pt .lab{display:block;font:700 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.pt :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ---------- hero ---------- */
.pt-hero{padding-top:44px;padding-bottom:0}
.pt-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:44px;align-items:end}
.pt-h1{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:clamp(52px,7.6vw,116px);line-height:.92;letter-spacing:-.04em}
.pt-h1 span{display:block}.pt-h1 em{font-style:italic;font-weight:500;color:var(--red)}
.pt-hero-side{padding-bottom:10px}
.pt-sub{font:italic 500 clamp(20px,2.1vw,29px)/1.2 var(--serif);color:var(--navy);margin:0 0 14px}.pt-sub span{display:block}
.pt-hero .lede b{color:var(--ink);font-weight:600}
.pt-h2{font-size:clamp(34px,4vw,54px);line-height:1;letter-spacing:-.03em;margin-top:8px}

/* ---------- stage: open folio + sticky column ---------- */
.pt-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;padding-top:34px;padding-bottom:20px}
.pt-stage>*{min-width:0}
.pt-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:34px;padding:0 0 24px;border-bottom:1px solid var(--rule);margin-bottom:22px}
.pt-head h2{font-size:clamp(38px,4.2vw,60px);font-weight:600;letter-spacing:-.035em;line-height:1;margin-top:8px}
.pt-sfftag{display:inline-block;margin-left:14px;vertical-align:middle;font:800 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1.5px solid var(--navy);color:var(--navy);transform:rotate(-3deg)}
.pt-def{font:400 clamp(18px,1.5vw,21px)/1.5 var(--serif);margin:12px 0 0;color:var(--ink)}
.pt-defnote{font:400 12.5px var(--sans);color:var(--muted);margin:6px 0 0}
.pt-sent{display:grid;gap:10px;margin:0;padding:0;list-style:none;align-self:center}
.pt-sent li{font:400 17px/1.4 var(--serif);padding-left:16px;border-left:3px solid var(--sk-c,var(--navy));color:var(--ink2)}
.pt-sent b{font:600 28px/1 var(--serif);letter-spacing:-.02em;color:var(--navy);margin-right:4px}

/* subject chips */
.pt-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.pt-flab{font:700 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.pt-filter button{font:600 13.5px var(--sans);border:1px solid var(--rule);background:var(--paper-card);color:var(--ink2);border-radius:999px;padding:6px 8px 6px 14px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.pt-filter button small{font:700 11.5px var(--sans);background:var(--paper2);color:var(--ink2);border-radius:99px;padding:2px 8px}
.pt-filter button:hover{border-color:var(--navy);color:var(--navy)}
.pt-filter button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}.pt-filter button[aria-pressed=true] small{background:rgba(255,255,255,.18);color:#fff}

/* course tabs */
.pt-rail{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 14px;margin:0 0 20px;scrollbar-width:thin}
.pt-rail button{flex:none;border:1px solid var(--rule);background:var(--paper-card);border-radius:10px;padding:8px 12px;font:600 13.5px/1.25 var(--sans);color:var(--ink2);cursor:pointer;text-align:left;max-width:220px}
.pt-rail button b{display:block;font:600 14px/1.25 var(--sans)}
.pt-rail button small{display:block;font-weight:400;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-rail button:hover{border-color:var(--navy)}
.pt-rail button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}.pt-rail button[aria-pressed=true] small{color:#bcd0e0}

/* ---------- the reading: three pinned layers ---------- */
.pt-tbl{position:relative}
.pt-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:26px 32px;align-items:start}
.pt-col{display:grid;gap:26px}
.pt-L{position:relative}
.pt-tbl.fan .pt-L{animation:ptfan .85s cubic-bezier(.2,.8,.2,1) backwards}.pt-tbl.fan .pt-L2{animation-delay:.12s}.pt-tbl.fan .pt-L3{animation-delay:.26s}
@keyframes ptfan{from{opacity:0;transform:translate3d(-24px,18px,0) rotate(-1.2deg)}}
html.still .pt-tbl.fan .pt-L,html.still .pt-tbl.fan .pt-conn{animation:none}
.pt-pin{position:absolute;left:-12px;top:-14px;z-index:6;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e0644b,#a4442f 60%,#6d2a1b);color:#fff;font:800 14px/30px var(--sans);text-align:center;box-shadow:0 5px 8px rgba(40,10,0,.35),inset 0 -2px 3px rgba(0,0,0,.25)}
.pt-L>h3{font:800 13px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brick);margin:0 0 12px 24px}
.pt-L>h3 small{font:400 14px var(--serif);letter-spacing:0;text-transform:none;color:var(--muted);margin-left:8px}
.pt-sheet{background:var(--paper-card);border-radius:4px;padding:22px 24px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 18px 34px -18px rgba(50,30,5,.45),0 2px 6px rgba(50,30,5,.12);position:relative}
.pt-sheet+.pt-sheet{margin-top:18px}
.pt-sheet::before{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='8'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .3  0 0 0 0 .1  0 0 0 .08 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}

/* layer 1: the work, a sticky note over it, the reflection card */
.pt-workwrap{position:relative;padding-bottom:46px}
.pt-L1 .work{margin-left:0}
.pt-L1 .work .x.mine::before{background:var(--mark-on);color:#14212e;box-shadow:0 0 0 1.5px rgba(20,33,46,.35);font-weight:800}
.pt-L1 .work .x.mine{cursor:pointer}
.pt-L1 .work .x.mine.on{background:var(--mark-on);box-shadow:0 0 0 2px rgba(20,33,46,.75)}
.pt-L1 .work .x.mine.on::after{content:"Quoted in the SFF observation";position:absolute;left:.3em;bottom:calc(100% + 3px);z-index:3;background:#14212e;color:#fff;font:700 9.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:3px;white-space:nowrap}
.pt-sticky{position:absolute;right:-18px;bottom:-4px;width:min(64%,320px);z-index:7;transform:rotate(2.2deg);background:linear-gradient(180deg,#ffec8a,#fbe36f 70%,#f4d85a);padding:18px 18px 12px;box-shadow:0 14px 22px -10px rgba(60,40,0,.5),0 2px 4px rgba(60,40,0,.2);color:#2e2508;text-align:left}
.pt-sticky::before{content:"";position:absolute;left:50%;top:-9px;width:58px;height:18px;transform:translateX(-50%) rotate(-2deg);background:rgba(255,255,255,.5);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.pt-sticky .hand{display:block;font:700 24px/1 var(--hand);margin-bottom:6px;color:#4a3a0a}
.pt-sticky p{margin:0;font:400 15px/1.45 var(--serif)}
.pt-sticky .rd{margin-top:8px;font:700 12.5px var(--sans);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:#5a4710}
.pt-sticky small{display:block;font:700 10px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#7a6320;margin-top:8px}
.pt-sticky .more{display:none}.pt-sticky.full .more{display:inline}.pt-sticky.full .dots{display:none}
.pt-sticky.full{width:min(100%,440px);z-index:9;transform:rotate(.8deg)}
.pt-cap{display:flex;gap:10px;justify-content:space-between;align-items:center;margin:14px 0 0;flex-wrap:wrap}
.pt-lock{display:inline-flex;gap:7px;align-items:center;font:600 12px var(--sans);color:var(--ink2);background:rgba(255,255,255,.7);border:1px solid var(--rule);padding:5px 10px;border-radius:999px}.pt-lock svg{width:12px;height:12px;flex:none}
.pt-reint{font:italic 400 13px var(--serif);color:var(--muted);margin:0;max-width:230px;line-height:1.35}
.pt-refl{margin:18px 0 0;background:var(--paper-card);border:1px dashed #cdbf9f;padding:14px 18px;border-radius:4px;position:relative}
.pt-refl p{margin:0;font:italic 400 17px/1.55 var(--serif);color:var(--ink)}.pt-refl .lab{color:var(--brick)}

/* a remade piece: the thumbnail, then the quoted passages as paper strips */
.pt-remade{position:relative}
.pt-rm{position:relative;display:block;width:100%;padding:0;border:0;background:#fff;border-radius:3px;overflow:hidden;cursor:zoom-in;box-shadow:0 20px 38px -26px rgba(20,30,40,.6),0 1px 3px rgba(20,30,40,.2)}
.pt-rm img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover;object-position:top}
.pt-rm::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;background:linear-gradient(transparent,rgba(11,42,68,.5));pointer-events:none}
.pt-rm-go{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;background:#fff;color:var(--navy);font:700 14px var(--sans);padding:10px 18px;border-radius:999px;box-shadow:0 10px 22px -8px rgba(0,0,0,.55);white-space:nowrap;transition:background .2s,color .2s}
.pt-rm:hover .pt-rm-go,.pt-rm:focus-visible .pt-rm-go{background:var(--navy);color:#fff}
.pt-strips{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.pt-strip{position:relative;display:flex;gap:10px;align-items:flex-start;background:var(--paper-card);padding:12px 14px;box-shadow:0 8px 14px -10px rgba(0,0,0,.55);font:500 16.5px/1.45 var(--serif);color:#1b2229;cursor:pointer;border-radius:2px}
.pt-strip i{flex:none;font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--mark-on);font:800 12px var(--sans);color:#14212e;box-shadow:0 0 0 1.5px rgba(20,33,46,.35)}
.pt-strip span{background:linear-gradient(transparent 52%,var(--mark) 52%)}
.pt-strip.on{box-shadow:0 0 0 2px rgba(20,33,46,.75),0 8px 14px -10px rgba(0,0,0,.55)}
.pt-strip.on::after{content:"Quoted in the SFF observation";position:absolute;left:10px;top:-9px;background:#14212e;color:#fff;font:700 9.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:3px}

/* layer 2: the rubric card */
.pt-crit{border:1.5px solid var(--navy);border-radius:4px;background:#fff;position:relative}
.pt-crit-h{background:var(--navy);color:#fff;padding:9px 14px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pt-crit-h b{font:600 18px/1.15 var(--serif)}.pt-crit-h span{font:600 11.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;opacity:.8;white-space:nowrap}
.pt-rung{display:grid;grid-template-columns:88px 1fr;gap:4px 10px;padding:9px 14px;border-top:1px solid var(--rule);font:400 13.5px/1.4 var(--serif);color:var(--muted)}
.pt-rung b{font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
.pt-rung em{grid-column:2;font:700 10px var(--sans);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.pt-rung em.tcred{color:var(--green)}
.pt-rung.on{background:#fff6d9;color:var(--ink);font-size:16.5px;line-height:1.45;position:relative}
.pt-rung.on b{color:var(--navy)}
.pt-rung.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--mark-on)}
.pt-rung.tc:not(.on){background:#eef6f0;color:var(--ink)}
.pt-rung:not(.on):not(.tc) span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pt-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.pt-chips .lab{margin:0}
.pt-chip{font:700 12.5px var(--sans);border:1.5px solid var(--navy);background:#fff;color:var(--navy);padding:4px 11px 4px 6px;border-radius:999px;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.pt-chip i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--mark-on);color:#14212e;font-size:11.5px}
.pt-chip[aria-pressed=true],.pt-chip:hover{background:var(--navy);color:#fff}
.pt-obs{border-left:4px solid var(--blue);padding:2px 0 2px 16px;margin-top:2px}
.pt-obs p{margin:0 0 8px;font:400 17px/1.55 var(--serif)}.pt-obs p.why{font-size:15px;color:var(--ink2);font-style:italic}
.pt-obs .lab{color:var(--blue)}

/* layer 3: Teacher Validation */
.pt-tj{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.pt-stamp{width:136px;height:136px;border-radius:50%;border:3px double var(--green);color:var(--green);display:grid;place-items:center;text-align:center;font:800 11px/1.25 var(--sans);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-8deg);flex:none;position:relative;box-shadow:inset 0 0 0 5px rgba(47,122,79,.06)}
.pt-stamp b{display:block;font:600 20px/1.05 var(--serif);letter-spacing:-.01em;text-transform:none;margin:3px 0}
.pt-stamp b u{text-decoration:none;font-family:var(--sans);font-weight:800}
.pt-stamp em{display:block;font:700 8.5px/1.25 var(--sans);font-style:normal;letter-spacing:.08em;padding:0 14px}
.pt-tj blockquote{margin:0;font:400 18px/1.6 var(--serif);color:var(--ink)}
.pt-tj .lab{color:var(--green)}

/* ---------- the sticky column ---------- */
.pt-aside{position:sticky;top:128px;display:grid;gap:20px}
.pt-aside h2{font-size:32px;font-weight:600;line-height:1.02;margin-top:8px}
.pt-steps{counter-reset:s;margin:0;padding:0;list-style:none}
.pt-steps li{position:relative;padding:14px 0 18px 54px;border-left:2px dashed var(--rule);margin-left:20px;transition:opacity .3s}
.pt-steps li:last-child{border-left-color:transparent}
.pt-steps li::before{counter-increment:s;content:counter(s);position:absolute;left:-20px;top:10px;width:38px;height:38px;border-radius:50%;background:var(--paper-card);border:2px solid var(--rule);font:600 18px/34px var(--serif);text-align:center;color:var(--muted);transition:all .35s}
.pt-steps li.on::before{background:var(--brick);border-color:var(--brick);color:#fff;transform:scale(1.12)}
.pt-steps b{font:600 25px/1 var(--serif);display:block;letter-spacing:-.02em;color:var(--navy)}.pt-steps p{margin:5px 0 0;font:400 16px/1.45 var(--serif);color:var(--ink2)}
.pt-steps li:not(.on){opacity:.7}
.pt-tally{font:400 16px/1.5 var(--serif);margin:0;padding:14px 16px;background:var(--paper-card);border:1px solid var(--rule);border-radius:6px}.pt-tally b{font-weight:700}

/* connectors: a dotted line from the passage to the rubric row */
.pt-conn{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8;overflow:visible}
.pt-conn path{fill:none;stroke:var(--brick);stroke-width:2.2;stroke-dasharray:3 6;stroke-linecap:round}
.pt-conn circle{fill:var(--brick)}
.pt-tbl.fan .pt-conn{animation:ptfade .9s .9s backwards}@keyframes ptfade{from{opacity:0}}

/* ---------- where it shows up ---------- */
.pt-band{padding:64px 0 10px}
.pt-band .lede{max-width:760px;margin-top:12px}
.pt .fcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0 26px}
.pt .fcard{display:block;text-decoration:none;color:inherit;background:#fffdf8;border:1px solid var(--line);border-radius:16px;padding:20px 22px;transition:transform .2s,box-shadow .2s}.pt .fcard:hover{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(11,42,68,.5)}
.pt .fcard small{display:block;font:700 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#b8253f}.pt .fcard b{display:block;font:600 44px/1 var(--serif);color:#0b2a44;margin:10px 0 4px;letter-spacing:-.02em}.pt .fcard p{margin:0;font-size:15.5px;line-height:1.45;color:#4a5866}.pt .fcard em{display:block;margin-top:12px;font-style:normal;font-weight:700;font-size:14px;color:#1e6fb8}
.pt .fgrades{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.pt .fg{display:block;text-decoration:none;color:inherit;border-top:3px solid #0b2a44;padding:12px 4px}.pt .fg span{font:700 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#7a8590}.pt .fg b{display:block;font:600 28px/1.1 var(--serif);color:#0b2a44;margin:4px 0}.pt .fg i{display:block;height:6px;border-radius:3px;background:#e7dfcf;overflow:hidden}.pt .fg i::after{content:"";display:block;height:100%;width:var(--w);background:#1e6fb8}.pt .fg small{display:block;margin-top:6px;font-size:13px;color:#4a5866}.pt .fg.top{border-top-color:#b8253f}.pt .fg.top b{color:#b8253f}

/* ---------- the remade work overlay ---------- */
.pt-ov{position:fixed;inset:0;z-index:500;background:rgba(14,22,32,.72);backdrop-filter:blur(3px);display:grid;place-items:center;padding:14px}
.pt-ov-in{width:min(1180px,100%);height:min(94vh,960px);background:var(--paper);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 90px rgba(10,20,30,.55)}
.pt-ov-top{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 12px 10px 18px;background:var(--navy);color:#fff}
.pt-ov-top b{font:600 18px var(--serif);letter-spacing:-.01em}
.pt-ov-x{border:0;background:#fff;color:var(--navy);font:700 14px var(--sans);padding:8px 14px;border-radius:99px;cursor:pointer}.pt-ov-x:hover{background:#f2c94c}
.pt-ov iframe{flex:1;width:100%;border:0;background:var(--paper)}
html.pt-lock,html.pt-lock body{overflow:hidden}

/* ---------- narrower ---------- */
@media (max-width:1100px){
  .pt-stage{grid-template-columns:minmax(0,1fr)}
  .pt-aside{position:static}
  .pt-conn{display:none}
}
@media (max-width:860px){
  .pt-hero-grid{grid-template-columns:1fr;gap:18px}
  .pt-head{grid-template-columns:1fr}
  .pt-grid{grid-template-columns:1fr}
  .pt .fcards{grid-template-columns:1fr}.pt .fgrades{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .pt-hero{padding-top:26px}
  .pt-sticky,.pt-sticky.full{position:relative;right:auto;bottom:auto;margin:16px 0 0 auto;width:92%}
  .pt-workwrap{padding-bottom:6px}
  .pt-tj{grid-template-columns:1fr}.pt-stamp{width:112px;height:112px}
  .pt-sent b{font-size:24px}
  .pt-sheet{padding:18px 16px}
  .pt-ov{padding:0}.pt-ov-in{height:100%;border-radius:0}
  .pt-pin{left:-6px}
}
@media (prefers-reduced-motion:reduce){.pt-tbl.fan .pt-L,.pt-tbl.fan .pt-conn{animation:none}}
/* sticky Observe / Interpret / Credit: body overflow-x:hidden breaks position:sticky; clip does not */
html,body{overflow-x:clip!important}
.pt-aside{align-self:start}