/* ==========================================================================
   shatrughandangi.com — site styles
   Self-contained: no framework. Replaces Pico CSS (pico.pink.css) and the
   old custom.css overrides. The palette and type scale are kept identical to
   the previous pink Pico theme so the site looks the same.

   Sections
     1.  Design tokens
     2.  Reset & base
     3.  Typography
     4.  Links
     5.  Layout (containers, grid)
     6.  Header & nav
     7.  Buttons
     8.  Cards (article)
     9.  Tables
    10.  Media
    11.  Photo gallery  ← featured photo, photo pairs, masonry flow
    12.  Video grid
    13.  Footer
    14.  Accessibility & motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Surfaces & text */
  --bg: #fff;
  --text: #373c44;
  --heading: #2d3138;
  --heading-2: #373c44;
  --heading-3: #424751;
  --muted: #646b79;
  --border: #e7eaef;
  --surface: #fbfbfc;
  --code-bg: #f3f4f6;

  /* Brand (pink) */
  --primary: #c72259;
  --primary-bg: #d92662;
  --primary-hover: #9d1945;
  --primary-hover-bg: #c72259;
  --primary-focus: rgba(246, 84, 126, 0.5);
  --primary-underline: rgba(199, 34, 89, 0.5);
  --on-primary: #fff;
  --selection: rgba(246, 84, 126, 0.25);

  /* Type */
  --font-sans: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    Helvetica, Arial, "Helvetica Neue", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-size: 100%;
  --line-height: 1.5;
  --spacing-vertical: 1rem;

  /* Space & shape */
  --space: 1rem;
  --radius: 0.25rem;
  --radius-photo: 8px;
  --radius-featured: 12px;
  --border-width: 1px;
  --transition: 0.2s ease-in-out;

  /* Elevation */
  --shadow-card: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698),
    0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024),
    0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03),
    0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036),
    0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302),
    0.5rem 1rem 6rem rgba(129, 145, 181, 0.06),
    0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
  --shadow-featured: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Layout */
  --content-width: 800px;
  --gallery-width: 1100px;
  --wide-width: 1200px;
  --gallery-columns: 2;
}

/* Responsive type scale — matches the previous Pico setup exactly. */
@media (min-width: 576px) { :root { --font-size: 106.25%; } }
@media (min-width: 768px) { :root { --font-size: 112.5%; } }
@media (min-width: 1024px) { :root { --font-size: 118.75%; } }
@media (min-width: 1280px) { :root { --font-size: 125%; } }
@media (min-width: 1536px) { :root { --font-size: 131.25%; } }

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* Note: padding is deliberately NOT reset globally — the browser's default
   list indent (padding-inline-start) is what indents <ul>/<ol> content. */
ul,
ol {
  padding-inline-start: 40px;
}

html {
  font-size: var(--font-size);
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--line-height);
}

::selection {
  background-color: var(--selection);
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: var(--spacing-vertical);
  color: var(--heading);
  font-weight: 700;
  text-rendering: optimizeLegibility;
}

/* Only headings that follow something get breathing room above them. */
h1:not(:first-child),
h2:not(:first-child),
h3:not(:first-child),
h4:not(:first-child),
h5:not(:first-child),
h6:not(:first-child) {
  margin-top: var(--heading-space, 1.5rem);
}

h1 { --heading-space: 3rem;     font-size: 2rem;     line-height: 1.125; }
h2 { --heading-space: 2.625rem; font-size: 1.75rem;  line-height: 1.15; color: var(--heading-2); }
h3 { --heading-space: 2.25rem;  font-size: 1.5rem;   line-height: 1.175; color: var(--heading-3); }
h4 { --heading-space: 1.874rem; font-size: 1.25rem;  line-height: 1.2; }
h5 { --heading-space: 1.6875rem; font-size: 1.125rem; line-height: 1.225; }
h6 { --heading-space: 1.5rem;   font-size: 1rem;     line-height: 1.25; }

p,
ul,
ol,
dl,
address,
blockquote,
pre,
table {
  margin-top: 0;
  margin-bottom: var(--spacing-vertical);
}

b,
strong {
  font-weight: bolder;
}

/* Lists use square markers (as the previous theme did). */
ul li {
  list-style: square;
}

:where(ol, ul) li {
  margin-bottom: calc(var(--spacing-vertical) * 0.25);
}

:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
  margin-top: calc(var(--spacing-vertical) * 0.25);
}

hr {
  height: 0;
  margin: var(--spacing-vertical) 0;
  border: 0;
  border-top: 1px solid var(--border);
  color: inherit;
}

code,
kbd,
samp {
  border-radius: var(--radius);
  background-color: var(--code-bg);
  color: var(--muted);
  font-size: 0.875em;
}

blockquote {
  margin: var(--spacing-vertical) 0;
  padding-left: var(--space);
  border-left: 0.25rem solid var(--border);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   4. Links
   -------------------------------------------------------------------------- */
a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--primary-underline);
  text-underline-offset: 0.125em;
  transition: color var(--transition), text-decoration-color var(--transition);
}

a:active {
  color: var(--primary-hover);
  text-decoration-color: var(--primary-hover);
}

/* Hover only where a pointer actually hovers, so a tap on a touch screen
   doesn't leave a link stuck in its hover state. */
@media (hover: hover) {
  a:hover {
    color: var(--primary-hover);
    text-decoration-color: var(--primary-hover);
  }
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.container,
.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space);
  padding-left: var(--space);
}

.container {
  max-width: var(--content-width);
}

.container-fluid {
  max-width: var(--wide-width);
}

@media (min-width: 576px) {
  .container {
    padding-right: 0;
    padding-left: 0;
  }
}

/* Keep the vertical breathing room Pico gave the page landmarks. */
body > header,
body > main,
body > footer {
  padding-block: var(--space);
}

/* Auto-fitting columns: 1 column on phones, side-by-side from 768px up. */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space);
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
}

.grid > * {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   6. Header & nav
   -------------------------------------------------------------------------- */
nav,
nav ul {
  display: flex;
}

nav {
  justify-content: space-between;
  overflow: visible;
}

nav ul {
  align-items: center;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

nav ul:first-of-type {
  margin-left: -0.5rem;
}

nav ul:last-of-type {
  margin-right: -0.5rem;
}

nav li {
  display: inline-block;
  margin: 0;
  padding: 1rem 0.5rem;
  list-style: none;
}

nav li a {
  display: inline-block;
  margin: -0.5rem -0.5rem;
  padding: 0.5rem 0.5rem;
  border-radius: var(--radius);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
button,
[role="button"] {
  display: inline-block;
  padding: 0.75rem 1rem;
  border: var(--border-width) solid var(--primary-bg);
  border-radius: var(--radius);
  background-color: var(--primary-bg);
  color: var(--on-primary);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--line-height);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition);
}

button:active,
[role="button"]:active {
  border-color: var(--primary-hover-bg);
  background-color: var(--primary-hover-bg);
  color: var(--on-primary);
}

button.outline,
[role="button"].outline {
  border-color: var(--primary);
  background-color: transparent;
  color: var(--primary);
}

button.outline:active,
[role="button"].outline:active {
  border-color: var(--primary-hover);
  background-color: transparent;
  color: var(--primary-hover);
}

@media (hover: hover) {
  button:hover,
  [role="button"]:hover {
    border-color: var(--primary-hover-bg);
    background-color: var(--primary-hover-bg);
    color: var(--on-primary);
  }

  button.outline:hover,
  [role="button"].outline:hover {
    border-color: var(--primary-hover);
    background-color: transparent;
    color: var(--primary-hover);
  }
}

/* --------------------------------------------------------------------------
   8. Cards (article)
   -------------------------------------------------------------------------- */
article {
  margin-bottom: var(--space);
  padding: var(--space);
  border-radius: var(--radius);
  background-color: var(--bg);
  box-shadow: var(--shadow-card);
}

article:last-child {
  margin-bottom: 0;
}

/* Article card titles are <h2> for correct heading order; sized like the
   <h3> they replaced so the cards look unchanged. */
article h2,
article h3 {
  margin-top: 0;
}

article h2 {
  font-size: 1.5rem;
  line-height: 1.175;
}

/* Post byline: author photo, name and publish date, under the post title. */
.post-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: calc(var(--spacing-vertical) * 1.5);
}

.post-meta-photo {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

.post-meta-text {
  line-height: 1.35;
}

.post-meta-author {
  display: block;
  font-weight: 600;
}

.post-meta-date {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
}
article h2 {
  font-size: 1.5rem;
  line-height: 1.175;
}

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 18px;
  text-align: start;
}

th,
td {
  padding: calc(var(--space) / 2) var(--space);
  border: 1px solid #ccc;
  text-align: start;
}

thead th,
thead td,
tfoot th,
tfoot td {
  font-weight: 600;
}

th {
  background-color: #f0f0f0;
  font-weight: 700;
}

tbody tr {
  border-bottom: 1px solid #ccc;
}

/* Wide tables scroll sideways instead of stretching the whole page. */
.table-wrap {
  max-width: 100%;
  margin-bottom: var(--spacing-vertical);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   10. Media
   -------------------------------------------------------------------------- */
img,
svg,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
  border-style: none;
}

figure {
  display: block;
  margin: 0;
  padding: 0;
}

figure figcaption {
  padding: calc(var(--space) * 0.5) 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Centred circular portrait at the top of the home page. */
.author-photo {
  display: block;
  width: 240px;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   11. Photo gallery
   -------------------------------------------------------------------------- */

/* --- Desktop breakout -----------------------------------------------------
   The text column is 800px wide, which leaves a lot of unused space on a
   desktop screen. The gallery breaks out of that column, up to
   --gallery-width, staying centred on it. The highlighted photo and the
   gallery flow widen together so they keep their shared edges.

   - `max(100%, ...)` keeps the gallery at least as wide as the column, so
     phones and tablets are completely unaffected.
   - the extra 1rem in the calc leaves room for a classic (non-overlay)
     scrollbar, so the breakout can never introduce sideways scrolling.
   ------------------------------------------------------------------------- */
.gallery-heading,
.featured-photo,
.photo-gallery {
  --gallery-span: min(var(--gallery-width),
                      max(100%, calc(100vw - 2 * var(--space) - 1rem)));
  width: var(--gallery-span);
  margin-inline: calc((100% - var(--gallery-span)) / 2);
}

/* The highlighted photo. Sits above the gallery flow and stays there. */
.featured-photo {
  padding: 0 0 0.75rem;
  margin-bottom: 1.5rem;
  border: 2px solid var(--primary);
  border-radius: var(--radius-featured);
  overflow: hidden;
  box-shadow: var(--shadow-featured);
}

.featured-photo img {
  display: block;
  width: 100%;
  border-radius: 0;
}

.featured-photo figcaption {
  padding: 0.75rem 0.75rem 0;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

/* The rest of the gallery. `columns` gives a natural masonry flow: every
   photo keeps its own aspect ratio and they pack into the columns without
   anyone having to decide which column each photo belongs to. */
.photo-gallery figure {
  margin: 0 0 var(--space);
  break-inside: avoid;
}

.photo-gallery img {
  display: block;
  width: 100%;
  border-radius: var(--radius-photo);
}

.photo-gallery figcaption {
  padding: 0.5rem 0.25rem 0;
  text-align: center;
}

@media (min-width: 768px) {
  .photo-gallery {
    columns: var(--gallery-columns);
    column-gap: var(--space);
  }
}

/* --- Two photos, one shared caption ---------------------------------------
   <figure class="photo-pair">
     <div class="photo-pair-images">
       <img ...><img ...>
     </div>
     <figcaption>One caption for both photos</figcaption>
   </figure>

   The images sit side by side at a matched height, so photos with different
   aspect ratios still line up. `column-span` lets a pair live anywhere in the
   gallery flow while still taking the full width.
   ------------------------------------------------------------------------- */
.photo-pair {
  margin: 0 0 var(--space);
  column-span: all;
}

.photo-pair-images {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
}

.photo-pair-images img {
  width: auto;
  max-width: 100%;
  /* The two photos together span roughly 1.9x their height, so half the
     gallery width is the height at which the pair fills it. */
  height: clamp(200px, 44vw, calc(var(--gallery-width) / 2));
  object-fit: cover;
  border-radius: var(--radius-photo);
}

/* Keep the shared caption on the same line length as the pair above it. */
.photo-pair figcaption {
  max-width: 44rem;
  margin-right: auto;
  margin-left: auto;
}

/* On narrow screens a side-by-side pair would make both photos too small,
   so stack them instead — the shared caption still appears once. */
@media (max-width: 599px) {
  .photo-pair-images {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space);
  }

  .photo-pair-images img {
    width: 100%;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   12. Video grid
   -------------------------------------------------------------------------- */
.video-grid {
  margin-bottom: 1.5rem;
}

.video-grid .eleventy-plugin-youtube-embed {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
footer {
  margin-top: 100px;
}

/* Footer section headings are <h2> so they sit alongside the page's other
   sections rather than jumping a level on pages whose only other heading is
   the <h1>. Sized and coloured like the <h3> they replaced, so the footer
   looks unchanged. The :not(:first-child) form is needed to outrank the
   global heading rule above, which otherwise adds a top margin. */
footer h2,
footer h2:not(:first-child) {
  margin-top: 0;
  font-size: 1.5rem;
  line-height: 1.175;
  color: var(--heading-3);
}

/* The legal line under the footer was wrapped in <small>, but <small> is
   phrasing content and cannot contain a <ul>. `smaller` resolves to the same
   size the <small> element was giving it. */
.lower-footer-legal {
  font-size: smaller;
}

/* --------------------------------------------------------------------------
   14. Accessibility & motion
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.125rem var(--primary-focus);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}