@font-face {
  font-family:Garamond;
  src:url('../assets/fonts/EBGaramond-Regular.woff') format('woff');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:Garamond;
  src:url('../assets/fonts/EBGaramond-Italic.woff') format('woff');
  font-weight:400 600;
  font-style:italic;
  font-display:swap;
}

@font-face {
  font-family:Caveat;
  src:url('../assets/fonts/Caveat-Regular.woff') format('woff');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root {
  --paper:#f3eddf;
  --paper-deep:#e9dfc9;
  --ground:#e8e3d6;
  --ink:#39372d;
  --soft-ink:#777361;
  --green:#384d3d;
  --green-dark:#263a2d;
  --gold:#a38b59;
  --line:#d1c8b2;
  --faint:#e0d8c5;
  --serif:Garamond,Georgia,'Times New Roman',serif;
  --hand:Caveat,'Segoe Print','Bradley Hand',cursive;
  --ui:Arial,Helvetica,sans-serif;
  color-scheme:light;
}

* {
  box-sizing:border-box;
}

html {
  min-width:320px;
  scroll-behavior:smooth;
}

body {
  margin:0;
  color:var(--ink);
  background:var(--ground);
  font:18px/1.5 var(--serif);
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(ellipse at 50% 0,#f5f1e8 0,transparent 75%),url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.045' filter='url(%23n)'/%3E%3C/svg%3E");
}

button,input,textarea,select {
  font:inherit;
  color:inherit;
}

button,a,input,textarea,summary {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:disabled {
  opacity:.35;
  cursor:default;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  border:0;
  background:none;
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--green);
  outline-offset:5px;
}

input,textarea {
  min-width:0;
}

svg {
  flex-shrink:0;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  font-weight:400;
}

h1 em,h2 em {
  font-weight:400;
  color:var(--green);
}

::selection {
  background:#b9c4a6;
  color:#233223;
}

.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  z-index:100;
  background:var(--green);
  color:var(--paper);
  padding:10px 20px;
}

.skip-link:focus {
  top:14px;
}

.loading-note {
  padding:15vh 10vw;
  text-align:center;
  font:32px var(--hand);
}

.site-header {
  max-width:1600px;
  margin:auto;
  min-height:119px;
  padding:22px 5.2%;
  display:flex;
  align-items:center;
  gap:35px;
  border-bottom:1px solid var(--line);
}

.wordmark {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:25px;
  line-height:1.05;
  white-space:nowrap;
  letter-spacing:.01em;
}

.brand-emblem {
  height:58px;
  width:48px;
  display:grid;
  place-items:center;
  border:1px solid #aaa18b;
  border-radius:50% 50% 45% 45%;
  color:var(--green);
  transform:rotate(-8deg);
}

.brand-sub {
  display:block;
  font-size:16px;
  font-style:italic;
  padding-top:6px;
  letter-spacing:.015em;
}

.main-nav {
  margin:auto;
  display:flex;
  align-items:center;
  gap:28px;
  font:12px var(--ui);
}

.main-nav a {
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:18px 0;
  white-space:nowrap;
  color:#797564;
}

.main-nav a[aria-current=page] {
  color:var(--green);
}

.main-nav a[aria-current=page]:after {
  content:'';
  position:absolute;
  bottom:5px;
  left:27px;
  right:0;
  height:1px;
  background:var(--green);
}

.main-nav a:hover {
  color:var(--green);
}

.nav-count {
  border:1px solid var(--line);
  font-size:9px;
  line-height:17px;
  min-width:21px;
  text-align:center;
  margin-left:1px;
}

.main-nav .desk-link {
  margin-left:7px;
}

.header-volume {
  display:flex;
  flex-direction:column;
  gap:5px;
  text-align:right;
  font:9px var(--ui);
  color:var(--soft-ink);
  white-space:nowrap;
}

.header-volume>span:first-child {
  font-size:10px;
  letter-spacing:.17em;
}

.header-volume>span:last-child {
  font:15px var(--serif);
  font-style:italic;
}

.journal-main,.index-main,.desk-main {
  max-width:1440px;
  margin:auto;
  padding:39px 5.3% 30px;
}

.journal-kicker {
  display:flex;
  align-items:center;
  gap:20px;
  font:9px var(--ui);
  letter-spacing:.15em;
  color:#6f725e;
}

.journal-kicker>span:last-child {
  font-size:8px;
  letter-spacing:.12em;
}

.journal-kicker i {
  padding:0 6px;
  font-style:normal;
}

.kicker-rule {
  height:1px;
  background:var(--line);
  flex:1;
}

.journal-intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:23px 0 37px;
}

.journal-intro h1 {
  font-size:clamp(48px,5.4vw,76px);
  line-height:.99;
  letter-spacing:-.035em;
}

.intro-note {
  display:flex;
  gap:18px;
  margin-top:13px;
  padding-right:5%;
  font-size:17px;
  line-height:1.45;
  color:var(--soft-ink);
}

.tiny-cross {
  font:23px var(--serif);
  color:var(--gold);
  padding-top:7px;
}

.book-spread {
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  position:relative;
  filter:drop-shadow(0 12px 13px #423c2424);
  border:1px solid #c9bea6;
  border-radius:2px 5px 5px 2px;
  background:var(--paper);
  isolation:isolate;
}

.book-spread:before {
  content:'';
  position:absolute;
  inset:3px -4px -5px 3px;
  background:var(--paper-deep);
  border:1px solid #c7bda6;
  border-radius:3px;
  z-index:-2;
  box-shadow:2px 3px 0 -1px #f2ecdd,3px 5px 0 -1px #c8bea6;
}

.book-spread:after {
  content:'';
  position:absolute;
  left:50.98%;
  top:0;
  bottom:0;
  width:30px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#73644b10 28%,#73644b1a 48%,#fff7e833 52%,transparent);
  pointer-events:none;
  z-index:2;
}

.book-page {
  position:relative;
  min-height:590px;
  min-width:0;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.04' filter='url(%23n)'/%3E%3C/svg%3E");
  padding:27px 34px 22px;
}

.specimen-page {
  overflow:hidden;
  background-image:radial-gradient(ellipse at 40% 40%,#fff9ee55,transparent 75%);
  border-right:1px solid #c7bea847;
}

.page-running {
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:1;
  color:#8a826c;
  font:8px var(--ui);
  letter-spacing:.13em;
  min-height:15px;
}

.page-running>span:last-child {
  font-size:7px;
}

.empty-study {
  height:441px;
  max-width:430px;
  margin:10px auto 0;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

.study-ring {
  position:absolute;
  left:50%;
  top:47%;
  border:1px solid #b9a77944;
  border-radius:50%;
  transform:translate(-50%,-50%);
  width:77%;
  aspect-ratio:1;
}

.ring-inner {
  width:65%;
  border-style:dashed;
  border-color:#b9a77945;
  border-width:.7px;
}

.ring-outer:before,.ring-outer:after {
  content:'';
  position:absolute;
  background:#b9a77933;
  left:50%;
  top:-9%;
  height:118%;
  width:.7px;
}

.ring-outer:after {
  transform:rotate(90deg);
}

.compass {
  height:84px;
  width:84px;
  color:var(--gold);
}

.study-compass {
  width:82px;
  height:82px;
  color:#9f966f99;
  margin-top:-55px;
}

.registration {
  position:absolute;
  color:#b2a27f;
  font:18px var(--serif);
  line-height:1;
}

.registration.top {
  top:6%;
  left:49%;
}

.registration.bottom {
  bottom:15%;
  left:49%;
}

.registration.left {
  top:45.3%;
  left:4%;
}

.registration.right {
  top:45.3%;
  right:4%;
}

.handwritten {
  font-family:var(--hand);
  font-weight:400;
  line-height:1.2;
  letter-spacing:.005em;
}

.empty-caption {
  font-size:29px;
  color:#8b836c;
  text-align:center;
  transform:rotate(-5deg);
  position:absolute;
  top:54%;
  left:15%;
  right:15%;
  line-height:1.05;
}

.measure-label {
  position:absolute;
  bottom:6%;
  font:7px var(--ui);
  letter-spacing:.23em;
  color:#9b927a;
}

.botanical {
  color:#9b9677;
  pointer-events:none;
}

.page-botanical {
  position:absolute;
  bottom:10px;
  left:-16px;
  width:164px;
  opacity:.5;
  transform:rotate(-13deg);
}

.specimen-footnote {
  position:absolute;
  left:34px;
  right:30px;
  bottom:23px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  font-style:italic;
  color:#958b72;
}

.page-number {
  font:9px var(--serif);
  font-style:normal;
  letter-spacing:.15em;
  color:#8b8069;
}

.observations-page {
  padding-left:44px;
  padding-right:38px;
}

.small-star {
  font-size:18px!important;
}

.research-tag {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:7px var(--ui);
  letter-spacing:.14em;
  color:var(--green);
  border:1px solid #a9b09a;
  padding:7px 10px;
  margin-top:29px;
  background:#b0ba9910;
}

.status-dot {
  width:4px;
  height:4px;
  background:var(--green);
  border-radius:50%;
}

.observations-page h2 {
  font-size:52px;
  line-height:1.02;
  letter-spacing:-.025em;
  margin-top:22px;
}

.empty-body {
  max-width:320px;
  font-size:17px;
  line-height:1.4;
  margin-top:19px;
  color:#827965;
}

.margin-note {
  font-size:26px;
  line-height:1.1;
  transform:rotate(-3deg);
  margin:25px 0 0;
  color:var(--green);
}

.ink-flourish {
  width:162px;
  height:24px;
  margin:4px 0 12px 5px;
  overflow:visible;
}

.ink-flourish path {
  fill:none;
  stroke:#8c8060;
  stroke-width:.9;
  stroke-dasharray:300;
  stroke-dashoffset:300;
  animation:draw-flourish 2.2s ease 1s forwards;
}

.empty-cta {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  margin-top:8px;
}

.empty-cta>span {
  font:12px var(--serif);
  font-style:italic;
  color:#94876f;
}

.text-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:var(--green);
  font:12px var(--ui);
  padding:3px 0;
  line-height:1.4;
  max-width:100%;
}

.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.text-link.muted {
  color:#8a7d68;
}

.page-bottom {
  display:flex;
  justify-content:space-between;
  position:absolute;
  bottom:23px;
  left:44px;
  right:34px;
  align-items:center;
  font:6.5px var(--ui);
  letter-spacing:.13em;
  color:#9e927b;
}

.below-book {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:23px;
  color:#928b76;
}

.below-book>.handwritten {
  font-size:22px;
  transform:rotate(-1deg);
}

.below-book>span:last-child {
  display:flex;
  align-items:center;
  gap:10px;
  font:7px var(--ui);
  letter-spacing:.15em;
}

.site-footer {
  max-width:1288px;
  margin:13px auto 0;
  padding:22px 0 25px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#8e8775;
  font-size:13px;
  font-style:italic;
}

.footer-flourish {
  font-style:normal;
  font-size:21px;
  color:#a49471;
}

.eyebrow {
  font:8px/1.4 var(--ui);
  letter-spacing:.15em;
  color:#8c836c;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--green);
  color:var(--paper);
  border:1px solid var(--green);
  border-radius:2px;
  font:12px/1.35 var(--ui);
  padding:12px 19px;
  min-height:42px;
  transition:background .15s ease;
}

.button:hover:not(:disabled) {
  background:var(--green-dark);
}

.button.secondary {
  background:transparent;
  color:var(--green);
  border-color:#a6ac94;
}

.button.secondary:hover:not(:disabled) {
  background:#dfe2d255;
}

.button.small {
  font-size:10px;
  min-height:33px;
  padding:8px 12px;
  gap:6px;
}

.button.danger {
  background:#7b4939;
  border-color:#7b4939;
}

.full-width {
  width:100%;
}

.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:33px;
  min-height:33px;
  color:var(--green);
}

.notifications {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100vw - 32px);
  z-index:200;
  display:flex;
  gap:8px;
  flex-direction:column;
  pointer-events:none;
}

.notification {
  color:var(--paper);
  background:var(--green-dark);
  padding:12px 19px;
  border:1px solid #819378;
  box-shadow:0 5px 15px #3333;
  font:12px/1.5 var(--ui);
  animation:appear .2s ease;
}

.notification.error {
  background:#794b37;
  border-color:#bf9b75;
}

.confirm-dialog {
  border:1px solid var(--line);
  background:var(--paper);
  padding:35px;
  max-width:430px;
  width:calc(100% - 30px);
  color:var(--ink);
  box-shadow:0 15px 80px #3334;
}

.confirm-dialog::backdrop {
  background:#292b2370;
  backdrop-filter:blur(3px);
}

.confirm-dialog h2 {
  font-size:32px;
  margin:12px 0;
}

.confirm-dialog p:not(.eyebrow) {
  font-size:17px;
  color:var(--soft-ink);
}

.dialog-actions {
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:25px;
}

.index-main {
  min-height:calc(100vh - 220px);
}

.index-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin:28px 0 35px;
}

.index-heading h1 {
  font-size:62px;
  line-height:1.03;
  letter-spacing:-.03em;
}

.index-heading p {
  font-style:italic;
  color:var(--soft-ink);
  margin-top:15px;
}

.search-field {
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid #aca78f;
  min-width:260px;
  padding-bottom:8px;
  color:#928975;
  margin-bottom:6px;
}

.search-field input {
  background:transparent;
  border:0;
  outline:none;
  font:15px var(--serif);
  width:100%;
}

.search-field:focus-within {
  border-color:var(--green);
}

.index-empty {
  position:relative;
  text-align:center;
  background:#f4eedeaa;
  border:1px solid var(--line);
  padding:55px 20px 65px;
  min-height:400px;
}

.index-empty .compass {
  width:70px;
  height:70px;
  margin-bottom:15px;
  opacity:.6;
}

.index-empty h2 {
  font-size:39px;
  margin:12px 0;
}

.index-empty p:not(.eyebrow) {
  font-size:18px;
  line-height:1.4;
  color:var(--soft-ink);
}

.index-empty .text-link {
  margin-top:25px;
}

.creature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px;
}

.creature-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  border:1px solid var(--line);
  background:var(--paper);
  padding:22px;
  position:relative;
  transition:transform .2s,box-shadow .2s;
  min-width:0;
  overflow:hidden;
}

.creature-card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 20px #423c2417;
}

.card-number {
  font:9px var(--ui);
  letter-spacing:.1em;
  color:var(--gold);
}

.card-art {
  height:225px;
  width:100%;
  min-width:0;
  min-height:0;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-sizing:border-box;
  padding:10px;
}

.card-art img {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  min-width:0;
  min-height:0;
  object-fit:contain;
  object-position:center;
  mix-blend-mode:multiply;
}

.card-name {
  font-size:34px;
  line-height:1.1;
  margin-top:10px;
}

.card-epithet {
  font-size:17px;
  font-style:italic;
  color:var(--soft-ink);
  margin-top:5px;
}

.card-footer {
  margin-top:25px;
  width:100%;
  border-top:1px solid var(--faint);
  padding-top:15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font:8px var(--ui);
  letter-spacing:.1em;
  color:var(--green);
}

.reader-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin:25px 0 30px;
}

.reader-heading h1 {
  font-size:70px;
  line-height:1.05;
  letter-spacing:-.03em;
  margin-top:10px;
}

.reader-epithet {
  font-style:italic;
  color:var(--soft-ink);
  font-size:20px;
}

.reader-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  padding-bottom:8px;
}

.reader-drawing-page {
  padding-bottom:60px;
  min-height:620px;
  min-width:0;
  overflow:hidden;
}

.reader-stage {
  aspect-ratio:1;
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:8px;
  overflow:hidden;
}

.specimen-svg {
  width:100%;
  height:100%;
  display:block;
  overflow:hidden;
  isolation:isolate;
}

.ink-image.multiply {
  mix-blend-mode:multiply;
}

.eye-frame {
  pointer-events:none;
}

.editing .eye-frame {
  pointer-events:all;
  cursor:move;
}

.eye-selection {
  stroke:var(--green);
  stroke-width:2;
  stroke-dasharray:5 4;
  fill:none;
  opacity:0;
}

.eye-frame.selected .eye-selection {
  opacity:1;
}

.eye-frame.selected:focus {
  outline:0;
}

.flap-outline {
  fill:#86986c17;
  stroke:#65805b;
  stroke-width:2;
  stroke-dasharray:8 7;
  pointer-events:none;
}

.hinge-line {
  fill:none;
  stroke:#b0784c;
  stroke-width:3;
  stroke-dasharray:10 8;
  pointer-events:none;
}

.hinge-point {
  stroke:#a1714e;
  fill:#f5efde;
  stroke-width:2;
  pointer-events:none;
}

.flap-handle {
  cursor:grab;
  touch-action:none;
  fill:var(--paper);
  stroke:var(--green);
  stroke-width:2;
  outline:none;
}

.flap-handle:active {
  cursor:grabbing;
}

.handle-hit {
  fill:transparent;
  stroke:none;
}

.handle-ring {
  fill:#f4eddde8;
  stroke:#796f4e;
}

.flap-handle:focus-visible .handle-ring {
  stroke:var(--green);
  stroke-width:4;
}

.flap-handle path {
  fill:none;
  stroke:#796f4e;
  stroke-width:2;
}

.editing:not(.preview) .flap-handle {
  pointer-events:none;
  opacity:.6;
}

.trace-line {
  fill:#8ca77b26;
  stroke:#476941;
  stroke-width:2.5;
  stroke-dasharray:8 5;
  pointer-events:none;
}

.specimen-svg.freehand,.specimen-svg.polygon,.specimen-svg.hinge,.specimen-svg.handle,.specimen-svg.eye-add-pupil,.specimen-svg.eye-add-glint {
  cursor:crosshair;
}

.specimen-svg.freehand {
  touch-action:none;
}

.flap-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 0;
}

.flap-button {
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  border-radius:2px;
  padding:7px 10px;
  font:10px/1.4 var(--ui);
  color:var(--green);
  background:#c9cdb217;
  text-align:left;
}

.flap-button:hover {
  background:#c9cdb240;
}

.art-hint {
  font-size:23px;
  color:#8a8068;
  transform:rotate(-2deg);
  margin:17px 0 0;
  text-align:center;
}

.reader-notes-page {
  padding:28px 38px 65px 45px;
}

.reader-section {
  margin:28px 0;
}

.reader-section h2 {
  font-size:36px;
  color:var(--green);
  margin-bottom:12px;
}

.reader-section p {
  font-size:27px;
  line-height:1.35;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.habitat-note {
  margin-top:30px;
  padding-bottom:10px;
  border-bottom:1px solid var(--faint);
}

.habitat-note .handwritten {
  font-size:26px;
  margin-top:8px;
  white-space:pre-wrap;
}

.reader-pagination {
  display:flex;
  justify-content:space-between;
  margin-top:30px;
}

.ink-word {
  display:inline-block;
  clip-path:inset(0 100% 0 0);
  animation:write-word var(--ink-duration,300ms) linear var(--ink-delay,0ms) forwards;
}

.ink-finished .ink-word {
  clip-path:none;
  animation:none;
}

.preview-notes [data-write],.note-body {
  white-space:pre-wrap;
}

.desk-main {
  max-width:1600px;
  padding-top:32px;
}

.desk-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:6px;
}

.desk-heading h1 {
  font-size:53px;
  line-height:1.1;
  letter-spacing:-.03em;
  margin-top:7px;
}

.archive-actions {
  display:flex;
  gap:22px;
  padding-bottom:7px;
}

.archive-actions .text-link {
  font-size:11px;
}

.desk-storage-note {
  font:10px/1.6 var(--ui);
  color:#8a816d;
  margin:12px 0 25px;
}

.storage-warning {
  font:12px/1.5 var(--ui);
  border-left:3px solid #ac734b;
  padding:10px 14px;
  background:#cfa87917;
  margin-bottom:20px;
}

.workbench {
  display:grid;
  grid-template-columns:190px minmax(260px,1fr) 300px;
  border:1px solid #c4b99f;
  background:var(--paper);
  box-shadow:0 9px 25px #403a2612;
  min-height:650px;
  border-radius:3px;
  overflow:hidden;
}

.study-shelf {
  position:relative;
  background:#ebe4d4;
  border-right:1px solid var(--line);
  padding:22px 15px;
  display:flex;
  flex-direction:column;
}

.shelf-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#928973;
  font:10px var(--serif);
  margin-bottom:18px;
}

.shelf-title .eyebrow {
  font-size:8px;
}

.new-study {
  width:100%;
  font-size:10px;
  padding:9px 12px;
  min-height:36px;
  background:transparent;
  color:var(--green);
  border-color:#9dA48d;
}

.new-study:hover:not(:disabled) {
  background:#c9cfbb66;
}

.study-list {
  margin:17px -15px 180px;
  max-height:550px;
  overflow:auto;
}

.study-item {
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
  padding:13px 12px 13px 15px;
  border-bottom:1px solid #d8cfb94a;
  border-left:2px solid transparent;
}

.study-item:hover {
  background:#d9d6c455;
}

.study-item.active {
  border-left-color:var(--green);
  background:#d7d8c77a;
}

.study-thumbnail {
  width:37px;
  height:40px;
  border:1px solid #c6bda6;
  background:#f4eddf;
  flex-shrink:0;
  display:grid;
  place-items:center;
  color:#8d8d70;
}

.study-thumbnail img {
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
}

.study-item>span:last-child {
  min-width:0;
}

.study-label {
  display:block;
  max-width:105px;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  font-size:17px;
  line-height:1.2;
}

.study-status {
  display:block;
  font:8px var(--ui);
  color:#8e846d;
  margin-top:5px;
}

.shelf-note {
  position:absolute;
  bottom:27px;
  left:15px;
  right:15px;
  text-align:center;
}

.shelf-note .botanical {
  width:65px;
  height:100px;
  opacity:.55;
  transform:rotate(15deg);
}

.shelf-note .handwritten {
  font-size:19px;
  line-height:1.1;
  color:#8a826a;
  transform:rotate(-4deg);
}

.workbench.without-study {
  grid-template-columns:190px 1fr;
  min-height:650px;
}

.desk-welcome {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:45px 30px;
}

.welcome-ornament {
  color:#889276;
  margin-bottom:20px;
  border:1px solid #cdc5ad;
  border-radius:50%;
  padding:17px;
  display:flex;
}

.desk-welcome h2 {
  font-size:53px;
  line-height:1.02;
  letter-spacing:-.03em;
  margin:19px 0 22px;
}

.desk-welcome>p:not(.eyebrow,.handwritten) {
  font-size:20px;
  line-height:1.35;
  color:var(--soft-ink);
  margin-bottom:26px;
}

.welcome-steps {
  display:flex;
  gap:32px;
  border-top:1px solid var(--line);
  padding-top:22px;
  margin-top:39px;
  font:10px var(--ui);
  color:#8b816b;
}

.welcome-steps b {
  font:13px var(--serif);
  color:var(--gold);
  padding-right:6px;
}

.desk-welcome>.handwritten {
  font-size:24px;
  margin-top:27px;
  color:#958871;
  transform:rotate(-2deg);
}

.editor {
  display:flex;
  flex-direction:column;
  min-width:0;
  background:radial-gradient(ellipse at 40% 40%,#fff8e877,transparent);
}

.editor-topbar {
  min-height:65px;
  padding:14px 19px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--faint);
  gap:10px;
}

.editor-topbar>div {
  display:flex;
  align-items:center;
  gap:8px;
}

.draft-label {
  font:7px var(--ui);
  letter-spacing:.15em;
  color:#958c75;
}

.editor-stage-wrap {
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:26px 27px 13px;
  min-height:300px;
  max-height:650px;
  isolation:isolate;
}

.editor-stage {
  width:100%;
  aspect-ratio:1;
  max-height:600px;
  position:relative;
  overflow:hidden;
}

.stage-corner {
  position:absolute;
  width:13px;
  height:13px;
  border-color:#b6aa8f;
  border-style:solid;
  border-width:0;
  pointer-events:none;
}

.corner-tl {
  left:0;
  top:0;
  border-top-width:1px;
  border-left-width:1px;
}

.corner-tr {
  right:0;
  top:0;
  border-top-width:1px;
  border-right-width:1px;
}

.corner-bl {
  left:0;
  bottom:0;
  border-bottom-width:1px;
  border-left-width:1px;
}

.corner-br {
  right:0;
  bottom:0;
  border-bottom-width:1px;
  border-right-width:1px;
}

.blank-canvas {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:18px;
  width:100%;
  height:100%;
  color:#a4977a;
}

.blank-canvas>.handwritten {
  font-size:35px;
  transform:rotate(-4deg);
  color:#8a876e;
}

.blank-canvas>span:last-child {
  display:flex;
  align-items:center;
  gap:10px;
  font:10px var(--ui);
  color:var(--green);
}

.blank-canvas:hover {
  background:#c9cdb20f;
}

.stage-instructions {
  font:10px/1.6 var(--ui);
  color:#8d826b;
  text-align:center;
  padding:9px 25px 20px;
  min-height:50px;
}

.editor-bottom {
  padding:14px 19px;
  border-top:1px solid var(--faint);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:50px;
}

.editor-bottom>span {
  font:8px var(--ui);
  color:#7f846c;
}

.editor-bottom [data-state=error] {
  color:#9d523b;
}

.editor-bottom .text-link {
  font-size:9px;
}

.inspector {
  border-left:1px solid var(--line);
  background:#efe8d8;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.inspector-tabs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line);
  min-height:65px;
}

.inspector-tabs button {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:#9b917b;
  position:relative;
  padding:10px 2px;
  font:8px var(--ui);
}

.inspector-tabs button[aria-selected=true] {
  color:var(--green);
  background:#e2e3d344;
}

.inspector-tabs button[aria-selected=true]:after {
  content:'';
  position:absolute;
  height:2px;
  background:var(--green);
  left:12px;
  right:12px;
  bottom:-1px;
}

.inspector-content {
  padding:24px 21px;
  max-height:740px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#baaf93 transparent;
}

.inspector-content h2 {
  font-size:29px;
  line-height:1.1;
  margin:10px 0 12px;
  letter-spacing:-.015em;
}

.help-text {
  font:10px/1.65 var(--ui);
  color:#8e8269;
  margin-bottom:21px;
}

.field {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:17px;
  font:10px var(--ui);
  color:#7b725c;
}

.field input,.field textarea {
  width:100%;
  background:#fbf5e733;
  border:1px solid #c9bea4;
  border-radius:2px;
  padding:10px 11px;
  font:17px/1.3 var(--serif);
  color:var(--ink);
  box-shadow:inset 0 1px 2px #837a622;
}

.field input::placeholder,.field textarea::placeholder {
  font-size:15px;
  font-style:italic;
  color:#a0957c;
}

.field textarea {
  resize:vertical;
  min-height:100px;
}

.field input:focus,.field textarea:focus {
  outline:1px solid var(--green);
  outline-offset:0;
  background:#faf4e8;
}

.upload-control {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  border:1px dashed #a9a083;
  border-radius:2px;
  background:#c8cdb012;
  padding:24px 7px;
  margin:24px 0 7px;
  color:var(--green);
  font:11px var(--ui);
  min-height:115px;
  text-align:center;
}

.upload-control:hover {
  background:#c8cdb038;
}

.upload-control:focus-within {
  outline:2px solid var(--green);
  outline-offset:3px;
}

.upload-control input {
  position:absolute;
  inset:0;
  opacity:0;
  width:100%;
  height:100%;
  cursor:pointer;
}

.upload-formats {
  font-size:7px;
  letter-spacing:.04em;
  color:#9a8c71;
}

.file-caption {
  font:9px/1.5 var(--ui);
  color:#9a8d73;
  overflow-wrap:anywhere;
  margin-bottom:22px;
}

.transform-controls {
  margin-top:17px;
}

.range-field {
  display:block;
  font:9px/1.5 var(--ui);
  color:#81775f;
  margin:18px 0;
}

.range-field>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
}

.range-field output {
  font:11px var(--serif);
  color:#6f735b;
}

.range-field input {
  display:block;
  width:100%;
  margin:9px 0 0;
  height:4px;
  accent-color:var(--green);
  cursor:pointer;
}

.transform-controls>.text-link {
  font-size:9px;
  margin:3px 0 10px;
}

.checkbox-field {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font:9px/1.6 var(--ui);
  margin:18px 0;
  color:#8c8066;
}

.checkbox-field input {
  accent-color:var(--green);
  margin:1px 0 0;
  flex-shrink:0;
}

.eye-type-buttons {
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:20px 0;
}

.tool-button {
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  padding:12px 13px;
  border:1px solid #c6bba0;
  font:10px/1.4 var(--ui);
  color:#6c745b;
  border-radius:2px;
  text-align:left;
  margin:9px 0;
  background:#eee8d766;
}

.tool-button:hover:not(:disabled),.tool-button.active {
  border-color:var(--green);
  background:#dfe3ce99;
}

.tool-button>span:last-child {
  display:flex;
  flex-direction:column;
  gap:3px;
}

.tool-button small {
  font-size:8px;
  color:#9b8f74;
}

.sample-eye {
  display:grid;
  place-items:center;
  width:31px;
  height:23px;
  border-radius:50%;
  border:1px solid #635e49;
  background:#f7f0e2;
  transform:rotate(-7deg);
}

.sample-eye i {
  display:block;
  width:10px;
  height:15px;
  border-radius:50%;
  background:#3f3c30;
}

.dark-eye {
  background:#39372d;
}

.dark-eye i {
  width:5px;
  height:7px;
  background:#f5efdf;
  margin:0 7px 3px 0;
}

.item-chips {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:20px 0;
}

.item-chip {
  border:1px solid #c7bca0;
  padding:6px 10px;
  font:9px var(--ui);
  border-radius:2px;
  color:#8b7d64;
}

.item-chip.active {
  background:var(--green);
  border-color:var(--green);
  color:var(--paper);
}

.quiet-note {
  font:17px/1.35 var(--serif);
  font-style:italic;
  color:#a09277;
  margin:24px 0;
}

.selected-settings {
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:22px;
}

.selected-settings>.text-link {
  font-size:9px;
  margin-top:18px;
}

.colour-fields {
  display:flex;
  gap:22px;
  margin-top:24px;
  font:9px var(--ui);
  color:#8d8169;
}

.colour-fields label {
  display:flex;
  align-items:center;
  gap:9px;
}

.colour-fields input {
  appearance:none;
  background:none;
  border:0;
  width:27px;
  height:27px;
  padding:0;
  cursor:pointer;
}

.note-editor {
  border-top:1px solid var(--line);
  margin-top:23px;
  padding-top:17px;
}

.note-editor-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.note-editor-heading>div {
  display:flex;
  gap:3px;
}

.tiny-button {
  width:23px;
  height:25px;
  display:inline-grid;
  place-items:center;
  font:14px var(--serif);
  color:var(--green);
  border:1px solid #c8bda2;
  border-radius:2px;
}

.note-editor .field {
  margin-top:12px;
}

.note-editors+.button {
  margin-top:22px;
  font-size:10px;
}

.alignment-details {
  border-bottom:1px solid var(--line);
  padding-bottom:13px;
  margin-bottom:19px;
  font:10px var(--ui);
  color:#7e755e;
}

.alignment-details summary {
  cursor:pointer;
  padding:10px 0;
}

.alignment-details .help-text {
  font-size:9px;
  margin:10px 0 0;
}

.alignment-details .range-field>span>span {
  font-size:7px;
  color:#a08e70;
}

.flap-tools {
  margin-top:20px;
}

.trace-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:14px;
}

.trace-actions .text-link {
  font-size:9px;
}

.inspector-content>.text-link {
  font-size:10px;
  margin:10px 0;
}

.remove-under {
  margin-top:30px!important;
  font-size:8px!important;
}

.underneath-placeholder {
  text-align:center;
  padding:55px 0 30px;
  color:#a4987a;
}

.underneath-placeholder .handwritten {
  font-size:27px;
  line-height:1.1;
  margin-top:20px;
  transform:rotate(-4deg);
}

.preview-notes {
  margin:30px 0;
}

.preview-notes h3 {
  font-size:29px;
  line-height:1.1;
  color:var(--green);
  margin:20px 0 10px;
}

.preview-notes p {
  font-size:23px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.inspector-content>.flap-button {
  margin:8px 0;
}

.desk-publish {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:22px 0 5px;
}

.desk-publish>.text-link {
  font-size:10px;
}

.desk-publish>div {
  display:flex;
  align-items:center;
  gap:20px;
}

.desk-publish>div>span {
  font:10px/1.5 var(--ui);
  color:#8f836a;
  max-width:255px;
  text-align:right;
}

.desk-publish .button {
  font-size:11px;
}

.desk-main+.site-footer {
  max-width:89.5%;
}

@keyframes write-word {
  0% {
    clip-path:inset(0 100% 0 0);
    opacity:.7;
    filter:blur(.35px);
  }
  100% {
    clip-path:inset(0 0 0 0);
    opacity:1;
    filter:blur(0);
  }
}

@keyframes draw-flourish {
  to {
    stroke-dashoffset:0;
  }
}

@keyframes appear {
  from {
    opacity:0;
    transform:translateY(5px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(min-width:1500px) {
  .site-footer {
    max-width:1288px;
  }
  .workbench {
    grid-template-columns:210px minmax(300px,1fr) 325px;
  }
  .inspector-content {
    padding-left:25px;
    padding-right:25px;
  }
  .empty-study {
    height:450px;
  }
  .book-page {
    min-height:610px;
  }
  .observations-page h2 {
    font-size:59px;
  }
  .empty-body {
    font-size:19px;
  }
  .margin-note {
    font-size:28px;
  }
}

@media(max-width:1150px) {
  .site-header {
    gap:20px;
    padding-left:4%;
    padding-right:4%;
  }
  .header-volume {
    display:none;
  }
  .main-nav {
    margin-left:auto;
    margin-right:0;
  }
  .journal-main,.index-main {
    padding-left:4%;
    padding-right:4%;
  }
  .journal-intro h1 {
    font-size:63px;
  }
  .book-page {
    padding-left:25px;
    padding-right:25px;
    min-height:590px;
  }
  .observations-page {
    padding-left:33px;
  }
  .observations-page h2 {
    font-size:48px;
  }
  .margin-note {
    font-size:25px;
  }
  .empty-body {
    font-size:16px;
  }
  .empty-study {
    height:440px;
  }
  .page-running {
    font-size:7px;
    letter-spacing:.08em;
  }
  .page-running>span:last-child {
    font-size:6px;
  }
  .specimen-footnote {
    left:25px;
    right:25px;
    font-size:12px;
  }
  .page-bottom {
    left:33px;
    right:25px;
  }
  .site-footer {
    margin-left:4%;
    margin-right:4%;
  }
  .desk-main {
    padding-left:3%;
    padding-right:3%;
  }
  .workbench {
    grid-template-columns:160px minmax(230px,1fr) 275px;
  }
  .inspector-content {
    padding:22px 17px;
  }
  .study-label {
    max-width:85px;
    font-size:15px;
  }
  .study-thumbnail {
    width:28px;
    height:34px;
  }
  .editor-stage-wrap {
    margin:20px 17px 12px;
  }
  .editor-topbar {
    padding:14px;
  }
  .editor-topbar .button {
    font-size:9px;
    padding:8px;
  }
  .shelf-note .handwritten {
    font-size:17px;
  }
  .inspector-content h2 {
    font-size:26px;
  }
  .workbench.without-study {
    grid-template-columns:170px 1fr;
  }
  .reader-section p {
    font-size:25px;
  }
}

@media(max-width:850px) {
  .site-header {
    min-height:105px;
    padding-top:19px;
    padding-bottom:19px;
  }
  .wordmark {
    font-size:23px;
  }
  .brand-emblem {
    width:40px;
    height:50px;
  }
  .brand-emblem svg {
    width:29px;
  }
  .main-nav {
    gap:20px;
  }
  .main-nav a {
    font-size:10px;
    gap:6px;
  }
  .nav-count {
    display:none;
  }
  .main-nav .desk-link {
    margin-left:0;
  }
  .journal-main,.index-main {
    padding-top:29px;
  }
  .journal-intro h1 {
    font-size:56px;
  }
  .intro-note {
    font-size:15px;
    padding-right:0;
  }
  .journal-intro {
    margin:25px 0 30px;
  }
  .book-page {
    min-height:570px;
    padding-left:21px;
    padding-right:21px;
  }
  .observations-page {
    padding-left:27px;
  }
  .observations-page h2 {
    font-size:43px;
  }
  .empty-body {
    font-size:16px;
  }
  .margin-note {
    font-size:23px;
  }
  .empty-study {
    height:430px;
  }
  .empty-caption {
    font-size:26px;
  }
  .page-running>span:last-child {
    font-size:5.5px;
  }
  .research-tag {
    font-size:6px;
    letter-spacing:.08em;
    padding:6px 8px;
  }
  .page-botanical {
    width:125px;
  }
  .page-bottom {
    left:27px;
    right:21px;
    font-size:5.7px;
  }
  .specimen-footnote {
    left:21px;
    right:21px;
    font-size:10px;
  }
  .below-book>.handwritten {
    font-size:19px;
  }
  .below-book>span:last-child {
    font-size:6px;
    gap:5px;
  }
  .empty-cta .text-link {
    font-size:11px;
  }
  .index-heading h1 {
    font-size:50px;
  }
  .search-field {
    min-width:220px;
  }
  .creature-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .workbench {
    grid-template-columns:1fr 285px;
  }
  .study-shelf {
    grid-column:1/-1;
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:12px 17px;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:15px;
    overflow:auto;
  }
  .shelf-title {
    display:none;
  }
  .new-study {
    width:auto;
    white-space:nowrap;
    margin:0;
    flex-shrink:0;
  }
  .study-list {
    margin:0;
    display:flex;
    gap:5px;
    max-height:none;
    overflow:visible;
  }
  .study-item {
    border-bottom:0;
    border-left:0;
    min-width:120px;
    width:auto;
    padding:7px;
    border:1px solid transparent;
    border-radius:2px;
    gap:7px;
  }
  .study-item.active {
    border-color:#9ba88b;
  }
  .study-thumbnail {
    width:27px;
    height:30px;
  }
  .study-label {
    font-size:15px;
    max-width:100px;
  }
  .study-status {
    font-size:7px;
  }
  .shelf-note {
    display:none;
  }
  .workbench.without-study {
    grid-template-columns:1fr;
    min-height:660px;
  }
  .desk-heading h1 {
    font-size:44px;
  }
  .archive-actions {
    gap:15px;
  }
  .archive-actions .text-link {
    font-size:10px;
  }
  .archive-actions .text-link svg {
    width:14px;
  }
  .editor-topbar {
    min-height:61px;
  }
  .inspector-tabs {
    min-height:61px;
  }
  .desk-publish>div>span {
    max-width:195px;
    font-size:9px;
  }
  .reader-notes-page {
    padding:24px 25px 60px 28px;
  }
  .reader-section h2 {
    font-size:31px;
  }
  .reader-section p {
    font-size:24px;
  }
  .reader-heading h1 {
    font-size:60px;
  }
  .reader-epithet {
    font-size:18px;
  }
  .reader-actions .text-link {
    font-size:10px;
  }
  .flap-button {
    font-size:9px;
  }
  .art-hint {
    font-size:20px;
  }
}

@media(max-width:650px) {
  body {
    font-size:17px;
  }
  .site-header {
    min-height:116px;
    padding:17px 5% 0;
    display:flex;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:11px;
  }
  .wordmark {
    font-size:23px;
    margin:auto;
    justify-content:center;
  }
  .brand-emblem {
    height:45px;
    width:37px;
  }
  .brand-sub {
    font-size:14px;
    padding-top:4px;
  }
  .main-nav {
    width:100%;
    justify-content:center;
    gap:27px;
    margin:0;
  }
  .main-nav a {
    font-size:10px;
    padding:12px 0 17px;
    gap:6px;
  }
  .main-nav a svg {
    height:15px;
    width:15px;
  }
  .main-nav a[aria-current=page]:after {
    left:20px;
    bottom:8px;
  }
  .journal-main,.index-main,.desk-main {
    padding:24px 5% 24px;
  }
  .journal-kicker {
    font-size:7px;
    gap:12px;
    letter-spacing:.12em;
  }
  .journal-kicker>span:last-child {
    font-size:6px;
    letter-spacing:.08em;
  }
  .journal-intro {
    margin:24px 0 26px;
    display:block;
  }
  .journal-intro h1 {
    font-size:58px;
  }
  .intro-note {
    font-size:15px;
    line-height:1.3;
    margin-top:22px;
    gap:12px;
  }
  .intro-note br {
    display:none;
  }
  .intro-note p {
    max-width:290px;
  }
  .tiny-cross {
    padding-top:0;
    font-size:18px;
  }
  .book-spread {
    grid-template-columns:minmax(0,1fr);
    filter:drop-shadow(0 8px 9px #423c241b);
    border-radius:2px;
  }
  .book-spread:after {
    left:10px;
    top:0;
    bottom:0;
    width:11px;
    background:linear-gradient(90deg,#6e604617,transparent);
    transform:none;
  }
  .book-spread:before {
    inset:3px -3px -5px 3px;
  }
  .book-page {
    padding:23px 25px;
    min-height:0;
  }
  .specimen-page {
    height:420px;
    border-right:0;
    border-bottom:1px solid #d1c6ae;
  }
  .empty-study {
    height:320px;
    margin-top:5px;
    max-width:320px;
  }
  .study-compass {
    height:65px;
    width:65px;
    margin-top:-45px;
  }
  .empty-caption {
    font-size:26px;
    top:52%;
    left:10%;
    right:10%;
  }
  .registration.top {
    top:5%;
  }
  .registration.bottom {
    bottom:14%;
  }
  .measure-label {
    bottom:5%;
    font-size:6px;
  }
  .page-running {
    font-size:7px;
    letter-spacing:.12em;
  }
  .page-running>span:last-child {
    font-size:6px;
  }
  .page-botanical {
    width:108px;
    bottom:8px;
    left:-5px;
  }
  .specimen-footnote {
    font-size:12px;
    bottom:19px;
    left:25px;
    right:25px;
  }
  .observations-page {
    padding:25px 29px 64px;
    min-height:565px;
  }
  .research-tag {
    margin-top:23px;
    font-size:7px;
    padding:7px 9px;
  }
  .observations-page h2 {
    font-size:52px;
    margin-top:23px;
  }
  .empty-body {
    font-size:18px;
    max-width:100%;
    margin-top:19px;
  }
  .margin-note {
    font-size:27px;
    margin-top:24px;
  }
  .ink-flourish {
    margin-bottom:9px;
  }
  .empty-cta {
    margin-top:10px;
    gap:8px;
  }
  .empty-cta .text-link {
    font-size:12px;
  }
  .page-bottom {
    left:29px;
    right:25px;
    bottom:20px;
    font-size:6px;
  }
  .page-number {
    font-size:9px;
  }
  .below-book {
    display:block;
    margin-top:24px;
    text-align:center;
  }
  .below-book>.handwritten {
    display:block;
    font-size:22px;
    max-width:270px;
    margin:auto;
  }
  .below-book>span:last-child {
    justify-content:center;
    margin-top:17px;
    font-size:7px;
  }
  .site-footer {
    margin-left:5%;
    margin-right:5%;
    padding:20px 0;
    font-size:12px;
    gap:15px;
  }
  .site-footer>span:last-child {
    max-width:120px;
    text-align:right;
    line-height:1.3;
  }
  .site-footer>span:first-child {
    max-width:110px;
    line-height:1.3;
  }
  .index-heading {
    display:block;
    margin-top:25px;
  }
  .index-heading h1 {
    font-size:49px;
  }
  .index-heading p {
    margin-top:10px;
  }
  .search-field {
    margin-top:30px;
    width:100%;
  }
  .index-empty {
    padding:40px 20px;
    min-height:375px;
  }
  .index-empty h2 {
    font-size:32px;
  }
  .index-empty p:not(.eyebrow) {
    font-size:18px;
  }
  .creature-grid {
    gap:15px;
    grid-template-columns:minmax(0,1fr);
  }
  .creature-card {
    padding:23px;
  }
  .card-art {
    height:240px;
  }
  .desk-heading {
    display:block;
    margin-bottom:10px;
  }
  .desk-heading h1 {
    font-size:47px;
    margin-top:6px;
  }
  .archive-actions {
    margin-top:20px;
    gap:22px;
    padding-bottom:0;
  }
  .archive-actions .text-link {
    font-size:10px;
  }
  .desk-storage-note {
    font-size:10px;
    line-height:1.6;
    margin-top:14px;
    margin-bottom:21px;
  }
  .workbench {
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:visible;
  }
  .workbench.without-study {
    display:flex;
    min-height:600px;
  }
  .study-shelf {
    padding:12px;
    max-width:100%;
    border-radius:2px 2px 0 0;
    flex-shrink:0;
    gap:10px;
  }
  .new-study {
    font-size:9px;
    padding:8px;
  }
  .study-item {
    min-width:115px;
  }
  .desk-welcome {
    padding:40px 20px;
    flex:1;
  }
  .desk-welcome h2 {
    font-size:43px;
  }
  .welcome-ornament {
    padding:14px;
  }
  .welcome-ornament svg {
    width:38px;
    height:38px;
  }
  .desk-welcome>.eyebrow {
    font-size:6.5px;
  }
  .desk-welcome>p:not(.eyebrow,.handwritten) {
    font-size:18px;
  }
  .welcome-steps {
    gap:19px;
    font-size:8px;
    padding-top:21px;
    margin-top:31px;
  }
  .welcome-steps b {
    font-size:11px;
    padding-right:3px;
  }
  .desk-welcome>.handwritten {
    font-size:22px;
    margin-top:24px;
    max-width:260px;
  }
  .editor {
    flex:none;
  }
  .editor-topbar {
    min-height:58px;
    padding:11px 14px;
  }
  .draft-label {
    font-size:7px;
  }
  .editor-topbar .button {
    font-size:10px;
    padding:8px 11px;
  }
  .editor-stage-wrap {
    margin:20px 20px 10px;
    min-height:270px;
    max-height:none;
    flex:none;
  }
  .editor-stage {
    max-height:none;
    width:100%;
  }
  .stage-instructions {
    padding:9px 22px 17px;
    font-size:10px;
    min-height:45px;
  }
  .editor-bottom {
    padding:12px 16px;
    min-height:45px;
  }
  .editor-bottom>span {
    font-size:9px;
  }
  .editor-bottom .text-link {
    font-size:10px;
  }
  .inspector {
    border-left:0;
    border-top:1px solid var(--line);
    border-radius:0 0 2px 2px;
  }
  .inspector-tabs {
    min-height:66px;
  }
  .inspector-tabs button {
    font-size:9px;
    gap:6px;
  }
  .inspector-tabs button[aria-selected=true]:after {
    left:20%;
    right:20%;
  }
  .inspector-content {
    padding:25px;
    max-height:none;
    overflow:visible;
  }
  .inspector-content h2 {
    font-size:32px;
  }
  .eyebrow {
    font-size:8px;
  }
  .help-text {
    font-size:12px;
    line-height:1.65;
    margin-bottom:22px;
  }
  .field {
    font-size:11px;
    gap:9px;
    margin-top:20px;
  }
  .field input,.field textarea {
    padding:12px;
    font-size:18px;
  }
  .field input::placeholder,.field textarea::placeholder {
    font-size:17px;
  }
  .upload-control {
    min-height:135px;
    font-size:12px;
    margin-top:25px;
  }
  .upload-formats {
    font-size:8px;
  }
  .file-caption {
    font-size:10px;
  }
  .range-field {
    font-size:11px;
    margin:23px 0;
  }
  .range-field output {
    font-size:14px;
  }
  .range-field input {
    height:6px;
    margin-top:13px;
  }
  .checkbox-field {
    font-size:11px;
    margin-top:20px;
  }
  .transform-controls>.text-link {
    font-size:11px;
    margin-top:8px;
  }
  .tool-button {
    padding:15px;
    font-size:12px;
    min-height:52px;
  }
  .tool-button small {
    font-size:10px;
  }
  .eye-type-buttons {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
  }
  .eye-type-buttons .tool-button {
    gap:9px;
    min-width:0;
    padding:13px 10px;
  }
  .sample-eye {
    flex-shrink:0;
  }
  .item-chip {
    font-size:11px;
    padding:8px 12px;
  }
  .colour-fields {
    font-size:11px;
    gap:30px;
  }
  .selected-settings>.text-link {
    font-size:11px;
  }
  .note-editor-heading .eyebrow {
    font-size:8px;
  }
  .tiny-button {
    width:29px;
    height:29px;
  }
  .note-editors+.button {
    font-size:12px;
  }
  .alignment-details {
    font-size:12px;
    padding-bottom:17px;
  }
  .alignment-details .help-text {
    font-size:11px;
  }
  .alignment-details .range-field>span>span {
    font-size:8px;
  }
  .inspector-content>.text-link {
    font-size:12px;
  }
  .remove-under {
    font-size:10px!important;
  }
  .trace-actions .button {
    font-size:11px;
  }
  .trace-actions .text-link {
    font-size:11px;
  }
  .desk-publish {
    margin-top:20px;
    align-items:stretch;
    flex-direction:column-reverse;
    gap:20px;
  }
  .desk-publish>div {
    align-items:stretch;
    flex-direction:column;
    gap:12px;
  }
  .desk-publish>div>span {
    max-width:none;
    text-align:left;
    font-size:10px;
  }
  .desk-publish .button {
    width:100%;
    font-size:12px;
    min-height:46px;
  }
  .desk-publish>.text-link {
    align-self:flex-start;
    font-size:11px;
  }
  .reader-heading {
    display:block;
    margin:24px 0;
  }
  .reader-heading h1 {
    font-size:60px;
  }
  .reader-epithet {
    font-size:19px;
    margin-top:6px;
  }
  .reader-actions {
    margin-top:23px;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  .reader-actions .text-link {
    font-size:10px;
  }
  .reader-drawing-page {
    min-height:0;
    padding-bottom:64px;
  }
  .reader-stage {
    margin-top:12px;
  }
  .reader-notes-page {
    min-height:450px;
    padding:25px 29px 60px;
    border-top:1px solid var(--line);
  }
  .reader-section {
    margin:27px 0;
  }
  .reader-section h2 {
    font-size:35px;
    margin-bottom:14px;
  }
  .reader-section p {
    font-size:27px;
    line-height:1.35;
  }
  .habitat-note .handwritten {
    font-size:25px;
  }
  .flap-button {
    font-size:10px;
    padding:10px 12px;
  }
  .art-hint {
    font-size:23px;
    margin-top:20px;
  }
  .reader-pagination {
    gap:12px;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .reader-pagination>.text-link {
    font-size:10px;
  }
  .reader-pagination>a {
    order:3;
    width:100%;
    margin-top:10px;
  }
  .notifications {
    bottom:16px;
  }
  .notification {
    font-size:11px;
    padding:11px 15px;
  }
  .confirm-dialog {
    padding:27px;
  }
  .dialog-actions {
    gap:10px;
  }
  .dialog-actions .button {
    font-size:11px;
  }
  .ink-word {
    max-width:100%;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation-duration:.01ms!important;
    animation-delay:0ms!important;
    transition-duration:.01ms!important;
  }
  .ink-word {
    clip-path:none;
    filter:none;
    opacity:1;
  }
  .ink-flourish path {
    stroke-dashoffset:0;
  }
}

[data-write] {
  white-space:pre-line;
}

.editing .eye-frame {
  touch-action:none;
}


.author-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font:12px/1.5 var(--ui)}.author-controls p{flex:1;min-width:220px}.author-controls .field{margin:0}.author-controls input{max-width:240px}

/* Optional text-only revisions at the author's desk. */
.editorial-panel { margin-top:22px; padding:18px; border:1px solid #ae9b70; border-radius:8px; background:rgba(120,95,49,.045); }
.editorial-panel h3 { font-family:var(--serif); font-size:1.4rem; font-weight:400; margin:8px 0; }
.editorial-panel .field select { display:block; width:100%; min-width:0; margin-top:8px; padding:11px; color:inherit; background:#f6efdf; border:1px solid rgba(81,65,42,.35); border-radius:4px; font:inherit; }
.editorial-panel .button { margin-top:12px; white-space:normal; min-height:44px; }
.editorial-preview { margin:15px 0; padding:13px; border-left:2px solid #ae9b70; background:rgba(255,255,255,.18); overflow-wrap:anywhere; }
.editorial-preview p { line-height:1.55; }
.editorial-preview section { margin-top:13px; }
.editorial-preview h4 { font-family:var(--serif); font-size:1.05rem; margin:0 0 5px; }