@import url("https://fonts.googleapis.com/css2?family=Averia+Libre:ital,wght@0,400;0,700;1,400&family=Averia+Sans+Libre:ital,wght@0,400;0,700;1,400&family=Huninn&family=Syne+Mono&display=swap");

:root{
  --bone:#f1eed9;
  --bone-deep:#dcdcc3;
  --water:#9bcfc2;
  --water-deep:#176f68;
  --bruise:#57417d;
  --bruise-deep:#29213f;
  --honey:#d3a34d;
  --pollen:#d7ef68;
  --rose:#cc6e9f;
  --ink:#28233a;
  --muted:#5a665e;
  --line:rgba(53,77,70,.25);
  --paper:rgba(247,244,221,.84);
  --paper-strong:rgba(250,247,226,.94);
  --body:"Averia Sans Libre","Huninn",system-ui,sans-serif;
  --poem:"Averia Libre","Huninn",Georgia,serif;
  --mono:"Syne Mono","Huninn",ui-monospace,monospace;
  --shadow:0 22px 64px rgba(36,51,45,.17), inset 0 1px 0 rgba(255,255,242,.72);
  --soft-shadow:0 9px 24px rgba(41,55,48,.12), inset 0 1px 0 rgba(255,255,242,.62);
}

*{box-sizing:border-box}

html{
  min-height:100%;
  color:var(--ink);
  background:var(--bone-deep);
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  color:var(--ink);
  font-family:var(--body);
  background:
    radial-gradient(ellipse at 11% 7%, rgba(162,220,202,.72), transparent 31rem),
    radial-gradient(ellipse at 91% 24%, rgba(117,83,169,.22), transparent 30rem),
    radial-gradient(ellipse at 23% 94%, rgba(211,163,77,.25), transparent 27rem),
    linear-gradient(156deg, #c9d8c2 0%, var(--bone) 45%, #dfd2c5 100%);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.36;
  background:
    linear-gradient(111deg, transparent 0 19%, rgba(40,69,60,.045) 19.2% 19.7%, transparent 20% 100%),
    linear-gradient(27deg, transparent 0 68%, rgba(83,61,123,.05) 68.2% 68.7%, transparent 69% 100%);
}

a{color:inherit}

.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:20;
  padding:8px 12px;
  color:var(--bone);
  background:var(--bruise-deep);
  border-radius:8px 14px 10px 12px;
  transform:translateY(-160%);
}

.skip-link:focus{transform:translateY(0)}

.ambient{
  position:fixed;
  z-index:-1;
  pointer-events:none;
  filter:blur(.2px);
}

.ambient-a{
  top:9vh;
  right:-80px;
  width:210px;
  height:155px;
  border-radius:54% 46% 63% 37% / 42% 58% 42% 58%;
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,238,.82), transparent 0 11%, transparent 12%),
    linear-gradient(143deg, rgba(215,239,104,.66), rgba(77,190,171,.62) 46%, rgba(103,73,151,.58));
  box-shadow:inset 12px 10px 18px rgba(255,255,232,.46), inset -15px -18px 28px rgba(76,50,113,.22), 0 22px 44px rgba(46,67,57,.15);
  animation:drift-a 13s ease-in-out infinite alternate;
}

.ambient-b{
  bottom:-72px;
  left:-46px;
  width:175px;
  height:190px;
  border-radius:63% 37% 44% 56% / 38% 61% 39% 62%;
  border:1px solid rgba(86,64,125,.22);
  background:linear-gradient(152deg, rgba(206,112,160,.28), rgba(221,164,72,.36) 55%, rgba(135,205,189,.28));
  box-shadow:inset 16px 12px 22px rgba(255,248,224,.35), 0 14px 40px rgba(67,48,76,.12);
  animation:drift-b 16s ease-in-out infinite alternate;
}

@keyframes drift-a{to{transform:translate(-16px,22px) rotate(4deg) scale(1.035)}}
@keyframes drift-b{to{transform:translate(13px,-18px) rotate(-3deg) scale(.97)}}

.site-shell{
  width:min(100% - 30px,1040px);
  margin:0 auto;
  position:relative;
}

.archive-shell{padding:54px 0 82px}

.masthead{
  position:relative;
  max-width:820px;
  margin:0 0 30px 4%;
  padding:31px 38px 34px 112px;
  border:1px solid rgba(66,94,83,.32);
  border-radius:38px 21px 48px 28px;
  background:
    linear-gradient(150deg,rgba(255,255,239,.55),transparent 42%),
    linear-gradient(118deg,rgba(126,205,188,.18),rgba(105,75,150,.1) 58%,rgba(211,163,77,.15)),
    var(--paper);
  box-shadow:var(--shadow);
  backdrop-filter:blur(9px);
}

.masthead::before{
  content:"";
  position:absolute;
  left:28px;
  top:34px;
  width:60px;
  height:76px;
  border-radius:49% 51% 42% 58% / 58% 44% 56% 42%;
  background:
    radial-gradient(circle at 31% 25%,rgba(255,255,235,.92),transparent 0 12%,transparent 13%),
    linear-gradient(151deg,var(--pollen),#5ec6b4 46%,var(--bruise) 78%,var(--rose));
  box-shadow:inset 8px 9px 15px rgba(255,255,228,.38),inset -8px -10px 16px rgba(64,39,99,.2),0 12px 22px rgba(49,69,60,.18);
  transform:rotate(-7deg);
}

.eyebrow,.kicker{
  margin:0 0 9px;
  color:var(--water-deep);
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.11em;
  text-transform:lowercase;
}

h1{
  margin:0;
  color:var(--bruise-deep);
  font-family:var(--poem);
  font-size:clamp(3.25rem,9vw,6rem);
  font-weight:700;
  line-height:.88;
  letter-spacing:-.035em;
}

.masthead .intro{
  max-width:49ch;
  margin:19px 0 0;
  color:#36463f;
  font-family:var(--poem);
  font-size:1.07rem;
  line-height:1.62;
}

.cabinet-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  max-width:760px;
  margin:0 0 20px 10%;
}

.cabinet-note{
  color:var(--muted);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.04em;
}

.drift-button,.pearl-link,.site-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  color:var(--bruise-deep);
  font:700 .79rem/1 var(--body);
  text-decoration:none;
  border:1px solid rgba(73,91,80,.35);
  border-radius:18px 12px 20px 14px;
  background:
    linear-gradient(180deg,rgba(255,255,239,.82),rgba(255,255,239,.2) 58%),
    linear-gradient(133deg,rgba(215,239,104,.64),rgba(99,198,179,.42) 48%,rgba(117,81,170,.35));
  box-shadow:var(--soft-shadow);
  cursor:pointer;
  transition:transform .28s cubic-bezier(.2,.9,.25,1.25),box-shadow .2s ease;
}

.drift-button:hover,.drift-button:focus-visible,.pearl-link:hover,.pearl-link:focus-visible,.site-link:hover,.site-link:focus-visible{
  transform:translateY(-2px) rotate(-.5deg);
  box-shadow:0 13px 28px rgba(42,58,50,.18),inset 0 1px 0 rgba(255,255,240,.8);
  outline:2px solid rgba(23,111,104,.34);
  outline-offset:3px;
}

.poem-list{max-width:900px;margin:0 auto;padding:0;list-style:none}
.poem-list li{position:relative}
.poem-list li:nth-child(3n + 1){margin-right:7%}
.poem-list li:nth-child(3n + 2){margin-left:5%}
.poem-list li:nth-child(3n){margin-right:2%;margin-left:2%}

.poem-card{
  display:flex;
  align-items:center;
  gap:22px;
  min-height:96px;
  margin:13px 0;
  padding:19px 24px 19px 27px;
  color:var(--ink);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:29px 15px 35px 20px;
  background:linear-gradient(178deg,rgba(255,255,238,.7),transparent 54%),var(--paper);
  box-shadow:var(--soft-shadow);
  backdrop-filter:blur(6px);
  transition:transform .3s cubic-bezier(.2,.85,.22,1.18),background-color .2s ease,box-shadow .2s ease;
}

.poem-list li:nth-child(even) .poem-card{border-radius:18px 31px 22px 38px}

.poem-card::before{
  content:"";
  flex:0 0 auto;
  width:15px;
  height:43px;
  border-radius:62% 38% 53% 47% / 38% 58% 42% 62%;
  background:linear-gradient(180deg,var(--pollen),var(--water-deep));
  box-shadow:inset 3px 2px 4px rgba(255,255,229,.55),0 5px 12px rgba(42,64,54,.14);
  transform:rotate(5deg);
}

.poem-list li:nth-child(3n + 2) .poem-card::before{background:linear-gradient(180deg,var(--rose),var(--honey));transform:rotate(-6deg)}
.poem-list li:nth-child(3n) .poem-card::before{background:linear-gradient(180deg,#84d2c2,var(--bruise));transform:rotate(2deg)}

.poem-card:hover,.poem-card:focus-visible{
  z-index:2;
  color:var(--ink);
  background-color:rgba(224,245,218,.46);
  box-shadow:0 16px 35px rgba(42,58,50,.17),inset 0 1px 0 rgba(255,255,240,.75);
  transform:translate(7px,-2px) rotate(.25deg);
  outline:2px solid rgba(23,111,104,.32);
  outline-offset:3px;
}

.poem-title{
  flex:0 0 min(34%,220px);
  color:var(--bruise-deep);
  font-family:var(--poem);
  font-size:1.48rem;
  font-weight:700;
  line-height:1.05;
}

.poem-fragment{
  color:#43534b;
  font-family:var(--poem);
  font-size:.98rem;
  font-style:italic;
  line-height:1.4;
}

.archive-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  max-width:780px;
  margin:35px 7% 0 auto;
  padding:19px 2px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.72rem;
}

.archive-footer a{color:var(--bruise);text-underline-offset:4px}

.reading-shell{padding:30px 0 74px}

.reading-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 3% 18px;
}

.site-link{
  color:var(--muted);
  background:linear-gradient(180deg,rgba(255,255,239,.66),rgba(255,255,239,.18)),rgba(210,201,180,.48);
}

.poem-page{
  position:relative;
  width:min(100%,850px);
  margin:0 auto;
  padding:56px clamp(24px,8vw,86px) 46px;
  border:1px solid rgba(66,94,83,.31);
  border-radius:42px 22px 51px 29px;
  background:
    linear-gradient(154deg,rgba(255,255,239,.62),transparent 32%),
    linear-gradient(112deg,rgba(141,211,195,.09),transparent 43%,rgba(115,81,170,.07)),
    var(--paper-strong);
  box-shadow:var(--shadow);
  overflow:visible;
}

.poem-page::before{
  content:"";
  position:absolute;
  top:44px;
  bottom:39px;
  left:18px;
  width:7px;
  border-radius:60% 40% 52% 48% / 8% 12% 88% 92%;
  background:linear-gradient(180deg,var(--pollen),var(--water-deep) 35%,var(--bruise) 72%,var(--rose));
  box-shadow:0 4px 13px rgba(59,62,74,.16),inset 1px 0 rgba(255,255,230,.65);
  transform:rotate(.7deg);
}

.poem-header{
  max-width:620px;
  margin:0 auto 42px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}

.poem-header h1{max-width:13ch;font-size:clamp(2.8rem,8vw,5rem);line-height:.96;overflow-wrap:anywhere}

.poem-body{
  max-width:620px;
  min-height:38vh;
  margin:0 auto;
  position:relative;
}

.poem-text{
  margin:0;
  white-space:pre-wrap;
  color:#2b2838;
  font-family:var(--poem);
  font-size:clamp(1.03rem,2.3vw,1.17rem);
  line-height:1.62;
  tab-size:3;
  overflow-wrap:normal;
}

.prose-poem .poem-text{max-width:54ch;white-space:pre-wrap;line-height:1.72}

.poem-switcher{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:620px;
  margin:52px auto 0;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.poem-switcher a{
  color:var(--water-deep);
  font-family:var(--body);
  font-size:.85rem;
  text-decoration:none;
  border-bottom:1px solid rgba(23,111,104,.27);
  transition:color .18s ease,transform .18s ease;
}

.poem-switcher a:hover,.poem-switcher a:focus-visible{color:var(--bruise);transform:translateY(-1px);outline:0;border-bottom-color:currentColor}

.translation-note{
  max-width:620px;
  margin:-22px auto 34px;
  color:var(--muted);
  font:400 .74rem/1.45 var(--mono);
}

.mouth-poem{
  max-width:620px;
  font-family:var(--poem);
  font-size:clamp(1.06rem,2.35vw,1.2rem);
  line-height:1.55;
}

.mouth-poem > span,.translation{display:block;width:max-content;max-width:100%}

.translation{
  position:relative;
  z-index:1;
  margin:0;
  padding:0 3px 1px;
  color:inherit;
  font:inherit;
  text-align:left;
  border:0;
  border-radius:4px 8px 5px 7px;
  background:linear-gradient(180deg,transparent 63%,rgba(117,190,173,.23) 63% 90%,transparent 90%);
  cursor:help;
}

.translation::after{
  content:attr(data-translation);
  position:absolute;
  left:calc(100% + 20px);
  top:50%;
  width:max-content;
  max-width:min(280px,42vw);
  padding:10px 13px;
  color:var(--bruise-deep);
  font:italic .88rem/1.4 var(--poem);
  white-space:pre-line;
  border:1px solid rgba(78,87,76,.28);
  border-radius:14px 9px 17px 11px;
  background:linear-gradient(145deg,rgba(255,255,239,.88),rgba(211,237,199,.83)),var(--bone);
  box-shadow:var(--soft-shadow);
  opacity:0;
  pointer-events:none;
  transform:translate(8px,-50%) scale(.97) rotate(.35deg);
  transition:opacity .18s ease,transform .24s cubic-bezier(.2,.85,.22,1.1);
}

.translation:hover,.translation:focus-visible{
  color:var(--bruise-deep);
  outline:2px solid rgba(23,111,104,.26);
  outline-offset:2px;
  background:linear-gradient(180deg,transparent 54%,rgba(215,239,104,.46) 54% 92%,transparent 92%);
}

.translation:hover::after,.translation:focus-visible::after{opacity:1;transform:translate(0,-50%) scale(1) rotate(-.25deg)}

.source-link{
  display:inline-block;
  margin-top:28px;
  color:var(--muted);
  font:.72rem/1.4 var(--mono);
  text-underline-offset:4px;
}

::selection{color:var(--bruise-deep);background:rgba(215,239,104,.6)}

@media (max-width:700px){
  .archive-shell{padding:28px 0 55px}
  .masthead{margin-left:0;padding:27px 22px 28px 78px;border-radius:29px 17px 36px 21px}
  .masthead::before{left:19px;top:30px;width:42px;height:57px}
  .cabinet-tools{margin-left:2%}
  .poem-list li,.poem-list li:nth-child(3n + 1),.poem-list li:nth-child(3n + 2),.poem-list li:nth-child(3n){margin-left:0;margin-right:0}
  .poem-card{align-items:flex-start;gap:15px;padding:18px}
  .poem-card::before{width:10px;height:37px}
  .poem-title{flex-basis:36%;font-size:1.28rem}
  .poem-fragment{font-size:.92rem}
  .archive-footer{margin-right:0}
  .reading-shell{padding-top:18px}
  .reading-nav{margin-left:0;margin-right:0}
  .poem-page{padding:42px 26px 38px 37px;border-radius:29px 17px 36px 21px}
  .poem-page::before{left:13px}
  .poem-text{font-size:1rem;line-height:1.58}
  .translation::after{left:0;top:calc(100% + 8px);max-width:min(280px,76vw);transform:translate(0,-6px) scale(.98) rotate(.3deg)}
  .translation:hover::after,.translation:focus-visible::after{transform:translate(0,0) scale(1) rotate(-.2deg)}
}

@media (max-width:470px){
  .site-shell{width:min(100% - 18px,1040px)}
  .masthead{padding-left:65px}
  .masthead::before{left:14px;width:36px;height:51px}
  .cabinet-note{display:none}
  .cabinet-tools{justify-content:flex-end}
  .poem-card{display:block}
  .poem-card::before{float:left;margin:3px 13px 30px 0}
  .poem-title{display:block;margin-bottom:8px}
  .archive-footer{align-items:flex-start;flex-direction:column}
  .pearl-link,.site-link{padding:8px 11px}
  .poem-page{padding-left:32px;padding-right:17px}
  .poem-header{margin-bottom:33px}
  .poem-switcher{align-items:flex-start;flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ambient{animation:none}
  .poem-card,.drift-button,.pearl-link,.site-link,.translation::after{transition:none}
}

@media print{
  @page{margin:20mm}
  body{background:var(--bone)}
  body::before,.ambient,.reading-nav,.poem-switcher,.translation-note{display:none}
  .reading-shell{width:100%;padding:0}
  .poem-page{width:100%;padding:0;border:0;box-shadow:none;background:none}
  .poem-page::before{display:none}
  .translation{background:none}
}