/* paulricheson.com
   Grew out of the Seabed Paper template: the sea, its palette and the paper styles are its;
   the gallery panels, tiles and navigation are new. No fonts to load, no libraries.

   THEME  Light values come first. The dark values appear twice below them (once for the system
          setting, once for the theme switch); keep the two copies the same. */
:root{
  color-scheme:light;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",Times,"Liberation Serif",serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Helvetica,Arial,"Liberation Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  /* water column, surface to floor */
  --sea-0:#a6e2ea; --sea-1:#2489a6; --sea-2:#0e5f80; --sea-3:#093e59;
  /* canvas palette */
  --c-foam:#ecfcff; --c-ray:rgba(255,255,255,.2);
  --c-sand-back:#b3a37b; --c-sand-front:#dccb9f; --c-sand-line:#f4ead0;
  --c-nodule:#39362f; --c-weed:#1b7a61; --c-weed-2:#2ba27b;
  --c-crab:#e8613f; --c-crab-dark:#8c2e1c; --c-metal:#d7e0e4; --c-metal-dark:#56707c; --c-light:#fff3b8;
  --c-snow:rgba(255,255,255,.55); --c-bubble:rgba(255,255,255,.75);
  --c-deep:rgba(6,26,42,.3); --c-jelly:#f2b8ff;
  --c-coral:#ff7f8f; --c-coral-2:#f0a35e; --c-anemone:#c77dff;
  --c-turtle:#7fb98a; --c-turtle-dark:#3f7a52;
  --c-hull:#8c2e1c; --c-hull-2:#f4ead0; --c-sail:#f7f3ea;
  /* pages */
  --paper:#f5fafa; --ink:#13222c; --ink-soft:#485b66; --rule:#c6d3d8;
  --link:#0b5f7f; --mark:#a53f26; --tint:rgba(11,95,127,.08); --shadow:rgba(3,30,46,.4);
  --panel-light:#f5f5f7; --panel-dark:#0b0d10; --nav:rgba(245,250,250,.72); --nav-ink:#13222c;
  --tile:#ffffff; --tile-ink:#13222c;
  --radius:28px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --sea-0:#2f7896; --sea-1:#0f4b69; --sea-2:#082e46; --sea-3:#041826;
    --c-foam:#bfeaf5; --c-ray:rgba(190,235,255,.1);
    --c-sand-back:#24404e; --c-sand-front:#365563; --c-sand-line:#5d8494;
    --c-nodule:#0b1317; --c-weed:#17604f; --c-weed-2:#1f8068;
    --c-crab:#ff8763; --c-crab-dark:#a8442c; --c-metal:#9fb4be; --c-metal-dark:#2f4753; --c-light:#ffe9a0;
    --c-snow:rgba(200,235,255,.4); --c-bubble:rgba(200,240,255,.55);
    --c-deep:rgba(0,8,16,.45); --c-jelly:#d79cff;
    --c-coral:#e0687a; --c-coral-2:#c98544; --c-anemone:#a66ad8;
    --c-turtle:#5c9a6a; --c-turtle-dark:#2d5c3d;
    --c-hull:#6a2516; --c-hull-2:#9fb4be; --c-sail:#c9d6dc;
    --paper:#0b1c28; --ink:#e3edf1; --ink-soft:#a3b7c2; --rule:#2c4a5b;
    --link:#84d6e8; --mark:#ff9d7d; --tint:rgba(132,214,232,.09); --shadow:rgba(0,0,0,.6);
    --panel-light:#1c1f24; --panel-dark:#000; --nav:rgba(4,24,38,.7); --nav-ink:#e3edf1;
    --tile:#0e2230; --tile-ink:#e3edf1;
  }
}
:root[data-theme="dark"]{
    color-scheme:dark;
    --sea-0:#2f7896; --sea-1:#0f4b69; --sea-2:#082e46; --sea-3:#041826;
    --c-foam:#bfeaf5; --c-ray:rgba(190,235,255,.1);
    --c-sand-back:#24404e; --c-sand-front:#365563; --c-sand-line:#5d8494;
    --c-nodule:#0b1317; --c-weed:#17604f; --c-weed-2:#1f8068;
    --c-crab:#ff8763; --c-crab-dark:#a8442c; --c-metal:#9fb4be; --c-metal-dark:#2f4753; --c-light:#ffe9a0;
    --c-snow:rgba(200,235,255,.4); --c-bubble:rgba(200,240,255,.55);
    --c-deep:rgba(0,8,16,.45); --c-jelly:#d79cff;
    --c-coral:#e0687a; --c-coral-2:#c98544; --c-anemone:#a66ad8;
    --c-turtle:#5c9a6a; --c-turtle-dark:#2d5c3d;
    --c-hull:#6a2516; --c-hull-2:#9fb4be; --c-sail:#c9d6dc;
    --paper:#0b1c28; --ink:#e3edf1; --ink-soft:#a3b7c2; --rule:#2c4a5b;
    --link:#84d6e8; --mark:#ff9d7d; --tint:rgba(132,214,232,.09); --shadow:rgba(0,0,0,.6);
    --panel-light:#1c1f24; --panel-dark:#000; --nav:rgba(4,24,38,.7); --nav-ink:#e3edf1;
    --tile:#0e2230; --tile-ink:#e3edf1;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:4rem}
body{
  margin:0;min-height:100vh;background:var(--sea-3);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.5;overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:2px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
code{font-family:var(--mono);font-size:.88em}
.skip{position:absolute;left:-999px;top:0;z-index:20;background:var(--paper);color:var(--ink);padding:.6rem 1rem}
.skip:focus{left:1rem;top:1rem}

/* ---------- the sea, fixed behind every page ---------- */
.sea{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,var(--sea-0) 0%,var(--sea-1) 20%,var(--sea-2) 58%,var(--sea-3) 100%);
}
.sea canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rays{position:absolute;inset:0}
.rays i{
  position:absolute;top:-12%;height:96%;width:11vw;min-width:70px;
  background:linear-gradient(180deg,var(--c-ray),transparent 82%);
  transform-origin:50% 0;filter:blur(7px);
  animation:ray 11s ease-in-out infinite alternate;
}
.rays i:nth-child(1){left:5%;--a:14deg;--b:9deg;animation-duration:12s}
.rays i:nth-child(2){left:23%;width:7vw;--a:11deg;--b:16deg;animation-duration:9s}
.rays i:nth-child(3){left:42%;width:14vw;--a:8deg;--b:13deg;animation-duration:14s}
.rays i:nth-child(4){left:65%;width:8vw;--a:13deg;--b:7deg;animation-duration:10s}
.rays i:nth-child(5){left:84%;width:12vw;--a:6deg;--b:12deg;animation-duration:13s}
@keyframes ray{
  from{transform:rotate(var(--a)) scaleX(1);opacity:.5}
  to{transform:rotate(var(--b)) scaleX(1.25);opacity:1}
}
@media (prefers-reduced-motion:reduce){.rays i{animation:none;transform:rotate(var(--a))}}
.page{position:relative;z-index:1}

/* ---------- navigation: a frosted bar, Apple style ---------- */
.nav{
  position:sticky;top:0;z-index:10;
  padding-top:env(safe-area-inset-top,0px);
  background:transparent;color:#fff;transition:background .3s,color .3s,box-shadow .3s;
}
.nav.scrolled,.nav.solid{
  background:var(--nav);color:var(--nav-ink);box-shadow:0 1px 0 rgba(0,0,0,.08);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}
.nav-in{max-width:68rem;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem}
.brand{color:inherit;text-decoration:none;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(.6rem,2.2vw,1.6rem);align-items:center;font-size:.82rem;flex-wrap:wrap;justify-content:flex-end}
.nav li a{color:inherit;text-decoration:none;opacity:.88}
.nav li a:hover,.nav li a[aria-current]{opacity:1;text-decoration:underline}
.theme-btn{
  font:inherit;color:inherit;background:transparent;border:1px solid currentColor;border-radius:999px;
  padding:.1rem .6rem;cursor:pointer;opacity:.8;
}
.theme-btn:hover{opacity:1}
@media (max-width:30rem){.nav li.optional{display:none}}

/* ---------- hero: the first screen, open water ---------- */
.hero{
  min-height:calc(100vh - 3rem);min-height:calc(100svh - 3rem);
  display:grid;place-items:center;text-align:center;color:#fff;
  padding:clamp(2rem,8vh,5rem) 16px 22vh;
}
.titleblock{max-width:58rem}
.hero .eyebrow{margin:0 0 .6rem;font-size:clamp(.95rem,.9rem + .3vw,1.15rem);opacity:.9;letter-spacing:.02em}
.hero h1{
  font-weight:700;font-size:clamp(2.7rem,1.4rem + 6.4vw,6.2rem);line-height:1.02;letter-spacing:-.035em;
  margin:0 0 1rem;text-wrap:balance;text-shadow:0 2px 30px rgba(3,35,52,.5);
}
.hero .lede{
  font-size:clamp(1.15rem,1rem + .8vw,1.65rem);line-height:1.3;margin:0 auto 2rem;max-width:42rem;
  font-weight:500;text-wrap:balance;text-shadow:0 1px 14px rgba(3,35,52,.6);
}
.pills{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin:0;padding:0;list-style:none}
.pill{
  display:inline-block;text-decoration:none;font-size:1rem;border-radius:999px;padding:.6rem 1.35rem;
  background:#0071e3;color:#fff;border:1px solid transparent;
}
.pill:hover{background:#0077ed}
.pill.ghost{background:rgba(4,50,72,.28);border-color:rgba(255,255,255,.8);color:#fff}
.pill.ghost:hover{background:rgba(4,50,72,.5)}

/* ---------- sections ---------- */
.section{max-width:76rem;margin:0 auto;padding:0 12px}
.section-head{text-align:center;color:#fff;padding:5rem 16px 2rem}
.section-head h2{font-size:clamp(2rem,1.3rem + 3vw,3.5rem);letter-spacing:-.025em;line-height:1.08;margin:0 0 .5rem}
.section-head p{margin:0 auto;max-width:38rem;font-size:1.15rem;opacity:.9}

/* ---------- featured panels ---------- */
.panel{
  border-radius:var(--radius);overflow:hidden;margin:0 0 12px;
  padding:clamp(2.6rem,6vw,4.6rem) clamp(16px,4vw,3rem) 0;text-align:center;
  background:var(--panel-light);color:var(--ink);
}
.panel.tone-dark{background:var(--panel-dark);color:#f5f5f7}
.panel.tone-sea{background:linear-gradient(180deg,rgba(9,62,89,.55),rgba(4,24,38,.82));color:#fff;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.panel .eyebrow{margin:0 0 .35rem;font-size:clamp(.95rem,.9rem + .3vw,1.2rem);font-weight:600;color:var(--accent,var(--mark))}
.panel h3{font-size:clamp(2.4rem,1.4rem + 4.6vw,4.8rem);line-height:1.04;letter-spacing:-.035em;margin:0 0 .5rem}
.panel .tagline{font-size:clamp(1.25rem,1rem + 1.2vw,2rem);line-height:1.2;font-weight:600;letter-spacing:-.015em;margin:0 auto .8rem;max-width:44rem;text-wrap:balance}
.panel .summary{font-size:clamp(1rem,.95rem + .25vw,1.18rem);margin:0 auto 1.2rem;max-width:40rem;opacity:.86}
.links{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;justify-content:center;list-style:none;margin:0 0 1.2rem;padding:0;font-size:1.06rem}
.links a{text-decoration:none;color:var(--accent,var(--link))}
.panel:not(.tone-dark):not(.tone-sea) .links a{color:var(--link)}
.links a:hover{text-decoration:underline}
.links a::after{content:" \203A"}
.panel details{max-width:34rem;margin:0 auto 1.6rem;text-align:left;font-size:.95rem}
.panel summary{cursor:pointer;text-align:center;opacity:.8;list-style-position:inside}
.panel summary:hover{opacity:1}
.panel dl{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1rem;margin:.8rem 0 0;padding:.9rem 1.1rem;border-radius:14px;background:rgba(128,128,128,.12)}
.panel dt{font-weight:600;opacity:.75}
.panel dd{margin:0}
.shot{margin:0 auto;max-width:62rem}
.shot img{width:100%;border-radius:14px 14px 0 0;box-shadow:0 -6px 40px rgba(0,0,0,.25)}
.shot.pixel img{image-rendering:pixelated}
.panel .wordmark{
  margin:0 auto;max-width:62rem;min-height:clamp(10rem,24vw,18rem);display:grid;place-items:center;
  border-radius:14px 14px 0 0;font-size:clamp(3rem,10vw,8rem);font-weight:800;letter-spacing:-.05em;
  color:var(--accent);background:radial-gradient(120% 140% at 50% 120%,rgba(255,255,255,.12),transparent 60%);
  opacity:.9;
}
.panel.tone-sea .wordmark{background:none;min-height:clamp(6rem,12vw,9rem)}

/* side-by-side pair on wide screens */
@media (min-width:62rem){
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pair .panel{margin:0 0 12px;display:flex;flex-direction:column}
  .pair .panel h3{font-size:clamp(2.2rem,1.2rem + 2.6vw,3.6rem)}
  .pair .shot,.pair .wordmark{margin-top:auto}
}

/* ---------- the grid of more projects ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 0 1.4rem}
.chip{
  font:inherit;font-size:.9rem;border-radius:999px;padding:.4rem 1rem;cursor:pointer;
  background:rgba(4,50,72,.35);color:#fff;border:1px solid rgba(255,255,255,.55);
}
.chip[aria-pressed="true"]{background:#fff;color:#0b2231;border-color:#fff}
.tiles{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.tile{
  border-radius:22px;overflow:hidden;background:var(--tile);color:var(--tile-ink);
  display:flex;flex-direction:column;box-shadow:0 10px 40px var(--shadow);
}
.tile[hidden]{display:none}
.tile .art{aspect-ratio:16/10;overflow:hidden;background:#000;display:grid;place-items:center}
.tile .art img{width:100%;height:100%;object-fit:cover}
.tile .art.mark{background:radial-gradient(130% 120% at 30% 0%,var(--accent),#061a28 72%);color:#fff;font-size:2.4rem;font-weight:800;letter-spacing:-.04em;padding:1rem;text-align:center}
.tile .body{padding:1.2rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.tile .eyebrow{margin:0;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mark)}
.tile h3{margin:0;font-size:1.45rem;letter-spacing:-.02em;line-height:1.15}
.tile p{margin:0;color:var(--ink-soft);font-size:.98rem}
.tile .links{justify-content:flex-start;margin:auto 0 0;padding-top:.6rem;font-size:.98rem;gap:.3rem 1.2rem}
.tile .links a{color:var(--link)}

/* ---------- websites ---------- */
.sites{
  list-style:none;margin:0 auto;padding:0;max-width:60rem;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
}
.sites a{
  display:block;height:100%;text-decoration:none;color:#fff;border-radius:18px;padding:1.1rem 1.2rem;
  background:rgba(4,40,60,.55);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.sites a:hover{background:rgba(4,40,60,.75);border-color:rgba(255,255,255,.5)}
.sites b{display:block;font-size:1.1rem}
.sites span{display:block;opacity:.8;font-size:.92rem}
.sites .url{font-family:var(--mono);font-size:.8rem;opacity:.7;margin-top:.35rem;overflow-wrap:anywhere}

/* ---------- paper: from the template, for About and the project pages ---------- */
.paper{
  position:relative;max-width:66rem;margin:0 auto;
  padding:clamp(1.1rem,4.2vw,3.6rem);
  background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.125rem;line-height:1.48;
  border-radius:6px;box-shadow:0 28px 80px var(--shadow);
}
@media (max-width:70rem){.paper{margin:0 12px}}
.runhead{
  display:flex;justify-content:space-between;gap:1rem;font-family:var(--sans);
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--rule);padding-bottom:.45rem;margin-bottom:1.5rem;
}
@media (min-width:56.01rem){.cols{column-count:2;column-gap:2.3rem}}
.paper p{margin:0 0 .4rem;text-indent:1em;text-align:justify;-webkit-hyphens:auto;hyphens:auto;orphans:2;widows:2}
.paper p.noindent,.paper .abstract{text-indent:0}
@media (max-width:56rem){.paper p{text-align:left}}
.abstract{font-weight:700;font-size:.98rem}
.paper h2{
  font-family:var(--serif);font-size:1.05rem;font-weight:400;text-align:center;font-variant:small-caps;
  letter-spacing:.05em;margin:1.8rem 0 .55rem;break-after:avoid;
}
.paper h3{font-size:1.125rem;font-weight:400;font-style:italic;margin:1.25rem 0 .3rem;break-after:avoid}
.dropcap{text-indent:0 !important}
.dropcap::first-letter{float:left;font-size:3.05em;line-height:.8;padding:.07em .07em 0 0}
.lead{text-transform:uppercase;letter-spacing:.02em}
.paper ul{margin:.4rem 0 .8rem;padding-left:1.4em}
.paper li{margin:.2rem 0}
.paper q{quotes:"\201C" "\201D" "\2018" "\2019"}
.tablewrap{overflow-x:auto;margin:1rem 0 1.5rem}
.paper table{border-collapse:collapse;width:100%;font-size:.96rem}
.paper caption{caption-side:top;text-align:center;padding-bottom:.55rem;font-size:.86rem}
.paper caption span{display:block}
.paper caption .tnum{letter-spacing:.06em}
.paper caption .ttitle{font-variant:small-caps;letter-spacing:.04em}
.paper thead th{
  font-family:var(--sans);font-size:.76rem;font-weight:700;text-align:left;padding:.45rem .6rem;
  border-top:3px double var(--ink);border-bottom:1px solid var(--ink);
}
.paper tbody td,.paper tbody th{padding:.5rem .6rem;vertical-align:top;text-align:left;border-bottom:1px solid var(--rule)}
.paper tbody tr:last-child > *{border-bottom:3px double var(--ink)}
.paper tbody th{font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--mark);white-space:nowrap}
.fig{margin:.9rem 0 1.2rem;break-inside:avoid}
.fig img{width:100%;border-radius:4px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.fig .figcaption{font-size:.84rem;margin-top:.4rem;text-indent:0;text-align:left}
.fig.pixel img{image-rendering:pixelated}
.footnote{
  font-size:.8rem;color:var(--ink-soft);
  border-top:1px solid var(--rule);margin-top:1.1rem;padding-top:.45rem;break-inside:avoid;
}
.about-wrap{padding:0 0 1rem}

/* ---------- project pages ---------- */
.pagehead{text-align:center;color:#fff;padding:clamp(3rem,10vh,6rem) 16px 3rem}
.pagehead .eyebrow{margin:0 0 .4rem;font-weight:600;color:var(--accent,#fff)}
.pagehead h1{font-size:clamp(2.6rem,1.4rem + 5vw,5rem);letter-spacing:-.035em;line-height:1.04;margin:0 0 .6rem;text-shadow:0 2px 24px rgba(3,35,52,.5)}
.pagehead .tagline{font-size:clamp(1.2rem,1rem + 1vw,1.8rem);font-weight:600;margin:0 auto 1.4rem;max-width:44rem;text-wrap:balance;text-shadow:0 1px 14px rgba(3,35,52,.6)}
.pagehead .links a{color:#fff}
.paper .pager{list-style:none;padding:0;margin:2rem 0 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-family:var(--sans);font-size:.95rem;margin-top:2rem;border-top:1px solid var(--rule);padding-top:1rem}
.pager a{text-decoration:none}
.pager a:hover{text-decoration:underline}

/* ---------- closing view: open water and the sea floor ---------- */
.window{min-height:62vh;display:flex;justify-content:center;align-items:flex-start;padding:3rem 16px 0}
.plate{
  max-width:35rem;margin:0;padding:.95rem 1.2rem;font-size:.95rem;font-family:var(--serif);
  background:var(--paper);color:var(--ink);border-radius:8px;box-shadow:0 12px 40px var(--shadow);
}
.plate p{margin:0}
.plate .colophon{margin-top:.5rem;font-family:var(--sans);font-size:.78rem;color:var(--ink-soft)}
#delivered{font-family:var(--sans);font-weight:700;color:var(--mark)}

/* ---------- footer ---------- */
.foot{
  position:relative;z-index:1;background:var(--panel-light);color:var(--ink-soft);font-size:.8rem;
  padding:1.4rem 16px calc(1.4rem + env(safe-area-inset-bottom,0px));
}
.foot-in{max-width:68rem;margin:0 auto;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}
.foot p{margin:0}
.foot a{color:inherit}

/* ---------- motion: only with JavaScript, and only when motion is welcome ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1;transform:none}
}

@media print{
  .sea,.nav,.window,.pills,.chips,.foot{display:none}
  body{background:#fff;color:#000}
  .hero,.section-head,.pagehead{color:#000;min-height:0;padding:1rem 0}
  .hero h1,.hero .lede,.pagehead h1{text-shadow:none}
  .panel,.tile,.paper{background:#fff !important;color:#000 !important;box-shadow:none;break-inside:avoid}
  .js .reveal{opacity:1;transform:none}
}

/* text for screen readers and text browsers only */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* covers are cropped to a common shape; the project page shows them whole */
.shot img{aspect-ratio:16/10;object-fit:cover;object-position:top center}