/* ==========================================================================
   Mihir Sahasrabudhe — site styles
   Palette, fonts and paper-on-beige feel carry over from the original design.
   What's new is that layout now lives in a stylesheet instead of inline
   attributes, so the page can actually respond to the screen it's on:
     < 760px   phone      single column, compact padding
     760–1079  tablet     single column, horizontal masthead
     >= 1080   laptop     two columns, sticky identity rail
   ========================================================================== */

:root{
  --bg:#E7D9C0;
  --paper:#F4EBDB;
  --paper-alt:#ECDDC4;
  --ink:#2A1410;
  --ink-strong:#3A0F0F;
  --ink-body:#402a20;
  --ink-soft:#5a3a30;
  --muted:#8a6a5e;
  --muted-warm:#7c4a36;
  --accent:#C9551F;
  --accent-2:#B4542A;
  --gold:#E9A24A;
  --cream:#E9CFA8;
  --rule:rgba(74,18,18,.16);
  --rule-soft:rgba(74,18,18,.12);

  --display:'Instrument Serif',Georgia,serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --deva:'Tiro Devanagari Hindi',serif;

  --pad:34px;          /* horizontal padding, widened at larger sizes */
  --rail:250px;
  --shell:1180px;
  --measure:34em;      /* comfortable line length for prose */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
::selection{background:var(--accent);color:#fff;}
[id]{scroll-margin-top:20px;}
@keyframes pulsedot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.65);}}

/* ---------------------------------------------------------------- shell -- */
/* Column layout with the footer pushed to the foot, so a short page leaves
   its empty space above the footer rather than stranding it mid-screen. */
.shell{
  max-width:var(--shell);margin:0 auto;min-height:100vh;
  background:var(--paper);
  box-shadow:0 0 70px rgba(58,15,15,.1);
  display:flex;flex-direction:column;
}
.shell > footer{margin-top:auto;}

/* ----------------------------------------------------------------- rail -- */
/* Identity + wayfinding. A masthead on small screens, a sticky colophon
   column on laptops — which is what reclaims the dead side margin.        */
.rail{
  padding:22px var(--pad);
  border-bottom:1px solid var(--rule);
}
.rail-inner{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;column-gap:18px;
}
.mark{
  grid-column:1;grid-row:1;
  font-family:var(--deva);font-size:27px;color:#5C1A1A;line-height:1;
  text-decoration:none;
}
.mark:hover{color:var(--accent-2);}
.rail-name{
  grid-column:1 / -1;grid-row:2;
  font-family:var(--display);font-weight:400;color:var(--ink-strong);
  font-size:clamp(30px,5.6vw,44px);line-height:1.02;margin:26px 0 0;
}
/* Second line only — same face and style as the first. */
.rail-name .it{display:block;}

.status{
  grid-column:1 / -1;grid-row:3;justify-self:start;margin-top:20px;
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px;border:1px solid rgba(74,18,18,.22);border-radius:999px;
  background:rgba(255,255,255,.45);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#6b3b2e;
  white-space:nowrap;
}
.status .dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  animation:pulsedot 1.8s ease-in-out infinite;flex:0 0 auto;
}

.nav{
  grid-column:2;grid-row:1;
  display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-warm);
}
.nav a{color:inherit;text-decoration:none;position:relative;padding-bottom:2px;}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent-2);transition:right .22s ease;
}
.nav a:hover{color:var(--accent-2);}
.nav a:hover::after{right:0;}

/* ----------------------------------------------------------------- main -- */
.main{padding:0 var(--pad) 8px;}

.sec-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-top:1px solid var(--rule);
  padding-top:20px;margin-top:30px;
}
.sec-head .label{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-2);
}
.sec-head .aside{
  font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right;
}

/* --------------------------------------------------------------- entries -- */
.list{margin:0;}
.entry{
  display:grid;grid-template-columns:52px 1fr;gap:18px;
  padding:20px 14px;border-bottom:1px solid var(--rule-soft);
  text-decoration:none;color:inherit;
  transition:background .18s ease;
  position:relative;
}
a.entry:hover{background:rgba(255,255,255,.55);}
a.entry:hover .entry-title{color:var(--accent-2);}
.entry-n{
  font-family:var(--mono);font-size:13px;color:var(--accent-2);
  padding-top:5px;
}
.entry-meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.entry-title{
  font-family:var(--display);font-weight:400;font-size:27px;line-height:1.14;
  color:var(--ink-strong);margin:5px 0 6px;
  transition:color .18s ease;
}
.entry-title a{color:inherit;text-decoration:none;}
.entry-title a:hover{color:var(--accent-2);}
.entry-blurb{
  font-family:var(--serif);font-size:16.5px;line-height:1.5;
  color:var(--ink-soft);max-width:46em;margin:0;
}

/* Readings reuse the entry rhythm without the number gutter.
   Two classes so this keeps winning over the .entry column rules that the
   wider breakpoints redefine later in this file. */
.entry.entry--flat{grid-template-columns:minmax(0,1fr);}

/* ----------------------------------------------------------------- tabs -- */
/* The landing view is the bio. Everything else waits behind a nav item.
   State lives in one data-tab attribute on the shell, so no section can
   half-appear and there is nothing to keep in sync. */
.pane{display:none;}
.shell[data-tab="about"]    .pane--about,
.shell[data-tab="notes"]    .pane--notes,
.shell[data-tab="log"]      .pane--log,
.shell[data-tab="readings"] .pane--readings,
.shell[data-tab="photos"]   .pane--photos{display:block;}

.shell[data-tab="about"]    .nav a[href="#about"],
.shell[data-tab="notes"]    .nav a[href="#notes"],
.shell[data-tab="log"]      .nav a[href="#log"],
.shell[data-tab="readings"] .nav a[href="#readings"],
.shell[data-tab="photos"]   .nav a[href="#photos"]{color:var(--accent-2);}

/* ------------------------------------------------------------------ bio -- */
.bio{padding-top:32px;}
.bio p{
  font-family:var(--serif);font-size:18.5px;line-height:1.65;
  color:var(--ink-body);margin:0 0 1.15em;max-width:32em;
}
/* Tag plus element, so this keeps beating the `.bio p` rule above. */
.bio p.bio-lede{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,5vw,44px);line-height:1.12;
  color:var(--ink-strong);margin:0 0 .5em;max-width:15em;
}
.bio p a{color:var(--accent-2);border-bottom:1px solid rgba(180,84,42,.35);}
.bio p a:hover{border-bottom-color:var(--accent);}
.bio-h{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-2);
  margin:0 0 14px;
}

/* --------------------------------------------------------------- education */
.bio-edu{margin-top:34px;}
/* Two classes again, so this wins over the `.bio p` size above. */
.bio p.bio-aside{
  font-family:var(--serif);font-size:15.5px;line-height:1.5;
  color:var(--muted);margin:0 0 16px;
}
.edu{list-style:none;margin:0;padding:0;max-width:32em;}
.edu li{
  padding:0 0 14px;margin:0 0 14px;
  border-bottom:1px solid var(--rule-soft);
}
.edu li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0;}
.edu-school{
  display:block;font-family:var(--display);font-weight:400;
  font-size:21px;line-height:1.2;color:var(--ink-strong);
}
.edu-detail{
  display:block;margin-top:5px;
  font-family:var(--serif);font-size:15.5px;line-height:1.45;color:var(--ink-soft);
}

/* A quiet reference in the bottom right of the pane. */
.pane-corner{margin-top:30px;text-align:right;}
.pane-corner a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent;
}
.pane-corner a:hover{color:var(--accent-2);border-bottom-color:var(--accent-2);}

/* --------------------------------------------------------------- portrait */
/* Shown whole. The composition runs from the figure at the bottom straight
   up the Reflecting Pool to the monument, so nothing here crops it. */
.portrait{margin:28px 0 0;max-width:330px;}
.portrait img{
  width:100%;height:auto;border-radius:2px;
  box-shadow:0 2px 20px rgba(58,15,15,.16);
}
.portrait figcaption{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:#7c6a5e;margin-top:9px;
}

/* ---------------------------------------------------------------- photos -- */
.photos .sec-head{border-top:0;margin-top:0;padding-top:0;}
.photo-grid{
  display:grid;gap:16px;padding:18px 0 4px;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
}
.photo-grid figure{margin:0;}
.frame{
  aspect-ratio:3/4;border-radius:2px;overflow:hidden;
  background:rgba(74,18,18,.06);
}
.frame img{width:100%;height:100%;object-fit:cover;}
.photo-grid figcaption{
  font-family:var(--mono);font-size:10px;color:#7c6a5e;
  margin-top:9px;letter-spacing:.03em;line-height:1.4;
}

/* ---------------------------------------------------------------- footer -- */
.foot{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;padding:22px var(--pad);
  border-top:1px solid var(--rule);
  background:var(--ink-strong);color:var(--cream);
}
.foot .copy{font-family:var(--mono);font-size:11px;letter-spacing:.04em;}
.foot .links{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;}
.foot a{color:var(--gold);text-decoration:none;}
.foot a:hover{color:#fff;}

/* ==========================================================================
   Small phones — tighten the masthead so all four nav items sit on one line,
   and narrow the number gutter so blurbs get the width back.
   ========================================================================== */
@media (max-width:520px){
  :root{--pad:26px;}
  .mark{font-size:24px;}
  .nav{gap:13px;font-size:10px;letter-spacing:.06em;}
  /* The footer already carries these links; drop the item so the rest fit
     on one line. */
  .nav a[href="#contact"]{display:none;}
  .entry{grid-template-columns:32px minmax(0,1fr);gap:12px;padding:18px 4px;}
  .entry.entry--flat{padding-left:4px;}
  .entry-title{font-size:24px;}
  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
}

/* ==========================================================================
   From tablet up the portrait moves to the right of the text and the
   education list tucks under the statement. Below this it simply stacks:
   statement, photo, education.
   ========================================================================== */
@media (min-width:860px){
  /* The third row is empty and takes 1fr, so when the photo is taller than
     the text the slack collects below the education list instead of being
     shared out between the rows and pushing them apart. */
  .bio{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,340px);
    grid-template-areas:"intro photo" "edu photo" "rest photo";
    grid-template-rows:auto auto 1fr;
    column-gap:44px;row-gap:0;align-items:start;
  }
  .bio-intro{grid-area:intro;}
  .bio-edu{grid-area:edu;margin-top:30px;}
  .portrait{grid-area:photo;margin:0;max-width:none;}
}

/* ==========================================================================
   Tablet — roomier padding, still one column.
   ========================================================================== */
@media (min-width:760px){
  :root{--pad:44px;}
  .shell{max-width:860px;}
  .entry{grid-template-columns:60px 1fr;gap:20px;}
  .entry-title{font-size:30px;}
}

/* ==========================================================================
   Laptop — the layout this redesign is for.
   The rail leaves the top of the page and becomes a sticky column, so the
   horizontal space that used to be empty margin now carries identity and
   navigation, and far more content fits above the fold.
   ========================================================================== */
@media (min-width:1080px){
  :root{--pad:48px;}

  /* The content row takes the slack (1fr) and the footer row is sized to
     its content, which keeps the footer at the bottom on short pages and
     stops the rows drifting apart on tall screens. */
  .shell{
    max-width:var(--shell);
    display:grid;
    grid-template-columns:var(--rail) minmax(0,1fr);
    grid-template-rows:1fr auto;
    align-items:start;
  }

  /* The rail stretches so its divider runs the full height of the column,
     while the content inside it sticks. Flex order lets the identity read
     top-down (mark, name, status, nav) from the source order the
     small-screen grid needs. */
  .rail{
    grid-column:1;align-self:stretch;
    padding:0;
    border-bottom:0;
    border-right:1px solid var(--rule);
  }
  .rail-inner{
    position:sticky;top:0;
    max-height:100vh;overflow:auto;
    display:flex;flex-direction:column;align-items:flex-start;
    padding:40px 26px 34px 48px;
  }
  .mark{order:1;font-size:25px;margin-bottom:18px;}
  .rail-name{order:2;font-size:38px;margin:0;}
  .status{order:3;margin-top:22px;}
  .nav{
    order:4;
    display:block;margin-top:30px;width:100%;
    border-top:1px solid var(--rule);padding-top:16px;
  }
  .nav a{display:block;padding:7px 0;}
  .nav a::after{bottom:4px;}

  .main{
    grid-column:2;
    padding:40px 48px 10px;
    min-width:0;
  }
  .main .sec-head:first-child{border-top:0;margin-top:0;padding-top:0;}

  /* Prose keeps a readable measure even though the column is wider. */
  .entry-blurb{max-width:var(--measure);}

  .bio{grid-template-columns:minmax(0,1fr) minmax(320px,380px);column-gap:48px;}

  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}

  .foot{grid-column:1 / -1;}
}

@media (min-width:1400px){
  :root{--shell:1260px;--rail:270px;}
  .bio{grid-template-columns:minmax(0,1fr) minmax(340px,410px);}
}

/* Users who prefer reduced motion get no pulsing dot. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .status .dot{animation:none;}
  *{transition:none !important;}
}