/* Cyrus Omar's webpage, for pages rendered by (vendored) arod in the frame
   set up by site/main.ml. Layout and look follow the original hand-written
   site (public/style.css): teal cartographer header with the tagline, a
   320px left column of cards, and a right column that now has a tab bar
   (Projects / Papers / Talks / Notes) above the page content. */

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,400i,700&display=swap");

:root {
  /* Same look regardless of the OS light/dark setting. */
  color-scheme: only light;
  --paper: wheat; /* #f5deb3, as on the original site */
  /* Boldness of the tan map lines on the page (0 = flat wheat). */
  --paper-lines: 40;
  /* "Vellum": translucent cream, so the map lines show faintly through. */
  --card: rgba(255, 253, 247, 0.72);
  /* Card outline ("pale"). */
  --card-border: #efe2bd;
  /* Corner rounding for cards (px). */
  --card-radius: 0px;
  --ink: #222;
  --ink-soft: #444;
  --muted: #888;
  --rule: #ddd;
  --link: #008068;
  --link-hover: #004048;
  --venue: #446271;
  --award: #642296;
  --header-bg: #223939;
  /* What the header actually looks like once the texture is overlaid
     (measured from a render); use this to match it elsewhere. */
  --header-seen: #233a3a;
  --header-ink: #fff;
  --header-accent: #d5ffb6;
  --tag-bg: #efe4c6;
}

* { box-sizing: border-box; }

body {
  /* Strength of the tan map lines on the page: 0 = flat wheat, 1 = full. */
  --paper-texture: 1;
  margin: 0;
  color: var(--ink);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 11pt;
}

/* The page colour lives on <html> (the canvas), so the texture below blends
   with it; an isolated <body> would blend with nothing and just grey it. */
html { background: var(--paper); }

/* The cartographer texture's map lines, drawn slightly darker (tan) over
   the page. The texture is inverted so its lines are darker than its
   background, with brightness putting its mean at mid-grey: soft-light then
   leaves the wheat between the lines as it is and darkens the lines.
   (A hard threshold instead makes the lines dotted, since it picks up the
   texture's pixel noise.) Fixed, so it stays put while scrolling. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../images/cartographer.png");
  filter: blur(0.7px) invert(1) brightness(0.583) contrast(var(--paper-lines));
  mix-blend-mode: soft-light;
  opacity: var(--paper-texture);
  pointer-events: none;
}

h1, h2, h3, h4, h5, h6 { font-family: Montserrat, sans-serif; }

p { margin: 0 0 10px; line-height: 1.4; }
ul { line-height: 1.4; margin: 0; list-style: square inside; padding: 5px; }
li { margin: 0; padding: 0; }

a { color: var(--link); text-decoration: none; font-weight: bold; }
a:hover { color: var(--link-hover); }

h2 {
  margin: -3px 0 10px;
  padding-bottom: 5px;
  font-weight: bold;
  font-size: 105%;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
h3 { margin: 15px 0 5px; font-size: 105%; color: var(--ink-soft); }
h4 { margin: 15px 0 5px; font-size: 90%; color: #777; }

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

/* {1 Header} */

/* Header and bio card use the original site's background (a teal tint over
   the cartographer texture over #223939). cartographer.png is very low
   contrast (grey levels 30-46 of 255), so its lines barely show; a second,
   contrast-lifted copy of it is overlaid to strengthen them. Its brightness
   puts its mean at mid-grey, so the overlay leaves the overall colour as on
   the original site. */
.header,
.card.bio-card {
  /* Strength of the extra map lines: 0 = original site, 1 = strongest. */
  --map-lines: 0.45;
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(rgba(31, 122, 122, 0.25), rgba(31, 122, 122, 0.25)),
    url("../images/cartographer.png"),
    var(--header-bg);
}

.header::before,
.card.bio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: url("../images/cartographer.png");
  filter: brightness(3.5) contrast(2.2) blur(0.5px);
  mix-blend-mode: overlay;
  opacity: var(--map-lines);
  pointer-events: none;
}

.header {
  font-family: Montserrat, sans-serif;
  font-size: 125%;
  padding: 20px;
  color: var(--header-ink);
}

.header > h1 { margin: 0; font-weight: normal; font-size: 18pt; }
.header strong { font-weight: normal; }
.header .home strong { font-weight: bold; }
.header a.home, .header a.home:hover { color: inherit; }
#tagline-1 { color: var(--header-accent); }

/* {1 Two-column layout} */

.main-area {
  padding: 15px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  column-gap: 15px;
  max-width: 1280px;
}

.card {
  background: var(--card);
  padding: 15px;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  font-size: 11pt;
  margin-bottom: 15px;
}

.bio-card {
  color: white;
  border: none;
}
.bio-card h2 { color: white; }
.bio-card a { font-weight: normal; color: #f0ffb6; }
.bio-card a:hover { color: #cbff00; }

#portrait {
  width: 200px;
  border-radius: 50%;
  border: 1px solid #576f6f;
  padding: 1px;
  margin-bottom: 3px;
}

.pronouns { color: #ccc; margin-left: 4px; }

.sidebar-items > div { padding: 10px 10px 0 0; }

.image-left { display: grid; grid-template-columns: auto 1fr; width: 100%; }
.image-left svg { color: lightgray; }
.image-left-img { width: 1em; }
.image-left-txt { padding-left: 10px; position: relative; top: -2px; }
/* X, Instagram, LinkedIn, GitHub, ORCID: a row of icons under Bluesky */
.social-links { display: flex; align-items: center; gap: 13px; min-height: 1.5em; top: 0; }
.social-links svg { display: block; width: 15px; height: 15px; color: inherit; }
.svg-inline--fa { width: 1em; position: relative; left: 3px; top: 1px; }

.news-list, .year-list { padding-left: 0; margin-bottom: -10px; }
.news-item, .year-list-item { margin-bottom: 10px; }
.year-list-item { display: grid; grid-template-columns: 3em auto; }
.service-year { color: #888; font-weight: bold; }
.date { color: #999; font-weight: normal; font-size: 90%; margin-bottom: 3px; }
.course { font-weight: bold; }
.award, .paper-award { color: var(--award); font-weight: bold; }
.award:hover { color: #35029c !important; }

/* {1 Tab bar} */

.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 0;
  font-family: Montserrat, sans-serif;
}

/* Inactive tabs are solid cream like the cards, so they hold up against the
   textured background. */
.tab {
  padding: 7px 16px 6px;
  border-radius: 4px 4px 0 0;
  color: var(--ink-soft);
  background: var(--card);
  box-shadow: inset 0 -2px 0 rgba(210, 180, 140, 0.6);
  font-weight: bold;
}
.tab:hover { color: var(--link); }
.tab.active {
  background: var(--header-seen);
  color: var(--header-accent);
  box-shadow: none;
}

/* The tab bar sits on a rule in the header colour, so tabs read as folder
   tabs over the content below. */
.content-grid {
  border-top: 3px solid var(--header-seen);
  padding-top: 15px;
}

/* Content pages (papers, talks, notes, individual entries): one card. */
.content-grid > article,
.content-grid > aside:not(:empty) {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 15px 20px;
}
.content-grid > aside:empty { display: none; }
.content-grid > aside:not(:empty) { margin-top: 15px; }
article img { max-width: 100%; height: auto; }

/* {1 Home: project cards} */

.card-list .card { margin-bottom: 15px; }
.project-card h2 a { color: var(--ink-soft); }
.project-card h2 a:hover { color: var(--link); }
/* a figure from one of the project's papers, in a circle like the portrait */
.project-image { float: right; margin: 0 0 8px 14px; }
.project-image img {
  display: block;
  width: 115px;
  height: 115px;
  border-radius: 50%;
  border: 1px solid #576f6f;
  padding: 1px;
  background: #fff;
}
.project-card::after { content: ""; display: block; clear: both; }

/* {2 Papers (home cards and arod listings)} */

.paper {
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  line-height: 1.5;
}
.paper-venue { color: var(--venue); font-weight: bold; min-width: 110px; padding-right: 10px; }
.venue-note { color: var(--muted); font-weight: normal; }
.paper-authors { color: var(--ink-soft); }
.me-author { text-decoration: underline; }
/* PDF / DOI / BIB / URL / video icons, under the venue */
.paper-links { display: flex; gap: 7px; margin: 3px 0 2px; }
.paper-links svg { display: block; width: 15px; height: 15px; }
.paper-links a { font-weight: normal; color: var(--venue); }
.paper-links a:hover { color: var(--link); }
/* a paper's own page (arod's markup) reuses .paper, but is not a two-column entry */
.paper:has(> .paper-info) { display: block; }
/* in arod's paper listings (project pages, a paper's own page) */
.paper-info .paper-links { margin: 4px 0 12px; }

/* arod's own paper markup on /papers and paper pages */
.paper-info p { margin-bottom: 2px; }
.paper-title { font-family: Montserrat, sans-serif; margin-bottom: 2px; }
.paper-info i { font-style: normal; color: var(--muted) !important; }
.author { color: var(--ink-soft); }

/* {2 Paper and talk cards} */


.talk-card .talk-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 8px;
}
.talk-title { font-family: Montserrat, sans-serif; line-height: 1.35; }
.talk-date { color: var(--muted); font-size: 90%; margin-top: 2px; }
.talk-paper { font-size: 90%; margin-top: 4px; }

/* {1 Notes, metadata, misc} */

/* arod's project pages: a title and Activity / References sections */
.project h1 { font-size: 150%; margin: 4px 0 10px; }
.project h1 ~ h1 { font-size: 120%; margin-top: 22px; }

.note-meta, .title-date { color: var(--muted); font-size: 90%; margin: 4px 0 14px; }
.meta-bullet { margin: 0 6px; }
.tag-label { background: var(--tag-bg); border-radius: 3px; padding: 0 5px; font-size: 90%; }
.inline-icon { width: 0.9em; height: 0.9em; vertical-align: -1px; }
pre, code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 92%; }
pre { background: rgba(0, 0, 0, 0.04); padding: 10px 12px; overflow-x: auto; }
blockquote { margin: 10px 0; padding-left: 12px; border-left: 3px solid var(--rule); color: var(--ink-soft); }
.project-dates, .timeline-year, .timeline-duration { color: var(--muted); }

/* arod puts a search box on every page; the site has no search backend
   (bushel's typesense indexing is not vendored) and nothing opens it. */
.search-modal { display: none; }

/* {1 Footer} */

/* under the page content, in its column */
footer {
  padding: 6px 0 30px;
  color: var(--muted);
  font-size: 90%;
}
footer a { font-weight: 600; }

/* {1 Narrow screens} */

/* {1 Flora}

   A botanical border (drawn by site/flora.ml) in the right margin, only
   when the window is wide enough for a third column. It starts flush with
   the header, so a hanging vine grows out of the bar, and scrolls with it;
   the image is absolutely placed so it never makes the page taller. */

.flora { display: none; }

@media (min-width: 1500px) {
  /* The page is at least the window's height: the header, then the main
     area taking the rest. The border fills the main area (up to a window's
     height), so a short page doesn't scroll just to fit the border. */
  body {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
  }
  .main-area {
    max-width: none;
    grid-template-columns: 320px minmax(0, 915px) minmax(0, 1fr);
  }
  .flora {
    display: block;
    position: relative;
    margin-top: -15px; /* up through .main-area's padding */
    align-self: start;
    height: calc(100% + 15px);
    max-height: 100vh;
  }
  .flora img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left top;
  }
}

@media print { .flora { display: none; } }

@media (max-width: 900px) {
  .main-area { grid-template-columns: minmax(0, 1fr); }
  /* One column: the bio card, the intro card, then the tabs and the page,
     and the rest of the sidebar after that, so the page is not several
     screens down. The columns dissolve so their cards can be reordered. */
  .left-col, .right-col { display: contents; }
  .main-area > *, .left-col > *, .right-col > * { order: 5; }
  .left-col > .bio-card { order: 1; }
  .right-col > .bio-card { order: 2; }
  .right-col > .tab-bar { order: 3; }
  .right-col > .content-grid { order: 4; margin-bottom: 15px; }
  .right-col > footer { order: 6; }
}

/* {1 Reading page}

   A note on its own page (as shared by its link): the header bar, then just
   the note in a column of its own, with the botanical border on wide
   windows. */

.reading-area {
  padding: 15px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.reading { max-width: 760px; }
.reading .back { display: inline-block; margin: 4px 0 12px 2px; font-weight: normal; }
.reading article {
  background: var(--card);
  padding: 22px 26px;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  font-size: 105%;
  line-height: 1.6;
}
.reading article h2 { font-size: 150%; border: 0; margin: 0; padding: 0; }
.reading .note-date { color: var(--muted); margin: 2px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
/* arod's line under the note repeats the date; the rule under it closes nothing */
.reading .note-meta, .reading article > hr { display: none; }
.reading article ul { margin: 10px 0; padding: 0 5px; }
.reading article li:last-child { margin-bottom: 0; }
.reading article li { margin-bottom: 6px; }
/* screenshots in notes: ![%c](/images/notes/x.png "caption") */
.reading figure { margin: 16px 0; }
.reading figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--card-border); }
.reading figcaption { color: var(--muted); font-size: 90%; line-height: 1.45; margin-top: 6px; text-align: center; }

@media (min-width: 1500px) {
  /* the border sits where it does on the other pages */
  .reading-area { grid-template-columns: minmax(0, 1265px) minmax(0, 1fr); }
}