/* ==========================================================================
   Poetens hjärta

   Rå, inte prydlig. Obleksmutsigt papper, oxblod och nästan svart bläck.
   Typografin är fet grotesk mot maskinskrift, aldrig kalligrafi. Texten
   lägger sig över bilden i stället för att ställa sig snällt under den.
   Rörelserna klipper och glider - inga studsar, inget som pillar.
   ========================================================================== */

:root {
  /* Papper. Kallare och smutsigare än linne. */
  --papper: #eae7e0;
  --papper-djup: #d8d3c9;

  /* Bläck */
  --black: #16130f;
  --black-ljus: #6a635a;

  /* Oxblod. Intorkat, inte färskt. */
  --blod: #6e1014;
  --blod-djup: #470a0d;
  /* Oxblod som syns mot svart. */
  --blod-ljus: #a8383d;

  /* Mörkret på sluthero:t. Uppmätt ur målningens nederkant, så att skarven
   * mellan bild och kod inte syns. */
  --natt: #020406;

  --maskin: 'Space Mono', 'Courier New', monospace;

  --sidhuvud-hojd: 4rem;
  /* Nästan linjär. Rörelsen ska kännas mekanisk, inte omfamnande. */
  --rak: cubic-bezier(0.2, 0, 0.1, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papper);
  color: var(--black);
  font-family: var(--maskin);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Kornet ligger överst över allt och gör ytan ojämn. Utan det blir de stora
 * pappersfälten för rena och sidan ser digital ut. */
.korn {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='180' height='180' filter='url(%23b)'/></svg>");
}

/* --- Sidhuvud ------------------------------------------------------------ */

.sidhuvud {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--sidhuvud-hojd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  pointer-events: none;
  transition: opacity 0.35s var(--rak);
}

/* På startskärmen vore sidhuvudet en dubblett av den stora titeln. */
.sidhuvud.ar-dold { opacity: 0; }

.sidhuvud__titel,
.sidhuvud__namn {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
}

.sidhuvud__titel { color: var(--blod); }

.sidhuvud__namn {
  font-weight: 400;
  color: var(--black-ljus);
}

/* --- Rullningen ---------------------------------------------------------- */

.rulle {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.rulle::-webkit-scrollbar { display: none; }

.dikt {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: var(--papper-djup);
}

.dikt picture {
  display: block;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s var(--rak);
}
.dikt.ar-synlig picture { opacity: 1; }

.dikt__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Knappt märkbar glidning. Ingen zoom fram och tillbaka - det ser
   * tillgjort ut. */
  animation: glid 40s linear infinite alternate;
}

@keyframes glid {
  from { transform: scale(1.04) translate3d(-0.8%, 0, 0); }
  to   { transform: scale(1.04) translate3d(0.8%, 0, 0); }
}

/* --- Starthero ----------------------------------------------------------- */

.start {
  display: grid;
  place-items: center;
  padding: var(--sidhuvud-hojd) 1.5rem 5rem;
  background: var(--papper);
}

.start__inre {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.start__hjarta {
  /* Motivet är bara 257 px brett i originalet. Större än så här och det
   * börjar synas att det är uppskalat. */
  width: clamp(6.5rem, 20vw, 9.5rem);
  height: auto;
  /* Fotot har vit botten. multiply släcker det vita mot pappret. */
  mix-blend-mode: multiply;
  filter: contrast(1.08) saturate(0.92);
  opacity: 0;
  /* Slaget ligger i transform och flyttar inget i layouten, så titeln och
   * blodet under står stilla medan hjärtat dunkar. */
  transform-origin: 50% 55%;
  animation: trada-fram 0.9s var(--rak) 0.1s forwards,
             dunka 1.1s ease-out 1s infinite;
}

@keyframes trada-fram {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Ett riktigt slag är dubbelt: ett kraftigt "dunk" och ett svagare direkt
 * efter, sedan vila. Ungefär 55 slag i minuten - ett lugnt hjärta. */
@keyframes dunka {
  0%   { transform: scale(1); }
  10%  { transform: scale(1.09); }
  20%  { transform: scale(0.99); }
  30%  { transform: scale(1.05); }
  45%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* Titeln lägger sig över hjärtat i stället för under det. Överlappet är
 * poängen - det ska se ut som tryck på tryck, inte som en bildtext. */
.start__titel {
  /* Titeln är en målad bild. Negativ marginal drar upp den så att den
   * överlappar hjärtat - tryck på tryck, inte bildtext. */
  margin: -2.5% 0 0;
  width: min(88vw, 62rem);
  line-height: 0;
}

.start__titel picture { display: block; }

.start__titel img {
  display: block;
  width: 100%;
  height: auto;
  /* Ingen blandning här. Målningens vita botten är bortnycklad, så den
   * ligger redan fritt mot pappret - och multiply hade släckt glansdagrarna
   * i färgen, som är halva poängen med att den ser våt ut. */
  opacity: 0;
  animation: trada-fram 0.8s var(--rak) 0.45s forwards;
}

/* Bloddukens läge sätts av js/blod.js, som mäter upp titeln. Den ligger
 * över titeln men under kornet, och släpper igenom all interaktion. */
.blod {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.start__namn {
  margin: 2.25rem 0 0;
  /* En antikva under den målade titeln - samma snitt som yoga-sidans
   * rubriker. Mindre spärrning än maskinskriften hade: en antikva faller
   * isär om bokstäverna står för glest. */
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  /* Samma indrag som spärrningen, annars hamnar namnet ur mitt: spärrningen
   * läggs efter varje bokstav, även den sista. */
  text-indent: 0.22em;
  text-transform: uppercase;
  /* Något mörkare än den gråa maskinskriften, eftersom snittets tunna linjer
   * annars blir för bleka. */
  color: rgba(22, 19, 15, 0.72);
}

.start__namn span {
  display: inline-block;
  opacity: 0;
  animation: trada-fram 0.6s var(--rak) 1s forwards;
}

/* --- Sluthero ------------------------------------------------------------ */

/* Två skärmar högt: målningen överst, sedan mörker som fortsätter där
 * bilden slutar. Båda delarna är snappunkter. */
.slut {
  height: auto;
  background: var(--natt);
}

.slut .slut__bild {
  position: relative;
  height: 100dvh;
}

.slut .slut__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  /* Något mörkare än originalet, så att målningen sjunker in i mörkret
   * under den i stället för att lysa över det. */
  filter: brightness(0.78);
}

/* På breda skärmar beskärs bildens nederkant, och då slutar den inte längre
 * i svart. Tonen gör att den ändå alltid glider över i mörkret. */
.slut .slut__bild::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(to bottom, rgba(2, 4, 6, 0), var(--natt));
  pointer-events: none;
}

.slut__morker {
  position: relative;
  overflow: hidden;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 0 1.5rem;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Ordet är skrivet i blod - en bild med vit botten bortnycklad. Det står
 * redan där när man rullar ner i mörkret, utan intoning. Blodet som droppar
 * från det ritas av js/blod.js. */
.slut__ord {
  position: relative;
  z-index: 1;
  margin: 0;
  width: min(82vw, 46rem);
  line-height: 0;
}

/* Blodduken under ordet. multiply släcker rött mot svart, så här ritas den
 * rakt av. Ordet står redan där, så blodet behöver inte vänta på det - bara
 * ett ögonblick, så att dropparna börjar rinna efter att man kommit ner i
 * mörkret och inte redan medan man rullar. */
.blod--morkt {
  mix-blend-mode: normal;
  opacity: 0;
  transition: opacity 2.5s var(--rak);
}
.slut__morker.ar-synlig .blod--morkt {
  opacity: 1;
  transition-delay: 0.8s;
}

.slut__ord picture { display: block; }

.slut__ord img {
  display: block;
  width: 100%;
  height: auto;
}

/* Reglagen mot svart. Räknaren döljs: sluthero:t är ingen dikt. */
.ar-morkt .sidhuvud__titel { color: var(--blod-ljus); }
.ar-morkt .sidhuvud__namn { color: var(--papper-djup); }
.ar-morkt .raknare { opacity: 0; }

/* --- Bläddring ----------------------------------------------------------- */

/* En vissen gren i högerkanten, med en knöl för varje stopp. En bloddroppe
 * hänger i knölen för den dikt som syns, och glider längs grenen när man
 * bläddrar. Grenen och droppen ritas av js/gren.js - grenens form följer hur
 * många stopp sidan har.
 *
 * Rörelsen här är mjuk med flit, till skillnad från resten av sidan som
 * klipper. Det är den enda delen man själv styr, och den ska kännas som att
 * bläddra i en bok, inte som att byta kanal. */
.prickar {
  --mjuk: cubic-bezier(0.45, 0.05, 0.2, 1);
  /* Barken. Torrt gråbrunt, som en gren som legat ute vintern över. */
  --bark-mork: #3b332d;
  --bark: #6f6358;
  --bark-ljus: #a39585;
  --bark-kontur: rgba(234, 231, 224, 0.55);
  position: fixed;
  z-index: 40;
  right: clamp(0.4rem, 1.6vw, 1rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1.25rem 0;
}

/* Mot svart ljusnar barken och konturen blir mörk, annars försvinner grenen. */
.ar-morkt .prickar {
  --bark-mork: #5a4f46;
  --bark: #8e8174;
  --bark-ljus: #c2b4a4;
  --bark-kontur: rgba(2, 4, 6, 0.7);
}

.gren {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 44px;
  margin-left: -22px;
  overflow: visible;
  pointer-events: none;
  /* En tunn kontur, så att grenen syns även över ett fotografi som är lika
   * mörkt som barken. drop-shadow följer formen, även de små kvistarna. */
  filter: drop-shadow(0 0 0.6px var(--bark-kontur));
}
.gren__stam,
.gren__kvist { fill: url(#gren-yta); }
.gren__knol { fill: var(--bark-mork); }
.gren__ljus {
  fill: none;
  stroke: var(--bark-ljus);
  stroke-width: 0.5;
  stroke-linecap: round;
  opacity: 0.7;
}
/* Gradientens färger sätts här och inte i SVG:n, så att de kan bytas mot
 * svart med variablerna ovan. */
.gren stop.ett { stop-color: var(--bark-mork); }
.gren stop.tva { stop-color: var(--bark); }
.gren stop.tre { stop-color: var(--bark-ljus); }

/* Knappen syns inte själv - knölen i grenen är det man ser. Den är mycket
 * större än knölen, så att den går att träffa med ett finger. */
.prickar button {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
/* Under pekaren tänds en tunn ring kring knölen. */
.prickar button::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid var(--bark);
  opacity: 0;
  transform: scale(0.6);
  transition: transform 0.8s var(--mjuk), opacity 0.8s var(--mjuk);
}
.prickar button:hover::before {
  opacity: 0.6;
  transform: scale(1);
}
.prickar button[aria-current='true']::before { opacity: 0; }
.prickar button:focus-visible {
  outline: 1px solid var(--blod);
  outline-offset: 1px;
}

/* Droppen. Ytterdelen glider längs grenen. Innerdelen hänger i knölen och
 * gungar svagt med spetsen som fästpunkt - två rörelser som annars hade
 * skrivit över varandras transform. */
.prickar__droppe {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  pointer-events: none;
  transition: transform 1.2s var(--mjuk);
}
/* Vid sidans start ska droppen hänga på sin plats, inte glida dit uppifrån. */
.prickar__droppe.utan-glid { transition: none; }

.prickar__droppe svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 18px;
  /* Spetsen fästs strax ovanför knölens mitt, resten hänger under. */
  margin: -3px 0 0 -6.5px;
  overflow: visible;
  transform-origin: 50% 0;
  animation: hanga 5s ease-in-out infinite;
}

/* Tyngden drar den en aning nedåt och den smalnar av, sedan tillbaka. */
@keyframes hanga {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(0.97, 1.05); }
}

/* Mot svart syns ingen skugga på pappret, men en svag glöd i blodet håller
 * droppen synlig. */
.ar-morkt .prickar__droppe .droppe__skugga { display: none; }
.ar-morkt .prickar__droppe svg { filter: drop-shadow(0 0 2.5px rgba(168, 56, 61, 0.35)); }

/* --- Räknare ------------------------------------------------------------- */

/* Lågmäld: tunn stil, ett streck i stället för snedstreck, inga nollor
 * framför. På startskärmen finns ännu ingen dikt att räkna. */
.raknare {
  --mjuk: cubic-bezier(0.45, 0.05, 0.2, 1);
  position: fixed;
  z-index: 40;
  right: clamp(1rem, 4vw, 2.5rem);
  bottom: clamp(1.25rem, 4vh, 2rem);
  margin: 0;
  display: flex;
  align-items: center;
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--black-ljus);
  opacity: 0.8;
  transition: opacity 0.9s var(--mjuk);
}
.raknare.ar-dold { opacity: 0; }
.raknare__nu { color: var(--blod); }
.raknare__streck {
  width: 1.5rem;
  height: 1px;
  margin: 0 0.6rem;
  background: currentColor;
  opacity: 0.45;
}

/* --- Fot ----------------------------------------------------------------- */

/* Samma uppbyggnad och typografi som foten på tornq.com/yoga: ordmärke och
 * en större rad överst, kolumner med små spärrade rubriker, en nedre rad.
 * Inter i tunn stil, samma storlekar och avstånd. Yoga-sidans visningssnitt
 * TT Commons är licensierat och faller där tillbaka på Inter - så även här.
 *
 * Helt svart, och utan korn: se .vid-foten längre ned. */
.fot {
  --fot-text: rgba(234, 231, 224, 0.7);
  --fot-blek: rgba(234, 231, 224, 0.4);
  --fot-linje: rgba(234, 231, 224, 0.14);
  --fot-snitt: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  scroll-snap-align: end;
  background: #000;
  color: var(--fot-text);
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 5rem) clamp(1.75rem, 3vw, 2.5rem);
  font: 300 0.8125rem/1.85 var(--fot-snitt);
  letter-spacing: 0.004em;
}

.fot p { margin: 0; }

.fot__topp {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Ordmärket: versaler med vid spärrning, andra raden mindre och blekare. */
.fot__marke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--papper);
  font: 400 1.05rem/1 var(--fot-snitt);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  cursor: pointer;
}
.fot__marke-b {
  margin-top: 0.55rem;
  font-size: 0.8rem;
  letter-spacing: 0.42em;
  opacity: 0.55;
}

.fot__rad {
  /* Samma antikva som rubrikerna och namnet på startsidan. Snittet har låga
   * gemener och ser mindre ut än Inter i samma grad, så graden är större. */
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.9vw, 2.05rem);
  font-weight: 500;
  line-height: 1.2;
  color: rgba(234, 231, 224, 0.66);
}

.fot__kolumner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2.5rem 2rem;
  border-top: 1px solid var(--fot-linje);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.fot__rubrik {
  margin: 0 0 0.9rem;
  /* Samma antikva som namnet på startsidan. Den är tunnare än Inter och
   * behöver både större grad och lite ljusare färg för att hålla mot svart -
   * i Inter-storleken 0.625rem blir den hårstrån. */
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(234, 231, 224, 0.58);
}

.fot__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

/* Knappar som ser ut som länkar - de gör saker på sidan, som att öppna
 * gästboken, och är därför knappar. Som på yoga-sidan blir de ljusa under
 * pekaren. */
.fot__lank {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  /* Mejllänken är en riktig länk och skulle annars få en understrykning
   * som ingen annan länk i foten har. */
  text-decoration: none;
  /* En lång adress ska kunna brytas i en smal kolumn. */
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* En länk mitt i löptext syns inte som länk utan en linje under. Samma
 * hårfina linje som yoga-sidan använder för sina länkar i text. */
.fot__lank--i-text { border-bottom: 1px solid rgba(234, 231, 224, 0.25); }

.fot__lank:hover,
.fot__lank:focus-visible,
.fot__marke:hover,
.fot__marke:focus-visible {
  color: var(--papper);
}
.fot__lank--i-text:hover,
.fot__lank--i-text:focus-visible { border-color: var(--papper); }
.fot__lank:focus-visible,
.fot__marke:focus-visible {
  outline: 1px solid rgba(234, 231, 224, 0.5);
  outline-offset: 3px;
}

.fot__slut {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--fot-linje);
  padding-top: 1.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--fot-blek);
}

/* Kornet blandas med multiply och syns därför aldrig mot helt svart. Men över
 * fotens ljusa text blir det ett brus - så det tonas bort när foten är framme.
 * Klassen sätts av js/app.js. Foten lyfts inte över kornet i stället, eftersom
 * den då skulle täcka tråden i högerkanten. */
.korn { transition: opacity 0.6s var(--rak); }
.vid-foten .korn { opacity: 0; }

@media (max-width: 700px) {
  /* Luft till höger, så att texten inte hamnar under tråden i kanten. */
  .fot { padding-right: 2.75rem; }
}
/* --- Gästbok ------------------------------------------------------------- */

/* Fliken är ett förseglat brev som sticker ut ur sidans högerkant, med ett
 * sigill i blod och ett präglat hjärta. Under pekaren dras det lite längre
 * ut. När man klickar bryts sigillet och fliken fälls upp - sedan glider
 * panelen in (js/gastbok.js). Stängs panelen förseglas brevet igen: fliken
 * fälls ner först, och sigillet sluts efter den. */
.gastbok-flik {
  --brev-rorelse: cubic-bezier(0.45, 0.05, 0.2, 1);
  position: fixed;
  z-index: 45;
  right: 0;
  top: calc(var(--sidhuvud-hojd) + 1.25rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  padding: 0.25rem 0 0.25rem 0.5rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.gastbok-flik:focus-visible {
  outline: 1px solid var(--blod);
  outline-offset: 2px;
}

/* Brevet sticker ut ur kanten: en bit av det ligger utanför sidan. */
.brev {
  display: block;
  width: 64px;
  height: 44px;
  margin-right: -14px;
  overflow: visible;
  transform: rotate(-4deg);
  filter: drop-shadow(0 3px 4px rgba(22, 19, 15, 0.28));
  transition: transform 0.7s var(--brev-rorelse), margin-right 0.7s var(--brev-rorelse);
}
.gastbok-flik:hover .brev,
.gastbok-flik:focus-visible .brev {
  margin-right: 0.35rem;
  transform: rotate(-2deg) translateY(-2px);
}

.brev__veck {
  fill: none;
  stroke: rgba(22, 19, 15, 0.16);
  stroke-width: 0.8;
}

/* Fliken fälls kring sin överkant. transform-box: fill-box gör att
 * transform-origin räknas mot fliken själv och inte mot hela SVG:n. */
.brev__flik {
  stroke: rgba(22, 19, 15, 0.12);
  stroke-width: 0.6;
  transform-box: fill-box;
  transform-origin: 50% 0;
  transition: transform 0.45s var(--brev-rorelse);
}

/* Sigillet sluts först när fliken hunnit ner - därav fördröjningen här,
 * som bara gäller på vägen tillbaka. */
.brev__halva,
.brev__hjarta {
  transform-box: fill-box;
  transition: transform 0.4s var(--brev-rorelse), opacity 0.4s var(--brev-rorelse);
  transition-delay: 0.35s;
}
.brev__halva--v { transform-origin: 100% 100%; }
.brev__halva--h { transform-origin: 0 100%; }

/* Hjärtat är präglat i vaxet: mörkare än vaxet, med en ljus kant där ljuset
 * fångas. */
.brev__hjarta {
  fill: #5a0d11;
  stroke: rgba(255, 190, 180, 0.28);
  stroke-width: 0.5;
}

/* Sigillet bryts: halvorna faller isär och slocknar, sedan fälls fliken upp. */
.gastbok-flik.ar-oppnad .brev__halva,
.gastbok-flik.ar-oppnad .brev__hjarta {
  opacity: 0;
  transition-delay: 0s;
}
.gastbok-flik.ar-oppnad .brev__halva--v { transform: translate(-3px, 2px) rotate(-24deg); }
.gastbok-flik.ar-oppnad .brev__halva--h { transform: translate(3px, 2px) rotate(24deg); }
.gastbok-flik.ar-oppnad .brev__flik {
  transform: scaleY(-1);
  transition-delay: 0.18s;
}

.gastbok-flik__text {
  padding-right: 0.9rem;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--blod);
  white-space: nowrap;
  transition: color 0.4s var(--brev-rorelse);
}
.gastbok-flik:hover .gastbok-flik__text { color: var(--blod-djup); }

/* Mot svart: ljusare text och en djupare skugga under brevet. */
.ar-morkt .gastbok-flik__text { color: var(--blod-ljus); }
.ar-morkt .brev { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)); }

@media (max-width: 700px) {
  .brev {
    width: 54px;
    height: 37px;
  }
  .gastbok-flik__text { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .brev,
  .brev__flik,
  .brev__halva,
  .brev__hjarta { transition: none !important; }
}

.gastbok-skugga {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(22, 19, 15, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--rak);
}
.gastbok-oppen .gastbok-skugga {
  opacity: 1;
  pointer-events: auto;
}

/* Panelen. visibility i stället för display: none, så att den kan glida -
 * och så att dolda fält varken kan få fokus eller läsas upp. Fördröjningen
 * på visibility låter den glida ut innan den försvinner. */
.gastbok {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(28rem, 100vw);
  display: flex;
  flex-direction: column;
  /* Panelen klipper inte: grenen längs kanten sticker ut över sidan bakom.
   * Det är lagret innanför, .gastbok__innehall, som rullar. */
  overflow: visible;
  background: var(--papper);
  box-shadow: -1.5rem 0 3rem rgba(22, 19, 15, 0.18);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.45s var(--rak), visibility 0s linear 0.45s;
}
.gastbok.ar-oppen {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.45s var(--rak), visibility 0s;
}

.gastbok__innehall {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Vänsterkanten: en vissen gren, ritad av js/gren.js. Samma torra bark som
 * grenen i bläddringen. Den ligger över panelens kant och sticker ut en bit
 * över sidan bakom. */
.kantgren {
  /* Mörkare än bläddringsgrenen: den här ligger både mot panelens papper och
   * mot den dämpade sidan bakom, och måste hålla mot båda. */
  --bark-mork: #2f2823;
  --bark: #5c5047;
  --bark-ljus: #968776;
  position: absolute;
  z-index: 2;
  top: 0;
  left: -22px;
  width: 48px;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(1px 2px 2.5px rgba(22, 19, 15, 0.38));
}
.kantgren__stam,
.kantgren__kvist { fill: url(#kantgren-yta); }
.kantgren__knol { fill: var(--bark-mork); }
.kantgren__ljus {
  fill: none;
  stroke: var(--bark-ljus);
  stroke-width: 0.6;
  stroke-linecap: round;
  opacity: 0.7;
}
.kantgren stop.ett { stop-color: var(--bark-mork); }
.kantgren stop.tva { stop-color: var(--bark); }
.kantgren stop.tre { stop-color: var(--bark-ljus); }

/* Droppen i kvisten gungar som den i bläddringen, med spetsen som fästpunkt. */
.kantgren__svaj {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: hanga 5s ease-in-out infinite;
}

.gastbok__topp {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  background: var(--papper);
  border-bottom: 1px solid var(--papper-djup);
}

.gastbok__rubrik {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--blod);
}

.gastbok__stang {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.gastbok__stang:hover { color: var(--blod); }

.gastbok__form {
  position: relative;
  padding: 1.5rem;
  border-bottom: 1px solid var(--papper-djup);
}

.gastbok__form label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--black-ljus);
}

.gastbok__form input,
.gastbok__form textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--papper-djup);
  border-radius: 0;
  background: #f3f1ec;
  color: var(--black);
  font: 400 0.85rem/1.5 var(--maskin);
  letter-spacing: 0;
  text-transform: none;
  resize: vertical;
}
.gastbok__form input:focus-visible,
.gastbok__form textarea:focus-visible {
  outline: 2px solid var(--blod);
  outline-offset: 1px;
}

.gastbok__form button {
  padding: 0.8rem 1.2rem;
  border: 0;
  background: var(--blod);
  color: var(--papper);
  font: 700 0.64rem/1 var(--maskin);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
}
.gastbok__form button:hover { background: var(--blod-djup); }
.gastbok__form button[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* Fällan för robotar. Flyttad utanför bild i stället för display: none -
 * en del robotar hoppar över fält som är dolda på det sättet. */
.gastbok__falla {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.gastbok__besked {
  min-height: 1.2em;
  margin: 0.9rem 0 0;
  font-size: 0.72rem;
  color: var(--black-ljus);
}
.gastbok__besked.ar-fel { color: var(--blod); }

.gastbok__lista {
  margin: 0;
  padding: 0.25rem 1.5rem 3rem;
  list-style: none;
}
.gastbok__lista li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--papper-djup);
}
.gastbok__lista li.ar-ny { animation: trada-fram 0.6s var(--rak); }

.gastbok__namn {
  margin: 0 0 0.15rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

.gastbok__tid {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--black-ljus);
}

/* Radbrytningar i hälsningen behålls. Långa ord utan mellanslag bryts, så
 * att ingen kan skjuta panelen ur led med en enda lång rad. */
.gastbok__text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.gastbok__lista li.gastbok__tomt {
  border-bottom: 0;
  font-size: 0.78rem;
  color: var(--black-ljus);
}

/* --- Mindre skärmar ------------------------------------------------------ */

@media (max-width: 700px) {
  .sidhuvud__namn { display: none; }
  /* Smal nog att tråden i högerkanten inte skär genom titelns sista a. */
  .start__titel { width: 86vw; margin-top: -4%; }
}

/* --- Lugn rörelse -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dikt__bild,
  .start__hjarta,
  .start__titel img,
  .start__namn span { animation: none; }
  .dikt picture,
  .start__hjarta,
  .start__titel img,
  .start__namn span { opacity: 1; }
  * { transition-duration: 0.01ms !important; }
  /* Regeln ovan ger varje element en övergång på alla egenskaper - även den
   * synlighet som panelens innehåll ärver. Innehållet blir då synligt först
   * när en egen övergång hunnit klart, och en webbläsare som ritar få
   * bildrutor kan lämna det dolt fast panelen syns. Inuti panelen ska
   * synligheten följa panelen direkt. */
  .gastbok * { transition: none !important; }
  .prickar__droppe svg { animation: none; }
  .kantgren__svaj { animation: none; }
}