/* ------------------------------------------------------------------ Sjókortapalletta. Grunnurinn er vatnsflötur og dýptarblátt; eini hái liturinn er magenta — viðvörunarliturinn á sjókortum, notaður hér eingöngu á markmiðið og á höfnun. ------------------------------------------------------------------ */ :root{ --paper:#F4F5F6; --panel:#FFFFFF; --panel-2:#EDF0F2; --ink:#0A181F; --ink-2:#47585F; --ink-3:#7B8A91; --rule:#D2DADE; --rule-2:#E5E9EB; --sound:#125A75; --on-sound:#FFFFFF; --band:#B7C7CE; --signal:#AE1C6F; --hero-bg:#06161D; --hero-ink:#EAF1F4; --hero-ink-2:#8CA7B1; --hero-rule:#1B3A47; --hero-line:#5E93A8; --hero-fill-a:#0C2530; --hero-fill-b:#071A22; --buff:#EFE7D2; --buff-ink:#6A5A31; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#060F14; --panel:#0B1920; --panel-2:#0E2028; --ink:#E2EAEE; --ink-2:#9CAEB6; --ink-3:#6E828B; --rule:#20323B; --rule-2:#16252C; --sound:#6DB4D2; --on-sound:#04121A; --band:#35525F; --signal:#F073B2; --hero-bg:#030A0E; --hero-ink:#EAF1F4; --hero-ink-2:#8CA7B1; --hero-rule:#14282F; --hero-line:#4B7C90; --hero-fill-a:#0A1D26; --hero-fill-b:#05121A; --buff:#2E2A1B; --buff-ink:#D6C79B; } } :root[data-theme="dark"]{ --paper:#060F14; --panel:#0B1920; --panel-2:#0E2028; --ink:#E2EAEE; --ink-2:#9CAEB6; --ink-3:#6E828B; --rule:#20323B; --rule-2:#16252C; --sound:#6DB4D2; --on-sound:#04121A; --band:#35525F; --signal:#F073B2; --hero-bg:#030A0E; --hero-ink:#EAF1F4; --hero-ink-2:#8CA7B1; --hero-rule:#14282F; --hero-line:#4B7C90; --hero-fill-a:#0A1D26; --hero-fill-b:#05121A; --buff:#2E2A1B; --buff-ink:#D6C79B; } /* Tvítyngi — enska sjálfgefin, líka þegar JavaScript keyrir ekki. */ /* Afkomandaval skiptir máli: ber sjálft lang="is" eftir að skipt hefur verið um mál, og berort [lang="is"] feldi þá alla siduna. */ :root [lang="is"]{display:none} :root[data-lang="is"] [lang="is"]{display:revert} :root[data-lang="is"] [lang="en"]{display:none} *{box-sizing:border-box} body{ background:var(--paper); color:var(--ink); margin:0; font-family:"Source Serif 4","Iowan Old Style",Georgia,serif; font-size:17.5px; line-height:1.65; -webkit-font-smoothing:antialiased; } .wrap{max-width:1140px; margin:0 auto; padding:0 clamp(20px,4vw,40px)} .col{max-width:66ch} h1,h2,h3,h4,.ui{font-family:Archivo,"Helvetica Neue",Arial,sans-serif} h1{font-size:clamp(2.7rem,6vw,4.6rem); line-height:.98; font-weight:700; letter-spacing:-.032em; margin:0; text-wrap:balance} h2{font-size:clamp(1.6rem,3vw,2.35rem); line-height:1.1; font-weight:700; letter-spacing:-.022em; margin:0 0 .5rem; text-wrap:balance} h3{font-size:1.02rem; font-weight:600; letter-spacing:-.004em; margin:0 0 .3rem} p{margin:0 0 1.1em} a{color:var(--sound); text-decoration-thickness:1px; text-underline-offset:3px} a:focus-visible,button:focus-visible{outline:2px solid var(--signal); outline-offset:3px} .mono,code{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:.85em} .eyebrow{ font-family:Archivo,sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3); margin:0; } .lede{font-size:1.2rem; line-height:1.55; color:var(--ink-2)} /* ---------- masthead ---------- */ .bar{position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--paper) 90%,transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--rule-2)} .bar-in{display:flex; align-items:center; gap:clamp(14px,3vw,28px); padding:12px 0; flex-wrap:wrap} .lockup{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit} .glyph{width:22px; height:22px; flex:none} .lockup b{font-family:Archivo,sans-serif; font-weight:700; font-size:1rem; letter-spacing:-.018em; display:block; line-height:1.15} .lockup em{font-family:Archivo,sans-serif; font-style:normal; font-weight:400; font-size:.7rem; letter-spacing:.06em; color:var(--ink-3); display:block} nav{margin-left:auto; display:flex; gap:clamp(12px,2vw,22px); flex-wrap:wrap; font-family:Archivo,sans-serif; font-size:.79rem} nav a{color:var(--ink-2); text-decoration:none; white-space:nowrap} nav a:hover{color:var(--signal)} .langsw{display:flex; border:1px solid var(--rule); border-radius:1px; overflow:hidden; flex:none} .langsw button{font-family:Archivo,sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.1em; padding:5px 9px; background:transparent; color:var(--ink-3); border:0; cursor:pointer} .langsw button[aria-pressed="true"]{background:var(--sound); color:var(--on-sound)} /* ---------- hero ---------- */ .hero{background:var(--hero-bg); color:var(--hero-ink); position:relative; overflow:hidden} .hero .wrap{position:relative; z-index:2; padding-top:clamp(56px,9vw,104px); padding-bottom:clamp(150px,20vw,210px)} .hero .eyebrow{color:var(--hero-ink-2)} .hero h1{margin:18px 0 0} .hero .sub{font-family:Archivo,sans-serif; font-weight:400; font-size:clamp(1rem,1.7vw,1.2rem); color:var(--hero-ink-2); margin:16px 0 0; max-width:56ch; line-height:1.45} .hero .q{font-size:clamp(1.15rem,2.1vw,1.42rem); font-style:italic; line-height:1.4; margin:34px 0 0; padding-left:20px; border-left:2px solid var(--signal); max-width:50ch} .profil{position:absolute; left:0; right:0; bottom:0; width:100%; height:clamp(150px,20vw,215px); z-index:1} .marks{position:absolute; left:0; right:0; bottom:clamp(150px,20vw,215px); height:0; z-index:2} .mk{position:absolute; bottom:6px; font-family:"IBM Plex Mono",monospace; font-size:.63rem; letter-spacing:.04em; white-space:nowrap; color:var(--hero-ink-2)} .mk.ax{left:52.9%; padding-left:7px} .mk.t3{left:49.8%; transform:translateX(-100%); padding-right:7px; color:var(--signal)} .srcline{position:absolute; z-index:3; bottom:10px; right:0; padding:0 clamp(20px,4vw,40px); font-family:"IBM Plex Mono",monospace; font-size:.62rem; color:var(--hero-ink-2); opacity:.75} /* ---------- lyklatölur ---------- */ .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); border-bottom:1px solid var(--rule)} .stat{padding:26px 24px 26px 0; border-right:1px solid var(--rule-2)} .stat:last-child{border-right:0} .stat b{font-family:Archivo,sans-serif; font-size:2.1rem; font-weight:700; letter-spacing:-.03em; display:block; line-height:1; font-variant-numeric:tabular-nums} .stat span{display:block; font-size:.86rem; color:var(--ink-2); margin-top:9px; max-width:26ch} /* ---------- kaflar ---------- */ section{padding:clamp(52px,7vw,86px) 0; border-bottom:1px solid var(--rule-2)} .head{display:grid; grid-template-columns:64px minmax(0,1fr); gap:clamp(18px,3vw,34px); align-items:start} .sec-no{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--signal); padding-top:.55rem; letter-spacing:.05em} .head .eyebrow{margin-bottom:.75rem} .body{display:grid; grid-template-columns:64px minmax(0,1fr); gap:clamp(18px,3vw,34px)} .body > :first-child{content:""} @media (max-width:760px){ .head,.body{grid-template-columns:1fr} .sec-no{padding-top:0; margin-bottom:.4rem} .body > .spacer{display:none} } .panel{background:var(--panel); border:1px solid var(--rule-2); padding:24px 26px} .note{background:var(--buff); color:var(--buff-ink); padding:18px 22px; border-left:2px solid currentColor; font-size:.97rem} .note p:last-child{margin:0} /* ---------- töflur ---------- */ .scroll{overflow-x:auto; margin:26px 0 0} table{border-collapse:collapse; width:100%; min-width:600px; font-size:.9rem} th{font-family:Archivo,sans-serif; font-size:.66rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:0 16px 9px 0; border-bottom:1px solid var(--rule); white-space:nowrap} td{padding:12px 16px 12px 0; border-bottom:1px solid var(--rule-2); vertical-align:top; font-variant-numeric:tabular-nums} tbody tr:last-child td{border-bottom:0} td.num,th.num{white-space:nowrap} .tag{display:inline-block; font-family:Archivo,sans-serif; font-size:.63rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; padding:2px 7px; border:1px solid currentColor} .tag.ok{color:var(--sound)} /* ---------- verkröð ---------- */ ol.steps{list-style:none; counter-reset:s; padding:0; margin:30px 0 0} ol.steps li{counter-increment:s; display:grid; grid-template-columns:38px 1fr; gap:20px; padding:20px 0; border-top:1px solid var(--rule-2)} ol.steps li::before{content:counter(s,decimal-leading-zero); font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--ink-3); padding-top:3px} ol.steps p{margin:0; font-size:.96rem; color:var(--ink-2); max-width:64ch} /* ---------- rit ---------- */ figure{margin:34px 0 0} figcaption{font-size:.85rem; color:var(--ink-3); margin-top:14px; max-width:66ch} svg text{font-family:Archivo,sans-serif; fill:var(--ink-2)} svg text.val{font-family:"IBM Plex Mono",monospace; font-size:12px} svg text.rowlab{font-size:12.5px; fill:var(--ink); font-weight:600} svg text.tick{font-size:11px; fill:var(--ink-3)} svg .gridline{stroke:var(--rule-2); stroke-width:1} svg .axis{stroke:var(--rule); stroke-width:1} svg .band{fill:var(--band)} svg .target{fill:var(--signal); stroke:var(--panel); stroke-width:2} footer{padding:52px 0 72px; font-size:.87rem; color:var(--ink-2)} footer .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:34px} footer h4{font-family:Archivo,sans-serif; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin:0 0 .7em} footer ul{list-style:none; padding:0; margin:0} footer li{margin-bottom:.35em} .rule{height:1px; background:var(--rule); margin:0} @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}} /* ------------------------------------------------------------------ Myndir á undirsíðum. Myndatextinn ber allt málfar — kortin sjálf eru með málhlutlausum ásum svo ekki þurfi tvær útgáfur af hverri mynd. ------------------------------------------------------------------ */ .mynd{margin:2.2rem 0 2.6rem} .mynd a{display:block;text-decoration:none;border:0} .mynd img{width:100%;height:auto;display:block;background:#fff; border:1px solid var(--rule);border-radius:2px} .mynd a:hover img{border-color:var(--sound)} .myndtexti{font-size:.84rem;line-height:1.55;color:var(--ink-2);margin:.7rem 0 0} .myndtexti strong{color:var(--ink);font-weight:600} .myndnota{font-size:.72rem;color:var(--ink-3);margin:.35rem 0 0; font-family:"IBM Plex Mono",ui-monospace,monospace} /* Innfellt línurit — erfir letur og liti síðunnar, skalast án upplausnartaps */ .mynd-svg{width:100%;height:auto;display:block;background:var(--panel); border:1px solid var(--rule);border-radius:2px; font-family:"Archivo",system-ui,sans-serif} .mynd-svg .reitur{fill:var(--panel-2)} .mynd-svg .kvardi{stroke:var(--rule);stroke-width:1} .mynd-svg .nulllina{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:4 3} .mynd-svg text{fill:var(--ink-2);font-size:12px} .mynd-svg .astala{text-anchor:end;font-family:"IBM Plex Mono",monospace;font-size:11px} .mynd-svg .xmerki{text-anchor:middle;font-family:"IBM Plex Mono",monospace;font-size:11px} .mynd-svg .ymerki,.mynd-svg .xnote{font-size:11px;fill:var(--ink-3)} .mynd-svg .ymerki{text-anchor:middle} .mynd-svg .spjaldstafur{fill:var(--ink);font-weight:700;font-size:13px} .mynd-svg .spjaldheiti{fill:var(--ink);font-size:13px;font-weight:500} .mynd-svg .punktur{opacity:.92} .mynd-svg .punktur.markmid{fill:var(--signal)} .mynd-svg .punktur.vidmid{fill:var(--sound)} .mynd-svg .medaltal{stroke-width:2.6;stroke-linecap:round} .mynd-svg .medaltal.markmid{stroke:var(--signal)} .mynd-svg .medaltal.vidmid{stroke:var(--sound)} /* Skýringar undir línuriti, með litakubbum sem passa við punktana */ .skyring{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:.8rem 0 0; font-size:.8rem;color:var(--ink-2)} .skyring span{display:inline-flex;align-items:center;gap:.45rem} .kubbur{width:.72rem;height:.72rem;border-radius:50%;flex:0 0 auto} .kubbur.markmid{background:var(--signal)} .kubbur.vidmid{background:var(--sound)} /* Til baka á forsíðu */ .aftur{display:inline-block;margin:0 0 1.6rem;font-size:.85rem; color:var(--sound);text-decoration:none} .aftur:hover{text-decoration:underline} /* ------------------------------------------------------------------ Skýringarmyndir forsíðunnar. Allar innfelldar, allar með texta sem tungumálarofinn nær í — engin mynd er til í tveimur útgáfum. ------------------------------------------------------------------ */ .mynd-svg .flotur-logsaga,.mynd-svg .merki-logsaga{fill:var(--band);opacity:.55} .mynd-svg .flotur-land,.mynd-svg .merki-land{fill:var(--sound)} .mynd-svg .flotur-skodad,.mynd-svg .merki-skodad{fill:var(--signal)} .mynd-svg .flotur-tala{fill:var(--ink);font-weight:600;font-size:15px; font-family:"IBM Plex Mono",monospace} .mynd-svg .flotur-undir{fill:var(--ink-2);font-size:11.5px} .mynd-svg .timalina{stroke:var(--rule);stroke-width:1.5} .mynd-svg .timastrik{stroke:var(--rule);stroke-width:1} .mynd-svg .timaar{fill:var(--ink-3);font-size:11px;font-family:"IBM Plex Mono",monospace} .mynd-svg .ferd{opacity:.92} .mynd-svg .kyn1{fill:var(--ink-3)} .mynd-svg .kyn2{fill:var(--band)} .mynd-svg .kyn3{fill:var(--sound)} .mynd-svg .timaskyring{fill:var(--ink-2);font-size:11.5px} .mynd-svg .timanota{fill:var(--ink-2);font-size:12.5px} .mynd-svg .kjarni{fill:none;stroke:var(--signal);stroke-width:1.6} .mynd-svg .kjarnaheiti{fill:var(--ink);font-size:15px;font-weight:600} .mynd-svg .kjarnaundir{fill:var(--ink-2);font-size:11.5px; font-family:"IBM Plex Mono",monospace} .mynd-svg .ormur{fill:none;stroke:var(--rule);stroke-width:1.2} .mynd-svg .ormpunktur{fill:var(--sound)} .mynd-svg .notkunarheiti{fill:var(--ink);font-size:13.5px;font-weight:600} .mynd-svg .notkunartexti{fill:var(--ink-2);font-size:11.5px} /* Erfðaklausan — kjarni erindisins, sett fram sem tilvitnun */ .arfur{border-left:3px solid var(--signal);padding:.2rem 0 .2rem 1.3rem; margin:2rem 0 2.2rem} .arfur p{font-family:"Source Serif 4",Georgia,serif;font-size:1.24rem; line-height:1.5;color:var(--ink);margin:0 0 .7rem} .arfur p:last-child{margin-bottom:0} .arfur em{font-style:italic;color:var(--ink)} @media (max-width:640px){.arfur p{font-size:1.1rem}}