/* Bókasafn gagnslausra hugsana
   Útlit skv. Claude Design-skjalinu „Book companion landing page":
   sléttur volgur pappír, EB Garamond, Caveat-handskrift í bláu bleki,
   hárfínar línur, rauðir doppupunktar og kápumyndin sjálf í öndvegi. */

:root {
  --paper: #f5f2ea;
  --card: #fefdf8;
  --slip: #fdfbf5;
  --ink: #3c342b;
  --title: #453c30;
  --tan: #7a6f60;
  --muted: #8b8171;
  --soft: #5d5344;
  --line: #cfc6b4;
  --line-faint: #e6dfcf;
  --border: #ddd5c4;
  --border-slip: #d8d0c0;
  --red: #9e3f38;
  --red-link: #91403a;
  --red-deep: #6e2f2b;
  --stamp: #b0453d;
  --stamp-border: #c05a51;
  --btn: #5d4a38;
  --btn-hover: #4a3a2b;
  --hand-ink: #33415c;
  --stem: #7d8a6a;

  --serif: "EB Garamond", Georgia, serif;
  --hand: "Caveat", "Segoe Script", cursive;
  --mono: "Courier Prime", "Courier New", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--paper) url('/assets/pappir.png') repeat;
  background-size: 512px 512px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px 0;
}

a { color: var(--red-link); text-decoration: none; }
a:hover { color: var(--red-deep); text-decoration: underline; }
::selection { background: rgba(158, 63, 56, 0.15); }

/* gamall pappír: örlítil eldingarslikja yfir kornóttan grunninn */
.grain { display: none; }
.wash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.wash-a { background: radial-gradient(120% 90% at 50% 8%, rgba(255, 253, 244, 0.5), transparent 60%); }
.wash-b {
  background:
    radial-gradient(140% 110% at 50% 105%, rgba(122, 96, 58, 0.08), transparent 55%),
    radial-gradient(130% 130% at 50% 40%, transparent 62%, rgba(110, 88, 52, 0.06) 100%);
}

/* ---------- hlaupandi haus: eins og efst á blaðsíðu í bók ---------- */

.running-head {
  width: 100%;
  max-width: 760px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 34px;
  background: var(--paper) url('/assets/pappir.png') repeat;
  background-size: 512px 512px;
}
.running-head .rh-title { font-variant-caps: small-caps; letter-spacing: 0.18em; font-size: 13.5px; color: var(--tan); }
.running-head .rh-dot { color: var(--red); font-weight: 700; }
.running-head .rh-page { font-style: italic; font-size: 13.5px; color: var(--muted); }
.running-head .rh-buy { font-variant-caps: small-caps; letter-spacing: 0.12em; font-size: 13.5px; color: var(--red-link); }
.running-head .rh-buy:hover { text-decoration: underline; }

/* ---------- hausinn ---------- */

.masthead {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  position: relative;
  padding-bottom: 10px;
}

.sign { display: block; text-decoration: none; }
.sign:hover { text-decoration: none; }

.site-title { font-weight: 700; line-height: 1.05; }
.site-title .t-top {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--tan);
  text-transform: uppercase;
  margin-bottom: 0;
}
.site-title .t-main {
  display: block;
  font-size: clamp(34px, 6.4vw, 58px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  color: var(--title);
  font-variant-caps: small-caps;
  text-wrap: balance;
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.divider::before, .divider::after {
  content: "";
  width: 72px;
  height: 1px;
  background: #b9b0a0;
}
.divider i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}

.tagline {
  font-style: italic;
  font-size: 19px;
  color: var(--soft);
  max-width: 520px;
  margin: 10px auto 0;
}

/* ---------- valmyndin ---------- */

/* valmyndin sem efnislína, ekki hnapparöð */
nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0;
  margin-top: 26px;
}
nav a {
  padding: 4px 18px;
  font-size: 16.5px;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  font-variant-caps: small-caps;
  color: #55483a;
  transition: color 0.15s ease;
}
nav a + a { border-left: 1px solid var(--line); }
nav a:hover, nav a.active { color: var(--red); text-decoration: none; }

main {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
main > * { animation: pagein 0.45s ease both; }
@keyframes pagein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

main > h2 { margin-top: 40px; }

h2 {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: #6a5d4b;
  font-variant-caps: small-caps;
  white-space: nowrap;
  margin-bottom: 34px;
}
h2::before, h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- forsíðan: kápumyndin og útlánið ---------- */

.draw-area {
  position: relative;
  margin-top: 56px;
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-ill {
  width: 100%;
  display: block;
}
/* breiða myndin rennur mjúklega saman við pappírinn á öllum jöðrum */
.hero-wrap.hero-desktop {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 11%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 11%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

/* símar fá gömlu kápumyndina og gamla útlitið: spjaldið á tröppunum */
.hero-mobile { display: none; }
.hero-mobile .hero-ill {
  border: 1px solid #e3ddd0;
  box-shadow: 0 2px 14px rgba(90, 80, 60, 0.14);
}
.hero-mobile .hs-case { left: 35%; top: 24%; width: 16%; height: 20%; }
.hero-mobile .hs-door { left: 52.5%; top: 16%; width: 13%; height: 40%; }
@media (max-width: 700px) {
  .hero-desktop { display: none; }
  .hero-mobile { display: block; }
  .draw-area { width: min(500px, 100%); }
  .doorstep { margin-top: -110px; width: 380px; max-width: 92%; }
}
/* kaflabrot úr bókinni undir hetjumyndinni, með upphafsstaf eins og í bókinni */
.deposit-form h2 { margin-bottom: 0; }
.deposit-form .hero-passage { margin: 4px auto 0; }
.hero-passage.shelves-passage { margin: -8px auto 40px; }
.hero-passage.rules-passage { margin: -8px auto 40px; }
.skra-search { margin-top: 20px; }
.skra-quote { margin: 0 auto 14px; max-width: 480px; }
.hero-passage {
  max-width: 470px;
  margin: 22px auto 12px;
}
.passage-chapter {
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.passage-text {
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--ink);
  text-align: left;
}
.passage-text::first-letter {
  float: left;
  font-size: 62px;
  line-height: 0.82;
  padding: 5px 10px 0 0;
  color: var(--red);
  font-weight: 500;
}
@media (max-width: 540px) {
  .passage-text { font-size: 15.5px; }
  .passage-text::first-letter { font-size: 50px; }
}

.hero-wrap { position: relative; width: 100%; }
.hotspot {
  position: absolute;
  border-radius: 4px;
  background: radial-gradient(closest-side, rgba(255, 248, 214, 0.0), transparent);
  transition: background 0.2s ease;
}
.hotspot:hover, .hotspot:focus-visible {
  background: radial-gradient(closest-side, rgba(255, 248, 214, 0.45), transparent);
  text-decoration: none;
}
.hotspot:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.hotspot i { display: none; }
.hs-case { left: 45%; top: 40%; width: 5.5%; height: 21%; }
.hs-door { left: 50.8%; top: 34%; width: 5.5%; height: 26%; }

.doorstep {
  position: relative;
  margin-top: 34px;
  width: 560px;
  max-width: 96%;
  text-align: left;
}
.doorstep .card { box-shadow: 0 6px 18px rgba(70, 60, 45, 0.22); }

.loan-note {
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  text-align: center;
  max-width: 440px;
  line-height: 1.6;
  margin: 22px auto 0;
}

/* ---------- spjaldið ---------- */

.card {
  background: var(--card);
  border: 1px solid #d5cdbc;
  box-shadow: 0 2px 8px rgba(90, 80, 60, 0.12);
  padding: 18px 22px 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.3s ease;
}
/* spjaldið réttir úr sér þegar það er "tekið upp" úr skúffunni */
.card:hover { transform: rotate(0deg); }

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.catalog {
  font-family: var(--serif);
  font-variant-caps: small-caps;
  font-size: 15.5px;
  letter-spacing: 0.09em;
  color: var(--red);
  font-weight: 600;
  white-space: nowrap;
}
.shelf-name {
  font-style: italic;
  font-size: 15px;
  color: var(--tan);
  text-align: right;
}

.thought, .card .reasoning {
  font-family: var(--hand);
  font-size: 25px;
  line-height: 1.45;
  margin: 12px 0 6px;
  color: var(--hand-ink);
  min-height: 100px;
  flex: 1;
  background: repeating-linear-gradient(to bottom, transparent, transparent 35px, var(--line-faint) 35px, var(--line-faint) 36px);
  background-position: 0 8px;
}
.card .reasoning { display: none; }
.card .reasoning::before {
  content: "Rökstuðningur: ";
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
}
.card.back .thought { display: none; }
.card.back .reasoning { display: block; }
.card.turn { animation: cardturn 0.45s ease; }
@keyframes cardturn {
  from { transform: perspective(900px) rotateY(-72deg); opacity: 0.25; }
  to { transform: perspective(900px) rotateY(0deg) rotate(var(--tilt, 0deg)); opacity: 1; }
}

.stamp {
  align-self: flex-end;
  margin: 0 4px 6px 0;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.1em;
  font-variant-caps: small-caps;
  color: var(--stamp);
  border: 1.5px solid var(--stamp-border);
  padding: 3px 8px;
  transform: rotate(-3deg);
  opacity: 0.75;
  white-space: nowrap;
  pointer-events: none;
}

.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #e2dbca;
  margin-top: 10px;
  padding-top: 8px;
}

button { font-family: var(--serif); cursor: pointer; }

.resonate {
  background: none;
  border: none;
  font-style: italic;
  font-size: 15px;
  color: var(--red-link);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
}
.resonate::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}
.resonate:hover { color: var(--red-deep); text-decoration: underline; }
.resonate.done { color: var(--soft); }
.resonate.done:hover { text-decoration: none; }
.resonate .rose-mark { display: none; }
.resonate .count { font-size: 13px; font-style: normal; margin-left: 2px; }

.flip, .report {
  background: none;
  border: none;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  padding: 0;
  white-space: nowrap;
}
.flip:hover, .report:hover { color: var(--red-link); text-decoration: underline; }

.punch { display: none; }

/* ---------- takkar ---------- */

.btn-primary {
  background: var(--btn);
  color: #f5f0e4;
  border: none;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  font-variant-caps: small-caps;
  padding: 13px 30px 11px;
  box-shadow: 0 2px 8px rgba(70, 60, 45, 0.3);
  margin-top: 32px;
  transition: background 0.15s ease;
}
.btn-primary:hover { background: var(--btn-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

.btn-quiet {
  background: none;
  border: 1px solid var(--border-slip);
  color: #55483a;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  font-variant-caps: small-caps;
  padding: 12px 24px 10px;
  margin-top: 32px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-quiet:hover { border-color: var(--red); color: var(--red); }

/* ---------- nýkomið á hillurnar ---------- */

.arrivals {
  margin-top: 96px;
  width: min(1120px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: 26px;
  width: 100%;
}
.card.mini { padding: 14px 18px 10px; }
.card.mini .catalog { font-size: 12px; }
.card.mini .shelf-name { font-size: 14px; }
.card.mini .thought, .card.mini .reasoning {
  font-size: 23px;
  min-height: 96px;
  margin: 10px 0 8px;
  background: repeating-linear-gradient(to bottom, transparent, transparent 32px, var(--line-faint) 32px, var(--line-faint) 33px);
  background-position: 0 6px;
}
.card.mini .stamp { font-size: 11px; padding: 2px 7px; }
.card.mini .card-foot { padding-top: 7px; margin-top: 0; }
.card.mini .resonate { font-size: 13.5px; gap: 6px; }
.card.mini .resonate::before { width: 5px; height: 5px; }
.card.mini .resonate .count { font-size: 12px; }

.arrivals-more { margin-top: 36px; }
.arrivals-more a { font-style: italic; font-size: 18px; color: #55483a; }
.arrivals-more a:hover { color: var(--red); }

/* ---------- leggja inn ---------- */

.deposit-form {
  width: 100%;
  max-width: 560px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* eyðublaðið liggur á borðinu með örlitlum halla og réttir úr sér þegar skrifað er */
.blank-card {
  background: #fcf9f0;
  border: 1px solid #d5cdbc;
  box-shadow: 0 2px 8px rgba(90, 80, 60, 0.12), 0 16px 26px -20px rgba(70, 60, 45, 0.4);
  padding: 18px 22px 20px;
  position: relative;
  transform: rotate(-0.45deg);
}
.blank-card:focus-within {
  border-color: var(--line);
  box-shadow: 0 4px 14px rgba(90, 80, 60, 0.18), 0 18px 30px -20px rgba(70, 60, 45, 0.45);
  transform: rotate(0deg);
}
@media (prefers-reduced-motion: no-preference) {
  .blank-card { transition: transform 0.4s ease, box-shadow 0.4s ease; }
}
/* meðan á matinu stendur heldur spjaldið hallanum af assess-card */
.assess-card.blank-card, .assess-card.blank-card:focus-within { transform: rotate(-0.6deg); }

textarea {
  font-family: var(--hand);
  font-size: 24px;
  line-height: 36px;
  color: var(--hand-ink);
  background: repeating-linear-gradient(to bottom, transparent, transparent 35px, var(--line-faint) 35px, var(--line-faint) 36px);
  border: none;
  box-shadow: none;
  padding: 0;
  min-height: 150px;
  resize: vertical;
  width: 100%;
  display: block;
}
textarea:focus { outline: none; }
textarea::placeholder {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: #a99d8b;
}
textarea.reason-input { min-height: 108px; font-size: 21px; margin-bottom: 6px; }

.reason-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 8px;
}
.reason-rule::before, .reason-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.reason-rule span {
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 16px;
}
select {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border-slip);
  padding: 7px 10px;
  max-width: 100%;
}
.form-head {
  text-align: center;
  font-variant-caps: small-caps;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.field-label {
  display: block;
  margin: 20px 0 8px;
  font-variant-caps: small-caps;
  font-size: 15.5px;
  letter-spacing: 0.06em;
  color: #6a5d4b;
}
.field-label .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--red);
  color: #fdf9f0;
  font-size: 13px;
  font-weight: 600;
  font-variant-caps: normal;
  margin-right: 6px;
  vertical-align: -3px;
}
.field-label .field-sub {
  font-variant-caps: normal;
  font-style: italic;
  font-size: 13.5px;
  letter-spacing: 0;
  color: var(--muted);
  margin-left: 6px;
}
.thought-box {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.45);
  padding: 10px 12px 6px;
}
.thought-box textarea { background: none; min-height: 110px; }
.blank-card .charcount { display: block; text-align: right; margin-top: 4px; }
.blank-card .charcount[hidden] { display: none; }
.form-shelf {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 16px;
}
.charcount { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.charcount.over { color: var(--red); }

.deposit-quote {
  font-style: italic;
  font-size: 16px;
  color: var(--soft);
  text-align: center;
  margin: -14px 0 0;
}

.deposit-rules {
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin: -18px 0 0;
}
.next-note {
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  margin-top: 12px;
}

.vow {
  font-style: italic;
  font-size: 15px;
  text-align: center;
  color: var(--muted);
  line-height: 1.6;
}
.error { color: var(--red); text-align: center; font-style: italic; }

/* kvittunin */
.receipt {
  width: 100%;
  max-width: 560px;
  margin: 40px auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.receipt h2 {
  white-space: normal;
  line-height: 1.6;
  font-size: 17px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.receipt .card { text-align: left; width: 100%; max-width: 470px; margin: 24px auto 0; animation: shelve 0.6s ease both; }
@keyframes shelve {
  from { opacity: 0; transform: translateY(-18px) rotate(var(--tilt, 0deg)) scale(0.98); }
  to { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
}
.receipt-note {
  font-style: italic;
  font-size: 15px;
  color: var(--soft);
  max-width: 460px;
  margin: 14px auto 0;
  line-height: 1.65;
}
.receipt-quote {
  font-style: italic;
  font-size: 16px;
  color: var(--muted);
  max-width: 420px;
  margin: 12px auto 0;
}
.receipt .catalog-big {
  font-family: var(--serif);
  font-variant-caps: small-caps;
  color: var(--red);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  display: block;
  margin-top: 18px;
}
.receipt-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}
.receipt-row .btn-primary,
.receipt-row .btn-quiet { margin: 0; }

.rose-ill {
  width: 30px;
  display: block;
  margin: 0 auto;
}
.receipt-rose { width: 34px; margin: 4px auto 0; }

/* ---------- hillurnar: innbundnu bækurnar ---------- */

.bookshelf {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 0 8px;
}
.spine {
  position: relative;
  display: block;
  text-decoration: none;
  transition: transform 0.18s ease, filter 0.18s ease;
  filter: drop-shadow(0 2px 4px rgba(70, 55, 40, 0.25));
}
.spine:hover {
  transform: translateY(-8px);
  filter: drop-shadow(0 8px 12px rgba(70, 55, 40, 0.3));
  text-decoration: none;
}
.spine img { height: 100%; width: auto; display: block; }
.spine img.flip-x { transform: scaleX(-1); }
.spine-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + 0.5px), -50%);
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #dfbc6d;
  text-shadow: 0 1px 1px rgba(55, 25, 10, 0.6);
  white-space: nowrap;
}
.spine-num {
  position: absolute;
  bottom: 11px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #dfbc6d;
  text-shadow: 0 1px 1px rgba(55, 25, 10, 0.6);
}
.shelf-scroll {
  width: 100%;
}
@media (max-width: 700px) {
  .shelf-scroll {
    overflow-x: auto;
    padding: 14px 0 16px;
    scrollbar-width: thin;
  }
}
.shelf-unit {
  width: max-content;
  min-width: 100%;
  margin: 0 auto;
}
.shelf-board {
  width: min(640px, 100%);
  height: auto;
  aspect-ratio: var(--board-ar, 1240 / 25);
  margin: -1px auto 0;
  background: url('/assets/hillufjol2.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 6px rgba(90, 70, 45, 0.28));
}
.shelf-hint {
  text-align: center;
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  margin-top: 26px;
}

.shelves-quote {
  font-style: italic;
  font-size: 16px;
  color: var(--muted);
  text-align: center;
  margin: -14px 0 34px;
}
.catalog-cabinet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
  width: 100%;
}
.drawer {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(90, 80, 60, 0.12);
  padding: 18px 16px 16px;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.drawer:hover {
  border-color: var(--red);
  box-shadow: 0 4px 14px rgba(90, 80, 60, 0.18);
  text-decoration: none;
}
.drawer .plate { display: block; }
.drawer .code {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 6px;
}
.drawer .name {
  font-size: 18px;
  color: var(--ink);
  line-height: 1.25;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer .count {
  display: block;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.drawer .pull { display: none; }

.shelf-view { width: 100%; margin-top: 40px; flex: 1; display: flex; flex-direction: column; }
.shelf-view .empty-shelf { margin: auto; padding: 30px 0 70px; }
.shelf-view h2 { margin-top: 18px; margin-bottom: 20px; }
.shelf-view .shelves-quote { margin: 0 auto 34px; max-width: 480px; }
.shelf-view .card { margin-bottom: 26px; }
.wood-shelf { display: none; }
.backlink { display: inline-block; font-style: italic; font-size: 15px; color: #55483a; }
.backlink:hover { color: var(--red); }

.empty-shelf {
  text-align: center;
  font-style: italic;
  color: var(--muted);
  padding: 32px 0;
}

/* ---------- leita ---------- */

.lookup {
  width: 100%;
  max-width: 560px;
  margin-top: 40px;
  text-align: center;
}
.lookup form { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.lookup form .btn-primary { margin-top: 0; padding: 11px 22px 9px; font-size: 13px; }
.lookup input {
  font-family: var(--serif);
  font-size: 17px;
  padding: 9px 14px;
  border: 1px solid var(--border-slip);
  background: var(--card);
  color: var(--ink);
  width: min(340px, 100%);
}
.lookup input:focus { outline: 1px solid var(--line); }
.lookup .card { text-align: left; margin-bottom: 26px; }
.search-hint {
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  max-width: 440px;
  margin: 16px auto 28px;
  line-height: 1.6;
}
.search-count {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 20px;
}

/* ---------- glerskápurinn ---------- */

.glass-wrap { width: 100%; max-width: 620px; margin-top: 40px; }
.glass-intro {
  text-align: center;
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  max-width: 460px;
  margin: -14px auto 34px;
  line-height: 1.6;
}
.glass-case {
  position: relative;
  width: 100%;
  padding: 12.6% 12.6% 12.8% 13%;
  background: url('/assets/skapur-mid.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 14px rgba(90, 80, 60, 0.25));
}
.glass-case::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  aspect-ratio: 822 / 470;
  background: url('/assets/skapur-top.png') top / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 1;
}
.glass-case::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  aspect-ratio: 822 / 728;
  background: url('/assets/skapur-bot.png') bottom / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 1;
}
.case-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: rgba(250, 247, 238, 0.85);
  padding: 26px 22px 28px;
  border-radius: 2px;
}
.glass-case .sheet {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 6px;
}
.glass-case .sheet::before { display: none; }
.sheet {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(90, 80, 60, 0.16);
  padding: 24px 28px 26px;
  position: relative;
}
.sheet::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  margin-left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}
.sheet h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  font-variant-caps: small-caps;
  color: #6a5d4b;
  text-align: center;
  margin-bottom: 18px;
}
.rules-sheet .rule { margin-top: 16px; }
.rule-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.rule-nr {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--red);
  white-space: nowrap;
}
.rule-head strong { font-size: 18px; font-weight: 600; color: var(--title); }
.rule-body { font-size: 16px; margin-bottom: 4px; }
.rule-list { margin: 4px 0 6px 26px; font-size: 16px; }
.rule-list li { margin-bottom: 2px; }
.plate-wrap { text-align: center; margin: 0 0 30px; }
.brass-plate-ill {
  width: min(340px, 80%);
  display: inline-block;
  filter: drop-shadow(0 3px 6px rgba(90, 80, 60, 0.3));
}
.brass-plate {
  position: relative;
  display: inline-block;
  background: linear-gradient(180deg, #dcc68c, #b3934f);
  border: 1px solid #8f7439;
  color: #4a3a1d;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  padding: 9px 30px 8px;
  box-shadow: 0 1px 3px rgba(90, 80, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.brass-plate::before, .brass-plate::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -2.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #efe0b4, #8f7439);
  box-shadow: inset 0 -1px 1px rgba(60, 45, 20, 0.5);
}
.brass-plate::before { left: 9px; }
.brass-plate::after { right: 9px; }

.glass-note {
  text-align: center;
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  margin: -16px 0 0;
}

/* ---------- fótur ---------- */

footer {
  margin-top: auto;
  padding: 110px 24px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
footer .rose-ill { margin-top: 0; }
.running-foot {
  width: 100%;
  max-width: 760px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}
.running-foot .rf-text { font-variant-caps: small-caps; letter-spacing: 0.18em; font-size: 13.5px; color: var(--tan); }
.running-foot .rf-pub img {
  width: 66px;
  display: block;
  mix-blend-mode: multiply;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.running-foot .rf-pub:hover img { opacity: 1; }
footer .foot-credit { font-style: italic; font-size: 13.5px; color: var(--muted); margin: 22px 0 0; }
footer .cat { width: 32px; opacity: 0.8; margin-top: 6px; }
footer .cat:hover { opacity: 1; }

@media (max-width: 600px) {
  .running-head { padding: 10px 0 8px; margin-bottom: 22px; }
  .running-head .rh-title, .running-head .rh-buy { font-size: 11px; }
  .running-head .rh-title { letter-spacing: 0.14em; }
  .running-head .rh-page { display: none; }
  nav { flex-wrap: nowrap; }
  nav a { padding: 4px 7px; font-size: 11.5px; letter-spacing: 0.08em; text-indent: 0.08em; white-space: nowrap; }
}
@media (max-width: 540px) {
  body { padding: 0 16px 0; }
  /* stimpillinn fylgir með á síma, bara minni, svo athöfnin haldi sér */
  .stamp { font-size: 9.5px; letter-spacing: 0.1em; padding: 2px 6px; margin: 0 2px 4px 0; }
  .card-foot { flex-wrap: wrap; }
  h2 {
    white-space: normal;
    font-size: 15px;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    gap: 12px;
    line-height: 1.5;
  }
}

/* ---------- borð safnvarðarins: matið ---------- */

.assess { width: 100%; max-width: 560px; margin: 10px auto 0; text-align: center; }
.assess-card {
  position: relative;
  overflow: hidden;
  text-align: left;
  margin: 0 auto;
  max-width: 470px;
  transform: rotate(-0.6deg);
}
/* eyðublaðið er lagt á borð safnvarðarins og sest þar */
@media (prefers-reduced-motion: no-preference) {
  .assess-card { animation: laydown 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes laydown {
  from { opacity: 0; transform: translateY(30px) rotate(1.6deg) scale(1.02); }
  to { opacity: 1; transform: rotate(-0.6deg); }
}
.assess-thought {
  font-family: var(--hand);
  font-size: 24px;
  line-height: 1.45;
  color: var(--hand-ink);
  min-height: 36px;
  margin: 10px 0 14px;
  overflow-wrap: break-word;
}
.assess-reason {
  font-family: var(--hand);
  font-size: 20px;
  line-height: 1.5;
  color: var(--hand-ink);
  min-height: 30px;
  margin: 8px 0 4px;
  overflow-wrap: break-word;
}
.assess-glimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 252, 240, 0.8) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: glimmer 2.8s ease-in-out infinite;
}
@keyframes glimmer { to { transform: translateX(100%); } }
.assess-status {
  margin-top: 28px;
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  min-height: 26px;
}
.status-line { transition: opacity 0.35s ease; }
.assess-dots i {
  display: inline-block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--red);
  margin-left: 3px;
  animation: dotpulse 1.3s infinite;
}
.assess-dots i:nth-child(2) { animation-delay: 0.22s; }
.assess-dots i:nth-child(3) { animation-delay: 0.44s; }
@keyframes dotpulse { 0%, 100% { opacity: 0.15; } 40% { opacity: 1; } }

/* ---------- athöfnin: stimpillinn skellur á spjaldið ---------- */

/* nýstimplað: blekið er ferskt, aðeins ríkulegra en á eldri spjöldum */
.just-stamped .stamp {
  text-shadow: 0 0 0.7px rgba(176, 69, 61, 0.85);
  box-shadow: 0 0 2px rgba(176, 69, 61, 0.28), inset 0 0 5px rgba(176, 69, 61, 0.16);
}

@media (prefers-reduced-motion: no-preference) {
  /* stimpillinn bíður í skúffunni þar til safnnúmerið hefur verið vélritað */
  .just-stamped .stamp { opacity: 0; }
  .just-stamped.stamp-now .stamp {
    animation: stampThud 0.75s cubic-bezier(0.16, 1.4, 0.3, 1) both;
  }
  /* borðið tekur við högginu: spjaldið kippist örlítið til */
  .receipt .just-stamped.stamp-now { animation: deskShake 0.42s ease-out 0.24s; }
}
@keyframes stampThud {
  0% { transform: scale(3.1) rotate(-14deg) translateY(-8px); opacity: 0; filter: blur(2px); }
  38% { transform: scale(0.9) rotate(-2deg); opacity: 1; filter: blur(0); }
  54% { transform: scale(1.07) rotate(-3.6deg); opacity: 0.82; }
  70% { transform: scale(0.98) rotate(-2.7deg); opacity: 0.9; }
  100% { transform: scale(1) rotate(-3deg); opacity: 0.8; }
}
@keyframes deskShake {
  0%, 100% { transform: rotate(var(--tilt, 0deg)); }
  28% { transform: rotate(var(--tilt, 0deg)) translate(0.6px, 2px); }
  58% { transform: rotate(var(--tilt, 0deg)) translate(-0.5px, -1px); }
}

/* sviðsett birting: eitt í einu, safnvörðurinn flýtir sér ekki */
.stage { opacity: 0; transform: translateY(12px); transition: opacity 0.7s ease, transform 0.7s ease; }
.stage.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .stage { opacity: 1; transform: none; transition: none; }
}

/* gagnleg hugsun: eyðublaðið rétt vinsamlega til baka yfir borðið, án stimpils */
.returned-card {
  text-align: left;
  width: 100%;
  max-width: 470px;
  margin: 24px auto 0;
  transform: rotate(-0.4deg);
}
.returned-card .thought { min-height: 72px; }
@media (prefers-reduced-motion: no-preference) {
  .returned-card { animation: handback 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
}
@keyframes handback {
  from { opacity: 0; transform: translateY(-24px) rotate(0.9deg) scale(1.015); }
  to { opacity: 1; transform: rotate(-0.4deg); }
}

/* úrskurður safnvarðarins og hlý ábending */
.ummaeli {
  max-width: 470px;
  margin: 20px auto 0;
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--soft);
}
.ummaeli-label {
  display: block;
  font-style: normal;
  font-family: var(--serif);
  font-variant-caps: small-caps;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 5px;
}
.care-note {
  max-width: 470px;
  margin: 22px auto 0;
  padding: 13px 18px 12px;
  border: 1px solid var(--border-slip);
  background: var(--card);
  font-size: 15px;
  line-height: 1.6;
  color: var(--soft);
}
.returned .btn-primary { margin-top: 28px; }

/* ---------- fleiri hlutir úr bókinni ---------- */

/* laugardagsrósin á tröppunum */
.sat-rose {
  position: absolute;
  left: 5%;
  bottom: 3%;
  width: 11%;
}
.sat-rose img { width: 100%; display: block; transform: rotate(104deg); transform-origin: 50% 50%; }


/* fyrsta tilkynningin í glerskápnum */
.first-slip {
  width: 220px;
  margin: 0 auto;
  padding: 14px 18px 12px;
  background: #f7f2e2;
  transform: rotate(0.6deg);
}
.first-slip p {
  text-align: center;
  font-style: italic;
  font-size: 17px;
  color: var(--soft);
}

/* klukkan á veggnum tifar yfir borðinu á meðan matið fer fram */
.assess-clock {
  position: relative;
  width: 88px;
  margin: 0 auto 22px;
  filter: drop-shadow(0 3px 6px rgba(70, 55, 40, 0.3));
}
.assess-clock img { width: 100%; display: block; }
.assess-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* miðinn sem birtist yfir kilinum */
.spine { overflow: visible; }
.spine-tip {
  position: absolute;
  bottom: var(--tipbase, 270px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 230px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 3px 10px rgba(90, 80, 60, 0.2);
  padding: 12px 16px 11px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 20;
}
.spine-tip::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  margin-left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
}
.spine:hover .spine-tip, .spine:focus-visible .spine-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tip-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  color: #6a5d4b;
}
.tip-count {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-top: 2px;
}
.tip-quote {
  display: block;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--soft);
  margin-top: 8px;
}
@media (hover: none) { .spine-tip { display: none; } }

/* ---------- efnisskrá hillanna ---------- */

.efnisskra-toggle {
  background: none;
  border: none;
  font-style: italic;
  font-size: 15px;
  color: #55483a;
  margin-top: 20px;
  cursor: pointer;
}
.efnisskra-toggle:hover { color: var(--red); text-decoration: underline; }
.efnisskra-toggle[aria-expanded="true"] { color: var(--red); }
.skra-links { display: flex; gap: 30px; justify-content: center; }
a.efnisskra-toggle { text-decoration: none; }

/* ---------- spjaldskráin ---------- */

.skra-count {
  font-variant-caps: small-caps;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 24px;
}
.skra-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  max-width: 880px;
  margin: 36px 0 26px;
}
.skra-chip {
  background: var(--slip);
  border: 1px solid var(--border-slip);
  font-family: var(--serif);
  font-variant-caps: small-caps;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #55483a;
  padding: 6px 13px 5px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.skra-chip:hover { border-color: var(--red); color: var(--red); }
.skra-chip.active { border-color: var(--red); color: var(--red); }
.skra-list {
  width: min(1120px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: 24px;
  align-items: start;
}
.skra-list .card { text-align: left; }
.skra-more { margin: 30px 0 10px; text-align: center; }
.skra-more .btn-quiet { margin-top: 0; }

.efnisskra {
  width: 100%;
  max-width: 540px;
  margin: 18px auto 0;
  animation: pagein 0.35s ease both;
}
.ef-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-faint);
}
.ef-row:last-child { border-bottom: none; }
.ef-code {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--red);
  font-weight: 700;
  white-space: nowrap;
}
.ef-text { font-size: 15px; }

a.ef-row { color: var(--ink); text-decoration: none; }
a.ef-row:hover { color: var(--red-link); text-decoration: none; }
a.ef-row:hover .ef-text { text-decoration: underline; }

/* ---------- útgefandinn ---------- */

footer { position: relative; width: 100%; }
footer .cat-ill {
  position: absolute;
  left: 26px;
  bottom: 12px;
  width: 100px;
  mix-blend-mode: multiply;
  opacity: 0.92;
  -webkit-mask-image: radial-gradient(closest-side, #000 68%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 68%, transparent 100%);
}
body.has-ferd footer .cat-ill { display: none; }
@media (max-width: 700px) {
  footer .cat-ill { width: 58px; left: 12px; bottom: 8px; }
  .running-foot .rf-text { font-size: 11px; letter-spacing: 0.14em; }
  .running-foot .rf-pub img { width: 52px; }
}


/* ---------- Ferdinand í eigin persónu ---------- */


.empty-shelf .ferd {
  width: 220px;
  max-width: 70%;
  display: block;
  margin: 0 auto 16px;
  mix-blend-mode: multiply;
  opacity: 0.95;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}

/* ---------- blaðsíðuhornið: flett á næstu síðu ---------- */

.page-corner {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 72px;
  height: 72px;
  z-index: 60;
  text-decoration: none;
  transition: width 0.25s ease, height 0.25s ease;
}
.page-corner:hover { width: 94px; height: 94px; text-decoration: none; }
/* undir horninu glittir i naestu ork, ekki myrkur */
.page-corner .pc-under {
  position: absolute;
  inset: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: linear-gradient(315deg, #ddd5c1 0%, #e9e3d2 45%, #efe9da 100%);
}
/* flipinn sjalfur: bakhlid bladsins med mjukri kuervu vid brotid */
.page-corner .pc-flap {
  position: absolute;
  inset: 0;
  filter: drop-shadow(-2px -2px 3px rgba(70, 60, 45, 0.28));
}
.page-corner .pc-flap::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(135deg,
    #fbf7eb 0%,
    #fdfaf2 46%,
    #f3edda 68%,
    #e2d8bf 86%,
    #fdf9ec 97%,
    #fffef9 100%);
}
/* blaðsíðutalan er prentuð á bakhlið arkarinnar: talan á naestu siðu */
.pc-num {
  position: absolute;
  left: 21%;
  top: 23%;
  transform: rotate(-45deg);
  font-style: italic;
  font-size: 13px;
  color: #a2977f;
  z-index: 2;
  pointer-events: none;
}
.page-corner.turning {
  width: 170px;
  height: 170px;
  transition: width 0.22s ease-in, height 0.22s ease-in;
}
@media (prefers-reduced-motion: reduce) {
  .page-corner, .page-corner.turning { transition: none; }
}
@media (max-width: 700px) {
  .page-corner { width: 52px; height: 52px; }
  .page-corner:hover { width: 52px; height: 52px; }
  .pc-num { font-size: 10.5px; }
  footer .foot-credit { padding: 0 52px; }
}