/* gooseinmyshorts.com — common styles used by every page: fonts, base type, links, header strip, navbar, content column, footer.
   Port of the 2013 look (old/css/common.css + main.css): black on white, links #0060c0 with a translucent underline, orange hover, PT Sans.
   Page-specific rules live next to this file: cards.css, video.css, dark.css, button.css, index.css, project.css, projects.css, travel.css, error.css. */

@font-face{font-family:"PT Sans"; src:local("PT Sans"), url("../fonts/PTS55F_W.woff?v=cdf46fca") format("woff"); font-weight:normal; font-style:normal; font-display:swap}
@font-face{font-family:"PT Sans"; src:local("PT Sans Italic"), url("../fonts/PTS56F_W.woff?v=768d36ab") format("woff"); font-weight:normal; font-style:italic; font-display:swap}
@font-face{font-family:"PT Sans"; src:local("PT Sans Bold"), url("../fonts/PTS75F_W.woff?v=87985366") format("woff"); font-weight:bold; font-style:normal; font-display:swap}
@font-face{font-family:"PT Sans"; src:local("PT Sans Bold Italic"), url("../fonts/PTS76F_W.woff?v=6f2183a0") format("woff"); font-weight:bold; font-style:italic; font-display:swap}

*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0; background:#fff; color:#000; font-family:"PT Sans", Arial, sans-serif; font-size:17px; line-height:1.4; text-align:center}
p{margin:10pt 0 0}
h1, h2, h3{margin:0}
img{border:0; max-width:100%; height:auto}

/* links: solid translucent underline = leaves the page (blog convention) */
a{color:#0060c0; text-decoration:none; border-bottom:1px solid rgba(0,96,192,.27)}
a:visited{color:#6040a0; border-bottom-color:rgba(96,64,160,.27)}
a:hover{color:#ff8f00; border-bottom-color:rgba(255,143,0,.27)}
a:focus-visible, button:focus-visible{outline:2px solid #ff8f00; outline-offset:2px}
a.img{border:0; display:inline-block; line-height:0}
a.large{font-size:40pt; border-bottom-width:2px; line-height:1.15; display:inline-block}
.large{font-size:40pt; line-height:1.15}
.mono{font-family:"PT Mono", Consolas, "Courier New", monospace}
code{font-family:"PT Mono", Consolas, "Courier New", monospace; font-size:.92em; white-space:nowrap; margin:0 2px; padding:0 5px; border:1px solid #ddd; border-radius:3px; background:#f8f8f8}

/* header strip (the old wallpaper) and the section title inside it */
#topheader{width:100%; height:70px; background:#fff url("../images/site/bg.jpg?v=bf5d0192") repeat-x center bottom / 1024px 70px; text-align:left}
#topheader h1{font-size:clamp(32px, 6vw, 52pt); line-height:1.1; text-align:center; color:#062c51; margin:0 16px}

/* navbar: 14pt items, the active one bold in a thin bordered box. Every item has the same box (padding + a transparent
   border) and reserves the width of its bold label (::after), so nothing moves when another item becomes active;
   the underline is text-decoration, not the link's border, so the box stays the same for both states */
/* --gutter is the side padding; on a notched phone the safe-area insets are added to it */
:root{--gutter:37px; --safe-l:env(safe-area-inset-left, 0px); --safe-r:env(safe-area-inset-right, 0px)}
.navbar{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 9px; font-size:14pt; line-height:22px; margin:0; padding:4px calc(var(--gutter) + var(--safe-r)) 5px calc(var(--gutter) + var(--safe-l)); white-space:nowrap}
.navbar-item, .navbar-item:visited, .navbar-item:hover, .subnav-item, .subnav-item:visited, .subnav-item:hover{display:block; padding:2px 4px 4px; margin-top:-2px; border:1px solid transparent; border-radius:2px; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.navbar-item, .navbar-item:visited{color:#0060c0; text-decoration-color:rgba(0,96,192,.27)}
.navbar-item:hover{color:#ff8f00; text-decoration-color:rgba(255,143,0,.27)}
.navbar-item::after, .subnav-item::after{content:attr(data-label); display:block; height:0; overflow:hidden; visibility:hidden; font-weight:bold}
.navbar > .navbar-item.first, .subnav > .subnav-item:first-child{margin-left:-5px}
.navbar-item.first{margin-right:16px}
.navbar-item.active, .subnav-item.active{font-weight:bold; border-color:#ADCBCE; background:rgba(255,255,255,.5); text-decoration:none}
.navbar-item.active a, .subnav-item.active a{color:#111; border:0}
.navbar-item.active a:hover, .subnav-item.active a:hover{color:#ff8f00}

/* content column */
.content{max-width:1100px; margin:0 auto; padding:0 calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); text-align:left}
.center-title{text-align:center}

/* footer */
.sign{margin:20pt calc(10pt + var(--safe-r)) 20pt calc(10pt + var(--safe-l)); text-align:right; color:#444}

@media (max-width:560px){
  body{font-size:16px}
  :root{--gutter:16px}
  .navbar{padding-top:6px; gap:2px 3px; font-size:16px}
  .navbar-item.first{margin-right:4px}
  a.large, .large{font-size:30px}
}

/* language switcher: a <details> dropdown (rendered only when more than one language is live). Closed it is
   "flag + language name + caret"; open, a small white card lists every language. It is the navbar's last flex item
   with margin-left:auto, so on full-width navbars it sits at the right edge and wraps with the menu when space runs
   out. Same font size and line box as the menu items, top-aligned: its text lands on their baseline in every browser. */
.lang-switch{position:relative; margin-left:auto; align-self:flex-start; z-index:30; font-size:inherit; line-height:22px; text-align:left}
.lang-switch summary{list-style:none; display:inline-block; cursor:pointer; color:#0060c0; padding:0 2px; border-bottom:1px dashed rgba(0,96,192,.27); user-select:none; white-space:nowrap}
.lang-switch summary::-webkit-details-marker{display:none}
.lang-switch summary:hover{color:#ff8f00; border-bottom-color:rgba(255,143,0,.27)}
.lang-switch summary .flag{vertical-align:-1px; margin-right:6px}
.lang-switch .caret{display:inline-block; vertical-align:middle; width:0; height:0; border:4px solid transparent; border-top:5px solid currentColor; border-bottom:0; opacity:.6; margin-left:6px}
.lang-switch[open] .caret{transform:rotate(180deg)}
/* flags: 3:2 boxes (the SVGs stretch to fill), muted until hovered or chosen */
.flag{width:18px; height:12px; flex:none; border-radius:2px; opacity:.7; filter:saturate(.5) contrast(.92)}
.lang-switch summary:hover .flag, .lang-menu a:hover .flag, .lang-menu a.active .flag{opacity:1; filter:none}
.lang-menu{position:absolute; right:0; top:calc(100% + 8px); margin:0; padding:6px 0; list-style:none; min-width:160px; background:#fff; border:1px solid #ddd; border-radius:6px; box-shadow:0 8px 28px rgba(0,0,0,.18); color:#000}
.lang-menu li{margin:0; padding:0}
/* black text on the white card even on dark pages (body.dark a is light blue) */
.navbar .lang-menu a, .navbar .lang-menu a:visited{display:flex; align-items:center; gap:10px; padding:6px 14px; color:#000; border:0; white-space:nowrap; font-size:15px; line-height:22px}
.navbar .lang-menu a:hover{background:#f4f6f8; color:#ff8f00}
.navbar .lang-menu a.active{font-weight:bold}
.lang-menu a.active::after{content:"✓"; margin-left:auto; padding-left:12px; color:#0060c0; font-weight:normal}
/* home and /video: the nav sits on an inline dark plate at the left; the switcher gets its own plate at the right
   edge of the header (as the Tokyo page had), and the nav plate stops short of it so the two never overlap */
body.index #topheader, body.video #topheader{position:relative}
body.index .navbar{max-width:calc(100% - 170px)}
body.index .lang-switch, body.video .lang-switch{position:absolute; right:0; top:0; margin:0; padding:4px calc(var(--gutter) + var(--safe-r)) 6px 14px; border-radius:6px 0 0 6px; background:rgba(15,15,15,.9)}
body.index .lang-switch summary, body.video .lang-switch summary{color:#7fcfff; border-bottom-color:rgba(127,207,255,.33)}
body.index .lang-switch summary:hover, body.video .lang-switch summary:hover{color:#b6e4ff}
body.index .lang-switch summary .flag, body.video .lang-switch summary .flag{opacity:.6}
body.index .lang-menu, body.video .lang-menu{right:calc(var(--gutter) + var(--safe-r))}

@media (max-width:560px){
  .lang-switch .name{display:none}
  .lang-switch summary .flag{margin-right:0}
  body.index .navbar{max-width:calc(100% - 72px)}
  body.index .lang-switch, body.video .lang-switch{padding:4px calc(var(--gutter) + var(--safe-r)) 5px 10px}
}

/* second nav row: the sub-sections of a section (meta.json "tabs"), dashed links, the current one bold */
.subnav{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin:0; padding:0 calc(var(--gutter) + var(--safe-r)) 6px calc(var(--gutter) + var(--safe-l)); font-size:16px; line-height:22px; white-space:nowrap}
.subnav-item, .subnav-item:visited{color:#0060c0; text-decoration-style:dashed; text-decoration-color:rgba(0,96,192,.4)}
.subnav-item:hover{color:#ff8f00; text-decoration-color:rgba(255,143,0,.4)}
/* /video: both rows sit on one dark plate (div.navs, styled in video.css); the row itself is transparent */
body.video .subnav{margin:0; padding:0 14px 6px calc(var(--gutter) + var(--safe-l))}
body.video .subnav-item, body.video .subnav-item:visited{color:#7fcfff; text-decoration-color:rgba(127,207,255,.4)}
body.video .subnav-item:hover{color:#b6e4ff}
body.video .subnav-item.active{border-color:#5C6A6B; background:transparent}
body.video .subnav-item.active a{color:#fff}

@media (max-width:560px){
  .subnav{gap:2px 4px; font-size:15px}
  body.video .subnav{padding:0 10px 5px calc(var(--gutter) + var(--safe-l))}
}