/*
 * prawees.com home and gallery layout. Loads after base.css.
 * Idea: the page is printed on a faint dithered film frame, and the frame changes as you scroll.
 */

/* ---------- sections ---------- */
.sec { padding-top: 56px; row-gap: 20px; }
.label { grid-column: 1 / -1; font-size: var(--fs-s); color: var(--mid); width: fit-content; height: fit-content; padding: 0 .35em 0 0; }
.body { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .sec { padding-top: 96px; }
  .label { grid-column: 1 / 4; margin-top: 6px; }
  .body { grid-column: 4 / 13; }
}

/* ---------- hero ---------- */
.hero { padding-top: 40px; row-gap: 20px; }
.hero h1 { grid-column: 1 / -1; font-size: var(--fs-hero); font-weight: 400; line-height: 1; letter-spacing: -.045em; min-height: 1.05em; white-space: nowrap; }
.hero .id { grid-column: 1 / -1; }
.hero .id > * { width: fit-content; }
.hero .name { font-weight: 700; }
.hero .name-th { color: var(--mid); margin-bottom: 14px; }
.hero .role { max-width: 52ch; white-space: pre-line; }
@media (min-width: 768px) { .hero { padding-top: 72px; } .hero .id { grid-column: 4 / 11; } }
.tw-typing::after { content: ""; display: inline-block; width: .08em; height: .9em; background: var(--ink); margin-left: .06em; vertical-align: -.08em; animation: caret .9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* the word that steps through dither densities and colours (set by the script on the page) */
.smart { display: inline; }
.smart.px { color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; background-size: 6px 6px; image-rendering: pixelated; }
.smart.ol { color: transparent; -webkit-text-fill-color: transparent; }

/* ---------- portraits: three clean prints laid out on a stair ---------- */
.prints { padding-top: 56px; row-gap: 16px; align-items: start; }
.prints img { display: block; width: 100%; height: auto; }
.pr1 { grid-column: 1 / 5; }
.pr2 { grid-column: 1 / 4; }
.pr3 { grid-column: 2 / 5; }
/* phone: the three portraits sit like prints on a scrapbook page, slightly overlapping. Tap one to bring it to the front. */
@media (max-width: 767px) {
  .prints { padding-top: 40px; }
  .scrap { grid-column: 1 / -1; position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 1.26; }
  .scrap img { position: absolute; width: auto; height: auto; border: 6px solid var(--paper); box-sizing: border-box; outline: 1px solid var(--light); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .scrap .pr1 { left: 0; top: 0; width: 54%; transform: rotate(-2.5deg); z-index: 1; }
  .scrap .pr2 { left: 50%; top: 3%; width: 50%; transform: rotate(2deg); z-index: 2; }
  .scrap .pr3 { left: 20%; top: 55%; width: 54%; transform: rotate(-1deg); z-index: 3; }
}
@media (min-width: 768px) { .scrap { display: contents; } }
@media (min-width: 768px) {
  .prints { padding-top: 96px; row-gap: 0; }
  .pr1 { grid-column: 1 / 6; }
  .pr2 { grid-column: 6 / 10; margin-top: 96px; }
  .pr3 { grid-column: 10 / 13; margin-top: 192px; }
}

/* ---------- project index: every entry has its own colour, pixel icon and scroll motion ----------
   assets/scroll3d.js writes three numbers on each .proj from its position in the window:
   --p  -1 (just entering at the bottom) through 0 (centred) to 1 (leaving at the top)
   --k  1 when centred, falling to 0 at the edges
   --e  0 to 1 as the entry rises into view, then stays at 1
   Every tile is flat and upright when centred and tilts away as it leaves, each on its own axis.
   The tilt is capped and only the 72 to 104 px tile moves, so the text never swims. */
.grp { font-size: var(--fs-s); color: var(--mid); width: fit-content; margin: 64px 0 4px; }
.grp:first-child { margin-top: 0; }
.proj { --a: #111; --s: #f4f4f4; --at: var(--a); --p: 0; --k: 1; --e: 1; --tile: 72px;
  position: relative; display: grid; grid-template-columns: var(--tile) minmax(0, 1fr); column-gap: 18px; row-gap: 16px; padding: 28px 0 32px; text-decoration: none; align-items: start; }
@supports (color: color-mix(in srgb, red 50%, black)) { .proj { --at: color-mix(in srgb, var(--a) 70%, #000); } }
/* the coloured rule draws itself in as the entry rises */
.proj::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--a); transform-origin: 0 50%; transform: scaleX(calc(.12 + .88 * var(--e))); }
.tile { grid-row: 1; grid-column: 1; width: var(--tile); height: var(--tile); display: grid; place-items: center; background: var(--s);
  transform-origin: 50% 50%; will-change: transform; transform: perspective(520px) var(--fx, none); }
.tile svg { width: 56%; height: 56%; shape-rendering: crispEdges; }
.tile .px { fill: var(--a); }
.tile .px-mid { fill: var(--a); opacity: .62; }
.tile .px-soft { fill: var(--a); opacity: .32; }
.proj .l { grid-row: 1; grid-column: 2; display: grid; align-content: center; min-height: var(--tile); transform: translate3d(0, calc((1 - var(--e)) * 14px), 0); }
.proj .tt { font-size: var(--fs-h); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; }
.proj .sub { display: none; }
.proj .r { grid-column: 1 / -1; display: grid; row-gap: 10px; align-content: start; justify-items: start; }
.proj .d { width: fit-content; max-width: 52ch; }
.proj .u { font-size: var(--fs-s); color: var(--at); width: fit-content; word-break: break-all; font-weight: 700; }
@media (min-width: 768px) {
  .proj { --tile: 104px; grid-template-columns: var(--tile) minmax(0, 5fr) minmax(0, 4fr); column-gap: 24px; padding: 40px 0 44px; }
  .proj .r { grid-row: 1; grid-column: 3; }
  .proj .l { grid-column: 2; }
}
/* one motion per project, all of them reading as an object turning toward you */
.proj[data-fx="flip"]  .tile { --fx: rotateY(calc(var(--p) * -62deg)); }                                              /* about: a coin turning */
.proj[data-fx="roll"]  .tile { --fx: rotateX(calc(var(--p) * 58deg)) rotateY(calc(var(--p) * 18deg)); }               /* ramathon: a forward roll */
.proj[data-fx="swing"] .tile { transform-origin: 50% 0; --fx: rotateZ(calc(var(--p) * 20deg)) rotateY(calc(var(--p) * 48deg)); } /* g7: a bulb on its cord */
.proj[data-fx="iso"]   .tile { --fx: rotateX(calc((1 - var(--k)) * 58deg)) rotateZ(calc(var(--p) * -42deg)); }        /* gwa-ja-pen: lays down into isometric */
.proj[data-fx="grid"]  .tile { --fx: rotateY(calc(var(--p) * 52deg)) rotateX(calc(var(--p) * -34deg)); }              /* priority: a card tilting on two axes */
.proj[data-fx="grow"]  .tile { transform-origin: 50% 100%; --fx: rotateX(calc(var(--p) * -48deg)) scale(calc(.78 + .22 * var(--k))); } /* wisdom: rises from the ground */
.proj[data-fx="page"]  .tile { transform-origin: 0 50%; --fx: rotateY(calc(var(--p) * 74deg)); }                      /* substack: a page turning */
@media (prefers-reduced-motion: reduce) {
  .tile { transform: none; will-change: auto; }
  .proj::before { transform: none; }
  .proj .l { transform: none; }
}
@media (hover: hover) {
  .proj:hover .tile { background: var(--a); }
  .proj:hover .tile .px, .proj:hover .tile .px-mid, .proj:hover .tile .px-soft { fill: #fff; }
  .proj:hover .tt > span { background-image: var(--d12); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-size: 6px 6px; image-rendering: pixelated; }
}
.proj:focus-visible .tt > span { background-image: var(--d12); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-size: 6px 6px; }
.projects .proj:last-of-type { border-bottom: 1px solid var(--ink); }

.more { margin-top: 28px; width: fit-content; }
.more.go { margin-top: 36px; font-size: var(--fs-b); font-weight: 700; }

/* ---------- frames strip ---------- */
.strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: start; }
.strip a { display: block; text-decoration: none; background: var(--light); }
.strip .s1 { grid-column: 1 / 5; }
.strip .s2 { grid-column: 5 / 7; margin-top: 40px; }
.strip .s3 { grid-column: 1 / 3; }
.strip .s4 { grid-column: 3 / 7; margin-top: 24px; }
@media (min-width: 768px) {
  .strip { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--gap); }
  .strip .s1 { grid-column: 1 / 5; }
  .strip .s2 { grid-column: 5 / 8; margin-top: 64px; }
  .strip .s3 { grid-column: 3 / 6; margin-top: -8px; }
  .strip .s4 { grid-column: 6 / 10; margin-top: 40px; }
}
.hint { font-size: var(--fs-s); color: var(--mid); width: fit-content; margin-top: 20px; }
.hint .t { display: none; }
@media (hover: none) { .hint .t { display: inline; } .hint .m { display: none; } }

/* ---------- contact: each platform keeps its own colour ---------- */
.mail { display: block; width: fit-content; font-size: var(--fs-h); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; text-decoration-thickness: 4px; text-underline-offset: 6px; text-decoration-color: #3b5fc0; margin-bottom: 30px; overflow-wrap: anywhere; }
.rows { display: grid; grid-template-columns: minmax(0, 1fr); }
.rows a { --a: #111; --at: var(--a); display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 2px solid var(--a); text-decoration: none; align-items: baseline; }
@supports (color: color-mix(in srgb, red 50%, black)) { .rows a { --at: color-mix(in srgb, var(--a) 72%, #000); } }
.rows .k { font-weight: 700; color: var(--at); width: fit-content; }
.rows .v { color: var(--ink); width: fit-content; overflow-wrap: anywhere; }
@media (min-width: 768px) { .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (hover: hover) { .rows a:hover .v { text-decoration: underline; text-decoration-color: var(--a); text-decoration-thickness: 3px; text-underline-offset: 4px; } }
@media (pointer: coarse) { .rows a { padding: 16px 0; } }

/* ---------- footer ---------- */
.foot { padding-top: 72px; padding-bottom: max(40px, env(safe-area-inset-bottom)); font-size: var(--fs-s); color: var(--mid); row-gap: 4px; }
.foot span { width: fit-content; }
.foot span:first-child { grid-column: 1 / 3; }
.foot span:last-child { grid-column: 3 / 5; justify-self: end; }
.foot .cur::after { content: "_"; animation: caret 1.05s steps(1) infinite; margin-left: 2px; }
@media (min-width: 768px) { .foot span:first-child { grid-column: 1 / 7; } .foot span:last-child { grid-column: 7 / 13; } }


.strip img { display: block; width: 100%; height: auto; }