/* ============================================================
   Gou's Love — viewing pages
   Two viewers share this file, and the SAME warm-cream world:
     • view.html  (.screen.view.artview) — the ARTWORK viewer: a full-page warm
       cream "world" you dive into, framed with the rose patch, NO terminal.
     • writing-view.html (.screen.view.readview) — the manuscript reader: the
       same cream world, entered by diving through the writing list (the title
       flies through the slit in the cloth). Rendered by GLRenderRead.
   The Writing index room (.writing-list / .entry, rendered on writing.html)
   lives here too because every room loads view.css.
   ============================================================ */

/* ---- shared label column (used by the manuscript reader) ---- */
.view-side{flex:1 1 0;min-width:0;display:flex;flex-direction:column;padding-top:.2rem;}
.view-side .eyebrow{margin-bottom:.7rem;}
.view-side .bigtitle{font-size:clamp(34px,4.4vw,56px);line-height:1;margin-bottom:1rem;}

/* ---- writing manuscript (writing-view.html, inside the terminal) ---- */
.read{max-width:64ch;margin:0 auto;}
.read .eyebrow{text-align:center;}
.read .bigtitle{text-align:center;font-size:clamp(34px,4.6vw,58px);line-height:1.02;margin:.5rem 0 .7rem;}
.read .byline{text-align:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--blush-dim);}
.read .sashiko{margin:clamp(1.2rem,2.6vw,2rem) auto;width:42%;}
.read .body{font-family:"IM Fell English",serif;font-size:clamp(16px,1.5vw,19px);line-height:1.85;color:var(--blush);
  text-shadow:0 0 6px rgba(253,233,230,.18);}
.read .body p{margin-bottom:1.1rem;text-wrap:pretty;}

/* ---- writing index (writing.html room, inside the terminal) ----
   Each entry is a burgundy PLATE — the same dark panel the artworks sit on.
   The box matters: the dive cuts its hole at this edge, the plate itself
   flies through the slit, and the reader page carries the same plate
   (.read-plate) for it to land on. */
.writing-list{display:flex;flex-direction:column;gap:clamp(.8rem,1.6vw,1.1rem);}
.entry{display:block;text-decoration:none;color:inherit;position:relative;z-index:5;isolation:isolate;
  padding:1.05rem 1.15rem;
  background:linear-gradient(160deg,#2a0010,#1c0009 70%,#15000a);
  border:1px solid rgba(253,233,230,.22);
  transition:border-color .2s,transform .2s;}
.entry:hover{border-color:rgba(253,233,230,.5);transform:translateY(-2px);}
.entry .row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.entry .et{font-family:"IM Fell English",serif;font-style:italic;font-size:clamp(19px,2.1vw,25px);line-height:1.12;color:var(--blush);}
.entry .em{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blush-dim);white-space:nowrap;}
.entry .ex{margin-top:.7rem;font-family:"IM Fell English",serif;font-style:italic;font-size:14.5px;
  color:var(--blush-dim);line-height:1.55;max-width:70ch;}
.entry .go{color:var(--blush-faint);transition:color .2s;}
.entry:hover .go{color:var(--blush);}

/* ============================================================
   The cream "new world" — the artwork viewer AND the manuscript reader
   ============================================================ */
.screen.view.artview,.screen.view.readview{
  background:#f3e9d8;                 /* warm cream / antique paper */
  background-attachment:scroll;
  overflow:visible;                   /* a tall work can scroll */
  justify-content:flex-start;
  color:var(--wine-deep);
}
.screen.view.artview::before,.screen.view.readview::before{display:none;}   /* kill the woven asanoha field */
/* Paint the whole document cream for the cream worlds. The dive grows the world in
   with a brief scale on .screen; this keeps the edges cream (not the dark body) and
   means the painting overlay rides over cream, not a dark gap — no wash needed. */
html:has(.screen.view.artview),
html:has(.screen.view.artview) body,
html:has(.screen.view.readview),
html:has(.screen.view.readview) body{background:#f3e9d8;}

/* the room */
.artview .world,.readview .world{
  position:relative;z-index:2;width:min(960px,92vw);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:clamp(1.1rem,3vh,2rem);
  padding:clamp(.5rem,3vh,2rem) 0 clamp(2rem,6vh,4rem);
}

/* symmetric botanical rose frame (the same rose patch, soft on cream) */
.rose-frame{position:fixed;inset:0;z-index:1;pointer-events:none;}
.rose-frame .rose{position:absolute;background:url("patch_pink_flower.png") center/contain no-repeat;opacity:.5;}
.rose-frame .rose.tl{left:-3vw;top:-3vw;width:min(360px,34vw);height:min(360px,34vw);transform:rotate(-12deg);}
.rose-frame .rose.tr{right:-3vw;top:-3vw;width:min(360px,34vw);height:min(360px,34vw);transform:scaleX(-1) rotate(-12deg);}
.rose-frame .rose.bl{left:-3vw;bottom:-3vw;width:min(380px,36vw);height:min(380px,36vw);transform:rotate(14deg);}
.rose-frame .rose.br{right:-3vw;bottom:-3vw;width:min(380px,36vw);height:min(380px,36vw);transform:scaleX(-1) rotate(14deg);}
.rose-frame .rose.tc{left:50%;top:-7vw;width:min(300px,28vw);height:min(300px,28vw);transform:translateX(-50%) rotate(6deg);}
.rose-frame .rose.bc{left:50%;bottom:-7vw;width:min(300px,28vw);height:min(300px,28vw);transform:translateX(-50%) scaleX(-1) rotate(6deg);}

/* back to the gallery / the writing */
.artview .back,.readview .back{
  align-self:flex-start;text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#7a4a52;border:1px solid rgba(86,0,26,.28);background:rgba(255,255,255,.4);
  padding:.5rem .9rem;transition:color .2s,border-color .2s,background .2s;}
.artview .back:hover,.readview .back:hover{color:var(--wine-deep);border-color:var(--wine);background:rgba(255,255,255,.7);}
.artview .back .ar,.readview .back .ar{margin-right:.4em;}

/* the framed artwork (museum plate) */
.artview .plate-card{
  width:min(720px,100%);background:#fbf4e7;border:1px solid rgba(86,0,26,.22);
  box-shadow:0 18px 44px rgba(86,0,26,.18),0 3px 10px rgba(86,0,26,.12);}
.artview .plate-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .8rem;border-bottom:1px solid rgba(86,0,26,.18);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9a5b63;background:rgba(86,0,26,.04);}
.artview .plate-bar .orn{color:var(--wine);}
.artview .plate-art{padding:clamp(.7rem,1.6vw,1.2rem);}
/* the hero: same 4:3 contain box the gallery tile uses, so the dive lands clean */
.artview .plate-art image-slot{display:block;width:100%;aspect-ratio:4/3;height:auto;background:#f3e9d8;}
.artview .plate-art image-slot::part(frame){background:transparent;}

/* museum label — wine on cream */
.artview .label,.readview .label{width:min(620px,100%);text-align:center;}
.artview .eyebrow,.readview .eyebrow{color:#9a5b63;text-shadow:none;margin-bottom:.5rem;}
.artview .bigtitle,.readview .bigtitle{color:var(--wine-deep);text-shadow:none;font-size:clamp(34px,5vw,60px);line-height:1.02;margin-bottom:.7rem;}
.artview .view-meta,.readview .view-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem .9rem;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7a4a52;}
.artview .view-meta .k,.readview .view-meta .k{color:var(--wine-deep);}
.artview .exif{display:flex;flex-direction:column;gap:.5rem;max-width:340px;margin:0 auto;}
.artview .exif div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dotted rgba(86,0,26,.25);
  padding-bottom:.4rem;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#7a4a52;}
.artview .exif div b{color:var(--wine-deep);font-weight:500;}
.artview .materials{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;}
.artview .materials span{border:1px solid rgba(86,0,26,.3);padding:.28rem .65rem;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7a4a52;}
.artview .viewtag{display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#9a5b63;margin:0 0 .7rem;}
.artview .viewtag::before{content:"";width:20px;height:1px;background:rgba(86,0,26,.4);}
.artview .notes{font-family:"IM Fell English",serif;font-style:italic;font-size:clamp(15px,1.55vw,19px);
  line-height:1.7;color:#5c3940;text-shadow:none;max-width:46ch;margin:0 auto;}
/* a wine sashiko divider (the blush motif would vanish on cream) — same
   two-layer build as the dark strips: whole diamonds via repeat:space (never
   cut, flush at both ends) over a continuous dashed thread */
.artview .sashiko,.readview .sashiko{height:26px;width:60%;max-width:360px;margin:clamp(1rem,2.6vw,1.6rem) auto;opacity:.85;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' stroke='%237e0023' stroke-opacity='0.6' stroke-width='1.3' stroke-dasharray='4.5 3.5' stroke-linecap='round'%3E%3Cpath d='M28 2 44 14 28 26 12 14Z'/%3E%3Cpath d='M28 8V20M20 14H36'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(126,0,35,.6) 0 4.5px, rgba(0,0,0,0) 4.5px 8px);
  background-repeat:space no-repeat,no-repeat;
  background-position:center,center;
  background-size:56px 28px,100% 1.3px;}

/* ---- the manuscript page itself (.readview only) ----
   The title sits in the SAME burgundy plate the list entry wore — the box that
   flew through the slit lands here, holding title + kind·year. Below it, the
   essay reads as warm ink on the cream paper. */
.readview .read-plate{width:min(680px,100%);position:relative;
  background:linear-gradient(160deg,#2a0010,#1c0009 70%,#15000a);
  border:1px solid rgba(253,233,230,.22);
  box-shadow:0 18px 44px rgba(86,0,26,.18),0 3px 10px rgba(86,0,26,.12);
  padding:clamp(1.3rem,2.6vw,1.9rem) clamp(1.2rem,2.4vw,1.7rem);}
.readview .read-plate .row{display:flex;align-items:baseline;justify-content:center;}
.readview .read-plate .et{font-family:"IM Fell English",serif;font-style:italic;font-weight:400;
  font-size:clamp(30px,4vw,46px);line-height:1.08;color:var(--blush);text-align:center;
  text-shadow:0 0 7px rgba(253,233,230,.22);}
.readview .read-page{width:min(680px,100%);}
.readview .read-body{font-family:"IM Fell English",serif;font-size:clamp(16px,1.55vw,19.5px);
  line-height:1.85;color:#4a2b33;text-align:left;max-width:62ch;margin:0 auto;}
.readview .read-body p{margin-bottom:1.15rem;text-wrap:pretty;}