/* ginnel.ai links hub — tokens from the GRE Agent Portal gre.css */
:root{
  --gre-green:#195230; --gre-green-tint:#E6EDE8;
  --gre-page:#F7F3EA; --gre-surface:#FFFCF7; --gre-hover:#F3EEE3;
  --gre-text:#1F1F1F; --gre-text-2:#555555; --gre-muted:#8A8A8A;
  --gre-line:#E6DFD0; --gre-line-strong:#D6CDBA;
  --gre-focus-ring-pri:0 0 0 2px #FFFCF7, 0 0 0 4px rgba(25,82,48,.45);
  --font-serif:"Fraunces",Georgia,serif; --font-sans:"Inter",system-ui,sans-serif;
  --hub-col:400px; --hub-col-grid:640px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--gre-page);color:var(--gre-text);font:400 14px/20px var(--font-sans);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hub{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px 96px}
.logo{display:block;width:96px;height:96px;border-radius:10px;margin-bottom:40px}
nav{width:100%;max-width:var(--hub-col)}
.hub.grid nav{max-width:var(--hub-col-grid)}
.links{list-style:none;display:grid;grid-template-columns:1fr;gap:8px}
.hub.grid .links{grid-template-columns:1fr 1fr}
.tile{display:flex;align-items:center;gap:12px;height:56px;padding:0 14px 0 12px;background:var(--gre-surface);border:1px solid var(--gre-line);border-radius:10px;color:var(--gre-text);text-decoration:none;outline:none;transition:border-color .12s,background-color .12s}
.ico{width:32px;height:32px;flex:none;border-radius:6px;background:var(--gre-green-tint);color:var(--gre-green);display:flex;align-items:center;justify-content:center}
svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.txt{display:flex;flex-direction:column;min-width:0;flex:1}
.lbl{font-size:14px;line-height:20px;font-weight:550}
.host{font-size:12px;line-height:16px;color:var(--gre-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arr{color:var(--gre-muted);transition:transform .12s,color .12s}
.tile:hover,.tile.hover{border-color:var(--gre-line-strong);background:#FFFDF9}
.tile:hover .arr,.tile.hover .arr{color:var(--gre-green);transform:translateX(2px)}
.tile:focus-visible,.tile.focus{box-shadow:var(--gre-focus-ring-pri);border-color:var(--gre-green)}
.tile:focus-visible .arr,.tile.focus .arr{color:var(--gre-green)}
.tile:active,.tile.active{background:var(--gre-hover);border-color:var(--gre-line-strong)}
.tile:active .arr,.tile.active .arr{color:var(--gre-green);transform:translateX(0)}
@media (max-width:719px){
  .hub,.hub.grid{justify-content:flex-start;padding:72px 16px 40px}
  .hub.grid .links{grid-template-columns:1fr}
  .logo{width:80px;height:80px;margin-bottom:32px}
}
@media (prefers-reduced-motion:reduce){.tile,.arr{transition:none}.tile:hover .arr{transform:none}}
/* ---- photo background (2026-10-21) ---- */
.bg{position:fixed;inset:0;z-index:-1;background-color:var(--gre-page);background-size:cover;background-position:50% 45%;overflow:hidden}
.bg picture{display:block;width:100%;height:100%}
.bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
/* blurred placeholder (image set inline in index.html) */
.bg::before{content:"";position:absolute;inset:0;background-size:cover;background-position:inherit;filter:blur(20px);transform:scale(1.1)}
.bg picture{position:relative;z-index:1}
.bg img{color:transparent}
/* phone: 3:4 art-directed crop */
@media (max-width:719px){.bg{background-position:50% 50%}.bg img{object-position:50% 50%}}
/* portrait tablet: desktop image, shifted left */
@media (min-width:720px) and (max-width:1023px) and (orientation:portrait){.bg{background-position:42% 45%}.bg img{object-position:42% 45%}}
body.photo{background:var(--gre-page)}
.photo .logo{box-shadow:0 1px 2px rgba(0,0,0,.10),0 10px 30px rgba(0,0,0,.18)}
.photo .tile{background:rgba(255,252,247,.66);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.65);box-shadow:0 1px 2px rgba(31,31,31,.06),0 8px 24px rgba(31,31,31,.10)}
.photo .host{color:#404040}
.photo .tile:hover,.photo .tile.hover{background:rgba(255,253,249,.96);border-color:rgba(255,255,255,.85)}
.photo .tile:focus-visible,.photo .tile.focus{border-color:var(--gre-green);box-shadow:0 0 0 2px #FFFCF7,0 0 0 4px var(--gre-green),0 8px 24px rgba(31,31,31,.10)}
.photo .tile:active,.photo .tile.active{background:rgba(243,238,227,.96);border-color:rgba(255,255,255,.85)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.photo .tile{background:rgba(255,252,247,.96)}}
@media (prefers-reduced-transparency:reduce){.photo .tile,.photo .tile:hover{background:var(--gre-surface);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--gre-line)}}