@charset "utf-8";
/* CSS Document */

 /* ---------- component: shared ---------- */
  .phototip{
    cursor: crosshair;
    text-decoration: underline;
    text-decoration-color: #7c9a92;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .phototip:focus-visible{ outline:2px solid #7c9a92; outline-offset:2px }

  /* ---------- component: cursor-following layer (pointer devices) ---------- */
  #phototip-layer{
    position: fixed; top:0; left:0; margin:0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .13s ease-out;
    will-change: transform;
    background:#fff;
    padding:5px;
    box-shadow: 0 2px 6px rgba(0,0,0,.14), 0 14px 34px rgba(0,0,0,.20);
    --tip-w: 260px;
    --tip-h: 46vh;
  }
  #phototip-layer.is-visible{ opacity:1 }
  #phototip-layer img{
    display:block;
    width:auto; height:auto;
    max-width: var(--tip-w);
    max-height: var(--tip-h);   /* portraits cap on height, not width */
  }
  #phototip-layer figcaption{
    font: 400 12px/1.45 ui-sans-serif, system-ui, sans-serif;
    color:#5b615e; max-width: var(--tip-w); padding:6px 1px 1px;
  }
  #phototip-layer[data-loading="1"] img{ visibility:hidden }

  /* ---------- component: pinned panel (touch mode "pin") ---------- */
  #phototip-pin{
    position: fixed; inset: 0;
    z-index: 2147483001;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(20,24,22,.42);
    opacity: 0; transition: opacity .18s ease-out;
  }
  #phototip-pin[hidden]{ display:none }
  #phototip-pin.is-open{ opacity:1 }
  #phototip-pin .panel{
    background:#fff; margin:0; padding:10px 10px 12px;
    width:100%; max-width:480px;
    transform: translateY(12px); transition: transform .2s ease-out;
    box-shadow: 0 -8px 40px rgba(0,0,0,.28);
  }
  #phototip-pin.is-open .panel{ transform:none }
  #phototip-pin img{
    display:block; margin:0 auto;
    width:auto; height:auto;
    max-width:100%; max-height:62vh;
  }
  #phototip-pin figcaption{
    font: 400 13px/1.5 ui-sans-serif, system-ui, sans-serif;
    color:#5b615e; padding:9px 2px 0; display:flex; gap:1rem; align-items:baseline;
  }
  #phototip-pin .dismiss{
    margin-left:auto; flex:none; font:inherit; color:#181c1a;
    background:none; border:0; padding:.2em .4em; cursor:pointer;
    text-decoration:underline; text-underline-offset:3px;
  }

  /* ---------- component: inline expand (touch mode "inline") ---------- */
  .phototip-inline{
    display:grid; grid-template-rows: 0fr;
    margin:0; opacity:0;
    transition: grid-template-rows .28s ease, opacity .2s ease, margin .28s ease;
  }
  .phototip-inline.is-open{ grid-template-rows: 1fr; opacity:1; margin:1rem 0 1.5rem }
  .phototip-inline > .clip{ overflow:hidden; min-height:0 }
  .phototip-inline img{
    display:block; width:auto; height:auto;
    max-width:100%; max-height:60vh;
    background:#fff; padding:5px;
    box-shadow: 0 1px 4px rgba(0,0,0,.13), 0 8px 22px rgba(0,0,0,.14);
  }
  .phototip-inline figcaption{
    font: 400 13px/1.5 ui-sans-serif, system-ui, sans-serif;
    color:#5b615e; padding:8px 2px 0;
  }
  .phototip[aria-expanded="true"]{ text-decoration-style: dashed }

  @media (prefers-reduced-motion: reduce){
    #phototip-layer, #phototip-pin, #phototip-pin .panel, .phototip-inline{ transition:none }
  }