/* gilleshavik.com: shared fonts, header and footer. Page styles live in each page. */

/* ---------- fonts (self-hosted, variable) ---------- */
@font-face{font-family:'Newsreader';font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/assets/fonts/newsreader-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/assets/fonts/newsreader-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-display:swap;font-weight:200 800;
  src:url(/assets/fonts/newsreader-latin-opsz-italic.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-display:swap;font-weight:200 800;
  src:url(/assets/fonts/newsreader-latin-ext-opsz-italic.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-display:swap;font-weight:300 900;
  src:url(/assets/fonts/figtree-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-display:swap;font-weight:300 900;
  src:url(/assets/fonts/figtree-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- shared tokens (header and footer only) ---------- */
:root{
  --gh-bg:#F4F1EA; --gh-fg:#1B1E2B; --gh-muted:#5B5E6E; --gh-line:rgba(27,30,43,.16);
  --gh-accent:#A8492F; --gh-on-accent:#F4F1EA; --gh-link:#C93611;
  --gh-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --gh-sans:'Figtree','Helvetica Neue',Arial,sans-serif;
  --gh-pad:clamp(20px,4vw,56px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --gh-bg:#1B1E2B; --gh-fg:#F4F1EA; --gh-muted:#B9B6AC; --gh-line:rgba(244,241,234,.18);
    --gh-accent:#E08A6D; --gh-on-accent:#1B1E2B; --gh-link:#E08A6D;
  }
}
:root[data-theme="dark"]{
  --gh-bg:#1B1E2B; --gh-fg:#F4F1EA; --gh-muted:#B9B6AC; --gh-line:rgba(244,241,234,.18);
  --gh-accent:#E08A6D; --gh-on-accent:#1B1E2B; --gh-link:#E08A6D;
}
/* parts of the site that are always dark (Home's top, Photos) */
.gh--dark,.gf--dark{
  --gh-fg:#F4F1EA; --gh-muted:rgba(244,241,234,.72); --gh-line:rgba(244,241,234,.2);
  --gh-accent:#E08A6D; --gh-on-accent:#1B1E2B; --gh-link:#E08A6D;
}

/* ---------- skip link ---------- */
.gh-skip{position:absolute;left:-9999px;top:0}
.gh-skip:focus{left:16px;top:calc(12px + env(safe-area-inset-top,0px));z-index:50;background:#F4F1EA;color:#1B1E2B;
  padding:8px 14px;border-radius:6px;font:500 14px var(--gh-sans)}

/* ---------- header ---------- */
.gh{position:relative;z-index:10;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:16px clamp(20px,3vw,40px);padding:22px var(--gh-pad);color:var(--gh-fg);font-family:var(--gh-sans);
  border-bottom:1px solid var(--gh-line)}
.gh a{color:var(--gh-fg);text-decoration:none}
.gh-name{font-family:var(--gh-serif);font-size:1.35rem;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.gh-nav{justify-self:end;display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);font-size:15px;font-weight:500}
.gh-nav a{padding:6px 0;white-space:nowrap}
.gh-nav a:not(.gh-pill):hover{color:var(--gh-link)}
.gh-nav a[aria-current="page"]{box-shadow:inset 0 -1.5px 0 var(--gh-accent)}
.gh-pill{padding:10px 20px!important;border-radius:99px;background:var(--gh-accent);color:var(--gh-on-accent)!important;font-weight:600}
.gh-pill:hover{opacity:.9}
.gh-tools{display:flex;align-items:center;gap:14px}
.gh-lang{font-size:13px;letter-spacing:.08em;color:var(--gh-muted)!important;padding:8px 0;white-space:nowrap}
.gh-lang b{color:var(--gh-fg);font-weight:600}
.gh-lang:hover{color:var(--gh-fg)!important}
.gh-theme{width:36px;height:36px;border-radius:50%;border:1px solid var(--gh-line);background:transparent;color:var(--gh-fg);
  display:grid;place-items:center;cursor:pointer;padding:0}
.gh-theme:hover{border-color:var(--gh-fg)}
.gh-theme svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.gh-theme .moon{fill:currentColor;stroke:none}
.gh-theme .sun{display:none}
:root[data-theme="dark"] .gh-theme .moon{display:none}
:root[data-theme="dark"] .gh-theme .sun{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gh-theme .moon{display:none}
  :root:not([data-theme="light"]) .gh-theme .sun{display:block}
}
.gh a:focus-visible,.gh button:focus-visible,.gf a:focus-visible{outline:2px solid var(--gh-accent);outline-offset:3px;border-radius:3px}
.gh--dark{border-bottom-color:var(--gh-line);background:transparent}
.gh--float{position:absolute;top:0;left:0;right:0;border-bottom:0}

@media (max-width:760px){
  .gh{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name tools" "nav nav";padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:12px;row-gap:10px}
  .gh-name{grid-area:name}
  .gh-tools{grid-area:tools}
  .gh-nav{grid-area:nav;justify-self:stretch;gap:18px;font-size:14px;overflow-x:auto;scrollbar-width:none;
    margin:0 calc(-1 * var(--gh-pad));padding:0 var(--gh-pad) 2px}
  .gh-nav::-webkit-scrollbar{display:none}
  .gh-pill{margin-left:auto;padding:8px 16px!important}
}

/* ---------- footer ---------- */
.gf{font-family:var(--gh-sans);font-size:14px;line-height:1.5;color:var(--gh-muted);
  padding:32px var(--gh-pad) calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--gh-line)}
.gf p{margin:0}
.gf-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 32px}
.gf-name{font-family:var(--gh-serif);font-size:1.1rem;color:var(--gh-fg)}
.gf nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.gf nav a{color:var(--gh-muted);text-decoration:none}
.gf nav a:hover{color:var(--gh-link)}
.gf-made{margin-top:14px!important}
.gf-made em{font-family:var(--gh-serif);font-size:15px;color:var(--gh-fg);opacity:.85}

/* ---------- header comes back on the way up ---------- */
/* Scrolling down, the header leaves with the page. Scrolling up, it slides back in at the top. */
.gh-spacer{display:none}
.gh-spacer.on{display:block}
.gh.gh--pinned{position:fixed;top:0;left:0;right:0;z-index:15;background:var(--gh-bg);border-bottom-color:var(--gh-line);
  box-shadow:0 8px 24px rgba(27,30,43,.08);transform:translateY(-100%);transition:transform .32s cubic-bezier(.22,1,.36,1)}
.gh.gh--pinned.gh--shown{transform:none}
.gh--dark.gh--pinned{background:#1B1E2B;box-shadow:0 8px 24px rgba(0,0,0,.3)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .gh.gh--pinned{box-shadow:0 8px 24px rgba(0,0,0,.3)}}
:root[data-theme="dark"] .gh.gh--pinned{box-shadow:0 8px 24px rgba(0,0,0,.3)}
@media (prefers-reduced-motion: reduce){.gh.gh--pinned{transition:none}}