@import url("fonts.css");

/* ==========================================================================
   M D Morgan — Photographer
   Rebuilt from the Cargo original. The layout is a two-page spread: a fixed
   contents rail on the left, the page itself on the right, and a soft spine
   shadow down the middle.

   Type note: the original used ABC Marist (licensed through Cargo and not
   transferable). Newsreader is the substitute — a variable text serif with
   the same oldstyle figures and editorial colour.
   ========================================================================== */

:root{
  /* Cargo scaled the root font size with the viewport (0.72vw at 1440px).
     Clamped here so it stays readable on very small and very large screens. */
  --ink-1: rgba(0,0,0,.85);
  --ink-2: rgba(0,0,0,.75);
  --ink-3: rgba(0,0,0,.6);
  --ink-4: rgba(0,0,0,.4);
  --ink-5: rgba(0,0,0,.25);
  --paper: #fff;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --rail: 50vw;          /* width of the left contents page */
  --pad: 4rem;
}

html{
  font-size: clamp(9.5px, .72vw, 13px);
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink-1);
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 350;
  line-height: 1.15;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: inherit; text-decoration: none; }
a:active, .zoomable:active{ opacity: .7; }

/* width/height attributes are on every <img> so the browser can reserve the
   right box before the file arrives; height:auto lets it scale instead of
   honouring the literal pixel height. */
img{ display: block; max-width: 100%; height: auto; }
picture{ display: block; }

h1, h2{
  margin: 0;
  font-family: var(--serif);
  font-weight: 350;
  letter-spacing: -.01em;
  color: var(--ink-1);
}
h1{ font-size: 5.3rem; line-height: 1; }
h2{ font-size: 4.25rem; line-height: 1.1; }

i, em{ font-style: italic; }

.small-caps{
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: .05em;
  font-variant-numeric: oldstyle-nums;
}

hr{ background: var(--ink-2); border: 0; height: 1px; display: block; }

ol{ margin: 0; padding: 0 0 0 2.5em; font-variant-numeric: oldstyle-nums; }
ul{ margin: 0; padding: 0 0 0 2em; }
blockquote{ margin: 0; padding: 0 0 0 2em; }

sub{ position: relative; vertical-align: baseline; top: .3em; }
sup{ position: relative; vertical-align: baseline; top: -.4em; }

:focus-visible{ outline: 2px solid var(--ink-2); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   The spread
   -------------------------------------------------------------------------- */

.spine{
  position: fixed;
  top: 0;
  left: var(--rail);
  width: 1px;
  height: 100%;
  box-shadow: 0 0 6rem .2rem rgba(0,0,0,.4);
  background: rgba(0,0,0,.08);
  pointer-events: none;
  z-index: 2;
}

.rail{
  position: fixed;
  top: 0;
  left: 0;
  width: var(--rail);
  height: 100%;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  z-index: 3;
}

.rail__mark{
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  width: 14.1%;
}
.rail__mark img{ width: 100%; height: auto; }

.rail__title{ margin-bottom: 3.4rem; }
.rail__title h2 a{ color: inherit; }

.rail nav ol{ margin-top: .6em; }
.rail nav li{ padding-bottom: .12em; }
.rail nav a:hover, .rail__aside a:hover{ text-decoration: underline; }
.rail nav a[aria-current="page"],
.rail__aside a[aria-current="page"]{ text-decoration: underline; }

.rail__aside{ margin-top: 3.2rem; padding-left: 2.5em; }

.page{
  margin-left: var(--rail);
  width: var(--rail);
  min-height: 100vh;
  padding: var(--pad);
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Galleries — Cargo's "columnized" layout: N columns, each item placed in the
   currently shortest column. site.js does the placing; without JS the images
   fall back to a single readable column.
   -------------------------------------------------------------------------- */

.gallery{
  --cols: 3;
  --gutter: 2.4rem;
  display: flex;
  gap: var(--gutter);
  align-items: flex-start;
  margin: 0 0 var(--gutter);
}
.gallery__col{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}
.gallery:not(.is-columnized){ flex-direction: column; }
.gallery picture, .gallery img{ width: 100%; }

.zoomable{ cursor: zoom-in; }

figure{ margin: 0; }

/* Read more / read less on the essay pages. The original used HTML entities
   inside a <style> block, which browsers never decode — the button rendered
   with no label and zero size, so the essay could not be opened. */
.rm-wrap{ position: relative; }
.rm-toggle{ position: absolute; opacity: 0; width: 0; height: 0; }
.rm-more{ display: none; }
.rm-toggle:checked ~ .rm-more{ display: block; }
.rm-fade{
  position: absolute;
  left: 0; right: 0; bottom: 3rem;
  height: 5em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events: none;
}
.rm-toggle:checked ~ .rm-fade{ display: none; }
.rm-btn{
  display: inline-block;
  margin-top: 1.2rem;
  font-size: .9em;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
  cursor: pointer;
  user-select: none;
}
.rm-btn:hover{ opacity: 1; }
.rm-btn::before{ content: "Read more"; }
.rm-toggle:checked ~ .rm-btn::before{ content: "Read less"; }

/* Contextual link to the workshop, placed only on projects actually made in
   Bali. Deliberately quiet — it sits below the work, not over it. Delete this
   rule and WORKSHOP_LINK in build.py to remove them entirely. */
.related{
  margin: 4rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ink-5);
  font-size: 1.4rem;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: .05em;
}
.related a{ color: var(--ink-3); }
.related a:hover{ color: var(--ink-1); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.lb[hidden]{ display: none; }
.lb{
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}
.lb__img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-out;
}
.lb__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(87,87,87,.35);
  color: rgba(255,255,255,.9);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.lb__btn:hover{ opacity: .7; }
.lb__prev{ left: 20px; }
.lb__next{ right: 20px; }
.lb__close{ top: 20px; right: 20px; transform: none; }
.lb__count{
  position: absolute;
  bottom: 20px;
  left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Mobile — the spread collapses to a single column with a sticky header,
   mirroring the original's mobile header and index.
   -------------------------------------------------------------------------- */

.m-header{ display: none; }

@media (max-width: 899px){
  html{ font-size: 10.5px; }
  :root{ --pad: 2rem; }

  .spine, .rail{ display: none; }

  .m-header{
    display: block;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--paper);
    padding: var(--pad) var(--pad) 0;
  }
  .m-header__bar{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
  }
  .m-header__bar img{ height: 6rem; width: auto; }
  .m-header__toggle{
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
  }
  .m-header__title{ margin-top: 1.6rem; }
  .m-header hr{ margin: 1.6rem 0 0; }

  .m-nav[hidden]{ display: none; }
  .m-nav{ padding: 2rem 0 0; }

  .page{
    margin-left: 0;
    width: 100%;
    min-height: 0;
    padding: var(--pad);
  }

  h1{ font-size: 4rem; }
  h2{ font-size: 3.2rem; }

  .gallery{ --cols: 1; --gutter: 1rem; }
  .lb{ padding: 10px; }
}

@media (min-width: 900px) and (max-width: 1199px){
  .gallery{ --cols: 2; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

@media print{
  .rail, .spine, .m-header, .lb{ display: none; }
  .page{ margin: 0; width: 100%; }
}