/* Felles uttrykk for teo.scheel.no: Teos egne farger (black & tan) på lav-grått papir. Brukes av bloggen og /dagbok. */
:root{
  --paper:#e8eae3; --polaroid:#fbfaf6; --coat:#16151c; --tan:#b5835a; --tan-ink:#7a5232; --moss:#556b4a;
  --bg:var(--paper); --surface:#f6f6f1; --fg:var(--coat); --muted:#5f5a52; --line:#d2d4ca;
  --accent:var(--coat); --accent-fg:#e6c29c; --accent-soft:#f0dcc2; --link:var(--tan-ink);
  --ok:#476a38; --ok-bg:#dde8d2; --warn:#7d5508; --warn-bg:#f4e3bd; --bad:#a3402c; --bad-bg:#f2d9d0;
  --s0:#e9eae4; --s1:#ece4d6; --s2:#f4e3bd; --s3:#dde8d2; --s4:#c9dcbc;
  --tape:rgb(201 151 107 / .55); --band:#16151c;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif;
  --hand:"Caveat",cursive;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#16151c; --polaroid:#2b2420; --bg:var(--paper); --surface:#26201c; --fg:#efe6da; --muted:#b2a595; --line:#3d342d;
  --accent:#c9976b; --accent-fg:#16151c; --accent-soft:#3b2b1c; --link:#d9a978; --tan-ink:#d9a978;
  --ok:#9cc47f; --ok-bg:#25311d; --warn:#e3bb5e; --warn-bg:#3a2f16; --bad:#ee9580; --bad-bg:#42241d;
  --s0:#2a231f; --s1:#33291f; --s2:#3a2f16; --s3:#25311d; --s4:#2e4122;
  --tape:rgb(181 131 90 / .45); --band:#211c19; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#16151c; --polaroid:#2b2420; --bg:var(--paper); --surface:#26201c; --fg:#efe6da; --muted:#b2a595; --line:#3d342d;
  --accent:#c9976b; --accent-fg:#16151c; --accent-soft:#3b2b1c; --link:#d9a978; --tan-ink:#d9a978;
  --ok:#9cc47f; --ok-bg:#25311d; --warn:#e3bb5e; --warn-bg:#3a2f16; --bad:#ee9580; --bad-bg:#42241d;
  --s0:#2a231f; --s1:#33291f; --s2:#3a2f16; --s3:#25311d; --s4:#2e4122;
  --tape:rgb(181 131 90 / .45); --band:#211c19; color-scheme:dark}

/* Logoen: o-en har to tan-buer over seg, som øyenbrynene til Teo. teo.js hever ett av dem av og til. */
.logo{font-family:var(--display);font-weight:700;letter-spacing:-.03em;color:var(--fg);text-decoration:none;line-height:1;display:inline-block}
.logo .o{position:relative;display:inline-block}
.logo .o::before,.logo .o::after{content:"";position:absolute;top:.07em;width:.2em;height:.11em;border-top:.055em solid var(--tan);border-radius:50% 50% 0 0;transition:transform .2s ease-out}
.logo .o::before{left:calc(50% - .22em);transform:rotate(14deg)}
.logo .o::after{left:calc(50% + .06em);transform:rotate(-14deg)}
.logo .o.raise-l::before{transform:translateY(-.08em) rotate(2deg)}
.logo .o.raise-r::after{transform:translateY(-.08em) rotate(-2deg)}
@media (prefers-reduced-motion:reduce){.logo .o::before,.logo .o::after{transition:none}}

/* ---------- Hjemmesiden og innleggene ---------- */
.blog{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:18px;line-height:1.6;margin:0;-webkit-text-size-adjust:100%}
/* Store potetrykk i bakgrunnen, som om Teo har tråkket over skjermen */
.blog{background-image:url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><defs><filter id=%22f%22 x=%22-10%25%22 y=%22-10%25%22 width=%22120%25%22 height=%22120%25%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 seed=%224%22 result=%22n%22/><feDisplacementMap in=%22SourceGraphic%22 in2=%22n%22 scale=%224%22 result=%22d%22/><feTurbulence type=%22fractalNoise%22 baseFrequency=%221.6%22 seed=%229%22 result=%22g%22/><feColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.3 1.55%22 result=%22m%22/><feComposite in=%22d%22 in2=%22m%22 operator=%22in%22/></filter></defs><g filter=%22url%28%23f%29%22 fill=%22%23b5835a%22 fill-opacity=%22.2%22 transform=%22rotate%28-22 50 50%29%22><path d=%22M50 50C63 50 77 61 81 74C85 87 77 95 66 93C60 92 56 88 50 88C44 88 40 92 34 93C23 95 15 87 19 74C23 61 37 50 50 50Z%22/><ellipse cx=%2222%22 cy=%2240%22 rx=%228.5%22 ry=%2211.5%22 transform=%22rotate%28-24 22 40%29%22/><ellipse cx=%2239%22 cy=%2224%22 rx=%229%22 ry=%2212.5%22 transform=%22rotate%28-9 39 24%29%22/><ellipse cx=%2261%22 cy=%2224%22 rx=%229%22 ry=%2212.5%22 transform=%22rotate%289 61 24%29%22/><ellipse cx=%2278%22 cy=%2240%22 rx=%228.5%22 ry=%2211.5%22 transform=%22rotate%2824 78 40%29%22/></g></svg>"),url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><defs><filter id=%22f%22 x=%22-10%25%22 y=%22-10%25%22 width=%22120%25%22 height=%22120%25%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 seed=%224%22 result=%22n%22/><feDisplacementMap in=%22SourceGraphic%22 in2=%22n%22 scale=%224%22 result=%22d%22/><feTurbulence type=%22fractalNoise%22 baseFrequency=%221.6%22 seed=%229%22 result=%22g%22/><feColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.3 1.55%22 result=%22m%22/><feComposite in=%22d%22 in2=%22m%22 operator=%22in%22/></filter></defs><g filter=%22url%28%23f%29%22 fill=%22%23b5835a%22 fill-opacity=%22.2%22 transform=%22rotate%2818 50 50%29%22><path d=%22M50 50C63 50 77 61 81 74C85 87 77 95 66 93C60 92 56 88 50 88C44 88 40 92 34 93C23 95 15 87 19 74C23 61 37 50 50 50Z%22/><ellipse cx=%2222%22 cy=%2240%22 rx=%228.5%22 ry=%2211.5%22 transform=%22rotate%28-24 22 40%29%22/><ellipse cx=%2239%22 cy=%2224%22 rx=%229%22 ry=%2212.5%22 transform=%22rotate%28-9 39 24%29%22/><ellipse cx=%2261%22 cy=%2224%22 rx=%229%22 ry=%2212.5%22 transform=%22rotate%289 61 24%29%22/><ellipse cx=%2278%22 cy=%2240%22 rx=%228.5%22 ry=%2211.5%22 transform=%22rotate%2824 78 40%29%22/></g></svg>"),url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><defs><filter id=%22f%22 x=%22-10%25%22 y=%22-10%25%22 width=%22120%25%22 height=%22120%25%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 seed=%224%22 result=%22n%22/><feDisplacementMap in=%22SourceGraphic%22 in2=%22n%22 scale=%224%22 result=%22d%22/><feTurbulence type=%22fractalNoise%22 baseFrequency=%221.6%22 seed=%229%22 result=%22g%22/><feColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.3 1.55%22 result=%22m%22/><feComposite in=%22d%22 in2=%22m%22 operator=%22in%22/></filter></defs><g filter=%22url%28%23f%29%22 fill=%22%23b5835a%22 fill-opacity=%22.2%22 transform=%22rotate%28-28 50 50%29%22><path d=%22M50 50C63 50 77 61 81 74C85 87 77 95 66 93C60 92 56 88 50 88C44 88 40 92 34 93C23 95 15 87 19 74C23 61 37 50 50 50Z%22/><ellipse cx=%2222%22 cy=%2240%22 rx=%228.5%22 ry=%2211.5%22 transform=%22rotate%28-24 22 40%29%22/><ellipse cx=%2239%22 cy=%2224%22 rx=%229%22 ry=%2212.5%22 transform=%22rotate%28-9 39 24%29%22/><ellipse cx=%2261%22 cy=%2224%22 rx=%229%22 ry=%2212.5%22 transform=%22rotate%289 61 24%29%22/><ellipse cx=%2278%22 cy=%2240%22 rx=%228.5%22 ry=%2211.5%22 transform=%22rotate%2824 78 40%29%22/></g></svg>"),url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><defs><filter id=%22f%22 x=%22-10%25%22 y=%22-10%25%22 width=%22120%25%22 height=%22120%25%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 seed=%224%22 result=%22n%22/><feDisplacementMap in=%22SourceGraphic%22 in2=%22n%22 scale=%224%22 result=%22d%22/><feTurbulence type=%22fractalNoise%22 baseFrequency=%221.6%22 seed=%229%22 result=%22g%22/><feColorMatrix in=%22g%22 type=%22matrix%22 values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.3 1.55%22 result=%22m%22/><feComposite in=%22d%22 in2=%22m%22 operator=%22in%22/></filter></defs><g filter=%22url%28%23f%29%22 fill=%22%23b5835a%22 fill-opacity=%22.2%22 transform=%22rotate%2815 50 50%29%22><path d=%22M50 50C63 50 77 61 81 74C85 87 77 95 66 93C60 92 56 88 50 88C44 88 40 92 34 93C23 95 15 87 19 74C23 61 37 50 50 50Z%22/><ellipse cx=%2222%22 cy=%2240%22 rx=%228.5%22 ry=%2211.5%22 transform=%22rotate%28-24 22 40%29%22/><ellipse cx=%2239%22 cy=%2224%22 rx=%229%22 ry=%2212.5%22 transform=%22rotate%28-9 39 24%29%22/><ellipse cx=%2261%22 cy=%2224%22 rx=%229%22 ry=%2212.5%22 transform=%22rotate%289 61 24%29%22/><ellipse cx=%2278%22 cy=%2240%22 rx=%228.5%22 ry=%2211.5%22 transform=%22rotate%2824 78 40%29%22/></g></svg>");background-position:left max(36%, 175px) top 70px,right 6% top 640px,left 4% top 1450px,right 8% top 2300px;background-size:230px,220px,240px,230px;background-repeat:no-repeat}
.blog a{color:var(--link)}
.blog .logo{color:var(--fg)}
.bar,.hero,.wrap,.foot,.page{box-sizing:border-box;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bar,.hero,.wrap,.foot{max-width:1120px}
.bar{padding-top:calc(10px + env(safe-area-inset-top,0px));display:flex;flex-wrap:wrap;gap:0 24px;align-items:center;justify-content:space-between}
.bar .logo{font-size:30px;padding:8px 0}
.bar nav{display:flex;flex-wrap:wrap;font-weight:700;font-size:16px;margin-left:auto}
.bar nav a{text-decoration:none;padding:12px 8px}
.bar nav .login{border:1.5px solid currentColor;border-radius:999px;padding:7px 14px;margin:5px 0 5px 8px}
.bar nav .own{color:var(--fg)}

.hero{padding-top:16px;padding-bottom:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo pic" "intro intro" "facts facts";gap:20px 16px;align-items:center}
.hero .logo{grid-area:logo;margin:0;font-size:clamp(96px,18vw,220px);letter-spacing:-.04em;line-height:.9}
.hero .portrait{grid-area:pic;width:clamp(140px,30vw,380px);--tilt:3deg;padding:8px 8px 0}
.hero .portrait figcaption{font-size:1.2rem;padding:2px 2px 6px}
.intro{grid-area:intro;margin:0;font-size:clamp(19px,2.2vw,22px);max-width:30ch}
.facts{grid-area:facts;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:520px}
.facts div{background:var(--polaroid);padding:12px 16px}
.facts div:last-child:nth-child(odd){grid-column:1 / -1}
.facts dt{font-size:14px;color:var(--muted)}
.facts dd{margin:0;font-weight:700}
@media (min-width:800px){
  .hero{grid-template-areas:"logo pic" "intro pic" "facts pic";gap:24px 64px;padding-top:40px;padding-bottom:64px;align-items:start}
  .hero .portrait{align-self:center;padding:14px 14px 0}
  .hero .portrait figcaption{font-size:1.6rem;padding:6px 4px 12px}
}

.paws{display:flex;justify-content:center;gap:28px;padding:8px 0 40px}
.paws svg{width:34px;height:34px;fill:var(--tan);transform:rotate(90deg) translateX(-7px)}
.paws svg:nth-child(even){transform:rotate(90deg) translateX(7px)}

.head{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline;justify-content:space-between}
.head h2{margin:0;font-family:var(--display);font-size:clamp(30px,4vw,40px);line-height:1.1;letter-spacing:-.015em}
.head p{margin:0;font-size:15px;color:var(--muted)}
.none{font-family:var(--hand);font-size:24px;color:var(--muted);margin:0}

/* Treningsbåndet er alltid mørkt, som pelsen */
.band{background:var(--band);color:#efe6da}
.band .wrap{padding-top:56px;padding-bottom:56px;display:flex;flex-direction:column;gap:24px}
.band .head p,.band .none{color:#b2a595}
.skills{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.skills li{background:#26201c;border:1px solid #3d342d;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ladder{display:flex;gap:3px}
.ladder i{flex:1;height:8px;border-radius:3px;background:#3d342d}
.ladder i.on{background:#c9976b}
.hand{font-family:var(--hand);font-size:22px;color:#d9a978;line-height:1.1}

#innlegg{padding-top:64px;padding-bottom:24px;display:flex;flex-direction:column;gap:28px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px 32px}
.card{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--fg)}
.card .polaroid{display:block;padding:8px 8px 14px}
.card:nth-child(even) .polaroid{--tilt:1.1deg}
.card img,.card .noimg{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover;background:var(--s0)}
.card .when{font-family:var(--hand);font-size:24px;color:var(--tan-ink);line-height:1.1;margin-top:10px}
.card .title{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.15}

#bilder{padding-top:48px;padding-bottom:88px;display:flex;flex-direction:column;gap:28px}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:28px 20px}
.wall .polaroid{display:block;padding:6px 6px 0;text-decoration:none}
.wall .polaroid::before{display:none}
.wall .polaroid:nth-child(3n){--tilt:.8deg}
.wall img{aspect-ratio:1;object-fit:cover}
.wall .cap{display:block;font-family:var(--hand);font-size:20px;color:var(--muted);padding:2px 2px 6px}

.foot{border-top:1px solid var(--line);padding-top:20px;padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:0 24px;justify-content:space-between;align-items:center;font-size:15px;color:var(--muted)}
.foot a{font-weight:700;padding:10px 0}

/* Ett innlegg og «Alle innlegg» */
.page{max-width:640px;padding-top:16px;padding-bottom:48px}
.pagetitle{font-family:var(--display);font-size:clamp(34px,6vw,48px);line-height:1.1;letter-spacing:-.02em;margin:8px 0 32px}
.post{margin:0 0 48px}
/* Potespor mellom innleggene, som om Teo har gått over siden */
.post:not(:last-of-type)::after{content:"";display:block;height:32px;margin-top:40px;background:url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 48%22><g transform=%22translate%2822 14%29 rotate%2890%29%22><g fill=%22%23b5835a%22><ellipse cx=%220%22 cy=%225%22 rx=%229%22 ry=%227.5%22/><ellipse cx=%22-9%22 cy=%22-5%22 rx=%223.6%22 ry=%224.6%22/><ellipse cx=%22-3.2%22 cy=%22-10%22 rx=%223.6%22 ry=%224.8%22/><ellipse cx=%223.2%22 cy=%22-10%22 rx=%223.6%22 ry=%224.8%22/><ellipse cx=%229%22 cy=%22-5%22 rx=%223.6%22 ry=%224.6%22/></g></g><g transform=%22translate%2878 34%29 rotate%2890%29%22><g fill=%22%23b5835a%22><ellipse cx=%220%22 cy=%225%22 rx=%229%22 ry=%227.5%22/><ellipse cx=%22-9%22 cy=%22-5%22 rx=%223.6%22 ry=%224.6%22/><ellipse cx=%22-3.2%22 cy=%22-10%22 rx=%223.6%22 ry=%224.8%22/><ellipse cx=%223.2%22 cy=%22-10%22 rx=%223.6%22 ry=%224.8%22/><ellipse cx=%229%22 cy=%22-5%22 rx=%223.6%22 ry=%224.6%22/></g></g><g transform=%22translate%28134 14%29 rotate%2890%29%22><g fill=%22%23b5835a%22><ellipse cx=%220%22 cy=%225%22 rx=%229%22 ry=%227.5%22/><ellipse cx=%22-9%22 cy=%22-5%22 rx=%223.6%22 ry=%224.6%22/><ellipse cx=%22-3.2%22 cy=%22-10%22 rx=%223.6%22 ry=%224.8%22/><ellipse cx=%223.2%22 cy=%22-10%22 rx=%223.6%22 ry=%224.8%22/><ellipse cx=%229%22 cy=%22-5%22 rx=%223.6%22 ry=%224.6%22/></g></g><g transform=%22translate%28190 34%29 rotate%2890%29%22><g fill=%22%23b5835a%22><ellipse cx=%220%22 cy=%225%22 rx=%229%22 ry=%227.5%22/><ellipse cx=%22-9%22 cy=%22-5%22 rx=%223.6%22 ry=%224.6%22/><ellipse cx=%22-3.2%22 cy=%22-10%22 rx=%223.6%22 ry=%224.8%22/><ellipse cx=%223.2%22 cy=%22-10%22 rx=%223.6%22 ry=%224.8%22/><ellipse cx=%229%22 cy=%22-5%22 rx=%223.6%22 ry=%224.6%22/></g></g></svg>") center/auto 32px no-repeat;opacity:.8}
.post .when{font-family:var(--hand);font-size:1.5rem;color:var(--tan-ink);line-height:1.1;margin:0}
.post h2{font-family:var(--display);font-size:clamp(1.6rem,6vw,2.1rem);line-height:1.12;letter-spacing:-.015em;margin:4px 0 16px}
.post h2 a{color:inherit;text-decoration:none}
.post p{margin:0 0 1em}
.photos{display:flex;flex-direction:column;gap:28px;margin:24px 0 28px}
.polaroid{margin:0;background:var(--polaroid);padding:10px 10px 0;box-shadow:0 1px 2px rgb(22 21 28 / .18),0 8px 24px rgb(22 21 28 / .10);position:relative;transform:rotate(var(--tilt,-1.2deg))}
.photos .polaroid:nth-child(even){--tilt:1.1deg}
.polaroid img{display:block;width:100%;height:auto;background:var(--s0)}
.polaroid figcaption{font-family:var(--hand);font-size:1.35rem;color:var(--muted);padding:6px 4px 10px}
.polaroid::before{content:"";position:absolute;top:-12px;left:50%;width:92px;height:26px;margin-left:-46px;background:var(--tape);transform:rotate(-3deg)}
@media (min-width:700px){.photos{gap:36px}.photos .polaroid{padding:14px 14px 0}}