/* --------------------------------------------------------------------------
   Where Is Marcos? — site styles
   Fonts are loaded via <link> in inc/template.php.
   The block below replaces Tailwind's "preflight" reset (the only part of
   Tailwind this site ever used) so there is no build step.
   -------------------------------------------------------------------------- */
html { line-height:1.5; -webkit-text-size-adjust:100%; }
*, *::before, *::after { box-sizing:border-box; }
body, h1, h2, h3, p, figure, blockquote { margin:0; }
h1, h2, h3 { font-size:inherit; font-weight:inherit; }
a { color:inherit; text-decoration:inherit; }
b, strong { font-weight:bolder; }
em, i, address, cite, dfn, var { font-style:normal; }
img, svg, video { display:block; max-width:100%; }
:root { --ink:#24303a; --paper:#f4f4f4; --coral:#af282f; --gold:#516d7e; --navy:#252f37; --shade:#e4e4e4; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; }.wrap { width:min(1160px, calc(100% - 64px)); margin:0 auto; }
.nav { height:89px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(16,25,32,.24); font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.06em; }.wordmark,.nav-link,.language-switcher { color:inherit; text-decoration:none; }.wordmark { font-weight:500; }.pin { color:var(--coral); font-size:18px; vertical-align:-1px; margin-right:5px; }.nav-link,.language-switcher { padding:10px 0; border-bottom:1px solid var(--ink); }.nav-link span { color:var(--coral); padding-left:6px; }.language-switcher { color:var(--coral); font-weight:500; }
.hero { min-height:650px; display:grid; grid-template-columns:1.04fr .96fr; gap:7%; align-items:center; padding:76px 0 90px; }.kicker,.section-label,.card-eyebrow { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.12em; }.kicker { color:var(--coral); margin:0 0 20px; }h1,h2 { font-family:"Fraunces",Georgia,serif; font-weight:500; letter-spacing:-.055em; line-height:.92; margin:0; }h1 { font-size:clamp(66px,8.4vw,119px); }h1 em,h2 em { color:var(--coral); }.answer { margin:34px 0 27px; font-family:"Fraunces",Georgia,serif; font-size:25px; letter-spacing:-.025em; }.answer strong { font-weight:500; }.button { display:inline-flex; align-items:center; gap:26px; background:var(--ink); color:var(--paper); text-decoration:none; padding:14px 17px 14px 20px; font-size:14px; font-weight:500; border-radius:2px; transition:transform .2s, background .2s; }.button:hover { background:var(--coral); transform:translateY(-2px); }
.postcard { position:relative; min-height:410px; overflow:hidden; border-radius:5px; background:var(--gold); box-shadow:14px 15px 0 var(--shade); transform:rotate(2.3deg); }.danang-photo { background-position:center; background-size:cover; } /* image set inline; the filename can change from the dashboard */.photo-shade { position:absolute; inset:0; border-radius:5px; background:linear-gradient(180deg,rgba(16,25,32,.03),rgba(16,25,32,.45)); }.location-tag { position:absolute; right:23px; bottom:28px; z-index:2; background:var(--paper); padding:9px 12px; font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.08em; }.location-dot{color:var(--coral);padding-right:3px}
.now { background:var(--ink); color:var(--paper); padding:85px 0 92px; }.now-grid{display:grid;grid-template-columns:1fr 2.2fr;gap:8%}.section-label{color:var(--gold);margin:8px 0}.now h2{font-size:clamp(38px,5vw,65px);color:var(--paper)}.now p:not(.section-label){max-width:565px;margin:30px 0 0;color:var(--paper);line-height:1.65;font-size:17px}.follow { }.follow-heading{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin-bottom:53px}.follow h2{font-size:clamp(52px,6.3vw,88px);text-align:center}.follow h2 .come{color:var(--ink); font-style:normal}.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.link-card{min-height:310px;border-radius:5px;position:relative;display:flex;flex-direction:column;padding:23px 23px 43px;text-decoration:none;color:var(--paper);background:var(--ink);border:1px solid rgba(16,25,32,.12);transition:transform .2s,box-shadow .2s}.link-card:nth-child(2){background:var(--gold);color:var(--paper)}.link-card:nth-child(3){background:var(--coral);color:var(--paper)}.link-card:hover{transform:translateY(-5px);box-shadow:7px 8px 0 var(--navy)}.link-card.muted{cursor:default}.card-icon{font-family:"Fraunces",serif;font-size:39px;line-height:1;margin-top:38px}.card-title{font-family:"Fraunces",serif;letter-spacing:-.04em;font-size:34px;margin-top:16px}.card-copy{font-size:14px;line-height:1.45;margin-top:8px;color:inherit;opacity:.78}.card-cta{margin-top:auto;font-size:13px;font-weight:600}.card-cta b{font-size:17px;margin-left:7px}.about{display:grid;grid-template-columns:.48fr 1.52fr;gap:8%;align-items:center;padding:115px 0}.portrait-wrap{width:100%;aspect-ratio:3/4;border-radius:5px;justify-self:center;box-shadow:9px 10px 0 var(--shade);overflow:hidden;transform:rotate(-2.3deg)}.portrait{width:100%;height:100%;border-radius:5px;object-fit:cover;object-position:center 42%}.about h2{font-size:clamp(48px,5vw,72px)}.about-copy>p:not(.kicker){max-width:670px;color:var(--ink);opacity:.76;font-size:17px;line-height:1.6;margin:21px 0 0}.about-copy a{color:var(--coral);font-weight:600;text-decoration-thickness:1px;text-underline-offset:3px}.footer{display:flex;justify-content:space-between;border-top:1px solid rgba(16,25,32,.23);padding:26px 0 34px;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--navy)}
@media (max-width:720px){.wrap{width:min(100% - 40px,560px)}.nav{height:70px;font-size:10px}.hero{min-height:auto;grid-template-columns:1fr;gap:54px;padding:56px 0 70px}.postcard{min-height:310px;width:calc(100% - 15px);margin-left:0}.now{padding:64px 0}.now-grid{grid-template-columns:1fr;gap:23px}.follow{padding:76px 0}.follow-heading{display:block;margin-bottom:36px}.follow h2{text-align:center;margin-top:21px}.link-grid{grid-template-columns:1fr}.link-card{min-height:255px}.about{grid-template-columns:1fr;gap:42px;padding:76px 0}.portrait-wrap{width:58%}.footer{display:block;line-height:2}.footer span{display:block}.answer{font-size:22px}}

/* Quick answer — the plain-language "where is he right now" block. */
.quick-answer{border:1px solid rgba(16,25,32,.16);border-radius:5px;padding:30px 34px;margin:0 auto 96px;background:#fff}
.quick-answer h2{font-family:"Fraunces",Georgia,serif;font-size:clamp(24px,2.4vw,31px);letter-spacing:-.035em;line-height:1.05;margin:0}
.quick-answer>p{margin:14px 0 0;font-size:17px;line-height:1.6;max-width:680px;color:var(--ink);opacity:.82}
.quick-answer>p strong{font-weight:600;opacity:1}
.quick-answer .answer-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:18px;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--navy);opacity:.75}
.quick-answer .answer-next{padding-left:18px;border-left:1px solid rgba(16,25,32,.2)}
@media (max-width:720px){.quick-answer{padding:24px;margin-bottom:64px}.quick-answer .answer-next{padding-left:0;border-left:0}}

/* Optional card thumbnail — replaces the ↗ glyph when a link has a `thumb`. */
.card-thumb{width:100%;height:180px;object-fit:cover;object-position:center;border-radius:5px;margin-bottom:2px}
@media (max-width:720px){.card-thumb{height:190px}}
/* Empty-state variant of .card-thumb — same box, no image. */
.card-thumb-empty{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:1px dashed rgba(255,255,255,.4);font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:inherit;opacity:.9}

/* ── Photo carousel ────────────────────────────────────────────────────────
   Full-bleed strip that drifts left forever. Pure CSS: the item list is
   duplicated in the markup, and the track is shifted by exactly one copy's
   width, so the loop point is invisible. Hovering pauses it, and it stops
   entirely for anyone who has asked for reduced motion. */
.gallery{overflow-x:auto;overflow-y:hidden;padding:0 0 96px;cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.gallery::-webkit-scrollbar{display:none}
.gallery.grabbing{cursor:grabbing}
.gallery:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.gallery-track{--gap:16px;display:flex;align-items:flex-start;gap:var(--gap);width:max-content}

.gallery-item{flex:0 0 auto;margin:0;display:flex;flex-direction:column;gap:11px}
.gallery-photo{height:330px;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;aspect-ratio:3/4;border-radius:5px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--shade)}
.gallery-caption{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--navy);opacity:.72;text-align:center;max-width:100%}

@media (max-width:720px){.gallery{padding-bottom:64px}.gallery-photo{height:240px}.gallery-track{--gap:12px}.gallery-caption{font-size:10px}}