*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --bg:#222;
  --bg-soft:#262626;
  --text:#c8c8c8;
  --text-dim:#9a9a9a;
  --line:#333;
  --accent:rgba(200,200,200,.15);
  --accent-strong:rgba(200,200,200,.35);

  font-family:'Share Tech Mono', monospace;
  font-size:17px;
  line-height:1.75;
  background:var(--bg);
  color:var(--text);
  letter-spacing:.1px;
}

body{
  padding:4.5rem 1.25rem 2.25rem;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

main{
  max-width:42ch;
  margin:0 auto;
}

::selection{ background:var(--accent); }

a{
  color:inherit;
  text-decoration:none;
  background-image:linear-gradient(to right,var(--accent),var(--accent-strong));
  background-repeat:no-repeat;
  background-size:300% 40%;
  background-position:0 100%;
  transition:background-position 150ms ease-out;
}
a:hover{ background-position:100% 100%; }

header.hero{
  text-align:center;
  margin-bottom:2.75rem;
}

.avatar{
  width:92px;
  height:92px;
  margin:0 auto 1.35rem;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--bg-soft);
  overflow:hidden;
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

h1{
  font-size:1.4rem;
  font-weight:400;
  margin-bottom:1rem;
}

.intro{
  text-align:left;
}
.intro p + p{ margin-top:.9rem; }
.dim{ color:var(--text-dim); }

section{
  margin-top:2.5rem;
}

section + section{
  border-top:1px solid var(--line);
  padding-top:1.75rem;
}

h2{
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  text-align:center;
  margin-bottom:1.25rem;
  color:var(--text-dim);
}

p + p{ margin-top:.9rem; }

.panel{
  text-align:left;
  padding:1.15rem 1.2rem;
  background:var(--bg-soft);
  border:1px solid var(--line);
}

.faq{
  background:var(--bg-soft);
  border:1px solid var(--line);
}

details{
  padding:1rem 1.2rem;
  border-top:1px dotted var(--line);
}
details:first-of-type{ border-top:none; }

summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:1.5rem;
}

summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+";
  position:absolute;
  right:0;
  color:var(--text-dim);
}
details[open] summary::after{
  content:"–";
}

.answer{
  margin-top:.75rem;
  color:var(--text-dim);
}

.links{
  display:grid;
  gap:.75rem;
}

.link-item{
  display:flex;
  align-items:baseline;
  gap:.75rem;
}

.link-item hr{
  flex:1;
  border:none;
  border-top:1px dotted var(--line);
}

.meta{
  font-size:.85rem;
  color:var(--text-dim);
  white-space:nowrap;
}

.slider{
  background:var(--bg-soft);
  border:1px solid var(--line);
  padding:1.15rem 1.2rem;
}

.slider-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.75rem;
}

.slider-count{
  font-size:.85rem;
  color:var(--text-dim);
  white-space:nowrap;
}

.slides{
  position:relative;
  min-height:15.5rem;
}

.slide{
  display:none;
  text-align:left;
}
.slide.is-active{
  display:block;
}

/* Media box */
.slide-media{
  width:100%;
  aspect-ratio: 3 / 4;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:.85rem;
  position:relative;

  background:
    repeating-linear-gradient(
      45deg,
      #2a2a2a,
      #2a2a2a 10px,
      #262626 10px,
      #262626 20px
    );
}

.slide-media::after{
  content:attr(data-placeholder);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  pointer-events:none;
  padding:1rem;
  text-align:center;
}

.slide-media.has-image{
  background:var(--bg);
}
.slide-media.has-image::after{
  content:"";
}

.slide-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  max-width:100%;
  max-height:100%;
}

.slide h3{
  font-size:1rem;
  font-weight:400;
  margin-bottom:.55rem;
}

.slide p{
  color:var(--text-dim);
}

.slide-actions{
  margin-top:.85rem;
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
}

.btn{
  font:inherit;
  color:inherit;
  background:transparent;
  border:1px solid var(--line);
  padding:.35rem .55rem;
  cursor:pointer;
  border-radius:8px;
  transition:background 150ms ease-out, border-color 150ms ease-out;
}
.btn:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.15);
}
.btn:focus-visible{
  outline:2px solid rgba(255,255,255,.15);
  outline-offset:2px;
}

.slider-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px dotted var(--line);
}

.dots{
  display:flex;
  gap:.45rem;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  flex:1;
}

.dot{
  width:.6rem;
  height:.6rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  cursor:pointer;
  padding:0;
}
.dot.is-active{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
}
.dot:focus-visible{
  outline:2px solid rgba(255,255,255,.15);
  outline-offset:2px;
}

/* Updates / Newsletter */

.newsletter-form {
    margin-top: 15px;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Email input */
.newsletter-form input.inputlogin {
    width: 260px;
    padding: 10px;
    border-radius: 3px;
    background: #181818;
    color: #ffffff;
    border: 0;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}

/* Fix browser autofill & UA styles */
.newsletter-form input.inputlogin::placeholder {
    color: #9a9a9a;
}

/* Submit button */
.newsletter-form button {
    padding: 10px 14px;
    border-radius: 3px;
    background: #181818;
    color: #ffffff;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.newsletter-form button:hover {
    background: #222222;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #181818 inset;
    -webkit-text-fill-color: #ffffff;
}


.recent-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recent-post {
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.recent-post:first-child {
  border-top: 0;
  padding-top: 0;
}

.recent-post__title {
  display: inline-block;
  text-decoration: none;
}

.recent-post__desc {
  margin: 6px 0 0 0;
  opacity: 0.8;
  line-height: 1.4;
}

.small {
  font-size: 0.8em;
  line-height: 1.4;
}

.dim {
  opacity: 0.65;
}




footer{
  margin-top:4rem;
  text-align:center;
  font-size:.85rem;
  color:var(--text-dim);
}

footer nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.85rem;
  flex-wrap:wrap;
}

footer nav a{
  display:inline-block;
  padding:.1rem .2rem;
}

footer nav .sep{
  opacity:.4;
  user-select:none;
}


.scroll-index{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .65rem .75rem calc(.65rem + env(safe-area-inset-bottom));
  z-index: 999;
  pointer-events: none;
}


.scroll-index__pill{
  pointer-events: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;

  padding: .75rem .9rem;
  border-radius: 12px;

  background: rgba(34,34,34,.92);
  border: 1px solid rgba(255,255,255,.10);

  color: inherit;
  font: inherit;
  cursor: pointer;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}


.scroll-index__label{
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}


.scroll-index__dots{
  display: flex;
  gap: .35rem;
  align-items: center;
  opacity: .8;
}

.sidot{
  width: .35rem;
  height: .35rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  display: inline-block;
}


.scroll-index__sheet{
  pointer-events: auto;
  margin-top: .5rem;
  border-radius: 12px;
  overflow: hidden;

  background: rgba(34,34,34,.96);
  border: 1px solid rgba(255,255,255,.10);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}


.scroll-index__item{
  display: block;
  padding: .85rem .95rem;
  border-top: 1px solid rgba(255,255,255,.07);
  color: var(--text-dim);
}

.scroll-index__item:first-child{
  border-top: none;
}

.scroll-index__item:hover{
  color: var(--text);
  background: rgba(255,255,255,.03);
}


.scroll-index__item.is-active{
  color: var(--text);
}


.scroll-index__sheet a{
  background-image: none;
}


@media (max-width: 899px){
  body{
    padding-bottom: 5.25rem;
  }
}


@media (min-width: 900px){
  .scroll-index{
    display: none;
  }
}


.cookie{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  pointer-events: none;
  padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom));
}

.cookie__panel{
  pointer-events: auto;
  max-width: 42ch;
  margin: 0 auto;
  background: rgba(34,34,34,.96);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: .95rem .95rem .85rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cookie__head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .45rem;
}

.cookie__title{
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cookie__text{
  color: var(--text-dim);
  font-size: .9rem;
  line-height: 1.55;
}

.cookie__text a{
  background-image: linear-gradient(to right,var(--accent),var(--accent-strong));
}

.cookie__actions{
  margin-top: .75rem;
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.cookie__actions .btn{
  border-radius: 10px;
  padding: .4rem .6rem;
}

.cookie__secondary{
  opacity: .85;
}

.cookie__settings{
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dotted rgba(255,255,255,.12);
}

.cookie__row{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 0;
  border-top: 1px dotted rgba(255,255,255,.10);
}
.cookie__row:first-child{ border-top:none; padding-top: .2rem; }

.cookie__label{
  display:flex;
  flex-direction: column;
  gap: .15rem;
}

.cookie__label strong{
  font-weight: 400;
  color: var(--text);
  font-size: .95rem;
}

.cookie__label span{
  color: var(--text-dim);
  font-size: .85rem;
  line-height: 1.4;
}


.cookie__toggle{
  display:flex;
  align-items:center;
  gap:.5rem;
  user-select:none;
  white-space:nowrap;
  color: var(--text-dim);
  font-size: .85rem;
}

.cookie__switch{
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  position: relative;
  flex: 0 0 auto;
}

.cookie__knob{
  position:absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  transition: left 120ms ease-out, background 120ms ease-out, border-color 120ms ease-out;
}

.cookie__toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.cookie__toggle input:checked + .cookie__switch .cookie__knob{
  left: 21px;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}

.cookie[hidden]{ display:none !important; }

@media (min-width: 900px){
  .cookie{
    padding: 1rem;
  }
}

.cookie-note{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  pointer-events: none;
  padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom));
}

.cookie-note .cookie__panel{
  pointer-events: auto;
  max-width: 42ch;
  margin: 0 auto;
}



#photography .slider{
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

#photography .slides{
  min-height: 0;
}


#photography .slide-media{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  overflow: hidden;
  margin-bottom: .75rem;


  aspect-ratio: auto !important;
  height: auto !important;
}


#photography .slide-media::after{ content: none !important; }
#photography .slide-media{
  background: none !important;
}


#photography .slide-media img{
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 14px;
}


@media (hover:hover){
  #photography .slide-media{
    transition: transform 160ms ease-out, border-color 160ms ease-out, background 160ms ease-out;
  }
  #photography .slide-media:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
  }
}


#photography .slide h3{
  display: none;
}


#photography .slide p{
  margin: 0;
  color: rgba(200,200,200,.68);
  font-size: .9rem;
  line-height: 1.45;
}


#photography .slide p::before{
  content: "— ";
  opacity: .6;
}