/* Adams & Co studio: celadon glaze, tenmoku ink, the impressed maker's mark. */

@font-face {
  font-family: "Young Serif";
  src: url("/assets/fonts/young-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* The apps' own faces, used on their tiles and their pages. Fonts load only where used. */
@font-face { font-family: "Cinzel"; src: url("/assets/fonts/cinzel-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/assets/fonts/cinzel-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("/assets/fonts/crimson-pro-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("/assets/fonts/crimson-pro-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("/assets/fonts/crimson-pro-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/assets/fonts/public-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --celadon: #a9bdaf;
  --celadon-hi: #b8cabd;
  --celadon-deep: #8ea596;
  --celadon-pool: #75907f;
  --tenmoku: #211915;
  --ink-soft: #33443a;
  --bisque: #d9c3a0;
  --bisque-ink: #4a3a28;
  --rust: #b8673e;
  --slab-text: #d7e2da;
  --slab-muted: #a9b9ae;
  --display: "Young Serif", Georgia, serif;
  --text: "Hanken Grotesk", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Iron specks in the stoneware body, showing through the glaze. */
  --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .13 0 0 0 0 .1 0 0 0 40 -30.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--tenmoku); color: var(--slab-text); padding: 10px 14px; border-radius: 8px;
  font: 600 15px/1 var(--text); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- The studio page ---------- */

.studio {
  background-color: var(--celadon);
  background-image: radial-gradient(120% 80% at 20% 0%, var(--celadon-hi), transparent 60%);
  color: var(--tenmoku);
  font: 400 18px/1.55 var(--text);
  font-variant-numeric: tabular-nums;

}
.studio ::selection { background: var(--tenmoku); color: var(--celadon-hi); }
body.studio { min-height: 100vh; }
.studio a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.studio a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--tenmoku); outline-offset: 3px; border-radius: 4px; }
.slab :focus-visible { outline-color: var(--rust); }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

/* The maker's mark, in the logo's own colours: tenmoku on celadon, celadon on tenmoku, white on anything else dark. */
.chop { width: 44px; height: 44px; color: var(--tenmoku); }

/* Studio bar: used on the home page and atop each app's page. */
.bar { position: relative; z-index: 2; }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tenmoku); }
.brand span { font: 400 23px/1 var(--display); letter-spacing: -0.01em; }
.bar nav ul { display: flex; gap: clamp(14px, 3vw, 32px); }
.bar nav a { font-weight: 550; font-size: 16px; text-decoration: none; padding: 10px 2px; }
.bar nav a:hover { text-decoration: underline; }

/* Thin version over an app's own world. */
.bar--thin { background-color: var(--celadon); color: var(--tenmoku);
  font: 400 16px/1.4 var(--text); border-bottom: 1px solid var(--celadon-deep); }
.bar--thin .wrap { min-height: 56px; }
.bar--thin .chop { width: 32px; height: 32px; }
.bar--thin .brand span { font-size: 19px; }
.bar--thin a { color: var(--tenmoku); }
.bar--thin nav a { font: 550 15px/1 var(--text); }

/* ---------- Home: the line and the tile wall ---------- */

.home-head { padding-block: clamp(28px, 6vw, 72px) clamp(56px, 8vw, 104px); }
.home-head .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.home-head h1 {
  font: 400 clamp(40px, 4.7vw, 72px)/1 var(--display);
  letter-spacing: -0.025em; text-wrap: balance; margin-top: 8px;
}
.home-head .who { margin-top: 28px; max-width: 34ch; font-size: 20px; color: var(--ink-soft); }
.home-head .who strong { color: var(--tenmoku); font-weight: 650; }
.reach { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--celadon-deep); max-width: 34ch; font-size: 16px; color: var(--ink-soft); }
.reach a { display: inline-block; margin-top: 4px; font: 400 24px/1.2 var(--display); color: var(--tenmoku); }

/* The wall: test tiles hung on pegs, each at its own height and angle. */
.wall { position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 28px); align-items: start; }
.hang { position: relative; --tilt: 0deg; }
.hang--aod { grid-column: 1 / span 6; --tilt: -2.2deg; }
.hang--jwyn { grid-column: 7 / span 6; margin-top: 72px; --tilt: 1.6deg; }
.hang--xb { grid-column: 1 / span 6; margin-top: 40px; --tilt: 1.2deg; }
.hang--lawn { grid-column: 7 / span 5; margin-top: 88px; --tilt: -1.6deg; }
.hang--next { grid-column: 3 / span 5; margin-top: 40px; --tilt: -0.8deg; }

/* A test tile: a flat slab of clay in its app's glaze, the glaze breaking pale at the rim,
   the raw clay edge showing beneath, and a hole cut through for the peg. */
.tile {
  --glaze: #333; --rim: #555; --clay: #8d7c69; --glaze-ink: #fff; --glaze-muted: #ccc; --glaze-line: rgb(255 255 255 / 0.18);
  --hole: radial-gradient(circle at 50% 22px, transparent 7px, #000 7.6px);
  position: relative; display: block; text-decoration: none;
  transform: rotate(var(--tilt)); transform-origin: 50% 22px;
  filter: drop-shadow(0 14px 14px rgb(33 25 21 / 0.28));
  transition: transform 900ms var(--ease-out);
}
.studio a.tile { color: var(--glaze-ink); text-decoration: none; }
/* The clay body, seen at the slab's lower edge and inside the hole. */
.tile::before {
  content: ""; position: absolute; inset: 7px 0 -7px 0; border-radius: 12px; background: var(--clay);
  -webkit-mask: var(--hole); mask: var(--hole);
}
.face {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 50px 22px 20px; border-radius: 12px;
  background: var(--glaze); border: 2px solid var(--rim);
  -webkit-mask: var(--hole); mask: var(--hole);
}
/* The peg the tile hangs on: it stays put while the tile swings. */
.peg { position: absolute; z-index: 2; top: 15px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: var(--tenmoku); pointer-events: none; }
a.tile:hover, a.tile:focus-visible { transform: rotate(calc(var(--tilt) * -0.6)); }
a.tile:focus-visible { outline: none; }
a.tile:focus-visible .face { outline: 3px solid var(--tenmoku); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  a.tile:hover, a.tile:focus-visible { transform: rotate(var(--tilt)); }
}

.tile .icon { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 0 0 1px var(--glaze-line); }
.tile .name { font-size: 25px; line-height: 1.08; }
.tile .line { color: var(--glaze-muted); font-size: 15.5px; line-height: 1.45; }
.tile .status { margin: 6px 0 0; border-top: 1px solid var(--glaze-line); padding: 12px 40px 0 0; display: grid; gap: 4px; font: 400 14.5px/1.35 var(--text); }
.tile .status div { display: flex; justify-content: space-between; gap: 10px; }
.tile .status dt { color: var(--glaze-muted); }
.tile .status dd { margin: 0; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.pip { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.pip--live { background: currentColor; }
.pip--review { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
/* The maker's mark in the corner: white on the dark glazes, tenmoku on the light ones. */
.tile .mark { position: absolute; right: 18px; bottom: 18px; width: 28px; height: 28px; color: #fff; }
.tile--xb .mark { color: var(--tenmoku); }

.tile--aod { --glaze: #1a140f; --rim: #3d3122; --clay: #6e5d4a; --glaze-ink: #ecdfbf; --glaze-muted: #bba981; --glaze-line: #5a4a33; }
.tile--aod .name { font-family: "Cinzel", Georgia, serif; font-weight: 700; letter-spacing: 0.01em; color: #e9dcbb; }
.tile--aod .status dd { color: #e3c372; }
.tile--jwyn { --glaze: #11432a; --rim: #2c6446; --clay: #7f735f; --glaze-ink: #ffffff; --glaze-muted: #c3d8cb; --glaze-line: #3b6f52; }
.tile--jwyn .name { font-family: "Public Sans", system-ui, sans-serif; font-weight: 800; letter-spacing: -0.01em; }

/* xBlocks: warm stone glaze, bronze rim, the system's own Cormorant. */
.tile--xb { --glaze: #f5f5f4; --rim: #ffffff; --clay: #b3a28c; --glaze-ink: #2d2a26; --glaze-muted: #57534e; --glaze-line: #d6d3d1; }
.tile--xb .name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 34px; letter-spacing: -0.01em; }
.tile--xb .status dd { color: #6f5133; }
/* Lawn Roster: night green, the roster's own rounded face. */
.tile--lawn { --glaze: #0f1d15; --rim: #24402f; --clay: #7a6f5d; --glaze-ink: #e6efe9; --glaze-muted: #b5c9bc; --glaze-line: #2c4a37; }
.tile--lawn .name { font-family: "Varela Round", "Nunito Sans", sans-serif; font-size: 26px; }
.tile--lawn .status dd { color: #86efac; }
.tile--lawn .icon { border-radius: 14px; }

/* Raw bisque: shaped and dried, not yet glazed or fired. Iron specks show in unglazed clay. */
.tile--next { --glaze: var(--bisque); --rim: #e6d5b9; --clay: #b9a17e; --glaze-ink: var(--bisque-ink); --glaze-muted: #574430; --glaze-line: #c2a982; }
.tile--next .face { background-color: var(--bisque); background-image: var(--speckle); padding-bottom: 22px; }
.tile--next .name { font: 400 22px/1.1 var(--display); }
.tile--next .line { max-width: 24ch; }
.tile--next .mark { color: var(--tenmoku); }

/* ---------- Home: the studio ---------- */

.about { padding-block: clamp(56px, 9vw, 120px); border-top: 1px solid var(--celadon-deep); }
.about .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); }
.about h2 { font: 400 clamp(34px, 4.2vw, 56px)/1.02 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.about .copy { display: grid; gap: 18px; max-width: 62ch; font-size: 19px; color: var(--ink-soft); }
.about .copy p:first-child { color: var(--tenmoku); font-size: 22px; line-height: 1.45; }

/* ---------- Footer: the tenmoku slab ---------- */

.slab {
  background-color: var(--tenmoku);
  background-image: radial-gradient(80% 120% at 85% 0%, rgb(184 103 62 / 0.22), transparent 55%);
  color: var(--slab-text); font: 400 17px/1.55 var(--text);
  padding-block: clamp(56px, 8vw, 104px) 36px;
}
.slab ::selection { background: var(--rust); color: var(--tenmoku); }
.slab a { color: var(--slab-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.slab a:hover { color: #fff; text-decoration-thickness: 2px; }
.slab .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); }
.slab h2 { font: 400 clamp(30px, 3.4vw, 44px)/1.05 var(--display); letter-spacing: -0.015em; color: #f1ece4; }
.slab .mail { display: inline-block; margin-top: 18px; font: 400 clamp(26px, 3.6vw, 48px)/1.1 var(--display); letter-spacing: -0.015em; color: #f1ece4; overflow-wrap: anywhere; }
.slab .note { margin-top: 14px; color: var(--slab-muted); max-width: 46ch; }
.slab h3 { font: 600 15px/1.3 var(--text); color: var(--slab-muted); margin-bottom: 10px; }
.slab ul { display: grid; gap: 6px; }
.slab .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-content: start; }
.slab .base { grid-column: 1 / -1; margin-top: clamp(40px, 6vw, 72px); padding-top: 22px; border-top: 1px solid rgb(215 226 218 / 0.16);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--slab-muted); font-size: 15px; }
.slab .base .chop { width: 34px; height: 34px; color: var(--celadon); }

/* ---------- 404 ---------- */
.lost { padding-block: clamp(56px, 12vw, 160px); }
.lost h1 { font: 400 clamp(44px, 7vw, 96px)/1 var(--display); letter-spacing: -0.025em; max-width: 14ch; }
.lost p { margin-top: 22px; font-size: 20px; color: var(--ink-soft); max-width: 44ch; }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .home-head .wrap, .about .wrap, .slab .wrap { grid-template-columns: minmax(0, 1fr); }
  .wall { max-width: 720px; }
}
@media (max-width: 600px) {
  .wall { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .hang { grid-column: 1 / -1 !important; margin-top: 0 !important; width: min(100%, 330px); }
  .hang--jwyn { justify-self: end; }
  .hang--next { justify-self: center; width: min(88%, 280px); }
  .bar:not(.bar--thin) nav li:first-child { display: none; }
  .slab .cols { grid-template-columns: minmax(0, 1fr); }
  .studio { font-size: 17px; }
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The newer apps' own faces. */
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/assets/fonts/nunito-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Varela Round"; src: url("/assets/fonts/varela-round-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }