:root {
    --phi: 1.618;
    /* rotating colorspace (using `lch` with luminance and chroma held locally constant) */
    --hue-turn: 0; /* initial */
    --bg-luminance: 83%;
    --bg-chroma: 19%;
    --bg-color-initial: lch(83% 19% 1.618turn);
    /* gutter spaces (gaps, paddings, margins...) */
    --gutter-1: 1.618rem;
    --gutter-2: 0.618rem;
    --gutter-3: 0.309rem;
    --gutter-4: 0.155rem;
    --gutter-5: 0.077rem;
}

.BrowseWrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--gutter-1);
    margin: 0;
    padding: var(--gutter-2);
    min-height: 100vh;
    background-color: lch(var(--bg-luminance) var(--bg-chroma) var(--hue-turn));
}

.BrowseWrapper dfn {
    font-weight: bold;
}

.BrowseWrapper pre {
    margin: 0;
}

.Browse__card {
    display: flex;
    flex-direction: column;
    padding: var(--gutter-3) var(--gutter-4);
    background-color: lch(var(--bg-luminance) var(--bg-chroma) var(--hue-turn));
    border-color: lch(59% var(--bg-chroma) var(--hue-turn));
    border-style: solid;
    border-inline-start-width: var(--gutter-3);
    border-block-start-width: var(--gutter-4);
    border-inline-end-width: 0;
    border-block-end-width: 0;
}

.BrowseWrapper details > summary {
    padding-left: var(--gutter-4);
}

.BrowseWrapper details > summary::before {
    content: '‽';
    display: inline-block;
    transition-property: rotate;
    transition-duration: 0.618s;
    margin-right: var(--gutter-2);
}

.BrowseWrapper details[open] > summary::before {
    rotate: var(--hue-turn);
}

.Browse__card > header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gutter-3);
    align-items: baseline;
    padding-left: var(--gutter-3);
}

.Browse__card > header > :first-child {
    margin: 0;
}

.Browse__card > header:not(:last-child) {
    border-bottom: solid 1px rgba(0,0,0,0.382);
    padding-bottom: var(--gutter-3);
    margin-bottom: var(--gutter-3);
}

.Browse__card > footer {
    padding: var(--gutter-2);
}

dl.Browse__twopleset {
    display: grid;
    grid-template-columns:
        [twople-pred] auto
        [twople-obj] 1fr
    ;
    grid-auto-flow: row;
    row-gap: var(--gutter-3);
    margin: 0;
    padding: 0;
}

dl.Browse__twopleset > dt {
    grid-column: twople-pred;
    display: flex;
    flex-direction: column;
}

dl.Browse__twopleset > dd {
    grid-column: twople-obj;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-5);
}

.Browse__twople {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gutter-3);
    margin: 0;
}

.Browse__blanknode {
    padding: var(--gutter-4);
    border-color: rgba(0,0,0,0.382);
    border-style: solid;
    border-inline-start-width: var(--gutter-3);
    border-block-start-width: var(--gutter-4);
    border-inline-end-width: 0;
    border-block-end-width: 0;
}

.Browse__literal {
    display: flex;
    flex-direction: row;
    gap: var(--gutter-5);
}

.Browse__literal > q {
    flex-basis: 100%;
    font-style: italic;
}
.Browse__literal > q > p {
    margin: 0;
}

.Browse__predicate {
    background-color: lch(from var(--bg-color-initial) 89% c var(--hue-turn));
    padding: 0 var(--gutter-4);
}

.Browse__predicate .Browse__literal {
    padding: 0 var(--gutter-3);
}

.Browse__object {
    background-color: lch(from var(--bg-color-initial) 93% c var(--hue-turn));
    padding: 0 var(--gutter-4);
}

.Browse__object.Browse__blanknode {
    background-color: lch(var(--bg-luminance) var(--bg-chroma) var(--hue-turn));
}