/* beta.jswallez.com: the site is a grid of squares; a square opens a carousel.
   Same paper language as jswallez.com: warm paper, ink, hairlines, system fonts. */

:root {
	--paper: #F7F7F4;
	--block: #ECEAE6;
	--ink: #1C1C1E;
	--grey: #747066;
	--grey-2: #A3A09A;
	--hair: #E0DED8;
	--sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
	--serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
	--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
	--r: 18px;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 16px/1.5 var(--sans);
	letter-spacing: -0.011em;
	-webkit-tap-highlight-color: transparent;
}
body.locked { overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Header / footer */
.top, .grid, .bottom { width: 100%; max-width: 980px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.top { padding-top: calc(36px + env(safe-area-inset-top)); padding-bottom: 22px; }
.top h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.022em; line-height: 1.2; }
.top p { margin: 4px 0 0; color: var(--grey); font-size: 15px; }
.bottom {
	display: flex; justify-content: space-between; gap: 12px;
	padding-top: 28px; padding-bottom: calc(32px + env(safe-area-inset-bottom));
	font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grey-2);
}
.bottom a { text-decoration: none; }
.bottom a:hover { color: var(--ink); }

/* The grid: 2 squares per row on mobile, 3 on desktop */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 720px) {
	.grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.top { padding-top: 72px; padding-bottom: 32px; }
	.top h1 { font-size: 30px; }
	:root { --r: 22px; }
}

.tile {
	position: relative; aspect-ratio: 1; border: 0; padding: 0; margin: 0;
	border-radius: var(--r); overflow: hidden; cursor: pointer; text-align: left;
	background: var(--block);
	box-shadow: inset 0 0 0 1px rgba(28,28,30,.06);
	transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
	animation: rise .5s cubic-bezier(.2,.8,.2,1) backwards;
}
.tile:nth-child(2) { animation-delay: .04s } .tile:nth-child(3) { animation-delay: .08s }
.tile:nth-child(4) { animation-delay: .12s } .tile:nth-child(5) { animation-delay: .16s }
.tile:nth-child(6) { animation-delay: .2s }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.tile:active { transform: scale(.965); }
@media (hover: hover) { .tile:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(28,28,30,.08), 0 10px 30px -14px rgba(28,28,30,.35); } }
.tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.tile .label {
	position: absolute; left: 12px; right: 12px; bottom: 11px;
	display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
	font-size: 15px; font-weight: 650; letter-spacing: -0.015em;
}
.tile .label small { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; opacity: .55; }
@media (min-width: 720px) { .tile .label { left: 18px; right: 18px; bottom: 16px; font-size: 18px; } }

/* Tile faces */
.t-about { background: #2a2826; color: #fff; }
.t-about img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.t-about::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.t-about .label { z-index: 1; }

.t-products .icons { position: absolute; inset: 10% 18% 30%; display: grid; grid-template-columns: 1fr 1fr; gap: 12%; place-items: center; }
.t-products .icons img { width: 100%; aspect-ratio: 1; border-radius: 23%; box-shadow: 0 4px 14px -6px rgba(0,0,0,.35); }

.t-ideas { background: var(--ink); color: var(--paper); }
.t-ideas .face { position: absolute; left: 12px; right: 12px; top: 12px; font: italic 400 clamp(17px, 5vw, 30px)/1.12 var(--serif); letter-spacing: -0.01em; }
@media (min-width: 720px) { .t-ideas .face { left: 18px; right: 18px; top: 18px; } }

.t-essays { background: #fff; }
.t-essays .face { position: absolute; inset: 12% 14% 26%; display: flex; gap: 6%; align-items: flex-end; }
.t-essays .spine { flex: 1; border-radius: 4px 4px 2px 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }

.t-bets { background: #EFE9DD; }
.t-bets .face { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.t-bets .face span { font: 500 10.5px/1 var(--mono); letter-spacing: .02em; padding: 6px 7px; border-radius: 99px; background: rgba(255,255,255,.65); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
@media (min-width: 720px) { .t-bets .face { left: 18px; right: 18px; top: 18px; gap: 7px; } .t-bets .face span { font-size: 12px; padding: 8px 10px; } }

.t-contact { background: #fff; }
.t-contact .face { position: absolute; left: 12px; right: 12px; top: 12px; font: 650 clamp(18px, 5.4vw, 32px)/1.1 var(--sans); letter-spacing: -0.03em; }
.t-contact .face em { font-style: normal; color: var(--grey-2); }
@media (min-width: 720px) { .t-contact .face { left: 18px; right: 18px; top: 18px; } }

/* New faces for Ideas, Essays, Bets: pictures, no sentences */
.t-ideas { background: #FFD84D; color: var(--ink); }
.t-ideas .face-svg { position: absolute; left: 18%; top: 4%; width: 64%; }
.t-essays { background: #E9E4DA; }
.t-essays .pages { position: absolute; inset: 0; }
.t-essays .page {
	position: absolute; left: 22%; top: 14%; width: 56%; height: 62%; background: #fff; border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 18px -10px rgba(0,0,0,.3); padding: 9% 8%;
	display: flex; flex-direction: column; gap: 7%;
}
.t-essays .page:nth-child(1) { transform: rotate(-9deg) translate(-8%, 3%); }
.t-essays .page:nth-child(2) { transform: rotate(6deg) translate(8%, 1%); }
.t-essays .page b { font: 400 clamp(8px, 2.3vw, 13px)/1.15 var(--serif); }
.t-essays .page i { display: block; height: 2px; background: #E2DFD8; border-radius: 2px; }
.t-essays .page i:last-child { width: 60%; }
.t-bets { background: #1F5A45; color: #fff; }
.t-bets .stack { position: absolute; left: 50%; top: 46%; width: 44%; transform: translate(-50%, -50%); aspect-ratio: 1; }
.t-bets .stack i {
	position: absolute; width: 100%; aspect-ratio: 1; border-radius: 50%;
	border: 6px dashed rgba(255,255,255,.85); box-shadow: 0 6px 14px -6px rgba(0,0,0,.6), inset 0 0 0 4px rgba(0,0,0,.15);
}
.t-bets .stack i:nth-child(1) { left: -28%; top: 10%; }
.t-bets .stack i:nth-child(2) { left: 22%; top: -8%; }
.t-bets .stack i:nth-child(3) { left: 4%; top: 26%; background-color: #F7F7F4 !important; border-color: #C24A3A; }

/* The viewer: a header bar with Back at the far left, then the square, Instagram style */
.sheet {
	position: fixed; inset: 0; z-index: 10; background: var(--paper);
	display: flex; flex-direction: column;
	opacity: 0; transform: scale(.94); transform-origin: var(--ox, 50%) var(--oy, 50%);
	transition: opacity .28s ease, transform .38s cubic-bezier(.2,.8,.2,1);
	--w: min(100vw, 600px, calc(100dvh - 170px));
}
.sheet.open { opacity: 1; transform: none; }
.sheet[hidden] { display: none; }
.sheet.dragging { transition: none; }

.sheet-bar {
	flex: none; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center;
	height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 4px 0;
	border-bottom: 1px solid var(--hair); background: var(--paper);
}
.sheet-bar h2 { margin: 0; text-align: center; font-size: 16px; font-weight: 650; letter-spacing: -0.015em; }
.counter { font: 500 11px/1 var(--mono); color: var(--grey-2); text-align: right; padding-right: 12px; }
.icon-btn { width: 44px; height: 44px; border: 0; background: none; border-radius: 99px; display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { background: var(--block); }
.icon-btn:focus:not(:focus-visible) { outline: none; }

.stage { position: relative; flex: none; width: var(--w); margin: 0 auto; }
.track {
	display: flex; overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
}
.track::-webkit-scrollbar { display: none; width: 0; height: 0; }
.slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; }

.dots { display: flex; justify-content: center; gap: 5px; padding: 14px 0; }
.dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--hair); transition: background .2s, width .2s; }
.dots i.on { background: var(--ink); width: 14px; }

.sheet .stage { margin-top: max(0px, calc((100dvh - 52px - env(safe-area-inset-top) - var(--w) - 40px) / 2 - 20px)); }
@media (min-width: 640px) {
	.sq { border-radius: 22px; }
}

/* The square: everything lives inside */
.sq {
	position: relative; aspect-ratio: 1; container-type: inline-size; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 7%; background: var(--block); color: var(--ink);
}
.sq.dark { color: var(--paper); }
.sq > * { position: relative; z-index: 1; }
.sq img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; z-index: 0; }
.sq.photo::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); z-index: 0; }

.sq-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sq .icon { width: 26cqw; border-radius: 23%; box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); }
.kicker { font: 500 clamp(10px, 3cqw, 13px)/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .6; }

.sq h3 { margin: 0; font-size: clamp(24px, 8.4cqw, 44px); font-weight: 680; letter-spacing: -0.03em; line-height: 1.04; }
.sq.serif h3 { font: 400 clamp(26px, 9cqw, 48px)/1.04 var(--serif); letter-spacing: -0.02em; }
.sq.big h3 { font-size: clamp(40px, 15cqw, 84px); letter-spacing: -0.045em; }
.sq p { margin: 2.6cqw 0 0; font-size: clamp(14px, 4.2cqw, 20px); line-height: 1.38; opacity: .78; max-width: 92%; }

.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 5cqw; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips span { font: 500 clamp(9.5px, 2.7cqw, 12px)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: .6em .8em; border-radius: 99px; box-shadow: inset 0 0 0 1px currentColor; opacity: .7; }
.cta {
	flex: none; display: inline-block; padding: .75em 1.15em; border-radius: 99px;
	background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600; font-size: clamp(13px, 3.9cqw, 17px);
}
.sq.dark .cta { background: var(--paper); color: var(--ink); }
.cta:active { transform: scale(.96); }

.links { list-style: none; margin: 5cqw 0 0; padding: 0; border-top: 1px solid var(--hair); }
.links li { border-bottom: 1px solid var(--hair); }
.links a { display: flex; justify-content: space-between; padding: 2.6cqw 0; text-decoration: none; font-size: clamp(16px, 5cqw, 24px); font-weight: 600; letter-spacing: -0.02em; }
.links a span { color: var(--grey-2); font-weight: 400; }

/* Desktop arrows, beside the square */
.nav {
	position: absolute; top: calc(var(--w) / 2); transform: translateY(-50%); z-index: 2;
	width: 44px; height: 44px; border-radius: 99px; border: 0; cursor: pointer;
	background: #fff; box-shadow: 0 2px 10px -2px rgba(0,0,0,.18); font-size: 26px; line-height: 1;
	display: none; padding-bottom: 3px;
}
.nav[disabled] { opacity: 0; pointer-events: none; }
.prev { left: -64px; } .next { right: -64px; }
@media (min-width: 760px) and (hover: hover) { .nav { display: block; } }

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

/* v5: every tile the same white, a pencil drawing in the middle */
.tile.t-sketch { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.sketch { position: absolute; left: 50%; top: 42%; width: 72%; transform: translate(-50%, -50%); overflow: visible; }
.sketch .ln { fill: none; stroke: #2B2A28; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sketch .ln.ghost { stroke-width: .7; opacity: .45; }
.sketch .hatch { fill: none; stroke: #2B2A28; stroke-width: .7; stroke-linecap: round; opacity: .55; }
.tile.t-sketch .label { font-weight: 600; }
.bottom { justify-content: center; text-transform: none; font: 500 13px/1 var(--mono); letter-spacing: 0; }
.sq { box-shadow: inset 0 0 0 1px var(--hair); }
.sq.photo { box-shadow: none; }
.sq .mini { flex: none; width: 30%; margin: -4% -4% 0 0; }
.sq .mini .sketch { position: static; transform: none; width: 100%; }