/* ============================================================
   Iacopo Seri — stylesheet
   Everything visual lives in this one file.

   TO CHANGE THE FONTS: edit the two lines marked "FONT" below.
   TO CHANGE COLOURS / TEXT WIDTH: edit the lines above them.
   ============================================================ */

:root{
  --bg:       #ffffff;   /* page background            */
  --ink:      #111111;   /* main text                  */
  --muted:    #666666;   /* dates, labels, captions     */
  --rule:     #dddddd;   /* thin dividing lines         */
  --link:     #0000ff;   /* links — pure blue           */
  --visited:  #551a8b;   /* links you've already opened  */
  --measure:  38rem;     /* max width of a line of text  */

  /* FONT — reading text (titles + body): */
  --serif: "Times New Roman", Times, serif;
  /* FONT — menu, labels, dates, captions: */
  --label: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:18px; line-height:1.5; }

a{ color:var(--link); }
a:visited{ color:var(--visited); }

/* the small "label" voice: title, menu, section labels, dates, captions */
.mono, .site-title, .role, nav, figcaption, .k, .y, .foot{
  font-family:var(--label); font-size:13px; letter-spacing:.01em;
}

/* --- layout: fixed menu left, content right --- */
.wrap{ display:flex; align-items:flex-start; gap:3rem; max-width:60rem; margin:0 auto; padding:2.5rem 2rem 5rem; }
.side{ flex:0 0 11rem; position:sticky; top:2.5rem; }
.main{ flex:1 1 auto; min-width:0; max-width:var(--measure); }

/* --- the menu (stays blue even after visiting) --- */
.site-title{ font-size:14px; font-weight:700; margin:0 0 .2rem; }
.site-title a, .site-title a:visited{ color:var(--ink); text-decoration:none; }
.role{ color:var(--muted); margin:0 0 1.6rem; }
nav ul{ list-style:none; margin:0; padding:0; }
nav li{ margin:0 0 .3rem; }
nav a, nav a:visited{ color:var(--link); }
nav a.here, nav a.here:visited{ color:var(--ink); font-weight:700; text-decoration:none; }
.foot{ color:var(--muted); margin-top:1.8rem; line-height:1.5; }
.foot a, .foot a:visited{ color:var(--muted); }

/* --- headings & body --- */
.main h1{ font-size:18px; font-weight:700; margin:0 0 .7rem; }
.main h2{ font-family:var(--label); font-size:12px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:2.4rem 0 .6rem; }
.main p{ margin:0 0 1.05rem; }
.sep{ color:var(--muted); margin:.7rem 0; }

/* --- a plain list (the "I am" list) --- */
.plainlist{ list-style:none; margin:0 0 1.05rem; padding:0; }
.plainlist li{ margin:.1rem 0; }

/* --- THE INDEX (single alphabetical list) --- */
.index{ list-style:none; margin:0; padding:0; }
.index li{ margin:0; }
.index a, .index a:visited{ display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline; padding:.2rem 0; border-bottom:1px solid var(--rule); text-decoration:none; }
.index a:hover .t{ text-decoration:underline; }
.index .t{ font-family:var(--serif); }                  /* title = reading font */
.index .y{ font-family:var(--label); color:var(--muted); white-space:nowrap; }  /* year = label font, muted */
/* the title colour is inherited from the link: blue, then purple once opened */

/* --- a work's data block (any medium) --- */
.fields{ margin:0 0 1.4rem; }
.fields p{ margin:.14rem 0; }
.fields .k{ display:inline-block; min-width:7.5rem; color:var(--muted); }

/* --- images --- */
figure{ margin:1.4rem 0; }
figure img{ width:100%; height:auto; display:block; }
figcaption{ color:var(--muted); margin-top:.4rem; }

/* --- a group of images side by side (a series, a set of pages) ---
   Use <div class="grid grid-2"> for two across, "grid-3" for three.
   Put each image in its own <figure> inside, exactly as usual.       */
.grid{ display:grid; gap:1.1rem; margin:1.4rem 0; }
.grid figure{ margin:0; }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid figcaption{ font-size:12px; }
/* images that open full size when clicked */
a.plain, a.plain:visited{ display:block; text-decoration:none; border:none; }

/* .row does the same job as "grid grid-2". Kept so that older pages, or
   anything you write from memory using .row, still lays out correctly.
   For new pages prefer <div class="grid grid-2">. */
.row{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.1rem; margin:1.4rem 0; }
.row figure{ margin:0; }

hr{ border:none; border-top:1px solid var(--rule); margin:1.8rem 0; }

/* --- narrow screens: menu moves to the top --- */
@media (max-width:640px){
  .wrap{ flex-direction:column; gap:1.6rem; padding:1.5rem 1.2rem 3rem; }
  .side{ position:static; flex-basis:auto; width:100%; }
  .main{ max-width:none; }
  .grid-3{ grid-template-columns:repeat(2, 1fr); }   /* three across becomes two */
  .row{ grid-template-columns:1fr; }                 /* rows stack on a phone */
}