/* isaacwatson.ca mockup: paper and ink, one moving field, a still reading column.
   Interest colours are set per element as --c from build.py. */
:root {
  --paper: #edefea;
  --panel: #e3e6e0;
  --ink: #1f2427;
  --muted: #5b6368;
  --rule: #cfd4cc;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --gutter: max(20px, 4vw);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 19px/1.6 var(--serif); }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; line-height: 1.12; text-wrap: balance; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(40rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 5; }
.skip:focus { top: 12px; }
.label { font: 600 0.72rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* header */
.top { border-bottom: 1px solid var(--rule); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 20px; flex-wrap: wrap; }
.mark { font: 500 1.35rem/1 var(--serif); text-decoration: none; letter-spacing: -0.01em; }
.top nav { display: flex; align-items: center; gap: 22px; font: 500 0.85rem var(--sans); flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover, .top nav [aria-current] { color: var(--ink); }
.top nav [aria-current] { text-decoration: underline; text-underline-offset: 6px; }
.nav-sub { border: 1px solid var(--ink); color: var(--ink) !important; padding: 7px 14px; border-radius: 999px; }

/* the field */
canvas.field { display: block; width: 100%; max-width: 100%; aspect-ratio: 5 / 2; }

/* home: a masthead with the field, then the writing */
.masthead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: center; padding-block: 56px 48px; --c-rule: var(--ink); background: linear-gradient(var(--c-rule), var(--c-rule)) bottom center / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.mast-copy { display: flex; flex-direction: column; gap: 16px; }
.mast-copy h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); letter-spacing: -0.025em; line-height: 1; }
.mast-line { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.35; }
.mast-sub { color: var(--muted); font-size: 1rem; max-width: 28rem; }
.mast-form { padding-top: 8px; max-width: 30rem; }
.mast-field { min-width: 0; }

.featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: center; padding-block: 48px; --c-rule: var(--rule); background: linear-gradient(var(--c-rule), var(--c-rule)) bottom center / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.featured-band { display: block; background: var(--panel); padding: 22px; }
.featured-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.featured h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -0.015em; }
.featured h2 a { text-decoration: none; }
.featured h2 a:hover { text-decoration: underline; }

.writing { padding-block: 40px 72px; display: flex; flex-direction: column; }
.writing > .label { padding-bottom: 6px; }
.row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; padding-block: 28px; border-bottom: 1px solid var(--rule); align-items: start; }
.row-thumb { display: block; background: var(--panel); padding: 10px; }
.row-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.row h3 { font-size: 1.7rem; letter-spacing: -0.01em; }
.row h3 a { text-decoration: none; }
.row h3 a:hover { text-decoration: underline; }
.row p { color: var(--muted); max-width: 40rem; }
.tag { font: 500 0.8rem var(--sans); color: var(--c); }
.tag + .tag::before { content: ", "; color: var(--muted); }
.meta-small { font: 0.8rem var(--sans); color: var(--muted); }

/* post */
.post-band { padding-top: 36px; display: flex; flex-direction: column; gap: 12px; }
.post-band canvas.field { aspect-ratio: 4 / 1; max-height: 260px; }
.post-head { display: flex; flex-direction: column; gap: 16px; padding-block: 44px 34px; }
.post-head h1 { font-size: clamp(2.2rem, 5vw, 3.3rem); letter-spacing: -0.02em; }
.dek { font-size: 1.3rem; line-height: 1.45; color: var(--muted); }
.sample { font: 0.78rem var(--sans); color: var(--muted); border-left: 2px solid var(--rule); padding-left: 10px; }
.post-body { display: flex; flex-direction: column; gap: 1.15em; padding-bottom: 48px; font-size: 1.12rem; line-height: 1.7; }
.post-body h2 { font-size: 1.55rem; margin-top: 0.8em; }
.post-body blockquote { margin: 0.4em 0; padding-left: 22px; border-left: 2px solid var(--ink); font-style: italic; font-size: 1.25rem; line-height: 1.5; }
.post-foot { padding-bottom: 64px; }
.next { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--ink); padding-top: 18px; text-decoration: none; }
.next-title { font-size: 1.5rem; }
.next:hover .next-title { text-decoration: underline; }

/* about */
.about { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 56px; padding-block: 64px 80px; align-items: start; }
.about-photo { background: var(--panel); }
.about-photo img { display: block; width: 100%; height: auto; filter: saturate(0.85); }
.about-copy { display: flex; flex-direction: column; gap: 18px; max-width: 38rem; }
.about-copy h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); }
.lede { font-size: 1.35rem; line-height: 1.45; }
.button { display: inline-block; font: 500 0.9rem var(--sans); text-decoration: none; border: 1px solid var(--ink); padding: 11px 18px; border-radius: 999px; }
.button:hover { background: var(--ink); color: var(--paper); }

/* subscribe + footer */
.subscribe-band { background: var(--panel); border-top: 1px solid var(--rule); }
.subscribe-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; padding-block: 44px; align-items: center; }
.subscribe-inner h2 { font-size: 1.8rem; margin-bottom: 6px; }
.subscribe-inner p { color: var(--muted); }
.subscribe { display: flex; flex-wrap: wrap; gap: 10px; }
.subscribe input { flex: 1 1 220px; min-width: 0; font: 1rem var(--sans); padding: 12px 14px; border: 1px solid #8f979b; background: var(--paper); color: var(--ink); border-radius: 0; }
.subscribe button { font: 600 0.9rem var(--sans); padding: 12px 20px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }
.subscribe-note { flex-basis: 100%; font: 0.85rem var(--sans); color: var(--muted); min-height: 1.2em; }
.foot { border-top: 1px solid var(--rule); padding-block: 28px 20px; font: 0.88rem var(--sans); color: var(--muted); }
.foot-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mock-note { padding-top: 16px; font: 0.72rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 900px) {
  .masthead, .featured, .about, .subscribe-inner { grid-template-columns: 1fr; gap: 28px; }
  .masthead { padding-block: 36px 32px; }
  .mast-field { order: -1; }
  .about-photo { max-width: 320px; }
}
@media (max-width: 600px) {
  body { font-size: 17.5px; }
  .row { grid-template-columns: 1fr; gap: 14px; }
  .row-thumb { max-width: 220px; }
  .row h3 { font-size: 1.45rem; }
  .post-band canvas.field { aspect-ratio: 5 / 2; }
  .featured-band { padding: 14px; }
  .top nav { gap: 16px; }
}

/* about */
.about-links { display: flex; flex-wrap: wrap; gap: 10px; }
.button-quiet { border-color: var(--rule); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* before the first post */
.writing.first { padding-block: 40px 80px; gap: 10px; }
.first-note { font-size: 1.3rem; max-width: 34rem; }

/* photographs of the trades: grey on paper until the field draws their form */
.trades { padding-block: 10px 52px; }
.trade-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.trade { margin: 0; display: flex; flex-direction: column; gap: 10px; cursor: default; }
.trade picture { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper); }
.trade img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(1.04); mix-blend-mode: multiply; transition: filter 1s ease, transform 1.2s ease; }
.trade.is-on img, .trade:hover img { filter: grayscale(0) contrast(1) brightness(1); mix-blend-mode: normal; transform: scale(1.03); }
.trade figcaption { display: flex; flex-direction: column; gap: 2px; border-top: 2px solid var(--rule); padding-top: 8px; transition: border-color 1s ease; }
.trade.is-on figcaption, .trade:hover figcaption { border-color: var(--c); }
.trade-name { font: 600 0.7rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); transition: color 1s ease; }
.trade.is-on .trade-name, .trade:hover .trade-name { color: var(--c); }
.trade-line { font-size: 0.9rem; line-height: 1.35; color: var(--muted); }

/* a short hello with the portrait */
.hello { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 48px; align-items: center; padding-block: 56px 72px; border-top: 1px solid var(--ink); }
.hello-photo { margin: 0; background: var(--panel); }
.hello-photo img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; }
.hello-copy { display: flex; flex-direction: column; gap: 14px; max-width: 36rem; }
.hello-lede { font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.35; }
.hello-copy > p:not(.label):not(.hello-lede) { color: var(--muted); }
.more { font: 500 0.9rem var(--sans); text-decoration: none; border-bottom: 1px solid var(--ink); align-self: flex-start; padding-bottom: 2px; }

@media (max-width: 900px) {
  .trade-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 40%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-bottom: 6px; }
  .trade picture { aspect-ratio: 4 / 5; }
  .trade { scroll-snap-align: start; }
  .hello { grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 600px) { .hello { grid-template-columns: 1fr; } .hello-photo { max-width: 200px; } .trade-row { grid-auto-columns: 62%; } }
@media (prefers-reduced-motion: reduce) { .trade img, .trade figcaption, .trade-name { transition: none; } }

/* the trade being drawn shows softly behind the masthead dots */
.mast-field { position: relative; }
.mast-photos { position: absolute; inset: -6% -4%; z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 80%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 80%); }
.mast-photo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.mast-photo.is-on { opacity: 0.3; }
.mast-photo picture, .mast-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mast-photo img { filter: grayscale(0.35) contrast(1.05); }
.mast-field canvas.field { position: relative; z-index: 1; }

/* the portrait arrives in dots; hover shows the photograph */
.hello-photo { position: relative; aspect-ratio: 4 / 5; }
.hello-photo img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; }
.hello-photo canvas.hello-dots { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transition: opacity 0.8s ease; }
.hello-photo:hover img { opacity: 1; }
.hello-photo:hover canvas.hello-dots { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mast-photo, .hello-photo img, .hello-photo canvas.hello-dots { transition: none; } }

/* curious-about label, ideas and projects */
.trades-label { padding-bottom: 12px; }
.section-h { font-size: clamp(2rem, 3.6vw, 2.6rem); letter-spacing: -0.01em; }
.ideas, .projects { padding-block: 56px 72px; border-top: 1px solid var(--ink); display: flex; flex-direction: column; gap: 28px; }
.ideas-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; }
.ideas-head > p { color: var(--muted); font-size: 1.15rem; max-width: 34rem; }
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.idea { background: var(--panel); display: flex; flex-direction: column; border-top: 3px solid var(--c); }
.idea canvas.idea-draw { padding: 18px 18px 0; }
.idea-text { padding: 14px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.idea-status { font: 600 0.72rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); }
.idea h3 { font-size: 1.45rem; line-height: 1.2; }
.idea-text > p:not(.idea-status):not(.why-now):not(.sample) { color: var(--muted); }
.why-now { border-left: 2px solid var(--c); padding-left: 12px; font-size: 0.98rem; }
.why-now .label { display: block; color: var(--c); }
.ideas > .more { align-self: flex-start; }

.project-group { display: flex; flex-direction: column; gap: 14px; }
.project-group + .project-group { padding-top: 12px; }
.project-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
.project-group-head > p:not(.label) { font: 0.9rem var(--sans); color: var(--muted); }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 28px 20px; }
.project { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.project-media { aspect-ratio: 4 / 3; background: var(--panel); overflow: hidden; display: grid; place-items: center; margin-bottom: 6px; }
.project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.project-media.is-logo img { width: 46%; height: auto; object-fit: contain; }
.project-media canvas.project-draw { width: 86%; }
.project h3 { font-size: 1.3rem; }
.project p { color: var(--muted); font-size: 0.98rem; }
.project-link { font: 500 0.85rem var(--sans); }
a.project:hover h3 { text-decoration: underline; }
a.project:hover .project-media img { transform: scale(1.04); }
@media (max-width: 600px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } .project h3 { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .project-media img { transition: none; } }