/* GENERAL */
* {
    margin:0;
    padding:0;}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;}

h2 {
    margin: 1em;}

p {
    margin: 1em;}

blockquote {
    margin: 1em 40px;}

a:link, a:visited {
    color:#001725;
    text-decoration: none;}

a:hover, a:active {
    text-decoration: line-through;}

td {
    vertical-align: top;
    text-align: left;}

/* MENU: current page (written by menu.js) */
.menu .current {
    color: red;}

/* MENU: current project in the projects line (capsule instead of strikethrough) */
#projects .current {
    text-decoration: none;
    border: 1px solid currentColor;
    border-radius: 1em;
    padding: 0 0.6em;}

/* INTRO TEXT */
.intro {
    width: 50%;}

/* GALLERY WITHOUT CAPTIONS (photography) */
.series {
    border-spacing: 20px;}
.series td {
    width: 33%;}

/* GALLERY WITH THE SAME HEIGHT (un viernes), desktop only: <table class="series same-height">
   every image has the same height and its own width; when a line is full the next image starts a new one.
   on phones the m-swipe rules below do the same thing, so nothing is needed here */
@media (min-width: 701px) {
    .series.same-height {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 20px;}
    .series.same-height tbody,
    .series.same-height tr,
    .series.same-height td {
        display: contents;}
    .series.same-height img {
        width: auto;
        height: 17vw;}}

/* GALLERY WITH CAPTIONS (design, jewelry) */
.works {
    border-spacing: 20px;}
.works td {
    width: 33%;}
.works .caption {
    margin-top: 20px;
    padding-bottom: 30px;}

/* VIDEOS: one per row, keeps 16:9 at any width */
.video {
    width: 560px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1em 0;}
.video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;}

/* MAYO */
body.mayo {
    background-color: #fff1da;}
body.mayo ol {
    margin: 1em 1em 1em 3em;}

/* BITÁCORA (same look as before it used this stylesheet) */
body.bitacora .entries {
    margin: 20px;}
body.bitacora p {
    margin: 1em 0;}

/* ABOUT: portrait */
.portrait {
    display: block;
    width: 288px;
    height: auto;
    margin: 1em;}

/* 404: gif shrinks to fit narrow screens */
.gif404 {
    max-width: 100%;
    height: auto;}


/* ---------- MOBILE (phones, up to 700px wide) ---------- */
@media (max-width: 700px) {

    p, h2 {
        margin: 1em 16px;}
    blockquote {
        margin: 1em 16px;}
    h2 {
        margin-top: 2em;}

    .intro {
        width: auto;}
    .portrait {
        width: 60%;
        margin: 1em 16px;}
    .menu {
        line-height: 2;}
    .menu a {
        padding: 4px 2px;}

    /* HOME: menu on top, image fills the rest of the screen */
    body.home {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;}
    body.home .hero {
        flex: 1;
        min-height: 0;
        width: 100%;
        object-fit: cover;
        object-position: center;}

    /* VIDEOS: edge to edge */
    .video {
        width: 100%;
        margin: 1em 0;}

    /* GALLERIES: tables become plain blocks (one column by default) */
    .series, .series tbody, .series tr, .series td,
    .works, .works tbody, .works tr, .works td {
        display: block;}
    .series td, .works td {
        width: auto;}
    .series tbody, .works tbody {
        padding: 0 16px;}
    .series img, .works img {
        display: block;
        height: auto;}
    .series td {
        margin-bottom: 16px;}
    .works td {
        margin-bottom: 32px;}
    .works td:empty {
        display: none;}
    .works .caption {
        margin-top: 12px;
        padding-bottom: 0;}

    /* GALLERIES: horizontal swipe  -> <body class="m-swipe"> */
    body.m-swipe .series tbody,
    body.m-swipe .works tbody {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        -webkit-overflow-scrolling: touch;
        padding: 0 16px 8px;}
    body.m-swipe .series tbody::after,
    body.m-swipe .works tbody::after {
        content: "";
        flex: 0 0 4px;}

    /* photos: same height, width follows each photo's proportions */
    body.m-swipe .series tr,
    body.m-swipe .series td {
        display: contents;}
    body.m-swipe .series img {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        height: min(56vw, 60vh);
        scroll-snap-align: start;}
    /* same-height gallery (un viernes): 50% taller than the others */
    body.m-swipe .series.same-height img {
        height: min(84vw, 90vh);}

    /* image + caption: same width cards */
    body.m-swipe .works tr {
        display: contents;}
    body.m-swipe .works td {
        flex: 0 0 80vw;
        margin: 0;
        scroll-snap-align: start;}

    /* BITÁCORA: images fit the screen, stacked */
    body.bitacora .entries {
        margin: 16px;}
    body.bitacora img {
        width: auto;
        height: auto;
        max-width: 100%;
        padding: 0 !important;  /* overrides the inline paddings, only on phones */
        margin-bottom: 8px;}
}