html {
	width:100vw;
}
body {
	margin:0rem auto;
	max-width:55rem;
	line-height:1.3;
	font-family:"Times New Roman",serif;
}
footer {
	margin-top:1.5em;
	border-top:0.07rem solid black;
}
form {
	margin: 1rem;
}
hr {
	width:50%;
	height:3px;
	background-color:#00A4BD;
}
table {
	border:none;
}
h3 {
	text-align:left;
}
input {
	margin: 5px 8px;
}
sup {
	vertical-align: super;
	font-size: smaller;
}
.parent {
	display: flex;
	flex-direction: row;
}
@media only screen and (max-width: 600px){
	.parent {
		flex-direction: column;
	}
}
.pagination {
	text-align: center;
}
.bibliography {
	display: block;
	padding-left: 2em;
    text-indent: -2em;
	margin: 0;
}
.txt {
	padding-top:1em;
	text-align: left;
}
.oed-quotations {
	margin-left:1.3rem;
	font-size:smaller;
}
/* optional: make the footnote marker look clickable */
sup.fn,
sup.fn-g,
sup.fni,
sup.fni-g {
  cursor: pointer;
}
/* OLD: sup.fn { cursor: pointer; } */

/* remove gap when notes follow */
p { margin: 0 0 1rem 0; }
p.has-notes { margin-bottom: 0; }

/* notes block directly under the paragraph */
.para-notes { margin: 0 0 1rem 0; padding: 0; }
.para-notes-list { margin: 0; padding-left: 1.6em; }
.para-notes-list li { margin: 0.15em 0; }

.footnotes-block { margin: 0 0 1.2rem; }
.footnotes-list  { margin: 0; padding-left: 1.6em; }
.footnotes-list li { margin: 0.15em 0; }
.fn-end-markers { white-space: nowrap; }
.fn-end-markers sup.fn,
.fn-end-markers sup.fn-g { margin-left: 0.18em; }

ul.nice-bullets{
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #94a3b8;
  border-radius: 12px;
  background: #f8fafc;

  list-style: none;   /* we’ll draw our own bullets */
}

ul.nice-bullets > li{
  position: relative;
  margin: 0.45rem 0;
  padding-left: 1.35rem; /* <-- controls the indent AFTER the bullet */
/*  line-height: 1.55; */
}

ul.nice-bullets > li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0.05em;
/*  font-size: 1.25em; */
  line-height: 1;
  color: #334155;
}
.quotations {
	margin-left:1.3rem;
}
.credit {
	text-align:right;
	font-size: smaller;
}
.spacer {
  margin:10px auto 0;
  width:400px;
  position:relative;
  
  .mask { 
    overflow:hidden; height:20px; 
    &:after {
      content:'';
      display:block; margin:-25px auto 0;
      width:100%; height:25px;
      border-radius:125px / 12px;
      box-shadow:0 0 8px black;
    }
  }
  span {
    $size:50px;
    width:$size; height:$size;
    position:absolute;
    bottom:100%; margin-bottom:-$size/2;
    left:50%; margin-left:-$size/2;
    border-radius:100%;
    box-shadow:0 2px 4px #999;
    background:white;
  }
  span i {
    $offset:4px;
    position:absolute;
    top:$offset; bottom:$offset;
    left:$offset; right:$offset;
    border-radius:100%;
    border:1px dashed #aaa;
    
    text-align:center;
    line-height:40px;
    font-style:normal;
    color:#999;
  }
}
.fake-link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
/* inline-with-text variant */
/* Inline/embedded images that sit nicely in text flow */
img.zoomable{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto 0;
  cursor: zoom-in;
}

.iv-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background: rgba(0,0,0,.92);
}

.iv-stage{
  position: absolute;
  inset: 0;
  overflow: hidden;   /* so panning doesn’t create scrollbars */
}

.iv-pan{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(var(--tx,0px), var(--ty,0px), 0);
  will-change: transform;
}

.iv-layer{
  transform: translate(-50%, -50%) rotate(var(--rot,0deg)) scale(var(--scale,1));
  transform-origin: center center;
  will-change: transform;
}

.iv-img{
  display: block;
  max-width: none;
  max-height: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
}

.iv-toolbar{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  gap: 8px;
}

.iv-btn{
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #fff;
  font: 22px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.iv-btn:active{
  transform: translateY(1px);
}

.iv-hint{
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: rgba(255,255,255,.8);
  font: 12px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  user-select: none;
  pointer-events: none;
}
/* Two zoomable images side-by-side on the normal page */
.zoomable-two-up{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  margin: 1rem 0;
}

.zoomable-two-up figure{
  margin: 0;
}

.zoomable-two-up img.zoomable{
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Optional: stack them on narrow screens */
@media only screen and (max-width: 600px){
  .zoomable-two-up{
    grid-template-columns: 1fr;
  }
}
.sent{
  display: inline-block;   /* makes wrapping happen within the span’s box */
  width: 100%;             /* so it uses the full paragraph width */
  padding-left: 2em;       /* indent for wrapped lines */
  text-indent: -2em;       /* pull first line back */
  vertical-align: top;
}
.xfade{
  position: relative;
  width: 100%;
/*  max-width: 800px; */  /* optional */
  --pad: 56.25%;      /* fallback height (16:9) until JS sets real ratio */
}

/* creates height so absolutely-positioned imgs have a box */
.xfade::before{
  content: "";
  display: block;
  padding-top: var(--pad);
}

.xfade img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;

  opacity: 0;
  transition: opacity 1s ease-in-out;  /* fade duration */
}

.xfade img.show{ opacity: 1; }

figure.photo{ margin: 1rem 0; }
figure.photo .credit{
  margin: 1rem 0 0;   /* snug under image */
  font-size: smaller;
}

.fn-note-run{ display: inline; }
.para-notes-list li.fn-manual-marker,
.footnotes-list li.fn-manual-marker{
  list-style: none;
  position: relative;
}
.fn-note-label{
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(calc(-100% - 0.35em));
  white-space: nowrap;
}
.fn-br-indent {
  display: inline-block;
  width: 0.8em;
}