/* Temessek's ink-and-stone identity, seen through warm optical glass.
   Glass belongs to controls; reading surfaces retain an ivory backing.
   No shaders, remote assets, looping animation or opaque text effects. */
@media screen {
  :root {
    --glass-surface: #f8f4e9;
    --glass-reading: #faf7ed;
    --glass-blur: none;
    --glass-rim: #fffdf5d9;
    --glass-rule: #526e583b;
    --glass-shadow: 0 12px 32px -20px #153d324d, 0 2px 5px #153d320b;
    --glass-ease: cubic-bezier(.22,.75,.25,1);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
      --glass-surface: #f9f6eaad;
      --glass-reading: #faf7edde;
      --glass-blur: blur(18px) saturate(1.18);
    }
  }

  /* A floating, compact lens over the original architectural entrance. */
  .site-head {
    top: 10px;
    width: min(calc(100% - 32px), 1440px);
    margin: 10px auto 0;
    border: 1px solid var(--glass-rim);
    border-radius: 22px;
    background: linear-gradient(130deg, #ffffff52, #ffffff08 50%, #bccab52e), var(--glass-surface);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #50685230, var(--glass-shadow);
    transition: box-shadow .3s var(--glass-ease);
  }
  .site-head.scrolled {box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #50685230, 0 12px 35px -14px #153d3240}
  .site-head .wrap {width: calc(100% - 30px);max-width: none}
  .site-head .nav-row {min-height: 62px;gap: 18px}
  .site-head::after {inset-inline: 24px;bottom: -1px;height: 2px;border-radius: 2px;background: #527b60}
  .site-head .brand-lockup {gap: 12px}
  .site-head .brand-wordmark {outline-color: #81927280;outline-offset: 2px}
  .site-head .nav-links {gap: 3px}
  .site-head .nav-links a {
    border: 1px solid transparent;border-radius: 999px;background: transparent;
    padding-inline: 12px;min-height: 42px;color: #28483b;
    transition: background .18s, box-shadow .18s, color .18s;
  }
  .site-head .nav-links a::after {display: none}
  .site-head .nav-links a:hover {background: #fffdf480}
  .site-head .nav-links a[aria-current=location] {
    background: #fffdf4cf;border-color: #fffdf5;box-shadow: 0 2px 8px #173e3212, inset 0 -1px 0 #718a6633;color: #183d32;
  }
  .header-actions {gap: 10px}
  .language-switch {padding: 3px;border: 1px solid #fffdf5ba;border-radius: 999px;background: #788d7010;box-shadow: inset 0 1px 3px #183d3212}
  .language-switch a {border-radius: 999px;min-height: 34px;padding-inline: 10px}
  .language-switch a[aria-current=page] {background: #284f40;box-shadow: inset 0 1px 0 #ffffff40, 0 2px 5px #183d322b;color: #fffdf5}
  .language-switch a:not([aria-current]):hover {background: #fffdf580}

  /* Tinted green glass makes the real actions unmistakable. */
  .head-contact, .hero-actions .btn-primary,
  #projects.project-overview .project-card-actions .text-link,
  .project-dialog .text-link, .contact-links .whatsapp-link {
    border: 1px solid #224f41;outline: 0;border-radius: 999px;
    background: linear-gradient(165deg, #3b6555, #183d32 78%);color: #fffdf4;
    box-shadow: inset 0 1px 0 #ffffff55, inset 0 -1px 0 #0d2c2580, 0 4px 9px -5px #183d3280;
    transition: transform .18s var(--glass-ease), box-shadow .18s, background .18s;
  }
  .head-contact {min-height: 42px;padding-inline: 15px;white-space: nowrap}
  .hero-actions {gap: 12px}
  .hero-actions .btn {min-height: 48px;padding: 8px 23px}
  .hero-actions .btn-secondary {
    border: 1px solid var(--glass-rim);border-radius: 999px;background: var(--glass-surface);
    box-shadow: inset 0 1px 0 #fff, var(--glass-shadow);color: #183d32;
  }
  .hero-path {
    border: 1px solid var(--glass-rim);border-radius: 22px;padding: 7px 8px;
    background: linear-gradient(140deg, #ffffff50, transparent), var(--glass-surface);
    -webkit-backdrop-filter: var(--glass-blur);backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 -1px 0 #6c82512b, var(--glass-shadow);
  }
  .hero-path a {padding: 5px 8px;min-height: 48px;border-radius: 15px}
  .hero-path a+a {border-inline-start-color: var(--glass-rule)}
  .hero-path span {color: #766032}
  .hero-path a:hover {background: #ffffff50}

  /* Keep the arcade open: one glass sill, not three artificial app icons. */
  #activities .activity-grid::after {
    height: 7px;border: 1px solid #fffdf5bd;border-radius: 999px;
    background: linear-gradient(#fffffacc, #b4c0a980 55%, #f9f8edcc);
    box-shadow: 0 8px 18px -5px #28483b29;
  }
  #activities .activity p {color: #3d5145}

  /* A moving, bounded selection lens; source order and native buttons remain. */
  #projects.project-overview .project-filters {
    position: relative;isolation: isolate;flex-wrap: nowrap;gap: 3px;padding: 5px;
    max-width: 100%;border: 1px solid var(--glass-rim);border-radius: 999px;
    background: var(--glass-surface);box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #5b77572e, var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur);backdrop-filter: var(--glass-blur);
  }
  #projects.project-overview .project-filters button {
    position: relative;z-index: 1;border: 0!important;border-radius: 999px;
    min-height: 42px;padding: 6px 20px;background: transparent;box-shadow: none;color: #354e40;
    transition: color .18s;
  }
  #projects.project-overview .project-filters button[aria-pressed=true] {background: #234f3f;color: #fffdf5}
  #projects.project-overview .project-filters.has-lens button[aria-pressed=true] {background: transparent}
  #projects.project-overview .project-filters::before {
    content: "";position: absolute;top: 5px;bottom: 5px;left: 0;
    width: var(--lens-width, 0px);transform: translateX(var(--lens-x, 0px));border-radius: 999px;
    background: linear-gradient(155deg, #426b59, #183d32 80%);
    box-shadow: inset 0 1px 0 #ffffff66, inset 0 -1px 0 #0a302599, 0 3px 8px #153c3233;
    transition: transform .35s var(--glass-ease), width .35s var(--glass-ease);pointer-events: none;
  }
  #projects.project-overview .project-filters button span {color: #706039}
  #projects.project-overview .project-filters button[aria-pressed=true] span {color: #f5eacb}

  /* Reading plates: softened edge thickness, diffuse reflections, firm text. */
  #projects.project-overview {padding-block: 12px 32px}
  #projects.project-overview .projects-head {margin-bottom: 14px}
  #projects.project-overview .folio-volumes {gap: 24px 28px}
  #projects.project-overview .folio-leaf {
    --rest-y: -1.5deg;--rest-z: -.2deg;min-height: 200px;border: 1px solid #fffef4d9;border-radius: 24px;
    background: linear-gradient(135deg, #ffffff70, transparent 45%, #b4c6b321), var(--glass-reading);
    -webkit-backdrop-filter: var(--glass-blur);backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 #fff, inset -1px -1px 0 #4d70514a, 0 2px 0 #b2c0a7, 1px 4px 0 #55735c, 0 17px 28px -18px #163c3270;
    transform: perspective(1200px) rotateX(calc(2deg + var(--tilt-x))) rotateY(calc(var(--rest-y) + var(--tilt-y))) rotateZ(var(--rest-z));
    transition: transform .4s var(--glass-ease), box-shadow .3s;
  }
  #projects.project-overview .folio-leaf:nth-child(even) {--rest-y: 1.5deg;--rest-z: .2deg}
  #projects.project-overview .folio-leaf::before {
    inset: 0;border: 0;background: linear-gradient(130deg, #fffdf780, transparent 28%, transparent 72%, #a7bca028);
    border-radius: inherit;box-shadow: inset 0 2px 2px #fffdf59e;transform: translateZ(1px);
  }
  #projects.project-overview .folio-leaf::after {
    inset: 5px;border: 1px solid #fffffa75;border-radius: 19px;
    background: radial-gradient(ellipse at var(--glint-x) var(--glint-y), #ffffff8c, transparent 60%);
    box-shadow: inset 0 -1px 0 #78966c12;transform: translateZ(2px);
  }
  #projects.project-overview .folio-leaf:focus-within {outline: 2px solid #315f49;outline-offset: 5px}
  #projects.project-overview .folio-copy {transform: translateZ(7px)}
  #projects.project-overview .folio-leaf .folio-art {height: 110px;transform: translateZ(12px)}
  #projects.project-overview .folio-leaf .project-classification {gap: 5px 8px}
  #projects.project-overview .folio-leaf .project-status {border-radius: 999px;padding: 2px 8px;color: #3e5946;background: #f6f8edbd}
  #projects.project-overview .folio-leaf .project-status[data-status=progress] {color: #675832;background: #f9f3e2d1}
  #projects.project-overview .folio-leaf .project-tag {color: #56644e}
  #projects.project-overview .project-card-actions {border-top-color: #7c8e6733;transform: translateZ(8px)}
  #projects.project-overview .project-card-actions .text-link {min-height: 42px;padding-inline: 13px}
  #projects.project-overview .project-details-button {min-height: 42px;border: 0;border-radius: 999px;padding: 5px 10px;color: #315441;background: #ffffff38}
  #projects.project-overview .project-details-button:hover {background: #ffffffbd;box-shadow: inset 0 0 0 1px #a1b18c50}

  /* A focused reading sheet, with clear dismissal and comfortable paragraphs. */
  .project-dialog {
    border: 1px solid #fffef3d9;border-radius: 28px;background: var(--glass-reading);
    -webkit-backdrop-filter: var(--glass-blur);backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #80977340, 0 30px 90px #0d302d66;
    padding: 20px 28px 22px;
  }
  .project-dialog::backdrop {background: #112e2869;-webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px)}
  .project-dialog[open] {animation: glass-sheet-in .32s var(--glass-ease) both}
  .project-dialog-toolbar {border-bottom-color: var(--glass-rule)}
  .project-dialog-close {border: 1px solid #fffdf5;border-radius: 999px;background: #fffdf599;box-shadow: inset 0 -1px 0 #78906a33;padding-inline: 16px}
  .project-dialog .project-body>p {font-size: 16px;line-height: 1.95;color: #344e40}
  .project-dialog .project-address {color: #536348}
  .project-dialog .text-link {padding-inline: 20px;margin-bottom: 5px}
  .project-dialog-navigation {border-color: var(--glass-rule)}
  .project-dialog-navigation button, .book-navigation button {border-radius: 50%;border: 1px solid #ffffffd9;background: var(--glass-surface);color: #234a39;box-shadow: inset 0 -1px 0 #5d7f5940, 0 3px 7px #24493417}
  .project-dialog-navigation button:disabled {opacity: .4}
  @keyframes glass-sheet-in {from {opacity: 0;transform: translateY(12px) scale(.985)}to {opacity: 1;transform: none}}

  /* Books retain their paper covers. Glass is only the surrounding interface. */
  .contact-panel, .identity-card {
    border: 1px solid #fffef1cc;border-image: none;outline: 0;border-radius: 24px;
    background: var(--glass-reading);box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #76966e40, var(--glass-shadow);
  }
  .contact-panel::before, .identity-card::before {display: none}
  .contact-panel {padding: 30px 36px}
  .contact-links .whatsapp-link {padding: 8px 20px;min-height: 48px;text-decoration: none}
  .identity-top {border-radius: 24px 24px 0 0;background: #fffef840;border-bottom-color: var(--glass-rule)}
  .identity-row {border-bottom-color: var(--glass-rule)}

  /* Two explicit preferences, saved locally without tracking. */
  .motion-control, .glass-control {
    position: fixed;z-index: 40;bottom: max(14px, env(safe-area-inset-bottom));left: 16px;
    min-height: 44px;border: 1px solid var(--glass-rim);border-radius: 999px;color: #244b3c;
    background: var(--glass-surface);-webkit-backdrop-filter: var(--glass-blur);backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #7c946944, var(--glass-shadow);cursor: pointer;
  }
  .motion-control {width: 44px;height: 44px}
  .glass-control {left: 68px;display: flex;align-items: center;gap: 7px;padding: 7px 13px;font: 500 12px/1.5 var(--sans)}
  .glass-control svg {width: 18px;height: 18px;fill: none;stroke: currentColor;stroke-width: 1.5}
  .glass-control[aria-pressed=true] {color: #fffdf4;background: #284f40;border-color: #5b7b60}
  .glass-control:disabled {opacity: 1;cursor: default}
  a:focus-visible, button:focus-visible {outline: 2px solid #315f49;outline-offset: 4px}
  .site-footer a:focus-visible {outline-color: #eee7c8}

  @media (hover:hover) and (pointer:fine) {
    html:not([data-motion=paused]) #projects.project-overview .folio-leaf:hover {
      box-shadow: inset 0 1px 0 #fff, inset -1px -1px 0 #4d705166, 0 2px 0 #b2c0a7, 1px 4px 0 #55735c, 0 24px 38px -19px #163c3280;
    }
    .head-contact:hover, .hero-actions .btn-primary:hover, #projects.project-overview .project-card-actions .text-link:hover, .project-dialog .text-link:hover, .contact-links .whatsapp-link:hover {background: linear-gradient(165deg, #4b765f, #214b3b 78%);box-shadow: inset 0 1px 0 #ffffff70, 0 5px 13px -5px #183d3280}
    .head-contact:active, .hero-actions .btn:active, #projects.project-overview .project-card-actions .text-link:active {transform: scale(.98)}
  }
  @media (max-width:1100px) {
    .site-head .nav-row {min-height: 0;padding-block: 7px 5px;gap: 3px 14px}
    .site-head .nav-links {gap: 5px}
  }
  @media (max-width:900px), (hover:none), (pointer:coarse) {
    #projects.project-overview .folio-leaf {transform: none;-webkit-backdrop-filter: none;backdrop-filter: none}
    #projects.project-overview .folio-copy, #projects.project-overview .folio-leaf .folio-art,
    #projects.project-overview .project-card-actions, #projects.project-overview .folio-leaf::before,
    #projects.project-overview .folio-leaf::after {transform: none}
  }
  @media (max-width:620px) {
    .site-head {width: calc(100% - 16px);top: 6px;margin-top: 6px;border-radius: 20px}
    .site-head .wrap {width: calc(100% - 20px)}
    .site-head .nav-row {gap: 3px 8px;padding-block: 7px 4px}
    .site-head .nav-links {gap: 0;justify-content: space-between}
    .site-head .nav-links a {padding: 6px;min-height: 40px;font-size: 11px}
    html[lang=en] .site-head .nav-links a {padding-inline: 5px;font-size: 10px}
    .header-actions {gap: 7px}
    .header-actions .head-contact {padding: 5px 10px;min-height: 38px}
    .language-switch a {min-height: 32px;padding-inline: 7px}
    .hero-actions .btn {padding: 8px 16px;min-height: 46px}
    .hero-path {padding: 6px 2px;border-radius: 18px}
    .hero-path a {padding-inline: 4px}
    #projects.project-overview .project-filters button {padding: 6px 12px;font-size: 12px}
    #projects.project-overview .project-filters button span {margin-inline-start: 5px;font-size: 11px}
    #projects.project-overview .folio-volumes {gap: 19px 14px}
    #projects.project-overview .folio-leaf {border-radius: 19px;padding: 12px 12px 9px}
    #projects.project-overview .folio-leaf .folio-art {height: 82px}
    #projects.project-overview .folio-leaf::after {border-radius: 14px}
    #projects.project-overview .project-card-actions .text-link {padding-inline: 7px;min-height: 44px}
    #projects.project-overview .project-details-button {min-height: 40px;background: transparent}
    .project-dialog {border-radius: 22px;padding: 12px 18px 18px}
    .project-dialog .project-body>p {font-size: 15px}
    .contact-panel {padding: 24px 20px;grid-template-columns: minmax(0,1fr)}
    .contact-links {grid-template-columns: minmax(0,1fr);gap: 10px}
    .contact-links .whatsapp-link {padding-inline: 15px;justify-self: start}
    .glass-control {font-size: 11px;padding-inline: 11px}
  }
  @media (max-width:359px) {
    .site-head .wrap {width: calc(100% - 16px)}
    .site-head .nav-links a {font-size: 10px;padding-inline: 4px}
    html[lang=en] .site-head .nav-links a {font-size: 10px;padding-inline: 2px}
    .header-actions {gap: 5px}
    .header-actions .head-contact {font-size: 11px;padding-inline: 8px}
    #projects.project-overview .project-filters button {padding-inline: 9px}
  }
  /* More opaque surfaces are a first-class mode, including on older browsers. */
  html[data-transparency=reduced] {--glass-surface: #f8f4e9;--glass-reading: #faf7ed;--glass-blur: none}
  html[data-transparency=reduced] .project-dialog::backdrop {backdrop-filter: none;-webkit-backdrop-filter: none;background: #16372bd9}
  @media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
    :root {--glass-surface: #f8f4e9;--glass-reading: #faf7ed;--glass-blur: none}
    .project-dialog::backdrop {backdrop-filter: none;-webkit-backdrop-filter: none;background: #16372bd9}
  }
  @media (prefers-reduced-motion:reduce) {
    #projects.project-overview .folio-leaf {transform: none!important}
    .project-dialog[open] {animation: none}
  }
  @media (forced-colors:active) {
    .site-head, #projects.project-overview .folio-leaf, .project-dialog, .glass-control {border: 1px solid CanvasText}
    #projects.project-overview .project-filters::before {display: none}
    #projects.project-overview .project-filters button[aria-pressed=true] {outline: 2px solid Highlight}
  }
}
@media print {.glass-control {display: none!important}}