/* ronirachmani.com: the one stylesheet for the home page, /projects and the 404 page. Each page sets a class on its
   body (page-home, page-projects, page-404) for the rules that differ between them. Light only, on purpose. */

/* The light grey page, Onest, small mono labels. The violet is sampled from the shirt in the profile photo. */
:root {
  --bg: #f4f4f2; --ink: #111111; --grey: #666666; --violet: #785aad; --hover: #e6e1f1; --rule: #dddcd8;
  --font: "Onest", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--font); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

/* The headline, with its last word in violet, and the grey line under it. */
.hello { font-weight: 600; letter-spacing: -.045em; line-height: .95; }
.hello em { font-style: normal; color: var(--violet); }
.line { color: var(--grey); max-width: 34em; font-size: clamp(17px, 1.5vw, 19px); text-wrap: balance; }

/* ---------- Home page, and the 404 page, which borrows its centred stack ---------- */

.page-home, .page-404 { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; }
.page-home main, .page-404 main { width: 100%; max-width: 860px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.page-home .hello, .page-404 .hello { font-size: clamp(52px, 8.6vw, 116px); }
/* The photo is a cut-out with a transparent background, shown without a circle: head and shoulders, the shirt ending in a straight cut. */
.photo { width: 220px; height: 220px; object-fit: cover; display: block; }
.text { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cta { background: var(--violet); color: #fff; font-weight: 600; padding: 14px 30px; border-radius: 999px; transition: filter .15s, transform .15s; }
.cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
/* The email and its Copy button sit right under the main button, as a pair. */
.primary { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font: 400 14px/1.2 var(--mono); color: var(--grey); }
.mail a { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.mail a:hover { color: var(--violet); }
.copy { font: 500 12px/1 var(--mono); color: var(--ink); background: none; border: 1px solid currentColor; border-radius: 999px; padding: 7px 11px; cursor: pointer; opacity: .7; }
.copy:hover { opacity: 1; color: var(--violet); }
/* Phones and tablets get a button that opens Roni's contact card (name, phone, email, photo) in place of the email;
   it is a plain link with no download attribute, so iOS shows the card with "Create New Contact" and Android saves
   the file and offers to import it. */
.save { display: none; font-weight: 600; padding: 12px 28px; border: 1.5px solid currentColor; border-radius: 999px; transition: background .15s, color .15s; }
.save:hover { background: var(--hover); color: var(--violet); }
/* The links, as icons in two groups: Contact & work, Photos & social. */
.groups { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 4px; }
.group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.group h2 { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.icons a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; transition: background .15s, color .15s; }
.icons a:hover { background: var(--hover); color: var(--violet); }
.icons svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .page-home main, .page-404 main { gap: 18px; }
  .photo { width: 190px; height: 190px; }
}
@media (max-width: 899px) {
  .page-home .save { display: inline-block; }
  .page-home .mail { display: none; }
}
/* Desktop: text on the left, photo on the right, the two centred on the page as one group. */
@media (min-width: 900px) {
  .page-home main { max-width: 1100px; flex-direction: row; justify-content: center; gap: clamp(48px, 6vw, 96px); text-align: left; }
  .page-home main > .photo { order: 2; width: clamp(280px, 27vw, 360px); height: auto; aspect-ratio: 1; flex: none; }
  .page-home .text { align-items: flex-start; gap: 24px; min-width: 0; }
  .page-home .hello { font-size: clamp(72px, 8vw, 124px); }
  .page-home .line { max-width: 31em; }
  .page-home .primary { align-items: flex-start; }
  .page-home .mail { justify-content: flex-start; }
  .groups { flex-direction: row; align-items: stretch; gap: 28px; }
  .group { align-items: flex-start; }
  .group + .group { padding-left: 28px; border-left: 1px solid var(--rule); }
  .icons { justify-content: flex-start; margin-left: -10px; }
}

/* ---------- Projects page ---------- */

.page-projects { padding: 28px 20px 56px; }
.wrap { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px; }
/* The way back to the home page: the photo, on a circle of the site's violet, and the name. */
.home { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: -.01em; }
.home img { width: 48px; height: 48px; display: block; background: var(--violet); border-radius: 50%; }
.home:hover { color: var(--violet); }
.intro { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.page-projects .hello { font-size: clamp(46px, 7vw, 88px); }
.page-projects main { display: flex; flex-direction: column; gap: 20px; }
/* One wide card per project, in the project's own colour (--tint), which is also the colour behind its icon: so the
   icon sits straight on the card. A card sets --accent for its hover and its "New" pill, and may set --edge (border)
   and --soft (label and caption) where the defaults don't suit its tint. */
.feature { background: var(--tint); border: 1px solid var(--edge, #d3e1fa); border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); transition: transform .15s, border-color .15s, box-shadow .15s; }
.feature:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 30px -20px var(--accent); }
.feature .body { padding: clamp(26px, 4vw, 44px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; }
.feature .icon { flex: none; display: grid; place-items: center; margin-bottom: 6px; }
.feature .icon svg { width: 44px; height: 44px; margin-left: -3px; }
/* Noa Tanua's icon is a bus over the name, so it is shown larger than the Maccabi icon to keep the name readable. */
.feature .icon img { display: block; height: 64px; width: auto; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.kind { font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
/* The newest project's label line opens with a "New" pill in the project's accent colour. */
.new { font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 3px 10px; border-radius: 999px; }
.feature h2 { font: 600 clamp(28px, 3.3vw, 38px)/1.08 var(--font); letter-spacing: -.03em; text-wrap: balance; }
.feature p, .feature .kind { color: var(--soft, #555555); }
.feature p { font-size: 18px; line-height: 1.5; }
/* The button takes the site's violet, the colour of "projects." in the headline, instead of the project's accent. */
.btn { margin-top: 8px; background: var(--violet); color: #fff; font-weight: 600; padding: 13px 24px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
.arrow { width: 14px; height: 14px; flex: none; }
/* The picture is a whole browser window, uncropped. */
.shot { padding: clamp(8px, 1.2vw, 14px); display: grid; place-items: center; }
.shot img { width: 100%; max-width: 100%; height: auto; }
.foot { border-top: 1px solid var(--rule); padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font: 400 14px/1.4 var(--mono); color: var(--grey); }
.foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.foot a:hover { color: var(--violet); }
@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; }
  .shot { order: -1; }
}
@media (max-width: 640px) {
  .wrap { gap: 34px; }
  .intro { margin-top: 8px; }
}

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