/* arindamjana.com — the whole stylesheet.
   One hairline weight, no radius, no shadow but the dropped menu, and
   whitespace doing the separating. */

@font-face { font-family: Archivo; font-weight: 100 900; font-display: swap;
  src: url(/fonts/archivo-var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Archivo; font-weight: 100 900; font-display: swap;
  src: url(/fonts/archivo-var-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Hauora; font-weight: 400; font-display: swap;
  src: url(/fonts/hauora-400.woff2) format("woff2"); }
@font-face { font-family: Hauora; font-weight: 500; font-display: swap;
  src: url(/fonts/hauora-500.woff2) format("woff2"); }

:root {
  --ground:#FFFFFF;
  --ink:#14120F;          /* 18.7:1 */
  --ink-2:#56504B;        /*  7.9:1 */
  --ink-3:#7C736D;        /*  4.6:1 — the floor for anything at caption size */
  --accent:#EF1224;       /*  the stamp red, sampled not chosen; marks only   */
  --link:#C00F1D;         /*  6.3:1 — the same red, deepened until it reads   */
  --hair:#E6E1DC;
  --display:Archivo, "Helvetica Neue", Arial, sans-serif;
  --body:Hauora, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter:clamp(16px, 5vw, 40px);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:7.5rem; }   /* a jump to a footnote clears the fixed masthead */
body {
  margin:0; background:var(--ground); color:var(--ink);
  font:400 16.5px/1.72 var(--body);
  display:flex; flex-direction:column; min-height:100vh;
}

/* ---- masthead: mark left, three bars right, at every width -------------- */
/* it stays put while the page scrolls beneath it, on its own ground and with no
   rule under it */
.masthead {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:var(--gutter) var(--gutter) 22px;
  position:sticky; top:0; z-index:20; background:var(--ground);
}
.mark { display:block; line-height:0; }
.mark img { width:50px; height:50px; display:block; }

.menu { position:relative; }
.menu > summary {
  list-style:none; cursor:pointer; display:block;
  width:44px; height:44px; padding:14px 7px;   /* 44px of target around 30px of mark */
  margin:3px -7px 0 0;
}
.menu > summary::-webkit-details-marker { display:none; }
.menu > summary:focus-visible { outline:2px solid var(--link); outline-offset:2px; }
.bars, .bars::before, .bars::after {
  display:block; width:30px; height:1.5px; background:var(--ink); content:"";
}
.bars { position:relative; }
.bars::before { position:absolute; top:-8px; }
.bars::after  { position:absolute; top:8px; }
.menu[open] .bars { background:var(--accent); }
.menu[open] .bars::before, .menu[open] .bars::after { background:var(--accent); }

/* an absolutely positioned child of a closed <details> is still painted in
   Chrome, so the panel is hidden explicitly rather than by the element */
.menu .panel { display:none; }
.menu[open] .panel {
  display:block; position:absolute; right:0; top:46px; z-index:10;
  width:min(280px, calc(100vw - 2 * var(--gutter)));
  background:var(--ground); border:1px solid var(--hair);
  box-shadow:0 14px 34px rgba(20,18,15,.09);
  padding:14px 0;
}
.panel a {
  display:block; padding:8px 20px; text-decoration:none; color:var(--ink);
  font:500 19px/1.3 var(--display); letter-spacing:-.01em;
}
.panel a em {
  display:block; font:400 13px/1.45 var(--body); font-style:normal;
  color:var(--ink-3); letter-spacing:0; margin-top:2px;
}
.panel a:hover, .panel a:focus-visible { color:var(--link); }
.panel a.here { box-shadow:inset 2px 0 0 var(--accent); }

/* Interactives: a summary styled as one more item, with a chevron pointing right;
   on a phone, where the apps open beneath it, the chevron turns down when open */
.sub summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:8px 20px; color:var(--ink); font:500 19px/1.3 var(--display); letter-spacing:-.01em;
}
.sub summary::-webkit-details-marker { display:none; }
.sub summary:hover, .sub summary:focus-visible, .sub[open] summary { color:var(--link); }
.sub summary:focus-visible { outline:2px solid var(--link); outline-offset:-2px; }
.chev { width:7px; height:7px; border:solid currentColor; border-width:1.5px 1.5px 0 0;
  transform:rotate(45deg); margin-left:12px; }
.sub .subpanel { display:none; }               /* hidden explicitly, as the panel is */
.sub[open] .subpanel { display:block; }
@media (min-width:700px) {
  .sub { position:relative; }
  .sub[open] .subpanel {
    position:absolute; right:100%; top:-14px; width:280px;
    background:var(--ground); border:1px solid var(--hair);
    box-shadow:0 14px 34px rgba(20,18,15,.09); padding:14px 0;
  }
}
@media (max-width:699px) {
  .sub[open] .chev { transform:rotate(135deg); }
  .sub .subpanel a { padding-left:36px; }
}

/* ---- the sheet ---------------------------------------------------------- */
main { flex:1 0 auto; padding:clamp(34px, 7vw, 62px) var(--gutter) 90px; }
main.empty { padding:0; }
/* one column on every page, so moving between pages never moves the text.
   59rem holds 864px of text on a wide screen, 1.5 times the 41rem column it
   replaced on 6 October 2026, at his request; below that it is the screen's
   width less the gutters, so tablets and phones need nothing of their own.
   width:100% because body is a flex column, where an auto-margined child would
   otherwise shrink to its content and a page of short titles would come out
   narrower than a page of prose */
.sheet { width:100%; max-width:59rem; margin:0 auto; }

h1 { font:600 31px/1.18 var(--display); letter-spacing:-.02em; margin:0 0 .5em; }
h2 { font:600 25px/1.25 var(--display); letter-spacing:-.02em; margin:2.2em 0 .6em; }
h3 { font:600 19px/1.3  var(--display); letter-spacing:-.015em; margin:2em 0 .5em; }

.eyebrow {
  font:500 11.5px/1 var(--display); letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 1.1em;
}
/* the date in the same small capitals as the series line above the title, and
   as the dates in the blog list, so a date looks the same wherever it appears */
.dateline { font:500 11.5px/1 var(--display); letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 1.8em; font-variant-numeric:tabular-nums; }

.prose p, .prose li { margin:0 0 1.25em; }
.prose a { color:var(--link); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; }
.prose a:hover { text-decoration-thickness:2px; }
/* a break within a post or About is three dots, centred; the faint line is kept
   for the lists on Blog and Portfolio, and for the rule above a post's footnotes */
.prose hr { border:0; height:auto; margin:2.2em 0; text-align:center; overflow:visible; }
.prose hr::before { content:"..."; color:var(--ink-3); letter-spacing:.5em; padding-left:.5em; }
.prose blockquote { margin:2em 0; padding-left:1.2em; border-left:1px solid var(--accent);
  color:var(--ink-2); }
.prose img { max-width:100%; height:auto; display:block; margin:2.2em auto; }
.prose code { font-size:.9em; background:#F6F3F1; padding:.1em .35em; }

/* tables in a post: hairline rows and figures in tabular numerals; the heads
   keep their own case, because "(n)" and "m²" are notation; a table wider than
   the column scrolls sideways rather than squeezing */
.prose table { display:block; overflow-x:auto; border-collapse:collapse; margin:1em 0 2.4em;
  font-size:13px; line-height:1.5; font-variant-numeric:tabular-nums; }
.prose th { font:500 13px/1.4 var(--display); color:var(--ink-2); text-align:left; vertical-align:bottom;
  padding:0 1.4em .7em 0; border-bottom:1px solid var(--ink-3); }
.prose td { padding:.6em 1.4em .6em 0; border-bottom:1px solid var(--hair); vertical-align:top; }
.prose tr:last-child td { border-bottom:0; }

/* captions of tables and figures, and their source lines, at the size of the
   table they describe, sitting close to it rather than a paragraph's distance away */
.prose p.caption { font-size:13px; line-height:1.55; margin:0 0 .7em; }
.prose p.caption + table { margin-top:0; }
.prose p.caption + p > img:only-child { margin-top:.4em; }
.prose table:has(+ p.caption) { margin-bottom:.7em; }
.prose p:has(> img:only-child):has(+ p.caption) > img { margin-bottom:.7em; }
.prose table + p.caption, .prose p:has(> img:only-child) + p.caption { margin-bottom:2.2em; }

/* footnotes: a quieter block under a hairline, the markers in the link red */
.prose sup { line-height:0; font-size:.75em; }
.prose .footnote-ref { text-decoration:none; padding:0 .1em; }
.prose .footnote { margin-top:3em; font-size:13px; line-height:1.6; color:var(--ink-2); }
.prose .footnote hr { margin:0 0 1.4em; border-top:1px solid var(--hair); }
.prose .footnote hr::before { content:none; }
.prose .footnote ol { padding-left:1.2em; }
.prose .footnote-backref { text-decoration:none; }
.back { margin-top:3.4em; font:500 13px/1 var(--display); }
.back a { color:var(--ink-3); text-decoration:none; }
.back a:hover { color:var(--link); }

/* ---- the blog and portfolio lists --------------------------------------- */
/* one row pattern for both: a small label on the left — the date on the
   blog, the kind of thing on the portfolio — and the title beside it */
.group { margin-bottom:2.6em; }
h1 + .group { margin-top:2.4em; }
.group h2 {
  font:600 25px/1.2 var(--display); font-variant-numeric:tabular-nums;
  margin:0; padding-bottom:.45em; border-bottom:1px solid var(--hair);
}   /* no margin under it: its rule is the first row's top rule, so the first row sits as every other does */
.group ul { list-style:none; margin:0; padding:0; }
.group li { display:grid; grid-template-columns:9.5rem 1fr; gap:1rem; align-items:center;
  padding:.62em 0; border-bottom:1px solid var(--hair); }
.group li:last-child { border-bottom:0; }
.label {
  font:500 11.5px/1.7 var(--display); letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
/* every row is already ruled off, so a link needs no underline until hovered */
.group a { color:var(--ink); text-decoration:none; }
.group a:hover { color:var(--link); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px; }
.unlinked { color:var(--ink-2); }
@media (max-width:560px) { .group li { grid-template-columns:1fr; gap:.15rem; } }

/* ---- the Get in touch button at the foot of About --------------------- */
.contact-cta { margin-top:3.2em; padding-top:2.2em; border-top:1px solid var(--hair); text-align:right; }
.button {
  display:inline-block; font:500 16.5px/1 var(--display); letter-spacing:-.01em;
  padding:14px 26px; background:var(--ink); color:var(--ground);
  text-decoration:none; border:0; cursor:pointer;
}
.button:hover { background:var(--link); }

/* ---- footer ------------------------------------------------------------- */
.siteFoot {
  flex:none; padding:10px var(--gutter) 12px;   /* one line of small print needs little room */
  border-top:1px solid var(--hair);
  font:400 11.5px/1.6 var(--body); color:var(--ink-3);
  text-align:right;            /* bottom right, under the three bars, as the stamp sits over the left */
}