/* Sheet 08, Marks: her identities, one sheet each.
   A mark is her inked drawing traced to SVG (Tools/sarah_marks.py): inlined with {% mark %} so it takes
   the ink colour, or used as a mask (.mk-m, --m) so any colour can fill it at any size. */

.lgm{display:block;max-width:100%;height:auto}
.mk-m{display:block;background:currentColor;-webkit-mask:var(--m) center / contain no-repeat;mask:var(--m) center / contain no-repeat}

/* ---- the hub: four identities ---- */
.mk-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--gutter);padding-block:var(--s4) var(--s8)}
.mk-tile{display:grid;gap:var(--s4);align-content:start;text-decoration:none;color:inherit}
.mk-art{position:relative;aspect-ratio:5 / 4;display:grid;place-items:center;border:1px solid var(--rule-2);overflow:hidden;color:var(--ink);transition:border-color .4s}
.mk-art>.lgm,.mk-art>.mk-lead{height:56%;width:auto;transition:opacity .6s var(--paper-ease),transform 1s var(--paper-ease)}
.mk-art>.mk-lead img{height:100%;width:auto;mix-blend-mode:multiply}
.mk-art>.mk-lead picture{height:100%}
.mk-art>.mk-back{position:absolute;inset:6%;opacity:0;transform:scale(1.04);background:var(--card-bg);transition:opacity .6s var(--paper-ease),transform 1s var(--paper-ease)}
.mk-art>.mk-back picture{display:block;width:100%;height:100%}
.mk-art>.mk-back img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mk-tile:is(:hover,:focus-visible) .mk-art{border-color:var(--accent)}
.mk-tile:is(:hover,:focus-visible) .mk-art>:is(.lgm,.mk-lead){opacity:0;transform:scale(.94)}
.mk-tile:is(:hover,:focus-visible) .mk-art>.mk-back{opacity:1;transform:none}
.mk-tile:focus-visible{outline:none}
.mk-du .mk-art{background:#AE805E;color:#F6EDE8;border-color:#AE805E}
.mk-7 .mk-art{background:#F3EFE6}
.mk-cap{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px var(--gutter);align-items:baseline}
.mk-cap>.mono:first-child{color:var(--accent)}
.mk-cap .h3{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.6rem);font-weight:300;line-height:1;transition:color .3s}
.mk-cap .note,.mk-cap .mk-c{grid-column:2}
.mk-tile:hover .mk-cap .h3{color:var(--accent)}
@media (max-width:899px){.mk-index{grid-template-columns:1fr;gap:var(--s6)}}

/* ---- a mark on its plate ---- */
.mk-plate{position:relative;display:grid;place-items:center;aspect-ratio:16 / 8;max-height:calc(74 * var(--svh));margin-inline:auto;max-width:1180px;border:1px solid var(--rule-2);color:var(--ink)}
.mk-plate>.lgm{height:72%;width:auto}
.mk-plate.du{background:#AE805E;color:#F6EDE8;border-color:#AE805E}
.mk-plate.du>.lgm{height:56%}
.mk-plate+.dn{margin-inline:auto;max-width:1180px}
.p-pair>.mk-plate{width:100%}
.mk-spec picture{display:block}
.mk-spec img{width:auto;max-width:min(100%,720px);max-height:150px;mix-blend-mode:var(--draw-blend)}
@media (max-width:699px){.mk-plate{aspect-ratio:1}}

/* ---- three sheets in a row ---- */
.mk-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--gutter);align-items:start}
@media (max-width:899px){.mk-three{grid-template-columns:1fr 1fr}.mk-three>:first-child{grid-column:1 / -1}}

/* ---- her notes, read off the page ---- */
.mk-read{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5) var(--gutter);align-items:start}
.mk-sheet-in{position:relative}
.mk-sheet-in picture,.mk-sheet-in img{display:block;width:100%}
.mk-sheet-in img{mix-blend-mode:var(--draw-blend)}
.mk-sheet-in svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mk-sheet-in ellipse{fill:rgba(255,255,255,.0);stroke:var(--accent);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:0;
  transform-box:fill-box;transform-origin:center;transform:scale(.8);transition:opacity .3s,transform .6s var(--settle)}
.mk-sheet-in ellipse.on{opacity:1;transform:none}
.mk-notes{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-2);position:sticky;top:var(--s6)}
.mk-notes button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 8px;width:100%;padding:11px 0 12px;border-bottom:1px solid var(--rule);cursor:pointer}
.mk-notes button:focus-visible{outline:1.5px solid var(--accent);outline-offset:4px}
.mk-notes .mono{color:var(--accent);padding-top:.45em}
.mk-notes .q{font:italic 300 clamp(1.25rem,1rem + .8vw,1.75rem)/1.15 var(--serif);transition:color .3s,transform .5s var(--paper-ease)}
.mk-notes .note{grid-column:2}
.mk-notes button.on .q{color:var(--accent);transform:translateX(4px)}
/* hover only where a pointer can hover: on touch it sticks to the last tap */
@media (hover:hover){.mk-notes button:hover .q{color:var(--accent);transform:translateX(4px)}}
@media (max-width:899px){.mk-read{grid-template-columns:1fr}.mk-notes{position:static}}

/* ---- six inkings: one at a time, or laid over each other ---- */
.mk-six{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5) var(--gutter);align-items:center}
.mk-six-stage{position:relative;aspect-ratio:1;border:1px solid var(--rule-2);color:var(--ink)}
.mk-six-stage .mk-m{position:absolute;inset:13%;opacity:0;transform:scale(.97);transition:opacity .5s var(--paper-ease),transform .8s var(--paper-ease)}
.mk-six-stage .mk-m.on{opacity:1;transform:none}
.mk-six[data-all] .mk-six-stage .mk-m{opacity:.24;transform:none}
.mk-six-stage .label{position:absolute;left:14px;bottom:12px;right:14px}
.mk-six-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mk-six-list button{all:unset;box-sizing:border-box;display:grid;gap:8px;justify-items:center;padding:14px 8px 10px;border:1px solid var(--rule);cursor:pointer;color:var(--ink);transition:border-color .3s}
.mk-six-list button .mk-m{width:56px;height:56px}
.mk-six-list button .mono{text-align:center;color:var(--ink-2)}
.mk-six-list button:is(:hover,[aria-pressed="true"]){border-color:var(--accent)}
.mk-six-list button[aria-pressed="true"] .mono{color:var(--accent)}
.mk-six-list button:focus-visible{outline:1.5px solid var(--accent);outline-offset:2px}
.mk-six .pills{margin-top:var(--s4)}
@media (max-width:899px){.mk-six{grid-template-columns:1fr}}

/* ---- one colour, every size ---- */
.mk-lad{margin-top:var(--s6)}
.mk-lad-row{display:flex;align-items:flex-end;gap:clamp(18px,3.4vw,56px);padding:clamp(20px,3vw,44px);border:1px solid var(--rule-2);overflow-x:auto;color:var(--ink);transition:background .5s var(--paper-ease),color .5s}
.mk-lad[data-rev] .mk-lad-row{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mk-lad-row span{display:grid;gap:10px;justify-items:center;flex:none}
.mk-lad-row .mk-m{width:var(--sz);height:var(--sz)}
.mk-lad-row .mono{color:inherit;opacity:.7}
.mk-lad .pills{margin-top:var(--s4)}
.mk-dig{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s6);align-items:end;margin-top:var(--s6)}
.mk-dig figure{margin:0}
.mk-dig img{width:auto;max-width:100%;box-shadow:0 1px 1px rgba(36,32,28,.08),0 20px 40px -28px rgba(36,32,28,.6)}

/* ---- Duniya: the four elements ---- */
.mk-el-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule)}
.mk-el-tabs button{all:unset;box-sizing:border-box;display:grid;justify-items:center;gap:10px;padding:var(--s4) 6px;cursor:pointer;color:var(--ink-2);transition:color .3s}
.mk-el-tabs svg{width:clamp(34px,4vw,52px);height:auto;overflow:visible}
.mk-el-tabs svg *{fill:none;stroke:currentColor;stroke-width:1.6;vector-effect:non-scaling-stroke}
.mk-el-tabs .h3{font-weight:300}
.mk-el-tabs button:is(:hover,[aria-selected="true"]){color:var(--accent)}
.mk-el-tabs button[aria-selected="true"] svg{transform:scale(1.12)}
.mk-el-tabs svg{transition:transform .6s var(--settle)}
.mk-el-tabs button:focus-visible{outline:1.5px solid var(--accent);outline-offset:-4px}
.mk-el-panel{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s5) var(--gutter);align-items:center;padding-top:var(--s6)}
.mk-el-panel[hidden]{display:none}
.mk-el-panel:not([hidden]){animation:mk-in .7s var(--paper-ease)}
.mk-el-panel .main img{max-height:min(calc(60 * var(--svh)),440px);width:auto;max-width:100%;margin-inline:auto}
.mk-el-side{display:grid;gap:var(--s4)}
.mk-el-side .alts{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:end}
.mk-el-side .alts figure{margin:0;flex:1 1 140px;max-width:240px}
.mk-say{font:italic 300 clamp(1.4rem,1.1rem + 1vw,2rem)/1.2 var(--serif);color:var(--accent)}
@keyframes mk-in{from{opacity:0;transform:translateY(14px)}}
@media (max-width:899px){.mk-el-panel{grid-template-columns:1fr}.mk-el-tabs .h3{font-size:1.1rem}}

/* ---- Duniya: her pen colours on the wordmark ---- */
.mk-pens{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--s5) var(--gutter);align-items:center}
.mk-pens-stage{display:grid;place-items:center;aspect-ratio:16 / 10;background:var(--g,#FBF8F3);color:var(--c,#643330);border:1px solid var(--rule-2);transition:background .7s var(--paper-ease),color .7s var(--paper-ease)}
.mk-pens-stage .mk-m{width:64%;aspect-ratio:845 / 508}
.mk-pens-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mk-pens-list button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:12px;width:100%;padding:8px 0;border-bottom:1px solid var(--rule);cursor:pointer}
.mk-pens-list i{width:28px;height:28px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.mk-pens-list i.two{background:linear-gradient(135deg,var(--sw) 50%,var(--sw2) 50%)}
.mk-pens-list button:is(:hover,[aria-pressed="true"]) .h3{color:var(--accent)}
.mk-pens-list .h3{font-size:1.25rem}
.mk-pens-list button:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}
@media (max-width:899px){.mk-pens{grid-template-columns:1fr}}

/* ---- scrubbers: the 7 coils, the scales grow ---- */
/* the source pages are phone photographs, so the crops are small: the stage stays near their own size */
.mk-scrub{display:grid;grid-template-columns:minmax(0,480px) minmax(0,420px);justify-content:center;gap:var(--s5) var(--s7);align-items:center}
.mk-scrub-stage{position:relative;aspect-ratio:1;max-height:calc(72 * var(--svh));border:1px solid var(--rule-2);color:var(--ink);container-type:inline-size}
.mk-f{position:absolute;inset:8%;display:grid;place-items:center;opacity:0;mix-blend-mode:var(--draw-blend)}  /* opacity isolates the img, so the frame itself blends */
.mk-f picture{position:absolute;inset:0;display:block}
.mk-f img{width:100%;height:100%;object-fit:contain;mix-blend-mode:var(--draw-blend)}
.mk-f .lgm{height:92%;width:auto}
.mk-f .numeral{font:200 78cqi/1 var(--serif);color:var(--ink)}
.mk-scrub-side{display:grid;gap:var(--s4)}
.mk-scrub-side .num{font:300 clamp(2.4rem,1.8rem + 2vw,3.6rem)/1 var(--serif)}
.mk-scrub-side .num span{color:var(--ink-2);font-size:.5em}
.mk-scrub input[type="range"]{width:100%;accent-color:var(--accent)}
@media (max-width:899px){.mk-scrub{grid-template-columns:1fr}}

/* ---- the name, down to its initials ---- */
.mk-ini{border-block:1px solid var(--rule-2);padding:var(--s6) 0 var(--s5)}
.mk-ini-word{font:300 clamp(2rem,1rem + 4.6vw,5.6rem)/1 var(--serif);letter-spacing:-.02em;white-space:nowrap;overflow:hidden}
.mk-ini-word b{font-weight:300;color:var(--accent)}
.mk-ini-word :is(.r,.l2){display:inline-block;vertical-align:top;overflow:hidden;white-space:pre;max-width:8em;transition:max-width 1.1s var(--paper-ease),opacity .7s var(--paper-ease)}
.mk-ini:is([data-state="ullt"],[data-state="ult"]) .r,.mk-ini[data-state="ult"] .l2{max-width:0;opacity:0}
.mk-ini:not([data-state="name"]) .mk-ini-word{letter-spacing:.06em}
.mk-ini-word{transition:letter-spacing 1.1s var(--paper-ease)}
.mk-ini .pills{margin-top:var(--s5)}
@media (max-width:699px){.mk-ini-word{white-space:normal}}
.mk-page{max-width:720px;margin-inline:auto}
.mk-page+.mk-page{margin-top:var(--s6)}

/* night: the drawings sit on cartridge paper, the marks turn to light ink on the blueprint */
:root[data-theme="blueprint"] :is(.mk-sheet-in,.mk-f:has(picture),.mk-el-panel figure,.mk-three .dw){background:var(--card-bg)}
:root[data-theme="blueprint"] .mk-three .dw{--ink:#24201C;--ink-2:#5E574E;--accent:#B24441;color:var(--ink)}
:root[data-theme="blueprint"] :is(.mk-sheet-in,.mk-f,.mk-el-panel figure) img{mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="day"]) :is(.mk-sheet-in,.mk-f:has(picture),.mk-el-panel figure,.mk-three .dw){background:var(--card-bg)}
  :root:not([data-theme="day"]) .mk-three .dw{--ink:#24201C;--ink-2:#5E574E;--accent:#B24441;color:var(--ink)}
  :root:not([data-theme="day"]) :is(.mk-sheet-in,.mk-f,.mk-el-panel figure) img{mix-blend-mode:multiply}
}
@media (prefers-reduced-motion:reduce){
  .mk-art>*,.mk-six-stage .mk-m,.mk-ini-word :is(.r,.l2),.mk-pens-stage,.mk-sheet-in ellipse{transition:none}
  .mk-el-panel:not([hidden]){animation:none}
}