:root{
--font-sans:'Inter',system-ui,sans-serif;
--ink:#0b3d3a; --sea:#0ea5a6;
/* Warmer parchment background for light theme */
--sand:#fbf6e9; /* page background */
--card-bg:#fffbf4; /* warm card background */
--header-bg:#f6efe1; /* header tint to match parchment */
--gold:#b28b19;
--scrollbar-track:rgba(15,23,42,.12);
--scrollbar-thumb:rgba(15,23,42,.45);
/* Calligraphy (light) */
--about-ink:#1e293b; --quote-ink:#7a1c1c; --latin-ink:#475569;
}
[data-theme="dark"]{
--ink:#e0f2f1; --sea:#06b6d4; --sand:#0b1320;
--card-bg:#162032; --header-bg:#111827; --gold:#facc15;
--scrollbar-track:rgba(255,255,255,.18);
--scrollbar-thumb:rgba(255,255,255,.55);
/* Calligraphy (dark) */
--about-ink:rgba(224,242,241,.78);
--quote-ink:rgba(250,204,21,.82);
--latin-ink:#93a3b8;
}
body{
font-family:'Inter',system-ui,sans-serif;
color:var(--ink);
background:var(--sand);
transition:background .4s,color .4s;
margin:0;
overflow-x:hidden;
min-height:100vh;
}
h1,h2,h3{font-family:'Rubik',var(--font-sans);text-align:center;}
.portugal-subtitle{
font-family:'Great Vibes','Marcellus SC','Cinzel',serif;
font-size:clamp(1.7rem,3vw,2.2rem);
font-weight:600;
letter-spacing:.03em;
color:#2b645e;
}
[data-theme="dark"] .portugal-subtitle{
color:#9ad6ce;
}
/* Hero title override */
.hero-title{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.3px;}
header{
background:var(--header-bg);
transition:background .4s ease,color .4s ease;
flex-wrap:wrap;
gap:.6rem 1rem;
}
/* Brand */
.old-map-font{font-family:'Marcellus SC',serif;font-size:2rem;color:var(--ink);letter-spacing:.5px;cursor:pointer;}
/* Compass/Satellite logo (compass default in light, satellite default in dark) */
.logo-mark{
display:inline-flex;
align-items:center;
justify-content:center;
position:relative;
color:var(--ink);
gap:.2rem;
width:65px;
height:65px;
background:transparent;
cursor:pointer;
}
.logo-mark .compass-logo{width:65px; height:65px;}
.satellite-logo{width:65px;height:65px;}
.logo-mark [data-logo-asset]{
position:absolute;
inset:0;
opacity:0;
pointer-events:none;
display:block;
transition:opacity .25s ease;
background:transparent;
}
.logo-mark[data-logo="compass"] [data-logo-asset="compass"],
.logo-mark[data-logo="satellite"] [data-logo-asset="satellite"]{
opacity:1;
pointer-events:auto;
}
[data-theme="dark"] .logo-mark{color:#38bdf8;}
.compass{
width:65px;
height:65px;
transition:transform .55s ease-out;
transform-origin:50% 50%;
transform:rotate(0deg);
will-change:transform;
}
.logo-mark[data-logo="compass"]:hover .compass{
animation:compass-tilt-once .95s cubic-bezier(.22,.61,.36,1) forwards;
}
.compass .needle{
transition:transform 2.5s ease-in-out;
transform-origin:32px 32px;
animation:oscillate 5s ease-in-out infinite alternate;
fill:#e11d2a; /* red needle */
stroke:#7f1d1d; /* darker edge */
}
@keyframes oscillate{0%{transform:rotate(-3.5deg);}100%{transform:rotate(3.5deg);}}
.logo-mark[data-logo="compass"]:hover .needle{animation:oscillate-hover 1.8s ease-in-out infinite alternate;}
@keyframes oscillate-hover{0%{transform:rotate(-9deg);}100%{transform:rotate(9deg);}}
@keyframes compass-tilt-once{
0%{transform:rotate(0deg);}
55%{transform:rotate(15deg);}
100%{transform:rotate(12deg);}
}
/* Direction letters: Option 1 (shadow glow) + Option 3 (color-adaptive stroke) */
.compass .dir{
font-family:'Poppins',sans-serif;
font-weight:700;
font-size:11.5px;
letter-spacing:.7px;
text-rendering:geometricPrecision;
fill:#0b3d3a;
paint-order:stroke fill;
stroke:#ffffff;
stroke-width:1.0; /* UPDATED: slimmer halo in light */
filter:drop-shadow(0 0 3px rgba(0,0,0,.45)); /* UPDATED: slightly softer */
transition:fill .3s ease, stroke .3s ease, filter .3s ease, stroke-width .3s ease;
}
[data-theme="dark"] .compass .dir{
fill:#ffffff;
stroke:rgba(103,232,249,.7); /* UPDATED: softer cyan */
stroke-width:.9; /* UPDATED: thinner outline */
filter:drop-shadow(0 0 2.5px rgba(103,232,249,.6)); /* UPDATED: slimmer glow */
}
/* Ticks */
.compass-night,.satellite-night,.satellite-day{
width:70px;
height:70px;
filter:drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
@keyframes dash-drift{
from{stroke-dashoffset:0;}
to{stroke-dashoffset:-32;}
}
.compass .tick{stroke:currentColor;opacity:.85;}
.compass .tick.minor{stroke-width:1;}
.compass .tick.major{stroke-width:2;opacity:1;}
/* Satellite (dark-mode logo) */
.satellite-logo{
width:65px;
height:65px;
overflow:visible;
filter:drop-shadow(0 8px 16px rgba(0,0,0,.28));
}
.satellite-logo .inner-ring{
fill:none;
stroke:#9fe8ff;
stroke-width:1;
opacity:.38;
}
.satellite-logo .orbit-track{
fill:none;
stroke:var(--ink);
stroke-width:2;
stroke-linecap:round;
stroke-dasharray:4.6 6.6;
animation:dash-drift 9s linear infinite;
opacity:.95;
}
[data-theme="dark"] .satellite-logo .orbit-track{
stroke:#f8fbff;
}
.satellite-logo .planet{
fill:url(#planet-core);
stroke:#0d6058;
stroke-width:1.4;
}
.satellite-logo .planet-shadow{ fill:url(#planet-shadow); }
.satellite-logo .planet-spot{ fill:#148676; opacity:.85; }
.satellite-logo .planet-spot.big{ fill:#0e7367; }
.satellite-logo .planet-highlight{ fill:rgba(255,255,255,.16); }
.satellite-logo .spark{
fill:#82d8ff;
opacity:.78;
animation:spark-pulse 3s ease-in-out infinite;
}
.satellite-logo .spark.yellow{
fill:#f6d76b;
opacity:.95;
animation-duration:3.8s;
animation-delay:.5s;
}
.satellite-logo .orbiter{ transform-origin:32.5px 32.5px; }
.satellite-logo .satellite{ filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.satellite-logo .sat-body{
fill:#b7c4d6;
stroke:#3b4252;
stroke-width:.9;
}
.satellite-logo .sat-window{
fill:#f36c7b;
stroke:#ffd7de;
stroke-width:.7;
}
.satellite-logo .sat-window.alt{
fill:#e6edf5;
stroke:#c7d1de;
}
.satellite-logo .sat-panel{
fill:url(#panel-glow);
stroke:#2d6fbf;
stroke-width:.9;
}
.satellite-logo .antenna{ fill:#5cc8ff; }
.satellite-logo .antenna-tip{ fill:#ffdd70; }
.satellite-logo .thruster{ fill:#7ad9c6; opacity:.9; }
@keyframes spark-pulse{0%,100%{transform:scale(1);opacity:.55;}50%{transform:scale(1.2);opacity:1;}}
/* Nav hover + active bubble */
nav{flex-wrap:wrap;}
nav a.nav-tab{position:relative;padding:.25rem .6rem;border-radius:999px;transition:color .25s ease;font-family:'Rubik',sans-serif;font-weight:500;color:var(--ink);white-space:nowrap;}
nav a.nav-tab::before{content:'';position:absolute;inset:0;background:var(--sea);border-radius:999px;transform:scale(0);transition:transform .25s ease;z-index:-1;}
nav a.nav-tab:hover::before{transform:scale(1);box-shadow:0 6px 14px rgba(0,0,0,.18);}
nav a.nav-tab:hover{color:#fff;}
nav a.nav-tab.active{color:#fff;}
nav a.nav-tab.active::before{transform:scale(1);box-shadow:0 6px 14px rgba(0,0,0,.18);}
@media (max-width: 720px){
header{justify-content:flex-start;}
header > div{flex-wrap:wrap;}
header > div:last-child{gap:.75rem; justify-content:flex-start;}
nav{gap:.55rem;}
nav a.nav-tab{padding:.28rem .65rem;font-size:.95rem;}
.logo-mark{width:56px;height:56px;}
.logo-mark .compass-logo,
.satellite-logo{width:56px;height:56px;}
.old-map-font{font-size:clamp(1.35rem,5vw,1.6rem);}
.theme-toggle{width:34px;height:34px;}
}
@media (max-width: 480px){
header > div:last-child{width:100%;}
nav{width:100%;}
nav a.nav-tab{font-size:.93rem;}
}
/* Theme toggle */
.theme-toggle{background:var(--sea);color:#fff;border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s, transform .2s;}
/* Sun icon in light mode should be yellow */
[data-theme="light"] .theme-toggle{ color:#ffd60a; }
.theme-toggle:hover{background:var(--ink);transform:scale(1.1);}
.gradient-line{height:3px;width:120px;margin:10px auto;background:linear-gradient(to right,transparent,var(--sea),transparent);border-radius:999px;}
/* Sections (SPA) */
.page-section{
display:none;
opacity:0;
transition:opacity .35s ease;
padding-block:clamp(3.5rem, 7vw, 5.5rem);
}
.page-section.active{display:block;opacity:1;}
/* Avatar + Calligraphy */
.avatar{width:clamp(200px,18vw,280px);height:clamp(200px,18vw,280px);border-radius:9999px;object-fit:cover;border:3px solid rgba(11,61,58,.25);box-shadow:0 6px 20px rgba(0,0,0,.12);transition:transform .2s,box-shadow .3s,border-color .3s;}
.avatar:hover{transform:scale(1.02);}
[data-theme="dark"] .avatar{border-color:var(--gold);box-shadow:0 0 0 4px rgba(250,204,21,.16),0 10px 28px rgba(0,0,0,.45);}
.gryffindor-text{font-family:'Great Vibes',cursive;font-size:2.45rem;color:var(--quote-ink)!important;font-style:italic;margin-top:.75rem;transition:color .4s ease;}
.about-text{font-family:'Dancing Script',cursive;font-size:1.65rem;line-height:1.9;color:var(--about-ink)!important;max-width:800px;margin:auto;transition:color .4s ease;}
/* Journey epigraph (quote) */
.journey-quote{font-family:'Dancing Script',cursive;font-size:1.65rem;line-height:1.9;color:var(--quote-ink)!important;font-style:italic;max-width:820px;margin:1rem auto 2.5rem;}
.journey-quote .quote-mark{display:inline-block;font-size:2rem;line-height:0;vertical-align:text-top;}
.journey-quote .quote-mark:first-child{margin-right:.25rem;}
.journey-quote .quote-mark:last-child{margin-left:.08rem;}
.journey-quote .attrib{display:block;font-family:'Marcellus SC',serif;font-size:1rem;letter-spacing:.5px;margin-top:.35rem;color:var(--latin-ink);font-style:normal;}
/* Add breathing room before About section (kept below the first fold on desktop) */
#about{ margin-top:clamp(6rem, 16vh, 22vh); }
/* Cards */
.project-card{background:var(--card-bg);border-radius:14px;padding:1rem 1rem 2.4rem;box-shadow:0 8px 20px rgba(0,0,0,.08);transition:transform .3s, box-shadow .3s, opacity .5s;opacity:0;transform:translateY(10px);}
.project-card.visible{opacity:1;transform:translateY(0);}
.project-card:hover{transform:translateY(-5px);box-shadow:0 12px 24px rgba(0,0,0,.15);}
[data-theme="dark"] .project-card{box-shadow:0 8px 20px rgba(0,255,255,.08);}
.project-title{font-weight:600;font-size:1.1rem;margin-bottom:.4rem;color:var(--ink);}
.project-card p{ margin:0; }
/* Footer quote */
.latin-quote{text-align:center;font-style:italic;color:var(--latin-ink);margin-top:.5rem;font-size:.95rem;transition:color .4s ease;}
/* === Sticky-note timeline with thumbtacks === */
.timeline-wall{ max-width:900px; margin:2rem auto 0; position:relative; }
.notes-grid{ display:grid; grid-template-columns:repeat(2,minmax(280px,1fr)); column-gap:2rem; row-gap:2rem; align-items:start; justify-items:stretch; --col-gap:2rem; }
.notes-grid .note:nth-child(odd){ justify-self:end; --tilt:-1.2deg; }
.notes-grid .note:nth-child(even){ justify-self:start; --tilt:1.2deg; }
/* Center-spanning note (for milestone like Independent Projects) */
.notes-grid .note.center{
grid-column:1 / -1;
justify-self:center;
--tilt:0deg;
width:calc((100% - var(--col-gap)) / 2);
z-index:1; /* ensure it sits above the center line to create a clean gap */
}
/* Default: make the last note span center if not explicitly marked */
.notes-grid > .note:last-child{
grid-column:1 / -1; justify-self:center; --tilt:0deg; width:calc((100% - var(--col-gap)) / 2);
}
.timeline-wall::before{
content:""; position:absolute; inset:0; width:4px; margin:0 auto;
background:linear-gradient(to bottom, var(--sea), transparent 12%, var(--sea) 40%, transparent 70%, var(--sea));
border-radius:2px; opacity:.35; z-index:0; pointer-events:none;
}
.note{
position:relative; background:#fffdeb; color:#0f172a; padding:1rem 1.25rem;
border-radius:14px; box-shadow:0 10px 22px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6);
width:100%; margin:0; transform:rotate(var(--tilt,-1.2deg));
transition:transform .2s ease, box-shadow .2s ease; z-index:1;
}
.note:hover{ transform:rotate(0deg); box-shadow:0 14px 28px rgba(0,0,0,.18); }
.note h4{ font-weight:700; margin-bottom:.35rem; }
.note p{ margin:0; font-size:1rem; line-height:1.45; }
.route-timeline .note p{ font-style:italic; }
.note .sub{ opacity:.75; font-size:.9rem; margin-top:.25rem; }
.note.yellow{ background:#fff9c2; }
.note.green{ background:#eaffe7; }
.note.blue { background:#ecfbff; }
.note.pink { background:#fff0f4; }
.pin{
position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-45deg);
width:22px; height:22px; border-radius:50% 50% 50% 0; z-index:2;
background:linear-gradient(180deg, #ef4444, #dc2626);
border:1.5px solid rgba(255,255,255,.95);
box-shadow:0 10px 18px rgba(0,0,0,.18);
}
.pin::after{
content:""; position:absolute; inset:0; margin:auto; width:8px; height:8px; border-radius:50%;
background:#fff; transform:rotate(45deg); box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
[data-theme="dark"] .pin{
background:linear-gradient(180deg, #f87171, #b91c1c);
border-color:rgba(255,255,255,.85);
box-shadow:0 14px 24px rgba(0,0,0,.6);
}
/* Dark: make notes opaque so center line does not show through */
[data-theme="dark"] .note{ background:var(--card-bg); color:var(--ink);
box-shadow:0 16px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); }
/* Dark theme: keep the cheerful pastel tints */
/* Preserve cheerful tints but over an opaque card base */
[data-theme="dark"] .note.yellow{
background:linear-gradient(180deg, rgba(250,204,21,.12), rgba(250,204,21,.08)), var(--card-bg);
}
[data-theme="dark"] .note.green{
background:linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.08)), var(--card-bg);
}
[data-theme="dark"] .note.blue{
background:linear-gradient(180deg, rgba(56,189,248,.12), rgba(56,189,248,.08)), var(--card-bg);
}
[data-theme="dark"] .note.pink{
background:linear-gradient(180deg, rgba(244,114,182,.12), rgba(244,114,182,.08)), var(--card-bg);
}
/* Contact form */
section#contact input, section#contact textarea{
background:var(--card-bg) !important; color:var(--ink);
border:1px solid rgba(2,6,23,.10); border-radius:12px; padding:.9rem 1rem;
box-shadow:0 6px 18px rgba(0,0,0,.06);
transition:background .25s, border-color .25s, box-shadow .25s, color .25s;
caret-color:var(--sea);
}
[data-theme="dark"] section#contact input, [data-theme="dark"] section#contact textarea{
background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.18);
box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
color-scheme:dark;
}
section#contact input::placeholder, section#contact textarea::placeholder{ color:#94a3b8; }
[data-theme="dark"] section#contact input::placeholder, [data-theme="dark"] section#contact textarea::placeholder{ color:rgba(224,242,241,.60); }
section#contact input:focus, section#contact textarea:focus{
outline:none; border-color:var(--sea); box-shadow:0 0 0 3px rgba(6,182,212,.25);
}
section#contact button:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.15); }
/* Contact tiles */
.contact-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.contact-card{
display:flex; align-items:center; gap:.85rem; text-align:left; background:var(--card-bg);
border-radius:14px; padding:1rem 1.1rem; color:var(--ink); text-decoration:none;
border:1px solid rgba(2,6,23,.08); box-shadow:0 10px 22px rgba(0,0,0,.08);
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.contact-card:hover{ transform:translateY(-3px); box-shadow:0 14px 26px rgba(0,0,0,.14); border-color:rgba(6,182,212,.35); }
.contact-icon{
flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
background:linear-gradient(135deg, var(--sea), #16a34a); color:#fff;
box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
}
.contact-icon svg{ display:block; width:22px; height:22px; }
.contact-card.linkedin .contact-icon{ background:#0A66C2; }
.contact-card.upwork .contact-icon{ background:#14A800; }
.contact-title{ font-weight:700; }
.contact-sub{ font-size:.92rem; opacity:.8; }
[data-theme="dark"] .contact-card{ box-shadow:0 14px 30px rgba(0,0,0,.45); border-color:rgba(255,255,255,.08); }
/* Mobile */
@media (max-width: 800px){
.notes-grid{ grid-template-columns:1fr; row-gap:1.25rem; }
.notes-grid .note:nth-child(odd), .notes-grid .note:nth-child(even){
justify-self:center; --tilt:0deg;
}
/* Center note should also take full width on mobile */
.notes-grid .note.center, .notes-grid > .note:last-child{ width:100%; }
}
/* Home page: old-timey compass ornament (end of page) */
.home-compass-ornament{
position:absolute;
right:calc(2vw + clamp(-3rem, -1.5rem, -.75rem));
bottom:clamp(1.5rem, 5vw, 3.5rem);
display:flex;
justify-content:flex-end;
pointer-events:none;
z-index:1;
}
.home-compass-ornament svg{
width:clamp(160px, 24vw, 320px);
height:auto;
opacity:.14;
color:var(--ink);
transform:rotate(-18deg); /* gentle tilt like old Safari */
transform-origin:50% 50%;
mix-blend-mode:multiply; /* soft on light */
}
[data-theme="dark"] .home-compass-ornament svg{
opacity:.12;
mix-blend-mode:screen; /* soft on dark */
}
/* World map watermark removed */
/* Bathymetry/contour watermark on Home (CSS background tile) */
#homePage{
position:relative;
overflow:hidden;
padding-bottom:clamp(7rem, 16vw, 12rem);
}
/* Hide old inline block if present */
.contour-watermark{ display:none !important; }
#homePage::before{
content:""; position:absolute; inset:-6% -6% 0 -6%; pointer-events:none; z-index:0;
background-image:url('data:image/svg+xml,');
background-repeat:repeat; background-size:480px 280px; opacity:.06; mix-blend-mode:multiply;
}
[data-theme="dark"] #homePage::before{ opacity:.08; mix-blend-mode:screen; filter:saturate(115%); }
/* Old cartographic watermarks (compass rose, ship, lighthouse, dividers) */
#homePage::after, #portfolioPage::after{
/* Watermark layer disabled across pages as requested */
content:none !important; background-image:none !important;
}
[data-theme="dark"] #homePage::after, [data-theme="dark"] #portfolioPage::after{ content:none !important; background-image:none !important; }
/* --- Inline portfolio viewer + hover dropdown --- */
.hidden{ display:none !important; }
.project-card{ position:relative; overflow:hidden; }
.project-card::after{
content:'View inline ?';
position:absolute; left:0; right:0; bottom:0; height:2.2rem;
display:flex; align-items:flex-end; justify-content:center;
background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
color:#fff; font-weight:800; padding-bottom:.35rem; letter-spacing:.25px;
text-shadow:0 2px 4px rgba(0,0,0,.45), 0 0 1px rgba(0,0,0,.65);
backdrop-filter:saturate(110%) brightness(.9);
opacity:0; transform:translateY(6px);
transition:opacity .25s ease, transform .25s ease;
pointer-events:none;
}
/* Light theme: stronger contrast for overlay */
[data-theme="light"] .project-card::after{
background:linear-gradient(to top, rgba(2,6,23,.76), rgba(2,6,23,.16));
text-shadow:0 2px 5px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.7);
}
.project-card:hover::after, .project-card:focus-within::after{ opacity:1; transform:translateY(0); }
/* Hide "View inline" badge for Academic StoryMap card only */
.project-card[href*="arcg.is/0qTyOj"]::after,
.project-card[data-embed*="storymaps.arcgis.com/stories"]::after{
content: none !important;
display: none !important;
}
.portfolio-viewer{
margin-top:1rem; border-radius:14px; background:var(--card-bg);
box-shadow:0 10px 28px rgba(0,0,0,.18);
border:1px solid rgba(2,6,23,.08);
overflow:hidden;
}
.viewer-header{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.6rem .9rem; background:var(--header-bg); border-bottom:1px solid rgba(2,6,23,.08); }
.viewer-title{ font-weight:600; }
.viewer-actions{ display:flex; align-items:center; gap:.5rem; }
.viewer-download{ color:var(--sea); text-decoration:underline; }
.viewer-close{ background:var(--sea); color:#fff; border:0; border-radius:10px; padding:.35rem .6rem; cursor:pointer; }
.viewer-close:hover{ filter:brightness(.95); }
.viewer-body{ height:min(75vh, 900px); }
.viewer-body object, .viewer-body iframe, .viewer-body img{ width:100%; height:100%; display:block; background:#fff; border:0; object-fit:contain; }
[data-theme="dark"] .viewer-body object, [data-theme="dark"] .viewer-body iframe, [data-theme="dark"] .viewer-body img{ background:#111827; }
.viewer-fallback a{ color:var(--sea); text-decoration:underline; }
.viewer-error{ padding:.6rem .9rem; color:var(--ink); }
[data-theme="dark"] .viewer-error{ color:var(--ink); }
/* Toolbox */
.toolbox-strip{ display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:center; }
.tool-item{ display:flex; flex-direction:column; align-items:center; gap:.4rem; min-width:84px; padding:.5rem .4rem; opacity:.92; transition:transform .2s ease, opacity .2s ease; }
.tool-item:hover{ transform:translateY(-3px); opacity:1; }
.tool-icon{ width:44px; height:44px; border-radius:999px; display:grid; place-items:center; background:var(--card-bg); border:1px solid rgba(2,6,23,.08); box-shadow:0 8px 20px rgba(0,0,0,.06); overflow:hidden; }
.tool-icon img, .tool-icon svg{ width:22px; height:22px; display:block; }
[data-theme="dark"] .tool-icon{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03); }
[data-theme="dark"] .tool-icon img{ filter:saturate(115%) brightness(1.05); }
/* SNAP (ESA) visibility tweaks in dark */
[data-theme="dark"] .tool-item.snap .tool-icon{ background:rgba(255,255,255,.10); }
[data-theme="dark"] .tool-item.snap .tool-icon img{ filter:saturate(125%) brightness(1.05); }
.tool-label{ font-size:.84rem; color:var(--ink); }
/* ArcGIS: use original logo file; tint blue in dark mode for visibility */
.tool-item.arcgis .tool-icon img{ filter:none; }
[data-theme="dark"] .tool-item.arcgis .tool-icon{ background:rgba(255,255,255,.10); }
[data-theme="dark"] .tool-item.arcgis .tool-icon img{
filter: invert(27%) sepia(64%) saturate(1500%) hue-rotate(182deg) brightness(92%) contrast(92%);
}
/* === Explorer-style route timeline === */
.route-timeline{
position:relative;
min-height:clamp(1250px, 170vh, 2100px);
margin:2.5rem auto 3rem;
max-width:1100px;
}
.route-timeline svg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:visible; }
.route-timeline .trail{ fill:none; stroke:var(--sea); stroke-opacity:.6; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:5 16; filter:drop-shadow(0 2px 0 rgba(0,0,0,.04)); }
[data-theme="dark"] .route-timeline .trail{ stroke-opacity:.7; filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.route-stop{ position:absolute; transform:translate(-50%, -50%); z-index:1; width:min(320px, 44vw); }
/* Background etchings (blended images, no opaque boxes) */
.route-global::before,
.route-global::after,
.route-pt::after{
content:""; position:absolute; z-index:0; pointer-events:none; display:block;
width:clamp(140px, 24vw, 280px); aspect-ratio:4/3; background-size:contain; background-repeat:no-repeat; background-position:center;
opacity:.14; mix-blend-mode:multiply; filter:grayscale(1) contrast(.92) brightness(1.03);
}
/* Position drawings: ship placed in left-lower area (per request) */
/* Center-anchor the ship so positioning targets its center */
.route-global::before{ left:14%; top:75%; transform:translate(-50%, -50%); background-image:url('assets/watermarks/caravel.jpg'); }
.route-global::after { left:83%; top:40%; background-image:url('assets/watermarks/lighthouse.jpg'); }
/* Readjusted wheel position/size for Portugal chapter */
.route-pt::after { left:86%; top:85%; background-image:url('assets/watermarks/wheel.jpg'); width:clamp(110px, 18vw, 220px); aspect-ratio:1/1; }
[data-theme="dark"] .route-global::before,
[data-theme="dark"] .route-global::after,
[data-theme="dark"] .route-pt::after{ opacity:.32; filter:invert(1) grayscale(1) contrast(1.05) brightness(1.1); mix-blend-mode:screen; }
/* Additional etched watermarks for Portugal chapter (ship + lighthouse) */
.route-pt .etching{
position:absolute; z-index:0; pointer-events:none; display:block;
width:clamp(140px, 24vw, 280px); aspect-ratio:4/3; background-size:contain; background-repeat:no-repeat; background-position:center;
opacity:.14; mix-blend-mode:multiply; filter:grayscale(1) contrast(.92) brightness(1.03);
}
.route-pt .etching-ship{ left:16%; top:78%; transform:translate(-50%, -50%); background-image:url('assets/watermarks/caravel.jpg'); }
.route-pt .etching-lighthouse{ left:84%; top:36%; transform:translate(-50%, -50%); background-image:url('assets/watermarks/lighthouse.jpg'); }
[data-theme="dark"] .route-pt .etching{ opacity:.32; filter:invert(1) grayscale(1) contrast(1.05) brightness(1.1); mix-blend-mode:screen; }
/* Global Journey etched watermark (Goa) - anchored to journeyPage, not notes */
#journeyPage > .etching{
position:absolute; z-index:0; pointer-events:none; display:block;
width:clamp(160px, 22vw, 320px); aspect-ratio:4/3; background-size:contain; background-repeat:no-repeat; background-position:center;
opacity:.22; mix-blend-mode:multiply; filter:grayscale(1) contrast(.88) brightness(1.20) saturate(1.08);
/* Per-watermark masks provide the natural edge */
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
#journeyPage > .etching-goa{ left:88%; top:8%; transform:translate(-50%, -50%) rotate(2deg); background-image:url('Goa.jpg');
/* Elliptical, offset feather for natural, non-circular edge */
-webkit-mask-image: radial-gradient(115% 82% at 58% 54%, rgba(0,0,0,1) 74%, rgba(0,0,0,0) 99%);
mask-image: radial-gradient(115% 82% at 58% 54%, rgba(0,0,0,1) 74%, rgba(0,0,0,0) 99%);
}
/* Ship watermark at top-left corner for Journey */
#journeyPage > .etching-ship-tl{
left:15%; top:7.5%; transform:translate(-50%, -50%) rotate(-8deg) scale(.9);
background-image:url('ship.jpg');
/* Crop out writing by zooming and focusing on boat */
background-size:170%;
background-position:38% 52%;
/* Gentle feathered ellipse to blend edges */
-webkit-mask-image: radial-gradient(120% 90% at 52% 50%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 98%);
mask-image: radial-gradient(120% 90% at 52% 50%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 98%);
}
/* Dark mode: make the ship watermark circular */
[data-theme="dark"] #journeyPage > .etching-ship-tl{
-webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 74%);
mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 74%);
border-radius:50%;
}
[data-theme="dark"] #journeyPage > .etching{ opacity:.34; filter:invert(1) grayscale(1) contrast(1.00) brightness(1.16) saturate(1.08); mix-blend-mode:screen; }
/* Disable watermarks in the global Journey section */
.route-global::before,
.route-global::after{ display:none !important; content:none; }
/* Slight slant for all Journey sticky notes */
.route-stop .note{ --tilt:-2deg; }
.route-stop.right .note{ --tilt:2deg; }
.route-stop .note h4{ display:flex; align-items:center; gap:.45rem; }
/* US stop: NYC watermark above the sticky note (note is base) */
.route-global .route-stop:nth-of-type(2) .note{ position:relative; }
.route-global .route-stop:nth-of-type(2) .note::after{
content:""; position:absolute; left:50%; top:-92px; transform:translateX(-50%);
width:calc(100% + 48px); height:120px; pointer-events:none;
background-image:url('NYC.jpg'); background-size:contain; background-repeat:no-repeat; background-position:bottom center;
opacity:.15; filter:grayscale(1) contrast(.92) brightness(1.05) saturate(.9) blur(.2px); mix-blend-mode:multiply; z-index:1;
/* Feathered oval mask for a more natural watermark edge (light mode) */
-webkit-mask: radial-gradient(138% 110% at 50% 92%, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 100%);
mask: radial-gradient(138% 110% at 50% 92%, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 100%);
}
[data-theme="dark"] .route-global .route-stop:nth-of-type(2) .note::after{
/* Dark: match lighthouse style (screen blend, gentle contrast/brightness) */
opacity:.32; mix-blend-mode:screen;
filter: invert(1) grayscale(1) contrast(1.05) brightness(1.10) saturate(1.06);
-webkit-mask: radial-gradient(135% 120% at 50% 88%, rgba(0,0,0,1) 74%, rgba(0,0,0,0) 100%);
mask: radial-gradient(135% 120% at 50% 88%, rgba(0,0,0,1) 74%, rgba(0,0,0,0) 100%);
}
/* Rome Colosseum watermark relocated near the mid-route boat */
.route-global .wm-rome{
position:absolute; left:81.5%; top:52.5%; transform:translate(12%, -50%) rotate(-2deg);
width:clamp(260px, 34vw, 460px); height:160px; pointer-events:none;
background-image:url('Rome_watermark.jpg'); background-size:contain; background-repeat:no-repeat; background-position:left center;
opacity:.24; filter:grayscale(1) contrast(.96) brightness(1.15) saturate(.92);
mix-blend-mode:multiply; z-index:-1;
border-radius:48px;
-webkit-mask-image:
radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 60%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.55) 82%, rgba(0,0,0,0) 95%);
mask-image:
radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 60%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.55) 82%, rgba(0,0,0,0) 95%);
}
[data-theme="dark"] .route-global .wm-rome{
opacity:.34;
filter: invert(1) grayscale(1) contrast(1.05) brightness(1.3) saturate(1.05);
mix-blend-mode:screen;
-webkit-mask-image:
radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 60%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.55) 82%, rgba(0,0,0,0) 95%);
mask-image:
radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 60%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.55) 82%, rgba(0,0,0,0) 95%);
}
/* Paris watermark image placed along the canvas (not anchored to sticky note) */
.route-global{ position:relative; }
.route-global{ position:relative; }
.route-global{ position:relative; }
.route-global .wm-paris{
position:absolute; left:9%; top:44%; transform:translate(-50%, -50%) rotate(-15deg); transform-origin:50% 50%;
width:220px; height:auto; opacity:.18; pointer-events:none; z-index:-1;
filter:grayscale(1) contrast(1.04) brightness(1.14);
-webkit-mask: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,.85) 70%, rgba(0,0,0,0) 82%);
mask: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,.85) 70%, rgba(0,0,0,0) 82%);
}
[data-theme="dark"] .route-global .wm-paris{
opacity:.30; mix-blend-mode:screen; filter:invert(1) grayscale(1) contrast(1.04) brightness(1.14);
-webkit-mask: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,.85) 70%, rgba(0,0,0,0) 82%);
mask: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,.85) 70%, rgba(0,0,0,0) 82%);
}
/* Shift Spain stops (Madrid, Galicia) down slightly */
.route-global .route-stop:nth-of-type(5),
.route-global .route-stop:nth-of-type(6){
transform:translate(-50%, -50%) translateY(24px);
}
@media (max-width: 640px){
.route-global .route-stop:nth-of-type(5),
.route-global .route-stop:nth-of-type(6){
transform:translate(-50%, -50%) translateY(20px);
}
}
/* Spain watermarks sizing + click-through */
.wm-spain-matador,
.wm-spain-paella{
position:absolute;
pointer-events:none;
z-index:-1;
opacity:.16;
filter:grayscale(1) contrast(.95) brightness(1.05);
object-fit:contain;
width:220px;
height:auto;
}
.wm-spain-matador{
/* Place to the left side of the Madrid card */
left:4%;
top:75%;
transform:translate(-50%, -50%) rotate(-6deg);
}
.wm-spain-paella{
/* Position beside the Galicia card on the right */
left:95%;
top:97%;
transform:translate(-50%, -50%) rotate(4deg);
}
[data-theme="dark"] .wm-spain-matador,
[data-theme="dark"] .wm-spain-paella{
opacity:.26;
mix-blend-mode:screen;
filter:invert(1) grayscale(1) contrast(1.05) brightness(1.1);
}
/* Eagle watermark removed */
/* Paris watermark removed per request */
/* Porto stop (Global): skyline watermark above the sticky note (anchored to note) */
.route-global .route-stop:nth-of-type(1) .note{ position:relative; }
.route-global .route-stop:nth-of-type(1) .note::after{
content:""; position:absolute; left:50%; top:-60px; transform:translateX(-50%);
width:calc(100% + 16px); height:86px; pointer-events:none;
background-image:url('Porto_bridge.webp'); background-size:contain; background-repeat:no-repeat; background-position:bottom center;
opacity:.16; filter:grayscale(1) contrast(.92) brightness(1.05) saturate(.9) blur(.2px); mix-blend-mode:multiply; z-index:1;
/* Light: feathered oval mask for a natural edge */
-webkit-mask: radial-gradient(118% 94% at 50% 78%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
mask: radial-gradient(118% 94% at 50% 78%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}
[data-theme="dark"] .route-global .route-stop:nth-of-type(1) .note::after{
opacity:.24; mix-blend-mode:screen;
filter: invert(1) grayscale(1) contrast(2.0) brightness(.60) blur(.25px);
-webkit-mask: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
mask: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
}
/* Disable Porto bridge watermark on the first global stop */
.route-global .route-stop:nth-of-type(1) .note::after{
display:none !important; content:none !important; background-image:none !important;
}
/* Porto stop (Portugal Chapter): removed per request */
.year-tag{ display:inline-block; font-weight:800; font-size:.85rem; color:#fff; background:var(--sea); padding:.14rem .5rem; border-radius:.5rem; letter-spacing:.02em; }
[data-theme="dark"] .year-tag{ filter:saturate(115%); }
/* Legacy dynamic watermarks are no longer used */
/* Caravel ship icon that sails along the path */
.caravel{ opacity:.94; filter:drop-shadow(0 2px 4px rgba(0,0,0,.15)); pointer-events:none; }
.caravel *{ vector-effect:non-scaling-stroke; }
/* Make styling independent of