.poem-page{max-width:1120px;padding-top:clamp(30px,6vw,76px)}
.poem-heading{padding-bottom:1.15rem;border-bottom:1px solid var(--line);position:relative}
.poem-heading::after{
  content:"";position:absolute;left:0;bottom:-2px;width:6.5rem;height:3px;
  background:linear-gradient(90deg,#864c3b,#864c3b4f,transparent);
}
.poem-heading h1{font-size:clamp(2.6rem,5.6vw,5rem);font-weight:400;line-height:1.06;margin:.23em 0 .16em}
.poem-heading p{margin:0;color:#685847;letter-spacing:.12em}
.poem-layout{display:grid;grid-template-columns:minmax(270px,.85fr) minmax(0,1.15fr);gap:clamp(1rem,5vw,4.5rem);align-items:start;padding:1.9rem 0 2rem}
.lot-stage{text-align:center;padding:.6rem 0 1rem}
.lot-vessel{display:block;width:100%;max-width:440px;max-height:310px;margin:0 auto .3rem;overflow:visible}
.lot-tube{transform-box:fill-box;transform-origin:center 87%}
.lot-rise{transform-box:fill-box;transform-origin:center}
.lot-date{display:block;letter-spacing:.21em;color:#75624e;font-size:.92rem}
.lot-draw{margin:.8rem 0 .35rem;min-width:10.2rem}
.lot-draw:disabled{opacity:.58;cursor:default}
.lot-status{color:#75624e;margin:.35rem auto;font-size:.9rem}
.lot-result{min-width:0}
.lot-empty{
  display:grid;justify-items:center;align-content:center;text-align:center;min-height:22rem;
  background:radial-gradient(ellipse at 50% 54%,#eadbc14d,transparent 71%);color:#78634e;
}
.lot-empty span{font-size:clamp(4.2rem,12vw,8.8rem);line-height:1;color:#9274562f}
.lot-empty p{letter-spacing:.16em}
.lot-scroll{
  position:relative;padding:1.3rem clamp(1rem,3vw,2.2rem) 1.5rem;
  background:linear-gradient(135deg,#fff9edb8,#f1e5ce81 63%,#f8f0dfb3);
  border-top:2px solid #9b6147;border-bottom:1px solid #ac997382;
  box-shadow:0 12px 28px #503c2311;
}
.lot-scroll::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#ab75498c,#ab754916 58%,transparent)}
.lot-meta{display:flex;justify-content:space-between;align-items:center;gap:.6rem;color:#6c5643;letter-spacing:.14em;font-size:.9rem}
.lot-meta span{border:1px solid #8b4a3d8f;color:#823c30;padding:.1rem .46rem}
.lot-scroll h2{margin:.65rem 0 .35rem;font-weight:400;font-size:clamp(1.85rem,4vw,3.15rem);line-height:1.32;color:#29231c}
.lot-scroll h2:focus{outline:none}
.lot-credit{color:#744938;line-height:1.65}
.lot-credit span{color:#6c5d4c;font-size:.86rem}
.lot-scroll h3{font-size:.9rem;color:#783d31;font-weight:400;letter-spacing:.26em;margin:.9rem 0 .32rem}
.lot-text{margin-top:1.12rem;padding:.15rem 0 .8rem;border-block:1px solid #a8916e64}
.lot-text p,.lot-comment p{margin:.28rem 0 .48rem;line-height:1.85}
.lot-text p{font-size:1.14rem;letter-spacing:.04em}
.lot-comment p{color:#4f453a}
.lot-source{display:inline-block;color:#775548;font-size:.88rem;margin-top:.52rem;text-decoration:underline;text-underline-offset:.2em}
.lot-history{border-top:1px solid var(--line);padding-top:.9rem}
.lot-history ul{display:flex;flex-wrap:wrap;gap:.45rem .75rem;list-style:none;padding:0;margin:.7rem 0 0}
.lot-history button{border-bottom:1px solid #aa907248;color:#68513d;font-size:.91rem}
.lot-history button[aria-current=true]{color:#843f33;border-bottom-color:#843f33}
@media(prefers-reduced-motion:no-preference){
  .lot-shake .lot-tube{animation:lot-shake 520ms cubic-bezier(.3,.56,.36,1) both}
  .lot-shake .lot-rise{animation:lot-rise 550ms cubic-bezier(.32,.67,.4,1) both}
  .lot-unfold{animation:lot-unfold 440ms cubic-bezier(.15,.66,.31,1) both}
  @keyframes lot-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}42%{transform:rotate(7deg)}62%{transform:rotate(-4deg)}82%{transform:rotate(2deg)}}
  @keyframes lot-rise{0%,35%{transform:translateY(0)}78%{transform:translateY(-40px) rotate(-4deg)}100%{transform:translateY(-29px)}}
  @keyframes lot-unfold{from{opacity:.06;transform:translateY(12px);clip-path:inset(0 0 63% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0)}}
}
@media(max-width:700px){
  .poem-layout{grid-template-columns:1fr;gap:.9rem;padding-top:1rem}
  .lot-vessel{max-height:230px}
  .lot-stage{padding:0}
  .lot-empty{min-height:9rem}
}
@media(max-width:480px){
  .mast{padding-inline:9px;grid-template-columns:auto 1fr auto;gap:6px}
  .mast nav{justify-content:center;gap:clamp(3px,2vw,9px)}
  .mast nav a{padding-inline:.12rem;letter-spacing:0}
  .mast .brand{gap:.25rem}
  .mast .brand small{display:none}
  .mast #profile{padding-inline:.18rem}
}
.lot-scroll h2{text-wrap:balance;scroll-margin-block:1.5rem}
.lot-drawn .lot-rise{transform:translateY(-29px)}
.lot-vessel{overflow:hidden}
.home-writing-links{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.4rem .9rem}
.home-poem-link{color:#7e4c3c;border-bottom:1px solid #aa866b88;padding:.2rem .06rem;white-space:nowrap}
@media(max-width:390px){.home-writing-links{font-size:.86rem}.home-writing-links .ink{padding:.48rem .72rem}}

.lot-library-size{
  display:inline-block;margin-top:.68rem;font-size:.83rem;letter-spacing:.16em;color:#765747;
  border-block-end:1px solid #ac92727a;padding:.12rem .05rem .24rem;
}
.lot-vision{
  margin:.65rem 0 .15rem;position:relative;color:var(--vision-ink);
  background:radial-gradient(ellipse at 52% 67%,#e7d5b48a,transparent 78%);
  overflow:hidden;isolation:isolate;
}
.lot-vision svg{
  display:block;width:100%;height:clamp(78px,13vw,125px);
  mask-image:linear-gradient(90deg,transparent,#000 11% 89%,transparent);
}
.lot-vision figcaption{
  position:absolute;top:6px;right:12px;padding:.1rem .34rem;color:#685649;
  letter-spacing:.14em;font-size:.72rem;background:#faf1ddc7;
}
.lot-lesson{margin:1rem 0 .55rem;padding-top:.1rem;border-top:1px solid #a8916e64}
.lot-lesson dl{margin:.4rem 0 1rem}
.lot-lesson dl>div{
  display:grid;grid-template-columns:minmax(6.6rem,auto) 1fr;gap:.3rem .8rem;
  border-bottom:1px solid #b49a772e;padding:.55rem 0;
}
.lot-lesson dt{color:#783d31;letter-spacing:.1em}
.lot-lesson dd{margin:0;line-height:1.8;color:#42392f}
.lot-reflection{border-left:2px solid #a87d635c;padding-left:.7rem;color:#605142;line-height:1.8}
.lot-exercise{padding:.2rem 0 .6rem;color:#593e31}
.lot-exercise summary{cursor:pointer;color:#754437}
.lot-exercise p{line-height:1.7;margin:.4rem 0}
.lot-exercise details{margin-left:1.2em}
@media(max-width:530px){.lot-lesson dl>div{grid-template-columns:1fr}.lot-vision figcaption{right:8px}}
@media(prefers-reduced-motion:no-preference){
  .vision-motion{transform-box:fill-box;transform-origin:center;animation-duration:2.2s;animation-fill-mode:both;animation-timing-function:ease-in-out}
  .vision-motion[data-motion=ripple]{animation-name:vision-ripple;animation-iteration-count:2}
  .vision-motion[data-motion=drift]{animation-name:vision-drift;animation-duration:3s}
  .vision-motion[data-motion=blossom]{animation-name:vision-bloom;animation-duration:1.7s}
  .vision-motion[data-motion=arrive]{animation-name:vision-arrive;animation-duration:1.6s}
  .vision-motion[data-motion=sway]{animation-name:vision-sway;animation-iteration-count:2;transform-origin:center bottom}
  .vision-motion[data-motion=twinkle]{animation-name:vision-twinkle;animation-iteration-count:2}
  .vision-motion[data-motion=rise]{animation-name:vision-rise;animation-duration:2.4s}
  .vision-motion[data-motion=fall]{animation-name:vision-fall;animation-duration:2.6s}
  .vision-motion[data-motion=flicker]{animation-name:vision-flicker;animation-duration:1.25s;animation-iteration-count:3;transform-origin:center bottom}
  .vision-motion[data-motion=flight]{animation-name:vision-flight;animation-duration:2.6s}
  .vision-motion[data-motion=current]{animation-name:vision-current;animation-duration:2.6s}
  .vision-motion[data-motion=rain]{animation-name:vision-rain;animation-duration:1.3s;animation-iteration-count:3}
  .vision-motion[data-motion=float]{animation-name:vision-float;animation-duration:2.8s}
  @keyframes vision-ripple{0%{opacity:.12;transform:scale(.48,.63)}62%{opacity:1}100%{opacity:1;transform:scale(1)}}
  @keyframes vision-drift{from{opacity:.14;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
  @keyframes vision-bloom{from{opacity:0;transform:scale(.56)}70%{opacity:1;transform:scale(1.05)}to{transform:scale(1)}}
  @keyframes vision-arrive{from{opacity:0;transform:translate(-28px,9px) rotate(-12deg)}to{opacity:1;transform:translate(0) rotate(0)}}
  @keyframes vision-sway{0%,100%{transform:rotate(0)}40%{transform:rotate(3deg)}70%{transform:rotate(-2deg)}}
  @keyframes vision-twinkle{0%{opacity:.22}34%{opacity:.89}60%{opacity:.48}100%{opacity:1}}
  @keyframes vision-rise{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
  @keyframes vision-fall{from{opacity:0;transform:translate(-12px,-25px) rotate(-7deg)}to{opacity:1;transform:translate(0) rotate(0)}}
  @keyframes vision-flicker{0%,100%{opacity:1;transform:scaleY(1)}24%{opacity:.75;transform:scaleY(.85)}69%{opacity:.94;transform:scaleY(1.08)}}
  @keyframes vision-flight{from{opacity:0;transform:translate(-37px,10px)}to{opacity:1;transform:translate(0)}}
  @keyframes vision-current{from{opacity:.3;transform:translateX(-33px) scaleX(.92)}to{opacity:1;transform:translateX(0) scaleX(1)}}
  @keyframes vision-rain{0%{opacity:.15;transform:translate(6px,-12px)}70%,100%{opacity:1;transform:translate(0)}}
  @keyframes vision-float{0%{opacity:0;transform:translate(-22px,4px) rotate(-2deg)}58%{opacity:1;transform:translate(-5px,-3px) rotate(1deg)}100%{transform:translate(0) rotate(0)}}
}