/* ===== BASE & PAPER TEXTURE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;--ink-shadow:#2a2018}

body{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  color:#3b2f28;
  background:#f4ede4;
  background:radial-gradient(ellipse at center,#f4ede4 0%,#ece3d7 100%);
  line-height:1.75;
  font-size:clamp(1rem,1.8vw,1.2rem);
  overflow-x:hidden;
  position:relative;
}

/* Paper grain texture */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.03;
  background:
    radial-gradient(circle at 20% 30%,#a89279 0.5px,transparent 0.5px),
    radial-gradient(circle at 60% 70%,#3b2f28 0.3px,transparent 0.3px),
    radial-gradient(circle at 80% 20%,#a89279 0.4px,transparent 0.4px),
    radial-gradient(circle at 40% 80%,#3b2f28 0.3px,transparent 0.3px);
  background-size:17px 19px,23px 21px,19px 17px,29px 31px;
  z-index:9999;
}

body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.015;
  background:repeating-linear-gradient(0.5deg,transparent,transparent 2px,#a89279 2px,#a89279 3px);
  z-index:9998;
}

/* ===== PAGE INDICATOR ===== */
.page-indicator{
  position:fixed;
  bottom:24px;
  right:24px;
  background:#d4c5a9;
  color:#a89279;
  font-family:'IBM Plex Mono',monospace;
  font-weight:300;
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:2px;
  z-index:1000;
  transition:opacity 150ms ease;
}

/* ===== TITLE PLATE ===== */
.title-plate{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:4rem 2rem;
}

.title-border{position:absolute;inset:2rem;pointer-events:none}
.title-border svg{position:absolute}
.corner-tl{top:0;left:0}
.corner-tr{top:0;right:0;transform:scaleX(-1)}
.corner-bl{bottom:0;left:0;transform:scaleY(-1)}
.corner-br{bottom:0;right:0;transform:scale(-1,-1)}

.title-content{text-align:center;position:relative;z-index:2}

.title-name{
  font-family:'Josefin Sans',sans-serif;
  font-weight:300;
  font-size:clamp(6rem,14vw,12rem);
  letter-spacing:0.12em;
  color:#3b2f28;
  line-height:1;
  margin-bottom:1rem;
}

.title-subtitle{
  font-family:'Josefin Sans',sans-serif;
  font-weight:600;
  font-size:clamp(0.9rem,2vw,1.3rem);
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#a89279;
  margin-bottom:1.5rem;
}

.title-japanese{
  font-family:'Noto Serif JP',serif;
  font-weight:400;
  font-size:clamp(0.85rem,1.5vw,1.1rem);
  color:#a89279;
  font-style:italic;
  letter-spacing:0.05em;
}

.title-botanical-border{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 0.5rem;
}

.vine-left,.vine-right{opacity:0.6}

/* ===== FLORAL DIVIDER ===== */
.floral-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  max-width:540px;
  margin:0 auto;
  padding:2rem 0;
}

.divider-line{
  flex:1;
  height:1px;
  background:#a89279;
  opacity:0.4;
}

.divider-flower{opacity:0.5}

/* ===== SPECIMEN PAGES ===== */
.specimen{
  max-width:900px;
  margin:0 auto;
  padding:4rem 2rem;
  min-height:70vh;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 600ms ease,transform 600ms ease;
}

.specimen.visible{
  opacity:1;
  transform:translateY(0);
}

.specimen-inner{
  display:grid;
  gap:0;
  align-items:start;
}

.recto .specimen-inner{
  grid-template-columns:55% 40px 1fr;
}

.verso .specimen-inner{
  grid-template-columns:1fr 40px 55%;
}

.specimen-vine{
  display:flex;
  justify-content:center;
  opacity:0;
  transition:opacity 300ms ease;
}

.specimen.visible .specimen-vine{
  opacity:1;
}

.specimen.visible .specimen-vine ~ *,
.specimen.visible .specimen-main{
  opacity:1;
}

/* Leaf shake on metadata hover */
.specimen-meta .meta-field:hover ~ .leaf-target,
.specimen-meta:hover + .specimen-vine svg use{
  animation:botanical-shake 400ms ease-in-out;
}

.specimen-title{
  font-family:'Josefin Sans',sans-serif;
  font-weight:600;
  font-size:clamp(2rem,5vw,3.5rem);
  letter-spacing:0.06em;
  color:#3b2f28;
  margin-bottom:0.5rem;
  cursor:pointer;
  position:relative;
  display:inline-block;
}

.specimen-title:hover{
  color:#9c6b6b;
  transition:color 300ms ease;
}

.specimen-title::after{
  content:attr(data-message);
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-weight:300;
  font-size:0.8rem;
  letter-spacing:0.06em;
  color:#a89279;
  opacity:0;
  transition:opacity 400ms ease;
  margin-top:0.3rem;
}

.specimen-title.clicked::after{
  opacity:1;
}

.specimen-title-jp{
  font-family:'Noto Serif JP',serif;
  font-size:0.95rem;
  color:#a89279;
  margin-bottom:0.75rem;
}

.specimen-description{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  line-height:1.75;
  margin-bottom:2rem;
  color:#3b2f28;
}

/* Specimen Meta */
.specimen-meta{
  padding-top:1rem;
}

.meta-field{
  margin-bottom:0.75rem;
  display:flex;
  flex-direction:column;
}

.meta-label{
  font-family:'IBM Plex Mono',monospace;
  font-weight:300;
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#a89279;
}

.meta-value{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;
  font-size:1rem;
  color:#3b2f28;
}

.status-dormant{color:#a89279;font-style:italic}
.status-perennial{color:#5b7a5e}
.status-active{color:#5b7a5e;font-weight:500}
.status-seedling{color:#5b7a5e;font-style:italic}

/* ===== SPECIMEN ILLUSTRATIONS ===== */
.specimen-illustration{
  width:200px;
  height:280px;
  position:relative;
  margin:1rem 0;
  box-shadow:2px 3px 12px rgba(42,32,24,0.1) /* #2a2018 at 10% */;
  background:#f4ede4;
  border:1px solid rgba(168,146,121,0.3);
}

/* Specimen I: Luminous Descent - concentric circles with rays (light in caves) */
.specimen-illustration-1 .illus-circle{
  position:absolute;
  border-radius:50%;
  border:1px solid #a89279;
  left:50%;top:45%;
  transform:translate(-50%,-50%);
}
.illus-c1{width:120px;height:120px;opacity:0.3}
.illus-c2{width:80px;height:80px;opacity:0.5}
.illus-c3{width:40px;height:40px;background:radial-gradient(circle,#d4c5a9,transparent);opacity:0.7}
.specimen-illustration-1 .illus-ray{
  position:absolute;
  width:1px;height:80px;
  background:#5b7a5e;
  opacity:0.3;
  left:50%;top:10%;
  transform-origin:bottom center;
}
.illus-r1{transform:translateX(-0.5px) rotate(-30deg)}
.illus-r2{transform:translateX(-0.5px) rotate(-10deg)}
.illus-r3{transform:translateX(-0.5px) rotate(10deg)}
.illus-r4{transform:translateX(-0.5px) rotate(30deg)}

/* Specimen II: Kamisama no Niwa - fern spiral */
.specimen-illustration-2 .illus-spiral{
  position:absolute;
  border:2px solid #5b7a5e;
  border-radius:50%;
  opacity:0.35;
}
.illus-s1{width:100px;height:100px;top:30%;left:25%;border-right-color:transparent;border-bottom-color:transparent;transform:rotate(20deg)}
.illus-s2{width:70px;height:70px;top:38%;left:32%;border-right-color:transparent;border-bottom-color:transparent;transform:rotate(40deg)}
.illus-s3{width:40px;height:40px;top:44%;left:38%;border-right-color:transparent;border-bottom-color:transparent;transform:rotate(60deg)}
.illus-stem{position:absolute;width:2px;height:120px;background:#5b7a5e;opacity:0.4;left:50%;bottom:15%}
.illus-leaf-l{position:absolute;width:30px;height:16px;background:#5b7a5e;opacity:0.25;border-radius:0 80% 0 80%;left:38%;bottom:35%;transform:rotate(-20deg)}
.illus-leaf-r{position:absolute;width:30px;height:16px;background:#5b7a5e;opacity:0.25;border-radius:80% 0 80% 0;left:54%;bottom:45%;transform:rotate(20deg)}

/* Specimen III: Thread & Thorn - diamonds and threads */
.specimen-illustration-3 .illus-diamond{
  position:absolute;
  width:60px;height:60px;
  border:1px solid #9c6b6b;
  transform:rotate(45deg);
  opacity:0.4;
}
.illus-d1{top:25%;left:30%}
.illus-d2{top:40%;left:45%;width:40px;height:40px;opacity:0.6}
.specimen-illustration-3 .illus-thread{
  position:absolute;
  width:1px;
  background:#9c6b6b;
  opacity:0.3;
}
.illus-t1{height:180px;top:10%;left:35%;transform:rotate(5deg)}
.illus-t2{height:160px;top:15%;left:65%;transform:rotate(-3deg)}
.specimen-illustration-3 .illus-thorn{
  position:absolute;
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-bottom:12px solid #3b2f28;
  opacity:0.25;
}
.illus-th1{top:60%;left:33%;transform:rotate(-15deg)}
.illus-th2{top:50%;left:63%;transform:rotate(20deg)}

/* Specimen IV: Quiet Orbit - orbital rings and sprout */
.specimen-illustration-4 .illus-orbit{
  position:absolute;
  border:1px solid #a89279;
  border-radius:50%;
  left:50%;top:40%;
  transform:translate(-50%,-50%);
  opacity:0.3;
}
.illus-o1{width:160px;height:80px;transform:translate(-50%,-50%) rotate(-15deg)}
.illus-o2{width:120px;height:60px;transform:translate(-50%,-50%) rotate(15deg)}
.illus-o3{width:80px;height:40px;transform:translate(-50%,-50%) rotate(-5deg)}
.illus-planet{
  position:absolute;
  width:24px;height:24px;
  background:#d4c5a9;
  border-radius:50%;
  left:50%;top:40%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px rgba(168,146,121,0.3);
}
.illus-sprout{
  position:absolute;
  width:2px;height:30px;
  background:#5b7a5e;
  left:50%;top:52%;
  transform:translateX(-50%);
  opacity:0.5;
}
.illus-sprout::before{
  content:'';
  position:absolute;
  top:0;left:-6px;
  width:14px;height:8px;
  background:#5b7a5e;
  border-radius:50% 50% 0 50%;
  opacity:0.5;
  transform:rotate(-20deg);
}

/* ===== FIELD NOTES ===== */
.field-notes{
  max-width:900px;
  margin:4rem auto;
  padding:2rem;
  position:relative;
}

.field-notes-inner{
  display:flex;
  flex-direction:column;
  gap:3rem;
}

.note{
  max-width:500px;
  padding:1.5rem;
  border-bottom:1px dashed #a89279;
  position:relative;
}

.note p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  font-style:italic;
  color:#3b2f28;
  line-height:1.7;
}

.note-author{
  font-family:'IBM Plex Mono',monospace;
  font-weight:300;
  font-size:0.8rem;
  color:#9c6b6b;
  letter-spacing:0.05em;
  display:block;
  margin-top:0.5rem;
}

.note-1{align-self:flex-start;transform:rotate(-1deg)}
.note-2{align-self:flex-end;transform:rotate(1.5deg)}
.note-3{align-self:flex-start;margin-left:3rem;transform:rotate(-0.5deg)}
.note-4{align-self:center;transform:rotate(0.8deg)}

/* ===== COLOPHON ===== */
.colophon{
  max-width:900px;
  margin:0 auto;
  padding:6rem 2rem;
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.colophon-inner{
  max-width:500px;
}

.colophon-heading{
  font-family:'Josefin Sans',sans-serif;
  font-weight:600;
  font-size:clamp(1.5rem,3vw,2.2rem);
  letter-spacing:0.1em;
  color:#3b2f28;
  margin-bottom:1.5rem;
}

.colophon-border-top,.colophon-border-bottom{
  display:flex;
  justify-content:center;
  margin:1rem 0;
}

.colophon-members{
  list-style:none;
  padding:1rem 0;
}

.colophon-members li{
  margin:0.75rem 0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.1rem;
}

.member-handle{
  font-family:'Josefin Sans',sans-serif;
  font-weight:600;
  letter-spacing:0.05em;
  color:#3b2f28;
}

.member-role{
  font-style:italic;
  color:#a89279;
}

.colophon-correspondence{
  margin-top:2.5rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  font-style:italic;
  color:#a89279;
  line-height:1.8;
}

.colophon-email{
  font-family:'IBM Plex Mono',monospace;
  font-weight:300;
  font-size:0.9rem;
  letter-spacing:0.05em;
  color:#5b7a5e;
  font-style:normal;
}

.colophon-year{
  margin-top:1.5rem;
  font-family:'IBM Plex Mono',monospace;
  font-weight:300;
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#a89279;
}

.colophon-rosette{
  margin-top:2rem;
  display:flex;
  justify-content:center;
}

/* ===== ANIMATIONS ===== */
@keyframes botanical-shake{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-2deg) translateX(-1px)}
  75%{transform:rotate(2deg) translateX(1px)}
}

@keyframes specimen-shake{
  0%,100%{transform:translateX(0)}
  10%,30%,50%,70%,90%{transform:translateX(-3px)}
  20%,40%,60%,80%{transform:translateX(3px)}
}

.specimen.shaking{
  animation:specimen-shake 500ms ease-in-out;
}

.meta-field:hover{
  cursor:default;
}

/* Leaf elements inside vine SVGs shake on meta hover */
.specimen-meta:hover ~ .specimen-vine svg use,
.specimen-vine:has(~ .specimen-meta:hover) svg use{
  animation:botanical-shake 400ms ease-in-out;
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .recto .specimen-inner,
  .verso .specimen-inner{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .specimen-vine{display:none}

  .recto .specimen-main{text-align:left}
  .verso .specimen-main{text-align:right}
  .verso .specimen-meta{text-align:right}

  .title-botanical-border{display:none}

  .note-1,.note-2,.note-3,.note-4{
    align-self:stretch;
    margin-left:0;
    max-width:100%;
  }

  .specimen-illustration{
    width:160px;
    height:224px;
  }
}

@media(max-width:480px){
  body{font-size:1.1rem}

  .specimen-illustration{
    width:140px;
    height:196px;
  }

  .specimen-meta{
    border-top:1px dashed #a89279;
    padding-top:1rem;
  }
}