:root{
  --text: #a9a9a9;
  --text-dim: #d0d4db;
  --news-buttn-bg: #181617;
  --home-nav-btn-bg: rgba(255,255,255,0.08);
  --home-nav-btn-bg-hover: rgba(79, 79, 86, 0.16);
  --home-nav-btn-text: #E0E0E1;
  --page-bg-gradient: linear-gradient(139deg, rgba(50, 53, 61, 0.8) 30%,
                            rgba(25, 29, 43, 1) 100%);
  /* --home-gradient: linear-gradient(139deg, rgba(5, 3, 4, 0.7) 30%,
                            rgba(100, 100, 100, 0.6) 100%); */
  --home-gradient: linear-gradient(139deg, rgba(100, 100, 100, 0.5) 0%,
                            rgba(5, 3, 4, 0.7) 40%);
  --home-selfie: url("/assets/images/selfie.webp");
  --about-selfie: url("/assets/images/selfie2.webp");
  /* --about-gradient: linear-gradient(139deg, rgba(5, 3, 4, 0.7) 30%,
                            rgba(25, 29, 43, 0.6) 100%); */
  --about-gradient: linear-gradient(139deg, rgba(100, 100, 100, 0.5) 0%,
                            rgba(5, 3, 4, 0.7) 40%);
  --section-gradient: linear-gradient(139deg, rgba(5, 3, 4, 0.7) 30%,
                            rgba(169, 177, 209, 0.2) 100%);
  /* --page-gradient: linear-gradient(90deg,rgba(4, 79, 120, 1) 0%,
                                         rgba(1, 36, 70, 1) 35%,
                                         rgba(1, 36, 70, 1) 69%,
                                         rgba(0, 70, 145, 0.63) 100%); */
  /* radial-gradient(1200px 50% at 50% -20%, rgba(255,255,255,0.05), transparent); */
  --selfie-edge-bg: #000;
  --section-bg: #0b0d12;
  --linklist-a-bg: rgba(255,255,255,0.1);
  --linklist-a-hover-bg: rgba(255,255,255,0.1);
  --link-clr: var(--text-dim);
  --link-text-color: #cde;
  --link-page-hr-color: rgba(200, 200, 200, 0.2);
  --emal-border-color: #ddd;
}

/* Dark/light support via system preference */
@media (prefers-color-scheme: light) {
  :root {
    --text: #111111; /*  #1b1d22;*/
    --text-dim: #222222;
    --news-buttn-bg: #474878;

    --home-gradient: linear-gradient(125deg, rgba(245, 248, 200, 0.65) 0%,
          rgba(96, 100, 153, 0.9) 30%,
          rgba(75, 75, 144, 0.9) 70%);
          /* rgba(62, 66, 155, 0.9) 70%); */
    --home-nav-btn-bg: #44444430;
    --home-nav-btn-bg-hover: #ffc8b429;
    --home-nav-btn-text: #e0e0e0;
    --about-gradient:  linear-gradient(125deg, rgba(245, 248, 200, 0.65) 0%,
          rgba(96, 100, 153, 0.9) 30%,
          rgba(90, 93, 134, 0.9) 70%);
    --linklist-a-bg: #44444430;
    --linklist-a-hover-bg: #cccccc;
    --link-clr: #161616;
    --page-bg-gradient: linear-gradient(125deg, rgba(245, 248, 200, 0.65) 0%,
          rgba(96, 100, 153, 0.9) 30%,
          rgba(90, 93, 134, 0.9) 70%);
    --section-bg: #f1f2f3;
    --section-gradient: linear-gradient(125deg, rgba(245, 248, 200, 0.25) 0%,
          rgba(96, 100, 153, 0.35) 30%,
          rgba(90, 93, 134, 0.35) 70%);
    --link-text-color: black;
    --link-page-hr-color: rgba(50, 50, 50, 0.2);
    --emal-border-color: #333;
  }

  /* .logo img {
    content: url('/assets/images/logo-light-mode.svg');
  } */
}


* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Noto Sans, Ubuntu, Cantarell, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--page-bg-gradient);
  background-attachment: fixed
}

.selfie-page {
  background-color: var(--selfie-edge-bg);
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100svh;
}

.home { /* extends selfie-page*/
  background-image:
    var(--home-gradient),
    var(--home-selfie);
}

.home-page-main-section {
  min-height: 100svh;
  display: grid;
  place-items: center;

}

.home-page-centered-section {
  /* text-align: center; */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}


.about { /* extends selfie-page*/
  color: oklch(from var(--home-nav-btn-text) calc(l * 1.1)  c h);
  background-image:
    var(--home-gradient),
    var(--about-selfie);
  padding: clamp(1rem, 2vw, 2rem);
}

.about p {
  /* color: var(--home-nav-btn-text); */
  color: oklch(from var(--home-nav-btn-text) calc(l * 1.1)  c h);
}

.about a {
  color: var(--home-nav-btn-text);
  text-decoration: underline;
}

.logo {
  order: 0;
  align-self: center;
  margin: 0 0 1.5rem 0;
  line-height: 1;
}
.logo img {
  display: block;
  width: clamp(200px, 40vw, 420px);
  height: auto;
  max-width: 100%;
}

.menu {
  display: block;
  margin: 0;
  padding: 0;
  margin-top: 0.75rem;
}

.menu .btn { text-align: center; }
.menu .btn + .btn { margin-top: 0.65rem; }
.menu:last-of-type .btn:last-child { margin-bottom: 0; }

.illustration-full {
  padding: 2px 4px;
}

.post-full {
  padding: 2px 8px;
}

@media (min-width: 900px) {
  .home {
    background-position: center center;
  }

  .about {
    background-position: center center;
  }
  .home-page-centered-section {
    flex-direction: row;
    gap: clamp(3rem, 8vw, 6rem);
    margin-top: 0;
  }

  .menu {
    display: flex;
    padding: 0;
    flex-direction: column;
    margin-top: 0rem;
    gap: 0.7rem;
  }
  .menu .btn + .btn { margin-top: 0; }
  .menu .btn { 
    text-align: left;
    padding-left: 25px;
    padding-right: 25px;
    min-width: 150px; 
  }
}

/* Extra large screens */
/* @media (min-width: 1200px)
{
  .home {
    background-position: center center;
  }
} */



/* Buttons (base) */
.btn {
  display: grid;
  height: auto;
  font: inherit;
  min-width: 200px;
  padding: 0.9rem 1.1rem;
  border-radius: 1px;
  color: var(--home-nav-btn-text);
  background: var(--home-nav-btn-bg);
  text-decoration: none;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
}

.btn:hover,
.btn:focus-visible {
  background: var(--home-nav-btn-bg-hover);
  border-color: rgba(255,255,255,0.3);
}
.btn:active {
  transform: translateY(1px);
}

.page {
  min-height: 100svh;
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--section-bg);
  background-image: var(--section-gradient);
  /* background-attachment: fixed; */
}

.centered-content {
  align-self: center;
  max-width: 80ch;
  padding-top: 3em;
  margin: 0 auto;
}

h2 { margin: 0 0 1rem 0; font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
p, li { color: var(--text-dim); line-height: 1.6; }
a { color: var(--link-clr); }
a.back { display: inline-block; margin-top: 1rem; }

/* Blog list */
.post + .post { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 1.75rem; }
@media (prefers-color-scheme: light) {
  .post + .post { border-color: #e2e6ec; }
}
.post h3 a:hover { text-decoration: underline; }
.post-full { max-width: 80ch; margin: 0 auto; }
.post-full .post-body p { line-height: 1.65; }

/* Link list */
.linklist { list-style: none; padding: 0; margin: 0; }
.linklist li {
  --_link-text-color: var(--link-text-color, red);
  margin: 0.4rem 0;
  color: var(--_link-text-color); }

.linklist a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 1px;
  background: var(--linklist-a-bg);
  text-decoration: none;
  /* box-shadow: 3px 3px 3px rgba(200,200,200, 0.1);*/
}

.linklist a:hover { background: var(--linklist-a-hover-bg); }

/* Iconified link list alignment */
.linklist.iconified li { margin: 0.55rem 0; }
.linklist.iconified a {
  display: flex; /* override inline-block */
  align-items: center;
  gap: 0.9rem; /* bigger gap for readability */
  padding: 0.55rem 0.85rem;
  line-height: 1.15;
}
.linklist.iconified a .icon {
  flex: 0 0 34px; /* reserve equal width for all icons */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
}
.linklist.iconified a .icon img {
  display: block;
  max-height: 32px;
  max-width: 32px;
  width: auto;
  height: auto;
}

.link-page hr {
  color: var(--link-page-hr-color);
  size: 10px;
  height: 1px;
  margin: 15px 0px;
  width: 100%;
}

/* Reduce gap on very narrow screens */
@media (max-width: 420px) {
  .linklist.iconified a { gap: 0.6rem; }
  .linklist.iconified a .icon { flex-basis: 30px; height: 30px; }
  .linklist.iconified a .icon img { max-height: 28px; max-width: 28px; }
}

/* Label styling for iconified links */
.linklist.iconified a .label {
  margin-left: 2em;
  flex: 2 1 auto; /* take remaining space */
  display: block;
}

.linklist.iconified a .service-label {
  margin-left: 2em;
  display: block;
  width: 100px;
}


/* Optional hover nudge */
.linklist.iconified a:hover .icon img { transform: scale(1.02); }
.linklist.iconified a .icon img { transition: transform 120ms ease; }
.grid {
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Illustrations */
/* Vertical illustrations list */
.illustrations-list { list-style: none; margin: 0; padding: 0; }
.illustration-row { margin: 0; padding: 0; }
.illustration-row + .illustration-row { border-top: 1px solid rgba(255,255,255,0.1); }
@media (prefers-color-scheme: light) {
  .illustration-row + .illustration-row { border-color: #d9dde3; }
}

.illustration-row-link {
  display: flex;
  gap: 0.6rem;
  padding: 1.05rem 0.25rem;
  text-decoration: none;
  color: inherit;
}

/* Desktop: side-by-side */
@media (min-width: 800px) {
  .illustration-row-link { align-items: flex-start; gap: 1.4rem; }
}

/* Thumbnail column: intrinsic size on mobile, fixed column on desktop without upscaling */
.illus-thumb-wrapper { flex: none; line-height: 0; }
.illus-thumb-figure { margin:0; }
.illus-thumb { display:block; height:auto; width:auto; max-width:100%; border-radius:1px; background:#111; }

/* Mobile thumbnail scaling ----------------------------------------------------
   Goal: Prevent thumbnails from dominating narrow screens while keeping them
   centered and never upscaling beyond intrinsic size.

   We introduce a mobile variable (separate from desktop --thumb-col) so you can
   tweak mobile independently. Desktop overrides live in the min-width:800px block.
*/
:root { --thumb-mobile: clamp(120px, 50vw, 190px); }

/* Apply mobile width when below desktop breakpoint */
@media (max-width:799.98px){
  .illus-thumb-wrapper { width: var(--thumb-mobile); margin: 0 auto; }
  .illus-thumb { max-width: var(--thumb-mobile); }
}

/* Mobile high-DPI tightening (mirrors desktop idea, gentler percentages) */
@media (max-width:799.98px) and (min-resolution:1.5dppx),
       (max-width:799.98px) and (min-resolution:144dpi),
       (max-width:799.98px) and (-webkit-min-device-pixel-ratio:1.5) {
  .illus-thumb-wrapper { width: calc(var(--thumb-mobile) * 0.85); }
  .illus-thumb { max-width: calc(var(--thumb-mobile) * 0.85); }
}
@media (max-width:799.98px) and (min-resolution:2dppx),
       (max-width:799.98px) and (min-resolution:192dpi),
       (max-width:799.98px) and (-webkit-min-device-pixel-ratio:2) {
  .illus-thumb-wrapper { width: calc(var(--thumb-mobile) * 0.7); }
  .illus-thumb { max-width: calc(var(--thumb-mobile) * 0.7); }
}
@media (max-width:799.98px) and (min-resolution:3dppx),
       (max-width:799.98px) and (min-resolution:288dpi),
       (max-width:799.98px) and (-webkit-min-device-pixel-ratio:3) {
  .illus-thumb-wrapper { width: calc(var(--thumb-mobile) * 0.5); }
  .illus-thumb { max-width: calc(var(--thumb-mobile) * 0.5); }
}

/* Give desktop a consistent column width; image will not upscale because width:auto */
@media (min-width:800px){
  :root { --thumb-col: 200px; }
  .illus-thumb-wrapper { width: var(--thumb-col); }
  .illus-thumb { max-width: var(--thumb-col); }
}


/* High-DPI downscale strategy -------------------------------------------------
   We only keep ONE physical thumbnail file per illustration (no separate 2x).
   On high pixel-density ("retina") displays we make the CSS box a bit smaller
   so the existing pixels are packed more tightly, increasing perceived sharpness
   and avoiding the need to ship larger duplicate assets.

   Order matters: these queries come AFTER the base 200px rule so they override.
   You can tune the widths or remove a block if you want less aggressive shrink.

   Breakpoint key:
     1.5dppx  ~ many mid‑range retina / Android phones
     2dppx    ~ standard iPhone / high-end laptop panels
     3dppx    ~ very high density (some phones / tablets)

   How it works:
     - The intrinsic image is never upscaled (width:auto; max-width:[n]px)
     - On higher DPR we just constrain the wrapper a bit (185 → 170 → 155)
     - If the source image is smaller than these widths it will simply display
       at its natural size (no blur) because we never force a larger width.

   To disable for a single item you can add a custom class (e.g. .no-hidpi-tight)
   on the link or wrapper and override inside a later rule:
       .no-hidpi-tight .illus-thumb-wrapper { width:200px !important; }
       .no-hidpi-tight .illus-thumb { max-width:200px !important; }
*/
@media (min-width:800px) and (min-resolution:1.5dppx),
       (min-width:800px) and (min-resolution:144dpi),
       (min-width:800px) and (-webkit-min-device-pixel-ratio:1.5) {
  .illus-thumb-wrapper { width: calc(var(--thumb-col) * 0.75); }
  .illus-thumb { max-width: calc(var(--thumb-col) * 0.75); }
}
@media (min-width:800px) and (min-resolution:2dppx),
       (min-width:800px) and (min-resolution:192dpi),
       (min-width:800px) and (-webkit-min-device-pixel-ratio:2) {
  .illus-thumb-wrapper { width: calc(var(--thumb-col) * 0.5); }
  .illus-thumb { max-width: calc(var(--thumb-col) * 0.5); }
}
@media (min-width:800px) and (min-resolution:3dppx),
       (min-width:800px) and (min-resolution:288dpi),
       (min-width:800px) and (-webkit-min-device-pixel-ratio:3) {
  .illus-thumb-wrapper { width: calc(var(--thumb-col) * 0.33); }
  .illus-thumb { max-width: calc(var(--thumb-col) * 0.33); }
}

/* Slight rendering hint (not universally respected) */
.illus-thumb { image-rendering: -webkit-optimize-contrast; }
@supports (image-rendering: crisp-edges) {
  .illus-thumb { image-rendering: crisp-edges; }
}



/* Prevent upscaling: ensure we never stretch beyond intrinsic size */

.illus-text { flex: 1 1 auto; min-width: 0; }
.illus-title { margin: 0 0 .35rem 0; font-size: 1.1rem; line-height: 1.25; }
.illus-blurb { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text-dim); }

.illustration-row-link:hover .illus-title { text-decoration: underline; }

/* Subtle hover background on larger screens */
@media (hover: hover) and (min-width: 800px) {
  .illustration-row-link { border-radius: 1px; padding: 1rem 0.5rem; }
  .illustration-row-link:hover { background: rgba(255,255,255,0.04); }
  @media (prefers-color-scheme: light) {
    .illustration-row-link:hover { background: rgba(0,0,0,0.04); }
  }
}

.illustration-full { max-width: 90ch; margin: 0 auto; }
.illustration-full .illustration-large { width: 100%; height: auto; max-height: 80vh; object-fit: contain; background:#05070b; }
.illustration-body p { line-height: 1.65; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.signup-form {
    border: var(--emal-border-color);
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
    padding: 10px;
    background-color: var(--section-bg);
    background-image: var(--section-gradient);
    align-self: center;
    justify-self: right;
    width: auto;
    display: grid;
    color: var(--text);
}

.form-group {
    margin-bottom: 15px;
}

input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--emal-border-color);
    border-radius: 1px;
    font-size: 16px;
    box-sizing: border-box;
}

.newsletter-subscribe-button {
    background: #06acff;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 1px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
}

.newsletter-subscribe-button:hover {
    background: #1db4ff;
}

.newsletter-subscribe-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.success-message {
    background: #f0f0f088;
    color: #232323;
    padding: 15px;
    border-radius: 1px;
    margin-top: 15px;
    display: flex;
    display: none;
}

.error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 1px;
    margin-top: 15px;
    display: none;
}

.checkbox-group {
    margin: 10px 0;
}

.checkbox-group label {
    display: flex;
    margin-bottom: 8px;
    cursor: pointer;
}


.checkbox-group input[type="radio"] {
    margin-right: 5px;
    align-self: baseline;
}

.checkbox-group span {
    align-self: baseline;
}

.privacy-text {
    font-size: 12px;
    margin: 15px 0;
}

.newsletter-close-button
{
    background: transparent;
    border: none;
    font-size: 15px;
    cursor: pointer;
    color: var(--text);
    justify-self: right;
    justify-items: center;
    padding: 8px 4px;
}

.newsletter-success-close-button
{
    background: #333333;

    /* background-color: oklch(from #232323 clamp(0, l + 0.22, 1) calc(c * 0.9) h); */
      /* --lighter: oklch(from var(--base) clamp(0, l + 0.22, 1) calc(c * 0.9) h); */
    color: #f0f0f0;
    border: none;
    font-size: 15px;
    cursor: pointer;
    align-self: flex-end;
    justify-self: left;
    justify-items: center;
    padding: 4px 20px;
    margin-left: 10px;
}

:popover-open {
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  border: none;
}

@property --angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes rotate {
  to {
    --angle: 1turn;
  }
}

.newsletter-link-btn {
  border: 3px solid transparent;
  border-radius: 1px;
  background: 
      linear-gradient(var(--news-buttn-bg)) padding-box,
      conic-gradient(from
        var(--angle), 
        var(--home-nav-btn-text), 
        var(--news-buttn-bg), 
        var(--home-nav-btn-text),
        var(--news-buttn-bg),
        var(--home-nav-btn-text)) border-box;
  animation: rotate 4s linear 6;
}