/* dns.lurk.jp — sin recursos externos: si el DNS se cae, la página tiene que seguir cargando. tipografías del sistema, nada de CDN, nada de fuentes web. La pila empieza por -apple-system para que en Mac y iPhone caiga SF Pro, que es la que da el aire de esta maquetación. Fuera de Apple, Segoe y Roboto cumplen: el ritmo lo llevan la escala y el espacio, no la fuente. */ :root { --page: #ffffff; --surface: #f5f5f7; --ink: #1d1d1f; --muted: #6e6e73; --hair: #d2d2d7; --accent: #0d6b62; --blocked: #c0392b; --track: #e8e8ed; --hover: #ebebef; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --r: 18px; --r2: 12px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page: #000000; --surface: #1d1d1f; --ink: #f5f5f7; --muted: #86868b; --hair: #38383c; --accent: #4fd1bd; --blocked: #ff6b57; --track: #2c2c2f; --hover: #2c2c2f; } } :root[data-theme="dark"] { --page: #000000; --surface: #1d1d1f; --ink: #f5f5f7; --muted: #86868b; --hair: #38383c; --accent: #4fd1bd; --blocked: #ff6b57; --track: #2c2c2f; --hover: #2c2c2f; } * { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; letter-spacing: -.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wrap { max-width: 58rem; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 2.5rem); } /* ------------------------------------------------------------- cabecera */ header { position: sticky; top: 0; z-index: 10; background: var(--page); /* si no hay color-mix */ background: color-mix(in srgb, var(--page) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hair); } header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; height: 3rem; } .brand { font-size: .95rem; font-weight: 600; letter-spacing: -.015em; color: inherit; text-decoration: none; } .brand b { color: var(--accent); font-weight: 600; } .themes { display: flex; gap: .1rem; } .themes button { font: inherit; font-size: .78rem; color: var(--muted); background: none; border: 0; border-radius: 980px; padding: .2rem .7rem; cursor: pointer; } .themes button:hover { color: var(--ink); } .themes button[aria-pressed="true"] { background: var(--surface); color: var(--ink); } /* ----------------------------------------------------------------- hero */ .hero { text-align: center; max-width: 44rem; margin: 0 auto; padding: clamp(4rem, 11vw, 7.5rem) 0 clamp(2.5rem, 6vw, 4rem); } .hero h1, .page-title { font-size: clamp(2.4rem, 6.5vw, 3.9rem); line-height: 1.05; letter-spacing: -.028em; font-weight: 600; margin: 0 0 1.25rem; text-wrap: balance; } .hero p, .page-title + .sub { font-size: clamp(1.1rem, 2.4vw, 1.35rem); line-height: 1.4; letter-spacing: -.014em; color: var(--muted); margin: 0 auto; max-width: 34rem; text-wrap: pretty; } /* la portada lleva el hero centrado porque debajo hay rejillas a todo lo ancho. En las páginas de contenido no: ahí el texto va en columna a la izquierda, y un título centrado sobre ella se queda descolgado. */ .hero-page { text-align: left; margin-left: 0; padding-top: clamp(3rem, 8vw, 5rem); } .hero-page .page-title + .sub { margin-left: 0; } /* ------------------------------------------------------------ secciones */ section { padding: 0 0 clamp(3rem, 8vw, 5.5rem); } section > h2, .sec-head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: -.022em; line-height: 1.2; margin: 0 0 1.75rem; } .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; } .sec-head h2 { margin: 0; } .sec-head a, .prose a { color: var(--accent); text-decoration: none; } .sec-head a { font-size: .95rem; } .sec-head a:hover, .prose a:hover { text-decoration: underline; } /* el margen negativo solo cuando .sub va pegado a un titular, que es para lo que se inventó. Suelto detrás de otro bloque se le metía dentro por abajo. */ .sub { color: var(--muted); font-size: .98rem; max-width: 44rem; margin: 1rem 0 0; } h2 + .sub, .sec-head + .sub { margin: -1.25rem 0 1.75rem; } /* ------------------------------------------------------------- tarjetas */ /* 20rem de mínimo fuerza dos columnas en escritorio: con cuatro tarjetas, tres arriba y una suelta abajo queda descompensado. Y a doble ancho la URL del DoH entra en una línea, que era lo que sacaba la barra de scroll. */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; } /* dos valores en una misma tarjeta. Contenido alineado ARRIBA en todas: con el valor pegado al fondo, la tarjeta de DoQ heredaba la altura de esta —que lleva dos— y su dirección quedaba flotando al final, lejos de su etiqueta. */ .card .values { display: grid; gap: .5rem; } .card { background: var(--surface); border-radius: var(--r); padding: 1.75rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .75rem; } .card-top { display: flex; align-items: center; gap: .5rem; } .tag { font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; } .pill { font-size: .68rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--page); border-radius: 980px; padding: .15rem .55rem; } /* balance reparte las líneas a partes iguales en vez de dejar una palabra sola colgando abajo. Va en CSS y no acortando los textos porque el ancho de la tarjeta cambia con la ventana: cualquier texto de longitud fija deja viuda a algún ancho. */ .card p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.45; text-wrap: balance; } /* el valor ES el botón: pinchar en la dirección la copia. Sigue siendo un