/* ============================================================
   Meghana's Notebook — a portfolio that turns like paper.
   Self-contained: no frameworks, no build step, host anywhere.
   ============================================================ */

:root{
  --paper:        #f6efdd;
  --paper-deep:   #efe5cc;
  --ink:          #3a3126;
  --ink-soft:     #6d6049;
  --accent:       #a4552e;
  --rule:         rgba(74, 105, 152, .17);
  --margin-red:   rgba(186, 82, 62, .38);
  --pencil:       #7d5b38;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.14'/></feComponentTransfer></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

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

html{ height:100%; }
body{
  height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
  font-family:'Lora', Georgia, 'Times New Roman', serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  /* the desk: warm lamp pool over vertical walnut planks */
  background-image:
    radial-gradient(130vmax 90vmax at 50% 18%, rgba(255,224,166,.16), rgba(24,12,3,.52) 62%),
    repeating-linear-gradient(90deg,
      #6f4b28 0px,  #7a5330 55px, #6b4726 118px, #77512e 182px,
      #3c2814 183px, #3c2814 186px),
    linear-gradient(180deg, #6b4526, #58371d);
}
/* wood grain + fine noise, fixed over the desk */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.12 0.012' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.18'/></feComponentTransfer></filter><rect width='420' height='420' filter='url(%23w)'/></svg>"),
    var(--noise);
  mix-blend-mode:overlay;
  opacity:.8;
}

/* ---------- scene / book geometry ---------- */

.scene{
  position:fixed; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(30px, 4.5dvh, 44px) clamp(10px, 3vw, 30px) clamp(14px, 3dvh, 30px);
  opacity:0; transform:translateY(14px);
  transition: opacity .7s ease .1s, transform .7s ease .1s;
}
body.ready .scene{ opacity:1; transform:none; }

.book-wrap{
  position:relative;
  width:  min(660px, 100%, calc(84dvh * .80));
  height: min(86dvh, 880px);
}
.book{
  position:absolute; inset:0;
  perspective:2600px;
  perspective-origin:50% 30%;
}

/* soft pool of shadow the pad casts on the desk */
.book-shadow{
  position:absolute; left:3%; right:3%; bottom:-20px; height:36px;
  background:radial-gradient(ellipse at 50% 50%, rgba(15,8,1,.5), transparent 68%);
  filter:blur(7px);
  z-index:0;
}
/* the rest of the pad — a couple of paper edges peeking out below */
.stack{ position:absolute; inset:0; border-radius:4px 4px 9px 9px; z-index:0; }
.stack.s1{ background:#e7dcc0; transform:translateY(5px)  rotate(.45deg); box-shadow:0 2px 5px rgba(40,22,5,.28); }
.stack.s2{ background:#ede3c9; transform:translateY(2.5px) rotate(-.3deg); }

/* ---------- sheets ---------- */

.sheet{
  position:absolute; inset:0;
  transform-origin:50% 0%;
  transform-style:preserve-3d;
  will-change:transform;
  border-radius:4px 4px 9px 9px;
}
.sheet.flipped{
  transform:rotateX(-178deg);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:inherit;
  overflow:hidden;
}
/* ruled paper, red margin, punch holes, light texture */
.face.front{
  background-image:
    radial-gradient(circle 4px at 50% 50%, rgba(52,36,18,.6) 58%, rgba(52,36,18,.24) 72%, transparent 78%),
    linear-gradient(90deg, transparent 0, transparent 62px, var(--margin-red) 62px, var(--margin-red) 63.5px, transparent 63.5px),
    var(--noise),
    repeating-linear-gradient(180deg, transparent 0px, transparent 30px, var(--rule) 30px, var(--rule) 31px),
    linear-gradient(180deg, #f9f3e3 0%, var(--paper) 55%, var(--paper-deep) 100%);
  background-size: 27px 20px, auto, auto, auto, auto;
  background-position: 10px 0, 0 0, 0 0, 0 84px, 0 0;
  background-repeat: repeat-x, no-repeat, repeat, repeat, no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 1px 2px rgba(50,30,8,.18);
}
.face.back{
  transform:rotateX(180deg);
  background-image:
    var(--noise),
    repeating-linear-gradient(180deg, transparent 0px, transparent 30px, rgba(74,105,152,.08) 30px, rgba(74,105,152,.09) 31px),
    linear-gradient(180deg, #f3ecd8, #ece1c6);
}

/* overlays used by the flip animation */
.shade, .sheen{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  border-radius:inherit;
}
.shade{ background:linear-gradient(180deg, rgba(35,22,6,.55), rgba(35,22,6,.15) 45%, rgba(35,22,6,.02)); }
.sheen{ background:linear-gradient(180deg, rgba(255,252,240,.12) 30%, rgba(46,30,10,.38) 100%); }

/* ---------- page anatomy ---------- */

.page-inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding: clamp(30px,5dvh,44px) clamp(20px,5.5%,42px) clamp(10px,1.8dvh,16px) clamp(30px,11%,80px);
}
.page-body{
  flex:1; min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  scrollbar-width:thin;
  scrollbar-color:rgba(110,85,50,.35) transparent;
  padding-right:8px;
}
.pageno{
  text-align:center;
  font-style:italic;
  font-size:12px;
  color:var(--ink-soft);
  padding-top:8px;
  user-select:none;
}

.kicker{
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.5em; font-weight:600;
}
h1.page-title{
  font-weight:600;
  font-size:clamp(21px, 3.6dvh, 29px);
  letter-spacing:.01em;
  margin-bottom:.55em;
  color:var(--ink);
}
.page-body p{
  font-size:clamp(14.5px, 1.85dvh, 16.5px);
  line-height:1.66;
  margin-bottom:.85em;
  color:var(--ink);
}
.page-body .soft{ color:var(--ink-soft); }
.page-body a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.page-body a:hover{ text-decoration-style:wavy; }

.hand{
  font-family:'Caveat','Segoe Script','Bradley Hand',cursive;
  color:var(--pencil);
}

/* handwritten margin annotation */
.annotation{
  position:absolute;
  font-family:'Caveat',cursive;
  font-size:clamp(15px, 2.1dvh, 19px);
  color:var(--pencil);
  transform:rotate(-3deg);
  pointer-events:none;
  line-height:1.15;
  max-width:130px;
}

/* sticky note */
.sticky{
  position:absolute;
  width:clamp(108px, 16dvh, 138px);
  padding:10px 12px 14px;
  font-family:'Caveat',cursive;
  font-size:clamp(15px, 2.2dvh, 19px);
  line-height:1.25;
  color:#5c4d17;
  background:linear-gradient(180deg, #fdf6a3, #f4e87e);
  box-shadow:0 6px 9px rgba(40,24,4,.22);
  transform:rotate(-3.5deg);
  z-index:3;
}
.sticky.mint{ background:linear-gradient(180deg,#d9f2d0,#c3e6b8); color:#3c5a2e; }
.sticky::before{ /* slightly lifted bottom edge */
  content:""; position:absolute; left:8%; right:8%; bottom:-4px; height:8px;
  background:rgba(40,24,4,.10); filter:blur(3px); z-index:-1;
}

/* coffee ring */
.coffee{
  position:absolute; width:92px; height:92px; border-radius:50%;
  border:7px solid rgba(128,76,30,.14);
  box-shadow:inset 0 0 4px rgba(128,76,30,.10);
  pointer-events:none;
  transform:rotate(-8deg) scaleX(1.04);
}

/* dog-ear folded corner (click = next page) */
.dogear{
  position:absolute; right:0; bottom:0;
  width:44px; height:44px;
  cursor:pointer; z-index:4;
  -webkit-tap-highlight-color:transparent;
}
.dogear::before{ /* dark notch where the corner was */
  content:""; position:absolute; inset:0;
  background:linear-gradient(315deg, rgba(58,40,16,.30) 0 48%, transparent 50%);
  border-radius:0 0 9px 0;
}
.dogear::after{  /* the folded flap */
  content:""; position:absolute; inset:0;
  clip-path:polygon(0 0, 100% 0, 0 100%);
  background:linear-gradient(315deg, #e2d3ae 0%, #f2e8cd 55%, #f9f2df 100%);
  filter:drop-shadow(2px 2px 2px rgba(50,30,8,.28));
  transition:transform .25s ease;
  transform-origin:0 0;
}
.dogear:hover::after{ transform:scale(1.12); }

/* ---------- cover ---------- */

.sheet.cover .face.front{
  background-image:
    radial-gradient(circle 4px at 50% 50%, rgba(30,18,6,.7) 58%, rgba(30,18,6,.3) 72%, transparent 78%),
    var(--noise),
    radial-gradient(120% 90% at 30% 12%, rgba(255,232,190,.14), transparent 55%),
    linear-gradient(158deg, #a8743f 0%, #91602f 55%, #7c4f25 100%);
  background-size:27px 20px, auto, auto, auto;
  background-position:10px 0, 0 0, 0 0, 0 0;
  background-repeat:repeat-x, repeat, no-repeat, no-repeat;
  cursor:pointer;
}
.cover-stitch{
  position:absolute; inset:16px;
  border:2px dashed rgba(255,240,214,.34);
  border-radius:6px;
  pointer-events:none;
}
.cover-inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:9% 8%;
  gap:clamp(10px, 2.4dvh, 22px);
}
.cover-kicker{
  color:rgba(255,240,214,.85);
  font-size:12px; letter-spacing:.34em; text-transform:uppercase;
}
.cover-label{
  background:linear-gradient(180deg,#faf4e2,#f1e7cd);
  padding:clamp(18px,3.6dvh,30px) clamp(22px,6%,44px);
  box-shadow:0 4px 10px rgba(30,16,2,.35), inset 0 0 0 1px rgba(120,90,40,.25);
  transform:rotate(-.8deg);
  max-width:88%;
}
.cover-label .name{
  font-size:clamp(26px, 5dvh, 40px);
  font-weight:600; letter-spacing:.06em;
  color:#31281a;
}
.cover-label .rule{
  height:1.5px; background:rgba(120,90,40,.4);
  margin:.55em auto; width:72%;
}
.cover-label .role{
  font-style:italic; font-size:clamp(13.5px,2dvh,16px);
  color:#5c4e34;
}
.cover-label .org{
  font-size:clamp(11.5px,1.7dvh,13px); letter-spacing:.14em; text-transform:uppercase;
  color:#7a6a4a; margin-top:.5em;
}
.cover-tag{
  color:rgba(255,240,214,.8);
  font-style:italic;
  font-size:clamp(13px, 1.9dvh, 15.5px);
  max-width:34ch;
}
.cover-open{
  font-family:'Caveat',cursive;
  font-size:clamp(17px, 2.6dvh, 22px);
  color:rgba(255,240,214,.9);
  animation:beckon 2.6s ease-in-out infinite;
}
@keyframes beckon{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* ---------- projects ---------- */

.shot{
  display:block; width:100%; height:auto;
  background:#fbf6e9;
  border:1px solid rgba(90,70,40,.3);
  box-shadow:2px 5px 12px rgba(50,30,8,.16);
  transform:rotate(-.5deg);
  margin:.35em 0 1em;
}
.shot-wrap{ position:relative; }
.tape{
  position:absolute; width:76px; height:22px;
  background:rgba(233,222,178,.65);
  box-shadow:0 1px 3px rgba(50,30,8,.18);
  border-left:1px dashed rgba(120,95,50,.35);
  border-right:1px dashed rgba(120,95,50,.35);
  z-index:2;
}
.tape.tl{ left:-14px; top:-9px;  transform:rotate(-42deg); }
.tape.tr{ right:-14px; top:-9px; transform:rotate(42deg); }

.stack-tags{ display:flex; flex-wrap:wrap; gap:7px; margin:.35em 0 .9em; }
.stack-tags span{
  border:1.5px solid rgba(96,74,42,.45);
  border-radius:999px;
  padding:2.5px 11px;
  font-size:clamp(11.5px,1.6dvh,13px);
  color:var(--ink-soft);
  background:rgba(255,255,255,.28);
  white-space:nowrap;
}
.proj-links{ font-size:clamp(13.5px,1.8dvh,15.5px); }
.proj-links a + a{ margin-left:1.4em; }

/* ---------- philosophy / skills / experiments ---------- */

ol.principles{ list-style:none; counter-reset:pr; }
ol.principles li{
  counter-increment:pr;
  position:relative;
  padding-left:2.1em;
  margin-bottom:clamp(.55em,1.3dvh,.95em);
  font-size:clamp(14.5px,1.85dvh,16.5px);
  line-height:1.55;
}
ol.principles li::before{
  content:counter(pr,decimal-leading-zero);
  position:absolute; left:0; top:.1em;
  font-family:'Caveat',cursive;
  font-size:1.25em; font-weight:600;
  color:var(--accent);
}
ol.principles b{ font-weight:600; }

blockquote{
  margin:1.1em 0 0;
  padding:.15em 0 .15em 1em;
  border-left:3px solid rgba(164,85,46,.5);
  font-style:italic;
  color:var(--ink-soft);
  font-size:clamp(14px,1.8dvh,16px);
  line-height:1.6;
}

.skills-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px,2.4dvh,22px) clamp(16px,4%,30px);
  margin-top:.4em;
}
.skills-grid h3{
  font-size:clamp(12px,1.7dvh,13.5px);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
  margin-bottom:.45em;
  border-bottom:1px solid rgba(96,74,42,.25);
  padding-bottom:.3em;
}
.skills-grid ul{ list-style:none; }
.skills-grid li{
  font-size:clamp(13.5px,1.75dvh,15.5px);
  line-height:1.7;
  color:var(--ink);
}
.skills-grid li::before{ content:"— "; color:var(--ink-soft); }

ul.lab{ list-style:none; margin-top:.3em; }
ul.lab li{
  display:flex; gap:.7em; align-items:baseline;
  font-size:clamp(14px,1.8dvh,16px);
  line-height:1.55;
  margin-bottom:clamp(.5em,1.2dvh,.85em);
}
ul.lab .st{
  flex:none; width:1.5em; text-align:center;
  font-family:'Caveat',cursive; font-size:1.2em; font-weight:700;
}
ul.lab .st.done{ color:#4c7a3d; }
ul.lab .st.wip{ color:#b07f22; }
ul.lab .st.idea{ color:var(--ink-soft); }
ul.lab b{ font-weight:600; }
ul.lab .note{ color:var(--ink-soft); }

/* ---------- contact ---------- */

.contact-rows{ list-style:none; margin:.6em 0 1.2em; }
.contact-rows li{
  display:flex; align-items:baseline; gap:.8em;
  font-size:clamp(14.5px,1.9dvh,16.5px);
  line-height:2.1;
}
.contact-rows .lbl{
  flex:none; width:6.2em;
  font-size:.78em; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
}
.thanks{
  font-family:'Caveat',cursive;
  font-size:clamp(19px,2.8dvh,24px);
  line-height:1.35;
  color:var(--pencil);
  transform:rotate(-1.2deg);
  max-width:34ch;
  margin-top:clamp(.6em,2dvh,1.4em);
}
.fin{
  text-align:center; font-style:italic;
  color:var(--ink-soft);
  margin-top:clamp(.8em,2.5dvh,1.6em);
  letter-spacing:.2em;
}

/* ---------- binding, ribbon ---------- */

.binding{
  position:absolute; left:0; right:0; top:-17px; height:36px;
  z-index:600; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='27' height='36' viewBox='0 0 27 36'><ellipse cx='13.5' cy='18' rx='5.5' ry='14' transform='rotate(16 13.5 18)' fill='none' stroke='%23474c52' stroke-width='2.8'/><ellipse cx='12.6' cy='17' rx='5.5' ry='14' transform='rotate(16 13.5 18)' fill='none' stroke='%23b8bec4' stroke-width='.9'/></svg>");
  background-repeat:repeat-x;
  background-size:27px 36px;
  background-position:10px 0;
  filter:drop-shadow(0 2px 1.5px rgba(20,10,2,.4));
}

.ribbon{
  position:absolute; top:-4px; left:30px;
  width:16px; height:calc(100% + 30px);
  z-index:500; pointer-events:none;
  background:linear-gradient(90deg,#6f2a1f,#a83f2d 45%,#8a3325 80%,#6f2a1f);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 13px), 0 100%);
  box-shadow:-3px 5px 7px rgba(20,10,2,.3);
  opacity:.96;
}

/* ---------- chrome: index button, overlay, hint ---------- */

.index-btn{
  position:fixed; top:calc(12px + env(safe-area-inset-top)); right:calc(14px + env(safe-area-inset-right));
  z-index:900;
  font-family:'Lora',serif; font-weight:600;
  font-size:12.5px; letter-spacing:.14em;
  padding:9px 15px;
  color:#46381f;
  background:linear-gradient(180deg,#f6efdc,#eadfc2);
  border:1px solid rgba(96,74,42,.45);
  border-radius:5px;
  box-shadow:0 3px 8px rgba(20,10,2,.35);
  cursor:pointer;
}
.index-btn:hover{ background:linear-gradient(180deg,#fbf5e6,#f0e6cd); }
.index-btn .kbd{
  display:inline-block; margin-left:.5em;
  border:1px solid rgba(96,74,42,.5); border-bottom-width:2px;
  border-radius:3px; padding:0 .35em;
  font-size:.85em;
}

.overlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(26,16,6,.5);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s;
}
.overlay.open{ opacity:1; visibility:visible; }
.index-panel{
  width:min(430px, calc(100vw - 32px));
  max-height:82dvh; overflow-y:auto;
  background-image:var(--noise), linear-gradient(180deg,#f8f2e1,#efe5cc);
  border-radius:8px;
  padding:clamp(20px,4dvh,30px) clamp(22px,6vw,34px);
  box-shadow:0 26px 70px rgba(10,5,0,.5);
  transform:translateY(10px) scale(.98);
  transition:transform .25s ease;
  overscroll-behavior:contain;
}
.overlay.open .index-panel{ transform:none; }
.index-panel h2{
  font-size:20px; font-weight:600; margin-bottom:2px;
}
.index-panel .sub{
  font-family:'Caveat',cursive; color:var(--pencil);
  font-size:17px; margin-bottom:14px;
}
.index-panel ol{ list-style:none; }
.index-row{
  display:flex; align-items:baseline; gap:10px;
  width:100%; text-align:left;
  background:none; border:0; cursor:pointer;
  font-family:'Lora',serif; font-size:15.5px; color:var(--ink);
  padding:7px 2px;
  border-radius:4px;
}
.index-row:hover{ background:rgba(164,85,46,.08); }
.index-row .dots{ flex:1; border-bottom:2px dotted rgba(96,74,42,.4); transform:translateY(-4px); }
.index-row .num{ font-style:italic; color:var(--ink-soft); font-size:.9em; }
.index-row.current{ color:var(--accent); font-weight:600; }
.index-row.current .t::after{ content:" ✎"; }

.hint{
  position:fixed; left:0; right:0;
  bottom:calc(8px + env(safe-area-inset-bottom));
  z-index:800; text-align:center;
  font-family:'Caveat',cursive;
  font-size:clamp(16px,2.2dvh,19px);
  color:rgba(255,236,204,.8);
  text-shadow:0 1px 3px rgba(10,5,0,.6);
  pointer-events:none;
  transition:opacity .8s ease;
}
.hint.gone{ opacity:0; }

/* error banner: only visible if a script error occurs (used in testing) */
#errbox{
  display:none;
  position:fixed; left:10px; bottom:10px; z-index:2000;
  background:#b3261e; color:#fff;
  font:13px/1.4 monospace;
  padding:8px 12px; border-radius:6px; max-width:80vw;
}

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

/* ---------- responsive ---------- */

@media (max-width:600px){
  .page-inner{ padding-left:clamp(48px, 13.5%, 60px); }
  .sticky{ display:none; }
  .face.front{
    background-image:
      radial-gradient(circle 3.5px at 50% 50%, rgba(52,36,18,.6) 58%, rgba(52,36,18,.24) 72%, transparent 78%),
      linear-gradient(90deg, transparent 0, transparent 40px, var(--margin-red) 40px, var(--margin-red) 41.5px, transparent 41.5px),
      var(--noise),
      repeating-linear-gradient(180deg, transparent 0px, transparent 30px, var(--rule) 30px, var(--rule) 31px),
      linear-gradient(180deg, #f9f3e3 0%, var(--paper) 55%, var(--paper-deep) 100%);
    background-size:24px 18px, auto, auto, auto, auto;
    background-position:6px 0, 0 0, 0 0, 0 78px, 0 0;
    background-repeat:repeat-x, no-repeat, repeat, repeat, no-repeat;
  }
  .binding{ background-size:24px 32px; background-position:6px 2px; height:32px; top:-15px; }
  .ribbon{ left:18px; width:12px; }
  .annotation{ display:none; }
  .coffee{ width:64px; height:64px; border-width:5px; }
  .index-btn .kbd{ display:none; }
  .skills-grid{ gap:12px 14px; }
  .contact-rows .lbl{ width:5em; }
  .tape{ width:54px; height:17px; }
}
@media (max-height:560px){
  .sticky, .coffee, .annotation{ display:none; }
  .book-wrap{ width:min(640px, 94vw); }   /* go wide, like a flip notepad */
  .page-inner{ padding-top:clamp(20px,4dvh,30px); }
  .hint{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .cover-open{ animation:none; }
  .scene{ transition:none; }
}