/* =========================
   Webrings page
   ========================= */

.webrings-page{
  --webrings-gap-x: clamp(52px, 6vw, 118px);
  --webrings-gap-y: clamp(20px, 2.6vw, 48px);
  --webrings-card-pad: clamp(14px, 1.8vw, 22px);
  --webrings-meta-gap: 6px;

  /* stack controls */
  --stack-step-base: clamp(6px, 0.7vw, 12px);
  --stack-step-hover-mult: 1.4;
  --stack-step-reserve: calc(var(--stack-step-base) * var(--stack-step-hover-mult));
  --stack-step: var(--stack-step-base);
  --stack-n: 6;                 /* depth */
  --stack-lift: 10px;           /* hover lift */
  --stack-edge: 2px;            /* right/bottom edge on hover/focus */
  --webrings-stack-split-max: clamp(0.8px, 0.16vw, 2.2px);
  --webrings-kick-max: clamp(1.6px, 0.32vw, 4.4px);
  --webrings-overhang-depth: calc(var(--stack-n) * 0.6);
  --webrings-pad-left-bias: clamp(12px, 1.4vw, 28px);
  --webrings-pad-right-trim: clamp(12px, 1.1vw, 24px);
  --webrings-overhang: calc(
    var(--stack-step-reserve) * var(--stack-n)
    + var(--stack-edge)
    + (var(--webrings-stack-split-max) + var(--webrings-kick-max)) * var(--webrings-overhang-depth)
  );

  max-width: none;
  margin: 0;
  padding:
    var(--section-first-gap)
    max(var(--grid-right), calc(var(--grid-right) + var(--webrings-overhang) - var(--webrings-pad-right-trim)))
    var(--section-gap)
    calc(var(--frame-left) + var(--webrings-pad-left-bias));
}

/* Grid */
.webrings-grid{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--webrings-gap-x);
  row-gap: var(--webrings-gap-y);
  align-items: start;
}

.webring-item{
  min-width: 0;

  --sx: 1;      /* +1 => stack goes right */
  --sy: 0.55;   /* positive => stack goes down */
  --tilt: 0deg;
}

/* Card */
.webring-card{
  display: grid;
  gap: var(--webrings-meta-gap);

  justify-items: start;
  text-align: left;

  background: transparent;
  padding: var(--webrings-card-pad);

  text-decoration: none;
  color: inherit;
}

.webring-card:focus-visible{
  outline: 2px solid #000;
  outline-offset: 4px;
}

/* Meta */
.webring-meta{
  display: grid;
  row-gap: var(--meta-gap-tight);
  justify-items: start;
  text-align: left;
}

.webring-title{
  margin: 0;
  font-weight: 400;
  font-size: clamp(24px, 2.15vw, 38px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.webring-desc{
  display: flex;
  flex-wrap: wrap;
  gap: var(--webring-description-gap);
  margin: 0;
  font-weight: 900;
  font-size: clamp(14px, 1.05vw, 18px);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .02em;
  max-width: 34ch;
  margin-top: var(--meta-gap);
}

.webring-stats{
  margin: 0;
  font-weight: 400;
  font-size: var(--label-font);
}

/* =========================
   Webring detail page
   ========================= */

.webring-detail{
  --detail-gap: clamp(12px, 2.1vw, 18px);
  /* Stack system (same pattern as landing) */
  --stack-step-base: clamp(10px, 1.05vw, 18px); /* bigger than landing, since hero is bigger */
  --stack-step-hover-mult: 1.2;
  --stack-step-reserve: calc(var(--stack-step-base) * var(--stack-step-hover-mult));
  --stack-step: var(--stack-step-base);

  --stack-n: 6;            /* IMPORTANT: this matches the 6 shadow layers below */
  --stack-lift: 14px;
  --stack-edge: 3px;

  /* Splay direction */
  --sx: 0.9;
  --sy: 0.6;

  /* default tilt (hover sets it) */
  --tilt: 0deg;

  /* Hero sizing */
  --hero-max: clamp(520px, 44vw, 690px);
  --hero-vh-cap: 58vh;

  max-width: var(--max);
  margin: 0;
  padding: var(--section-first-gap) var(--grid-right) var(--section-gap) var(--frame-left);
}

.webring-detail__hero{
  display: grid;
  gap: 1px;
  margin-top: var(--detail-gap);
  width: 100%;
  max-width: var(--hero-max);
}

.webring-detail__hero:focus-visible{
  outline: none;
}

/* Controls row (prev/next) */
.ring-window__controls{
  --ring-controls-inset-x: 12px;
  --ring-controls-inset-bottom: 12px;
  position: absolute;
  inset: auto var(--ring-controls-inset-x) var(--ring-controls-inset-bottom) var(--ring-controls-inset-x);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  z-index: 5;
  pointer-events: auto;
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear;
}

.ring-window__btn{
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #000;
  font-family: "Apfel Grotezk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(34px, 6vw, 56px);
  line-height: .9;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  touch-action: manipulation;
  transition: transform 140ms ease, opacity 140ms ease;
}

.ring-window__btn[data-ring-next]{
  justify-content: flex-end;
}

/* Desktop: show controls only on hover/focus within the slider */
@media (hover:hover) and (pointer:fine){
  .ring-window--hero .ring-window__controls{
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 4px, 0);
    pointer-events: none;
    transition-delay: 0s, 0s, 140ms;
  }

  .ring-window--hero:hover .ring-window__controls,
  .ring-window--hero:focus-within .ring-window__controls{
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    transition-delay: 0s, 0s, 0s;
  }
}

/* Directional nudge only on desktop hover */
@media (min-width: 861px) and (hover:hover) and (pointer:fine){
  .ring-window__btn[data-ring-prev]:hover{
    transform: translate3d(-4px, 0, 0);
  }

  .ring-window__btn[data-ring-next]:hover{
    transform: translate3d(4px, 0, 0);
  }
}

.ring-window__btn:focus-visible{
  outline: none;
  background: var(--accent);
}

.webring-detail__header{
  display: grid;
  row-gap: var(--meta-gap-tight);
  max-width: var(--max);
  margin-top: var(--meta-gap-tight);
}

.webring-detail__title{
  margin: 0;
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.webring-surf-links{
  display: inline-flex;
  flex-wrap: nowrap;
  gap: clamp(8px, 1.2vw, 14px);
  margin: var(--meta-gap) 0 0;
  align-items: baseline;
  letter-spacing: .02em;
  font-size: var(--label-font);
}

.webring-surf-links a{
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
}

.webring-surf-label{
  text-transform:uppercase;
  font-weight: 700;
}

.webring-surf-arrow{
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
  transition: transform 140ms ease;
}

.webring-surf-prefix{
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.webring-surf-sep{
  font-size: 1.1em;
}

.webring-surf-links a:hover .webring-surf-arrow,
.webring-surf-links a:focus-visible .webring-surf-arrow{
  transform: translate3d(4px, 0, 0);
}

.webring-surf-links a:focus-visible{
  outline: 2px solid #000;
  outline-offset: 3px;
}

.webring-detail__desc{
  display: flex;
  flex-wrap: wrap;
  gap: var(--webring-description-gap);
  margin: 0;
  font-weight: 900;
  font-size: var(--label-font);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .02em;
  margin-top: var(--meta-gap);
}

/* =========================
   Hero “browser window” stack
   ========================= */

.ring-window--hero{
  /* toggled on hover/focus */
  --lift: 0px;
  --edge: 0px;
  --snap-shift-x: 0px;
  --stack-split-x: 0px;
  --stack-split-y: 0px;
  --stack-skew-x: 0px;
  --stack-skew-y: 0px;

  position: relative;
  width: 100%;
  max-width: var(--hero-max);
  aspect-ratio: 16 / 10;
  height: auto;
  max-height: var(--hero-vh-cap);

  border: 3px solid #000;
  border-radius: 2px;
  background: var(--paper);
  overflow: hidden;

  /* reserve space so stack never collides with arrows/title */
  margin-bottom: calc(var(--stack-step-reserve) * var(--stack-n) + var(--stack-edge));

  transform: translate3d(var(--snap-shift-x), var(--lift), 0) rotate(var(--tilt));
  transform-origin: 50% 50%;
  transition: transform 160ms cubic-bezier(.16, 1, .3, 1), box-shadow 160ms ease;
  will-change: transform;

  box-shadow:
    /* black slab layers (6) — with split/skew like landing */
    calc(var(--stack-step) * 1 * var(--sx) + var(--stack-split-x) * 1 + var(--stack-skew-x) * 1)
    calc(var(--stack-step) * 1 * var(--sy) + var(--stack-split-y) * 1 + var(--stack-skew-y) * 1) 0 0 #000,

    calc(var(--stack-step) * 2 * var(--sx) + var(--stack-split-x) * 2 + var(--stack-skew-x) * -1)
    calc(var(--stack-step) * 2 * var(--sy) + var(--stack-split-y) * 2 + var(--stack-skew-y) *  1) 0 0 #000,

    calc(var(--stack-step) * 3 * var(--sx) + var(--stack-split-x) * 3 + var(--stack-skew-x) *  1)
    calc(var(--stack-step) * 3 * var(--sy) + var(--stack-split-y) * 3 + var(--stack-skew-y) * -1) 0 0 #000,

    calc(var(--stack-step) * 4 * var(--sx) + var(--stack-split-x) * 4 + var(--stack-skew-x) * -1)
    calc(var(--stack-step) * 4 * var(--sy) + var(--stack-split-y) * 4 + var(--stack-skew-y) *  1) 0 0 #000,

    calc(var(--stack-step) * 5 * var(--sx) + var(--stack-split-x) * 5 + var(--stack-skew-x) *  1)
    calc(var(--stack-step) * 5 * var(--sy) + var(--stack-split-y) * 5 + var(--stack-skew-y) *  1) 0 0 #000,

    calc(var(--stack-step) * 6 * var(--sx) + var(--stack-split-x) * 6 + var(--stack-skew-x) * -1)
    calc(var(--stack-step) * 6 * var(--sy) + var(--stack-split-y) * 6 + var(--stack-skew-y) * -1) 0 0 #000,

    /* “depth edge” only on hover/focus */
    var(--edge) 0 0 0 #000,
    0 var(--edge) 0 0 #000;
}

.ring-window--hero.is-snap-prev{
  --snap-shift-x: -5px;
  --stack-step: calc(var(--stack-step-base) * 1.08);
  --edge: calc(var(--stack-edge) + 1px);
  --tilt: 0deg;
}

.ring-window--hero.is-snap-next{
  --snap-shift-x: 5px;
  --stack-step: calc(var(--stack-step-base) * 1.08);
  --edge: calc(var(--stack-edge) + 1px);
  --tilt: 0deg;
}

/* Hover only when the WINDOW is hovered */
@media (hover:hover) and (pointer:fine){
  .ring-window--hero:hover{
    --lift: calc(var(--stack-lift) * -1);
    --edge: var(--stack-edge);

    /* optional jagginess (same as before) */
    --stack-split-x: clamp(-1px, -0.08vw, -2px);
    --stack-split-y: clamp( 1px,  0.08vw,  2px);
    --stack-skew-x:  clamp( 1px,  0.08vw,  2px);
    --stack-skew-y:  clamp(-1px, -0.08vw, -2px);
  }

  /* spread/tilt comes from the wrapper, but is triggered by window hover */
  .webring-detail__hero:has(.ring-window--hero:hover){
    --stack-step: calc(var(--stack-step-base) * var(--stack-step-hover-mult));
    --tilt: -0.6deg;
  }
}

/* Keyboard: if focus is inside the window (e.g. link/image), match hover */
.webring-detail__hero:has(.ring-window--hero:focus-within){
  --stack-step: calc(var(--stack-step-base) * var(--stack-step-hover-mult));
  --tilt: -0.3deg;
}
.ring-window--hero:focus-within{
  --lift: calc(var(--stack-lift) * -1);
  --edge: var(--stack-edge);
}

/* Reduced motion: no lift/spread */
@media (prefers-reduced-motion: reduce){
  .webring-detail__hero:has(.ring-window--hero:hover),
  .webring-detail__hero:has(.ring-window--hero:focus-within){
    --stack-step: var(--stack-step-base);
    --tilt: 0deg;
  }
  .ring-window--hero:hover,
  .ring-window--hero:focus-within{
    --lift: 0px;
  }
}

/* =========================
   Slider internals
   ========================= */

.ring-window__viewport{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
}

.ring-window__track{
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 205ms cubic-bezier(.22, .8, .2, 1);
  will-change: transform;
}

.ring-window__slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  position: relative;
}

.ring-window__domain{
  position: absolute;
  top: 20px;
  left: 15px;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: 5px 6px;
  border: 2px solid #000;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px #000;
  border-radius: 2px;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: .02em;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear;
}

@media (hover:hover) and (pointer:fine){
  .ring-window--hero .ring-window__domain{
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -2px, 0);
    transition-delay: 0s, 0s, 140ms;
  }

  .ring-window--hero:hover .ring-window__domain,
  .ring-window--hero:focus-within .ring-window__domain{
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s, 0s, 0s;
  }
}

.ring-window__slide:focus-visible{
  outline: 2px solid #000;
  outline-offset: -2px;
}

.ring-window__slide .ring-window__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
  transition: transform 205ms cubic-bezier(.22, .8, .2, 1);
}

[data-ring-slider].is-slide-next .ring-window__slide .ring-window__img{
  transform: translate3d(-1.2%, 0, 0);
}

[data-ring-slider].is-slide-prev .ring-window__slide .ring-window__img{
  transform: translate3d(1.2%, 0, 0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ring-window--hero{ transition: none; }
  .ring-window__track{ transition: none; }
}

/* =========================
   Browser window
   ========================= */

.ring-window{
  /* toggled on hover/focus */
  --lift: 0px;
  --edge: 0px;
  --stack-split-x: 0px;
  --stack-split-y: 0px;
  --stack-skew-x: 0px;
  --stack-skew-y: 0px;

  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;

  border: 3px solid #000;
  border-radius: 2px;
  background: var(--paper);
  overflow: hidden;

  /* reserve space so the stack never collides with title/desc */
  margin-bottom: calc(var(--stack-step-reserve) * var(--stack-n) + var(--stack-edge));

  transform: translate3d(0, var(--lift), 0) rotate(var(--tilt));
  transform-origin: 50% 50%;
  transition: transform 160ms cubic-bezier(.16, 1, .3, 1), box-shadow 160ms ease;
  will-change: transform;

  box-shadow:
    /* black slab layers */
    calc(var(--stack-step) * 1 * var(--sx) + var(--stack-split-x, 0px) * 1 + var(--stack-skew-x, 0px) * 1) calc(var(--stack-step) * 1 * var(--sy) + var(--stack-split-y, 0px) * 1 + var(--stack-skew-y, 0px) * 1) 0 0 #000,
    calc(var(--stack-step) * 2 * var(--sx) + var(--stack-split-x, 0px) * 2 + var(--stack-skew-x, 0px) * -1) calc(var(--stack-step) * 2 * var(--sy) + var(--stack-split-y, 0px) * 2 + var(--stack-skew-y, 0px) * 1) 0 0 #000,
    calc(var(--stack-step) * 3 * var(--sx) + var(--stack-split-x, 0px) * 3 + var(--stack-skew-x, 0px) * 1) calc(var(--stack-step) * 3 * var(--sy) + var(--stack-split-y, 0px) * 3 + var(--stack-skew-y, 0px) * -1) 0 0 #000,
    calc(var(--stack-step) * 4 * var(--sx) + var(--stack-split-x, 0px) * 4 + var(--stack-skew-x, 0px) * -1) calc(var(--stack-step) * 4 * var(--sy) + var(--stack-split-y, 0px) * 4 + var(--stack-skew-y, 0px) * 1) 0 0 #000,
    calc(var(--stack-step) * 5 * var(--sx) + var(--stack-split-x, 0px) * 5 + var(--stack-skew-x, 0px) * 1) calc(var(--stack-step) * 5 * var(--sy) + var(--stack-split-y, 0px) * 5 + var(--stack-skew-y, 0px) * 1) 0 0 #000,
    calc(var(--stack-step) * 6 * var(--sx) + var(--stack-split-x, 0px) * 6 + var(--stack-skew-x, 0px) * -1) calc(var(--stack-step) * 6 * var(--sy) + var(--stack-split-y, 0px) * 6 + var(--stack-skew-y, 0px) * -1) 0 0 #000,

    /* “depth edge” only on hover/focus */
    var(--edge) 0 0 0 #000,
    0 var(--edge) 0 0 #000;
}

.ring-window .ring-shot{
  position: absolute;
  inset: 0;
  z-index: 0; /* under the UI chrome */
  overflow: hidden;
  background: var(--paper);
}

.ring-window .ring-shot img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper);
  display: block;
  pointer-events: none;
  user-select: none;
}

.ring-window--has-image,
.ring-window--has-image .ring-shot,
.ring-window--has-image .ring-shot img{
  background: #000;
}

/* Hover/focus: lift only the top window + show edge */
@media (hover:hover) and (pointer:fine){
  .webring-card:hover{
    --stack-step: calc(var(--stack-step-base) * var(--stack-step-hover-mult));
    --tilt: -0.6deg;
  }
  .webring-card:hover .ring-window{
    --lift: calc(var(--stack-lift) * -1);
    --edge: var(--stack-edge);
  }
}

.webring-card:focus-visible .ring-window{
  --lift: calc(var(--stack-lift) * -1);
  --edge: var(--stack-edge);
}

@media (prefers-reduced-motion: reduce){
  .ring-window{ transition: none; }
  @media (hover:hover) and (pointer:fine){
    .webring-card:hover .ring-window{ --lift: 0px; }
  }
  .webring-card:focus-visible .ring-window{ --lift: 0px; }
}

@media (max-width:2300px){
  .webrings-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width:1100px){
  .webrings-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:720px){
  .webrings-page{
    --webrings-pad-left-bias: 0px;
    --webrings-mobile-overhang: clamp(20px, 6vw, 30px);
    padding:
      var(--section-first-gap)
      calc(var(--frame-right) + var(--webrings-mobile-overhang))
      var(--section-gap)
      var(--frame-left);
  }
  .webring-title{
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.015em;
  }
}
@media (max-width:520px){
  .webrings-grid{ grid-template-columns: 1fr; }
  .webring-detail__header{
  margin-top: var(--meta-gap);
}
.ring-window__domain {
  top: 12px;
  left: 6px;
  padding: 3px 4px;
}
}

/* =========================
   Webring detail: members list
   ========================= */

.ring-members{
  width: 100%;
  margin-top: clamp(28px, 5vw, 52px);
  list-style: none;
  padding: 0;
  margin-left: 0;
  column-width: 160px;
  column-count: 4;
  column-gap: clamp(24px, 3vw, 60px);
  column-fill: balance;
}

.ring-members li{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 clamp(10px, 1.15vw, 16px);
}

.ring-members .member,
.ring-members .member:visited,
.ring-members .member:hover,
.ring-members .member:focus-visible{
  color: #000;
  text-decoration: none;
}

.ring-members .member-bullet{
  font-size: 1.1em;
  line-height: 1;
  color: #000;
  flex: 0 0 auto;
}

.ring-members .site-save-control{
  margin-left: 0.35rem;
}

@media (max-width: 899px){
.webring-detail{
    /* match /webrings/ stack geometry on phones so edge clearance is consistent */
    --stack-step-base: clamp(6px, 0.7vw, 12px);
    --stack-step-hover-mult: 1.4;
    --stack-edge: 2px;
    --sx: 1;
    --sy: 0.55;
    --webring-mobile-overhang: clamp(20px, 6vw, 30px);
    /* match /webrings/ mobile side spacing so hero widths stay consistent */
    padding-left: var(--frame-left);
    padding-right: calc(var(--frame-right) + var(--webring-mobile-overhang));
  }

  .webring-detail__hero{
    --webring-hero-mobile-inset: clamp(14px, 1.8vw, 22px);
    padding-left: var(--webring-hero-mobile-inset);
    padding-right: var(--webring-hero-mobile-inset);
  }

  .ring-window--hero{
    /* tighten distance to controls on mobile while keeping stack depth visible */
    margin-bottom: calc((var(--stack-step-reserve) * var(--stack-n) * 0.65) + var(--stack-edge));
  }

  .ring-window__controls{
    --ring-controls-inset-x: 10px;
    --ring-controls-inset-bottom: 2px;
  }
}