/* =====================================================================
   SHREEVIRAJ MATALE
   A document, not a dashboard. Serif sets the structure, sans carries
   the content, and anything clickable is drawn like it can be clicked.
   ===================================================================== */

/* ---------- FONTS ---------- */
/* self hosted. no third party request, no render blocking stylesheet, and
   it still works inside webviews that block cross origin font loads. */
@font-face{
  font-family:"Instrument Serif";
  font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/instrument-serif-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Serif";
  font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/instrument-serif-400-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/inter-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/inter-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/inter-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- TOKENS ---------- */
:root{
  /* paper */
  --paper:#FBF8F3;
  --paper-2:#F4F0E8;
  --ink:#191512;
  --ink-2:#4A423B;
  --ink-3:#8C8178;
  --rule:rgba(25,21,18,.14);
  --rule-2:rgba(25,21,18,.07);
  --accent:#B8431E;
  --accent-soft:rgba(184,67,30,.16);
  --link:#2846C8;

  /* type */
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --t-name:clamp(2.85rem,8.5vw,4.75rem);
  --t-sec:clamp(1.8rem,4.6vw,2.6rem);
  --t-lede:clamp(1.0625rem,1.9vw,1.25rem);
  --t-body:1.0625rem;
  --t-meta:.8125rem;

  /* measure */
  --col:41rem;
  --pad:clamp(1.5rem,5vw,2.5rem);

  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}

:root[data-theme="dark"]{
  --paper:#15120F;
  --paper-2:#1D1915;
  --ink:#EFE8DE;
  --ink-2:#BCB1A4;
  --ink-3:#847A6F;
  --rule:rgba(239,232,222,.16);
  --rule-2:rgba(239,232,222,.08);
  --accent:#E67E52;
  --accent-soft:rgba(230,126,82,.18);
  --link:#8FA8FF;
  color-scheme:dark;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.72;
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background .45s var(--ease),color .45s var(--ease);
}
ul,ol,dl{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}
b,strong{font-weight:500}
::selection{background:var(--accent);color:var(--paper)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--paper);
  padding:.7rem 1rem;z-index:10;
}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- PAGE ---------- */
.page{
  max-width:calc(var(--col) + var(--pad) * 2);
  margin:0 auto;
  padding:
    calc(clamp(3.5rem,9vw,6.5rem) + env(safe-area-inset-top))
    calc(var(--pad) + env(safe-area-inset-right))
    calc(clamp(3rem,7vw,5rem) + env(safe-area-inset-bottom))
    calc(var(--pad) + env(safe-area-inset-left));
}
body.smooth .scroller{position:fixed;top:0;left:0;width:100%;will-change:transform}

/* ---------- MASTHEAD ---------- */
.mast{margin-bottom:0}

.mast__name{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--t-name);
  line-height:.94;
  letter-spacing:-.018em;
  margin-bottom:.9rem;
}
.mast__name em{font-style:italic;color:var(--ink)}

.mast__place{
  display:flex;align-items:center;gap:.6rem;
  font-size:var(--t-meta);
  letter-spacing:.015em;
  color:var(--ink-3);
  margin-bottom:clamp(1.6rem,4vw,2.4rem);
}
.mast__place .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-3);display:block}
#clock{font-variant-numeric:tabular-nums}

.lede{
  font-size:var(--t-lede);
  line-height:1.62;
  color:var(--ink-2);
  max-width:34em;
  margin-bottom:.75rem;
}
.lede b{
  color:var(--accent);
  font-weight:400;
  font-variant-numeric:tabular-nums;
  /* the last digits are always moving, so the glyph cells must not */
  font-feature-settings:"tnum" 1;
}

/* the double struck X, same mark the links row uses */
.xg{
  font-family:"Segoe UI Symbol","Apple Symbols","Cambria Math",var(--serif),serif;
  font-size:1.08em;
  line-height:1;
  letter-spacing:0;
}
.sr{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.lede--sub{color:var(--ink-3);margin-bottom:0}

/* ---------- TOOLBAR ---------- */
.toolbar{
  margin-top:clamp(1.8rem,4vw,2.4rem);
  padding-top:clamp(1.4rem,3vw,1.8rem);
  border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:1.4rem;
}
.toolbar__links{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem}
.toolbar__links a{
  font-size:var(--t-meta);
  color:var(--ink-2);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color:var(--rule);
  transition:color .25s var(--ease),text-decoration-color .25s var(--ease);
}
.toolbar__links a span{display:inline-block;transition:transform .25s var(--ease)}
.toolbar__links a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.toolbar__links a:hover span{transform:translate(2px,-2px)}

.toolbar__btns{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---------- BUTTONS ---------- */
/* a pill, filled with ink. no new colour, no glow. it reads as part of the
   document rather than something pasted onto it. */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;
  padding:0 1.35rem;
  border:0;
  border-radius:999px;
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.005em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  -webkit-user-select:none;user-select:none;
  transition:
    background-color .28s var(--ease),
    color .28s var(--ease),
    box-shadow .28s var(--ease),
    transform .28s var(--ease);
}

/* primary */
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--accent);transform:translateY(-1px)}

/* secondary: the same pill drawn as a hairline */
.btn:not(.btn--solid){
  background:transparent;
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--rule);
}
.btn:not(.btn--solid):hover{
  box-shadow:inset 0 0 0 1px var(--ink);
  transform:translateY(-1px);
}
.btn:active{transform:translateY(0)}

.btn__ico{
  width:11px;height:11px;border-radius:50%;
  border:1px solid currentColor;
  background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%);
  flex:none;
  transition:transform .5s var(--ease);
}
:root[data-theme="dark"] .btn__ico{transform:rotate(180deg)}

/* the click ripple, seeded where the theme wipe is */
.btn .ripple{
  position:absolute;border-radius:50%;
  background:currentColor;opacity:.18;
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;z-index:-1;
  animation:ripple .7s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ---------- SECTION ---------- */
.sec{
  padding-top:clamp(2.4rem,5.5vw,3.6rem);
  margin-top:clamp(2.4rem,5.5vw,3.6rem);
  border-top:1px solid var(--rule);
}
.sec--last{padding-bottom:0}

.sec__h{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--t-sec);
  line-height:1.08;
  letter-spacing:-.012em;
  margin-bottom:.15rem;
}
.sec__h + *:not(.sec__note){margin-top:clamp(1.8rem,4vw,2.6rem)}
.sec__h + .time{margin-top:clamp(2rem,4.5vw,3rem)}
.sec__note{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.0625rem;
  color:var(--ink-3);
  margin-bottom:clamp(1.8rem,4vw,2.6rem);
}

/* ---------- ENTRIES ---------- */
.entries{display:flex;flex-direction:column}
.entry{border-bottom:1px solid var(--rule-2)}
.entry:first-child{border-top:1px solid var(--rule-2)}
.entry__a{
  display:block;
  text-decoration:none;
  padding:clamp(1.2rem,3vw,1.6rem) 0;
  position:relative;
  transition:padding-left .35s var(--ease);
}
.entry__a::before{
  content:"";
  position:absolute;left:-.75rem;top:50%;
  width:3px;height:0;
  background:var(--accent);
  transform:translateY(-50%);
  transition:height .35s var(--ease);
}
.entry__a:hover{padding-left:.75rem}
.entry__a:hover::before{height:calc(100% - 2.2rem)}

.entry__t{
  font-size:1.125rem;
  font-weight:500;
  letter-spacing:-.005em;
  line-height:1.4;
  margin-bottom:.3rem;
  transition:color .25s var(--ease);
}
.entry__ar{
  display:inline-block;
  color:var(--ink-3);
  font-weight:400;
  transition:transform .3s var(--ease),color .25s var(--ease);
}
.entry__a:hover .entry__t{color:var(--accent)}
.entry__a:hover .entry__ar{color:var(--accent);transform:translate(3px,-3px)}

/* an entry with nowhere to go keeps the rhythm but drops the affordances */
.entry__a--flat{cursor:default}
.entry__a--flat:hover{padding-left:0}
.entry__a--flat:hover::before{height:0}
.entry__a--flat:hover .entry__t{color:inherit}

.entry__d{color:var(--ink-2);max-width:36em;margin-bottom:.6rem}
.entry__m{display:flex;align-items:center;gap:.7rem;font-size:var(--t-meta);color:var(--ink-3)}
.tagg{
  border:1px solid var(--rule);
  border-radius:99px;
  padding:.1rem .55rem;
  font-size:.75rem;
  letter-spacing:.02em;
}
.entry__yr{font-variant-numeric:tabular-nums}

/* ---------- TIMELINE ---------- */
.time{position:relative;padding-left:0}
.time__rail{
  position:absolute;
  left:17px;top:1.6rem;bottom:1.6rem;
  width:1px;background:var(--rule);
}
.time__rail i{
  position:absolute;left:0;top:0;width:100%;height:0;
  background:var(--accent);display:block;
}
.tl{
  display:grid;
  grid-template-columns:36px 1fr;
  column-gap:clamp(.9rem,2.5vw,1.5rem);
  row-gap:0;
  padding:.8rem 0;
  align-items:start;
}
.tl__y{
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:36px;height:30px;
  border:1px solid var(--rule);
  border-radius:3px;
  background:var(--paper);
  font-size:.8125rem;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--ink-3);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.tl:hover .tl__y{border-color:var(--accent);color:var(--accent)}
.tl p{color:var(--ink-2);max-width:34em;padding-top:.05rem}
/* a second paragraph is still content, so it belongs in the content column
   and not in the 36px lane the year sits in */
.tl__more{grid-column:2;margin-top:.55rem}

/* ---------- EMPHASIS ---------- */
/* two levels. a highlight switches to the display serif, the same face the
   name is set in, which reads as a different voice rather than a louder one.
   the accent colour is only ever for a figure. */
.tl b,.goals b{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:1.16em;
  line-height:1;
  letter-spacing:.002em;
  color:var(--accent);
}
.num,.hi{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:1.16em;
  line-height:1;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.num{white-space:nowrap}
/* asides read as plain sentences, because that is what they are */
.tl em,.goals em{
  font-family:inherit;
  font-style:normal;
  font-size:inherit;
  color:inherit;
}
/* inline links read as links and nothing else: colour, italic, underline */
.tl a,.lede a{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.14em;
  line-height:1;
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:currentColor;
  transition:opacity .2s var(--ease);
}
.tl a:hover,.lede a:hover{opacity:.62}

/* ---------- DEFINITIONS ---------- */
.defs{display:flex;flex-direction:column;gap:clamp(1.3rem,3vw,1.8rem)}
.def{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:.2rem clamp(1rem,3vw,2rem);
}
.def dt{font-weight:500;line-height:1.5}
.def dd{color:var(--ink-2);max-width:34em}
@media (max-width:640px){
  .def{grid-template-columns:1fr}
}

/* ---------- GOALS ---------- */
.goals{display:flex;flex-direction:column;gap:.7rem}
.goals li{
  position:relative;
  padding-left:1.4rem;
  color:var(--ink-2);
  max-width:34em;
}
.goals li::before{
  content:"";
  position:absolute;left:0;top:.72em;
  width:7px;height:1px;background:var(--accent);
}

/* ---------- ASIDE ---------- */
.aside{
  margin-top:clamp(1.6rem,3.5vw,2.2rem);
  padding-left:1rem;
  border-left:2px solid var(--accent-soft);
  color:var(--ink-3);
  font-size:.9375rem;
  max-width:34em;
}
.aside a{
  color:var(--ink);
  font-weight:500;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:var(--accent);
  transition:color .25s var(--ease);
}
.aside a span{display:inline-block;transition:transform .25s var(--ease)}
.aside a:hover{color:var(--accent)}
.aside a:hover span{transform:translate(2px,-2px)}

/* ---------- CONTACT ---------- */
.contact{margin-bottom:.5rem}
.contact__mail{
  font-family:var(--serif);
  font-size:clamp(1.5rem,4.6vw,2.4rem);
  line-height:1.2;
  letter-spacing:-.01em;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:6px;
  text-decoration-color:var(--rule);
  transition:color .25s var(--ease),text-decoration-color .25s var(--ease);
  word-break:break-word;
}
.contact__mail:hover{color:var(--accent);text-decoration-color:var(--accent)}
.contact__alt{color:var(--ink-3)}
.contact__alt a{
  color:var(--ink-2);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:var(--rule);
  transition:color .25s var(--ease),text-decoration-color .25s var(--ease);
}
.contact__alt a:hover{color:var(--accent);text-decoration-color:var(--accent)}

.foot{
  margin-top:clamp(3rem,7vw,4.5rem);
  padding-top:1.2rem;
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;
  font-size:var(--t-meta);
  color:var(--ink-3);
}
.foot b{font-variant-numeric:tabular-nums;font-weight:400}
.hits b{color:var(--accent)}
@media (max-width:640px){
  .foot{gap:.35rem}
  .foot>span{flex:1 1 100%}
}

/* ---------- THEME WIPE ---------- */
/* the new theme is revealed by a circle growing out of the button.
   both snapshots sit still, the clip path does all the work. */
.scroller{view-transition-name:none}

::view-transition-old(root),
::view-transition-new(root){
  animation:none;
  mix-blend-mode:normal;
}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}

/* colour transitions would smear the snapshot, so they sit out the wipe */
:root.vt *,:root.vt *::before,:root.vt *::after{transition:none!important}

/* ---------- TOUCH ---------- */
/* fingers are not cursors: bigger targets, no hover states that stick */
@media (pointer:coarse){
  .btn{padding:0 1.5rem}
  .toolbar__links{gap:.15rem 1.25rem}
  .toolbar__links a{display:inline-block;padding:.5rem 0}
  .tl a,.contact__alt a,.aside a{padding:.15rem 0}
  .entry__a:hover{padding-left:0}
  .btn{min-height:48px}
  .btn:hover{transform:none;box-shadow:inset 0 0 0 1px var(--rule)}
  .btn--solid:hover{transform:none;background:var(--ink)}
}
body{-webkit-tap-highlight-color:rgba(0,0,0,.08)}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}