/* Ported from the original Stacey CMS site's screen.css — same grid, type, and colour system. */

/* Design tokens */

:root {
  --color-main: #222;
  --color-highlight: #666;
  --color-bg: #fff;

  --font-family: "Helvetica", helvetica, "Helvetica Neue", arial, sans-serif;
  --font-size-base: 13px;

  /* ch, not px — matches the grid's font-relative scale (see --col-gap and
     the .one–.twelve widths below); --space-lg is deliberately == --col-gap. */
  --space-xs: 0.5ch;
  --space-sm: 1ch;
  --space-md: 1.5ch;
  --space-lg: 2ch;
  --space-xl: 3ch;
  --space-2xl: 4ch;
  --col-gap: 2ch;
}

/* Colours */

body, a { color: var(--color-main); }
body { background: var(--color-bg); }
a { border-bottom: 1px solid #ccc; }
em { color: #999; }
em a { color: var(--color-highlight); }
em.background { color: #BBB; }

/* Typography */

body, input { font-family: var(--font-family); font-size: var(--font-size-base); line-height: 1.3; }
ul li, p, em { font-size: var(--font-size-base); font-style: normal; letter-spacing: -0.01em; }
h1, h2 { font-size: var(--font-size-base); font-weight: normal; }
a { text-decoration: none; }

/* Layout */

body { padding: var(--space-sm) 0px var(--space-2xl); text-align: center; }
/* width: fit-content shrink-wraps to each page's actual row of floated
   .col children (a project page's wide image+description row, a narrower
   about/CV column, or the home page's project grid) so margin: auto
   centers the real content instead of a fixed box sized for the widest
   page, which left narrower pages hugging the left edge. */
div#container { margin: 0px auto; width: fit-content; padding: var(--space-xs) var(--space-lg); text-align: left; }

.col { float: left; margin: 0px 0px 0px var(--col-gap); padding: 0px; }
.col .col { margin: 0px; }

.one { width: 8ch; }
.two { width: 19ch; }
.three { width: 30ch; }
.four { width: 41ch; }
.five { width: 52ch; }
.six { width: 63ch; }
.seven { width: 74ch; }
.eight { width: 85ch; }
.nine { width: 96ch; }
.ten { width: 107ch; }
.eleven { width: 118ch; }
.twelve { width: 129ch; }

h1 em, h2 em { display: block; }

p, h2 { margin: 0px 0px var(--space-xs); }
hr { display: block; clear: both; margin: 0px 0px var(--space-xl); padding: 0px; height: 0px; overflow: hidden; visibility: hidden; }
a img { border: 0px; }
.col hr { margin: 0px 0px var(--space-md); }

h2 { overflow: hidden; }

/* grid, not floated li's — floats let two columns of uneven-height text
   drift out of sync, so a row's rule could land on one column with a gap
   on the other (or double up) instead of spanning both cleanly. */
div#content ul.project-list { margin: 0px 0px 0px var(--space-lg); padding: 0px; list-style: none; width: 640px; display: grid; grid-template-columns: repeat(2, auto); column-gap: var(--space-lg); }
/* only the last category's list gets a closing rule — an internal one
   would double up with the next category's own p.category border-top. */
div#content ul.project-list:last-of-type { border-bottom: 1px solid #ccc; }
ul.project-list div.thumbnail a { border: 0px; }
ul.project-list div.summary { margin: 0px 0px 0px var(--space-lg); }
/* the last p's own margin-bottom can't collapse through a flex item (.summary
   is a new formatting context), so it gets trapped inside .summary's box and
   throws off align-items:center — the visible text ends up above true
   center. Zero it so the box's edge matches the text's real edge. */
ul.project-list div.summary p:last-child { margin-bottom: 0; }

div#content p.category, div#content ul.project-list li, div.description, p.para, div#images, div#media { border-top: 1px solid #ccc; padding: var(--space-lg) 0px 0px; }
/* after the shared rule above, so its padding shorthand doesn't clobber this */
/* flex + centered: thumbnail and summary are unequal heights, and floats
   top-align by default, leaving the shorter column more space below than
   above. Flex context also makes .col's float:left inert (spec behaviour
   for direct flex children), so no separate override is needed. */
div#content ul.project-list li { padding-bottom: var(--space-lg); display: flex; align-items: center; }

div#media { overflow: hidden; }
div.image { margin: 0px 0px var(--space-sm); }

p#footer { margin: 0px 0px 0px 340px; display: inline; line-height: 1.4; }
p#footer em { display: block; }

/* Images always fit their column */

img { max-width: 100%; height: auto; }

/* CV page specific */

body.page-cv em { color: var(--color-main); font-style: italic; }

.cv-section { margin: 0px 0px var(--space-lg); }
.cv-section h2 { margin: 0px 0px var(--space-sm); }
.cv-entry { margin: 0px 0px var(--space-xs); }

/* Responsive / mobile — below this, the fixed float grid stacks to a single
   fluid column instead of overflowing. 134ch renders at ~998px (13px
   Helvetica) plus the body's 16px default margin, so the grid needs ~1014px;
   1024px leaves a small buffer. */

@media (max-width: 1024px) {

  div#container { width: auto; max-width: 100%; box-sizing: border-box; }

  .col { float: none; width: auto; margin: 0 0 var(--space-lg); }
  .col .col { margin: 0 0 16px; }

  div#content ul.project-list { width: auto; margin-left: 0; grid-template-columns: 1fr; }
  /* undo desktop's row flex so image stacks above text, not side by side */
  div#content ul.project-list li { flex-direction: column; align-items: stretch; }
  ul.project-list div.summary { margin: 8px 0 0 0; }

  div.description { margin: 0; }

  /* Project pages: show the description above the gallery, without
     touching desktop's image-left/description-right float order. */
  .project-body { display: flex; flex-direction: column-reverse; }

  p#footer { margin: 0; display: block; text-align: center; }

}